Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

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

Dynamic-Portfolio2

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.

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.

Adding a Main Hero to Homepage

Back in your Elementor editor, add a  Hero section.

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

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.

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

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.

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. 

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.

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. . .

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

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

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG