Ep 6: How to build your eCommerce website on Elementor Hosting 2023 – Design Website Header and Footer with Elementor

Ep 6: How to build your eCommerce website on Elementor Hosting 2023 – Design Website Header and Footer with Elementor

Get to Edit Header Page

Let’s start with the website header. Mouse over “Templates” at left panel and click on “Theme Builder”.

If you do not see any pre-existing templates, simply click on “Add New” and then select Header.

Otherwise, you can click on the pre-existing header template and then click Edit.

You will get to the 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.

Customize Header – Change Background Colour

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.

Customize Header – Enlarge Logo

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.

Edit Footer

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.

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.

Watch Video

If you need more visuals, watch the video explanation.

—STAY IN THE LOOP —

Get your latest updates on eCommerce / Roblox / Solopreneurship Content

Your amount to pay has been updated
The previous conversion quote has expired. Here is your new quote:
Total
$
You Pay
×

Hello!

Click one of our representatives below to chat on WhatsApp or send us an email to adaleow@runaway.com.sg

× How can I help you?