Manual de Divi

Lo básico

Qué es Divi

Comprende la diferencia entre Divi y otras plantillas de WordPress y qué piensan sus usuarios.

Cómo funciona

Aprende cómo funciona Divi y cómo cargar los diseños predefinidos para aprovechar todo su potencial.

Cómo instalar Divi en WordPress

Aprende paso a paso cómo instalar Divi en tu WordPress y actualizarlo.

Como COnfigurar Divi

Repasamos uno por uno todos los ajustes y herramientas de Divi.

Cómo diseñar una página con Divi desde cero

Cómo Hacer una página de suscripción con Divi

Cómo Insertar un mapa en la página con Divi

Diseñar la Cabecera

Diseñar las entradas

Diseñar las Categorías

Diseñar el Pie de página

Los Módulos de Divi

Texto

El módulo de texto de Divi te ayuda a insertar bloques de texto en algún lugar de tu página.

Imagen

El módulo de imagen de Divi te permite colocar imágenes en el lugar de la página que prefieras.

Video

El módulo de video de Divi te ayuda a insertar videos dentro de tu página de forma sencilla y sin errores.

Botón

El módulo de botón de Divi te permite colocar botones de llamada a la acción o leer más, entre otros.

a

Encabezado de Ancho completo

Crear el encabezado de la página con título, imagen y llamada a la acción.

