Al momento de activar el constructor Divi se crea una nueva opción en el menú de WordPress: la opción Divi. Y los ajustes de Divi se reparten en 5 grupos muy importantes dentro de esta opción. Vamos a verlos:

Las opciones de tema de Divi

El primer elemento del menú de Divi son las Opciones del tema, que se subdivide en varias pestañas, y podríamos decir que conforman los ajustes generales de la plantilla Divi.

Ajustes generales

La primera pestaña que vemos es justamente General y dentro de ella encontramos la siguientes opciones.

Logo. Te permite subir una imagen de logotipo para el sitio web. Es la imagen que va en la cabecera del sitio. En Divi (a diferencia de la mayoría de las plantillas) no se puede mostrar directamente el nombre del sitio web (en texto), sino que es obligatorio subir una imagen, sea con un logo o con el nombre escrito.

Favicon. El favicon es una imagen pequeña que muestra el navegador en las pestañas o en los marcadores, para identificar rápidamente al sitio web.

Barra de navegación fija. La barra de navegación se refiere a la cabecera y al menú superior. Activando esta opción la misma se mantiene fija aunque nos desplacemos por la página hacia abajo.

Activar galería Divi. Al activar esta opción la galería de imágenes predeterminada de WordPress es reemplazada por la de Divi.

Tomar la primera imagen de la entrada. Esto hace que Divi cree las miniaturas de las entradas del blog utilizando la primera imagen que esté insertada en cada entrada, en lugar de la imagen destacada.

Modo estilo blog. Activar esta opción cambia la forma de mostrar los contenidos en la portada de un blog o en las categorías. Estilo blog muestra el texto completo de las entradas, mientras que desactivado solo muestra un extracto.

Sidebar layout. Desde acá elegimos si la barra lateral va a la derecha o a la izquierda del contenido principal.

Diseño de la página de tienda. Lo mismo que antes pero para los producto, si se trata de una tienda online con Divi Woocommerce.

Clave API de Google. La clave API de Google es necesaria para mostrar mapas de Google en el sitio web, ya que el constructor Divi dispone de un módulo de mapa.

Uso de Google Fonts. Activa o desactiva el uso de las fuentes de Google en Divi.

Mostrar íconos sociales. Estas opciones permite elegir qué redes sociales se muestran en el pie de página.

Direcciones sociales. Con estos campos se indican las URL de tus distintos perfiles en redes sociales.

Número de entradas a mostrar. Son varios campos que te permite definir cuántas entradas mostrar en los diferentes listados de WordPress: categorías, búsqueda, archivos, etc.

Formato de fecha. Desde este lugar se puede elegir el formato de fecha para las entradas. Una mejor opción a la predeterminada sería j M Y.

Botón de volver arriba. Esta opción activa un botón que aparece en el lateral derecho de la pantalla cuando nos desplazamos hacia abajo y nos permite subir rápidamente hasta el principio de la página.

Desplazamiento suave. Se refiere al  tipo de desplazamiento cuando hacemos scroll por un mismo contenido utilizando marcadores.

Minify de CSS y Javascript. Ésto combina y optimiza las hojas de estilo CSS y Javascript para que la página cargue más rápido.

Ajustes del menú de navegación

Dentro las opciones de navegación tenemos 3 pestañas. La primera de ellas es Páginas.

Excluir páginas de la barra de navegación. Desde este lugar podemos marcar qué páginas queremos incluir y excluir del menú de navegación. Esto es útil si no definimos un menú y preferimos utilizar el menú automático de WordPress.

En la pestaña Categorías tenemos opciones similares a las que ya vimos en la anterior pero referidas a las categorías del blog.

Como diferencia incluye la posibilidad de ocultar las categorías vacías del menú. Es decir las categorías que no tengan ninguna entrada asignada.

Dentro de las opciones generales del menú de navegación tenemos lo siguiente:

Desactivar niveles superiores del menú. Ésto es muy útil cuando tenemos un menú con sub-opciones donde la opción principal no debería llevar a ninguna página. Por ejemplo, podemos tener la opción Blog bajo la cuál se despliegan las sub-opciones Categoría 1, Categoría 2, Categoría 3. Si no queremos mostrar nada en Blog deberíamos activar esta opción en los ajustes generales de navegación.

Método alternativo de enlace. En ocasiones, cuando enlazamos a una determinada sección dentro de otra página, la posición del desplazamiento final de ésta puede ser imprecisa. Activar esta opción puede resolverlo.

Ajustes del constructor

Ajustes de layout de Entradas

Hacen referencia a elementos que se muestran en las entradas.

Elementos a mostrar (meta datos). La información que podemos elegir mostrar es el autor, la fecha, la categoría y la cantidad de comentarios.

Mostrar comentarios. Habilita la publicación de comentarios en las entradas.

Mostrar miniaturas (imagen destacada). Habilita la imagen destacada para que se muestre al principio de cada entrada.

Ajustes de layout de Páginas

