Customize the Default WordPress Footer Layout with CSS Grid

Apr 9, 2019 | CSS Tutorial | 0 comments

The default footer area in WordPress can feel a bit cumbersome. Even if you’re using a theme with footer layout options like Divi has that still won’t give you full control (and better responsiveness) like CSS Grid can, and you can’t add rows if you need them. You can using this method.

In this tutorial I’m going to give you some code to turn your footer area into a flexible grid where you can place your widgets anywhere you want 🙌

Please note that you should have some experience using Divi and adding / editing CSS; knowledge of how to inspect would be really helpful.

SHUT UP AND SHOW ME THE DEMOS

If you’re using another theme you can use my code, but you’ll likely need to inspect and replace (at the very least) your main footer class/id. I’m also including some basic styling for the Bloom widget and the Gravity Forms widget should you use them, and inline snippets for using Font Awesome or the Elegant Icon Font.

If you’re new to CSS grid or have tried to use it but found it confusing then this could be for you!

The method I’m using is really easy to understand (I think) because it’s a more visual method, certainly the first grid method that “clicked” right away for me. You won’t need to worry about row or column line numbers or fr units, or any numerical units you don’t already use with common CSS.

We’ll be assigning recognizable names to our widgets and then arranging their names visually in our code.

I’m a visual learner myself so let me show you what I mean. First here are the two looks, one is a simple layout, the other is a slightly more complex layout:

image of demo screenshots

Let’s take a closer look at the second layout because I think that’s the better example of what is possible with CSS grid. Notice how we visually divide our footer up into a grid, we’ll then use that grid layout as our CSS code:

code layout visualization

But how did I assign the widget names in the first place? I’m using the :nth-child(n) selector combined with the widget placement in the dashboard, so you just need to use the natural number order:

assign names to widgets and add in css

And that’s basically it, so if that made sense go try it yourself! Have a look at the demos and my recommended steps, these are meant as starting points since everyone will want different layouts and widgets. Also be sure to check my notes.

Recommended Steps

  • 1. Add some widgets so you have content to build your grid with. Don’t worry too much about the order or what they are yet, once we assign names to our widgets you can easily switch them out later. Demo 1 is using 4 widgets / Demo 2 is using 12 widgets.
  • 2. Add my CSS. Pick which demo look you’d like to use as a starting point and add the corresponding CSS to wherever you add your custom code (e.g. your child stylesheet or Divi theme options > custom CSS). I’ve included code without widget styling if you prefer.
  • 3. Adjust my code to reflect your changes. After you’ve settled on your grid and widgets change my assigned widget names to whatever will make them more recognizable for you. Also delete any code and comments you don’t need, replace colors, etc. HAVE FUN!!
  • IMPORTANT NOTE!! If you end up removing any widgets on smaller screen sizes like I have they have to be the last widgets. Notice how the two I hid are the last two, 11 and 12. The reason is when you hide a widget it affects the natural numerical order of the widgets.

Would you like code to apply the grid but no widget styling?

Font Awesome code for html widget

If you don’t know how to add Font Awesome to your site it’s really easy! Go here and copy the code you see in the black box, it looks like this:

Now paste that code in Divi theme options > integration > head. That’s it! You can now use FA anywhere on your site, check their docs for other ways to use it.

<div class="social-footer">
    <div class="f-awesome">
        <a href="#!"><i class="fab fa-facebook-f"></i></a>
        <a href="#!"><i class="fab fa-twitter"></i></a>
        <a href="#!"><i class="fab fa-pinterest"></i></a>
        <a href="#!"><i class="fab fa-instagram"></i></a>
        <a href="#!"><i class="fab fa-youtube"></i></a>
    </div>
    <br>
    <p>
        123 Broadway Street<br> Buffalo, NY 10090
    </p>
</div>

 

ET icon font code for html widget

Your Divi site comes with ET’s Elegant Icon Font (the icons you pick from in the blurbs) so you can add their icons anywhere on your site. ET has a few ways to do this (I tend to use pseudos/CSS) but for this tutorial I’m doing inline HTML (mainly because I think most people don’t know you can do it this way and it seems well-suited to widgets).

Here’s their cheatsheet, scroll down to the unicode reference guide to change your icons. My code box plugin doesn’t like unicode so sorry if it looks funky but at least it’s highlightable.

