Guía completa de Divi para WordPress y su uso

Divi es un tema visual/constructor de páginas que se debe comprar en el sitio web de Elegant Themes ya que no está disponible en el repositorio oficial de WordPress. La instalación de Divi implica subir el archivo zip a través de Apariencia->Temas. Se activa usando la clave de activación. La licencia es válida para un número ilimitado de sitios web.

Divi ha estado evolucionando para la época actual. Puedes notar cuánto ha cambiado Divi con el registro de cambios de Divi, donde todo, desde la seguridad hasta el rendimiento, ha evolucionado.

Con aproximadamente dos millones de sitios web construidos usando Divi es evidente que Divi es una categoría relevante en el entorno de WordPress. Por lo tanto, si estás considerando construir tu sitio web usando Divi, este es el artículo para ti.

Cómo instalar Divi

Adquirir la licencia de Divi

Divi es un tema premium que no hallarás en el repositorio oficial de temas de WordPress. Elegant Themes, la empresa que lo desarrolla, lo distribuye a través de su página web: https://www.elegantthemes.com.

Antes de usarla es necesario comprar la licencia de Divi. De lo contrario no se podrá ni siquiera probar este tema ya que solo se puede descargar desde su sitio web.

Precio de Divi

Existen dos planes ofrecidos a distintos precios para Divi. Uno es el plan anual que cuesta 89 dólares y el otro es el plan de por vida que cuesta 249 dólares. Claramente si alguien quiere emprender algún proyecto importante usando Divi entonces obviamente el plan de por vida es mejor. La licencia de Divi se puede usar para trabajar en tantos sitios como uno quiera.

Después de realizar este pago obtendrás una licencia para usar los siguientes temas, plugins y plantillas.

• Divi: Tema y constructor visual.
• Extra: Variante de Divi optimizada para publicaciones digitales.
• Bloom: Plugin para conseguir suscripciones y leads.
• Monarch: Plugin para compartir en redes sociales.
• Plantillas para Divi: Toda una biblioteca muy completa.
• Soporte premium para Divi.

Una vez que obtengamos nuestra licencia podemos descargar Divi. Para evitar que un cliente utilice tu licencia de Divi una vez que termine el contrato, Divi ha dado la opción de crear claves API desde tu página de cliente.

Puedes generar una nueva clave de API para todos los proyectos que hagas usando Divi y puedes eliminar esas claves que ya no necesites más.

Instalar Divi en nuestro WordPress

Para instalar Divi en nuestro sitio web tenemos que entrar al panel de WordPress y luego desde ahí ir a «Apariencia» y «Temas». Necesitamos hacer clic en «Agregar Nuevo».

Cuando hacemos clic en la vista «Agregar Temas» hacemos clic en el botón «Subir Tema». Tendremos que buscar el archivo en nuestra computadora el cual hemos descargado del sitio web de Elegant Themes.

IMPORTANTE: Debemos subir el archivo zip. No lo descomprimamos. WordPress lo descomprimirá y una vez que esté terminado podremos activar Divi.

Cómo activar Divi

La activación de Divi permitirá las actualizaciones automáticas del tema. La necesidad de las actualizaciones es esencial no solo para mejorar el rendimiento sino también para asegurarse de que su sitio web sea seguro con Divi.

La activación de Divi se logra yendo a «Divi», «Opciones del Tema». Luego buscarás la pestaña «Actualizaciones». Desde ahí llenarás el formulario usando el nombre de usuario con el cual te registraste para la licencia y la clave API que te ha sido proporcionada.

Empecemos explorando la sección de configuración de Divi antes de empezar a utilizarlo.

Menú de Divi

Existen tantas posibilidades que Divi nos brinda en nuestro WordPress de escritorio. Exploremos todas las posibilidades una por una.

Opciones del tema

El menú de configuración de la cámara es enorme, hay tantas opciones aquí; afortunadamente, están organizadas por categorías.

General

Este es el lugar donde hay más opciones y la mayor variedad. Esta pestaña se subdivide además en otras dos pestañas, a saber: General y Rendimiento.

En «General», entre otras cosas, podremos poner el logo del sitio web, el esquema de color que está presente en ese momento en el constructor visual Divi, la posición del barra lateral, habilitar los íconos de las redes sociales, el formato de la fecha, «botón volver al principio»… etc.

También podríamos, a través de las opciones del tema, agregar nuestro propio CSS.

En la pestaña «Rendimiento» hay más opciones que ayudan a acelerar el tiempo de carga de tu sitio web creado con el tema Divi. Aquí por ejemplo puedes activar/desactivar el uso de CSS dinámico, mejorar el tiempo de carga de las fuentes de Google y desactivar los emojis y así sucesivamente. Mi recomendación sería no cambiar nada aquí sino dejarlo todo por defecto.

Navegación

Hay tres pestañas debajo de las Opciones de Navegación en Divi– Páginas, Categorías y Ajustes Generales.

Bajo la sección «Páginas» podemos determinar si queremos dejar fuera de la barra de navegación algunas páginas. Una muy buena práctica si queremos mejorar la usabilidad de la navegación del sitio. También podemos habilitar o deshabilitar si el menú debe ser desplegable o tener un enlace de regreso a la página principal en todas las páginas.

Es posible determinar en qué campo deben ordenarse los elementos del menú de navegación y si en orden ascendente o descendente. Por último, pero no menos importante, podemos restringir la profundidad de anidamiento de los niveles del menú de navegación de nuestro sitio de WordPress.

En la pestaña «Categorías» podemos configurar varios parámetros de la barra de navegación basados en el filtro de categorías. Incluso podemos excluir algunas categorías de páginas del menú de navegación y esto es mucho mejor y más rápido que eliminar páginas individuales como lo hicimos en el último párrafo. Las otras opciones de esta pestaña son exactamente las mismas que las de la pestaña «Páginas».

Finalmente la pestaña «Configuración General» solo ofrece una opción para «deshabilitar los menús desplegables de mayor nivel». Esto significa que en algunos sitios web la estructura de categorías podría crearse en formato de árbol, lo que significa que el nivel superior y las categorías menos detalladas podrían usarse solamente para «contenar» las demás categorías; su presencia en el menú es así solamente con fines de organización. En este caso deberías usar esta opción.

Constructor

Aquí tenemos las opciones de configuración para el constructor Divi. Por defecto, el constructor está activado para Publicaciones, Páginas y Proyectos.

Estos ajustes avanzados incluyen cómo quieres manejar el CSS, te permite navegar hacia atrás por el constructor e incluso te permite activar el editor anterior antes del nuevo editor de bloques para WordPress y el viejo constructor visual para Divi.

Diseño

Podemos establecer aquí las opciones de diseño que nos proporciona Divi para publicaciones, páginas y opciones generales.

En los post podemos determinar qué información se va a mostrar (autor, fecha de publicación, categorías y número de comentarios) mientras leemos el post. También podemos habilitar o deshabilitar los comentarios y elegir si queremos incluir una miniatura relacionada con nuestro post.

En las páginas podemos elegir habilitar/deshabilitar los comentarios y mostrar la miniatura de cada página.

La primera pestaña es la de «Configuración General» donde configuramos la información del post que se va a mostrar fuera del mismo. También podemos elegir si queremos mostrar o no la miniatura del post.

Anuncios

Si utilizas AdSense estos seguramente te facilitarán tu trabajo. Puedes usar estos para mostrar la banner de anuncios en tus publicaciones, la URL de la imagen de la banner, la URL de destino e incluir el código de AdSense.

SEO

Las opciones de SEO para el tema Divi son bastante amplias. Dedica un poco de tiempo a mirar todas las opciones y habilita lo que puedas necesitar.

Integración

Aquí se puede agregar código personalizado a varias partes de la página web.

Actualizaciones

Como ya hemos visto antes, este es el punto donde ingresarás tu nombre de usuario junto con la clave API correspondiente para validar tu instalación de Divi.

Theme builder

Dentro del Constructor de temas Divi podemos crear un diseño de plantilla que se utilizará automáticamente para nuestro sitio web. La plantilla contendrá el encabezado, el cuerpo y el pie de página de la página del sitio web.

Es ahí donde podemos elegir en qué opciones se puede usar este modelo en particular y en cuáles no se puede usar. Podemos hacerlo desde el nivel de páginas, publicaciones, archivos (autor, categorías, etiquetas), proyectos y muchos más.

Tienes la libertad de establecer tantas plantillas como quieras y usarlas para cualquier página de tu sitio web para aplicar algunas estrategias avanzadas. Por ejemplo puedes crear una plantilla genérica para tu sitio y una particular para una página de aterrizaje. Lo cierto es que a menudo una página de aterrizaje no tiene el mismo encabezado de navegación que el resto de las páginas. Esta tarea se puede hacer fácilmente con Divi.

Además, puedes guardar tus personalizaciones en la Biblioteca de Divi o en la Nube de Divi y podrás acceder a ellas en otro sitio usando tus credenciales de Divi.

Personalizador de temas

La siguiente captura de pantalla muestra el acceso a la herramienta para personalizaciones de temas de WordPress. Desde aquí podemos especificar las propiedades comunes del tema de la siguiente manera:

• Características generales: Identidad del sitio, ajustes de formato, tipografía y fondo que se aplicarán a todas las páginas.
• Cabecera y navegación: Formato de cabecera, los menús de navegación, ajustes varios de la cabecera.
• Pie: Todas las posibilidades de configuración posibles en el pie de página, es decir, número de columnas, aspecto y tipografía de los widgets, iconos sociales y texto y enlaces.
• Botones: Configuración de cuestiones gráficas y tipográficas de los botones del sitio web.
• Blog: Parámetros tipográficos que afectan a la cabecera de la entrada y los metadatos.
• Estilo para dispositivos móviles: Parámetros como el tamaño del texto del cuerpo, de la cabecera, separación entre líneas y altura de las secciones. También podremos definir los colores del menú para dispositivos móviles.
• Combinaciones de colores: Acceso rápido a unas paletas de color predefinidas del tema.
• Menús: Para crear y añadir menús en diferentes zonas de la página.
• Widgets: Permite añadir widgets de WordPress a las diferentes secciones del tema que lo permiten. Para Divi tendremos la barra lateral y cuatro áreas en el pie de página.
• Ajustes de la página de inicio: Definimos si la página de inicio de nuestro sitio va a ser una página estática o una página que recoja las últimas entradas que se han creado.
• CSS adicional: Puedes añadir CSS adicional. Esta forma clásica no es la mejor opción, pero para testear y hacer pruebas es rápido y útil.

Editor de rol

Como ya sabes, en WordPress puedes asignar diferentes roles a diferentes usuarios que tengan acceso a nuestro panel de WordPress. Es aconsejable hacerlo desde el punto de vista de la seguridad. Si tu cliente no conoce WordPress, ¿por qué querría acceder al panel como administrador cuando no debería? Usando Divi puedes controlar los permisos para cada rol.

Dado que existe un alto nivel de control deberías considerar tu tiempo y permitir que cada rol tenga acceso a las funciones que se requieren para ellos.

Esto implicaría que los usuarios que tengan perfiles menos restringidos no podrán utilizar la mayoría de las funciones de Divi. Por lo tanto, ellos no podrán alterar el diseño o subir un plantilla por accidente, pero aun así pueden modificar el contenido, por ejemplo.

Biblioteca de Divi

Esta área te permite administrar tus diseños de Divi; puedes controlarlos, ordenarlos por categorías y etiquetas e incluso exportarlos e importarlos en formato JSON, lo cual es bastante fácil.

Support Center

Esta parte no es solamente un enlace a tutoriales y al soporte de Divi. Está dividida en varias secciones. Genera un informe sobre el estado actual de tu sistema y da recomendaciones si un parámetro no corresponde al óptimo según el equipo de Divi.

