Sections & Columns Part 3: Using the Advanced Tab

In this tutorial, we'll walk through the advanced settings. The advanced tab saves you from adding CSS code to change the layout of the page.

In the video, we show a full-width section, with the different widgets all close together, without a lot of spacing between them and between the edge of the section.

Section Advanced Settings


Element Style

Margin: Control the outer space of the section. 

Padding: Control the inner section spacing. You can set different padding for left, right, top and bottom.

Z-index: Set a z-index value for the section.

Entrance Animation: This adds an animation to the section's widgets.

  • Animation Duration: This is added when you set an entrance animation, and lets you control how fast the animation will run.
  • Animation Delay: This is added when you set an entrance animation, and lets you set a delay before the animation begins.

CSS ID: Insert your own custom CSS ID for later use in your CSS files.

CSS Classes: Insert your own custom CSS class for later use in your CSS files.


Responsive

Reverse Columns: Allows you to switch the order of the columns (horizontally).

Visibility: Select the devices for which the section will show or hide.


Custom CSS (Pro)

In Elementor Pro each element contains a custom CSS area.

Column Advanced Settings

The advanced settings for the columns are similar to the section advanced settings.