{

Testimonios

Publica las opiniones de tus mejores clientes para transmitir confianza y prueba social.

Formulario de Suscripción

Este módulo permite que los visitantes se suscriban a tu lista de correo.

t

Formulario de contacto

Crea un formulario para recibir las consultas de tus clientes en tu email.

d

Código

Útil para cuando necesitamos insertar cualquier código o shortcode en algún lugar de la página.

Tabla de Precios

Crea una tabla para comparar fácilmente los precios y características de tus diferentes servicios.

Mapa

El módulo de mapa te permite insertar un mapa de Google en tu página de contacto para indicar tu ubicación.

Conmutador

Cuando hacemos clic sobre una caja ésta se expande y deja ver el texto que hay dentro de ella.

Acordeón

Cuando abrimos una caja se cierran todas las demás del grupo. Útil para preguntas frecuentes.

Galería

El módulo de galería de Divi nos da la posibilidad de crear una galería de imágenes muy profesional.

i

Blog

Te permite insertar en una zona de la página las últimas publicaciones de tu blog o de determinada categoría.

Contador numérico

Muestra un número que se va incrementando hasta llegar al valor definido.

r

Llamada a la acción

Módulo Divi que integra un título, un texto y un botón para llamadas atractivas.

Anuncio

Este módulo integra una imagen, un texto y un enlace. Es muy útil para aplicaciones variadas.

Contador de Barras

Muestra una barra que se va incrementando hasta llegar al porcentaje definido.

Contador circular

Muestra un porcentaje que se va incrementando hasta llegar al valor definido.

Audio

Nos permite insertar un reproductor de audio en la página. La fuente puede ser un archivo de la biblioteca.

Barra lateral

Literalmente nos permite insertar una barra lateral de las que tengamos configuradas en WordPress

U

Búsqueda

Sencillamente inserta una caja del buscador interno de WordPress en el lugar que quieras de la página

w

Comentarios

Este módulo inserta la zona para mostrar y publicar comentarios para la página actual.

Galería de videos

Este módulo te permite seleccionar varios videos para mostrarlos en forma de galería.

Diapositivas

Cada diapositiva puede tener un título, un párrafo, un botón y una imagen o video además de imagen de fondo.

Diapositivas entradas

Muestra un slider con las últimas entradas que tengas en el blog.

5

Navegación

Añade los enlaces que suelen aparecer al final de cada entrada del blog para pasar a la siguiente o a la anterior.

Pestañas

Dentro de cada pestaña podemos colocar un texto que se visualizará al hacer clic en la pestaña respectiva.

Separador

El separador puede ser una línea horizontal o un espacio vacío entre dos filas o dos módulos.

PortAfolio

El módulo de portafolios muestra un listado de los proyectos que tengamos publicados en Proyectos.

PortAfolio filtrable

Añade en la parte superior una pestaña para cada una de las categorías de proyectos.

Medios sociales

Nos deja agregar, de un forma muy sencilla, botones para acceder a los distintos perfiles en redes sociales.

Temporizador

El temporizador te permite definir una fecha y hora para luego mostrar un reloj regresivo hacia ese momento.

Título de publicación

Módulo que muestra el título y los meta datos de la página actual.

Tienda

Permite mostrar en una zona de la página los productos que tengas publicados con WooCommerce.

Persona

Permite indicar una foto, título para el nombre, cargo que ocupa y un párrafo de texto para la biografía.

Iniciar sesión

Además de los campos para ingresar usuario, contraseña y botón, se puede añadir un título y un párrafo.

h

Contenido de publicación

Muestra el contenido de la página o entrada que estamos diseñando.

a

Menú

Muestra uno de los menús de WordPress en alguna parte de tu página o plantilla de entradas.

JORGE BAFFA

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

La plantilla Divi para WordPress es un tema que viene revolucionando desde hace tiempo el mundo de las plantillas para WordPress y es una de las mejores alternativas para crear una web de empresa profesional, gracias a sus layouts prediseñados.

¿Qué es Divi?

Divi es un tema para WordPress cuya principal novedad frente a otras plantillas para WordPress es que incorpora un muy potente editor visual de páginas y entradas que nos permite diseñarlas con muchísimas más y mejores herramientas de las que provee el editor nativo de WordPress.

Es cierto que Divi no es el único page-builder para WordPress pero, su principal ventaja radica en el hecho de no ser un plugin, y por tanto no estar atado a las condiciones de la plantilla con la que lo utilicemos.

¿Qué diferencia a Divi de otras plantillas para WordPress?

Divi es una plantilla muy particular, ya que no se parece en nada a las demás plantillas de WordPress.

Divi no viene con un diseño pre-elaborado al cual le cargamos nuestro contenido, nuestro logo y le ajustamos un par de características.

Ni bien instalamos Divi nos encontramos con un diseño muy básico. Esto es porque no trae un formato prefabricado sino que cada uno puede diagramar las distintas secciones como se le ocurra y añadir una variedad de módulos y elementos de diseño.

Y todo ésto utilizando un práctico page-builder y/o un constructor visual.

Ya hablamos de los llamados page-builders para WordPress cuando presentaba Beaver Builder, el primero que utilicé y que me sigue gustando un montón.

La diferencia principal es que Beaver Builder (como todos los page-builder para WordPress) es un plugin y como tal está atado en parte al diseño base de la plantilla en uso.

En cambio Divi es directamente una plantilla que trae un page builder incorporado. Con lo cual las posibilidades son aún mayores.

Y es justamente el hecho de ser una plantilla con page-builder lo que le hizo ganar muchísimos detractores. Pero cuidado que también tiene muchos fans, y yo mismo ya me estoy convirtiendo en uno de ellos.

¿Qué opinan los detractores de Divi?

Analicemos algunos argumento de los detractores de Divi para entender por qué no les gusta y qué limitaciones le encuentran:

? 1 . Al cambiar de Divi a otra plantilla lo perdemos todo

El principal argumento de los enemigos de Divi es que, al tratarse de un page-builder, si queremos cambiarnos a otra plantilla no nos sirve nada de lo que hayamos desarrollado con él.

Por ejemplo si diseñamos con Divi la home, la página Quiénes somos y las páginas de Servicios, éstas no serán compatibles con otra plantilla, como es común en WordPress, ya que el constructor de Divi las crea utilizando un código propio.

Pero ésto no es un problema de Divi sino que cualquier page-builder funciona de esa forma. La diferencia está en que si tu page-builder es un plugin no lo afecta tanto el cambio de plantilla, con que mantengas el plugin instalado es suficiente y no tienes que rehacer todo.

Es por eso que NUNCA es recomendable usar un page-builder (el que sea) para las entradas de un blog, que generalmente son muchas más que las páginas estáticas que mencionaba, y se trata de publicaciones periódicas que tampoco requieren de un diseño individual muy personalizado.

La pregunta que me surge ante esta objeción es la siguiente. Si haz diseñado tu página con una plantilla que te permite hacer casi cualquier cosa y cambiar absolutamente todo el diseño cuando te aburres ¿Por qué querrías cambiar a otra plantilla más limitada?

Pero claro que siempre puede haber un motivo para todo.

Aunque personalmente eso no me preocupa mucho. Yo cada cierto tiempo cambio casi por completo el diseño de mi sitio web, sea para mejorarlo, sea para adaptarlo a nuevos servicios, sea porque me aburrió, o porque las tendencias de diseño web van cambiando.

Y esos cambios implican rehacer la portada y todas las secciones casi por completo, así que fácilmente podría aprovechar esas ocasiones para un cambio de plantilla.

Un sitio web no es algo que se graba en el mármol para siempre. Al contrario, es algo vivo que necesita renovarse con cierta frecuencia.

Por otro lado también existe el plugin Divi Builder, el mismo constructor pero en plugin que podemos instalar con cualquier otra plantilla y permite que todos los diseños sigan funcionando igual.

? 2 . Divi es muy lento

Esta es la segunda objeción importante por la que quizás no te animes a usar Divi.

Una cosa es cierta. Este tipo de temas o plugins que incluyen tantas herramientas (de las cuales luego solo utilizamos una pequeña parte), suelen convertirse en verdaderos monstruos que consumen una enorme cantidad de recursos sin necesidad. Pero hay que evaluar cada caso en particular.

Porque también es verdad que existe dentro de la blogósfera cierta obsesión enfermiza con el tema de la velocidad. Cómo si el éxito de un sitio web o de un negocio online dependiera de que la página cargue algunos nano-segundos más rápido.

Siempre digo lo mismo. Si a un auto le quitamos los asientos, las cuatro puertas y el capó sin duda que correrá más rápido pero ¿Saldrías en un auto así? A veces preferimos más equipamiento o más confort.

Por otro lado la velocidad depende mucho de cómo esté optimizado el sitio web y el servidor.

Con un buen hosting, un plugin de cache y las imágenes correctamente escaladas y comprimidas no hay de qué preocuparse.

En lo personal someto esta web periódicamente a los análisis de GT Metrix y Pingdom y la realidad es que no tiene tiempos de carga mayores al promedio de sitios web.

¿Y qué piensan sus fans?

Quienes están a favor de Divi valoran principalmente la practicidad de crear cualquier tipo de diseño de una forma muy simple y rápida.

Es cierto que con otros page-builder se podrían lograr las mismas cosas pero hay mucha gente que no conoce este tipo de herramientas y además son todos de pago. Con lo cual tienes que comprar aparte del tema premium, el page-builder.

Con Divi solo compras una cosa y tienes todo, y cuesta solo 89 dólares, mientras que solo el plugin Beaver Builder premium cuesta 100.

Otra cosa a favor es que, al estar integrados completamente la plantilla con el constructor, el rendimiento es mucho mayor y la compatibilidad total.

Mi experiencia con Divi

Mi experiencia con Divi hasta ahora es más que satisfactoria.

Al día de hoy tengo 4 sitios web propios desarrollados completamente con Divi, incluido Aventura Digital. Además de asistir a varios clientes en el desarrollo de sus propias webs con Divi.

Lo que más fastidiaba de una plantilla para WordPress es cuando quería hacer determinadas cosas y no me lo permitía por no tener las opciones correspondientes. Obligándome a meter mano al código o al CSS, con el tiempo adicional que ésto conlleva.

No te voy a mentir, con Divi también hay ocasiones en las que necesito añadir CSS pero son las menos.

Y además el mismo Divi trae los campos para añadir código CSS fácilmente en cada elemento, cosa que me gustó mucho y agiliza enormemente el trabajo de diseño.

Lo que más me gusta

Lo que más me gusta hasta el momento es la cantidad de elementos de diseño que se pueden incorporar y personalizar de una forma rápida.

Y también lo fácil que es crear landing-pages, eligiendo la plantilla Blank-page ya te deja una página totalmente limpia (sin cabecera, laterales ni pie) lista para meterle los módulos y elementos que se nos ocurra.

Además desde Divi 4.0 contamos con el Generador de plantillas que nos permite diseñar con Divi una plantilla para todas las entradas del blog, para las categorías, o solo para determinados grupos de entradas, categorías y páginas.

Incluso nos permite personalizar la cabecera y el pie de todas las páginas de un solo plumazo. Increíble.

¿Cómo funciona Divi?

Para explicarte de forma sencilla cómo usar Divi se me ocurre empezar por el momento en el que vas a crear una nueva página para tu web.

Cómo hacer una página con Divi desde cero

En este video te muestro paso a paso cómo crear una página con Divi desde el principio.

 

En el momento de crear una nueva página con WordPress tenemos la posibilidad de elegir una plantilla de página entre dos opciones:

  • Plantilla predeterminada. Es un diseño que conserva la cabecera y el pie de página de Divi. Esta plantilla te permite activar el constructor Divi para editar todo lo que va entre medio de ambos, y por todo el ancho de la página.
  • Blank page. Al activar esta plantilla de página en blanco desaparecen por completo la cabecera y el pie de página de Divi, y te queda toda la página vacía para diseñarla con el constructor visual.
Plantillas de pagina de Divi

Selector para elegir la plantilla de página que necesitamos y botón para activar el constructor Divi.

Una vez elegida la plantilla de página tenemos que Guardar o Publicar la página para después hacer clic en el botón Usar el constructor Divi.

El constructor Divi

Es importante saber que Divi cuenta con dos constructores que podemos utilizar en paralelo:

  • el constructor Divi y
  • el constructor visual Divi.

El constructor visual es el mejor y el que más vas a usar, sin ninguna duda. Pero, para empezar a entender cómo funciona Divi, me parece necesario conocer brevemente el primero.

Una vez activado el constructor Divi vas a ver que el editor de la página se transforma en algo así:

Plantilla Divi para WordPress

Es un esquema básico en el cual vemos la página diagramada en una sección (caja azul) y una fila (caja verde). Dentro de la fila tenemos que comenzar a añadir columnas y módulos.

Si hacemos clic en Insertar columnas Divi nos pregunta que esquema de columnas queremos para esta fila en particular.

Constructor Divi

Supongamos que elegimos insertar 2 columnas en esta fila. En ese caso ahora nuestro esquema quedaría así:

Insertar módulos en la plantilla Divi

Lo que sigue es insertar módulos en estas columnas. Los módulos son las herramientas de diseño propiamente dichas, y la plantilla Divi para WordPress te ofrece una gran variedad.

Módulos de la plantilla Divi para WordPress

Si elegimos insertar un módulo de Acordeón (o el módulo que sea) se nos abre una nueva ventana donde podemos cargar el contenido y configurar los ajustes de este módulo en particular.

Ajustes de módulos del constructor Divi para WordPress

Como ya te estarás imaginando, esta ventana será diferente según el tipo de módulo a insertar. Por eso la vamos a estudiar bien en detalle cuando hablemos de cada uno de los módulos de Divi.

Lo importante es que recuerdes que siempre, en todos los módulos, vas a tener tres pestañas:

  • Contenido: para cargar los títulos, textos, imágenes y demás elementos que correspondan a este módulo.
  • Diseño: para ajustar tipografías, tamaños, colores, etc.
  • Avanzado: para otros ajustes como clase CSS y CSS personalizado.

Y así quedaría ahora nuestro esquema:

Insertando más módulos con Divi

Como se puede ver, podemos seguir insertando módulos, filas y secciones a la página, y repetir el proceso cuantas veces sea necesario.

Por último, cada caja de sección, fila y módulos contiene unos botones para poder seguir haciendo ajustes en los mismos cuantas veces necesites.

Barra de herramientas del constructor Divi

En concreto estos botones te permiten:

  • Acceder nuevamente a los ajustes del elemento.
  • Duplicar el elemento.
  • Borrar el elemento.
  • Cambiar la distribución de columnas (solo en filas).

Las secciones del constructor Divi

Antes vimos que al insertar un fila podíamos elegir en cuántas columnas estaría dividida. En el caso de las secciones también tenemos 3 tipos de secciones diferentes:

  • Sección estándar: es la sección normal, en la que podemos insertar filas, columnas y módulos como ya vimos.
  • Sección de anchura completa: es una sección en la que no se insertan filas y columnas sino solo algunos tipos de módulos especiales, que cubren todo el ancho de la página.
  • Sección especial: es útil cuando necesitamos un esquema de filas y columnas más complejo.
Sección especial Divi Elegant Themes

Opciones de layout de sección especial que ofrece Divi.

Cargar esquemas prediseñados

Una de las herramientas más potentes de Divi es la posibilidad de guardar diseños para reutilizarlos más tarde en otras páginas. Incluso podemos exportar el diseño de una página a un archivo para utilizarlo luego en otros sitios web.

Si vamos a la opción Cargar diseño, que ya habrás visto en la parte superior del constructor Divi, accedemos a una ventana con 3 posibilidades.

Layouts prediseñados de Divi theme

Divi te da la opción de cargar un diseño desde:

  • Catálogo de diseños que ya vienen hechos con Divi.
  • Tus propios diseños que hayas guardado en la biblioteca.
  • Tus anteriores páginas de este mismo sitio web.

De lejos la primera opción es la mejor, y la más útil de todas si recién estás empezando con tu página. Así quedaría nuestro esquema con un layout prediseñado.

Layout prediseñado plantilla Divi para WordPress

El esquema del constructor aumenta en complejidad con más filas y módulos.

Como ya estarás notando, si bien el constructor Divi es muy potente, a medida que le añadimos más secciones y más filas al esquema, se nos va haciendo un poco confuso trabajar.

Porque visualmente son todas cajas muy similares donde no vemos el aspecto final de la página y se nos dificulta tener que encontrar un módulo en particular para corregirlo.

Y encima estamos obligados a ir y venir permanentemente entre el esquema y la vista previa, para saber cómo va quedando.

El constructor visual Divi

El constructor visual Divi resuelve estos dos problemas ya que nos permite trabajar directamente sobre una vista final de la página: vamos viendo los cambios que hacemos en tiempo real, tal cual van a quedar.

De esta forma evitamos tener que pasar del constructor a la vista previa para ver el resultado final, y editamos los elementos de la página directamente.

Divi constructor visual

Una vez activado el constructor visual, Divi nos muestra una vista previa del layout con todo su contenido donde, a medida que nos desplazamos por los distintos elementos, van apareciendo las herramientas que nos permiten editarlos.

Usando el constructor visual de Divi

En este caso el color violeta indica que se trata de una sección de ancho completo que a su vez ya tiene dentro un módulo específico con contenido.

La barra de herramientas violeta nos deja acceder a los ajustes de la sección mientras que la gris a los ajustes del módulo.

También en la parte inferior hay un círculo con 3 puntos. Si hacemos clic ahí se despliegan herramientas generales del editor para toda la página.

Plantilla Divi configuración de layout

Las herramientas de la izquierda nos permiten emular la visualización en diferentes dispositivos, pasar a una vista de esquema y hacer zoom.

Las herramientas centrales son para añadir un nuevo layout o guardar el actual en la biblioteca de Divi, eliminarlo, exportarlo y hacer algunos ajustes generales del editor.

Por último, los dos botones de la derecha son para guardar o publicar los cambios.

Si activamos los ajustes del módulo (barra de herramientas gris) se abre una ventana modal donde tenemos las misma tres pestañas que ya vimos en el editor Divi básico: contenido, diseño y avanzado.

Configuración del módulo de Divi

Y si hacemos clic en los lápices que aparecen junto a cada elemento nos lleva a los ajustes propios de cada uno de ellos. Incluso, en los módulos de texto de Divi, podemos hacer clic y empezar a escribir directamente en esta vista previa.

Si me desplazo hacia abajo en el mismo layout encuentro ahora una sección que contiene una fila de dos columnas (similar a las que ya vimos).

Plantilla Divi para WordPress

En la parte superior tenemos la barra de herramientas azul (para activar los ajustes de la sección) y si nos acercamos a los bordes podemos ampliar o reducir los márgenes simplemente arrastrando.

El signo más de la parte inferior nos permite añadir una nueva sección.

Si nos aproximamos a la fila se visualizan los ajustes de ésta (en color verde), de la misma forma que con la sección.

Usando Divi Elegant Themes

Y lo mismo si nos posicionamos arriba de alguno de los módulos.

Cómo funciona Divi Elegant Themes

Estarás de acuerdo en que este editor visual Divi es mucho más práctico que el otro que vimos antes.

Un poco más adelante voy a analizar en detalle cada uno de los módulo, pero ya estás en condiciones de explorarlos por tu cuenta.

¿Cómo instalar Divi en WordPress?

El tema Divi para WordPress es una plantilla premium (es decir de pago) desarrollada por Elegant Themes. No la vas a encontrar en el repositorio de plantillas de WordPress, sino que es necesario comprarla en el sitio web del desarrollador:

☀ Descargar Divi del sitio oficial de Elegant Themes.

Actualmente Elegant Themes no vende ni Divi ninguna de sus plantilla o plugins por separado. Lo que hace es venderte todo su paquete completo de plantillas y plugins.

Pero no te asustes por ésto, ya que el precio del pack completo es lo mismo que sale (en promedio) comprar una sola plantilla en cualquier otro lado.

Y no solo vas a tener acceso a Divi y a su soporte técnico, sino también a plugins muy útiles como Monarc (para compartir en redes sociales), Bloom (para suscripción) o Divi Builder. Además del tema Extra (una especie de Divi para blogs y sitios de noticias) y todas las plantillas normales que desarrolla Elegant Themes.

Actualmente tienen el pack completo a 89 dólares (unos 76 euros) pero puede que el precio cambie, así que es mejor consultarlo en su sitio web: Elegant Themes.

¿Cómo actualizar Divi?

Otra de las ventajas de usar Divi es que es una plantilla que está en constante desarrollo. Actualmente recibe actualizaciones casi semanalmente y, a veces, más de una por semana.

Y no son solo actualizaciones por cuestiones de seguridad sino que incorpora nuevas herramientas y mejoras constantemente. Los desarrolladores de Elegant Themes están como imparables con Divi!!!

Actualizar Divi es muy sencillo. WordPress te notifica cuando hay alguna actualización disponible y se puede actualizar directamente desde el panel Apariencia > Temas, como cualquier otra plantilla de WordPress, siempre que hayas activado la licencia luego de instalarlo.

Para activar la licencia es necesario ir a Divi  > Opciones del tema Updates. Ahí vas a encontrar dos campos, uno para completar con tu usuario de Elegant Themes y otro con la API Key.

Activar la licencia de Divi para WordPress

La API key se obtiene accediendo a tu cuenta de cliente por las opciones Account > Your API key.

Una vez completado eso y guardados los cambios estás listo para actualizar todas las veces que sea necesario.

Antes de pasar a hablar de los módulos de Divi, también vamos a ver como podemos aprovechar cada una de sus opciones de configuración.

¿Cómo configurar Divi?

Al momento de activar la plantilla Divi para WordPress 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

Cómo configurar Divi

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

Configuración de Divi

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.

Mostrar los menús desplegables. Esta opción te permite no mostrar los menús desplegables cuando hay sub-opciones en el menú.

Enlace de pantalla de inicio. Para incluir una opción del menú hacia la home.

Ordenar enlaces de páginas. Desde acá podemos elegir cómo se ordenan las páginas en el menú. Las opciones son: título del post, orden del menú, fecha del post, fecha de modificación del post, ID del post, nombre del autor, nombre del post.

Ascendente/descendente. Y desde acá si se muestran en orden ascendente o descendente según la opción elegida en el paso anterior.

Número de niveles desplegables mostrados. Cuántos niveles puede tener tu menú desplegable.

Ajustes de Divi Elegant Themes

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.

Configuración de menú de Divi

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

Configuración de Divi builer

En la pestaña Builder encontramos las opciones de ajustes del constructor propiamente dicho.

Generación de Archivo CSS Estático. Cuando esta opción está activada, los estilos CSS para todas las páginas son almacenados en caché y se sirven como archivos estáticos. Activar esta opción puede contribuir a mejorar el rendimiento.

Enviar Estilos Inline. Con las versiones anteriores del constructor, los estilos CSS para las configuraciones de diseño de los módulos se imprimían en el pie de página. Habilitar esta opción restaura ese comportamiento.

Tour del Producto. Si está activada, el Tour del Producto comenzará automáticamente cuando lances por primera vez el constructor visual.

Ajustes de layout de Entradas

Configuración Layout Divi

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

Configuración de Layout

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

AdSense 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

SEO para 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.

Divi para SEO

Configurar SEO de Divi

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

Analytics en 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.

Habilitar código de la cabecera. Esta opción habilita a insertar un código entre las etiquetasydel HTML de todo el sitio web. Es donde suele insertarse por ejemplo, el código de Google Analytics.

Activar código del cuerpo. Esto es para insertar un código entre las etiquetasyde todo el sitio web. Algunas herramientas pueden requerir esta ubicación.

Activar código único superior. Esto es para habilitar la inserción de un código en la parte superior de las entradas solamente. Puede utilizarse para colocar publicidad por ejemplo.

Habilitar código único inferior. Igual que el anterior para para colocar contenido al final del artículo y antes de los comentarios. Esto es útil para una caja de autor, por dar un ejemplo.

Agregar código. Luego siguen otras cuatro cajas donde podemos insertar los códigos respectivos para cada una de las opciones que recién vimos.

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

Exportar importar configuración 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

Personalizador de Temas de Divi

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

Ajustes de Formato de Divi

Ajustes de formato generales de Divi.

Ajustes de tipografía en Divi

Ajustes de tipografía.

Ajustes del fondo en Divi

Ajustes del fondo de la página de Divi.

Configuración de Cabecera y navegación

Formato de cabecera en Divi

Formato de la cabecera.

Ajustes Barra de menú principal Divi

Ajustes de la barra de menú principal.

Ajustes Barra de menú secundario Divi

Ajustes de la barra de menú secundario.

Elementos de la cabecera en Divi

Qué elementos mostrar en la cabecera.

Configuración del Pie de página de Divi

Diseño del pie de página de Divi

Diseño del pie de página de Divi.

Widgets del pie de página de Divi

Ajustes de los widgets del pie de página.

Menú inferior de Divi

Ajustes del menú inferior de Divi.

Ajustes de la Barra inferior de Divi

Ajustes de la barra inferior de Divi.

Botones de Divi

Estilo de botones de Divi

Estilo de los botones de Divi.

Estilo de botones de Divi

Estilo de los botones al pasar por encima.

Publicaciones del blog

Estilos del blog en Divi

Configuración del blog de Divi.

Estilos para dispositivos móviles

Estilos para móviles de Divi

Estilos generales para móviles de Divi.

Estilos de menú para móviles

Estilos del menú para móviles.

Combinaciones de colores

Combinaciones de colores

Combinaciones de colores de Divi.

Personalizador de Módulos

Personalizador de Módulos de Divi

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

Editor de roles de Divi

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

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.

Módulos del constructor Divi

Módulos plantilla Divi para WordPressLos 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.

Configurar módulos Divi

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.

Así llegamos al final de esta guía sobre la plantilla Divi para WordPress. Si te hubiera quedado cualquier duda te espero en los comentarios.

☀ Descarga Divi del sitio oficial de Elegant Themes.

Si la guía te pareció útil, juntos podemos ayudar a más gente compartiéndola en las redes sociales.