¿Cómo puedo arreglar la barra de herramientas del módulo de texto de Divi?

Actualizado el 25/09/2021 | Publicado el 29/06/2021 | 7 comentarios

Cuando usas el módulo de texto de Divi con múltiples párrafos, la barra de herramientas se desliza con tu 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. Es bastante molesto... En este artículo, te daré un truco rápido para arreglar esa barra de herramientas para que permanezca siempre accesible (al desplazarse), sin importar la longitud de tu texto.

Frente - barra de herramientas no fija :

barre outils non fixe

Después - barra de herramientas fija :

barre outils fixe

Anuncio: 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?

Barre outils style des textes Divi

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
  • destacar
  • elegir la alineación del texto
  • añadir una jerarquía de títulos
  • etc.

Por último, encontramos aquí las mismas 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 esperes más. Descubra el tema Divi aquí !

3 - Fragmento de CSS para una barra de herramientas "sticky scroll".

Cuando necesites modificar un elemento de tu sitio con CSS, tu navegador es tu mejor aliado. Sólo tienes que utilizar la función "inspeccionar elemento " para encontrar una clase CSS existente y luego modificarla...

Classe CSS pour modifier la barre d'outil
Inspeccione el elemento para encontrar la clase CSS que actúa sobre la barra de herramientas

En esta captura de pantalla, he utilizado el inspector de mi navegador para encontrar el elemento que quería editar. 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 por hacer es crear el fragmento de CSS apropiado para adjuntar la barra de herramientas. Aquí está:

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

Copie y pegue este código en el campo dedicado al Divi > Opciones del 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á que el comportamiento de la barra de herramientas no es en absoluto lo 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 se ralentice como nunca, ¡es lento, es lento!

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:

barre outils ancien builder
Has activado la opción "editor clásico" y estás utilizando una versión antigua de Divi
  1. 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.
  2. Las secciones y los módulos del back office se parecen al segundo punto de esta captura de pantalla.
  3. Incluso deberías ver una notificación invitándote a usar "la nueva experiencia Divi"... ¡Y con razón!
  4. Todavía es posible arreglar la barra de herramientas del módulo Divi Text.
  5. Pero en este caso, ¡el CSS no será suficiente! Tendrá que añadir el siguiente código en el 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...

barre outils experience calssic
Barra de herramientas fija para el uso del back-office
  1. 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.
  2. Las secciones y los módulos del back office se parecen al segundo punto de esta captura de pantalla.
  3. Todavía es posible arreglar la barra de herramientas del módulo Divi Text.
  4. 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 productividad y eficacia a la hora de crear tus próximos contenidos. ¿Qué te parece? ¿Ya te has dado cuenta de que esta barra de herramientas desaparece cuando te desplazas?

Aquí hay otros recursos de Divi que pueden interesarle:

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

1.261 palabras

5

A ti también te debería gustar:

Comment personnaliser le curseur de la souris sur votre site ?

¿Cómo personalizar el cursor del ratón en su sitio?

¿Desea un sitio personalizado hasta el último detalle? Tengo un tutorial rápido y fácil para ayudarle a personalizar el cursor del ratón en su sitio. De este modo, cuando sus visitantes pasen por encima de un enlace, el cursor estará totalmente personalizado.

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.

Pínchalo en Pinterest

Acciones
Comparte esto