Dynamic Web Portfolio Series (9/9): Create a Header Footer and Off-canvas Menu in Elementor

In this final part of the dynamic web portfolio series, I’m going to briefly take you through how you can add a header, footer and an off-canvas menu to your portfolio website that you created through the previous 8 tutorials.

Creating a Header

In your Elementor editor add a new section, make it Full width and transparent.

Add an icon widget to the second column and select a toggle/hamburger icon for it from your Icon Library

Under Style, give your icon an orange colour on normal and white on hover.

Under Advanced, go to Motion Effects and enable the Mouse Effects option, give it a 3D tilt with a speed of 2.

Pu f9POkNmcRte0XKJm9PdKEn71bvBbyJiSf9D FmVWVyBXQKv 6PV TE9CRnD3bzzJRLBjM5mtkqL3p4XD1UjAn3nswJB4QGKPJaOp3dTrtBFe9FedSNSXTBP02dc67CFi tqYV2S7fv4oBNQ

Click the Publish button and add a Display Condition to display it on the entire site, then Save & Close. Then you can preview your home page.

Graad6Q wsVeZMtRwlVUn 2gNhNL7o5AJJvcrmYvwx2IlxJELZakBLOwQ2YHhrELVIP5m8ANlgK4kgUKxZg2 471NXFsYKyBCooDVt hFMAU9uh88piVJNu3ePgPQc4Y0nHLj5VqOi9dznv9aA

Adding a Main Hero to Homepage

Back in your Elementor editor, add a  Hero section.

tVqJDUljL57J0e4aR71 nhE1HfWJMAY bFscnSaBJn4kvnxwjZoAmNeBJdJYFXl6xU744 9ljL LwTiIt8

Select the Button and under Style, set the background colour to orange and on hover blue, then set the text colour to white.

BVBrYwa8LunXN8EvhrqHKVUc5AvHk1g31SrGJlldflz69U5NjfO0Esw7oKuuU OUoKzoVruZRsBrb7hqmlB1s8gDyIWBUisvl 4z43C8kOjX

In the Testimonial section, select the heading and change its text colour to blue under Style.

Select the testimonial widget and in the Edit testimonial carousel area on the left, you can add a blue background colour to it, then add images or your testimonials.

For the Bubble set the background colour to white.

Under Content, for the Name set the text colour to orange and for the Title white.

When you’re done, click the Update button.

Add an Animated Heading to Hero Section

To add a background image to your hero section, select the section and go to Style > Overlay, choose and insert your image. ScCeSDXhsI

To add an animated heading, just add the animated headline widget, and under Content, you can choose the animation and styling you want for your heading.

For Before Text add “I’m A”, then on Rotating text add the different text you want to display.

Back in your editor, add your Footer section and display it on the entire site, then style it up to your preference.

Adding A Footer

zrNM9HjHkYfoE4X1bwGJDwiPQMpIa FB ETaflyZbsMOS6xZfJw0lZ4oG1V3p8W5 J7WYQo413jWHqdZUXGUnAElRKCZde1KcotBQdnC7MbWSby8nmSFa021opWTVe7AY97HDqRt4 r4bXcow

Adding an Off-Canvas Menu

For the off-canvas menu; You just need to create your popup and then dynamically assign it to be your off-canvas menu.

To do this go to your dashboard under Templates > popups > add new to create your popup.

Under Settings > Layout you can adjust its width to 60VW.

Enable the Overlay option to hide whatever is behind the popup, and enable the Close button.

When you’re done setting this up, click the Update button.

bpDy6eokfxG0lvQGqaBR j13LZR0fXoPOCAQztmCSCV7MUfJSm1LfDwiOkU7mh9y6uS1TyO3PVZ1Yp6PWna91sTPxtoYQ1 Ptd98ppjW 3plu3Ej20V weVYD4WuaPTc3G6BHV2PClsO8IF7 g

Go back to your header and select the toggle button, under Content > Link, go to the Dynamic tags icon, select open popup under Action, then select the off-canvas popup you created. 

lEjUYBC vrKqYS5pVAkXKAiBBOxtIJgGNzy1ukmkBYIZdsjF2RiDnNJEviEWaC2qEvV5 yvzFp4hx00C8O1llvFDHhrqRw47fxM6wvOAz6VKRuDaUKKQvAZpL kh29 F866aro9r2QOvoa9T9Q

When you’re done click Update, and when you go to your homepage, your popup should show when you click on the toggle icon. And your user can just click on it and send you an email, or they can even click the Home & Portfolio options to navigate your website.

5YqP4vyQFEnw0tK2J ng2kwk5G7O3gkSCdo8Q9R9Qi Nt JQJTdhzVJNmDWxhAXBJKoFZ8PxzPuVWpF71DUJjGtZxNdDTmY jenUHS ynG7Vz7VLWVKPse1te8b8b aTUt9krQsorXJ1tGzqAA

In Closing

Congratulation on creating you first dynamic website using Elementor and Jet Engine. Now, in the case that you or your clients need to make any changes, you will not have to tamper with your design to add any data, you/they can just make whatever edits are needed on the backend and they’ll reflect on the website.

For any questions or comments about this or any other tutorial, let me know in the comments section below. Don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users