Footer Sections

Footers are the bottoms sections of pages. They can offer navigational menus which direct users to different pages or sections, newsletter options, contact details or information that might be considered secondary such as terms and conditions or privacy policies. 

These Footer Sections use the built-in Menu Module for the menu functionality along with combinations of Image Modules, Text Modules, Blurb Modules and Social Follow Modules. 

Custom Code Modules are including in each Footer Section for the CSS necessary to implement Menu Modules that do not collapse into hamburger mobile menus. 

Setting up your Page or Theme Builder Template for Testing

You'll first need to create a new test page and Theme Builder Template to apply your chosen Footer Section of choice.

  1. Create a new page and give it a title, something like Footer 1 will be fine. 
  2. Publish a new layout or add a few dummy Sections to fill the page with content. Click Update. 
  3. Now let's create a new Theme Builder Template by going to WordPress Admin → Divi → Theme Builder 
  4. Click "Create Template" and then hover of the "Specific Pages" checkbox and then select your new page:

Now click " Add Custom Footer" and then "Build Custom Footer"

You can then click " Build From Scratch" and you're nearly set!

All you have to do now is drag-and-drop your footer JSON file or use the Portability button to import your footer:

You can read more about importing layouts and sections here

Import via the Portability System

If you're not comfortable dragging and dropping the JSON file into your template, then you can import files directly into your Template or Page via the Divi Builder. 

If you're editing on the front-end then clicking on up and down arrow will open the Portability options. 

If you're editing on the back-end then clicking on up and down arrow will open the Portability options. 

You will then see the following settings modal:

Choose your file, in the image above we're using a homepage 1 example JSON file. You can optionally select "Replace existing content" if you want to remove any of your sections you've already designed. If you do not check this option then the layout will load beneath your last section. 

You can optionally select "Download backup before importing". You do not need to select "Apply Layout's Defaults To This Website".

Finally, clicking on "Import Divi Builder Layout" will import your layout to your Theme Builder Template or Page.

When the import is finished, the page will reload and you can start to make your changes!

Accessing the Layer View or Wireframe mode gives you access to your section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases the header structure. Learn more about Layer View and Wireframe mode.

Module Naming Conventions

The Section Admin Label describes the header number and the custom class name that is set via 

Section Settings → Advanced → CSS ID and Classes

In this example, the class name is set to diviwp-footer-1

The admin label for the Custom CSS Code module refers to the class diviwp-footer-1 meaning it is targeting that classname only. If your section had a different classname applied then the code within the CSS Code Modules would not work. 

This is important because you can experiment with these footer without worrying that you're going to break your existing footer!

You're always in control and can easily turn on or off the CSS Code Modules or copy it into your child theme or Divi Theme Options. More on that below!

Editing and Customizing

Each footer menu uses Divi's Menu Module with a custom classname. This is important because we use Custom CSS to stop the Menu from collapsing into a mobile menu with the hamburger menu.

Here's what it would look like on Desktop and Mobile if we didn't apply our Custom CSS:

Notice how the menu items don't stack nicely in the middle and far right columns in the image above. The first columns stacks because each menu's width forces the menu item onto a new line.

Here's what it looks like on mobile without our Custom CSS:

And here's what it looks like on Desktop WITH our Custom CSS Applied:

And on Mobile:

Learn how to use the pills further down below!

Editing the Menus

When you're editing the Menu Module via the Visual Builder, you can select your existing menu. Here I've selected the Layouts Menu Module below:

In the example, I've already created a Menu called "Footer Layouts Menu" which I've set in the module settlings. 

Setting up your menus 

You can use your existing menus you've setup via your 

WordPress dashboard → Appearance → Menus 

or you can create your own new menu. 

Here's an example of how I've setup the above demo menu:

Applying the pills to menu items

Each Footer sections comes with CSS that will style the NEW and Updated Pills in the example below:

There are 3 options for you to choose (or customise even further if you want to put on your CSS hat!)

All you need to do is insert the following HTML into the Navigation Label of your Menu item as per the examples below:

Option 1:

This positions the NEW pill absolutely and above the Menu item. Note how it is positioned before the Menu Label.

