Elementor’s text editor has an annoying feature that causes shortcodes, even when entered as “code,” for the sake of documentation, to convert anyway. You can temporarily combat the feature by entering html entities for left and right square brackets into the “Code: panel of the text editor, but, on subsequent edits, as soon as the widget has been opened with the “Visual” panel active (typically default behavior), the painstakingly added special formatting will be lost, and the shortcode will end up getting processed.
A method I stumbled upon to defeat this tendency was to set the shortcode as the “value” of an input widget. Though the output of these will tend to be off by a good bit – since browsers tend to take over display of inputs, the effect can be combatted by two features of the code below: dynamic setting of the “size” attribute and inline CSS. In addition, the input ought to be set as “readonly.”
/**
* Anti-shortcode shortcode: Allow display of shortcodes without executing them in Elementor text widget and elsewhere
*/
add_shortcode( 'keep-chars', 'shortcode_dont_convert_handler' ) ;
function shortcode_dont_convert_handler( $atts ) {
$a = shortcode_atts( array(
'code' => 'free-webinar',
), $atts ) ;
$num_characters = strlen( $a['code'] ) ;
$unconverted_code = '<input style="text-align: center; display: inline-block; padding: 0; border: none; background-color: #eee; font-family: monospace;" class="keep-chars" size="' . $num_characters . '" readonly="readonly" type="text" value="[' . $a['code'] . ']">' ;
return $unconverted_code ;
}