[Resolved] Footer Widget 4 to be below 1,2,3 Widgets and span all 3. Is that possible?

Home Forums Support Footer Widget 4 to be below 1,2,3 Widgets and span all 3. Is that possible?

  • This topic has 8 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1338489
    nomadiceman

    Im working with the Avery site template https://gpsites.co/avery/

    I like the 3 widget areas but want to have another widget area under the 3 existing widgets?

    What is the best way to achieve that?

    I am already using the GP Premium and using the Footer Bar.

    I need an area that I can put simple text, which will be a legal disclaimer sentence.

    Would using the Footer Widget 4 be the best way? If so how do I do that in CSS

    Thank you for your help and time. Very much appreciated

    #1338706
    David
    Staff
    Customer Support

    Hi there,

    If its just some plain text or HTML you want to add then use a Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    Add your HTML in a wrapper like so:

    <div class="custom-footer-bar footer-widgets">
    	<!-- add you custom footer content here -->
    </div>

    And select the after_footer_widgets hook

    NOTE: In the HTML above you will see the footer-widgets class – this will match the style of the footer widget area

    #1339441
    nomadiceman

    this is great, i was so focused on CSS i completely forgot about the Hooks, It worked great

    How would I style this area now? For example add right and left padding and change font and font size?

    #1339870
    David
    Staff
    Customer Support

    Try this CSS for example:

    .custom-footer-bar {
        padding: 20px 40px;
        font-size: 14px;
        /* Other styles here */
    }

    This will vary depending on the HTML you have within that wrapper – if its not working as you need it then provide a link to the site so i can take a look.

    #1339882
    nomadiceman

    this works but the padding isn’t good on mobile

    #1339893
    nomadiceman

    Hmm still can’t figure it out. It works ok on desktop but I want padding that doesn’t work on mobile

    ill add the url now for you to take a look

    #1339985
    David
    Staff
    Customer Support

    Remove the padding from your CSS and edit your HTML to include an inner grid-container wrapper like so:

    <div class="custom-footer-bar footer-widgets">
        <div class="grid-container">
            <!-- add you custom footer content here -->
        </div>
    </div>

    Now you only need CSS for the font-size.

    #1340008
    nomadiceman

    perfect that worked great. thank you once again

    Apologies for the basic questions Im learning as I go, so thanks for your help its very much appreciated

    #1340097
    David
    Staff
    Customer Support

    Not basic at all 🙂 Glad to be of help

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.