Antes de comenzar con la guía en castellano sobre Divi permíteme evaluar tu situación:

  1. ¿Quieres diseñar tu blog por ti mismo pero no tienes ni idea que tema WordPress elegir?
  2. ¿Estás cansado de lidiar con plantillas difíciles de manejar, que requieren mucho tiempo y además no te permiten realizar gran parte de lo que andabas buscando?
  3. ¿Te desesperas ante la excesiva cantidad de información que encuentras en internet?

Si estás en alguno de estos casos no te preocupes puesto que yo también pasé por esa dura etapa.

La buena noticia es que afortunadamente existe grandes productos si se sabemos dónde elegir.

Para facilitarte esta tarea hoy te traigo una guía muy completa sobre una plantilla para WordPress que me ha dado muchas satisfacciones: Divi, el tema framework de Elegant Themes.

Hoy quiero compartir mis conocimientos contigo, hacer un repaso de sus características principales así como de sus carencias.

Antes de comenzar con la guía quiero recordarte que si quieres aprender más sobre otras herramientas y recursos interesantes relacionados con el diseño te recomiendo:

Los 6 errores en el diseño web que arruinarán tu proyecto digital y todas las claves para evitarlos

Guía en castellano sobre Divi

Divi es un tema desarrollado por la empresa norteamericana Elegant Themes que te va a permitir diseñar una gran variedad de sitios web partiendo de un mismo producto.

Tanto Divi y como su constructor Divi Builder te ofrecen:

  • Diseñar rápidamente: su uso es sencillo y gracias a acciones como duplicar, importar y cargar elementos tu proceso de diseño se va a ver acelerado.
  • Código: apenas necesitas implementar código. Si sabes de lenguajes tipo CSS pues mejor. Personalizarás tus webs a tope dándoles un aspecto mucho más profesional y diferente.
  • Resultados: los diseños obtenidos son minimalistas, elegantes y profesionales.

¿Qué puede diseñar con Divi?

Divi es un tema multipropósito lo que significa que con él podrás crear webs de temáticas muy distintas como por ejemplo: restaurantes, blogs, portfolios de fotografía, pequeños negocios e incluso tiendas online gracias a su integración con el plugin WooCommerce.

Como ejemplo te muestro a continuación una serie de sitios webs basados en Divi y Divi Builder:

Timeline Missions

Time Line Missions

timelinemissions.com

Dan Carr Photography

Dan Car Photography

dancarrphotography.com

 

The Global Church Project

The Global Church Project

theglobalchurchproject.com

 

Findability Sciences

Findability Sciences

sitio web: findabilitysciences.com

 

¿Qué va a ofrecerte Divi?

Ponerme a relatar todas y cada una de las características de Divi y Divi Builder nos llevaría un curso completo y no es esa mi intención.

Por eso en este artículo te mostraré las que para mi son las principales características que hacen de Divi un tema muy sencillo de usar, potente y elegante.

De todas maneras si quieres ampliar conocimientos te aconsejo que te pases por el blog de mi amigo Omar de la Fuente en el cual publiqué una guía sobre Divi Builder que te servirá como complemento. 😉

Veamos algunas de sus características:

Instalación de Divi

La instalación de Divi es super sencilla y te llevará sólo un par de segundos:

  1. Descárgalo a través de tu cuenta de Elegant Themes.
  2. Accede a tu WordPress y selecciona «Apariencia > Tema» y presiona «Añadir uno nuevo».
  3. Selecciona Divi, instálalo y actívalo. Ya tienes tu tema Divi listo para ser usado. 😉

Creación tema hijo

Una de las posibilidades que te ofrece Divi como framework es la de crear un tema hijo para personalizar tu sitio web de la manera que quieras sin afectar negativamente el funcionamiento de tu sitio web.

El proceso de instalación es igual de sencillo:

  1. En el respositorio de WordPress busca el plugin llamado Child Theme Configurator, instálalo y actívalo.
  2. Ve a «Herramientas > Child Theme» y presiona el botón «Analyze».
  3. Haz clic en «Create New Child Theme» y tu tema hijo será instalado.
  4. Para activarlo nos dirigimos «Apariencia > Tema», seleccionamos el tema hijo y lo activamos. Hecho. 😉

Tras la instalación tendrás dos archivos:  functions.phpstyles.css. 

Son esos dos archivos los que te permitirán personalizar tu sitio web tanto como quieras.

Con el primero podrás añadir funciones en PHP y con el segundo estilos en CSS para cambiar la apariencia de tu web.

En el siguiente vídeo te muestro paso a paso cómo instalar tu tema Divi y tu tema hijo:

