Getting Started

The Advanced tab in the editor lets you make changes to any row, column, section, 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
Animation on scroll
HTML Selectors
Hover Transition
Visibility and Position
Custom Style

Fonts and Typography

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

⬇️ The GIF below demonstrates what all the options do

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 demonstrates what all the options do

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

This option allows you to assign an HTML ID to any section, 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 ⬇️



Go back to the button, and change the button link type to section, then 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 picture below



Copy the data attribute



Go to 🔧 Page Settings



Go to Header Code and write down your code



View the changes after you publish your site.

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:

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 ⬇️

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




Related articles

Sidebar and Modal Editor

Styles tab in Editor

Updated on: 01/03/2023