Community Forums › Forums › Archived Forums › Design Tips and Tricks › Footer Widgets on the Essence Pro Theme
Tagged: Footer Widgets Essence Pro
- This topic has 6 replies, 5 voices, and was last updated 4 years, 11 months ago by
AnitaC.
-
AuthorPosts
-
December 31, 2019 at 10:25 pm #495715
Cutloose Adventure
ParticipantI 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.
http://cutlooseadventure.com
Many thanks,January 1, 2020 at 5:57 am #495720Victor Font
ModeratorChange 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?January 1, 2020 at 7:08 am #495723Cutloose Adventure
ParticipantMany 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,
February 28, 2020 at 9:58 am #497030di
Participant@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!
February 28, 2020 at 11:03 am #497032Baz
Participant@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.
February 29, 2020 at 12:19 am #497037Cutloose Adventure
ParticipantHi 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!February 29, 2020 at 1:42 am #497038AnitaC
KeymasterI wrote a blog post on how to do this last August - https://cre8tivediva.com/essence-pro-add-footer-widgets/.
Need help with customization or troubleshooting? Reach out to me.
-
AuthorPosts
- The topic ‘Footer Widgets on the Essence Pro Theme’ is closed to new replies.