Sinergia Divi + Divi Builder

Muchas veces se habla de Divi sin mencionar a parte a Divi Builder y es que estamos hablando dos productos totalmente diferentes:

  • Divi es un tema framework.
  • Divi Builder es un plugin para diseñar el contenido de tu web.

Con Divi editarás y personalizarás los aspectos generales de tu web como el logotipo, tu cabecera, pié de página, el tipo de fuente así como su color y tamaño.

Mientras que con Divi Builder nos centraremos en forjar y diseñar el grueso de tu web con sus módulos y opciones de diseño.

La principal ventaja es que ambos productos han sido diseñados para que se complementen a la perfección de forma que se potencien mútuamente logrando resultados realmente soprendentes.

Además ambos vienen paquetizados en los planes de contratación, es decir, disfrutarás de ellos sin tener que gastar un céntimo más. 😉

Configuración de la cabecera

Uno de los aspectos que más me gusta de Divi es la facilidad para configurar la cabecera mediante el personalizador de temas pudiendo así cambiar la ubicación del logotipo, la disposición de los menús y sus estilos.

Con Divi podrás modificar sus elementos de la siguiente forma:

  • Por defecto: tu logo a la izquierda y el menú a la derecha.
  • Centrado o centrado en línea: si quieres tu logotipo centrado ésta es sin duda tu opción.
  • Deslizar: tu menú se muestra oculto en el lado derecho de la pantalla.
  • Pantalla completa: tu menú se mostrará en pantalla completa haciendo clic en el icono .
Estilos Cabecera

Guía en castellano sobre Divi: Estilos de la cabecera

Además el tema te deja aplicar estilos específicos sobre el menú principal y el secundario que conforman la cabecera:

 

Menu Primario y Secundario

Guía en castellano sobre Divi: Menu Primario y secundario

Por último Divi te da la opción de mostrar tus iconos sociales así como un botón de búsqueda:

Elementos Cabecera

Guía en castellano sobre Divi: Elementos de cabecera

Accede rápido a WordPress

Una opción sumamente interesante es el acceso rápido que el personalizador de temas te ofrece a otras partes del administrador de WordPress como por ejemplo:

  • Menús.
  • Widgets.
  • Portada estática.
Acceso rápido WordPress

Guía en castellano sobre Divi: Acceso rápido a WordPress

Luego, si necesitarás añadir un nuevo menú, modificar o sustituir tus widgets o incluso establecer tu página de inicio y la de tu blog, lo podrás hacer todo a través de esta herramienta sin tener que acceder al panel de administración de WordPress ahorrándote tiempo durante el proceso.

Modos de edición de Divi Builder

El diseño del contenido de tu web se hará con Divi Builder a través de dos modos de edición: el Back-end o el Front-end.

El Back-end es la parte ubicada en el panel de WordPress de tu página. Es la vía de diseño que Elegant Themes ofrece desde el principio y el que resultados más estables ha dado hasta el momento:

Back-end

Guía en castellano sobre Divi: Back-end

Por otro lado tenemos el Front-end, un modo que te permite diseñar tus páginas en la parte visual, directamente sobre ellas:

Front-end

Guía en castellano sobre Divi: Front-end

Dado que ambos tienen sus pros y sus contras Elegant Themes ha desarrollado recientemente el Wireframe, un híbrido entre el back-end y el front-end para que te beneficies de las ventajas de estos modos de edición ?:

WireFrame View

Guía en castellano sobre Divi: Wireframe

Disposición de layouts

Como verás los módulos son los bloques básicos del diseño, cada uno con una funcionalidad específica que dotará a tu web con la potencia que necesita.

Y te preguntarás: ¿pero cómo los inserto en mi web?

Pues de forma muy simple: a través de los distintos diseños o layouts que Divi Builder te ofrece.

Con el plugin contarás con hasta 20 disposiciones de diferentes a través de sus secciones estándar, de anchura completa y especial:

Layouts

Guía en castellano sobre Divi: Layouts

Para ello sólo necesitas crear una sección, elegir el tipo de columna que necesitas e instalar allí los módulos.

Esta amplia gama de layouts es esencial ya que con ellas diseñarás páginas con disposiciones de todo tipo.

¿Necesitas construir tu web a buen precio? Aprovecha estas ofertas ahora:

Atención: estas ofertas son válidas ahora y pueden cambiar en unos pocos días.

Integración de 46 módulos listos para su instalación

Como vimos los módulos serán elementos claves en tu web para aportarle a ésta un sin fin de funcionalidades diferentes.