En este caso hace referencia a elementos que se muestran en las páginas.

Mostrar comentarios. Habilita la publicación de comentarios en las entradas.

Mostrar miniaturas (imagen destacada). Habilita la imagen destacada para que se muestre al principio de cada entrada.

Ajustes generales de layout

Estas opciones se refieren a las páginas que muestran listados de entradas, como la página de entradas del blog y las categorías o etiquetas.

Sección de información de entrada. Son los metadatos a mostrar en las páginas de entradas y categorías.

Mostrar miniaturas. Habilita la imagen destacada como miniatura en las páginas de entradas y categorías.

Opciones de anuncios en Divi

La pestaña Ads (anuncios) contiene opciones que te permiten añadir un banner de publicidad en tus entradas sin necesidad de utilizar un widget.

Se puede indicar la URL de una imagen y el enlace de la misma, o bien insertar tu código de anuncios de AdSense.

Opciones SEO para páginas de Divi

En la pestaña SEO de Divi tenemos muchas opciones para optimizar el sitio web de cara al SEO on page.

Yo creo que estás opciones no reemplazan a lo que puede ofrecernos un plugin SEO, como Yoast o el All in One, así que yo personalmente no lo utilizo. Pero puede que te resulte útil en sitios web no muy grandes y donde no te interese complicarte mucho con esta cuestión.

De todas formas, como para aprovechar estas opciones es necesario tener ciertos conocimientos sobre SEO, dejo este tema para tratarlo en un artículo especial.

Opciones de integración de Divi

Esta es una herramienta de Divi que considero muy útil ya que, con mucha frecuencia, necesitamos insertar códigos en un sitio web para integrarle determinadas herramientas externas al mismo.

El caso más común es el de Google Analytics para obtener estadísticas de quienes visitan la web. O el píxel de Facebook, para mostrar anuncios a quienes visitar tu página.

Veamos cómo utilizar estas opciones.

Es cierto que para Google Analytics en particular hay plugins específicos que ofrecen funciones específicas para esta herramienta. Pero si lo único que te interesa es insertar el código podrías ahorrarte el plugin y colocarlo directamente en esta pestaña de la configuración de Divi.

Exportar, importar y restablecer los ajustes de Divi

Me salteo la pestaña Updates porque ya la explique más arriba cuando hablé de cómo actualizar Divi y vamos directamente a los dos botones que tenemos al final de la barra de pestañas.

Exportar la configuración de Divi. El primer botón sirve para exportar toda la configuración que hubiéramos hecho en nuestro Divi a un archivo de texto que luego podemos importar en otro Divi.

También desde el mismo botón podemos importar una configuración que ya tengamos.

Muy útil en el caso de que seas desarrollador.

Restaurar valores por defecto. El segundo botón sirve para restablecer los valores predeterminados de la configuración de Divi. Para dejarlo como viene de fábrica.

Personalizador del Tema

El personalizador de temas de Divi no es otra cosa que el mismísimo personalizador de WordPress, con el agregado de todas las opciones de configuración propias de Divi (igual que con cualquier otra plantilla).

No voy a entrar ahora a explicar una por una las opciones del personalizador porque creo que no tiene sentido, ya que el propio personalizador es bastante claro.

Pero sí quiero hacer un repaso rápido por cada una de ellas con imágenes, para que veas qué opciones de personalización te ofrece Divi.

Ajustes generales configuración de Divi

Configuración de Cabecera y navegación

Configuración del Pie de página de Divi

Botones de Divi

Publicaciones del blog

Estilos para dispositivos móviles

Combinaciones de colores

Personalizador de Módulos

El personalizador de módulos de Divi es similar en aspecto al personalizador de temas, con la diferencia de que contiene configuraciones de los distintos módulos del constructor.

Yo particularmente no lo utilizo porque los propios módulos ofrecen la posibilidad de cambiar esos mismo ajustes. Pero resulta útil si queremos tener una configuración general de determinado módulo sin tener que hacer los cambios cada vez que insertamos uno.

El editor de Rol

El Editor de Rol o Editor de Funciones de Divi cumple un papel más bien de seguridad. Nos ofrece la posibilidad de habilitar/deshabilitar determinadas opciones y herramientas del tema según el nivel de usuario que tengamos.

Lo lógico sería que un usuario Administrador tenga acceso a todas las funciones de Divi, pero no siempre es bueno que un Colaborador o un Autor las tenga, ya que por impericia podría desconfigurarte algo del sitio web.

De forma predeterminada viene todo activado para los 4 perfiles de usuario pero, si vas a trabajar con colaboradores, puede ser útil plantearte qué necesita realmente cada uno y darle acceso solo a lo necesario.

La Biblioteca de Divi

La biblioteca de Divi es el lugar donde podemos ir guardando módulos, filas o secciones a los que ya hicimos una determinada configuración o le cargamos contenido, y que queramos volver a utilizar en otro lado.

Incluso es posible guardar el layout completo de una página, para hacer una copia por ejemplo.

Normalmente no accedemos a esta opción porque, tanto el guardado como la selección de elementos (hacia y desde la biblioteca), se hace directamente desde la página en la que estamos trabajando.

Pero cada tanto es útil darse una vuelta por la biblioteca para ver qué hay y borrar lo que ya no nos sirva.

Configurar los Módulos de Divi

Los módulos de Divi son el corazón de este potente constructor. Con ellos podemos crear la configuración de página que necesitemos y que se nos ocurra. Además de lograr un aspecto bien profesional.

Cuando hablamos de cómo funciona Divi, casi al principio de este artículo, te mostraba que tanto las secciones como las filas y módulos se configuran desde ajustes agrupados en 3 pestañas: contenido, diseño y avanzado.

En el caso de los módulos, si bien la configuración es diferente según cuál módulo sea, hay algunas cosas que son comunes a todos.

Contenido

La pestaña contenido es la que más cambia de un módulo a otro (lógicamente) pero los elementos que generalmente encontramos son:

Texto. Nos permite ingresar el contenido de los campos de texto que sean necesarios. Por ejemplo, el título y el párrafo de texto. En el caso del párrafo se trata de un pequeño editor que tiene todas las herramientas del editor de texto de WordPress.

Imagen. En el caso de un módulo que incluya una imagen dispondrá de un campo para seleccionarla desde la biblioteca de medios.

Icono. Si el módulo tuviera la posibilidad de añadir un ícono te mostrará una lista de los íconos disponibles para elegir. Un ejemplo de ésto sería el módulo de botón.

Enlace. En el caso de que el módulo pudiera enlazar a otra página (como en los módulos botón y anuncio) vas a tener un campo para indicar la URL del enlace y si éste se abre en la misma ventana o en una nueva.

Fondo. Esta opción está presente en todos los módulos y te permite definir el fondo del módulo dentro de 4 posibilidades: color plano, color con degradé, imagen o video.

Etiqueta de administración. Este campo es opcional y te permite asignar un nombre para el módulo. Es útil para identificarlo en la vista de esquema del constructor Divi. Si usas siempre el constructor visual no tiene sentido.

Diseño

Dentro de la pestaña Diseño están todas las opciones para personalizar el formato del módulo. Dependiendo del módulo que se trate podemos encontrar las siguientes opciones:

Imagen. Aparece en los casos de módulos que integran una imagen y normalmente nos permite regular: la posición de la imagen, el redondeo de esquinas, los bordes, la sombra de la imagen, brillo, contraste y color.

Texto. Esta opción permite ajustar: la fuente, el tamaño, color, espacio entre letras, interlineado, sombra del texto, alineación. Estos ajustes son tanto para párrafos como para enlaces, listas ordenadas y desordenadas y citas.

Títulos de texto. Son los mismos ajustes de la opción Texto pero aplicados a los títulos o encabezados h1, h2, h3, h4, h5 y h6.

Cuerpo texto. Algunos módulos de Divi disponen de campos separados para definir el título y el texto en forma de párrafo. En esos casos esta opción permite ajustar los valores para el texto del párrafo.

Tamaño. Varía un poco según el módulo pero en general permite reducir el ancho del módulo. El valor predeterminado es 100%, el máximo.

Separación. Es opción es una de las más utilizadas ya que sirve para regular los márgenes internos y externos del módulo y, por lo tanto, la separación entre módulos.

Borde. Desde esta opción se regula el estilo de borde del módulo, espesor, color y el redondeo de esquinas.

Box shadow / Sombra. Permite ajustar la sombra de módulo, su color, posición y difuminado.

Filtros. Permite regular la tonalidad del módulo, brillo, contraste y demás atributos de color.

Animación. La animación permite que el módulo aparezca con un efecto determinado cuando carga la página, o bien cuando el lector hace scroll hasta ese lugar.

Avanzado

Las opciones que pueden aparecer en la pestaña Avanzado son las siguientes:

Id y clase CSS. Ésto permite definir un Id y una clase para identificar al módulo en la hoja de estilos CSS y poder aplicarle estilos personalizados por este medio.

CSS personalizado. Es una caja que permite ingresar código CSS para personalizar el módulo. En mi opinión es una opción muy limitada ya que este CSS aplica solo al módulo y no a los elementos internos.

Las veces que tuve la necesidad de aplicar CSS personalizado a algún elemento preferí hacerlo desde la opción CSS del personalizador haciendo referencia al ID o a la clase del elemento.

Visibilidad. Esta opción es realmente muy útil ya que nos deja definir si el módulo será visible en todos los dispositivos, o bien solo en móviles, o solo en dispositivos de escritorio. Es útil porque nos permite crear módulos específicos para cada tipo de dispositivo.

Atributos. Esta opción aparece en el módulo de imagen permitiendo definir los atributos alt y title de la misma. Y también cuando hay un enlace (módulo de botón, por ejemplo) permite definir los atributos del mismo: nofollow, noopener, etc.