En este post de Marketeros de Hoy, me gustaría hablarte de una plantilla de WordPress que descubrí hace un tiempo, que lo está petando y lo seguirá petando durante este año.
Se trata de Divi, de Elegant Themes, que es un tema multipropósito, muy flexible y súper fácil de utilizar.
En este artículo te mostramos:
¿Qué ventajas tiene la plantilla Divi?
La principal ventaja que tiene es su sencillez. La primera vez que lo instalé en uno de mis proyectos, antes de ponerme a «juguetear» con él, busqué en Google guías y tutoriales de esta pantilla de WordPress, para poder aprender bien todas sus funcionalidades.
Cuando me puse a ello, no me hizo falta ninguna guía ya que es facilísimo.
La segunda súper ventaja es que puedes personalizar toooodo. Puedes editar cualquier cosa de la web, tamaños, tipos de letra, colores, tamaño del header, del sidebar…
Puedes cambiar todo esto a toda la web en general o a alguna cosa en particular. Puedes aplicar en cada página o entrada diferentes plantillas para poder trabajar sobre ellas, o crear la tuya propia y guardarla para futuras aplicaciones.
Otra funcionalidad que a mí me encantó es el editor visual. Al igual que otros temas vienen con Visual Composer, Divi trae incorporado Divi Builder.
Es muy parecido a Visual Composer en cuanto a funcionamiento, con filas, columnas, etc., pero mucho más sencillo y visual. Puedes trabajar tanto en el back-end como en el front-end.
A mí me encanta editar en el front-end, ya que puedes ver en vivo y en directo todos los cambios que vas haciendo, nada de irle dando a Vista Previa cada vez que realizas un cambio. ¡Es fantástico!
Otro aspecto genial que a mí personalmente me encanta es que tiene un iconito ? en cada uno de los aspectos a editar para poder volver a su estado predeterminado.
Si personalizas un aspecto y luego te das cuenta de que estaba mejor por defecto, puedes volver sin problema. Así que si eres una «cabra loca» como yo, que te encanta editar cada cosa a ver qué pasa, Divi es ideal para ti.
Por supuesto tiene diseño responsive y se adapta perfectamente a cualquier dispositivo móvil o tablet. Además está disponible en 32 idiomas diferentes.
Tiene muchísimos elementos diferentes en el Divi Builder para poder colocar en tu web todo lo que necesites.
Tiene total integración con Google Analytics, Google Adwords y Adsense, Google Webmaster Tools y por supuesto, todo lo necesario para que puedas optimizar al máximo el posicionamiento SEO de tu web.
Así, en algunos de estos aspectos no será necesario que instales otros plugins adicionales.
Pero, ¿qué desventajas tiene esta plantilla?
Prácticamente ninguna. La única pega que yo le pongo sería más bien a Elegant Themes, no a Divi. A diferencia de otras plataformas en las que pagas por ese tema, para Divi tienes que comprar una suscripción anual en Elegant Themes.
Hay diferentes suscripciones que te incluyen más o menos cosas.
A la larga es más caro que adquirir un tema únicamente, pero tienes bastantes más oportunidades y beneficios, ya que tienes servicio técnico, diferentes plugins que pueden serte de utilidad, otros temas no tan geniales como Divi, pero muy buenos, etc.
¿Cómo me descargo e instalo el tema Divi?
Básicamente como cualquier otro tema de pago. Una vez te suscribas a Elegant Themes, podrás descargar el archivo .zip para poderlo subir a tu página web, ya esté ésta en un servidor en internet o en un servidor local.
Este archivo lo tendrás que subir en Apariencia > Temas > Añadir nuevo > Subir nuevo. Una vez subido, solo tendrás que activarlo y listo.
¿Cómo está estructurado el tema Divi?
Podemos personalizar nuestra web desde 3 sitios diferentes. ¿Qué quiero decir con esto?
Podemos editar cada página individualmente con el editor visual, como he comentado antes, tanto en el front-end como en el back-end.
Y evidentemente, podemos modificarlo todo y ponerlo a nuestro gusto.
También podemos editar la web en general o algunos aspectos en particular en Apariencia > Personalizar. A diferencia de otros temas que no usan esta zona de personalizar para nada, en Divi se personaliza y modifica todo lo relacionado con la plantilla en general y con cada elemento del editor visual en particular ahí.
Además, como sabrás, en Personalizar, todo lo que modificas puedes ver cómo queda también en directo, lo cual es genial 😉
Por último, otra zona de edición de Divi la encontramos en el menú Divi que se crea una vez instalas y activas el tema. Ahí puedes modificar otras opciones de la web, todo el tema del SEO, Analytics, Anuncios, etc.
También tienes la opción de habilitar o deshabilitar diferentes opciones según el rol de WordPress. Y finalmente, tienes una biblioteca de Divi en donde puedes administrar, importar o exportar tus diferentes diseños de Divi Builder.
¿Cómo comenzamos a crear una página en Divi?
Al añadir una nueva página, deberás hacer clic en el botón “Usar el constructor Divi” o “Use Divi Builder”.
Ya sea que elijas trabajar en el front end o en el back end, a continuación nos encontraremos con tres opciones:
- Podemos elegir comenzar a construir por nuestra cuenta,
- elegir un diseño predefinido,
- o trabajar sobre el diseño de una de nuestras páginas.
1️⃣ La primera de las opciones es la más “difícil” o, mejor dicho, la más creativa, ya que en este caso trabajas sobre una página totalmente en blanco.
2️⃣ En la segunda opción nos encontramos con una biblioteca bastante amplia con diseños predefinidos. Además, estos diseños son de sitios web completos, donde dentro de cada uno podemos encontrar diseños específicos para las páginas de servicios, contacto, sobre nosotros, etc.
Los diseños están bastante bien, y por supuesto, puedes editarlos posteriormente a tu antojo, cambiando cualquier cosa. Estos diseños vienen muy bien para comenzar, cuando te encuentras con proyectos donde no sabes muy bien cómo “meterle mano”.
Una vez elegido el diseño, únicamente tendrás que hacer clic en “Use this layout” y podrás comenzar a trabajar sobre él.
3️⃣ La tercera de las opciones es muy útil cuando ya tienes alguna página del sitio web hecha y quieres clonar o duplicar el diseño, o hacer uno similar.
Yo suelo utilizar esta opción cuando hago las páginas de servicios, ya que generalmente, éstas tienen una estructura similar.
¿Cómo editamos una página?
Bien, una vez elegido el diseño (ya sea trabajar sobre la página en blanco, sobre un diseño predefinido de Divi o sobre una página hecha previamente por nosotros), la forma de trabajar será la misma.
Principalmente, en Divi, la estructura de una página web se compone de Secciones, Filas y Módulos.
Las secciones pueden ser Regular, Especialidad o Ancho completo. Más o menos puedes intuir las diferencias entre cada una.
- La Regular es una sección normal, donde añadiremos filas y dentro de éstas, módulos.
- La sección Ancho completo es una sección full width en donde directamente añadimos ciertos módulos específicos de anchura completa, sin necesidad de añadir una fila.
- Finalmente, la Especialidad es una sección (recientemente añadida), en donde puedes hacer combinaciones muy chulas, ya que puedes mezclar distintos tipos de filas y columnas y hacer diseños más complejos.
Las filas podrán tener distintas distribuciones y variaciones de columnas. En la siguiente imagen puedes ver las opciones:
En cuanto a los módulos, hay muchos tipos, y cada cual con sus ventajas e inconvenientes. A continuación te pongo una imagen con todos ellos. Merece la pena que vayas uno a uno viendo qué puedes hacer con cada uno de ellos.
Cuando crees cualquiera de estas partes de la página web, siempre vas a poder guardar este diseño por si quieres volver a utilizarlo en un futuro en otra parte de la página web.
Así pues, en todo momento, tanto al insertar una sección, una fila o un módulo, podrás “Añadir desde biblioteca”. Con esta opción, puedes acceder a estos diseños que tú has creado y guardado previamente. Esta opción es muy útil, por ejemplo, cuando estás creando un formulario de contacto, y quieres que éste sea igual en la página de Inicio y en la página de Contacto.
También, cada módulo, sección y fila, puede ser duplicado dentro de una misma página, haciendo clic en el icono de clonar.
No obstante, ojito con duplicar, que ya sabes que a Google no le gusta nada eso de que tengas muchas cosas iguales en tu web. Yo me refiero a que utilices estas opciones más bien para duplicar el diseño, y luego editas el texto sobre este diseño.
¿Cómo optimizamos a nuestro gusto cada una de las secciones, filas y módulos?
Una vez instales este tema y te pasees un poquito por todas sus características descubrirás que tiene miles y miles de opciones que puedes editar.
No voy a contarte tooodo, porque sino este post sería eterno y perderíamos el hilo. Pero sí te contaré ciertas cosillas que para mí son muy importantes:
- Puedes establecer un diseño diferente en móviles, tablets y ordenador para prácticamente todo.
- En defecto de lo anterior, puedes hacer un diseño para móviles y tablets (ocultando que ésta sección se muestre en ordenadores) y otro para ordenadores (ocultándolo en tablets y móviles)
- Puedes poner imágenes, colores, degradados… de fondo, establecer que tengan cierta transparencia u opacidad…
- Puedes establecer, dentro de una misma fila, diseños diferentes para cada columna.
- Por supuesto puedes modificar tamaños, colores, alineaciones, tipos de letra, etc…
- Puedes cambiar la alineación, tamaño y separación de cada elemento, así como añadirle borde, sombra, animaciones…
- Puedes añadir separadores entre fila y fila, o entre sección y sección.
- Cada tipo de módulo, sección o fila tiene sus propias características editables, y si quieres modificar algo y no puedes hacerlo, puedes añadir código css adicional.
Y por supuesto, además de todo esto que yo te estoy contando, Divi, a la hora de editar cualquier cosa, te explica en qué consiste y qué estás editando. Aunque yo siempre he sido fan del “prueba y error”, nunca viene mal que te avisen de qué estás editando.
Por si todas estas opciones te parecen pocas, el mejor complemento de Divi es el plugin Divi Booster. Con él podrás editar ciertos aspectos que aún no son editables en la plantilla original.
¿Aún no te he convencido para que compres Divi?
Si quieres puedes comprar Divi desde la página web oficial de Elegant Themes.
Cuéntame qué te ha parecido lo que te he contado. Si conoces otros temas que te gusten más, cuéntame qué diferencias ves.
Si ya conoces Divi, dime si estás tan fascinado como yo con este tema o si le ves algún inconveniente. Y si tienes cualquier pregunta, duda, sugerencia… ¡te veo en los comentarios!
Diseñadora web y experta en Marketing Digital y Social Media. Amante de la música, la informática y las nuevas tecnologías. Actualmente haciéndome un huequito en el mundo online con mi blog leonorcanuelo.com