Podemos configurar el acceso remoto en la sección de Soporte de Elegant Themes para que su personal pueda acceder a nuestra instalación de WordPress en caso de que tengan que hacer algún tipo de pruebas ahí. ¡IMPORTANTE! Debemos habilitar la opción única mencionada anteriormente solo cuando el equipo de soporte lo solicite. También podemos encontrar enlaces al chat de soporte y al servicio de soporte premium llamado Divi VIP (a partir de $8 al mes).

En la siguiente sección se le proporcionará información sobre cómo usar Divi y acceder a videos de entrenamiento relacionados con el mismo.

En el área de «Modo Seguro» puedes entrar al Modo Seguro en Divi y desactivar todos los plugins, temas hijos y códigos personalizados de tu sitio web. Esto te ayudará a identificar qué está causando que tu sitio web no funcione correctamente.

Finalmente, en la sección «Registros» podrás ver los errores detectados por WordPress los cuales son importantes para conocer el problema que podría estar presente en tu instalación.

Cómo usar Divi en WordPress

Después de instalar el plugin, activarlo y configurarlo vamos a utilizar el Divi Builder. La primera vez que accedas al editor para cualquier publicación o página, Divi te dará la opción de usar el Divi Builder o el Editor de Bloques.

Si decides usar Divi ya que será la primera vez que lo hagas te ofrecerá un recorrido para que conozcas cómo funciona Divi en WordPress.

Él quiere decir que diseñamos desde cero, o que tomamos ayuda de una plantilla pre-diseñada de Divi, o que replicamos una página existente. Si no estás al tanto de Divi como un constructor te recomendaría que empieces con un diseño existente y lo vayas ajustando.

Diseños prefrabricados en Divi

Existen muchas plantillas pre-diseñadas disponibles en Divi nosotros. Estas plantillas están clasificadas en varias categorías, lo que facilita su búsqueda. Con solo unos pocos clics puedes elegir una plantilla y empezar a personalizarla de acuerdo a tus necesidades.

Esta opción, que utiliza plantillas prediseñadas, será adecuada para alguien como yo que se encuentra luchando con el problema de una hoja en blanco. Elige una plantilla, ve cómo está diseñada, juega con lo que te guste y solo guarda los elementos del diseño con los que te sientas cómodo.

Un paquete viene con su propia colección de páginas pre-hechas. Los siguientes diseños serán incluidos en el paquete «Página de aterrizaje para Desarrolladores de Aplicaciones»:

• Proyecto
• Portfolio
• Contacto
• Servicio
• Inicio
• Servicios
• Sobre mí
• Landing

Puedes echarle un vistazo a la Biblioteca de Temas Divi para WordPress. En mi opinión sería lo mejor para ti empezar con estas plantillas y aprender a través de la experiencia cómo crear estos diseños tan bonitos mediante secciones, filas y módulos.

El constructor Divi

El principio básico de Divi como constructor es muy sencillo; consiste en una interfaz de arrastrar y soltar donde se añaden secciones, filas y luego (en esas filas) módulos adicionales. Todo esto teniendo en cuenta que lo que ves como visitante del sitio es exactamente lo que estás editando porque lo que ves en el constructor es Lo que ves es lo que obtienes-“Lo que ves es lo que obtienes”.

Estos módulos se pueden usar para agregar contenido (texto, video, etc.) o estructura (títulos de entrada, separadores, etc.). Divi incluye muchos módulos desde los más simples hasta los más avanzados como pestañas, contadores, formularios, tablas de precios, etc. Aquí está la documentación de los módulos: https://www.elegantthemes.com/documentation/divi/modules/

Una vez que elegimos un módulo aparece una ventana emergente en la cual podemos definir el contenido, el diseño y muchas otras características del módulo. Esta ventana emergente se puede mover a otro lugar igual que cualquier otra ventana de nuestro sistema operativo. También se puede maximizar o anclar en el lado izquierdo del navegador.

Dentro de esta ventana tenemos una cantidad infinita de opciones que se pueden usar para crear nuevas propiedades para nuestro módulo. Esto puede parecer un poco complejo al principio pero la idea completa de Divi es darte todas estas posibilidades de una manera fácil.

