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 brand new Chocolatier 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.
Header Design
Desktop View
Tablet and Mobile View
Footer Design
Desktop View
Tablet and Mobile View
Download The Global Header & Footer Template For The Chocolatier 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 newsletter 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.
Upload Divi Chocolatier Layout’s Global Default Website Template
Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.
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’.
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.
How to Modify The Template
Open Divi Chocolatier Layout Header Template
To modify the global header template’s elements, start by opening the template.
Select Menu of Choice
Select a menu of your choice in the Menu Module.
Add CTA Link URLs
This header has a button on the top right. Open the settings of the button and update the link URL to the destination of your choice.
Update Social Media Accounts and URLs
The desktop view of the Divi Chocolatier Header Layout uses a number of blurbs to showcase social media icons and names. Click within each Blurb Module to update the Title field with the name of the social media network. Next, choose the icon that represents that social media network from within the Image and Icon tab.
Update Social Media Accounts and URLs for Tablet/Mobile
For this header template, we use different modules to showcase the social media icons. We do this so that we have accurate mobile responsiveness as we switch from mobile to desktop and tablet. As such, we’ll need to switch to the tablet view within the Divi Theme Builder, to update the social media accounts for tablet and mobile.
Press the letter ‘t’ on the keyboard to toggle the mobile responsive menu on the bottom left hand side.
After that, you’ll want to edit the Social Media Follow Module within the tablet view with the correct social media networks. Don’t forget to link to your correct accounts, check those URLs!
Once you have made all your changes to the Header freebie of the Divi Chocolatier Layout, we’ll now move onto editing the footer template.
Open Divi Chocolatier Layout Footer Template
Continue by opening the global footer inside the default website template.
Connect Email Marketing Solution
The footer template of the Divi Chocolatier Layout has a full width section with an Email Optin Module. We need to connect this module to our chosen email marketing solution.
Also ensure that you edit the Title, Body and Button text of the module. No dummy text allowed 🙂
Update Static Footer Content
You will need to go through and update the static content of the footer, including adding your logo, contact information, social media networks and their respective link URLs. Don’t forget about the copyright text at the bottom of the footer as well. Here’s a quick diagram of the modules within the second part of the footer that you’ll need to modify.
New Freebies Every Week!
We hope you’ve enjoyed the Chocolatier 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!
The post Download a FREE Header & Footer for Divi’s Chocolatier Layout Pack appeared first on Elegant Themes Blog.