Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1371997

    Hello support,

    Im trying to make a “book” (booking) button in the footer. Im using this code already in the header to color the button:

    li#menu-item-487>a>.avia-menu-text {
    background-color: #a5d1d6;
    padding: 10px;
    border-radius: 5px;
    color: white;
    }
    #menu-item-487 span.avia-menu-fx {
    display: none!important;
    }
    li#menu-item-487:hover>a>.avia-menu-text {
    background-color: #80cdd6;
    }

    What code do I use to access my widget in the footer and make the same button? Ive put it in column 3 in the footer…

    Kind regards,
    Aurora

    #1372075

    Hey AuroraArcus,
    Thanks for the login to your site, to create a booking button in your footer widget we will create the button using the shortcode wand, so we will open a new post and in the block editor select the classic block and in the toolbar select the shortcode wand ▸ Button:
    block_editor_classic_block_shortcode_wand.png
    then the standard Advanced Layout Builder button element will open for you to design the button, after you build your button and save the button shortcode will show for you to copy to your widget:
    block_editor_classic_block_shortcode.png
    Then go to your widgets and use the Custom HTML widget and paste the shortcode:
    custom_html_widget_with_button_shortcode.png
    once you have copied the shortcode to your widget you can discard the new post that you used to create the shortcode in as it is no longer needed. Now your widget button should look like this:
    2022-11-10_004.png
    So if you are happy with the button that I created you can keep it or you can follow these steps and create your own.
    While I created the button I added the custom class widget-book in the element options in case you wanted to fine tune the button with some css, in my final test I found the footer link color overrides the color of the text in the button so I add this css in your Quick CSS to adjust:

    #footer .widget-book a {
    	color:#fff;
    }

    so you can add any further customizations to your rule if you wish.

    Best regards,
    Mike

    #1372327

    Wow Mike,

    amazing. I looked through your process and I understand. Thanks so much for the button. Exactly what I was looking for.

    You’re the best.

    Thanks :)

    #1372329

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Book Button in the footer’ is closed to new replies.