This guide covers the following topics:

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 the Shogun editor. 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.

It is possible to adjust and change the layout order with the Layout Tab, instead of using the drag handles within the page itself.

As you can see below, to change the order of any elements, you can click and drag a specific element (or group of elements) into a different location on the page.

This can be helpful to utilize when handling a group of elements that would take several clicks to move.

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.

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.

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.

Related Articles: