Mixed inline static-dynamic tags

[Tchelet-Levi]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

I often find myself in situations that require some kind of text widget -- whether it is the Heading Widget or just the plain Text Editor Widget -- to mix static text content with dynamic content.

For example, say I have a thank you page.
I want the primary H1 tag to be

"Thank you {PERSON}! We will contact you at around {TIME}."

where {PERSON} and {TIME} are dynamic tags.

Describe the solution you'd like.

Ideally, the solution I'd like to see is the ability to mix static text with dynamic tags inline.
Similar to how shortcodes work, if we had the ability to interpolate the string with special strings such as {DYNAMIC_TAG}, that would be a very powerful feature.

For example, say in the Heading widget, I would write whatever I wanted, then once I write {DYNAMIC_TAG}, the dynamic tag option would pop up and replace the {DYNAMIC_TAG} portion of the text with the dynamic tags ui. It would then allow me to keep writing text afterwards, or even add more dynamic tags.

Below is a small illustration of how I imagined it.
I do apologize for my crude MS-Paint job, but hopefully it is enough to demonstrate what I mean.

Describe alternatives you've considered.

I have tried adding multiple elements, stacking them together to create one title, however there are two major pains in doing so.

To demonstrate them, let's say for example that to achieve the above, I would need 6 heading widgets and to arrange them as follows:

1. Awesome, thanks
2. Dynamic Tag - Name
3. !
4. We will see on
5. Dynamic Tag - Weekday
6. !

The first major pain point is the fact that the HTML is going to be all messed up.

I can no longer have one <h1>Heading</h1>, as using multiple heading widgets forces me to choose between having multiple <h1>s for each part of the heading (which is awful for accessibility) or to make the entire thing a <span>, effectively removing any heading from the page (which is also bad for accessibility).

The second big issue is the fact that now I have to deal with a bunch of styles from multiple widgets.

1. The container flexbox / grid's settings. I have to manually remove all the gaps and make sure that everything wraps correctly.
2. I have to remove all the margins from all the headings and instead apply it to the container.
3. I have to tweak the kerning and spaces between characters and lines as these segments of the heading are no longer just inline elements inside of a block element, they are block elements inside of a flex/grid container.
4. Then imagine I have media queries, where I want to change the font-size or other things.
   Now I have to apply this to all the widgets.

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.