DIY eCommerce Day 21: Customize Your Website Header with Elementor Pro Part 4: Explaining the Advanced Tab in a Section

Short 1 min YouTube video explaining the Advanced Tab in a Section

Explaining Margins

The top and bottom margin numbers represent the space between the current section and the top & bottom sections. For section, the right and left margins are set as auto because these margins are adjusted in the layout tab, under “Width”. To style a section, click on the “Style” Tab at the “Edit Section” panel.

Click on the link icon to unlink the values. When the values are linked, you just need to make adjustment to “top” and “bottom” will follow. If you unlink them, you can adjust them individually.

Click on the device icon to view and adjust margins for different device view: desktop, tablet, mobile.

Explaining Padding

Padding is the space between the section and the inner columns of that section.

Explaining z index

Edit the z index only if you have 2 sections stacked one on top of the other. To make that happen, you can create another section below the current section. Then, give the bottom section a negative top margin number. Example, -200px. It will move up and stack on the top section. If you set the z index of the top section to be more than the z index of the bottom section, the top section will stack on top of the bottom one. Vice-versa.

Explaining Sticky Header

You can create a sticky header by “Motions Effects” settings. Select to stick top or bottom (it’s usually top). Use the offset settings only if you want to create some space between the top of your screen and your sticky header.

Read more:

[WooCommerce Store] Difference between Margin and Padding in Elementor

[WooCommerce Store] How to Freeze your Website Header using Elementor Editor

Feel free to share your work with us in the comments below or ask questions! :)

    Leave a Reply

    Your email address will not be published.

    ×

    Hello!

    Click one of our representatives below to chat on WhatsApp or send us an email to [email protected]

    × How can I help you?