Section Overview

Author: Henry Pham 1767 views

Let’s discuss how to add, style and customize rows within your pages and layouts.

Section is the largest block, It contains columns and other elements.

1. Adjust section with Navigator

Expand/Collab: See groups of elements by clicking on the triangle icon

Visibility: Show or Hide your column via this option.

Drag to arrange: You can drag and drop an item by hovering your mouse over it.

Right-mouse Click: Some options on this popup will allow you to do some fast actions.

Insert Column: You can feel free to insert a new column for the section.
Save as Template: This option allows you to save the newly configured section as a template. Then you can use it on another page by importing it.
Duplicate: This option allows you to duplicate the section that you just created.
Copy/ Paste: This option allows you to copy/ paste the section that you just created.
Paste Style: This option allows you to paste the style of the section that you just copied. You can view the video below to see how this option works.

You can watch the video below to learn how to save the section as a template and then import it into another page:

Edit icon: Allow you to edit the style of the section when hovering over it.

Add Section: This option allows you to add a new section above the current section. You also can add a new section on the Navigator option.

Rename Section: This option allows you to rename for the section you just added.

Delete Section: This option allows you to delete current section.

Content Width: Set your content width. There are 3 option Default, Boxed and Full width.
Content Height: Set your content height. There are 3 option Default, Fixed to Screen and Min height.
Column Gap: Set the space between each column of variant. This option allow you to change different value from desktop, tablet and mobile.
Vertical Align: Set the content vertical align. There are 6 options Default, Top, Middle, Bottom, Space Between, Space Around and Space Evenly.
Overflow Hidden: Select this option will help to hide any content that flow outside of the section.
HTML Tag: Set an HTML Tag for your section. Choose the tag that you want to use.
Structure: This option allows you to set the structure of the section.
Copy configs: Click this button to copy all your configurations.

You can use different background and border for section between normal and hover state.

Background: Choose between Classic (a single color background), Gradient (gradient background mixed by 2 colors) or an image. Available for desktop, tablet, and mobile devices.
CSS Filters: Adjust only section’s background Blur, Brightness, Contrast, Saturation, Hue.
Transition Duration: Set the time for the background to change from the Normal background to the Hover background.

You can set Background with Normal and Hover mode.

Border: Choose a border style for your section.
Box Shadow: Choose a color and adjust your section with Horizontal, Vertical, Blur, Spread, and Position changes.
Border Radius: Set the border radius value for border (available for desktop, tablet, and mobile devices).
Transition Duration: Set the time for the border to change from the Normal background to the Hover .

You can set the Border with Normal and Hover mode.

Heading color: Configure the color for Heading in this option. You can pick your color or use Global colors in the Global tab.
Text Color: Configure the color for text here.
Link Color: This option allows you to set colors for the link.
Link Hover Color: This option allows you to set the color for the link in Hover mode.
Text Align: Choose an alignment for your text here.