Divi Builder cuenta en la actualidad 46 módulos con un montón de particularidades distintas que vienen la verdad muy bien para evitar tener que estar instalando plugins todo el tiempo:

Modulos

Guía en castellano sobre Divi: Módulos

Los módulos que existen en la actualidad son:

  • Acordeón.
  • Anuncio.
  • Audio.
  • Barra lateral.
  • Blog.
  • Botón
  • Búsqueda.
  • Comentarios.
  • Conmutador.
  • Contador de número
  • Contadores circulares.
  • Contadores de barra.
  • Correo electrónico Opt-in
  • Código.
  • Formulario de contacto
  • Galeria
  • Imagen.
  • Iniciar sesión
  • Llamada a la acción
  • Mapa.
  • Navegación por los mensajes.
  • Persona.
  • Slider.
  • Slider para vídeos.
  • Código de anchura completa.
  • Imagen de anchura completa.
  • Mapa de anchura completa.
  • Menú de anchura completa.
  • Portafolios de anchura completa
  • Slider de anchura completa.
  • Slider de mensaje con anchura completa.
  • Título de anchura completa.
  • Título de publicación de anchura completa.

Configuraciones y ajustes de todo tipo

El proceso de diseño con Divi Builder no termina con la selección de tus layouts y la instalación de tus módulos.

Todos los elementos básicos de Divi Builder (secciones, filas y columnas) se configuran por medio de tres pestañas principales:

Contenido

Es el lugar donde incluirás el contenido principal: una imagen, video, texto, etc…

Ajustes Contenido

Guía en castellano sobre Divi: Ajustes de contenido

Diseño

Aquí realizarás todas las configuraciones relativas a la apariencia de ese elemento como por ejemplo: el tipo de alineación, el tamaño del texto, color, tipo de fuente, relleno, margen, etc…

Ajustes Diseño

Guía en castellano sobre Divi: Ajustes de diseño

Avanzado

Si sabes de CSS esta puede ser una de tus secciones favoritas ya que podrás incluir clases e identificadores así como todo tipo de reglas CSS:

Ajustes Avanzado

Guía en castellano sobre Divi: Ajustes avanzados

Guarda tus diseños en la Biblioteca de Divi

Imagina que diseñas tu web pero hay partes que te gustan tanto que te encantaría poder aplicarlas en otras páginas o incluso en otro sitio web distinto.

Pues esto es totalmente posible gracias a la Biblioteca de Divi:

Biblioteca Divi

Guía en castellano sobre Divi: Biblioteca Divi

Este elemento es fundamental y una de las razones por las que tanto Divi como Divi Builder me convencen como un tema top para diseñar cualquier sitio web.

Con la biblioteca no sólo vas a poder guardar el diseño de una página completa sino prácticamente todo lo que diseñes con Divi Builder:

  • Diseños de páginas completas.
  • Secciones.
  • Filas.
  • Columnas.
  • Módulos

El proceso es muy simple:

  1. Diseña un elemento.
  2. Guárdalo en la biblioteca.
  3. Instálalo.

Lo bueno es que la instalación no sólo se puede realizar en tu sitio web sino en cualquier otro que tenga Divi Builder gracias al mecanismo de exportación/importación de archivos que te mostraré más adelante.

Elementos globales

Otra opción muy interesante son los elementos globales.

Los elementos globales son aquellos que, una vez creados e implementados en tu web, permanecen conectados de tal forma que un cambio en la configuración de uno se reflejará inmediatamente en los demás:

Elemento Global

Guía en castellano sobre Divi: Elemento global

De esta manera podrás implementar elementos muy interesantes como un pié de página más completo que el que Divi te trae por defecto, un call to action, un área con texto, un formulario de contacto para captar suscriptores, etc…

Plantillas prediseñadas

Otra manera de ahorrar mucho tiempo con el diseño es con las plantillas prediseñadas que trae Divi Builder en su biblioteca:

Plantillas prediseñadas

Guía en castellano sobre Divi: Plantillas prediseñadas

Encontrarás una gran variedad de plantillas clasificadas por temáticas para que selecciones la que más te convenga.

Además, tanto Elegant Themes como otras empresas ofrecen plantillas gratuitas a tu libre disposición.

Exportación / importación de diseños y configuraciones

Otra herramienta super útil es la exportar e importar tanto diseños como configuraciones.

Por un lado, tras almacenar un diseño en la biblioteca de Divi podrás exportarlo para luego importarlo en otra web con Divi Builder:

Exportar Importar Diseños

Guía en castellano sobre Divi: Exportar e importar diseños

