Open the required document and then open the DOM panel by selecting Window > DOM.
Learn how to use the DOM panel to edit the HTML structure by mapping elements in Live View or applied selectors in CSS Designer with their HTML markup.
The DOM panel renders an interactive HTML tree for static and dynamic content. This view helps you visually map elements in Live View with their HTML markup and the applied selectors in CSS Designer. You can also make edits to the HTML structure in the DOM panel and see the changes take effect instantly in Live View.
To open the DOM panel, select Window > DOM. You can also use the keyboard keys - Ctrl + / (Win); Cmd + / (Mac) - to open the DOM panel.
When you drag elments to directly insert them in Live View, the </> icon appears before you drop the element. You can click this icon to open the DOM panel and insert the element at the appropriate position in the document structure. For more information, see Insert elements directly in Live View.
The DOM panel displays only static elements in Code or Design view, and both static and dynamic elements in Live view.
In fluid grid documents, the DOM panel only lets you visualize the HTML DOM structure and does not let you edit the HTML structure.
You can edit only the static content in the DOM panel. Read-only or dynamic elements are shown in a darker shade of grey.
You can move around the DOM panel and place it at any convenient location on the user interface. You can also dock the panel along with other panels.
Open the required document and then open the DOM panel by selecting Window > DOM.
Switch to Live view and click the element that you want to inspect or edit.
Alternatively, you can select an HTML element in the DOM panel. When you click any element in the DOM panel:
This syncing between different views and CSS Designer lets you visualize the HTML markup and styling associated with the selected element at a glance.
Proceed to edit the element as required (HTML or CSS editing). For information on using the DOM panel to edit the HTML markup, see Edit HTML structure using the DOM panel. For information on CSS Designer, see Laying out pages using CSS Designer.
The current selected element on the page is highlighted in the DOM panel. You can navigate to any node or element using the arrow keys.
Keyboard shortcuts:
A green line appears to indicate where the dragged element will be positioned. If you drop the element over the element highlighted in gray (reference element), then the dropped element is positioned as the first child of the reference element.
You can undo (Ctrl/Cmd + Z) or redo (Ctrl/Cmd + Y) the operations that you perform in the DOM panel.
To perform the above mentioned editing operations on multiple elements, select mutliple elements in the DOM panel:
Typically, when a page is edited, the Refresh button in the Document toolbar changes to Stop button indicating that the page is reloading. After the page is reloaded, the Refresh button appears again to indicate that the page has completely loaded.
Important: If your page contains JavaScript, the right-click menu in the DOM panel gets displayed for a while and then becomes unavailable. To use the right-click menu, hide the Live View displays (Live View options > Hide Live View Displays), and then disable JavaScript (Live View options > Disable JavaScript).
You can edit tags, classes, and IDs by double-clicking them in the DOM panel. You can also add additional classes or IDs by separating them with a space. For tags that are not associated with a class or ID, you can type the name of the class or ID after double-clicking the tag.
Code hints appear as you begin typing the tag, class, or ID name. To narrow down the hints to classes, begin typing with a dot. To see only the IDs in the hints, begin typing with a hash (#).
You can now insert new elements into your web page using the DOM panel in one of the following ways:
When you insert tags using the DOM panel, default (placeholder) text and required attributes for the tags are also inserted:
Prihláste sa do svojho účtu