Advanced tab in Editor
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
Thank you!