Una de las razones por la que muchos diseñadores y empresas de diseño han acabado optando por el tema Divi para la creación de sus proyectos a clientes, es por la gran versatilidad que tiene la plantilla.

De por sí, el constructor ya te permite avanzar rápido con el sistema de arrastrar y soltar módulos o el poder duplicar contenido con tan solo un click. También con la herramienta de Biblioteca y con la inclusión de numerosas plantillas predefinidas y de layouts.

Pero en este post quería dar un paso más con algunos trucos para usar Divi, los cuales te permitirán trabajar más rápidamente y por lo tanto, tener un mayor rendimiento.

Atajos del constructor Divi para diseñar webs más rápido

Como decía, gracias a la herramienta de Biblioteca de Divi, es posible añadir diseños ya hechos por ti o por cualquier otro, desde otra página, ya sean diseños completos, secciones o tan solo un módulo.

De esta manera, no tendrías que volver a crear un diseño desde cero y ahorras una gran cantidad de tiempo.

Pero además de esto, existen otras formas de crear diseños rápidos con Divi. Lo que podríamos llamar atajos que permiten trabajar con mayor fluidez y realizar acciones de forma que necesites mucho menos tiempo y esfuerzo en realizar cualquier cambio.

Vamos a ver cuáles son.

Extend Styles

Imagínate que tienes una página con multitud de secciones y deseas realizar algunos cambios de diseño.

Lo habitual sería ir modificando parte por parte, en lo cual tardarías un periodo de tiempo valioso.

Con Divi existe una opción llamada «Extend Styles» con la que puedes realizar cambios globales en varias secciones al mismo tiempo.

Es decir, seleccionando tan solo con un click, podrás realizar un mismo cambio de diseño en secciones enteras, filas o módulos.

Para usar esta función de Divi:

Abre los ajustes de la sección, fila o módulo en cuestión y modifica el cambio que desees.

Dejando el ratón sobre el título, clica en el botón derecho del ratón. Te aparecerá un listado de opciones, siendo la última «Extend Styles».

Te aparecerá una ventana emergente en donde elegir a qué elementos aplicar este estilo (secciones, filas o módulos) y a qué nivel (página, sección, fila o columna).

Elige la combinación que necesites.

Acepta cambios y automáticamente, el estilo modificado se aplicará allí donde hayas indicado.

Por ejemplo, en estas capturas, he modificado el tipo de letra de un módulo y a continuación, he expandido los estilos para que se modifique toda la página al mismo tipo de letra.

Esta misma acción la podrías hacer en una combinación infinita. Por ejemplo, para modificar los colores de fondo de todas las secciones a la vez, el estilo de los bordes de todos los botones, el tamaño de los textos, el ancho de las filas, el hover de las imágenes…

Bulk Editing

La siguiente función para trabajar más rápido con Divi es la de «Edición en masa», y es incluso más sencilla que la función anterior.

Este truco para usar Divi consiste en hacer una selección múltiple de varios elementos para así realizar cambios globales y en masa.

Para ello, tan solo tienes que dejar pulsada la tecla shift y seleccionar los módulos, filas o secciones a modificar, entrar en los ajustes de uno de ellos para realizar los cambios y ¡listo!

De esta forma, no hace falta ir modificando uno por uno cada apartado de la web si lo que necesitas es realizar funciones comunes, como cambiar el color de fondo, cambiar el tamaño de los textos, el color de los iconos, añadir sobra interna a las secciones…

Lo puedes aplicar tanto a varios módulos como a varias secciones, filas, columnas… o incluso a la combinación de estas.

Además, si estás trabajando con el constructor visual de Divi, podrás ver todos los cambios en masa al momento.

Esta opción de multiselección también la puedes usar para realizar otras acciones, como arrastrar elementos en masa de un lugar a otro, eliminar varios a la vez…

Para páginas con mucho contenido resulta una forma muy útil de agilizar el trabajo.

Acceso rápido

Cuando estás editando un módulo de Divi con el constructor visual, te aparecen numerosas opciones de configuración y personalización. Y sobre todo, si no llevas mucho tiempo usando esta plantilla, te podrías sentir algo perdido y tardar en encontrar la opción que buscas.

Para hacértelo lo más sencillo posible, la plantilla incluye una opción de acceso rápido a través de la cual te va enfatizando en color azul y con el icono de un lápiz el elemento por el que vas pasando el ratón.

Por lo tanto, tan solo tienes que hacer click en ese icono del lápiz para que automáticamente te dirija y se abra al apartado correspondiente de configuración.

De la forma contraria, al pasar el ratón por cada apartado de configuración dentro de la ventana del constructor, te va indicando dentro de un recuadro azul, la parte del módulo a la que corresponde.

Esto resulta muy útil en los casos en los que dispongas de numerosos módulos seguidos.

Quick Actions

Esta es una de las mejores herramientas en cuanto a mejora de la funcionalidad que ha incluido Divi a lo largo de sus actualizaciones.

Se trata de un sistema de búsqueda inteligente con el que llegar rápidamente a la acción que quieras hacer o a la ubicación que quieras buscar.

Para usarlo, simplemente teclea Shift+Space mientras estés usando el constructor de Divi y automáticamente te aparecerá una ventana con un buscador. Funciona tanto en el constructor backend como en el frontend.

Podrás buscar y navegar rápidamente hacia módulos, filas y secciones específicas de tu página. Simplemente empezando a escribir, este robusto buscador ya te empieza a sugerir las búsquedas, incluyendo todo el contenido de Divi.

Las posibilidades de búsqueda que incluye estas quick actions son muchísimas.

Puedes, por ejemplo, ir a un elemento en concreto (escribiendo «go to»), insertar un nuevo elemento (escribiendo «insert»), configurar una página (escribiendo «page»), ir a la documentación de Divi (escribiendo «help»), importar o exportar un diseño (escribiendo «layout»), abrir cualquier página o entrada (escribiendo «open»)…

O una de las más interesantes, ver en formato teléfono o tablet (escribiendo «view»).

Este sería un ejemplo de la búsqueda de «Help», en la que te sugiere diversos videotutoriales de Divi o incluso la documentación.

En definitiva, este buscador de acciones rápidas de Divi te permitirá acceder cómodamente a la entera configuración del Divi Builder y realizar acciones del constructor desde un solo lugar.

Esto, evidentemente te ahorrará tiempo, evitando el proceso normal de encontrar cada acción.

Además, también puedes hacer ciertas búsquedas en español.

De esta forma se consigue acelerar notablemente el flujo de trabajo y gastar menos tiempo en al creación de tus proyectos con Divi.

Search options

Esta función de ayuda de Divi es muy interesante para los usuarios que lleven poco tiempo usando la plantilla, ya que les puede ayudar a orientarse dentro de las opciones de configuración de cada apartado: módulo, sección y fila.

Se trata de la barra de buscador que se encuentra en la parte superior de los ajustes. Tan solo con empezar a teclear una búsqueda, el constructor se irá desplazando intuitivamente hacia la sección precisa.

Puedes buscar por ejemplo por «color», «borde», «margen»… o cualquiera que sea la opción que desees modificar. Y automáticamente se abrirán los campos de personalización de diseño que correspondan.

Atajos de teclado

Para los que prefieren trabajar con el teclado, el constructor de Divi también admite atajos de teclado para avanzar de forma más eficiente.

Por ejemplo, cmd + z para deshacer, cmd + y para rehacer o cmd + s para guardar.

Pero, ¿sabías que también puedes usar los atajos del teclado para la configuración de módulos?

Por ejemplo, cmd + alt + c para copiar estilos del módulo, c + 1/2/3/4… para cambiar la estructura de la columna, r + f para hacer que la fila ocupe el ancho máximo…

Si quieres ver cómo usar los atajos de teclado para Divi, abre un módulo, clica en el enlace «Help» y después en «Keyboard Shortcuts», tal y como se muestra en la imagen.

Módulos globales

Por último, uno de los elementos de Divi que ya he comentado en varios post y que me sigue pareciendo de lo más útil que trae la plantilla, son los módulos globales.

Los módulos globales son fragmentos de diseño que bien pueden ser módulos, filas o secciones ya diseñados, que puedes clonar en diferentes ubicaciones de una página web y en los que puedes realizar cambios de forma global.

Por ejemplo, has creado una sección de suscripción y quieres que se muestre en varias de tus páginas (en la página de contacto, en la página de servicios, en la página Sobre nosotros…). No hace falta que la vuelvas a crear desde cero en cada página. Y en el caso de que realices una modificación de diseño o configuración, tampoco hace falta que vayas página por página modificando.

Simplemente la creas una vez, la seleccionas como «Global» y cada cambio nuevo que realices se efectuará a la vez en todas las páginas donde tengas añadida esta sección.

Puedes modificarla tanto desde la edición individual de una página, como desde la misma Biblioteca.

Desde la edición de la página, clica en el icono de «Guardar en Biblioteca», asigna un nombre y marca la casilla de «Global». De esta forma, la sección se convertirá a un color verde para que puedas diferenciarla de las demás.

Estas son algunas de las mejores funciones para trabajar más rápido con la plantilla Divi y por lo tanto, ser más eficiente y rendir más. Pero recuerda que también puedes usar la poderosa herramienta de Biblioteca para importar o añadir diseños rápidamente, así como hacer uso de alguna de las múltiples plantillas predefinidas que existen para todas las temáticas.

¿Todavía no tienes el constructor Divi? Clica en este enlace para poder conseguirla y empezar a diseñar tu web hoy mismo. O si por el contrario ya la tienes pero quieres renovar la licencia, clica aquí 😉

¿Conocías estos trucos de Divi para diseñar webs más rápido? ¿Conoces alguno más? Puedes comentar tus sugerencias más abajo en los comentarios 😉