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. 😭

8 comments

JJames Davis-Sigley

Wondering if this is a potential fix 🤔
Will try and report back
https://discourse.webflow.com/t/change-background-images-in-editor/277152/6

MMatt Johnson

how'd that method above turn out?

JJames Davis-Sigley

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

LLuke Bonnici

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!

JJames Davis-Sigley

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

LLuke Bonnici

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

JJames Davis-Sigley

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

LLuke Bonnici

My pleasure James 🙂

Add a reply

Community forum for knowledge and support

Allowing Editors to Change Hero Images Win Webflow