Each WordPress theme offers different customization options. Divi, the most popular premium WordPress theme, comes with plenty of customization options to allow you to have a stylish footer on your website. You can add elements like social media icons, a search box, and links to your footer. If you need more styling options or want to add more elements to the footer, you can create a custom footer template to replace the default footer of Divi.
In case you didn’ know, the Divi theme is bundled with a built-in page builder plugin called Divi Builder. Divi Builder comes with a Theme Builder feature that you can use to create custom templates for your theme parts like the header, the footer, the single post layout, archive pages, 404 page, and so on. If you use WooCommerce, you can also create a custom WooComerce single product page (and other pages) with the Theme Builder feature of Divi Builder.
You can read our previous article to learn how to create a custom footer with Divi Builder. In this article, we will show you how to customize the Divi footer via theme customizer. The elements you can add to your footer are:
- Social media icons
- WordPress widgets
The Divi footer itself is divided into three sections: the main footer section, menu section, and bottom section. The bottom section is used to place the credits and social media icons. While for the main footer section, you can use it to place WordPress widgets.
Setting the footer layout and background color
Before adding any element to the footer and styling it up, you can set the layout of the main section of the footer first. Divi offers 20 different layouts you can choose from. You can select the layout according to the elements you want to add. To select a layout, go to the theme customizer (Appearance -> Customize). On the theme customizer page, click the Footer menu and open the Layout block. Select the layout you want to use on the COLUMN LAYOUT option. To change the background, you can click the Select Color button to open the color picker. Click the Publish button to apply the changes.
Adding elements to the footer
You can add any element to the main section of the footer via WordPress widgets, be it native WordPress widgets or widgets from the plugins you use. To add one, go to Appearance -> Widgets from your WordPress dashboard. Drag the widget you want to add to the footer area.
- Footer Area #1: Leftmost column on the footer layout
- Footer Area #2: Second column (from the left) on the footer layout
- Footer Area #3: Third column (from the left) on the footer layout
- Footer Area #4: Fourth column (from the left) on the footer layout
- Footer Area #5: Fifth column (from the left) on the footer layout
- Footer Area #6: Sixth column (from the left) on the footer layout
To add the menu to the menu section of the footer, you can go to Appearance -> Menus on your WordPress dashboard. Open the Manage Locations tab and select the menu you want to add from the Footer Menu option. Click the Save Changes button to apply the change.
If you have no menu yet to be added to this menu section, you can create one first. Read this article if you are new to WordPress and have no idea yet to create a menu.
To change the background color of the menu section in the footer area, you can switch back to the theme customizer. Go to the Footer menu and open the Footer Menu block. You can change the menu background color on the FOOTER MENU BACKGROUND COLOR option. You can also set the menu text color on the FOOTER MENU TEXT COLOR option, the active link color on the FOOTER MENU ACTIVE COLOR option, the font style on the FONT STYLE option, and font size on the FONT SIZE option.
Social media icons
To show/hide social media icons, you can open the Footer Elements block under the Footer menu on the theme customizer. Simply tick the SHOW SOCIAL ICONS option and click the Publish button.
To set the social media platforms to show (as well as your accounts), you can go to Divi -> Theme Options. You can find the options to show/hide the social media platforms and the options to add the URLs under the General tab. Don’t forget to click the Save Changes button to apply the changes.
By default, your footer contains credits to Elegant Themes (the developer of Divi). To replace it, you can go to the theme customizer. Click the Footer menu and open the Bottom Bar block. You can replace the default text on the EDIT FOOTER CREDITS field. If you want to add a link, you use an HTML tag — <a href> — like the one on the screenshot below.
If you want to disable the credits, simply tick the DISABLE FOOTER CREDITS option. You can also customize the bottom section of the footer by changing the background color, text color, font size, and so on. From this block, you can also change the color and size of the social media icons.
Don’t forget to click the Publish button to apply the changes.
The bottom line
If you want to have more styling options and the ability to add more elements such as button, email opt-in form, and so on, you can create a custom footer template using the Theme Builder feature of Divi Builder which you can access by going to Divi -> Theme Builder on your WordPress dashboard. You can create a unique footer to your liking, with your own design.