<span class="diviwp-menu-pill-top">NEW</span>

Option 2:

<span class="diviwp-menu-pill-right">NEW</span>

This positions the NEW pill to the right of the Menu item. Note how it is positioned after the Menu Label.

Option 3: 

This option introduces an orange version. Because the width of the column won't allow the updated pill to sit to the right of the label, it automatically flows below the menu item.

<span class="diviwp-menu-pill-right-orange">UPDATED</span>

You can edit the CSS for each pill within the "Custom CSS Code for diviwp-footer- number" module within your section. 

Logos

Each DiviWP Footer uses a transparent PNG logo in an Image Module. This is keep the footer menus seperate and offers much greater flexibility. 

Transparent PNG logos don't degrade well on mobile devices and can sometimes look pixelated.

It is highly recommended to use an SVG logo as it will scale up and down gracefully without any pixelation or distortion. If you do want to use SVG then make sure you've got the following plugin installed:

https://wordpress.org/plugins/svg-support/

If you only have PNG or JPG logos then it's best to experiment with larger resolution logo sizes for mobile/tablet devices or adjusting the max-width and max-height settings within the Image Module settings.

Changing Colors

The most efficient way to change colors is via the "Modified Styles" filter. 

To filter by Modified Styles, click the "+ Filter" button and then select "Modified Styles".

This will bring up all the modified font, color, size etc settings for you to edit and experiment with.

Combining Newsletters Optins and Blurbs

Footer Sections 1,2,9,10,11 and 12 include an Optin Form Module. 

Combining Newsletter Sections in Footers is a great way to increase subcribers and DiviWP Newsletter Sections will all work seamlessly with these Footers!

Using Footer Section1 as an example, and accessing the Layers View, you can see the Custom CSS module which is targeting the Email Optin Module with a custom class of .diviwp-optin-form-white-input. Custom Classes are applied in  Module Settings → Advanced → CSS ID and Classes.

This CSS enables the unique design of the Email Optin Module that is not possible to achieve using only the Email Optin Module settings. 

The Custom CSS module is further down the section (Note: All Custom CSS is positioned beneath the last Module in the overall Section).

Notice how there are two Custom CSS Code modules. The first module references the diviwp-optin-form-white-input and only includes CSS for the Optin module. 

This is important because you can delete the optin module if you don't want it and then also delete the custom css module while retaining the rest of the section styles. 

Copying or Moving Custom CSS 

You can move all Custom CSS into Divi's Theme Options or your child theme.

Custom CSS can be copied and pasted into  Divi → Theme Options → Custom CSS

  • Remember to delete the opening and closing <style> tags

Beautiful Blurb Options

Footers 13 - 20 include beautiful Blurbs to focus attention on calls-to-action. DiviWP Blurb Sections will also all work seamlessly with these Footers!

Updates and versioning

When Custom CSS needs to be updated, a new version will be released with the updated Footer Section and Custom Code modules which you could then cut and paste into your existing code modules. This assumes you will keep the default class naming system.

One of our priorities is to work on an easy versioning process to help you understand when updates takes place. Something like a diff viewer might be useful or a gist repo. More on that as soon as we've got something solid!

Support is always on hand

You can rest assured that support is always on-hand and we'll be able to guide you as far as possible should you require assistance.

Importing Files from Your Divi Marketplace Download

Clicking the "Download Product" button after your purchase will download a product.zip file. Unzip the folder and you will see these files:

The main product file is titled "DiviWP All Footers Page Import.json". This will import ALL of the footers as per the demo URL: https://diviwp.com/ui/theme-builder/footers/all-footers/

You can read more about how importing this file into a page further down below.

To access the Supplementary files which includes all the individual JSON files, you will need to login to your Elegant Themes account and then scroll down to your Marketplace Downloads. 

In the DiviWP Footers Sections product you will see a purple button titled "Supplementary Files"

Clicking the Supplementary Files will download a "Supplementary.zip" file. Unzip the folder and you will see the folder is titled DiviWP Footer Sections JSON files:

In the above screenshot you can see how each folder has the individual JSON file you can drag-and-drop or import using the Portability system.