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

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.

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?

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:

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! 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...

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 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