3-column Footer Widgets in Altitude Pro

In the members-only forum, a user asked:

Add traditional footer widgets to Altitude Pro

I am looking to add traditional footer widget areas (3 or 4) to the Altitude Pro child theme. I know Altitude has a ‘footer 1’ widget area, but that only appears on the home page, and I’d like the footer to appear on every page, including the home page.

The footer could be just like the Infinity Pro footer, or the Workstation Pro footer.

Thank you if this is possible to do a tutorial on this (or adapt a current tutorial).

We can change the number of footer widget areas from 1 to 3 in functions.php and write CSS (Flexbox) to display these in columns on the front end.

Let's see how this can be done in Altitude Pro.

Step 1

In Altitude Pro functions.php change

// Add support for 1-column footer widget area.
add_theme_support( 'genesis-footer-widgets', 1 );

to

// Add support for 3-column footer widget areas.
add_theme_support( 'genesis-footer-widgets', 3 );

Step 2

In style.css replace

/* Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
    background-color: #22a1c4;
    clear: both;
    text-align: center;
    position: relative;
    z-index: 9;
}

.footer-widgets .wrap {
    padding-bottom: 100px;
    padding-top: 100px;
}

.footer-widgets,
.footer-widgets .wrap a,
.footer-widgets .wrap a.button {
    color: #fff;
}

.footer-widgets a:focus,
.footer-widgets a:hover {
    color: #000;
}

.footer-widgets li {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.footer-widgets .widget {
    margin-bottom: 40px;
}

.footer-widgets p:last-child {
    margin-bottom: 0;
}

with