Opciones de módulos

• Contenido: Aquí podremos editar lo que verá el usuario: texto, enlaces, colores, imágenes, etc. El contenido que se puede añadir dependerá del módulo en particular.
• Diseño: Podrás determinar de forma sencilla y visual características del CSS que se aplica al módulo como la tipografía, alineación, definir bordes, separaciones y márgenes, sombras, colores e incluso animaciones. Las posibilidades son muy numerosas.
• Avanzado: Aquí podrás definir IDs y clases CSS, añadir atributos, CSS personalizado, transiciones y efectos de desplazamiento, entre otras opciones. Esta pestaña es la que te permite ir mucho más allá al desarrollar tu web con Divi.

Cómo orientarnos en el maquetador Divi

Es hora ahora de hacer un recorrido por el Maquetador de Divi para que puedas aprender todas las cosas esenciales para que puedas seguirlo.

Códigos de color en el maquetador Divi

El diseñador del tema Divi utiliza los códigos de color abajo en los controles de los elementos:

• Azul: Denota que hemos seleccionado una sección.
• Naranja: Sección de especialidad.
• Violeta: Secciones de ancho completo.
• Verde: Representa las filas.
• Gris oscuro: Reservado para los módulos.

De esta manera puedes encontrar tus pies mientras colaboras con el diseñador del diseño.

Vista de capas

En caso de que quieras ver todos los elementos del diseño de una estructura de árbol tendrás que usar la vista de capas de Divi.

Esto se puede lograr haciendo clic en los tres puntos que aparecen a la derecha del menú «Módulos, Fila y Secciones» en el Editor de Diseño.

Por supuesto que uno necesita elegir «Ir a Capa». Esto va a traer el ventana emergente de Capas que contiene todos los elementos de la página. Se pueden colapsar o expandir todos los elementos anidados, seleccionarlos, duplicarlos, eliminarlos, etc. También existe una opción de filtrar por tipo de elemento; eso es realmente genial, ojalá tuviéramos algo así en Gutenberg (el editor de bloques nativo de WordPress).

Divi Marketplace

Si lo que ofrece Divi aún no es suficiente para ti, no te desanimes, puedes obtener más a través del Mercado de Divi, donde hay muchos temas, plugins y plantillas para hacer a Divi más versátil.

No todo está disponible para la compra, también existen muchos bienes gratuitos hechos por varios productores.

Repositorio de WordPress

Recuerda que dentro del repositorio de WordPress mismo existen realmente plugins hechos para Divi. Esto significa que las formas de crear un sitio increíble se vuelven infinitas!

Accesibilidad en Divi

Porque valoro la accesibilidad es necesario que lo tenga en cuenta en esta revisión de Divi que estamos llevando a cabo. En este escenario tenemos que ver a Divi desde dos perspectivas.

Puede que no sea el enfoque más accesible ir con un editor de contenido, pero uno tiene que darse cuenta que es difícil desarrollar un editor de arrastrar y soltar accesible como Divi porque es demasiado complejo. Se necesitaría probar su accesibilidad usando un teclado y lectores de pantalla.

La diferencia radica en el hecho de que los sitios web creados con Divi son accesibles. En el Informe del Millón de WebAIM 2023, Divi ocupa el cuarto lugar cuando se trata de CMS y constructores de sitios web. Pero cuando se trata del ecosistema de WordPress, ocupa el primer lugar. Aunque estos informes se basan en procesos de evaluación automatizados, aún dicen mucho acerca del código creado por Divi y sus usuarios.

Cosas no tan buenas de Divi

Divi es un gran programa de software, pero también tiene algunas desventajas. Veamos cuáles son esas desventajas según mi opinión.

El temido lock-in de Divi

Para poder hacer tantas cosas con la misma herramienta Divi termina sufriendo del famoso “efectode bloqueo”. Esto implica que para que tu sitio web funcione como se pretende siempre debes tener algún complemento o tema específico, en este caso Divi, funcionando en tu sitio web. Si deshabilitas a Divi es muy probable que todo el diseño de tu sitio web se desmorone y veas algo de código.

