Footers are an important part of designing a website, but they can also be one of the most difficult areas to design. Most include basic elements such as navigation, contact information, and social tracking buttons, but bringing them out or even looking interesting is another story. In this article we will look at 15 Divi websites with an excellent footer design to inspire you for your next Divi site.

I chose these sites based on their color, images, typography, navigation, social icons, contact information, calls to action, newsletter subscriptions, and so on. I will point out what I find interesting about them. I've included the full screen capture so you can see how it fits with the rest of the site.

Access until the end for some links to the Elegant Themes tutorials and a free layout pack of Divi 100 to help you build your footer with Divi.

Now, on the footers, which are not in any particular order …

1. JC Pohl

This is a simple footer to provide a full-width email registration form. It uses a dark background with text, a button and white and blue / green icons. The colors blend perfectly with the website. The text offers a short call to action to subscribe to the newsletter.

See Web site

2. Benton Brothers Fine Cheese

This one uses a light cream background with dark text to create a two-color pattern in two rows. The first row places the social tracking buttons, logo and newsletter form away from each other. The second row displays the footer menu and phone number in a box with each link separated by a bar.

Visit the Web site

3. SpotX

This footer uses two rows. He places the social feeds for three social networks in the first row, while the second line displays large social square tracking icons on one side, a small logo in the center and a small footer navigation at the bottom. 39, far right. The copyright notice is placed under the navigation.

Visit the website

4. Outreach Plus

This one uses an interesting section separator with pictures of a team member in circles placed along the wavy line of separation. The footer area uses a black background with white text containing information, links, and contact information.

Visit the Web site


The footer of this site has a dark blue background with white text and orange highlights. It uses three columns with the third column having two rows. The logo overlaps the previous section. Contact information includes social icons with orange square borders. The footer navigation is placed vertically with each separated by a weak line. The newsletter form is simple but remarkable. The information about us is not crowded and is easy to read.

See the web site

6. HEJ Coffee Company

The footer of this site uses an image with a black background taking up most of the space. The image and the text create three columns. It uses white text with each element displaying an uppercase title. Icons and social links are slightly gray. It's simple and daring at the same time.

See the web site

7. The Anagnou

This one uses a white background and soft colors that integrate perfectly to the site. The text is small, creating a lot of white space. He uses two lines. The top row displays three columns with the contact and on the information. The middle column displays the logo with social icons and the designer's link. The right column offers a call for action and a small registration form by e-mail. The second line displays the footer navigation. The two lines are separated by a line

Visit the Web site

8. Newton Software

This one looks simple and clean. Typical footer layouts use four columns of widget areas. This one has five columns and still manages to keep a lot of white space. The left column displays the logo (which is the stand-out color) with about info, social links, copyright and links. The other four columns separate the typical footer navigation followed by detailed contact information. At the very bottom is an e-mail registration form across the entire width.

Visit the Web site

9. eGaushala

This site uses a revealed footer. The overlay portion displays four columns. It displays the company logo, information, social buttons, copyright, designer and links. Then there are two columns that point to articles, displaying thumbnails and titles. The last column displays a built-in Twitter feed. The revealed section is a full screen image with CTA in an overlay. The colors correspond to the image of the site.

See the web site

10. Kickbike

This site also uses a revealed footer. The overlay section displays a full-screen image with title and CTA. The revealed section uses a black background with content in the center. It displays large square social icons, and an e-mail registration form with a button underneath, and a line with copyright and links.

Visit the Web site

11. Telepizza

This one uses three sections just under the CTAs in the content area to display the links. The three sections use colors that correspond to the rest of the site. The first shows gray social icons on a light background. The second displays the footer navigation in the form of a white text on a red background, each link being in its own box. The third has a darker red background and contains links to the contact page and legal information.

Visit the Web site

12. Cloud Nine

This one displays a lot of information in the footer area, but it still manages to keep it easy to follow. It displays four columns on a blue background with white and orange highlights. On the far left, company badges show the certifications. Following this are the coordinates and a CTA. The next column displays the navigation vertically. The last column displays a link to a CTA page with an e-mail registration form.

Visit the Web site

13. Ebert Studio

This site features a single footer in four columns on a patterned background. Four columns are common, but I love the way it incorporates the map. Selecting text underneath the map opens Google Maps in a new tab, allowing you to see the map in full screen. Also included are the logo, the vertical menu and the contact information with social tracking buttons. The colors correspond to the branding of the website.

Visit the Web site

14. Lauren K Stein

This one was one of the winners of the Footer Design Challenge in 2015. It contains a ton of information, but it is easy to see and navigate. It uses a dark blue background with multicolored text to display information, links to events, links to resources, and social tracking buttons. The icons in the titles help the sections to stand out. Below this is the standard footer navigation using the same colors as the rest of the website.

Visit the Web site

15. KR Digital Solution

This one was also one of the winners of the Footer Design Challenge in 2015. It's one of the footers the simpler and cleaner than I've seen. . Using a black background with white text, it displays the logo on the side and the links on the other. The links include the title text as a simple slogan. The links are separated by dashes.


End of Thought

Here is our look at the 15 Divi sites with an excellent footer design to inspire you. Next site Divi. I love some of them for their simplicity. I love others for the way they provide complex information easy to follow. These are excellent examples of how much information can be placed in a little space and remain legible.

For more information on the footer design with Divi and a free layout pack, see the articles:

want to hear from you. Which of these footer designs is your favorite? Let us know in the comments below.

Profile picture by vector /

  Randy A. Brown

By Randy A. Brown

Randy A. Brown is a freelance writer from East TN specializing in WordPress and eCommerce. He is a longtime WordPress enthusiast and loves to learn new things and share information with others. If he does not write or read, he probably plays the guitar.

! function (f, b, e, v, n, t, s) {if (f.fbq) returns; n = f.fbq = function () {n.callMethod?
n.callMethod.apply (n, arguments): n.queue.push (arguments)}; if (! f._fbq) f._fbq = n;
n.push = n; n.loaded =! 0; n.version = 2.0 & # 39 ;; n.queue = []; t = b.createElement (e); t.async =! 0;
t.src = v; s = b.getElementsByTagName (e) [0]; s.parentNode.insertBefore (t, s)} (window,
document, "script", https: //');

fbq (& # 39 ;, & # 39; 967149496645973 & # 39;);
fbq ("track", "PageView");

Load More Related Articles
Load More By Amit Ghosh
Load More In Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

How to Add a Searchable Map Store Locator to Divi’s Handyman Layout Pack

If you have multiple stores, the addition of a store locator to your website can greatly e…