This guide covers the following topics:
Viewing Elements in the Layout Panel
Using the "Layout" panel, you can easily locate elements and view your page's structure. This high-level view of a page's layout is most helpful for keeping elements grouped and organized.
To get started, click Layout icon in the left sidebar of Page Builder. This will open a view that displays a nested list of all the elements in your Shogun content.
Tip: Click the collapse icon at the top of the panel to collapse/expand all nested elements in the list.
Viewing and Selecting Elements in the Status Bar
When an element is selected in the editor, a status bar appears at the bottom of the screen. This bar makes it possible to see and select the containing elements of the selected item.
Viewing Elements by Device Visibility
When Visibility settings have been applied to an element, device icons will appear next to that element's name in the Layout panel. These icons reflect which device sizes the element will be visible on.
Example: In the screenshot above, the icons to the right of the highlighted Container item indicate this element is visible on desktop and widescreen devices only. Therefore, the element will not be visible on screens that are the width of tablets and mobile devices.
Renaming Elements in the Layout
Did you know that elements can be given custom names through the layout panel?Renaming elements is another helpful, best practice for keeping page layouts organized.
There are two ways to rename an element.
The 'e' Shortcut Key: When an element is selected in the Layout panel, press the
e
key on your keyboard. This will open a popup in the editor where a custom name for the element can be added.Double-Click the Element Name: Alternatively, double-clicking the name of the element in the Layout will also open the pop-up for renaming elements.
Related Articles: