Your footer is an important section of your website and yet it is often put together at the end of the web design process as an afterthought. As users scroll down to the bottom of your webpage, a good footer layout & design can provide the key information your users want, keeping them engaged and interacting with your site,. On the other hand, a poorly designed footer can lead to your users getting frustrated, losing interest and leaving your site.
What to put in your footer layout
What you put in your footer will depend on the type of business the website is for and the goals you want to achieve, but there are various types of information that users will expect to find in a footer. Contact information, social media links and a brief introduction to you and your business are common elements users may expect to see, but there is a range of different content that can be added as applicable to your site.
Whilst I wouldn’t suggest including all of these in your footer, the list below shows a number of options for types of information that could typically found in website footers.
- Contact details such as address, phone, mobile & fax numbers
- Link to sitemap &/or key navigation links
- About Us introduction (who, what & why)
- Social media links &/or feeds
- Email Signup forms & Call-to-Actions
- Opening hours and Google location map
- Site Search Tool
- Your log/branding
- Awards, memberships & certifications
- Client testimonials
- List of most recent articles & blog posts
- Events calendar
- Shipping and payment methods for eCommerce sites
Some examples of footer layout designs built with Divi
The Divi Theme Examples showcase gallery has been going since November 2014 and now has 1000’s of live websites built with Divi. The selection from this Divi gallery that is listed below shows various interesting footer designs & layouts that can be used as inspiration for your next Divi project. If you have a great example of a Divi footer section feel free to drop a link in the comments below.
1. WP Gears
WP Gears footer comes with a full-width call-to-action where users are encouraged to Join The Community and sign up to the WP Gears email list. In the row below, a brief introduction to what the site is about along with the WP Gears logo sits in the left column. The 2 central columns have key site links and the right-hand column holds large social media follow icons. As with most sites, the copyright text sits at the very bottom. The color scheme is separate from the rest of the site, and with the exception of the subscribe and social media buttons, uses off-black & off-white.
2. Yates Design
Yates Design is a web design business based out of Australia and was probably the 1st to add a footer reveal design to their Divi website. As the user scrolls down the page to the footer, it is revealed from behind the last section of the page. A cool effect that has now been replicated on a number of Divi footer layouts thanks to the popular footer reveal tutorial that was published on the Yates Design blog. The effect can be accomplished with some simple custom CSS which is given in the tutorial. The footer itself is a simple layout with their logo, contact information and email subscription box placed over 3 columns.
3. Brand Elemental
A very clean and clear footer layout for the Newton website that includes (color) logo, tagline, social media icons and copyright info, privacy and sitemap links in column 1. Site links (many not included in the main header menu) fill the next 3 columns and the 5th and the last column is used for contact details. Below the information columns is a full-width email signup form that stands out on the grey background. The overall styling of grey text on white background matches the style of the rest of the site.
5. Daisy & Bump
Daisy & Bump is an online store selling nursery art prints and comes with a footer that seamlessly follows the styling of the rest of the website. Unlike many footers, the Daisy & Bump footer separates each column with the use of lighter background color and a thin border. The footer is split into 4 columns with the 1st including contact info and email sign-up form. The 2nd column has about us and blog links, but each comes with associated graphics and as part of a short line of text rather than just plain About Us, or Blog text links. The 3rd column again comes with graphics and info links for delivery and policies/T&C. The last column has payment option and SecureTrust logos along with stockists and a stockist registration button. Centered social media icons and copyright sit in the bottom bar below.
6. Outreach Plus
The outreach Plus footer follows the clean style of the site with grey text on a white background. The layout has 4 main columns, with the 1st 1/2 width column containing a stand-out call-to-action for users to start a free product trial. Contact details, logo and social media icon links sit below. The 2nd half of the footer is split into 1/6 columns and include product, use cases & resources links. The copyright notice sites below the 4 main columns.
7. Slim By Nature
The Slim By Nature footer design is split into 1 row of 3 columns that contains site links for The Detox Program, Services and Legal and 1 row of 4 columns that contains shipping and payment details/logos along with an Australian made text with a map icon. The bottom bar sits below and holds the copyright and web design credits. The styling and colors follow on from the main page content styling.
How to add & edit a footer in Divi
Adding content to your footer in Divi follows the same method of using Widgets as with other WordPress themes. To add widgets to your footer area in Divi you will need to navigate to Appearance > Widgets in the WordPress admin dashboard or via the Widgets link when using the front-end.
Once you are in the Widgets section of your dashboard, you can then drag and drop various available widgets into the different footer areas. There are 6 footer widget areas available, but by default, there are only 4 columns shown in the Divi footer and you will need to edit the column structure in the Theme Customizer to utilize the 5th and 6th footer areas.
Once you have your widgets added to the footer areas you can customize the footer in the Theme Customizer > Footer. There are 5 sub-menu options to control various settings related to the footer. These footer options are;
- Layout – Choose between 20 different column layout structures (including for 5 and 6 columns) and add a custom background color
- Widgets – Choose widget text styling and colors
- Footer Elements – Turn social media icons on or off
- Footer Menu – Styling for the footer menu (add via menus in WP dashboard)
- Bottom Bar – Edit styling and/or content of bar containing footer credits and social icons
Footer bottom bar site credits & social icons
The Designed by Elegant Themes | Powered by WordPress footer credits text and social media icons (Facebook, Twitter, Googe+, Instagram and RSS) icons sit below the footer widgets area in the bottom bar of the footer. This can be customized in the Theme Customizer by navigating to Theme Customizer > Footer > Bottom Bar where you can change the footer credits text and styling of the bar. To edit the social and RSS icons you will need to go into the WordPress dashboard and navigate to Divi > Theme Options where there are toggles to show each icon and to set the link URLs.
Divi footer tutorials for a more customized look
There are a lot of Divi footer tutorials that will cover everything from setting the footer height, injecting layouts, adding buttons, changing the footer credits, and almost anything else you could possibly want to do with your footer in Divi. Below are some of the more popular tutorials for the Divi footer from the Elegant Themes blog. As always, Google is your friend so do a search and see what else is possible with the Divi footer and some custom code.
- How to Create Fixed Mobile Footer Bars with Divi
- Inject a Layout From Your Divi Library Into Your Footer Using Divi Hooks
- How to Make Your Divi Footer Fixed
- How to Make Your Divi Footer Sticky
- How to Add Creative Background Designs to Divi’s Bottom Footer Bar