Part 2: Building the Footer
We are plowing through this guide on How to Clone Any Online Store and now it is time to tackle the footer with our (fairly complex) header completed. Luckily the footer is a little easier going with only two snippets to add to get will give us that real bespoke quality you get from the Abercrombie & Fitch site.
Footers are often overlooked as just that place where you put your privacy policy and state your copyright, but if used the right way, it can help your site in many ways from SEO to the user experience. Looking at the Abercrombie & Fitch site you can see that they have a few distinct sections which we will recreate.
The first column is where they highlight their brands, the second has some important links, and the last column is where we try to capture those emails and list our socials. Right on the bottom of the footer then is where we will add those legalese links.
So, with the stage set, let’s get to it!
Video Tutorial
Table of Contents
Difficulty
Intermediate
Time
25 Minutes
Snippet 12: Make the Opt-in Form Inline
Unfortunately, a stock Divi install will not let you place your email field and submit button inline with each other, but luckily some CSS skills can make just that happen.
Divi > Theme Options > Custom CSS
Snippet 13: Space Social Icons Evenly
To get our social media icons in the Social Follow Module to be evenly centered below the Optin Module, we just need to size each “column” for each social icon according to how many icons there are. Confused? Let me explain.
Just look at the width of the space where all the icons will be displayed as 100%. Now, all we need to divide that 100% by the number of social networks we intend to list.
If we have 4 social networks, we will divide 100 by 4, so the value we use will be 25% for each social icon.
If we have 2 social networks, we will divide 100 by 2, so the value we use will be 50% for each social icon.
Social Follow Module > Advanced > Custom CSS > Main Element
Don’t evade the foot…..er
Conclusion
Awesomeness! In this section, we built a functional footer using a couple of smart CSS snippets that allowed us to add some features not native to Divi like inline Optin Modules. While the footer design is not something that will blow minds, it is definitely something that is functional and will help you rank with SEO.
In the next installment, we will be showing you how to re-create the Abercrombie & Fitch product page using the Divi Theme Builder.
Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!
Catch you folks next week!
0 Comments