What is a layout?
A layout is where you assemble widgets to configure digital experiences. Simple and powerful widgets come together to help you manage every critical view in your digital channel.
Layouts are your primary and secondary views that bring together key primary actions, content and functionality to win, interact and retain customers.
Each Layout is part of a template that contains grids that can be modified within a template. Widgets are placed on the grid. In order to publish widgets to a site they should be within a layout grid.
In this article:
Layouts are accessed by going to Site > Builder > Layouts. Layouts have a Parent - Child relationship where you can associate any layout with a parent layout.
In each layout the Name and Path is shown as well as two primary actions:
- Preview where you can view the layout as it is and
- Edit where you can edit the layout, add widgets, change the Name, Path etc.
To the right you'll also see the latest activity related to the layout.
When creating a site for the first time there are 3 layouts which cannot be erased.
- Home: The default home layout for the site.
- Internal: When selecting any item from the home page you'll go to an internal page.
- Me: When an authenticated user registers, this is the customer page.
Creating a New Layout
To create a new layout simply select +New in the top right corner. A modal will appear where you can add the Name, Path and the Parent Layout.
The Path will autocomplete of the Name. You can modify the path to your liking for SEO or findability purposes. When saving you'll be directed to the Layout Builder.
Below in the Layout Builder if you select the Chevron you'll be able to navigate to any layout. To the rigth you can select Preview which will enable you to see how your layout looks before publishing.
When you select Preview the grey bar will appear at the top of the layout. You can preview any layout by changing the URL at the top. By selecting Editable Templates, this will activate the templates that are being edited but not currently live on the site. The default preview shows the layout live on the site. The Editable Templates shows how the layout would look should the edited template be published.
Default widgets that are shown on the right of the layout are:
- Featured: Featured content to showcase specific content.
- Content: Any content that you want to show in a specific grid on the layout.
- Custom: Widgets that you have created with the Widget Builder in your widget library.
By selecting a widget type, you will be redirected to Edit Widget where you can apply different settings to the widget. For example below if I select a Featured Widget:
- I can name the widget
- I can select the type of content to feature. (Content Post, Album, Video)
- The order date or category where the content is to be pulled to show in the widget.
Additional Details about Layouts (Edit Layout)
When you select Edit Layout there are some additional fields related to the layout.
Extract: The extract is relevant for SEO purposes at it provides a description of the content within the layout.
Private: Private layouts are for authenticated customers. The layout can be targeted to specific customers. By selecting Private, the targets appear.
Grid: Grids enable you to select the different ways that widgets will be placed in the layout.
Delete Layout: You can delete all layouts except the Home, Internal, and Me Layouts.
Publishing your Layout
When you publish your Layout select and you'll generate a new version of your layout. If you have workflows activated you'll follow the workflow process that you activated with your reviewers and approvers for the layout. If no workflows are activated your differences will appear and you'll be asked to confirm your changes.
All changes are shown between one version and another by selecting the drop downs next to Version Differences.
Everything deleted is shown in red. Everything added is shown in green. There are two important features to understand with Layout Versions.
Rollback to this version: Rollback will set the version of the layout to the version selected on the left.
Reset to this version: Reset will erase the current version in editing to the version selected on the left.