Download a FREE Header & Footer for Divi’s Portfolio Layout Pack

Posted on November 7, 2023 by Leave a Comment

Download a FREE Header & Footer for Divi’s Portfolio Layout Pack
Blog / Design / Download a FREE Header & Footer for Divi’s Portfolio Layout Pack

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand-new freebies. We recently shared a Portfolio Layout Pack. To help you get your website up and running as soon as possible, we’re sharing a global header & footer template that matches this layout pack perfectly as well! Hope you enjoy it.

divi layout

Check Out The Portfolio
Global Header & Footer Template Below

Get it for free today!

Header Design

Desktop View

Divi Portfolio Header Template desktop view

Tablet and Mobile View

Divi Portfolio Header Template tablet and mobile view

Footer Design

Desktop View

Divi Portfolio Footer Template desktop view

Tablet and Mobile View

Divi Portfolio Footer Template tablet and mobile view

Download The Global Header & Footer Template For The Portfolio Layout Pack

To lay your hands on the free global header & footer template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

How to Upload The Template

Go to Divi Theme Builder

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

Open Divi Theme Builder

Upload Global Default Website Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

Import the template into the Divi Theme Builder

Navigate to the import tab, upload the JSON file which you were able to download in this post, and click on ‘Import Divi Theme Builder Templates’.

Finish importing the template into the Divi Theme Builder

Save Divi Theme Builder Changes

Once you’ve uploaded the file, you’ll notice a new global header and footer in your default website template. Save the Divi Theme Builder changes as soon as you want the template to be activated.

Save Divi Theme Builder Changes

How to Modify The Template

Open the Free Header for the Divi Portfolio Template

To modify the global header template’s elements, start by opening the template.

Open Header Template

Select Menu of Choice for Desktop

This Divi portfolio template has a separate set of modules for tablet and mobile. First, we will update our desktop modules, then, work on our mobile modules. To begin, select a menu of your choice in the Menu Module.

Select menu for desktop menu module

Update Logo

Select your logo from within the Menu Module for desktop.

Upload desktop logo

Add and Update Social Media Networks

Within the Social Media Follow Module add and update your social media accounts. Ensure that you correctly link them to your active social media pages.

Update and add your social media networks

Change Button Text and Add a Link

Update the text and add a link to the Button Module.

Update Button Module link and text

Switch to Tablet View

Click on the purple button in the center of the screen with the three dots. Next, click on the tablet icon from the menu on the left. This will change the Divi Builder so that we can edit the mobile view of our header.

Switch to tablet and mobile view

Select Menu for Mobile Menu

Choose the menu that you will be using with the mobile menu.

Set mobile menu

Add Logo to Menu for Mobile

Upload your logo to the Menu Module for the mobile view

Upload logo for mobile menu

Update Social Media Networks and Links

We have a Social Media Follow Module within the mobile header. Ensure that you’ve updated it with your social media networks and their respective links.

Update your Mobile Social Media Follow Module

Modify Button Module

Add your link and update your text on the Button Module for the mobile header.

Add link and update text on Button Module for mobile header

Open the Footer Freebie for the Divi Portfolio Template

Continue by opening the global footer inside the default website template.

Open Footer Template

Update Footer Logo

Add your logo to the Image Module within the footer template

Add footer logo to Divi portfolio template footer

Update Button Text and URL

Add a URL and update the text within the footer’s Button Module.

Update footer button link and text

Select Footer Menu

Choose the menu you would like displayed in the footer.

Select the footer menu for your Divi portfolio template

Choose Your Portfolio Categories

The footer freebie for our Divi Portfolio template creates a global portfolio grid. This means your portfolio pieces will show up at the bottom of all pages on your site. Select the categories of your work that you want to show in the Portfolio Module.

Choose portfolio categories for the footer freebie of the Divi Portfolio Template

Change Copyright Text

Update the Text Module that displays your copyright information.

Update your copyright text

Apart from the text that comes after the date, leave everything else within the modal box as is, including the custom date format.

Update your copyright text

Modify Footer Social Media Icons

Change and add your social media networks to the footer.

Update social media follow icons

New Freebies Every Week!

We hope you’ve enjoyed the Portfolio Layout Pack and the Header & Footer freebie that goes along with it. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!

Divi

Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

How To Design Websites In 2024 (Tips & Tricks)

How To Design Websites In 2024 (Tips & Tricks)

Posted on November 21, 2024 in Design

Learning how to design websites that work isn’t only about having an eye for design or chasing trends. It comes down to essential principles that the best-performing sites share. Get these right, and everything else falls into place. In this post, we’ll try to help you understand the...

View Full Post
How To Approach Small Business Web Design (2024 Guide)

How To Approach Small Business Web Design (2024 Guide)

Posted on November 15, 2024 in Design

Remember when having a website was enough? Now, your competitors have online booking, instant quotes, and slick mobile designs. What if building a business website was actually straightforward? This comprehensive small business web design guide cuts through the confusion, showing you exactly what...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi