The Black Friday/Cyber Monday sale is a special time of the year when we offer great discounts and lifetime licenses. This year was no different. During the sale, you can purchase our plugin with a massive 30% discount, and grab the lifetime license with a one-time payment fee. Our sale is coming to an end, and we would like to thank you. The Black Friday campaign exceeded our expectations. Hundreds of people around the world joined the Divi Pixel family. If you still want to take advantage of this sale, head over to the Black Friday/Cyber Monday landing page and grab the discount, before it’s gone! This offer expires soon.

You can’t imagine how grateful and happy we are for your support. After the sale ends, we get to work hard not to let you down. Today we have a little gift for you. This is a 10 Mega Menu layout that you can easily use on your website. Detailed instructions on how to build a Menu Menu using Divi Pixel can be found below.

Exclusive Mega Menu UI Kit for Divi

The layouts we have prepared will surely help you start your mega-menu adventure, but will also be a good example and a starting point for designing your own mega-menu. Using such a menu will certainly be useful for pages that have many links, but also if you are bored with the standard dropdown menu and would like to spice it up a bit.

How to import Mega Menu UI Kit to Divi Library

The download package contains a .zip file, which has to be extracted before you can import it to your Divi website. Once you download and extract the file, you can import it to the Divi Library and use it on your Divi site by adding the Balloon module to your header or footer.

1. Go to Divi → Divi Library
2. Click the Import/Export button located at the top

1. In the modal box select Import tab
2. Click Choose File and select the mega menu you want to import
   
3. Click Import Divi Builder Layouts

Earlier this week, we released a new version of Divi Pixel where we added completely new functionality. This time, these were new plugin options that allow you to easily put your site into maintenance mode.

Today we have prepared a free Coming Soon / Maintenance Mode Layout Pack that you can easily import into Divi Library and use on your website in no time. This package contains 12 layouts, where we used the most popular modules on this type of website. It is of course optimized for mobile devices and will help you set up your maintenance page with just a few clicks.

Exclusive Coming Soon Layout Pack for Divi

The layouts we have prepared will surely help you set Maintenance Mode on your Divi site, but will also be a good example and a starting point for designing your own coming soon pages. Using Maintenance Mode will certainly be useful when you need to make major changes on your site, and you don’t want your visitors to see the page, when it’s under construction.

Using the Divi Pixel Maintenance Mode

Setting up the Maintenance Mode with Divi Pixel is quite simple. We just need to create a new page, design the layout we want to display, and finally, select that page in Divi Pixel Maintenance Mode settings. Using Coming Soon Layout Pack is even easier, as we can load the premade layout in Portability settings.

1. In your WordPress Dashboard click Pages → Add New
2. Add page title
3. Switch to Divi Builder
4. In Build From Scratch dialog box click Start Building
   Now you can design your own layout, or if you want to use premade layout, follow the steps below.
5. In the Divi Builder toolbar click the Portability icon
6. Switch to the Import tab and select the coming soon layout you want to use.
7. Click Import Divi Builder Layout and save the page.

1. Go to Divi → Divi Pixel
2. In General, tab enable Maintenance Mode
3. Select the Coming Soon page
4. Click Save Changes

How to remove Header and Footer on Maintenance Mode page

In most cases, we don’t want the header and footer to be displayed on our coming soon page. These elements can be hidden using the Divi Theme Builder. If you want to remove the header and footer from your maintenance page, follow the steps below.

1. In WordPress dashboard go to Divi → Theme Builder
2. Click Add New Template

1. From the dialog box select Specific Pages
2. Select your coming soon page from the list
3. Click Create Template

1. Disable the header and footer in the Coming Soon template
2. Click Save Changes

This is it! I hope you will enjoy using this Coming Soon Layout Pack and that it will improve user experience on your Divi website. If you like this freebie, please let us know in the comments below 😉

In the last tutorial posted on our blog, we showed you how to add a Mega Menu to a Divi website using the Balloon module. Today we have a surprise for you. We have designed 10 free mega menu layouts for you that you can easily import into your Divi library and use on your Divi website in no time. If you don’t know how to do it yet, check out the tutorial I mentioned above.

Many Divi users would like to add a mega menu to their website, but don’t know how to do it. Unfortunately, this is not possible without additional plugins, and Divi Pixel is one of them. The Balloon module available in our plugin has all the options needed to build a mega menu. With the function of loading a layout from the Divi library, there are no limits. We can design any layout, then load it in the Balloon module, and make our mega menu appear with a beautiful animation when the user hovers the mouse over the menu item.

Exclusive Mega Menu UI Kit for Divi

The layouts we have prepared will surely help you start your mega-menu adventure, but will also be a good example and a starting point for designing your own mega-menu. Using such a menu will certainly be useful for pages that have many links, but also if you are bored with the standard dropdown menu and would like to spice it up a bit.

How to import Mega Menu UI Kit to Divi Library

The download package contains a .zip file, which has to be extracted before you can import it to your Divi website. Once you download and extract the file, you can import it to the Divi Library and use it on your Divi site by Balloon module to your header or footer.

1. Go to Divi → Divi Library
2. Click the Import/Export button located at the top

1. In the modal box select Import tab
2. Click Choose File and select Mega Menu Master.json
   
3. Click Import Divi Builder Layouts

By using the built-in Divi Pixel feature, you can build a mega menu and display it in the navigation instead of the Divi native dropdown menu. Mega menus are very popular in web design today. They will be especially useful if your menu is complex and has many links, which would make navigating the page difficult if we used the standard menu dropdown.

In this tutorial, I’ll show you how to build and implement a mega menu on your Divi site. We will use the Divi Pixel Balloon module for this, which allows you to display info boxes, balloons and various tooltips when you hover the mouse over an element.

We also have a freebie for you. To speed things up, we’ve created mega menu layout that you can download, import into your Divi library, and use on your own website in no time.

Build Mega Menu layout using Divi Builder

The first thing we need to do is design our mega menu using the Divi builder. To use a previously designed layout, it must be in the Divi library. There are 2 ways to save a layout to the Divi library. We can save the layout from any page or just add a new layout directly in the Divi library.

For this tutorial, we’ll use the second d method. I’ll show you how to add a section, row or module to your Divi library, and then use it to create a mega menu on your Divi site.

Note: If you want to use our prebuilt Mega Menu Layout Pack, you can skip this step, and just import Mega Menu Layout Pack to your Divi Library.

1. In your WP Dashboard navigate to Divi → Divi Library
2. Click Add New button
3. In the modal window add Layout Name and select Layout Type. For most scenarios, a row will be fine, but if you need to build more complex mega menu layout, you can choose section.
4. Click Submit

1. Now only the sky is the limit. Design your own mega menu using the Divi builder module. For creating my demo layout, I have used 2 columns layout 2/3 + 1/3 and Divi Text and Blurb modules.
2. Once you are done, click the Save button to save your new mega menu layout.

Add Globar Header with Balloon module

In this step, we will add a global header using the Divi Theme Builder and configure our mega menu using the Divi Pixel Balloon module. For the header, we will use 1 column in which we will place the Divi Menu module. Then we’ll add the Balloon module below, and call the new mega menu layout that we have saved in the Divi library.

Add Global Header using Divi Theme Builder

1. In your WP Dashboard navigate to Divi → Theme Builder.
2. In the Default Website Template box, click Add Global Header and select the Build Global Header option.

1. Click Add New Row and select 1 column layout.
2. In the modal box search for Menu module and add it to your header layout.

Global Header Customization

Now that the Menu module is added, we can configure it. In the module options, you can add a logo, change the menu font, color, and change the menu alignment. There are more options out there, so browse them carefully to find a menu that suits your needs. I would like to mention the distances. By default, they won’t be consistent, because Divi adds some padding/margins to sections, rows and modules, so we need to tweak them to make our Divi Menu module perfectly centered in the header section.

 Below is my configuration:

1. In the Section settings, I added 0 for top and bottom padding
2. In Row settings, I set 20px bottom and top padding.
3. In Menu module settings I removed bottom padding by adding 0px.

Add Divi Pixel Ballon module to the header section

In this step, we’re going to add the Balloon module and customize it so it just looks good. By default, the Balloon module has 550px width, so we need to increase it. We will also remove some spacing, set the selector, position and animation.

1. Click Add New Module icon
2. Search for Balloon and add it below the Menu module
3. In Balloon module setting, add .dp-mega-menu to Selector field
4. Select Balloon Placement to Bottom
5. Choose Balloon Animation
6. In the Content Type dropdown select the Divi Library option
7. In Divi Library dropdown, select your saved Divi Library item

Balloon module Spacing and Sizing

1. In the Balloon settings go to Design → Sizing
2. Set your desired Balloon width. I added 1000px. Set max-width to 100%.
3. Go to Spacing toggle
4. Set Balloon Padding to 0 (optionally).
5. Save header layout and quit Divi Builder.

Add desktop and mobile menu

In this step, we will add and configure a menu so that it displays our mega menu when you hover the mouse overspecific menu item. To do this, we need to add a custom class to the menu item. I’m also not a fan of using the mega menu on mobile devices, so we’re going to add a new, simplified menu to display on tablets and phones and I will show you how to do that.

1. In your WP Dashboard navigate to Appearance → Menus
2. In Screen Options make sure you have CSS Classes enabled
3. Add dp-mega-menu class to the menu item you want to use for the mega menu dropdown
4. Click Save Menu button

Add new menu for mobile devices

Now we will create a new menu that we will be displayed on tablets and mobile devices.

1. In Appearance → Menus click create a new menu link.
2. In the Menu Name field enter the name for your mobile menu
3. Click Create Menu button

1. Choose Mobile Menu for editing and click the Select button.
2. Add pages you want to display in your mobile menu
3. Click Save Menu button

Add Mobile Menu to the Theme Builder Header

The last thing we need to do is add the mobile menu to our header and hide our desktop menu on mobile devices, and the mobile menu on desktop computers. To achieve that we will add a new row to our Theme Builder Header and apply visibility settings to hide rows on specific devices.

1. Navigate to Divi → Theme Builder
2. Click the Edit icon located in the Global Header button.

1. Add new Row below the Balloon module
2. Select 1 column layout
3. In the modal box type Menu and add Menu module to the new row

Select Menu for mobile devices and customize the spacing

In the new Menu module, we need to select a menu for mobile devices. We have created a separate menu for mobiles in the previous step, and now we need to choose this menu in the Menu module. We will also add 20px bottom and top padding for the Menu module, and tweak module paddings.

1. Select Mobile Menu in Menu selector field
2. Go to Design → Spacing and add 20px bottom and top padding
3. Save Menu module settings

Setup Visibility settings for rows

We are nearly there! In this last step, we need to adjust Visibility settings and remove the padding from the row with our mobile menu.

1. Open first row settings
2. Go to Advanced → Visibility and select Phone and Tablet checkboxes.
3. Open second row settings
4. Go to Design → Spacing and set 0px top and bottom padding
5. Got to Advanced → Visibility and select Desktop checkbox
6. Save layout and quit Theme Builder

Improve user experience with Balloon module

As you can see, the Divi Pixel Balloon module is a very versatile tool. You can not only build mega menus with it but also all kinds of prompts. The Divi Pixel Balloon module lets you build tooltips using the Divi Builder and trigger them on any element you want. This module uses the tippy.js library and is a complete solution for popovers and dropdowns. It comes with an optimized positioning engine for flipping and overflow prevention.

This is it! I hope you enjoy reading this tutorial. Adding a mega menu to your Divi website is a great idea and can help your visitors navigate your site. Whenever you use custom code or 3rd party plugins for mega menus, make sure that your menu is optimised for mobile devices.

Companies that sell subscription-based packages or services, such as hosting companies, need to communicate their value and show potential customers the subscription plan that best suits their needs. Such pricing tables should clearly indicate how these plans differ and what customers will get when they sign up. If you’ve created a website that effectively leads visitors to a pricing page, you’ve already done something right. However, the key action taken by the customer is the final purchase. A professionally designed pricing section will definitely help with this.

Today we put together 10 free and gorgeous price tables that you can easily import and use on your Divi site. In some examples, we used the Divi Pixel plugin to display the info tooltip with options details, or to switch between plans. The Balloon and Content Toggle modules are great for adding such functionality and will definitely help to get your pricing tables right.

If you do not have a Divi Pixel, you will still be able to use the sections we have prepared, however the option to preview more info about the feature in the tooltip and switch between plans will not be available.

Exclusive Pricing Table UI Kit for Divi

To help you quickly create and implement the right pricing on your Divi website, we have prepared 10 professionally designed pricing table sections that you can use in any project you want. They are fully customizable and optimized for mobile devices. Each pricing is saved as a section to the Divi Library and you can inject it to your Divi site in minutes. This layout pack includes 10 pricing sections, each with a different design, so everyone will find something suitable for their website.

How to import Pricing UI Kit to Divi Library

The download package contains a .zip file, which has to be extracted before you can import it to your Divi website. Once you download and extract the file, you can import it to the Divi Library and use it on your Divi site by adding a new section to the page from the Divi Library.

1. Go to Divi → Divi Library
2. Click the Import/Export button located at the top

1. In the modal box select Import tab
2. Click Choose File and select Divi Pixel Pricing Tables Master.json
   
3. Click Import Divi Builder Layouts

Add Pricing section to the page

Once our pricing sections are imported to Divi Library, we can use them on our Divi site, by adding a new section to the page from Divi Library.

1. Go to Pages in your WP Dashboard
2. Choose an existing page or add a new page where you want to add a pricing section

1. Click Use the Divi Builder button
2. Click “+” icon to add a new section
3. In the modal window click Add From Library tab
4. Select Pricing Demo you want to add to the page

Carousel sliders are very popular in web design. They can help you display services, images, features and any other content you might have which normally would take a lot of space, but if you use the carousel you can save that space and improve the user experience significantly.

In this tutorial, I will show you how to add carousel functionality to your Divi website. We will use the 3rd party Swiper.js library and some custom CSS to style the slider just like we want.

To add the slider functionality to your Divi website, you need to call the swiper.js in your child theme’s functions.php file. If you don’t use a child theme yet, you can build one using our tutorial on How to Create a WordPress Child Theme for Divi or create a child theme with our free child theme generator.

We have also prepared a free Divi section with a beautiful slider layout which can be downloaded for free. If you go that route, then you can skip steps 2 and 3 from the below tutorial. You will still need to enqueue swiper.js and add configuration code to your child theme’s functions.php file (see step 1).

Add custom code to functions.php

All PHP code must be added to the Divi’s child theme functions.php file. You can edit this file using FTP, File Manager on your server, or Theme Editor available in the WP Dashboard. I will use Theme Editor.

To enqueue the swiper.js library, in our child theme, please follow these steps:

1. Go to Appearance → Theme Editor
2. Open your child theme’s functions.php file
3. Add custom PHP code
4. Click Update File

Create layouts for the carousel using the Divi Builder

Now we need to design all items that will be displayed in our slider using the Divi Builder. We will need to add some custom classes and ID to row, column and modules. 1 column layout must be used, and it will convert to the carousel based on the column numbers we have defined in the configuration PHP code.

For this tutorial, I have used Blurb modules with some cool styling and hover effects, but feel free to use any Divi module you want.

Configure Row and Column

• Add Section with single column layout
• Add CSS Class dp-carousel to the Row
• Add CSS Class swiper-wrapper to Column
• Add CSS Class swiper-slide to each module

1. Using the Divi Builder on your page, add a section with 1 column row
2. Search for the Blurb module and add it to the page

1. Open Row settings by clicking the gear icon in the green toolbar
2. Go to Advanced → CSS ID & Classes
3. Add dp-carousel to CSS Class field

1. Switch to Content tab
2. Open Column settings
3. Add swiper-wrapper class to CSS Class field

Blurb Module Customization

1. Open Blurb module settings
2. Go to Advanced tab
3. Add swiper-slide to CSS Class field

1. Go to the Content tab and open the Text toggle
2. Add Title and Body texts
3. In Background toggle add Background Image

1. Customize Title style in Design → Title Text toggle

Here are my settings:

• Title Font – Abhaya Libre
• Color – #415962
• Title Text Size – 26px and 22px on mobiles

1. Customize Body text style in Design → Body Text toggle

My settings:

• Title Font – Open Sans
• Color – #879296
• Body Text Size – 14px and 12px on mobiles
• Body Line Height: 1.5em

Add Blurb Spacing and Custom CSS

In this last step we need to add a Blurb Spacing and Custom CSS to apply white background to the content container and zoom animation to the background image.

1. In Blurb settings go to Design → Spacing toggle
2. Add Padding for desktops 300px/1.5vw/1.5vw/1.5vw
3. Add Padding for tablets 220px/30px/30px/30px
4. Add Padding for mobiles 200px/20px/20px/20px

1. Go to Advanced tab and open Custom CSS toggle
2. Add background size and transition to Main Element field
   background-size: 100%;
   transition: all .5s;
3. Add background size and transition to Main Element on hover
   background-size: 105%;
   transition: all .5s;

1. Add background color and padding to Blurb Content Custom CSS field
   background-color: white;
   padding: 30px 1.5vw;
2. Add background color and padding to Blurb Content field on hover
   background-color: white;
   padding: 30px 4vw;

Duplicate your Blurb module

Now, we have the Blurb module ready so we can duplicate it as many times as we want to add new blurbs to our carousel. In each duplicated module you only need to replace texts and change the background image.

Add Custom CSS for arrow navigation and pagination

Our slider is almost ready. In this last step we need to add some custom CSS to style our slider navigation and pagination. This code can be added to the Divi/Theme Options/Custom CSS or to your child theme’s style.css file.

Divi Pixel Carousel Slider for Divi

The Divi Pixel plugin is a premium solution for Divi designers and developers. It comes with over 200 Divi theme settings and 31 powerful modules that will enhance your Divi builder capabilities.

With Divi Pixel you can easily create carousel sections in the Divi theme. You can use default elements, like Icons, Title Text, Descriptions, and Buttons, or select Divi Library items to be displayed in your carousel module. This creates unlimited possibilities. In other words, with the Divi Pixel Carousel module, you can slide anything! This module gives you total control over slider style and content displayed, and this all can be done in the module settings, without writing a single line of custom code.

This is it! We hope you enjoy reading this tutorial. Adding a slider to your Divi website is a great idea and can help you display your content in a more engaging and beautiful way. Whenever you use custom code or 3rd party plugin for carousels, make sure they are working on mobiles devices.

The Divi Video module allows you to display videos on your Divi website. You can upload a video mp4 file or add YouTube URL. This tutorial will be very useful for all users who use Theme Builder templates and have a Video module added to them. By default, the video URL field is not dynamic, so we cannot use custom fields to fetch the video URL automatically. All videos must be added manually in the Video module settings.

In this tutorial, we will show you how to add a dynamic field functionality, so the video URLs can be fetched automatically from the custom post type.

The solution is quite easy. We only need to add a few lines of custom PHP code to our child theme’s functions.php file. If you don’t use a child theme yet, you can build one using our tutorial on How to Create a WordPress Child Theme for Divi or create a child theme with our free child theme generator.

Add custom code to functions.php

In this only one step, we need to add a custom PHP code to our functions.php file located in our Divi Child Theme. There are multiple ways to do that. For this tutorial, we will use WP Dashboard’s Theme Editor. You can also add a custom code by opening the file in Text/Code Editor via FTP, or File Manager available in your server dashboard.

1. Go to Appearance → Theme Editor
2. Open your child theme’s functions.phpfile
3. Add custom PHP code
4. Click Update File

This is it! We hope you enjoy reading this tutorial. Adding dynamic field support to Divi Video module might be beneficial and very useful if you are using custom post time and can save loads of time by fetching the video URL dynamically from CPT. There are more cool tutorials to come, so please make sure to sign up for our newsletter.

There are several various methods of creating sliders such as these, including embedding a simple Lightbox function in your website. With Divi Builder and Divi Pixel Carousel module, this can be achieved in a few simple steps. The Image module available in the Divi Builder offers Lightbox function, while the Divi Pixel Carousel module can display Divi Library items. It offers multiple slider settings such as number of columns, overflow 3D effect, spacing and full customization.

All we need to do is to create multiple Divi Library items with the Image module in them and then select individual images to be displayed in the Carousel child modules. In this tutorial, I will show you how to build a nice, fullwidth slider with images, that will open in a lightbox after clicking. You can follow this tutorial, or download a free section, which can be imported to your Divi Library and used on your website in no time.

Add new Divi Library items

In this first step we will add a new Divi Library item with the Image module. We will also customize the module to add hover effect and remove unwanted spacing.

1. Go to Divi → Divi Library
2. Click Add New button located at the top
3. Select Module for the Layout Type and add Layout Name and Category (optionally)
4. Click Send

1. Click Add New Module
2. Search for “image” in the search field
3. Click Image module to add it to your layout

1. Click Add Image and select the image from your Media Library
2. Open Link toggle and enable Open in Lightbox option
3. Go to Design → Filters and set 90% Contract for the default and 110% for Hover
4. Go to Design → Transform toggle and set Scale to 102% on mouseover
5. Click Update button to save your layout

Duplicate Carousel Image layout

Of course, we need more images for our image gallery slider. We could manually add more images and apply styles as in step one, but I recommend using Post Duplicator plugin to save time. After installing it on your website, you will be able to easily duplicate the Divi Library items, by clicking the “Duplicate Post” link.

Use this function to create as many images as you want.

1. Go to Plugins in your WP Dashboard and click Add New
2. Type Post Duplicator in the search field
3. Click Install and Activate

1. Go to Divi → Divi Library
2. Mouseover the layout we have created and click Duplicate Post

1. Open the new duplicated layout and edit the layout name
   
2. Click on the Image toggle icon to open Image module settings
   
