Elementor Header Footer Free Tutorial

hello, I’m Kaycinho, The Digital Alchemist, and today I’m going to teach you how to create custom headers and footers with the free version of Elementor. I’ve kept this tutorial (see video above) simple, because I want you to focus on the technique first. Once you’ve mastered it you can style it as you wish.

Get Elementor Pro

Elementor Header Footer Free Tutorial

This tutorial is video based of course, but in case you need some time stamps :

• 1:25 – Custom header v1
• 15:22 – Custom header v2
• 16:30 – Custom header v3
• 17:25 – Custom footer

Css Code

Styling the close icon + centering button

/* Put space around the close menu icon */
.hfe-flyout-close, .hfe-flyout-close svg {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* Align button in menu + margin */
.hfe-nav-menu li.elementor-button-wrapper {
		text-align: center;
		margin-top:50px;
}

Making the flyout menu fullscreen

/* Make Flyout menu 100% */
.hfe-flyout-wrapper .hfe-side {
    width: 100%!important;
}

 

Get Elementor Pro

 

Your turn!

So, I hope this tutorial was of value to you and I hope it will help you build beautiful custom websites. If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you a thing!. Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here. So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!