How do I fix the Divi Text Module toolbar?

Updated on 25/09/2021 | Published on 29/06/2021 | 7 comments

When you use Divi's Text module with multiple paragraphs, the toolbar slides with your text. So if you need to change text styles - add bold, italics, or a simple link - you have to highlight the text, scroll to the top to find the toolbar, and then scroll back down. In this article, I'll give you a quick tip to fix this toolbar so that it remains consistently accessible (on scroll), no matter how long your text is.

Front - non-fixed toolbar :

barre outils non fixe

After - fixed toolbar :

barre outils fixe

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is the "toolbar" of the Text module?

Barre outils style des textes Divi

What I call the toolbaris the style editing menu available in every text area of every Divi module and especially in the Text module.

This toolbar contains all the options needed to enrich your text:

  • add fat
  • italicise
  • insert lists
  • insert links
  • highlight
  • choose the alignment of the text
  • add a title hierarchy
  • etc.

Finally, we find here the options that the classic WordPress editor offered, before the appearance of Gutenberg.

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

2 - Why fix this toolbar? (+ video)

As you can see in the video, this action is simple to perform, but it doesn't add anything in terms of design for your site or your client's site. Indeed, but fixing this toolbar will bring you great comfort when creating your content with the Divi Visual Builder. Basically, you gain in efficiency and productivity!

If the video does not work, here is the link.

Don't wait any longer! Discover the Divi theme here !

3 - CSS snippet for a "sticky scroll" toolbar

When you need to modify an element of your site with CSS, your browser is your best ally. Simply use the "inspect element " feature to find an existing CSS Class and then modify it...

Classe CSS pour modifier la barre d'outil
Inspect the element to find the CSS Class that acts on the toolbar

In this screenshot, I used my browser's inspector to find the element I wanted to change. When it is highlighted, I click on it and at the bottom of the browser, the corresponding HTML code is highlighted in blue. I then find 4 classes in use including the "mce-top-part.

Once this has been identified, all that remains is to create the appropriate CSS snippet to attach the toolbar. Here it is:

Personnaliser le CSS de la toolbar
/* toolbar sticky au scroll */
.mce-top-part {
	position: sticky !important;
	top: -60px;
}

Copy and paste this code in the field dedicated to the Divi > Theme option > Customise CSS.

Note that this code will act on all Divi modules that use a text box, which is almost all modules!

Reminder: there are other ways to add code to Divi. Discover also my library of Snippets for Divi !

4 - Sticky or fixed position?

To fix an element in a web page, the most effective property is the "Position" property. But the question you may be asking yourself is: why use the Sticky instead of the value Fixed ?

The Sticky value allows the element to remain fixed within its container (its parent element), while the Fixed value remains fixed relative to the browser window.

In this case, if you use the value Fixed instead of Stickyyou will see that the behaviour of the toolbar is not at all what we expected.

To better understand, scroll down below:

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

5 - Compatibility with the back-office builder

This chapter was added after the initial publication of the article only a few hours ago. Indeed, some of you have pointed out to me that the CSS code I give in this article in chapter 3 does not "work"...

I assure you, it works... but only if you use the Visual Builder in the front-office. For those who use the Divi Builder in the back-office, the code doesn't work... And I found out why!

So here are some details:

5.1 - If you are using the old version of Divi Builder

In my opinion this is a very bad idea... If in the Divi tab > Theme Options > Creator > Advanced, you have activated the "classic editor" option, then you are using the old version of Divi which has stopped evolving since 2018...

By the way, if you use this version, there is a good chance that your back-office edition will be as slow as ever, it's slow, it's slow!

Anyway, if you prefer to keep this configuration, here is what you need to do to fix the Divi Text Module toolbar:

barre outils ancien builder
You have activated the "classic editor" option and you are using an old version of Divi
  1. If in the Divi > Theme Options > Creator > Advanced tab you have the "Classic Editor" option enabled, you are using the older version of Divi.
  2. The sections and modules in the back office look like the second dot in this screenshot.
  3. You should even see a notification inviting you to use "the new Divi experience"... And for good reason!
  4. It is still possible to fix the toolbar of the Divi Text module.
  5. But in this case, the CSS will not be enough! You will need to add the following code to the functions.php file of your Divi child theme.
add_action('admin_head', 'toolbar_sticky');

function toolbar_sticky() {
  echo '';
}

Note: the Classic Editor plugin can also reproduce this option of Divi, which I do not recommend.

5.2 - If you use the Divi Builder in the back office

If you have enabled the option to keep the classic editor and the new Divi Builder experience but you continue to edit your publications from the back office (and not from the front-end as I show in my video), in which case you will also have to use a different code...

barre outils experience calssic
Fixed toolbar for back-office use
  1. If in the Divi tab > Theme Options > Creator > Advanced you have enabled the "last Divi Builder experience" option as well as the "classic editor" option, you can continue to build your layout from the back office.
  2. The sections and modules in the back office look like the second dot in this screenshot.
  3. It is still possible to fix the toolbar of the Divi Text module.
  4. But in this case, the CSS will not be enough! You will need to add the following code to the functions.php file of your child theme.
add_action('admin_head', 'toolbar_sticky');

function toolbar_sticky() {
  echo '';
}

Note: the difference between the two codes for the back office is the value of the CSS property "Top". One is -30px and the other is -60px.

6 - Conclusion and additional resources

Thanks to this little trick, you will save redundant actions, gain in productivity and efficiency when creating your next content! What do you think? Have you ever noticed that this toolbar disappears when you scroll?

Here are some other Divi resources that might be of interest to you:

Fixer la barre d'outils au scroll
barre d'outils de texte sticky
sticky toolbar Text module

1,261 words

5

You should like it too:

Comment personnaliser le curseur de la souris sur votre site ?

How to customise the mouse cursor on your site?

Do you want a site that is customised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised!

7 Commentaires

  1. Daniel Prin

    Comment fixer la barre d’outils du module Texte de Divi ?
    _______________________________________

    Bonjoir,

    Votre code ci-dessous ne fonctionne pas ?

    /* toolbar sticky au scroll */
    .mce-top-part {
    position: sticky !important;
    top: -60px;
    }

    Amicalement

  2. Philippe Mouret

    Merci beaucoup pour cette astuce très utile au quotidien.

  3. Lycia Diaz

    Merci Philippe

  4. Lycia Diaz

    Salut Daniel,
    En fait, il fonctionne seulement lorsqu’on utilise le Visual Builder. Je viens donc de mettre à jour l’article pour vous donner le code à utiliser si vous utilisez le Divi Builder en back-office et non en front-office. Tu trouveras toutes les explications dans le chapitre 5 : https://astucesdivi.com/fixer-barre-outils-module-texte/#lwptoc5

  5. Denis

    Merci pour la précision apportée au commentaire de Daniel car j’étais arrivé de mon coté à la même conclusion; mais pas de problème car je suis aussi utilisateur du Divi builder, mais je n’avais pas testé

  6. Denis

    Testé cette fois ci avec le Divi Builder, c’est OK, ça marche et c’est très pratique.
    Merci
    Cdt

  7. Lycia Diaz

    Merci du retour Denis 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This