Cuando se utiliza el módulo de texto Divi con varios párrafos, la barra de herramientas se desliza con el texto. Así que si necesitas cambiar el estilo del texto -añadir negrita, cursiva o un simple enlace- tienes que resaltar el texto, desplazarte hasta la parte superior para encontrar la barra de herramientas y volver a desplazarte hacia abajo. En este artículo, te daré un consejo rápido para arreglar esta barra de herramientas de manera que permanezca siempre accesible (al desplazarse), sin importar la longitud de tu texto.
Frente - barra de herramientas no fija :

Después - barra de herramientas fija :

- 1 - ¿Qué es la "barra de herramientas" del módulo Texto?
- 2 - ¿Por qué fijar esta barra de herramientas? (+ vídeo)
- 3 - Fragmento de CSS para una barra de herramientas "sticky scroll".
- 4 - ¿Posición fija o pegajosa?
- 5 - Compatibilidad con el constructor de back-office
- 6 - Conclusión y recursos adicionales
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
1 - ¿Qué es la "barra de herramientas" del módulo Texto?

Lo que yo llamo el barra de herramientases el menú de edición de estilo disponible en cada zona de texto de cada módulo de Divi y especialmente en el Módulo de texto.
Esta barra de herramientas contiene todas las opciones necesarias para enriquecer su texto:
- añadir grasa
- poner en cursiva
- insertar listas
- insertar enlaces
- resaltar
- elegir la alineación del texto
- añadir una jerarquía de títulos
- etc.
Por último, encontramos aquí las opciones que ofrecía el editor clásico de WordPress, antes la aparición de Gutenberg.
¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA
2 - ¿Por qué fijar esta barra de herramientas? (+ vídeo)
Como puedes ver en el vídeo, esta acción es sencilla de realizar, pero no aporta nada en términos de diseño para tu sitio o el de tu cliente. Efectivamente, pero arreglar esta barra de herramientas te aportará una gran comodidad a la hora de crear tus contenidos con el Divi Visual Builder. Básicamente, se gana en eficiencia y productividad.
Si el vídeo no funciona, aquí está el enlace.
No se demore. Descubra el tema Divi aquí !
3 - Fragmento de CSS para una barra de herramientas "sticky scroll".
Cuando necesite modificar un elemento de su sitio con CSS, su navegador es su mejor aliado. Basta con utilizar la función "inspeccionar elemento " para encontrar una clase CSS existente y luego modificarla...

En esta captura de pantalla, he utilizado el inspector de mi navegador para encontrar el elemento que quería cambiar. Cuando se resalta, hago clic en él y en la parte inferior del navegador se resalta en azul el código HTML correspondiente. A continuación, encuentro 4 clases en uso, incluyendo el " mce-top-part.
Una vez identificado esto, todo lo que queda es crear el fragmento de CSS apropiado para adjuntar la barra de herramientas. Aquí está:

/* toolbar sticky au scroll */
.mce-top-part {
position: sticky !important;
top: -60px;
}
Copie y pegue este código en el campo dedicado al Divi > Opción de tema > Personalizar CSS.
Tenga en cuenta que este código actuará en todos los Módulos Divi que utilizan un cuadro de texto, ¡que son casi todos los módulos!
Recordatorio: hay otros formas de añadir código a Divi. Descubra también mi biblioteca de Snippets para Divi !
4 - ¿Posición fija o pegajosa?
Para fijar un elemento en una página web, la propiedad más eficaz es la de "Posición". Pero la pregunta que puede hacerse es: ¿por qué utilizar el Pegajoso en lugar del valor Fijo ?
El valor Sticky permite que el elemento permanezca fijo dentro de su contenedor (su elemento padre), mientras que el valor Fixed permanece fijo en relación con la ventana del navegador.
En este caso, si se utiliza el valor Fijo en lugar de Pegajosoverás que el comportamiento de la barra de herramientas no es en absoluto el que esperábamos.
Para entenderlo mejor, desplácese por la ventana que aparece a continuación:
¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.
5 - Compatibilidad con el constructor de back-office
Este capítulo se ha añadido después de la publicación inicial del artículo, hace sólo unas horas. De hecho, algunos de vosotros me habéis señalado que el código CSS que doy en este artículo en el capítulo 3 no "funciona"...
Te aseguro que funciona... pero sólo si utilizas el Visual Builder en el front-office. Para los que utilizan el Divi Builder en el back-office, el código no funciona... ¡Y he descubierto por qué!
Así que aquí hay algunos detalles:
5.1 - Si está utilizando la versión antigua de Divi Builder
En mi opinión es una muy mala idea... Si en la pestaña Divi > Opciones del tema > Creador > Avanzado, tienes activada la opción "editor clásico", entonces estás usando la versión antigua de Divi que ha dejado de evolucionar desde 2018....
Por cierto, si utilizas esta versión, es muy probable que tu edición de back-office sea tan lenta como siempre, ¡es lenta, es lenta!
De todos modos, si prefieres mantener esta configuración, esto es lo que tienes que hacer para arreglar la barra de herramientas del módulo de texto de Divi:

- Si en la pestaña Divi > Opciones del tema > Creador > Avanzado tienes activada la opción "Editor clásico", estás utilizando la versión antigua de Divi.
- Las secciones y los módulos del back office se parecen al segundo punto de esta captura de pantalla.
- Incluso deberías ver una notificación invitándote a usar "la nueva experiencia Divi"... ¡Y con razón!
- Todavía es posible arreglar la barra de herramientas del módulo Divi Text.
- Pero en este caso, ¡el CSS no será suficiente! Deberá añadir el siguiente código al archivo functions.php de su Tema infantil Divi.
add_action('admin_head', 'toolbar_sticky');
function toolbar_sticky() {
echo '';
}
Nota: el plugin Classic Editor también puede reproducir esta opción de Divi, que no recomiendo.
5.2 - Si utilizas el Divi Builder en el back office
Si has activado la opción de mantener el editor clásico y la nueva experiencia de Divi Builder pero seguir editando sus publicaciones desde el back office (y no desde el front-end como muestro en mi video), en cuyo caso también tendrás que usar un código diferente...

- Si en la pestaña Divi > Opciones del tema > Creador > Avanzado has habilitado la opción " última experiencia del Constructor Divi" así como la opción "editor clásico", puedes seguir construyendo tu diseño desde el back office.
- Las secciones y los módulos del back office se parecen al segundo punto de esta captura de pantalla.
- Todavía es posible arreglar la barra de herramientas del módulo Divi Text.
- Pero en este caso, ¡el CSS no será suficiente! Deberá añadir el siguiente código al archivo functions.php de su tema hijo.
add_action('admin_head', 'toolbar_sticky');
function toolbar_sticky() {
echo '';
}
Nota: la diferencia entre los dos códigos para el back office es el valor de la propiedad CSS "Top". Uno es de -30px y el otro de -60px.
6 - Conclusión y recursos adicionales
Gracias a este pequeño truco, te ahorrarás acciones redundantes y ganarás en productividad y eficacia a la hora de crear tus próximos contenidos. ¿Qué te parece? ¿Te has dado cuenta de que esta barra de herramientas desaparece cuando te desplazas?
Aquí hay otros recursos de Divi que pueden ser de su interés:
- Crear un botón de respaldo con Divi
- Crear un menú adhesivo como una pestaña de alternancia
- Crear un menú adhesivo en el desplazamiento
- Crear una barra de pie de página "pegajosa" sólo con las opciones de Divi
- Crear una barra de Hola con Divi
- Arreglar la barra lateral de su blog


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
Merci beaucoup pour cette astuce très utile au quotidien.
Merci Philippe
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
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é
Testé cette fois ci avec le Divi Builder, c’est OK, ça marche et c’est très pratique.
Merci
Cdt
Merci du retour Denis 😉
Super astuce ! Merci
Bonjour,
Je voudrais mettre une barre de notification fixe au dessus du menu haut horizontal, quelqu’unsait comment on fait ?
Merci beaucoup pour votre réponse
Il suffit d’activer la deuxième zone de menu