Ep 6 Design Website Header and Footer with Elementor

This video demonstrates how to design your header and footer with Elementor

Use my affiliate link to purchase Elementor Hosting, and get to claim a SGD50 voucher on any of my services: https://www.runaway.com.sg/en/elementor-hosting/

Video Transcript:

Hello, in this video I'm going to show you how to design your website's header and footer with Elementor.

Let's start with the website header. Mouse over "Templates" at left panel and click on "Theme Builder".

You will see this page. If you do not see any pre-existing templates, simply click on "Add New" and then select Header.

From this page, you can click on the pre-existing header template and then click Edit.

You will get to this editting page for your website header.
As this was a pre-designed template, some elements are already inserted at the top - your logo, menu and cart icon.

Let us customize the header a little. First, I will show you how to give it a background colour. Mouse over the top section and click on the middle icon that looks like 6 circles.

Once you clicked on the 6 circles icon in the middle, you will notice that the left panel will change to an Edit Section window.

Click on Style, and you will see "Background". Click on the brush icon to change the colour or upload a background image. You can also select the Hover Tab to change color when a mouse hovers over the header area.

Now, you may feel that the logo you have uploaded looks too small. To edit the logo, simply click on the logo and the left panel will change to the "Edit Site Logo" panel.

First, select the "Content" tab and click on the Image Size dropdown. Select "Full".

Next, click on the "Style" Tab. Adjust the width and height until your logo looks good to you. You can also click on the "Hover" tab and select the animation effect you want to see once someone hovers a mouse over the logo.

You can play around with the different editting functions of the different existing elements in header. Once done, remember to click the pink "Update" button at the bottom of the edit panel.

If you scroll down and mouse over the "Footer" section, you can click on "Edit Footer" to get to the footer editting page directly.

To remove elements you don't really want, simply right click on the element and click on "Delete".

Play around with the existing elements by clicking on them and try to edit them according to your preference. Leave all the menus alone because we will be tackling menu in the next tutorial.

Видео Ep 6 Design Website Header and Footer with Elementor канала eCommerce for SEA