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