Community forum for knowledge and support

Updated 5 months ago

Allowing Editors to Change Hero Images Win Webflow

At a glance

Allowing editors to change hero images win Webflow

HELP: For the life of me I can’t figure out how editors can change the hero images on some of the hero sections. It’s mainly the sections with overlays and text.

They can edit the text fine but can’t change any hero backgrounds?!!

I have a site with over 70 pages and the last site was 35 pages. This client wants to test their images to “get the right look”. 👀

All I can see is my entire week gone with changing and swapping images. 😭

J
M
L
8 comments

how'd that method above turn out?

Will be trying it shortly. Didn’t get around to it yesterday. Have you come across it before

Hi there, a bit of a long one but I have a solution:

Key point: Webflow only allows users to change images in the editor when they are the highest level element / are clickable.
(no elements can have z-index of -1 as this makes them not clickable)

The fix:

  • Background Image Wrapper has a z-index of -1 > Set z-index to 0.
  • Background Overlay has to sit above the image and not be clickable -> Set z-index of 1 and pointer events none
  • Background Image -> set z-index 0.
  • Any elements (text etc) sitting on top of image must be ‘relative’ with z-index higher than 1 (if all text content is nested inside a full screen padding global, then use this code snippet)

.padding-global {
pointer-events: none; /* Disable pointer events for this element */
}

.padding-global * {
pointer-events: auto; /* Re-enable pointer events for all children */
}

I’ve gone ahead and refactored a client website with this solution and they can now update all their background images 🙂 Woooo!

Thanks for taking the time to respond. Will defs give this a shot.

Good luck! I feel your pain with this and made a video for the solution. Hopefully it helps 🙂

https://www.youtube.com/watch?v=9pw5AK60HbY

you sir are a star!! Thank you so much for taking the time out to 1/ explain this and 2/ record a video!!! Much appreciated

My pleasure James 🙂

Add a reply
Sign up and join the conversation on Slack