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:


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



 

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:


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:


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:

  1. Add a group name - this name will be displayed on the layout within the modules

  2. Create or Add layout areas

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