<ul class="social-footer">
<li><a href="#!" alt="Facebook"><span style="font-family:ETmodules;">&#xe093;</span></a></li>
<li><a href="#!" alt="Instagram"><span style="font-family:ETmodules;">&#xe09a;</span></a></li>
<li><a href="#!" alt="Twitter"><span style="font-family:ETmodules;">&#xe094;</span></a></li>
<li><a href="#!" alt="Vimeo"><span style="font-family:ETmodules;">&#xe09c;</span></a></li>
<li><a href="#!" alt="Pinterest"><span style="font-family:ETmodules;">&#xe095;</span></a></li>
<li><a href="#!" alt="LinkedIn"><span style="font-family:ETmodules;">&#xe09d;</span></a></li>
</ul>

demo 1 css code

/*****************************************/
/*** CUSTOM FOOTER - 3 COLUMN CSS GRID ***/
/*****************************************/
/*** GENERAL SPACING AND FOOTER AREA WIDTH ***/
 #main-footer .container {
     width: 80%; /* this is default, I'm only including because if you change the max you'll likely need to change this too */
     max-width: 80%; /* if you want to change the default max width of 1080px; */
}
 .footer-widget:nth-child(n) {
     width: 100% !important;
     margin-right: 0 !important;
}
 #footer-widgets {
     padding: 0;
}
 #footer-widgets .footer-widget .fwidget { /* space above and below each widget */
     margin-top: 3em;
     margin-bottom: 3em;
}
/*** REMOVE BULLETS ***/
 #footer-widgets .footer-widget li:before {
     content: none;
}
 #footer-widgets .footer-widget li {
     padding-left: 0;
}
/*** ASSIGN A NAME TO EACH WIDGET FOR ARRANGING THE GRID LAYOUT ***/
 .fwidget:nth-child(1) { /* widget 1 - bloom form - bloom widget */
     grid-area: bloom; /* name it something recognizable for your widgets */
}
 .fwidget:nth-child(2) { /* widget 2 - menu - nav menu widget */
     grid-area: menu;
}
 .fwidget:nth-child(3) { /* widget 3 - social icons using font awesome - HTML widget */
     grid-area: social;
}
 .fwidget:nth-child(4) { /* widget 4 - image - image widget */
     grid-area: image;
}
/*** ARRANGE THE LAYOUT WITH THE ASSIGNED WIDGET NAMES ***/
 .footer-widget {
     display: grid; /* applying CSS grid; overrides customizer layout setting */
     grid-column-gap: 5%; /* the space between the columns 5x2=10 */
     grid-template-columns: 30% 30% 30%; /* sets 3 columns at equal width, allowing space for the gap; we'll change this below for mobile responsiveness */
     grid-template-areas: /* this mirrors our grid layout, see reference image */
     'bloom bloom bloom' 
     'menu social image';
}
/**************************************************************/
/*** MEDIA QUERIES - CHANGE GRID LAYOUT FOR SMALLER SCREENS ***/
/**************************************************************/
 @media only screen and (max-width: 980px) {
     .footer-widget {
         text-align: center; /* center text */
         grid-template-columns: auto; /* this turns the 30% column width into one 100% column width */
         grid-template-areas: /* notice how we don't need to write the names three times since it's now one column */
         'bloom' 
         'social' 
         'menu' 
         'image';
    }
     #main-footer .widget_nav_menu li a { /* adjust menu link margins since text is now centered */
         margin-left: .5em;
         margin-right: .5em;
    }
}
/*********************************/
/*** ADDITIONAL WIDGET STYLING ***/
/*********************************/
/*** BLOOM WIDGET CSS ***/
 #main-footer .et_bloom_widget_content .et_bloom_form_content {
     padding: 0 !important;
}
 #main-footer .et_bloom_form_header .et_bloom_form_text {
     text-align: center; /* center content */
}
 #main-footer .et_bloom_widget_content .et_bloom_header_text_light h2, 
 #main-footer .et_bloom_widget_content .et_bloom_form_header h2 {
     font-weight: 700 !important;
     font-size: 32px !important;
     color: #3d314a !important;
}
 #main-footer .et_bloom_form_container p {
     font-size: 1.2em;
}
 #main-footer .et_bloom_widget_content .et_bloom_popup_input input, 
 #main-footer .et_bloom_widget_content .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
     background-color: rgba(255,255,255,0.2) !important; /*background color of input fields */
}
 #main-footer .widget_bloomwidget {
     padding-bottom: 4em;
     border-bottom: 1px solid #3D314A; /* border below bloom optin */
}
 #main-footer .widget_bloomwidget:after { /* blocky accent in the center of the border */
     content: "";
     position: absolute;
     background: #3D314A; /* color of blocky accent */
     width: 100px;
     height: 8px;
     margin-top: 4em;
     left: 50%;
     transform: translate(-50%,-50%);
     -ms-transform: translate(-50%,-50%);
}
/*** PLACEHOLDER TEXT COLOR ***/
 #footer-widgets ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.7) !important;
}
 #footer-widgets ::-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.7) !important;
}
 #footer-widgets ::-moz-placeholder {
     color: rgba(255, 255, 255, 0.7) !important;
}
 #footer-widgets ::-moz-placeholder {
     color: rgba(255, 255, 255, 0.7) !important;
}
/*** MAKE OPTIN FORM INLINE ON DESKTOP ***/
 @media only screen and (min-width: 981px) {
     #footer-widgets .et_bloom_fields {
         display: flex;
    }
     #footer-widgets .et_bloom_popup_input {
         flex-basis: 90%;
         margin-right: 15px !important;
         margin-bottom: 0 !important;
    }
}
/*** SOCIAL USING FONT AWESOME - HTML WIDGET  ***/
 .social-footer {
     text-align: center;
}
 .social-footer .fab {
     font-size: 22px;
     line-height: 45px;
     width: 45px;
     height: 45px;
     color: #684756;
     text-align: center;
     border-radius: 50px;
     border: 1px solid transparent;
     -moz-transition: all 0.2s;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
}
 .social-footer .fab:hover {
     color: #3D314A;
     border-color: #3D314A;
}
 .f-awesome {
     display: flex;
     justify-content: center;
}
/*** NAVIGATION MENU WIDGET ***/
 #footer-widgets .widget_nav_menu li {
     display: inline-block;
}
 #footer-widgets .widget_nav_menu li a {
     font-style: italic;
     font-size: 1.2em;
     color: rgba(255,255,255,0.5);
     margin-right: 1em;
     border-bottom: 1px solid transparent;
}
 #footer-widgets .widget_nav_menu li a:hover {
     color: #fff;
     border-bottom: 1px solid rgba(255,255,255,0.5);
}
/*** FOOTER - BOTTOM BAR ***/
 #footer-info { /* center text */
     float: none;
     text-align: center; 
}

 

