• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Footer Widgets on the Essence Pro Theme

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Footer Widgets on the Essence Pro Theme

This topic is: resolved

Tagged: Footer Widgets Essence Pro

  • This topic has 6 replies, 5 voices, and was last updated 2 years, 11 months ago by Anita.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 31, 2019 at 10:25 pm #495715
    Cutloose Adventure
    Participant

    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
    January 1, 2020 at 5:57 am #495720
    Victor Font
    Moderator

    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?

    January 1, 2020 at 7:08 am #495723
    Cutloose Adventure
    Participant

    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,

    February 28, 2020 at 9:58 am #497030
    di
    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 #497032
    Baz
    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 #497037
    Cutloose Adventure
    Participant

    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!

    February 29, 2020 at 1:42 am #497038
    Anita
    Keymaster

    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
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Footer Widgets on the Essence Pro Theme’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble