Plantilla Divi para WordPress

¿Qué es Divi?

La plantilla Divi para WordPress es una plantilla que viene revolucionando desde hace tiempo el mundo de las plantillas para WordPress.

Su principal novedad frente a otras plantillas es que incorpora un muy potente editor visual de páginas y entradas que nos permite diseñarlas con 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 pierdemos 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 instalarle a cualquier otra plantilla y permite que todos los diseños sigan funcionando igual (o casi 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.

¿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. Y encima si contratas e hosting de Aventura Digital te sale gratis.

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 hasta el momento está siendo muy buena. Al momento tengo dos sitios web propios hechos completamente con Divi, y Aventura Digital con su primo hermano, el tema Extra.

Lo que más fastidia de una plantilla para WordPress es cuando queremos hacer determinadas cosas y no te lo permite por no tener las opciones correspondientes. O hay que hacerlo metiéndole mano al código o al CSS, con el tiempo adicional que ésto conlleva.

No me voy a engañar, acá también tuve que meterle mano al CSS para ajustar ciertas cosas, pero eso es algo que siempre hace falta.

Quizás sea un obsesivo (mejor dicho lo soy) y siempre necesito hacer algún ajuste mediante CSS. Por más completa que sea una plantilla o el page-builder es imposible que tenga opciones para TODO.

Pero desde que WordPress 4.7 añadió la opción CSS Personalizado es muy fácil añadirlo directamente desde el personalizador.

Y además el mismo Divi tiene opciones en sus módulos para añadirle CSS personalizado a los distintos elementos, 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.

Lo que menos me gusta

Lo que menos me gusta hasta ahora es que la parte de blog tiene pocas opciones para personalizar el diseño. Es donde más tuve que meterle mano al CSS.

Por ejemplo no encontré una forma de quitar la barra lateral para todas las entradas. Sí se puede quitar de manera individual desde el editor de cada entrada pero si luego lo queremos revertir habría que ir nuevamente una por una. Nada práctico.

Y tampoco encontré una forma de darle un tamaño de fuente a la columna central y otro distinto a la barra lateral, se cambia todo junto.

Entiendo que Divi es un tema que está pensado más que nada para páginas web de empresas que para blogs. Quizás por eso no le hayan dado tanta importancia a este tipo de cosas.

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.

En ese momento 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.

Para entender un poco mejor cómo funciona la plantilla Divi para WordPress te recomiendo mirar el siguiente video. Se trata de una recorrida general por Divi.

Con todo ésto que vimos ya deberías tener una idea clara sobre cómo funciona Divi. Ahora lo que tendrías que hacer es ir probando y descubriendo cada una de sus posibilidades.

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:

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 etiquetas <head> y </head> del 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 etiquetas <body>y </body> de 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.

Así que no podemos dar por cerrada esta guía sobre el constructor Divi sin hablar de cada uno de ellos.

Todos los módulos de Divi uno a uno

Vamos a ver uno por uno todos los módulos que incluye la plantilla Divi.

El módulo de Texto de Divi

El módulo de texto es sin duda el más utilizado de todos los módulos de Divi. Se trata de un editor, similar al editor de WordPress, que te permite insertar una caja con párrafos de texto y titulares en cualquier lugar de la página.

El módulo de texto de Divi Elegant

Dentro de sus ajustes te permite personalizar la tipografías, tamaño y color del texto, tanto para párrafos como para cada uno de los posibles titulares: h1, h2, h3, h4, h5 y h6.

También se puede definir un formato específico para enlaces, listas y citas de cada módulo de texto en particular.

☀ El módulo de texto de Divi

El módulo de Imagen de Divi

El segundo módulo más popular de Divi es el módulo de imagen. Como ya te estarás imaginando este módulo permite insertar en tu página una imagen individual.

Módulo de Imagen plantilla Divi

A diferencia de insertar una imagen con el editor nativo de WordPress, con este módulo de Divi podemos personalizar mejor y más fácil la forma en que se muestra la imagen y cómo se relaciona con el resto del contenido.

Además te permite asignarle un enlace para cuando alguien hace clic en la imagen, como si fuera un botón, y definirle los atributos alt y title, importantes para el SEO.

El módulo de Video

El módulo de video de Divi nos ayuda a insertar un video individual en la página que estamos diseñando con el constructor.

El módulo de Video plantilla Divi

Se puede insertar un video cargado en la biblioteca de medios o simplemente ingresar la URL de un video de YouTube, mi opción preferida para insertar videos en WordPress.

El Título de Ancho Completo

Este módulo de Divi es particular porque solo se puede usar en una sección de ancho completo. Se trata de un elemento muy útil para el encabezado o introducción de una página (lo que se ve antes de hacer scroll).

El Título de anchura Completa Divi

El módulo título de ancho completo no es solo un título sino que permite definir los siguientes elementos: Título, Subtítulo, Párrafo de texto, Botón 1 y Botón 2.

Además se puede definir una imagen de fondo para obtener un aspecto más atractivo y profesional.

El módulo de Testimonios de Divi

El módulo de testimonio o de recomendación sirve para colocar testimonios de clientes o usuarios en tu página.

El módulo de Testimonios de Divi

Básicamente nos permite ingresar una foto de la persona y un texto, además del cargo y empresa. Incluso se puede enlazar a la web de quien nos recomienda.

El módulo de Botón

Es un módulo muy sencillo para insertar un botón individual en algún lugar de tu página.

El módulo de Botón DiviEs suficiente con indicar el texto del botón y la URL del enlace, pero también podemos definir la forma, el color y el tamaño.

El módulo de Código

Este es un módulo muy similar al módulo de texto con la diferencia de que no tiene las opciones de formato. Es útil para cuando necesitamos insertar cualquier código en algún lugar de la página.

El módulo insertar Código Divi

Puede ser que necesites insertar algún shortcode, o bien un código javascript.

El módulo Conmutador de Divi

El módulo conmutador consiste en unas cajas que se apilan una sobre otra mostrando solo un título. Cuando hacemos clic sobre una caja ésta se expande y deja ver el texto que hay dentro de ella.

El módulo Conmutador de Divi Elegant

Es muy útil para secciones de preguntas frecuentes ya que permite colocar mucha información en la página sin tener todo a la vista.

El módulo Acordeón de Divi

El módulo de acordeón es muy similar al módulo conmutador. La diferencia es que en el acordeón cuando abrimos una caja se cierran todas las demás, de forma que solo podemos tener una caja abierta a la vez.

El módulo Acordeón de Divi

En el módulo conmutador en cambio podemos ir abriendo y cerrando cajas libremente.

El módulo de Galería

Algo en lo que WordPress es bastante pobre es en las posibilidades que ofrece para crear galerías. Si bien se puede hacer una galería sin utilizar ninguna herramienta adicional, el resultado es demasiado básico.

El módulo de Galería de Divi

En ese sentido el módulo de galería de Divi nos da la posibilidad de crear una galería de imágenes muy profesional, pudiendo configurar el aspecto, tanto de las miniaturas como del texto que las acompaña. Además podemos elegir la forma de paginación y cantidad de fotos por página.

Al hacer clic sobre cualquiera da las miniaturas se abre la foto en una ventana modal que incluso permite pasa a la foto siguiente o retroceder sin volver a la galería.

El módulo Formulario de Contacto

Este módulo, como su nombre ya nos lo dice, nos permite insertar un formulario para recibir consultas directamente desde la página a nuestro email.

Divi contact form

Es muy útil para la sección contacto de tu web, aunque yo prefiero hacer los formularios de contacto en Divi con Contact Form 7, porque este plugin me ofrece mayores posibilidades de personalización.

El módulo para suscribirse por email

El módulo de correo electrónico sirve para que los que visitan tu página puedan suscribirse con su email a tu newsletter.

Suscripción Email Divi Optin

Este módulo se conecta con muchos servicios de gestión de email marketing (como Mailchimp) y va registrando los nuevos contactos directamente en tu lista.

El módulo de Blog de Divi

Este módulo es muy útil para quienes usan Divi para blog. El módulo de blog te permite insertar en una zona de la página las últimas publicaciones de tu blog, o de una categoría específica del mismo.

El módulo de Blog de Divi

Las entradas se pueden mostrar una debajo de la otra o bien en cajas ordenadas en tres columnas.

En el caso de que uses Divi para blog este módulo te va a ayudar a crear las páginas de categorías con un mejor diseño. Solo deberías crear una página e insertarle el módulo de blog de Divi eligiendo que muestre solo las entradas de la categoría respectiva.

De todas formas si tu idea es hacer un blog con Divi yo te recomiendo que lo hagas con la plantilla Extra (también de Elegant Themes) ya que es una plantilla para WordPress pensada para blogs y sitios de noticias que integra el constructor Divi.

Extra te permite diseñar las categorías directamente con el constructor Divi.

El módulo Contador de Número

Contador numerico DiviEl módulo de contador de número nos permite mostrar en la página un número que se va incrementando progresivamente hasta llegar al valor definido.

Es útil para mostrar gráficamente cualquier tipo de información numérica, por ejemplo: la cantidad de clientes o de proyectos. También permite mostrar porcentajes.

El módulo Contador Circular

Contador Circular DiviEl módulo de contador circular es similar al contador de número con la diferencia de que añade una línea circular alrededor del número que va creciendo de 0 a 360 grados según el valor definido.

Es útil para mostrar porcentajes de forma gráfica.

El módulo Contador de Barra

El contador de barra cumple una función similar a los dos anteriores con la diferencia de que gráficamente es una barra horizontal que se va incrementando hasta el valor definido.

Contador de Barra Divi

Si ubicamos varias barras una debajo de la otra podemos lograr un gráfico de barras tradicional que se forma al cargar la página.

El módulo de Mapa de Divi

Sirve para insertar un mapa de Google en tu página, por ejemplo en la sección de contacto. Para usarlo es necesario ingresar la API de Google en la pestaña de ajustes generales de Divi.

Insertar mapa en Divi

El módulo de Anuncio

El módulo de anuncio de Divi da la idea de que es un módulo para publicidad. Sin embargo se le puede dar un uso muy variado.

Modulo anuncio Divi theme

Este módulo nos permite definir una foto con un título, un párrafo de texto y un enlace. Luego podemos darle a ésto la aplicación que queramos. Por ejemplo podrías hacer un catálogo de productos.

Es cierto que ésto mismo lo podríamos hacer con los módulos de imagen y de texto por separado pero, con el módulo de anuncio tenemos todo integrado en un mismo bloque.

El módulo de Llamada a la Acción

El módulo de llamada a la acción es similar al anterior en el sentido de que agrupa elementos que podríamos hacer también con módulos independientes.

Módulo de Llamada a la Acción Divi

En este caso incluye un título con un párrafo de texto y un botón, con su correspondiente enlace.

El módulo de Audio

Similar al módulo de video nos permite insertar un reproductor de audio. La fuente del audio puede ser un archivo de la biblioteca de medios o una URL.

Insertar audio en plantilla Divi WordPress

El módulo de Barra Lateral de Divi

Literalmente nos permite insertar una barra lateral. Solo hay que ubicar el módulo y seleccionar una barra lateral de las que tengamos configuradas en WordPress, en Apariencia > Widgets.

Barra Lateral de Divi

El módulo de Búsqueda de Divi

Módulo que sencillamente inserta una caja del buscador interno de WordPress en el lugar que quieras de la página.

Insertar cuadro de búsqueda plantilla Divi

El módulo de Comentarios

Como su nombre lo dice este módulo inserta la zona de comentarios para la página actual. Es útil si, en lugar de activar los comentarios al final de la página, queremos integrarlos de otra manera con el diseño de la misma.

Hay que tener en cuenta que para que se active el formulario de comentarios es necesario activar los comentarios para la página.

El módulo Galería de Videos

El módulo control deslizante de videos de Divi funciona como una galería de videos. Te permite seleccionar varios videos, ya sea de la biblioteca de medio como de YouTube, para mostrarlos en forma de galería e ir pasando de uno a otro mediante un control deslizante.

Galería de videos Divi WordPress

Es útil cuando tenemos una secuencia de videos o bien varios videos sobre un mismo tema y queremos agruparlos para ordenarle las cosas al usuario.

El módulo de slider

El módulo deslizador de Divi consiste en un slider (diapositivas que van pasando una detrás otra). Cada diapositiva puede tener un título, un párrafo, un botón con enlace y una imagen o vídeo. Incluso se puede definir una imagen de fondo, o bien un color plano.

hacer slider con Divi

El módulo Post Slider

Post slider muestra un slider con las últimas entradas que tengas publicadas en el blog. Se puede elegir si mostrar todas las entradas o solo alguna categoría, entre otras opciones.

El módulo de Navegación

Añade los típicos enlaces que suelen aparecer al final de cada entrada del blog para pasar a la siguiente o regresar a la anterior. Es importante tener en cuenta que el módulo debe estar presente en todas las páginas que forman parte del conjunto.

El módulo Pestañas de Divi

Se trata de un módulo muy útil para páginas en las que necesitamos publicar mucha información de forma organizada.

Hacer Pestañas en WordPress Divi

Lo que hace es añadir una caja con pestañas. Dentro de cada pestaña podemos colocar un texto que se visualizará al hacer clic en la pestaña respectiva.

El módulo Separador

El separador puede ser una línea horizontal o un espacio vacío entre dos filas o dos módulos. Simplemente se define el estilo y la altura del separador y listo.

El módulo Portafolios de Divi

El módulo de portafolios lo que hace es mostrar un listado de los proyectos que tengamos publicados en Proyectos del menú de WordPress.

El módulo Portafolios Filtrable

Ídem al módulo anterior pero en este caso añade en la parte superior una pestaña para cada una de las categorías de proyectos.

Insertar botones de redes sociales

Módulo seguir en medios sociales nos deja agregar, de un forma muy sencilla, botones para acceder a los distintos perfiles en redes sociales.

Botones sociales de Divi

Hacer una Tabla de Precios con Divi

Este módulo te permite crear la típica tabla de precios donde cada producto o cada plan ocupa una columna de la tabla y te permite comparar características entre unos y otros.

Tabla precios Divi WordPress

En mi opinión personal no me gusta para nada la estética que se logra con este módulo. Creo que debería tener más opciones de personalización.

Lógicamente podemos seguir haciéndole todos los ajustes que queramos vía CSS para llegar al resultado que queremos pero, para que quede linda habría que hacer tanto trabajo de CSS que se pierde la lógica de utilizar un page-builder.

El módulo Temporizador

El temporizador te permite definir una fecha y hora para luego mostrar un reloj regresivo hacia ese momento. Es útil para preparar el lanzamiento de tu web, de un determinado producto o de un evento.

Temporizador Divi

El módulo Título de Publicación

Lo que hace este módulo es mostrar el título y los meta datos de la página actual. Como si fuera el encabezado de una entrada. Se puede elegir qué elementos de los meta datos mostrar en cada caso.

El módulo de Tienda

Este módulo de Divi funciona cuando está activo el plugin Woocommerce y permite mostrar en una zona de la página los productos que tengas publicados.

Este módulo se utiliza cuando hacemos una tienda online con Divi y Woocommerce.

El módulo Persona

Este módulo permite indicar una foto, título para el nombre, cargo que ocupa y un párrafo de texto. También se pueden definir los perfiles en redes sociales y en ese caso añade los iconos respectivos debajo del texto.

El módulo Iniciar sesión

El módulo de iniciar sesión añade una caja para acceder a WordPress. Además de los campos para ingresar usuario, contraseña y el botón, se puede añadir un título y un párrafo de texto.

Iniciar sesión con Divi

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.

Si la guía te pareció útil, juntos podemos ayudar a más gente compartiéndola en las redes sociales. Usa los botones de abajo ¡Gracias!