Avada Forums Community Forum Replace Fusion Slider with Full Width Container

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • Jetxpert-Envato
    Blocked
    Post count: 339

    Good Day!

    Does anyone know how to create a full-width container (containing a header, text, and button) that can replace the Fusion Slider (also containing a header, text, and button)?

    We attempted it, but we couldn’t get the container’s upper edge (with a background image) to butt against the bottom edge of our menu nor could we get the container to display in the “page view” only. The background image went past the bottom edge of our desktop browser screen.

    Oh well, giving it a shot. I believe @shaminder (from Avada Support) assisted with this a while ago, but lost his instructions.

    Any help or input you can provide would be great. Heck, if you have a page URL that can be used as a template, we’ll take it!

    Cheers!

    marklchaves
    Participant
    Post count: 873

    Hi @jetxpert-envato,

    First question. I’ve done this with some of my newer clients who needed a minimal design. Instead of using a Fusion Slider for the hero banner image, I use the Page Title Bar under the Fusion options for the page. Have you tried this before trying to replace the slider with a full-width container?

    Here’s an example of what I’m talking about.

    https://soultherapist.co/blog/

    The reason I’m suggesting this is because the Page Title Bar does the heavy lifting for you and it’s faster than a Fusion slider.

    Secondly, without seeing your code, there can be many reasons why you have a gap between your background image and menu. I would definitely use your dev tools inspector. If you haven’t already checked

    1. See if there are any margins being set anywhere. You might need to dabble with a negative margin to pull your background image to the top. More on negative margins here. https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/
    2. See if you see any div components stacked on top of each other, they might be the culprits creating the unwanted space. Negative margins can fix this too. Here’s an example on CodePen. https://codepen.io/marklchaves/pen/GbZVxp

    I hope this helps.

    Jetxpert-Envato
    Blocked
    Post count: 339

    @mark,

    Thanks for the suggestion. Time permitting, we’ll give it a try. However, original inquiry still remains open.

    If you know of a procedure to do this, please share!

    Cheers!

    dresshime Last_name
    Participant
    Post count: 1

    Hello, please help.
    I don’t have page title bar, instead I use a “container” to create a title bar, there are margins on the top. how do I apply negative top margins?

    I’m using Avada builder. Here’s the page’s link: https://chinaglobalfreight.com/integrated-logistics/

    Please tell me how to achieve a non-top-margin page title bar using a container.
    Thank you very much!!!

    Ammar. S
    Keymaster
    Post count: 2546

    Hello @dressimeLast_name

    You have a valid support, please open a support ticket and our team will assist you further regarding this issue.

    Click Here to Get Avada Support

    Thanks

    -Ammar

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