Relume Community Icon
Relume Community
  • 🏠Home
  • 📅Events

  • 🔵Announcements
  • 🔵General
  • 🔵Getting Started
  • 🔵Issues
  • 🔵Showcase

Powered by Tightknit
General
General

How to Allow Editors to Change Hero Images in Webflow

Avatar of James D.James D.
·

‼️ 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

  • Avatar of James D.
    James D.
    ·

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

  • Avatar of Matt J.
    Matt J.
    ·

    James D. how'd that method above turn out?

  • Avatar of James D.
    James D.
    ·

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

  • Avatar of Luke B.
    Luke B.
    ·

    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!

  • Avatar of James D.
    James D.
    ·

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

  • Avatar of Luke B.
    Luke B.
    ·

    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

    ❤️2
  • Avatar of James D.
    James D.
    ·

    Luke B. 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

  • Avatar of Luke B.
    Luke B.
    ·

    My pleasure James 🙂

    👏1