Getting Started

The Advanced tab in the editor lets you make changes to any section, container, row, column or element and almost anything in your website builder. This article will cover everything inside the Advanced tab.

Here are the main options inside an Advanced tab:

Fonts and Typography
FlexItem Styling
Animation on scroll
HTML Selectors
Hover Transition
Visibility and Position
Custom Style

1. Fonts and Typography

From here, you can change the font family and set its weight.


⬇️ The GIF below demonstrates what all the options do:

2. FlexItem Styling

You can set an element’s alignment styling here using these options Align Self , Order & Flex Grow .




1️⃣ Align Self: Through this you can align any specific content according to your preference. Refer to the GIF below:





2️⃣ Order: If you have multiple element inside a container you can set the order of specific element using it. Refer to the GIF below:





3️⃣ Flex Grow: It determines how a element(flex items) grow relative to each other to fill available space. A higher value means more growth compared to other items. It basically need when we have multiple element inside a container.

Refer to the GIF below:

3. Animation on Scroll

You can use various animation types on any element, row, or column. There are various animation types for you to choose from, from setting a delay, duration, offset, and many more settings.


⬇️ The GIFs below demonstrate what all the options do:

4. HTML Selector

The HTML Selector option lets you add an HTML ID and a Data Attribute to any row, column, section, or element. Let us see the breakdown below.

HTML ID
Data Attribute

HTML ID

This option allows you to assign an HTML ID to any section, container, column, row, or element. This is handy when you want a link or button to take your visitor to a section on your website.

Below are the steps demonstrating how to use an HTML ID to link a button to a section.

- Let us say we want to link this button…




- …to this section on our website ⬇️





- Write down the HTML ID on this section ⬇️




- Go back to the button, change the button link type to section & write down the HTML ID ⬇️




- Publish your site and visit to check how it works ⬇️





⚠️ Only one HTML ID can only be used for one element, section, row, or column

Data Attribute

Data Attribute is used in adding Custom CSS, and one Data Attribute can be used for multiple elements, sections, rows, and columns.

Below are the steps for adding data attributes to an element ⬇️

- Add a data attribute as shown in the GIF & picture below-







- Copy the data attribute and go to 🔧 Page Settings





- Go to Header Code from the Advanced tab and write down your code






- View the changes after you publish your site.

5. Hover Transition

When you activate a hover effect on any element, row, column, or section, the Hover Transition option lets you set the duration of the hover effect.

This is what the setting looks like:

6. Visibility and Position

In this option, you can change the visibility of any section, row, column, or element on any device. You can also change the position of these objects using Overflow X and Overflow Y.

Let us take a look:

Hiding any item on different devices:

Refer to the GIF as we test out how to hide an element on different devices ⬇️

7. Custom Style

You can add a custom code to your site to make any customization according to your preferences. You can add:

- General CSS
- ‘Before’ CSS
- ‘After’ CSS




💡 The custom CSS option applies only to the specific section, container, or element you select. You cannot reference other elements within it.

Related Articles

How to update SEO Meta?

Save as Symbol

Updated on: 30/05/2024