#customheader

NOLI BANNERR

Creds to whoever owns the graphics used here :))

Everyone needs to create their own header and footer for their website.This is possible with elementor pro version.But in this tutorial create custom header & footer using elementor addons for free. In this article,learn about steps to create custom header and its sticky header effects.At the same time,learn about creating custom footer also. Here  with free plugins we are creating customization.So don't miss this opportunity to learn about it.Here you will also be able to learn about padding,margin and motion effects also. Lets learn in detail about creating Custom Header & Footer using Elementor.

Custom Header & Footer using Elementor

Plugins Required:

Install elementor and sticky header elementor. Also install header,footer & block elementor. These 3 plugins are main to create this effect.

Create Custom Header using Elementor

After installing header,footer & block elementor,go to appearance and then select header footer builder. Now click on add new button. Then type title as header and select the type of template as header. Finally click the checkbox for enabling this header for canvas full width. Then click on publish button. Now click on edit with elementor button. Once opened,then click on the + button and select the section as single. Now go to elementor sidebar and select social icons. Add the icons and then select the alignment and shape of icons. Now click on the 3dots for edit section. Click on the style and then go to background and select the background type as classic. Then select the background color as black. Finally click on the update button. Now again click on the +button and select the 6 sections. Click on the edit section and again select the background in style tab. Select the background color as black. Now click on the first column and drop the image there. Click on the second column,drag and drop the heading and edit it. Then select the link in the heading also. Do this for 3 sections. Instead of heading,you can add list inside it. Then remove remaining 2 items and then add link to this list item alone. You can also add button to it. Select the button color and change the text. Finally select the link for button also. Atlast click on the publish button to save.

How to use Padding & Margin section

Click on the column to edit. Then go to advanced tab and then deselect the link icon in both option.(margin & padding) Increase or decrease the number and see the results on the preview pane. You may also like Tubebuddy tutorial to grow your channel How to use pinterest to drive traffic to your website Make money by Amazon Associate Program using IFTTT & Politepol

Steps to create Custom Footer

First open the header footer  builder and click on add new button. Then type the title as footer and select the template as footer. Click the checkbox to enable the footer in elementor canvas template also. Then click on save draft button. Now click on the edit with elementor button. Elementor canvas template gets opened up. Click on the +button to add 3 column sections. Now go to edit section and then click on the style tab. Select the background type as classic and choose the background color as black. In first column,drag and drop the list element. Edit each item and then add link to it. Remove the icon also. Inside the second column,add recent posts widget. Then select the no of posts as 3 and then select the date to display. Finally click on the apply button. In the third column,drag and drop social icons widget. Add social icons needed and then add link to the icons. Select the shape and alignment of icons. If needed change the hover animations also. Now again click on the +button and add 2 column section. Make their background as black color. Finally drag and drop headings in both columns Edit the headings and change their color as white. Finally click on the publish button.

How to create sticky header effects

Now go to appearance and then select header footer builder. Then select the header and click on edit with elementor. Select the section to edit and go to advanced tab. Now select the sticky header effects tab and switch on it. This is how you have to create sticky header effects.