Footer Widgets on the Essence Pro Theme

[Cutloose Adventure]

I need to add 3 footer widgets to Essence Pro. I have utilised the code supplied from a blog post on this forum, and it did install widgets, but for some strange reason the widgets do not follow the .css code in put via the additional css spot on the theme.

Any help provided would be very much appreciated.
Many thanks,

http://cutlooseadventure.com

[Victor Font]

Change the min-width: 31% in your CSS to width: 31%. The min-width says "don't go smaller than 31%, but you can go as large as you need to fill up the space."

You also need to apply the width to the 3rd widget area.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Cutloose Adventure]

Many thanks Victor,
You have made my day, something so simple as the min-width change to width.
Made the change in my css additional area and looking much better.

Thanks,

[di]

@cutlooseadventure, could you share the blog post you used? I need to do the same thing. Thanks! And @victorfont, thank you as well. You save lots of people's days!

[Baz]

@di, try this to add a 3 widget footer area to the Essence Pro theme.

Step 1 - Add support for a 3 widget footer area by adding the following code in functions.php:

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

// Reposition Footer Widgets area
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
add_action( 'genesis_before_footer', 'genesis_footer_widget_areas', 25 );

Step 2 - Style the footer widget area by adding the following code in style.css:

/* Add Footer Widget Area
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
        background-color: #fff;
	color: #333;
	padding: 60px 0;
}

.footer-widgets .widget-title {
	font-size: 36px;
	font-size: 3.6rem;
}

.footer-widgets-1,
.footer-widgets-2 {
	width: 30%;
	float: left;
}

.footer-widgets-1,
.footer-widgets-2 {
	margin-right: 25px;
}

.footer-widgets-3 {
	float: right;
	width: 30%;
}

.footer-cta {
	margin-bottom: 40px;
}

@media only screen and (max-width: 860px) {
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		float: none;
		padding: 30px 10px;
		width: 100%;
	}
	
}

Adjust the above styles to meet your requirements.

[Cutloose Adventure]

Hi di,
Victors comments above is exactly what you need.
Try that and it'll work for sure....my problem was the sizing of the min width for the widgets but setting to the 31% my problem was solved....thanks again Victor!

[Anita]

I wrote a blog post on how to do this last August - https://cre8tivediva.com/essence-pro-add-footer-widgets/.

---

Love coffee, chocolate and my Bella!

[Author]

Posts