Section Overview

Author: An Do 1645 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 the section with Navigator

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

Add a new section: Add a new section at the very bottom of the page.

Visibility: Show or hide your section via this option.

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

Right-mouse Click: hover over the section name -> Right mouse click -> Some options on this pop-up will allow you to do 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.
Edit: Start to adjust the section’s settings.
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.
Clear Style: This option allows you to clear the style of the section.
Rename: Put a name that helps you quickly find the desired section.
Show Navigator: Define this element’s position on the Navigator bar quickly.
Delete: This option allows you to remove the selected element.

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

2. Layout Options

2.1. Layout

Content Width: Set your content width. There are 2 options:
– Boxed: Set a specific width for the content area. There will be a spacing on both the left and right sides.
– Full width: Allows an element to size itself based on the size of the entire screen. There will be no spacing on both the left and right sides.
Content Height: defines the height of the content area. There are 3 options:
– Default: Sets the height to its default value. It will automatically adjust the height of the section according to the content inside.
– Fixed to Screen: The browser calculates the height based on the full content and other factors.
– Min height: This property sets the minimum height an element’s content area can have. The element will expand beyond this minimum if its content requires more space.
Column Gap: Set the space between each column inside the container.

Align items: Set the vertical alignment of items that lie on the same line.
Content vertical align: Configure the vertical alignment of content.
Horizontal align: Configure the horizontal alignment of content.
Stretch section: Force the section to take the full width of the page.
Overflow Hidden: Select this option to help hide any content that flows outside of the section.

See the video of the Horizontal Align items option for more details:

See the video of the Content vertical align option for more details:

2.2. Structure

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.
Reset structure: Reset the section’s structure to the default.

2.3. Video background

This option allows you to upload the video as a section’s background. You can choose the Video source, then set other attributes for it like Loop, Autoplay, Muted, and autoplay/pause when it is viewed.

3. Design options

3.1. Background

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 the 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.
Use parallax: Set the background to have a parallax effect

You can set Background with Normal and Hover mode.

3.2. Background Overlay

Opacity: Specifies the opacity/transparency of the section.
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 the section’s background Blur, Brightness, Contrast, Saturation, and Hue.
Transition Duration: Set the time for the background to change from the Normal background to the Hover background.

3.2. Border

Border: Choose a border style for your entire 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 the 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.

3.3. Typography

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.