demo 2 css code

/*****************************************/
/*** CUSTOM FOOTER - 6 COLUMN CSS GRID ***/
/*****************************************/
/*** GENERAL SPACING AND FOOTER AREA WIDTH ***/
 #main-footer .container { /* make footer fullwidth */
     width: 100%;
     max-width: 100%;
}
 .footer-widget:nth-child(n), 
 #footer-widgets .footer-widget:nth-child(n) {
     width: 100% !important;
     margin: 0 !important;
}
 #footer-widgets {
     padding: 0;
}
 #footer-widgets .footer-widget .fwidget {
     margin: 0 !important;
     padding: 40px; /* applies to all widgets, you may want to do this on an individual basis instead */
}
/*** ASSIGN A NAME TO EACH WIDGET FOR ARRANGING THE GRID LAYOUT ***/
 .fwidget:nth-child(1) { /* widget 1 - company info - HTML widget */
     grid-area: info; /* name it something recognizable for your widgets */
     background: #044389; /* remove any styling you don't need, be sure to keep the grid area name */
}
 .fwidget:nth-child(2) { /* widget 2 - contact form - gravity form widget */
     grid-area: form;
     background: #4DCCBD;
}
 .fwidget:nth-child(3) { /* widget 3 - social icons using ET icon font - HTML widget */
     grid-area: social;
     background: #fff;
     display: inline-flex;
     justify-content: center;
     align-items: center;
}
 .fwidget:nth-child(4) { /* widget 4 - menu 1 - nav menu widget */
     grid-area: menu1;
     background: #FBF2C0;
}
 .fwidget:nth-child(5) { /* widget 5 - menu 2 - nav menu widget */
     grid-area: menu2;
     background: #FBF2C0;
}
 .fwidget:nth-child(6) { /* widget 6 - menu 3 - nav menu widget */
     grid-area: menu3;
     background: #FBF2C0;
}
 .fwidget:nth-child(7) { /* widget 7 - menu 4 - nav menu widget */
     grid-area: menu4;
     background: #FBF2C0;
}
 .fwidget:nth-child(8) { /* widget 8 - quote with author - HTML widget*/
     grid-area: quote;
     background: #FF8484;
     background-image: url('https://filedn.com/ljRP1fGUfVWQzMGyVol4YoR/quotes-yellow.png'); /* download if you intend to use as it will eventually come down */
     background-position: bottom right;
     background-repeat: no-repeat;
}
 .fwidget:nth-child(9) { /* widget 9 - copyright info - HTML widget*/
     grid-area: copyright;
     background: #2374AB;
     font-style: italic;
     display: flex;
     align-items: flex-end;
}
 .fwidget:nth-child(10) { /* widget 10 - image 1 - EMPTY HTML widget*/
     grid-area: image1;
     min-height: 175px; /* to ensure more of the image shows */
     background: url('https://placehold.it/300x300');
     background-size: cover;
     background-position: center;
}
 .fwidget:nth-child(11) { /* widget 11 - image 2 - EMPTY HTML widget*/
     grid-area: image2;
     min-height: 175px;
     background: url('https://placehold.it/300x300');
     background-size: cover;
     background-position: center;
}
 .fwidget:nth-child(12) { /* widget 12 - image 3 - EMPTY HTML widget*/
     grid-area: image3;
     min-height: 175px;
     background: url('https://placehold.it/500x250');
     background-size: cover;
     background-position: center;
}
/*** ARRANGE THE LAYOUT WITH THE ASSIGNED WIDGET NAMES ***/
 .footer-widget {
     display: grid; /* applying CSS grid; overrides customizer layout setting */
     grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; /* sets 6 columns at equal width; we'll change this below for responsiveness */
     grid-template-areas: /* this mirrors our grid layout, see reference image */
     'info image1 menu1 menu2 menu3 menu4' 
     'form form social quote quote image2' 
     'form form image3 image3 copyright copyright';
}
/**************************************************************/
/*** MEDIA QUERIES - CHANGE GRID LAYOUT FOR SMALLER SCREENS ***/
/**************************************************************/
 @media only screen and (max-width: 767px) {
     .footer-widget {
         grid-template-columns: 50% 50%; /* sets 2 columns at equal width */
         grid-template-areas: 
         'info info' 
         'form form' 
         'menu1 menu2' 
         'menu3 menu4' 
         'quote quote' 
         'image1 social' 
         'copyright social' 
    }
     .fwidget:nth-child(11), /* hide image2 */
     .fwidget:nth-child(12) { /* hide image3 */
         display: none; /* any widget names you don't use have to be hidden, otherwise the browser will load them and break the grid */
    }
}
 @media only screen and (min-width: 768px) and (max-width: 1280px) {
     .footer-widget {
         grid-template-columns: 25% 25% 25% 25%; /* sets 4 columns at equal width */
         grid-template-areas: 
         'info image1 menu1 menu2' 
         'form form menu3 menu4' 
         'form form quote quote' 
         'copyright social social image2';
    }
     .fwidget:nth-child(12) { /* hide image3 */
         display: none;
    }
}
/*********************************/
/*** ADDITIONAL WIDGET STYLING ***/
/*********************************/
/*** REMOVE FOOTER BAR - OPTIONAL ***/
 #footer-bottom {
     display: none;
}
/*** REMOVE BULLETS ***/
 #footer-widgets .footer-widget li:before {
     content: none;
}
 #footer-widgets .footer-widget li {
     padding-left: 0;
}
/*** QUOTE - HTML WIDGET ***/
 p.footer-quote {
     font-size: 3em;
     line-height: 1.2em;
     font-family: 'Overpass Mono',monospace; /* replace with your font choice or remove */
     font-weight: bold;
     font-style: italic;
     color: #fff;
}
 p.footer-author {
     font-size: 20px;
     float: right;
     font-style: italic;
     color: #044389;
     font-weight: bold;
}
/*** SOCIAL USING ET ICONS - HTML WIDGET ***/
 #footer-widgets ul.social-footer {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
 #footer-widgets .social-footer li {
     line-height: 64px;
     width: 64px;
     height: 64px;
     text-align: center;
     margin: 0;
}
 #footer-widgets .social-footer li a {
     font-size: 40px;
     color: #2374AB;
}
 #footer-widgets .social-footer li a:hover {
     color: #4DCCBD;
}
/*** GRAVITY FORM WIDGET ***/
 #footer-widgets .gform_widget h4 { /* heading */
     font-size: 2em;
}
 #footer-widgets .gform_wrapper ul.gform_fields li.gfield {
     padding-right: 0;
}
 #footer-widgets .gform_wrapper li.hidden_label input {
     margin-top: 0;
     margin-bottom: 0;
}
 #footer-widgets input[type=text], 
 #footer-widgets textarea { /* form field styling */
     background: transparent;
     border: 1px solid #fff;
     border-bottom-width: 5px;
     border-radius: 0;
     font-size: 15px;
     color: #fff;
     padding: 8px 15px;
     box-shadow: none;
     -moz-box-shadow: none;
}
 #footer-widgets .gform_footer {
     text-align: center; /* centers button */
}
 #footer-widgets .gform_wrapper input[type=submit] { /* button styling */
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 2px;
     padding: 10px 15px;
     border-radius: 0;
     background: #fff;
     color: #044389;
     border: none;
}
 #footer-widgets .gform_wrapper input[type=submit]:hover { /* button hover */
     background: #FBF2C0;
}
/*** PLACEHOLDER TEXT ***/
 #footer-widgets ::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.8);
}
 #footer-widgets ::-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.8);
}
 #footer-widgets ::-moz-placeholder {
     color: rgba(255, 255, 255, 0.8);
}
 #footer-widgets ::-moz-placeholder {
     color: rgba(255, 255, 255, 0.8);
}

 

