A Solution To A Frustrating Problem
We are making a nice little series of tutorials related to the Divi Builder UI. This one is perhaps the most useful so far, as it does something simple and yet can improve one of the most common processes. Any time I’m editing text in one of the Divi Builder module’s text areas, I have to keep scrolling up and down just to make a word bold or add a link or make a blockquote. It is quite annoying! So in this tutorial I am going to show you how to solve that little frustration and make the Divi text style settings panel sticky when you scroll. I hope you enjoy this as much as I do!
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
Make All Divi Text Style Settings Sticky
This solution will apply to any module that has the text content area, such as the Text module, Blurb module, Person module, Testimonial module, etc. This works when the “Visual” tab is selected, and is great when styling text, adding links, making blockquotes, etc.
I have a very simple CSS snippet that targets just the right items within the Divi Builder and makes it sticky when you scroll. It took me quite a long time to figure out which CSS selector to use, so I hope you appreciate it 🙂
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*make Divi Builder text style settings sticky on scroll*/
.mce-panel .mce-stack-layout-item.mce-first{
position: sticky!important;
top: -60px;
}
.et-fb-modal--expanded .mce-panel .mce-stack-layout-item.mce-first{
top: -24px!important;
}Be sure to watch the video to see the sticky effect demonstrated in a variety of different modules. If you think this is worth using on your websites, please let me know in the comments!
How To Make The Text Editor Toolbar Sticky Within Module Textareas Using Divi Assistant
Here are the simple steps to make the Divi text editor toolbar sticky within module textareas using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Utility Helper tab and the Visual Builder subtab
- Enable the setting
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
Been waiting for this for a long time. Thank you very much!
Yes this one is so helpful, you are very welcome!
A gem of a divihack. Thank you for this practical snipplet!
You’re welcome! I certainly enjoy the simple convenience it offers!