Si utilizas Divi para el diseño de tu página web, en este post te voy a hablar de una serie de opciones y funcionalidades «menos conocidas» que son realmente interesantes y que en algunos casos te van a solucionar más de un problema de forma muy sencilla.

Como ya sabes, Divi es una de las plantillas y constructores (maquetadores / editores visuales, como quieras llamarle) más utilizados en el universo WordPress.

Asimismo, es un tema muy completo, que incluye todo tipo de opciones y funcionalidades, que permite diseñar prácticamente cualquier sitio web y que, si sueles leer este blog, siempre utilizo y recomiendo.

Y aunque ya he hablado varias veces en este blog sobre Divi, nunca lo he enfocado desde el punto de sus opciones menos conocidas.

De esta forma, hoy te voy a hablar de una serie de funcionalidades de Divi que posiblemente no conozcas, te van a facilitar la vida si lo usas en tu web y te van a encantar.

Antes de empezar, aclarar que he dividido toda información en dos bloques: ajustes generales del tema y opciones del editor visual.

¡Allá vamos!

6 ajustes de Divi que puedes hacer directamente en la plantilla


Como te acabo de comentar, el primer epígrafe se lo quiero dedicar a las opciones menos conocidas que puedes configurar desde el editor de ajustes de Divi. Es decir, que puedes ajustar de forma genérica para toda la web.

Se hacen desde aquí:

Ajustes de Divi

#1 Minificar y combinar archivos CSS y Javascript

El primero que quiero mencionar es la posibilidad de minificar y combinar los archivos CSS y Javascript del tema con el objetivo de reducir velocidad de carga del sitio web.

Mi consejo es que los tengas activados (vienen así por defecto) y están ubicados al final de la página que incluye todas las opciones del tema.

Minificar y combinar archivo CSS y Javascript en Divi

#2 Activar y desactivar el editor «Divi Builder» en entradas, páginas, proyectos y productos

La segunda opción de la que te quiero hablar es la posibilidad de activar / desactivar el constructor de Divi en determinadas partes de tu web. Es decir, la plantilla te permite elegir donde quieres utilizar su editor para maquetar tus contenidos: entradas, páginas, proyectos y productos.

(La pestaña de productos solo aparece si tienes instalado WooCommerce).

Y me dirás «Max, yo quiero utilizar Divi Builder en toda mi web».

Déjame decirte que hay determinadas partes de un sitio en los que no te recomiendo utilizar Divi, como son las entradas y las fichas de productos (aunque todo depende del tipo de ecommerce).

Si quieres activar y desactivar Divi Builder, puedes hacerlo desde: Divi > Opciones de tema > Builder > Post type integration:

Activar y desactivar Divi Builder

#3 Volver al editor clásico de WordPress con un solo clic

Ya sabes que, desde hace unos meses, WordPress se ha actualizado a la versión 5.0 e incluye su propio editor de contenidos: Gutenberg.

Lo primero que debes tener en cuenta es que Divi es totalmente compatible con Gutenberg, pero, si no terminas de acostumbrarte al nuevo editor de WordPress y quieres seguir utilizando el clásico, puedes hacerlo con un solo clic.

Para ello, debes ir a Divi > Opciones de tema > Builder > Advanced:

Volver al editor clásico de WordPress en Divi: desactivar Gutenberg

Aquí puedes activar / desactivar el editor clásico de WordPress (es la última opción: Enable Classic Editor).

Como puedes ver, yo ya me he pasado a Gutenberg. Ha venido para quedarse y mi recomendación es que te vayas acostumbrando a él 😉

#4 Configurar los meta datos en las entradas

Otra opción muy sencilla y que suele pasarse por alto son los metadatos que aparecen en las entradas, es decir, la información sobre el post que aparece debajo del título (fecha, categoría, autor y número de comentarios).

Por defecto aparecen habilitadas los cuatro datos, viéndose de esta forma:

Configurar los meta datos en las entradas de Divi

Pero en las opciones del tema puedes seleccionar qué datos quieres mostrar en en tus entradas y cuáles no.

Esta opción está disponible en Divi > Opciones de tema > Layout > Diseño de entrada individual:

Configurar los meta datos en las entradas de Divi

Por lo tanto, aquí puedes escoger qué datos quieres mostrar debajo del título de tus entradas.

Te dejo varios ejemplos:

Configurar los meta datos en las entradas de Divi
Autor + Categoría + Comentarios
Configurar los meta datos en las entradas de Divi
Autor + Comentarios
Configurar los meta datos en las entradas de Divi
Sin ningún meta dato

#5 Añadir código al principio y al final de las entradas

Otra opción muy sencilla pero interesante de Divi es la posibilidad de añadir contenido personalizado al inicio y fin de tus posts.

Con esta funcionalidad puedes añadir, por ejemplo, un banner al final de tus artículos, un descuento arriba del todo o cualquier contenido a través de código HMTL.

Esta opción está disponible en Divi > Opciones de tema > Integration:

Añadir código al principio y al final de las entradas de Divi

Como ves, solo tienes que insertar en su correspondiente espacio el código del contenido que quieras añadir al principio o al final de tus entradas.

#6 Centro de ayuda y soporte

Antes de terminar este primer apartado quiero mencionar el centro de soporte que ha incluido Divi en una de sus últimas actualizaciones.

Desde aquí puedes:

  • Controlar aspectos como el estado del sitio web.
  • Habilitar el acceso remoto para el equipo de asistencia de Elegant Themes tenga acceso temporal a tu web y pueda solucionar posibles problemas.
  • Acceder a toda la documentación y ayuda de Divi.
  • Activar y desactivar el modo seguro.

El centro de soporte está disponible en la siguiente ruta: Divi > Support center, y aquí te dejo un par de capturas para que veas cómo es por dentro:

10 funcionalidades del editor visual de Divi (Divi Builder)

Ahora que ya conoces algunas opciones generales del tema Divi que son menos conocidas, es el momento de hablar de las funcionalidades que incluye el editor visual y destacan de alguna forma, ya sea por actividad, gesto o diseño.

Funcionalidades del editor visual de Divi (Divi Builder)

#7 Prueba multivariable | Test A/B | Divi leads

Empezamos fuerte.

Esta es una de las funcionalidades más interesantes de Divi, pues te permite hacer test A/B de tus botones, llamadas a la acción o cualquier parte de tu web.

Es decir, con las pruebas multivariables de Divi puedes probar qué tipo de contenido y diseño funcionan mejor de cara a los usuarios.

Para que lo entiendas mejor, te voy a mostrar un ejemplo:

Como puedes ver, Divi Leads te permite crear diferentes pruebas para medir qué tipo de diseño funciona mejor en tus cabeceras, llamadas a la acción, formularios de suscripción o botones.

Es decir, puedes crear varios diseños alternativas y analizar cuál consigue mejores resultados a nivel de tráfico, clics o leads.

#8 Copiar y pegar secciones / filas / módulos

Esta es una de las funcionalidades que más utilizo cuando diseño desde el editor visual (el 90% de las veces).

Además, me parece una de las mejores opciones que incluye el botón derecho de Divi.

Con ella, puedes copiar / pegar secciones, filas y módulos.

Como digo, solo tienes que clicar con el botón derecho del ratón en el elemento que quieras copiar.

Aquí puedes ver como hacerlo en los tres casos:

Opciones de Divi: copiar y pegar sección
copiar / pegar sección
Opciones de Divi: copiar y pegar fila
copiar / pegar fila
Opciones de Divi: copiar y pegar módulo
copiar / pegar módulo

#9 Copiar y pegar estilos

Muy similar a la opción anterior, esta funcionalidad permite copiar y pegar los estilos de secciones, filas y módulos simplemente clicando en el botón derecho.

Opciones de Divi: copiar y pegar estilos

Por ejemplo, tienes cuatro servicios que has maquetado con el módulo anuncio. Solamente tienes que diseñar el primero y pegar el estilo en los otros tres:

Opciones de Divi: copiar y pegar estilos

#10 Historial de ediciones

El historial de ediciones en una opción de Divi realmente útil, pues te permite revisar los cambios que has hecho en un diseño, así como volver a tus pasos anteriores.

Para que lo entiendas, es como el «deshacer» de Office o el «paso atrás» de Photoshop. Sería como un historial que registra tus pasos y cambios.

Esta funcionalidad está situada en los controles inferiores del editor visual:

Opciones Divi: historial de ediciones

Cuando clicas sobre el icono del reloj, se abre una ventana con tu historial de ediciones. Muestra las tareas o cambios que has realizado, así como la hora y minuto en que lo has ejecutado.

Si pinchas sobre una de las tareas, puedes volver a ese paso concreto.

Opciones Divi: historial de ediciones

#11 Importar / exportar diseños

Esta es una de las opciones que como diseñador más le agradezco a los desarrolladores de Elegant Themes, pues ha hecho que reduzca considerablemente mis tiempos de ejecución.

Con esta funcionalidad puedes importar y exportar tus diseños tanto en tu propia web como en sitios de terceros.

Es decir, te puedes llevar tus diseños a otro sitio web diferente.

Para importar y exportar un diseño, simplemente tienes que pulsar en la opción portabilidad y elegir la acción que quieras realizar:

  • Exportar el diseño actual: se te descargará un archivo .JSON en tu ordenador.
  • Importar: si ya tienes algún diseño realizado con Divi, puedes importarlo (también en formato .JSON).
Opciones Divi: portabilidad (importar / exportar)

Además, también puedes importar y exportar las opciones del tema, así como los ajustes del personalizador.

Opciones Divi: portabilidad (importar / exportar)
Opciones Divi: portabilidad (importar / exportar)

#12 Edición rápida de estilos (pincelito)

El editor rápido de estilos es otra de las opciones maravillosas de Divi, especialmente si lo usas a menudo como es mi caso.

Se reconoce visualmente porque su icono es un pincel que aparece en el editor visual cuando pones el ratón sobre cualquier elemento.

Lo que permite esta funcionalidad es encontrar directamente los estilos de ese elemento, ya sea un icono, un título, texto o cualquier parte cuyo estilo se pueda modificar.

Un ejemplo:

Opciones Divi: edición rápida de estilos

#13 Visibilidad: escritorio, tableta y teléfono

La opción de visibilidad permite mostrar u ocultar cualquier sección, fila o módulo en el escritorio, tableta o móvil. Es decir, permite desactivar cualquiera de estos elementos en función del dispositivo desde el cual el usuario visualice tu web.

Particularmente no recomiendo abusar de esta opción, pero viene genial cuando quieres adaptar al móvil determinados diseños, como son, por ejemplo, cabeceras de gran tamaño.

En este caso, debes crear tu cabecera en la versión de escritorio, desactivarla en el móvil y diseñarla de nuevo, desactivándola en el escritorio.

Opciones Divi: Visibilidad (escritorio, tableta y teléfono)

#14 Transformar

Las transformaciones son una de las últimas incorporaciones de Divi a su editor visual.

Ahora es posible «transformar» cualquier sección, fila o módulo, algo que hasta hace poco solo era posible utilizando un programa de edición profesional de imágenes como Photoshop o Illustrator.

Con los controles de transformación puedes mover elementos, girarlos en varios ejes, superponerlos o escalarlos hacia arriba y hacia abajo de forma muy sencilla.

Algunos ejemplos:

Opciones Divi: transformar
Opciones Divi: transformar

#15 Enlazar cualquier sección, fila o módulo

Desde Divi Builder también puedes enlazar cualquier sección, fila o módulo, es decir, que cualquiera de los elementos de tu web estén enlazados a otras partes del sitio o de forma externa.

Aquí puedes ver desde dónde hacerlo en los tres casos:

#16 Atributos para las imágenes

La última funcionalidad de Divi Builder que quiero destacar son los atributos en el módulo imagen.

Estos te permiten definir dos valores fundamentales para SEO:

  1. Texto alternativo de la imagen: etiqueta ALT.
  2. Título de la imagen.

Para configurarlos, tienes que ir al apartado Avanzado dentro del módulo imagen:

Opciones Divi: atributos para imágenes

Hasta aquí este repaso por las opciones y funcionalidades menos conocidas de Divi, pero que son de un enorme valor para quienes utilizamos su editor visual a diario.

Espero que te sean de gran utilidad y hayas podido descubrir alguna nueva 😉

Portada: freepik

Summary
16 opciones de Divi que posiblemente no conozcas y te van a encantar
Article Name
16 opciones de Divi que posiblemente no conozcas y te van a encantar
Description
6 ajustes de Divi que puedes hacer directamente en la plantilla #1 Minificar y combinar archivos CSS y Javascript #2 Activar y desactivar el editor “Divi Builder” en entradas, páginas, proyectos y productos #3 Volver al editor clásico de WordPress con un solo clic #4 Configurar los meta datos en las entradas #5 Añadir código al principio y al final de las entradas #6 Centro de ayuda y soporte 10 funcionalidades del editor visual de Divi (Divi Builder) #7 Prueba multivariable | Test A/B | Divi leads #8 Copiar y pegar secciones / filas / módulos #9 Copiar y pegar estilos #10 Historial de ediciones #11 Importar / exportar diseños #12 Edición rápida de estilos (pincelito) #13 Visibilidad: escritorio, tableta y teléfono #14 Transformar #15 Enlazar cualquier sección, fila o módulo #16 Atributos para las imágenes
Author
Publisher Name
Max Camuñas
Publisher Logo
Share This