If you do not have a Divi license already, you will either need to:
In order to install the Divi Child theme, you must have Elegant themes Membership and Divi Theme.
Installing Our Divi Footer Bundle
The footer is one of the most important sections in a website. Not only does the footer give a website a finished feel, but it can also be filled with important elements – such as company information, navigation elements, links to popular content, social media account icons – that can seriously improve the user experience of your site and allow your visitors to flow much easier into other areas of your site.
Step 1 : Download and Extract the Bundle
Download the ‘DCT_Footers_Sections_100_v_1_2.zip’ file to your computer. Extract the ZIP file. Once you’ve UnZip DCT Footer Template , you will find following folder directory for Divi 4 & Divi 5 Footers Sections
Step 2 : Let Get started With Divi 5 Footers Sections Installtion
Download the Here, you will find Footer Sections 1–50, which can be customized using the Divi 5 Variable Options.
For Footer Sections 51–100, you can customize the colors using the Default Color Options.
For this reason, we have provided the Footer Sections in two separate folders.
Step 2.1: Here, we’ll show you how to install Divi 5 Footer Sections 1–50.
Open the ‘Divi_5_Footers_Sections_1_To_50_With_Global_Color_Options’ Folder to your computer. you will find following folder directory.
Video Documentation : For Divi 5 Footer Sections 1 TO 50
Step 3 : Open the Divi Library
This is a common step also for both Divi 4 Footer Sections and Divi 5 Footer Sections 51–100.
Go to Dashboard >> Divi >> Divi Library >> Click On Import/Export Option
Step 4 : Import the Footer Layouts
Navigate to the Import tab. Click the “Choose File” button and locate DIVI Footer Layout Template and click the “Import Divi Builder Layouts button.”
Step 5 : Open the Theme Builder
Go to Dashboard > Divi > Theme Builder > Click to add global footer.
Step 6 : Add a Layout from the Library
Click Add From Library Button
Step 7 : Select Your Footer Layout
click the “Your Saved Layout” Tab Select the DIVI Footer Layout Template Style from the list & load the Selected DIVI Footer layout.
Step 8 : Save the Changes
Click Save Changes Button.
Step 8.1: Divi 5 Footer Sections 1–50 Installation Using Global Color Options
Divi 5 uses Design Variables (Global Variables) to manage your website colors. By updating the Primary and Secondary color variables, every element that uses these variables will automatically update across your website.
Step 8.2: Change the Primary Color
For Divi 5 Footer Sections 1–50 Click Primary Color. CChoose your desired color using the Color Picker, or enter the HEX color code #42b4b0 to match the demo and Click Save Variables.
The Primary Color will automatically update across all elements in Footer Sections 1–50 that use this color variable.
Step 8.3: Change the Secondary Color
For Divi 5 Footer Sections 1–50 Click Secondary Color. Choose a new color using the Color Picker or enter your HEX color code #232323 and Click Save Variables.
The Secondary Color will automatically update across all elements in Footer Sections 1–50 that use this color variable.
Step 8.4: Change the Link Color
For Divi 5 Footer Sections 1–50 Click Link Color. Choose a new color using the Color Picker or enter your HEX color code #42b4b0 and Click Save Variables.
The Link Color will automatically update across all elements in Footer Sections 1–50 that use this color variable.
Divi 5 Footer Sections 1–50: Color Variables
Below are the Primary Color, Secondary Color, and Link Color settings for each group of Divi 5 Footer Sections.
Footer Sections |
Primary Color |
Secondary Color |
Link Color |
|---|---|---|---|
| Footer 1–10 | #FDA12B |
#232323 |
#FDA12B |
| Footer 11–20 | #0099CC |
#232323 |
#0099CC |
| Footer 21–30 | #329C61 |
#232323 |
#329C61 |
| Footer 31–40 | #E10D50 |
#232323 |
#E10D50 |
| Footer 41–50 | #42B4B0 |
#232323 |
#42B4B0 |
Note: These color settings are specifically for Divi 5 Footer Sections 1–50. Set the corresponding Global Color Variables before importing or using the footer sections to ensure they match the demo design.
Step 9 : View Your FooteR