3. Upload a new image for the slider
4. Click Save Change and Update button to save the layout

*Repeat these steps for all images you want to display in the Carousel module.

Add and customize the Carousel module

In this final step, we will add the Divi Pixel Carousel module to the page. We will also add our saved layouts as child modules. We also need to make the row fullwidth, tweak column numbers, grid spacing, navigation style and carousel container padding.

1. Open a page where you want to display the gallery slider and click Add New Row
2. Select 1 column layout 
3. In the modal box type Carousel in the search field
4. Select Pixel Carousel to add it to the page

1. In the Carousel module settings click Add New Item
2. Add an Admin Label
3. Select Divi Library in the Content Type dropdown
4. Select Carousel Image 01 in the Divi Library field
5. Repeat these steps to add all images to the Carousel module

1. Open responsive settings for Number of Columns and set: Desktop 4, Tablet 2 and Mobile 1
2. Set Spacing to 0
3. Enable Loop, Autoplay, Navigation and Show Navigation on Hover

1. Go to Design → Navigation and enable/select custom icons
2. Set Icon Size to 25
3. Set Icon Padding to 20
4. Select black color for the Arrow Color and white for the Arrow Background
5. Set Left/Right Navigation Position to 0.

1. Go to Design tab
2. Open Spacing toggle
3. Set Container Padding to 0
4. Click Save Changes button

Make the Row fullwdith and remove unwanted spacing

Our image gallery slider is almost ready. we still need to make some tweaks in a Row settings, to make the slider full width and remove unwanted spacing.

1. Click on the toggle icon to open Row settings
2. Go to Design → Sizing
3. Set Width to 100%
4. Go to Design → Spacing and set padding to 0

This is it! We hope you enjoy reading this tutorial as well as the free section we are sharing with you. There are more cool tutorials to come, so please make sure to sign up for our newsletter.

The footer is a very important element of any website, although it is often an element overlooked by most web designers who do not pay much attention to it. And this is, unfortunately, a mistake, because the footer is the last section that our visitors see, and it has a huge impact on whether they decide to stay on our site or not. A well-designed footer is to make the visitor take additional actions that will be possible thanks to the elements available in our footer.

Exclusive Footer Layout Pack for Divi

To help you quickly create and implement the right footer on your Divi website, we have prepared 10 professionally designed footers that you can use in any project you want. They are fully customizable and optimized for mobile devices. Each footer is saved as a section to the Divi Library and you can inject it to your Divi site in minutes. This layout pack includes 10 footers, each with a different design, so everyone will find something suitable for their website.

How to import Footer Layout Pack to Divi Library

The download package contains a .zip file, which has to be extracted before you can import it to your Divi website. Once you download and extract the file, you can import it to the Divi Library and use it on your Divi site by adding a new footer via Theme Builder or Divi Pixel Layout Injector.

1. Go to Divi → Divi Library
2. Click the Import/Export button located at the top

1. In the modal box select Import tab
2. Click Choose File and select Footer Layout Pack.json
   
3. Click Import Divi Builder Layouts

Add Footer to the Divi website using Theme Builder

Once our Footer Layouts are imported to our Divi Library, we can use them on our Divi site using the Divi Theme Builder, which allows us to inject our footer section globally with a few simple steps.

1. Go to Divi → Theme Builder 
2. Click Add Global Footer

1. Click the Build Global Footer option
2. In Build From Scratch modal box and click Start Building

1. Click Add New Section icon
2. Switch to Add From Library tab
3. Select the Footer Layout you want to use

Note: By default, there is already an empty section added, so after we add our section, we can remove the top section, so only our new footer will be displayed.

1. Customize your selected footer and click Save after you are done
2. Close Visual Builder
3. Select the Footer Layout you want to use

1. In this last step, you need to click Save Change to save Theme Builder settings.

Add Footer to the Divi website with Divi Pixel Layout Injector

Divi Pixel is a powerful plugin especially developed for Divi. It offers over 200 theme customization settings and 30 custom modules. One of the Divi Pixel features is Layout Injector, which allows us to inject layouts globally in different places. We can set footer, add a layout before and/or after blog archive page, set 404 pages, add footer reveal effect and more.

To insert Footer Layout using the Divi Pixel settings please follow these steps:

1. Go to Divi → Divi Pixel
2. Select Layout Injector tab
3. Scroll down to the Footer section and enable Use Custom Footer Layout
4. Select the desired footer layout from the Divi Library
5. Click Save Changes