Using the Advanced Tab

< All Topics
Option Used
Advanced Tab
Tutorial Videos
Official Video

After you click on the Advanced tab, you will see some nerdy options using which you can customize the widget settings as per your preference. Advanced Tab is present in every Section, Column and Widgets. Most of the settings are the same but some may differ based on the element type. Let’s understand each of these options and what they do.

Pro tip
High Alert! Some Nerdy Options Ahead. Watch our video tutorial thoroughly and then configure these options.

How to use the Advanced Tab in The Plus Addons For Elementor

The Advanced Tab consists of nerdy options which can be used to customize your widget to a more advanced level. There are lot of options like Magic Scroll, Tooltip, Parallax, Animation, Positioning, etc. Let’s understand each of these options and what they do.

Table Of Contents

1. Advanced

Margin

It is used to add spacing outside the element.

1. Add your top and bottom margins in PX or % in the respective fields.
2. Click the icon to add different margins for Desktop, Tablet, and Mobile.

Padding

It is used to add spacing outside the element.

1. Add your top, right, bottom, and left paddings in PX, EM or % in the respective fields.
2. Click the icon to add different paddings for Desktop, Tablet, and Mobile.

Z-Index

This property defines the order in which your elements display on a webpage. The element with the highest z-index value will display in front of that of the element with the lowest z-index value.

Set your Z-index value in the provided field.

CSS ID

The #id selector styles the element with the specified id.
Set your CSS ID here.

CSS Classes

The .class selector styles the element with the specified class.
Set your CSS classes here, separated by spaces.

Plus Extras

Magic Scroll

It is used to add a scroll effect to your widget. Wondering how that website has such cool scrolling animation? Magic Scroll makes that possible. Click on the button until it shows Yes to enable it and No to disable it.

Scroll Options

Click the Edit icon to set the value for Offset and Duration. To revert back to default values, just click on the icon next to the Edit icon.

Initial/Final

Set your Initial and Final Position by clicking on the Edit icon of the respective tabs.

(X) / Horizontal Distance: Set your horizontal distance value here.
(Y) / Vertical Distance: Set your vertical distance value here.
Opacity: Set your opacity value here.
Scale Value: Set your scale value here.
Rotate Value: Set your rotate value here.

Tooltip

If you want to show text on hovering an element, use Tooltip. We get two options here i.e. Content and Style.

CONTENT TAB

Content Type
Select your content type. You can select Normal Text Content or WYSIWYG Editor.

Description
Add your Tooltip text content here.

Text Alignment
Align your text to the Left, Center or Right by clicking the respective icon.

Typography
Set your font options by clicking the Edit icon.

Text Color
Set your preferred text color by clicking the color picker option.

STYLE TAB

Tooltip options

Set the tooltip options by clicking the edit icon.

Tooltips Interactive
Slide the button to enable/disable Tooltip Interactive.

Position
Set your position from the dropdown.

Theme
Set your theme style from the dropdown.

Width
Use the slider to set the width

Offset
The difference between the text and the tooltip is called the Offset. Set your offset value here.

Distance
This is the space between the text and the tooltip. Set your distance value

Duration in
It is the time taken for the animation to appear.

Duration out
It is the time taken for the animation to disappear

Style Options
Set your style options by clicking the edit icon

Padding
Set your padding values here.

Background

Background Type

You can select from types here by clicking on them. I.e. Classic or Gradient

If you select Classic

Color: Select your preferred color by clicking on the Color Picker
Image: Click to upload your desired image. If you don’t have the image in your media library, you can upload it from your computer by drag and drop.

If you select Gradient

Color: Select your preferred color by clicking on the Color Picker
Location: Add the location of the gradient color
Second Color: Add your second color
Location: Add the location of second gradient color
Type: Select your gradient type i.e. linear or radial
Angle: Set the angle for your gradient

Border

Box Shadow: You can set the box shadow.
Border Type: Select your border type from the dropdown
Border Radius: Set your border radius value.

Box Shadow: Click to enable/disable the Box Shadow
Color: Add your preferred shadow color
Horizontal: Use the slider to set the horizontal value.
Vertical: Use the slider to set the vertical value.
Blur: Use the slider to set the blur value.
Spread: Use the slider to set the spread value.

Motion Effects

Entrance Animation

It is used to set animate your sections, columns or widgets when site visitor scrolls down your website. Select any one animation you prefer from the dropdown.

Positioning

Width

Set your width to full width (100%), inline (auto). You can also set a custom width.

Position

Set your position. You can set it to fixed or absolute. You can also set the orientation and offset values.

Responsive

If you want to customize the default appearance of the widget, add your custom CSS code here.

Reverse Columns (Tablet)

Slide the button to YES to reverse the order of your columns.

Reverse Columns (Mobile)

Slide the button to YES to reverse the order of your columns. (Best for Mobile)

Visibility

Show or Hide your sections on Desktop, Tablet, and Mobile.

Custom CSS

If you want to customize the default appearance of the widget, add your custom CSS code here.

Do you want to rate this article?
0.5 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Need help?