Streaming live at 10am (PST)

Putting static text over my slider image

#1

Hi,

I am new to Webflow and wanting to make the hero image on my homepage be a slider and have a static headline, paragraph and button overlayed on top. Having trouble getting the two to interact in the way I am looking for.

Here is more specifics on what I am trying to do. My header (hero) image is set to 620 px tall and 100% width. I want the text to be centered vertically and horizontally in the slider and have a max width of 1140px.

Any help would be much appreciated.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Hi there @Bderoche. Could you share your read-only link again? It’s not working. Have you had a look at the slider element videos in the university? This shows how to add extra content like buttons, headings etc to the slider element https://university.webflow.com/article/sliders

#3

HI Sarah,

See the link below. Yes, I used this resource to build the other other on my homepage which you will see in the link. I am just having problems making the text be static and the slider being behind the text.

Please not that the current hero image is just a static image.

https://innovative-surface-prep.webflow.io/

#4

Oh, so you want the images to change behind the text but the text to stay the same? So the text doesn’t move? Hmm, I’ll have to think about that one. The thing that comes to mind at the moment would be to have separate elements. A slider with text positioned on top in another div.
Oh and here’s the information on sharing your read-only link https://forum.webflow.com/t/how-to-enable-a-webflow-share-link. That’s the link to your published webflow domain. The share/read-only link allows us to look at your actual site within webflow. That makes it easier to come up with a solution.

#5

Thats correct.

Herers the link below.

https://preview.webflow.com/preview/innovative-surface-prep?utm_source=innovative-surface-prep&preview=909c45468610abf341b7e37e24d0dff0

#6

Hi @Bderoche, I built an example that I think it will accomplish what you are after.

source example:
https://preview.webflow.com/preview/slider-with-common-static-text?utm_source=slider-with-common-static-text&preview=13b3d3560623b43ded5d55e5ab9f5654

preview:
https://slider-with-common-static-text.webflow.io/

#7

@Bderoche @vlogic ha, there you go :slight_smile:

#8

Hey @vlogic,

Just tried it this morning and got it to work. Thanks so much for the help!

2 Likes