The recent release of the latest version of the Divi Theme brings us the visual editor, a powerful new way to edit webpages directly. One of my favorite features of the visual editor is that it allows you, via a border which appears on hover, to see exactly where your sections and rows start / finish. This makes it great for figuring out things like where that stray padding is coming from.
One thing, I thought would be useful is to have the same type of hover border on modules within the visual editor. That way, you can easily tell what is part of the module, and what isn’t.
I’ve come up with the following CSS for doing so:
It simply adds a border to top level modules upon hover. I’ve done it using the :after element so that the module’s position on the page isn’t affected at all – where you see the bordered module in the visual editor is where it’ll appear on the page.
If you don’t want to manually add the CSS to Divi, I’ve added it as a one-click option in Divi Booster, as of version 2.3.2. You’ll find it in the Divi Booster settings page under “Divi Builder > Visual Builder”:
Thanks to Glen for pointing out the need to set the z-index to ensure the module text remains editable.