[Support request] Add an slider to Home Page Header – Aspire

[Magdalena]

Hello

I would like to add an slider background on the Home Page Header. I am using the Aspire template.

I would like to keep the texts an button as they are nowo, but the background are images that change automatically.

Can you help me?

Thanks you!!!

[David]

Hi there,

tricky one, but if you can create your slider and then add its shortcode inside of the Header Element above your current HTML and remove the background image. Then i can take a look at some CSS to put the slider behind the content.

[Magdalena]

Hello

I just added the shortcode like this

______

[smartslider3 slider=2]
<h1 class=”hero-heading”>
LA FAMILIA ES LO MÁS IMPORTANTE
</h1>

<h4>
Con Cash to Family es más fácil proveer a su familia con salud, educación y servicios así como alimentos mientras vives en el extranjero. También puede enviar dinero gratis y hacer un seguimiento de lo que tu familia necesita. </h4>

<h2>
Desplácese hacia abajo para saber más sobre esto!</h2>

Saber más

________

But it shows me an “internal server error” for a moment!!!! Now is working. I hope it is not a problem because i dont want to broke the page because of the slider hehe.

So, how do I continue?

Thanks

[David]

OK, so next steps ( before we get to the CSS ) – can you:

1. Remove all the padding from the header element. Set them to zero.
2. Now we need to wrap your HTML in its own container so it can be targeted separately from the slider with its own CSS class , so like this:

<div class="hero-content">
    <h1 class="hero-heading">
        LA FAMILIA ES LO MÁS IMPORTANTE
    </h1>

    <h4>
        Con Cash to Family es más fácil proveer a su familia con salud, educación y servicios así como alimentos
        mientras
        vives en el extranjero. También puede enviar dinero gratis y hacer un seguimiento de lo que tu familia
        necesita.
    </h4>

    <h2>
        Desplácese hacia abajo para saber más sobre esto!
    </h2>

    <div class="hero-button">
        <a class="button" href="https://cashtofamily.com/?page_id=14305">Saber más</a>
    </div>
</div>

Once thats done – ill figure out the overlay 🙂

[Magdalena]

Hello

Ok but where should i add the shortcode in this new HTML that you sent me?

Thanks

[David]

No the shortcode should remain above ( and outside of ) that HTML

[Magdalena]

Perfect!! Done

Thank you

[David]

You have the Header Element > Site Header (tab) > Set to Merged with Site Header.
Is this required? As you are not using a transparent navigation. If its not needed anywhere then can you disable that.

[Magdalena]

Ok, done !

[David]

So next step:

In the header element –> Element classes field add: slider-hero
The add this CSS to Customizer > Additional CSS ( or your Child Theme ):

.slider-hero .inside-page-hero {
    position: relative;
}
.slider-hero .hero-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 590px;
}

That should do desktop…. the tricky part will be deciding on what you want to happen on mobile as the slider will be too ‘short’ to contain the text….. so need some ideas there 🙂

[Magdalena]

OK it is working on desktop

Can i tell it that when it’s on mobile, replace the slider with an image?

Thank you

[David]

Sounds like a good solution. So in the header element can you add back the background image, we can basically hide that on desktop and hide the slider on mobile with some more CSS 🙂

[Author]

Posts