De igual forma tendrás la posibilidad de hacer lo mismo con todos los ajustes y configuraciones realizados en los siguientes elementos

  • Opciones del tema.
  • Personalizador de temas.
  • Personalizador de módulos.
Exportar Importar Configuraciones

Guía en castellano sobre Divi: Exportar e importar configuraciones

Como ves si te dedicas al diseño web de forma profesional la cantidad de tiempo que te ahorrarás será enorme. ?

Corrige errores fácilmente

Divi Builder trae consigo botones de deshacer/rehacer para que siempre puedas rectificar cualquier error que hayas cometido:

Deshacer Rehacer

Guía en castellano sobre Divi: Deshacer/rehacer

Así mismo tienes la opción historial para que puedas volver atrás seleccionando un estado anterior:

Historial

Guía en castellano sobre Divi: Historial

Además, recientemente añadieron una serie de comandos en forma de shorcuts para que a través del teclado de tu ordenador puedas copiar, cortar, pegar, deshacer, rehacer y un montón de acciones super interesantes que te ahorrarán mucho tiempo.

Búsqueda

Una funcionalidad nueva muy interesante es la del buscador de opciones que encontrarás en todos los elementos de diseño de Divi Builder.

Sólo tienes que introducir la palabra clave de las opciones que te interesen configurar y se mostrarán todas ellas.

De esta forma irás directo al grano evitando perder bastante tiempo. 😉

A/B Testing con Divi Leads

Divi Builder trae incorporado un nuevo sistema de testeo que te permitirá analizar el potencial de tus landing pages para saber cuál de ellas genera más conversiones.

Sólo tienes que crear varios tipos de diseños y configurar el sistema.

Divi Leads se encargará de mostrar tus versiones a usuarios distintos para recopilar posteriormente toda la información.

Mega guía en castellano sobre Divi Divi Leads

Guía en castellano sobre Divi: Divi Leads

Una vez hecho esto tendrás a tu disposición un completo informe estadístico donde toda la información recogida será visualizada en forma de gráficos y otros elementos permitiéndote comprender de un rápido vistazo cuáles de tus diseños están funcionando mejor.

Diseño Responsive

Cada día el uso de dispositivos móviles tipo tablet y smartphones está creciendo exponencialmente. Por eso el diseño responsive, es decir, la capacidad que tu sitio web tiene para adaptarse a los distintos dispositivos móviles, es fundamental.

En este aspecto Elegant Themes no sólo se han asegurado de implementar un diseño fluido sino que también te ofrece distintas herramientas para que tú mismo intervengas en el proceso:

Mega guía en castellano sobre Divi diseño responsive

Guía en castellano sobre Divi: Diseño responsive

Podrás configurar estilos como el margen, padding, tamaño de fuente y la visualización o no de cada uno de los elementos dependiendo del dispositivo que selecciones.

Seguridad con Divi

La seguridad de tu sitio web es algo que debes tener muy en cuenta desde el principio.

Por esa razón desarrollé mi artículo Cómo aumentar la seguridad de tu sitio web sin complicaciones con el objetivo de que tengas las bases para implementar un sistema de seguridad sólido que blinde tu sitio web.

Elegant Themes se toma también muy en serio este aspecto.

Prueba de ello son las auditorias a las que se han visto sometidos continuamente por Sucuri una empresa internacional especializada en seguridad web:

Mega guía en castellano sobre Divi certificado de seguridad con Divi

Guía en castellano sobre Divi: Certificado de seguridad con Divi

Actualizaciones

Esto mola y mucho. ?

Te cuento: Elegant Themes publica mejoras frecuentes a través de sus actualizaciones eliminando así posibles errores de código que afecten tanto la experiencia de usuario como la seguridad.

Pero aparte de esto están incorporando nuevas funcionalidades que te permitirán diseñar de forma mucho más eficiente.

Algunos ejemplos recientes son:

  • Wireframe view.
  • Barra de búsqueda en los módulo.
  • Nuevas opciones de background.
  • Mejora en el sistema de documentación.

Mejoras que no te van a costar ni un sólo céntimo ya que son totalmente gratuitas. ?

Precio

Elegant Themes cuenta en la actualidad con 2 planes de contratación:

Mega guía en castellano sobre Divi precios Elegant Themes

Guía en castellano sobre Divi: Precios Elegant Themes

Yearly Access

