All Collections
Using the Layout Tab to view page structure
Using the Layout Tab to view page structure

The Layout panel and status bar are two useful tools in Shogun for quickly viewing a page's structure and locating elements.

Updated over a week ago

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 the Shogun editor. This will open a view that displays a nested list of all the elements in your Shogun content.

Image of the open Layout panel in Shogun Page Builder

Tip: Click the collapse icon at the top of the panel to collapse/expand all nested elements in the list.

Image of the collapse icon in Shogun Page Builder

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.

Image of the status bar in Shogun Page Builder

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.

Image of the device icons in Shogun Page Builder's layout panel

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.

  1. 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.

  2. 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.

Animated graphic of renaming an element in Shogun Page Builder

Related Articles:

Did this answer your question?