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:
.et-fb .et_pb_column > .et_pb_module:hover:after,
.et-fb .et_pb_section > .et_pb_module:hover:after {
content: "";
position: absolute;
bottom: 0; top: 0; left: 0; right: 0;
border: 3px solid rgb(76, 88, 102);
border-radius: 2px;
z-index: -1;
}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.
Wove, great feature, i take it as bug in Divi builder, hats up
This is a great feature, so useful and fix a lot of frustration, thanks !
Thanks Dan, a good feature to include in Divi Booster. I must admit some frustration when creating complex pages in Visual Builder. Understanding text module boundary's was an issue.
This is a GREAT idea.
I´m mad that I can´t make it work, but it´s great 🙂
The code goes in Divi "options" no? in "custom css"?
Ok, It´s done.
I was not refreshing the cache 😛
Man, this is awesome, thanks!