css grid code – no widget styling – layout 1

/*****************************************/
/*** CUSTOM FOOTER - 3 COLUMN CSS GRID ***/
/*****************************************/
/*** GENERAL SPACING AND FOOTER AREA WIDTH ***/
 #main-footer .container { /* change to desired width */
     width: 80%;
     max-width: 80%;
}
 .footer-widget:nth-child(n) {
     width: 100% !important;
     margin-right: 0 !important;
}
 #footer-widgets {
     padding: 0;
}
 #footer-widgets .footer-widget .fwidget { /* space above and below each widget */
     margin-top: 3em;
     margin-bottom: 3em;
}
/*** REMOVE BULLETS ***/
 #footer-widgets .footer-widget li:before {
     content: none;
}
 #footer-widgets .footer-widget li {
     padding-left: 0;
}
/*** ASSIGN A NAME TO EACH WIDGET FOR ARRANGING THE GRID LAYOUT ***/
 .fwidget:nth-child(1) {
     grid-area: one; /* name them something recognizable for your widgets */
}
 .fwidget:nth-child(2) {
     grid-area: two;
}
 .fwidget:nth-child(3) {
     grid-area: three;
}
 .fwidget:nth-child(4) {
     grid-area: four;
}
/*** ARRANGE THE LAYOUT WITH THE ASSIGNED WIDGET NAMES ***/
 .footer-widget {
     display: grid; /* applying CSS grid;
     overrides customizer layout setting */
     grid-column-gap: 5%; /* the space between the columns */
     grid-template-columns: 30% 30% 30%; /* sets 3 columns at equal width, allowing space for the gap if you use one */
     grid-template-areas: 
     'one one one' 
     'two three four';
}
/**************************************************************/
/*** MEDIA QUERIES - CHANGE GRID LAYOUT FOR SMALLER SCREENS ***/
/**************************************************************/
 @media only screen and (max-width: 980px) {
     .footer-widget {
         grid-template-columns: auto; /* this turns the 30% column width into one 100% column width */
         grid-template-areas: 
         'one' 
         'two' 
         'three' 
         'four';
    }
}

 

Notes:

  • Keep in mind this doesn’t force third-party widgets to conform to the grid. Most plugins require specific CSS styling for any kind of container changes. If you need help with a widget just post a comment with a link to the site and what you’re trying to achieve and I’ll help as best as I can 🙂
  • Much of the footer styling, like colors and fonts, is set in the customizer > footer settings; if you use the Bloom widget some styling is set in the optin itself.
  • If you see !important it was needed, particularly with Bloom.
  • I learned this method in about 15 minutes just for this tutorial lol, so I really do think it’s the easiest way to apply grid that I’ve come across. The other ways with numbered lines seems not fun to me. To each their own I suppose.
  • This isn’t meant as an in-depth tutorial on CSS Grid of course, it’s very powerful and I’m still a noob. I highly recommend you look at additional resources if you want to learn more, I looked here and here and several other sites.
  • Demo 1 colors:
    • #AB8476
    • #684756
    • #3D314A
  • Demo 2 colors:
    • #044389
    • #FBF2C0
    • #4DCCBD
    • #2374AB
    • #FF8484