How do I hide elements in only the editor?

Design help General
1

This is more a question about the Webflow Editor than it is about a website…

In the editor I have absolutely positioned DIVs… I need them there (and thru interactions they appear or disappear)… I’m trying to create a section on a new page with these DIVs but I can’t see the section contents because it is underneath the absolutely positioned DIVs…

Everything works as expected on my site, but I just want to hide the DIVs will I work on this section without changing anything on my actual site.

How do I do this? How do I just hide elements in the editor?

2

It seems that a class name of w-editor is added to the page’s HTML element when you go into the Editor. Which means you can create a css selector (in custom code) preceded by .w-editor that would, in theory, only apply when the page is viewed in the Editor. However, in my experience, once a contributor has opened a page in the Editor, the w-editor class doesn’t go away, even after they log out. But if you’re ok with this behavior, it could be a solution.

   .w-editor .element-to-hide {
   	display: none;
   }

<div class="element-to-hide">
…
</div>
1 Like
3

I had a similar need, but in the opposite direction, where there are certain data items I need customers to be able to access but only while in the editor.

My solution is similar to @tosidesign 's; but in my case I am keying off of the title text, which is prefixed with Editor: . A mutation observer alerts me to editor mode switches and I add/remove a custom attribute on the HTML element. From there, it’s easy adjust your CSS/JS to behave differently for editor mode.

4

Did this work? Does it still work?

I have a dropdown menu and a Whats App widget that are open when designing and cover the content for the Editor mode.

5

For anyone who needs it, here’s my script that adds an “is-editor” class to the document when Editor mode is active, based on whether the meta title includes the string “Editor:”

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const html = document.documentElement;
    const titleEl = document.querySelector('title');
    function updateEditorClass() {
      const inEditor = document.title.includes('Editor:');
      html.toggleAttribute('data-editor', inEditor);
      html.classList.toggle('is-editor', inEditor);
    }
    // Initial run
    updateEditorClass();
    // Watch for changes to <title>
    if (titleEl) {
      const observer = new MutationObserver(updateEditorClass);
      observer.observe(titleEl, { childList: true });
    }
  });
</script>

Then it’s just a case of adding some custom CSS which targets .is-editor (for example, .is-editor .child-class).

This is particularly handy when elements are hidden behind each other by default, meaning editors cannot change them.

1 Like