Por 89$ al año vas a disponer de los siguientes productos:

  • Acceso a todos los temas: casi 90 temas a tu disposición.
  • Acceso a todos los plugins: podrás usar los plugins Divi Builder, Monarch y Bloom desde el primer momento.
  • Actualizaciones de todos tus temas: frecuentes mejoras en el código.
  • Soporte premium: tus preguntas serán respondidas a cualquier hora del día.
  • Uso ilimitado de sus productos: podrás instalarlos en tantos sitios web como quieras.
  • Garantía de 30 días de devolución: en caso de no estar satisfecho te devolverán el dinero sin ningún problema.

Lifetime Access

Si eres diseñador web y/o quieres ahorrar dinero a medio y largo plazo por un precio de 240$ vas a disfrutar de todos los beneficios del plan anterior de por vida.

Nunca tendrás que renovar más y podrás seguir sacándole todo el partido a tus productos a la vez que disfrutas de los nuevos que vayan saliendo.

Cómo crear una home page con Divi en unos minutos

Para ir terminando te muestro un vídeo muy práctico y didáctico donde te enseño paso a paso cómo diseñar por ti mismo una home page con la ayuda de Divi y Div Builder.

¡Vamos a ello!

¿Es todo es tan bonito como lo pintan?

No, ni mucho menos.

Ni Divi ni Divi Builder son productos perfectos y el que diga lo contrario está mintiendo. Lo siento pero es así.

Hay varias cosas que considero que debes tener en cuenta:

  • Aprendizaje: dominar las herramientas que te ofrece Divi y Divi Builder requiere dedicación. No esperes dominarlo todo en un par de días. Te va a llevar algo de tiempo adquirir un conocimiento profundo de ellas.
  • Inglés: tanto la documentación como los videos que Elegant Themes te ofrece se encuentran en inglés. Si bien todos sus tutoriales están explicados a la perfección no deja de ser un impedimento para aquellos que no dominen bien este idioma.
  • Consumo de recursos: tenerlo todo a tu disposición sin tener que tocar nada de código tiene un precio que hay que pagar. El tema ocupa más tamaño otros productos como Génesis. Es fundamental adquirir un buen hosting que te permita mantener tus velocidades de carga al nivel que deben estar.
  • Configuraciones: algunas opciones de configuración, como por ejemplo las del SEO, son demasiado extensas. Es mejor a veces mejor delegar esta tarea a plugins de calidad tipo Yoast SEO.
  • Efecto lock-in: si un día decides prescindir de Divi Builder y usar otro plugin esto se convertirá en una molestia. Esto se debe a que al desinstalarlo, en lugar de dejarte intacta toda la información, se mostrará una serie de shortcodes en su lugar. Si borras los shortcodes se borrará la información por lo que tendrás que diseñar esas páginas previamente. Afortunadamente existen soluciones y además tengo constancia que la empresa está trabajando en este asunto.

¿Preparado para lanzar ya tu web con Divi o necesitas más información?

Seguramente toda la información que te acabo de mostrar te ha sabido poco. Te entiendo perfectamente ya que, como todo en la vida, para dominar una herramienta necesitarás horas de práctica e investigación contínua.

Pero no te preocupes: es cuestión de perseverancia y formación constante.

No obstante, si eres de los que quieres atajar el camino y crear una web profesional, elegante y con alto poder de conversión tienes ahora a tu disposición mi curso Crea tu web con WordPress y Divi.

Con este curso te llevas:

  1. 5 módulos de formación constante donde aprenderás todo lo necesario: desde cómo contratar tu hosting y dominio hasta el proceso de diseño de todas y cada una de las páginas fundamentales que tu web debe tener.
  2. Acceso de por vida a todo el contenido.
  3. Actualizaciones ilimitadas.
  4. Soporte contínuo través del foro de alumnos.
  5. Te regalo Divi con actualizaciones ilimitadas.
  6. Y no olvidemos que Divi es un 2 x 1 ya que con su instalación puedes hacer uso también de su constructor visual Divi Builder.

La idea es simple: ayudarte a lanzar tu proyecto digital lo antes posible. ¿En cuanto tiempo? ¡Eso dependerá de ti!

Pero puedo asegurarte que tendrás todo el material necesario junto con mi apoyo para que no te falte de nada.

Cientos de alumnos ya se han beneficiado de este curso y siguen enriqueciéndose compartiendo experiencias en el foro del curso.

¿Mi recomendación? ¡Prueba el curso y luego me cuentas! 😉 ¡Tienes 15 días de garantía!

Crea tu web con WordPress y Divi

Curso WordPress Divi


Y aquí termina la guía en castellano sobre Divi. ¿Qué te ha parecido? ¿Tienes más dudas? ¡Te espero en los comentarios! 🙂