Sélectionner une page

Download a FREE Header & Footer for Divi’s Chocolatier 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 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

Divi Chocolatier Header Layout in desktop view

Tablet and Mobile View

Divi Chocolatier Header Layout Pack in tablet and mobile view

Footer Design

Desktop View

Divi Chocolatier Footer Layout in desktop view

Tablet and Mobile View

Divi Chocolatier Footer Layout in 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.

Getting started with the Divi Conference Layout Pack

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.

Importing the Header and Footer Layout into the Divi Theme Buidler

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

Import settings for the header and footer layout pack

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 global header theme builder

How to Modify The Template

Open Divi Chocolatier Layout Header Template

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

Editing the global header within the Divi Theme Builder

Select Menu of Choice

Select a menu of your choice in the Menu Module.

Select the menu you'll be using as your main menu within the Divi Chocolatier Header Layout

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 the header CTA to a URL 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.

Keyboard shortcuts within Divi allow you to switch views from desktop, tablet and mobile

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!

Modifying the Social Media Follow Module for the Divi Chocolatier Layout Header template

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.

Editing the footer template within the Divi Theme Builder

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.

Connect your email marketing solution of choice to the Email Optin Module

Also ensure that you edit the Title, Body and Button text of the module. No dummy text allowed 🙂

Edit the Email Optin Module with your own text

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.

Edit static content within the second part of the footer

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!

Source link