[Support request] Using hooks and beaver builder to create a footer

Home Forums Support [Support request] Using hooks and beaver builder to create a footer

Home Forums Support Using hooks and beaver builder to create a footer

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #241142
    Albert

    Hi there,

    I have found things related to my question but they all assume a basic understanding of coding which I don’t really have. As such I’m using the beaver builder plug-in to design my website.

    I’m trying to design a fully customizable footer using a row in beaver builder, then use hooks to assign the row to the above footer hook to every page. I’ve come up against two issues in trying to do this.
    http://www.naturallyhuman.co.uk

    1. I’d like to have a horizontal footer menu, as is discussed here
    https://generatepress.com/forums/topic/footer-navigation-location/
    I’ve tried both by adding a custom menu widget with beaver builder and through generatepress’ footer widgets but neither provide an option for a horizontal layout. They are both showing on my homepage at the moment.
    Is there some CSS I can use to set it horizontal, and how would I use the CSS to alter the display (font/colour/size/spacing/postion etc) of the menu once it’s like that?
    A solution using either would be great.

    2. What do I need to type into the hook to display the row?
    I got the idea from this video which uses dynamik theme to do something similar.

    Beaver builder allows you to assgin a CSS id to each individual row/column, I have called it bottomrow.
    What code would I need to type into the hook to get it to display the row.

    Thanks.

    #241233
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. You’ll need to add CSS for the horizontal menu. For example:

    @media (min-width: 769px) {
        .site-footer .menu li {
            float: left;
            margin-right: 20px;
        }
    }

    2. I’m not sure – does Beaver Builder give you a shortcode or a function you can use to display the row? If so, that’s what you would place into the hook.

    Let me know what they give you and I should be able to to give you more information 🙂

    #241393
    Albert

    Hi Tom,

    Thanks for the help.
    1. The widget is now displaying horizontally how I’d like it, but it’s aligned to the left. I’ve tried a couple basic things but can only alter the spacing between the buttons or I nullify any effect of the CSS you gave me.
    Could you explain what the first two lines of it mean, and let me know how to set the whole widget to central? I’d also like to alter the typography but I’m assuming that it is set to one of the theme styles which I haven’t played around with yet.

    2. The method I saw was using the paid plugin which I don’t have but I’ve found another method.
    This article give short code for inserting BB components.
    https://www.wpbeaverbuilder.com/knowledge-base/shortcodes/

    The code being
    [fl_builder_insert_layout]
    [fl_builder_insert_layout slug=”my-post-slug”]
    [fl_builder_insert_layout id=”123″]
    etc….

    I tried using this code with the CSS id I had assigned the row but it did not work.

    What I did was make a new private page to create the footer with the slug as footer
    I then used the short code as above and the content from that page is inserted into the hook.

    http://www.naturallyhuman.co.uk/
    It’s currently messy as I was just checking if it worked but you can see what I’ve done.

    Thanks

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