Por lo tanto vemos un fragmento del Tema Divi.

Si cambiamos de tema, veremos esto:

«Dios mío, ¿cómo es posible este suceso?«, como dice el meme. ¿Qué ha pasado aquí?, ¿qué es todo ese código que aparece después de Case Studies? Eso es un shortcode. Los shortcodes son atajos para añadir contenido a las páginas y entradas hechas con WordPress. Siempre se escriben entre corchetes [, ] y dan instrucciones específicas para que WordPress o un plugin, o en nuestro caso un tema, sepa que debe realizar una acción en ese punto específico.

En caso de que el tema al que está destinado a interpretar este shortcode falle, el shortcode se vuelve visible para los visitantes. Además de no ser muy agradable, esto puede resultar bastante molesto para los visitantes de tu sitio web, ya que podrían pensar que hay algo malo con tu sitio web, ya que podrían pensar que ha sidopirateado.

Ahora el Constructor de Divi va a llenar la página con códigoscortos que nos van a ayudar a crear todos los maravillosos elementos que he discutido anteriormente en este artículo. Ahora, teniendo en cuenta el efecto de bloqueo, el uso de estos códigos cortos nos va a atar a Divi y nos va a dificultar cambiar de tema para evitar este efecto.

¿Deberías preocuparte? Depende de cuánto disfrutes experimentando con cosas ya que los acortadores de código en Divi podrían ser más problemas que un dolor de cabeza para ti. Sin embargo, si eres más «estable», entonces no hay mucho que preocuparse ya que la licencia de por vida es simplemente una invitación para seguir usando Divi.

Traducciones de Divi

Divi utiliza sus propios recursos para traducir su contenido a otros idiomas también, como el español. El idioma que se utiliza para Divi se basa en el idioma en el que tenemos instalado WordPress.

Parece fácil y conveniente a priori, pero me he encontrado con algunos problemas al traducir, lo cual me ha hecho usar la versión en inglés.

Por ejemplo, en la elección del diseño del módulo «Transformar» existe la opción de la pestaña «Transformar Traducir». Pero ¿qué significa este término «Traducir»? En realidad lo que nos ayuda a hacer es desplazar el centro del módulo en la página web. La frase en inglés es «Transformar Traducir» y en teoría la traducción sería perfecta; sin embargo uno de los significados de «traducir» incluye el desplazamiento o la transferencia.

Otro ejemplo es en la sección llamada «Editor de Roles». La siguiente imagen muestra que el texto parece un poco extraño («…los tipos de acciones que pueden tomar los usuarios…»). En el menú de opciones existen dos posibilidades: habilitado y movilidad. Se cree que el estado sería «deshabilitado», pero eso no debería ser así.

No es un problema tan serio pero puede hacerte preguntarte qué pasará más de una vez. Puede ser a la vez frustrante o confuso en diferentes momentos.

Servicio de atención premium dentro de un servicio ya premium

¿Por qué es posible obtener acceso a un servicio de soporte más premium si ya tienes acceso al servicio de soporte premium a través de tu licencia de Divi? Tiene sentido. Sin embargo, podría ser mejor referirse a él como «acceso al soporte» en lugar de «soporte premium» en la información de precios de Divi, ya que aún tienes la oportunidad de obtener más soporte premium.

¿Te animas a usar Divi en tu WordPress?

Divi es un tema muy ambicioso y versátil para la creación de páginas web. Puede ser que a veces la variedad de opciones que ofrece nos parezca abrumadora, pero por otro lado tenemos la posibilidad de crear proyectos verdaderamente sobresalientes usando Divi.

¡Claro! Tendrás que dominar el arte de sacar el mejor provecho del software pero teniendo en cuenta lo barato que es esa licencia de por vida, valdrá la pena. No tengas miedo al bloqueo pero si conócelo y asegúrate de usar Divi solamente para diseñar la página no los post. El proyecto es lo suficientemente maduro como para no tener miedo al futuro.

Preguntas Frecuentes