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 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)
- Privacy policy, terms of use, and copyright (usually in the Divi bottom bar)
- 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 thousands 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. 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.
2. Brand Elemental
Brand Elemental is a Divi child theme shop with a clean & minimal footer layout to match the style of the website as a whole. At the top of the footer, there is a horizontal list of site links for Contact Us, Affiliate Disclaimer, Affiliate Signup, Affiliate Login, Privacy Policy, Refund Policy, and Support Request. With the exception of the Contact Us link, these site links are not also included in the main header menu. Below these links, we have 2 columns with the logo and small social media icons on the left and a call-to-action email sign-up form on the right.
3. Newton
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 are 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.
4. 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 using a lighter background color and a thin border. The footer is split into 4 columns with the 1st including contact info and an email sign-up form. The 2nd column has about us and blog links, but each comes with associated graphics and is 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 a 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.
5. 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 includes product, use cases & resource links. The copyright notice sites are below the 4 main columns.
6. 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 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 the 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.
thanks. some nice layouts there to inspire me. oh, and the daisy and bump site is lovely!