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.php y styles.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:

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! ­čÖé