This snippet hides a chosen element only inside the Elementor editor, while keeping it visible on the live site. It’s useful when certain design elements (like overlays, animations, or widgets) get in the way while editing but should still appear to visitors.
Add this code inside the Custom CSS field of an element in Elementor. The selector tag ensures the style applies only to that specific element, and the element will be hidden only while editing, not on the live site.
.elementor-edit-mode selector {
display: none !important;
}Add this code with a snippets plugin in <head>, or place it in Element CSS, Page CSS, or Site Settings. Apply the "ou-hide-in-editor" class to any element you want hidden while editing in Elementor. It will still remain visible on the live site.
.elementor-edit-mode .ou-hide-in-editor {
display: none !important;
}Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
