[Support request] Container background slider possible?

[Lina]

I’m using the Realtor theme for a website, and what I would like to do is be able to replace the hero image (currently set as the background for the hero container) with a gallery of sorts, in which I can put several images. The basic effect I’m trying to get is a hero image slider.

I want the hero text, etc, to sit on top of it, so I’m guessing it has to be set as a background.

Any ideas what is the lightest and cleanest way to accomplish this? Thank you.

[David]

Hi there,

you would need to use a Slide Plugin, and add it inside the Hero Container that has your text within. And then we can look at adding some CSS to create the overlay. But it its not going to be “light” as sliders will knock the sites performance.

[Lina]

Okay, I’ve installed the Owl Slider, and added it to the hero container. Although now it’s not covering the entire hero area, as it’s not set as a background – which is what I would like.

How can we layer the rest of the hero content on top?

Thank you so much for your help.

[David]

I would need a login to see that preview – or can you publish that page ?

[Lina]

Sorry, to me it looks published. Hmm
I’ve included login details. Thank you.

[David]

The URL was for a Preview – can you send me the actual URL ?

[Lina]

Okay

[David]

1. Add this CSS to your site:

.has-slider-background > .gb-inside-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.has-slider-background > .gb-inside-container > * {
    grid-column: 1/-1;
    grid-row: 1/-1;
}
.has-slider-background > .gb-inside-container > .gb-grid-wrapper {
    z-index: 10;
}

2. Then edit that Container block and in Advanced > Additional CSS add: has-slider-background

You will need to make sure that sliders settings fill the height of the container.

[Lina]

Hi, David

I’ve gone ahead and added the css, as well as tried to put in height dimensions on the slider and container.

However, the slider just shows up as a thin line across the container. It has the width necessary, just not the height.

https://ibb.co/31cmYtn
https://ibb.co/bBsRVW2
https://ibb.co/QH4STXp

[David]

Where can i see that on the site ?

[Lina]

Hi David,

Here is the page, and also the login details again if you need them.

Right now, the slider is only displaying as the light grey bar at the top of the hero container.

It looks like it’s working now, David! I had the separate images set as Featured Images, and that was apparently the problem.

I will keep working with it and reach out if I have any further problems. Thank you so much.

[Lina]

David, do you think it would be possible to add a gradient overlay on top of this carousel? I want to overlay the hero images so that the part that contains the menu is a bit darker, but the rest of the photo remains relatively the same. I guess a typical gradient overlay.

Right now, the hero background is a light grey, but this does not overlay on top of the carousel in any way.

Could this be accomplished?

[David]

In the Header Element you have set to merge the site header with the content.
You can modify the site header and navigation background colors. But if you want to just do something for the home page try this CSS:

.home #site-navigation {
    background-color: rgba(0,0,0,0.5);
}

[Author]

Posts