Trucos para trabajar más rápido con Divi y mejorar el diseño / Divi Feature Update

A lo largo de los últimos tiempos, los creadores de Divi han ido aumentando el número de funcionalidades de la plantilla dedicadas a mejorar la fluidez en el trabajo con el Divi builder y el diseño. Pero, tantas novedades, hacen que a veces, algunas puedan pasar inadvertidas.

Este va a ser un post en movimiento. Voy a ir añadiendo opciones interesantes que vaya incorporando Divi para agilizar y mejorar nuestro trabajo con la plantilla.

Tanto si eres una persona que habitualmente trabaja con Divi, como si eres una persona que se está iniciando en su uso, te va a interesar esta lista de trucos destinados a mejorar la productividad, diseño y rendimiento cuando se trabaja con la plantilla Divi.

DESCUENTOS DIVI

 

 

 

VER CURSOS

 

 

1.- Trucos Rendimiento / Divi, para trabajar más rápido con la plantilla Divi

 

En este apartado vamos a ir añadiendo trucos para trabajar más rápido con la plantilla Divi. Es decir, trucos para mejorar el rendimiento.

 

 

1.1.- Enlaces desde contenido a opciones de diseño / Acceso rápido a diseño (Divi quick Access)

 

Esta es, en mi opinión, una de las características más útiles que han sacado los creadores de Divi en mucho tiempo.

Con tantas opciones de diseño asociadas a los módulos, a veces, es difícil encontrar donde está la opción que estamos buscando.

Al trabajar con el Divi builder visual y hacer clic en la configuración de un módulo se mostrará la ventana emergente correspondiente. Pero, al acercar el cursor a alguna zona de contenido verás que aparece un pequeño icono en forma de pincel.

Al hacer clic en el pincel, se nos mostrará en la ventana solo las opciones de diseño correspondientes al contenido que hemos marcado.

 

 

 

1.2.- Vista Wireframe (estructura alambres)

 

Algunas determinadas acciones es más fácil realizarlas en el constructor tipo backend que en el tipo visual, como por ejemplo los movimientos de elementos. Pero cuando estás trabajando con el constructor visual es un follón cerrar e ir al constructor tipo backend.

Ahora, ya no hace falta. Podemos activar la vista tipo Wireframe haciendo clic en el icono con forma de rectángulo + 2 cuadrados que aparece en la parte inferior del constructor visual.

La vista tipo Wireframe del Divi builder es idéntica a la vista del constructor visual tipo backend.

NOTA: Apúntate este atajo de teclado para cambiar de la vista Wireframe a la vista normal y viceversa: Shift + w

 

 

 

1.3- Barra de búsqueda de opciones en el Divi builder

 

En las ventanas del Divi builder existe una barra de búsqueda de opciones de personalización. En vez de navegar entre opciones y más opciones de diseño, podemos escribir la opción que queremos editar y directamente nos aparecerá.

NOTA: No es necesario seleccionar una pestaña antes de la búsqueda. La búsqueda de opciones se realizará en todas las pestañas.

 

 

También tenemos una barra de búsqueda de módulos, cuando añadimos un nuevo módulo, situado en la parte superior de la ventana. Podemos empezar a escribir el nombre del módulo y listo.

 

 

1.4.- Editor en línea de textos (inline editor Divi)

 

Vamos a ver dos tipos diferentes de uso de editor en línea para modificar rápidamente textos, sin tener que acceder a las opciones de configuración.

 

 

1.4.1- Editor en línea Divi para textos con el constructor visual

 

Cuando trabajas con el Divi builder visual y quieres modificar un texto, no es necesario hacer clic en el botón de configuración del módulo asociado a ese texto y buscar el campo para editar ese contenido de texto.

Divi incluye un inline editor o editor en línea. Haz clic con el botón izquierdo del ratón sobre el texto que quieres editar y aparecerá el editor en línea. Con este editor podrás modificar el texto sin tener que acceder a la configuración del módulo.

NOTA: Para salir del editor en línea o inline editor de Divi, solo tienes que hacer clic en la tecla ESC (Escape)

 

 

 

1.4.2.- Editor en línea de nombre de módulos con la visión tipo Wireframe del builder visual de Divi

 

En la vista tipo Wireframe disponible en el constructor visual del Divi Builder es posible personalizar el nombre de los módulos, simplemente haciendo clic con el botón izquierdo del ratón sobre el nombre del módulo y editando el texto.

 

 

 

2.- Trucos Diseño con la plantilla Divi

 

En este apartado vamos a ver trucos, a veces poco conocidos, que nos sirvan para dar un paso más allá en el diseño con la plantilla Divi.

 

 

2.1.- Poner un gradiente sobre una imagen de fondo y alternar gradientes

 

Vamos a ver dos interesantes opciones sobre los gradientes y las imágenes con el Divi builder.

 

2.1.1- Poner un gradiente sobre una imagen de fondo

 

Podemos añadir un gradiente en una capa situada sobre (por delante) una imagen de fondo. Este es un recurso muy útil a la hora de modificar un poco el tono de una imagen y hacerlo bastante más atractivo

Evidentemente, esto tiene sentido si trabajamos con la transparencia de cada uno de los colores que forman el gradiente.

Para que el gradiente aparezca superpuesto a la imagen de fondo lo primero que haremos será añadir un gradiente de fondo y después seleccionar “SI” en el selector: “Place gradient Above Background Image”

 

 

 

2.1.2.- Alternar colores que conforman el gradiente

 

Tenemos un icono en forma de dos cuadrados, que se muestra cuando ponemos el ratón sobre el gradiente de fondo. Al hacer clic sobre dicho icono, se alterna la posición de los dos colores que hemos elegido para formar el gradiente.