Footer Layout Documentation

Now you took your readers to the bottom and you obviously do not want them to leave disappointed. Our Footer themes won’t let that happen. Integrate our footer themes into your website and form a good lasting impression on your visitors such that they return.

Get Started

Download and unzip the folders ‘footer-layouts-bundle.zip’ file to your computer.
After unpacking this folder you will find see all Json file

Step 1 : Importing Divi Library Items

Download and unzip the folders ‘footer-layouts-bundle.zip’ file to your computer.

Go to Divi > Divi Library. Click on the import/export options.

Click on Import/export button and switch to the import tab.

Note:-

If you want to upload all footers at once then choose the file “all-footer -layout-01-to-10.json” inside the folder footer -layouts-bundle.
If you want to upload indivisual(Single) footer then go to the folder footer -layouts-bundle and choose type of footer you want to upload.

Step 2

Choose the (.json) file and Click on Import Divi Builder Layout.

Step 3

After import all the footer layouts you can see in below.

Step 4 :importing a footer in your Theme Builder

After you have successfully downloaded the JSON file of footer please go to Dashboard > Divi > Theme Builder > add global footer Or any template

Step 5

Choose “Add From Library” Option

Step 6

Choose the category ” footer layout “ , select the desired header layout

Step 7

After that click on “Use This Layout ” Button

Step 8

Click on save and when you are back in the Theme Builder click on save again.

Frequently asked questions

Problems importing the layout?

If the importing process stops at 100%, or you have another problem, please make sure that you deactivate security plugins like Wordfence while importing. Then it should work fine. 🙂

How to changing colors

Most of the colors you can change in the modules row and sections.
A couple colors can be changed in the code module.

To find the code module switch to wireframe view

Then open the code module. You will find some CSS code here and you can swap the color codes.

Double or different icons?

In some cases, you can see this after importing a header.

Open the CSS code module in your header. In case you cannot find this module then switch to wireframe view (left bottom).

33 and 32 are the icon numbers but there is a backslash missing in the front of these icon numbers.

For some reason, this backslash is getting stripped out after importing a header.

The fix is very easy you just need to add a backslash before the number like this:

Need Any Help?

If you have any documentation related questions or need a video tutorial sooner please let us know at support@troothemes.com