Best way to do Page-specific edits to Elementor Template?

This is a good question. Ideally Elementor would add a common class to the outermost container element when applying a template e.g.

.elementor-template-id-150

And you would then prefix your MT selectors with that class e.g.

.elementor-template-id-150 h2

But from what I can tell from inspecting the HTML code Elementor generates when applying a template on different pages, there is currently no such common class. And as you mention, templates used on different pages will have different page-ids so MT’s feature for auto-prefixing selectors with the page-id on the body tag doesn’t help.

Therefore, the best workaround I can suggest for now is to add custom classes or ids to Elementor sections within the template. You can add custom classes to a section by clicking the 6-dot Edit section icon and going to the Advanced options on the side panel. These custom classes will carry over to other instances of the template.

The only option in MT for tapping into your custom classes right now is fairly manual. You would need to manually edit MT’s CSS on the Targeting suggestions pane (available with ‘show advanced’ enabled in Targeting mode). So for instance you would change this:

h2

To

.my-custom-section-class h2

In the not too distant I will add an additional field to the CSS modifiers menu where you can enter a custom class that MT will prefix all suggestions with. But right now I’m working on some UI speed optimisations, so it will have to follow that.

Does the above workaround seem doable? Or a bit too much bother?

Cheers,
Sebastian