What are section templates?

Using elements and section templates, the Editor lets you create beautiful websites quickly and easily without the need for additional code. Elements provide individual objects with which you can build websites, such as icons, buttons, headlines, images, or the like. Section templates combine elements and extend them with additional design options.

Basic knowledge

Section templates are comprised of a container that holds a set of elements. 

For example, the Cards section template combines an image element (orange), a headline element (blue), and a text element (purple) which are placed into a container (red). You can quickly tell if you are working in a section template by the orange border that appears when hovering or clicking. There you can also see the name of the section template 

These pre-built website sections provide customizable styling options. Most section templates provide variants and settings to customize your website across several dimensions.

How to use section templates

Using section templates makes website building a breeze. For example, the Gallery section template lets you choose between several pre-built variants to give your gallery a stunning look that fits your style. Variants are sets of options for a section template. You can customize the section template to your needs by using the settings below. 

Each section template has a unique class (e.g. .preset-gallery-v3-default). When you add a section template to your website, a new block of CSS will automatically be added at the end of the Custom CSS window. The CSS code includes all settings that you have chosen in the setting panel on the left side. This means changing variables in either one will affect the other. 

If you want to build two sections with the same section template but want one to be different (e.g. a different amount of columns) you can simply change the section template class and it will add a new CSS block under a new class name, so the settings of the former section template will not be altered.

Responsive settings

As in the element settings, you can also change the design settings in the section template settings so that it changes according to the device being displayed on and its display size. For example, margins or font size can be adjusted specifically for desktops, tablets, and/or smartphones, so that you have full control over the design of your website on the respective devices at all times.

To do this, use the three device icons (representing the desktop, tablet, and smartphone viewports) at the top of the Editor to switch to the desired view and change the corresponding value for that view specifically.

In the following example, we want to change the number of columns and the gap between the columns in the Logos section template for tablet and mobile. This is Logos on desktop: 

Now this should be adjusted for tablets:

1. First, switch to the tablet view by clicking the tablet icon at the top of the Editor
2. Make sure that you are in the Style tab and have the settings for the section templates open (not Element)
3. Under Layout, change the number of columns - in this case, 6 logos in one row looks good
4. To bring the logos closer together, change the gap value to e.g. 0.5 rem
5. The label color of columns and gap changed to purple (like the tablet icon) indicating that those settings have been adjusted for tablet

Now this should be adjusted for mobile:

1. First, switch to the mobile view by clicking the smartphone icon at the top of the Editor
2. Make sure that you are in the Style tab and have the settings for the section templates open (not Element)
3. Under Layout, change the number of columns - in this case, 2 logos in one row looks good
4. Here it looks better if the logos have a bigger gap, so we change the value to 1 rem
5. The label color of columns and gap changed to yellow (like the smartphone icon) indicating that those settings have been adjusted for the smartphone

Changes in other device views always apply automatically to all smaller devices: All settings that you make in the desktop view apply to all device types unless they are overwritten. If you change settings for the tablet view, the settings are also applied to mobile devices, but not to desktop devices. You might have noticed that you saw purple labels when you switched to smartphone before making changes to the values. After the changes, the labels turned yellow.