Element location

Markers show which page elements you have already set styles or animations on, and are positioned at the top left corner of the page elements to which they are attached.
To make changes to your styles or animations, click the marker.

Once the editor has loaded, the marker changes to show that the element is being edited. If you click this marker it will close the editor.

Tracking changes to the page content

Please note that there is normally no need to edit the HTML for a page or post, but if you intend to make changes to your pages and posts after you have made changes to styles and / or animations with the plugin then you might want to add some ID’s and tags, as follows:

Markers track the page elements if the page structure changes, so if you add a new paragraph of text before a marker, the marker will move down and stay attached to the original text. However, where there is no unique class or ID available for the marker to attach to, you might find that a marker will attach to a different part of the page (probably the text you have just added). If you intend to edit the page after applying styles or animations, it’s best to add a unique ID to the element you intend to style. You can do this by switching to the ‘Text’ tab in the page editor, and adding an ID. For example, if you have some text that you want to style and are concerned that it might be moved around by future edits, and let’s say the text is ‘My text’, then in the page editor you would wrap it with a div like this: <div id=”unique-id-1″>My text</div> To keep the text from breaking onto a new line, you could add the ‘inline-block’ style: <div id=”unique-id-1″ style=”display:inline-block”>My text</div>

If the element already has a tag, like <img>, you can just add the ID to that. Use anything for the ID but it must not be used anywhere else on the page.

Unattached markers

Responsive themes will often hide page elements on smaller screens, so you might apply styles to an element on a large display then try to re-edit it on a smaller one where it is not displayed. If this happens, the marker will still show but it will move to the top-left corner of the document and will change to show that the element could not be found:

You can still access the editor from the marker, but you won’t be able to see any changes you make on the page element. You can rename or delete the style set or animation as normal.

If you edit a page or post and delete a page element, the marker will move to the next available one. However, if no suitable page element can be found, the marker will become permanently un-attached and will always be at the top left corner of the document.

If you can’t see the marker for an element, check if it has moved to the top-left corner anyway, as that can sometimes happen when styling sliders or other dynamic page content.