Layouts
Layouts area is a central place for managing all the layouts available on the website. This includes the pages, blogs and components layouts.
Depending on the website size there might be a large number of layouts available, to quickly find a layout use the top search field:
There are two types of layouts:
Component: layouts used for building components blocks
Controller: layouts that have assigned controllers such as “Show Pages”, “Show Products”, “List Blog Posts” etc. used as default pages / or custom layouts.
To edit a layout click on the “pencil” icon positioned at the right side of the layout item.
The main Edit Layout area is divided into two main sections:
Details - used to configure the layout and determine the type
Layout Areas - used to add specific layout elements such as components, collection components, input types, settings etc. to the layout
Details
Name: The name is used to help identify the layout in the admin interface
Template: determine the structure and look and feel how the layout will appear on the frontend. Main layouts such as Page Default or Blog listing Page will have a Template, while page components will not. If the layout does not have an assigned template it will show as a component on the layout listing page:
Image: use the image field to override the default “puzzle” icon in the components library pop-up:
Category: assign the template to a layout category
Configured Controller: set the controller that will be able to use this layout, eg. Show Pages, Show Products etc.
Layout Areas
Layout area is reserved for managing all the layout areas. Depending on the added area type a list of fields will be available for configuration. An area can be Component Collection, Component, Text, Image, Widget, Input Types. It is also possible to create your own custom types by creating input types that hold specific functionality, and then assign them to an area within a layout, for example - “Show/Hide Announcement Banner”, or similar.
To add a new area click on the “Add layout area”, the new area will be added to the bottom of the layouts area list. To change its position use the drag and drop functionality by clicking on the “double-dots” icon next to the area name and move it to a desired position on the list.
It is also possible to hide/delete areas by clicking on the “eye” / “bin” icons positioned at the top right corner of every Area. Note: lower level users do not have permissions to delete areas, only higher level users can.
For more information on each field hover over the red question / yellow information icons next to each field.
Attribute
Use attributes to group certain layout areas under the “Attributes” tab, for example, a component might have a number of styling settings that can be moved to a group, making the component easier to understand and use:
To add an area to the attribute section of the layout, or in above case component simply enable the “Attribute” toggle on area in the layout area section of the layout:
In order to assign the area to another area available in the list, assign the above area as an attribute attachment to another area.
Note: it is only possible to attach not previously attached areas to an attachment via Attribute attachment. Other attributes will not be shown in the list.
Before assigning Section Shadow:
Areas that are set as attributes will be listed within the yellow area and can be hidden by clicking the “Attributes” button positioned at the top right corner of the component, while areas that are set as not attributes will be listed as “custom fields” within the component.
After assigning “Section Style” to “Shadow Section”:
Section Style in the above case will appear as an extra configuration option for the Shadow Section setting:
This can be useful for grouping two or more settings and tying them together to one custom field, for example:
Custom Field: Heading
Attribute: Font Size
Attribute: Font Weight
Attribute: Font Family
etc.
Use Restrictions
It is possible to set use restrictions or limitations on how the component has to be used. For example the below “Shadow” area has:
Required - must be configured in order to save the page if the layout is used
Default - set the default value for the area it the layout is used
Other areas such as Component Collections allows to determine which layouts are available for selection, this is useful for allowing only relevant layouts to be selected when building pages using components - which makes the page creation a much easier process.
The above area is an example from the “Columns Content” component, which only supports the above selected layouts, while others will be hidden from the components library.
In addition to supported layouts it is also possible to determine the min-max components that have to be created before being able to save the page. For example, there might be a component called 3 Columns Text which only supports 3 columns (not 1, not 2, must be 3), therefore to avoid any surprises on the frontend, a good idea would be to set the limit of min & max values to 3, this way the admin will must add 3 columns to be able to save the page.
Layout Area Groups
For layouts containing a larger number of areas, defining areas as attributes and attaching them to another area sometimes isn't sufficient. For these cases, we have introduced layout area groups, allowing you to create groups of areas and structure content editing accordingly - all without having to add additional sub-components.
Layout Groups section is located under the Layout Area section, eg:
To add a new group to the Layout click on the “Add layout area group” button:
Add a group name - this name will be displayed on the layout within the modules
Create or Add layout areas
Save changes
For the above example, we have used the Page Default Layout, where when editing a page the groups will look like the below:
It is also possible to create multiple groups, in which case they will be presented as accordions with different border colours which makes it easier to differentiate which area belongs to which group:
In the Common > Edit Layout area it is also possible to drag and drop existing layouts between groups & also from the default layout area section into a group:
Example: Groups within the Page Layout
Example: Groups within the Component Layout
Example: Groups within the FAQs Layout
Example: Groups within the Products Layout