DIY eCommerce Day 22: Customize your Website Header with Elementor Pro Part 5: Insert Elements in a Section

Short 1 min YouTube video on inserting elements in a Section

Using the SITE Elements

The SITE elements are the usual suggested elements used for Header Templates.

Drag your desired element into your section column. I’ve dragged over a Site Logo, a Site Title below the logo and a Search function at the right column. I’ve also changed the section background color to create a better contrast with my elements.

Now, click on the Edit Section icon again and go to the “Layout” Tab. You can now make some adjustments and see how your elements look with your adjustments.

Columns Gap is the vertical gap between the columns and the section. This is not very useful because you may also simply adjust the Section Padding for Top and Bottom to achieve a similar effect.

At the “Height” dropdown, you can select “Min Height” and adjust what height you need your header to be for difference devices.

If you had selected “Min Height” to create some vertical space for your section, you will see a “Column Position” selection. You can position your columns to be at top of your section, middle or bottom. Middle usually looks neater. Use the “Vertical Align” dropdown to decide on your vertical alignment of the elements in the columns.

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?