Seguro que si te dedicas al diseño web has oído hablar de Divi varias veces. Este tema cada vez es más conocido en la comunidad de usuarios de WordPress.
Algunos usuarios veteranos no tienen muy buena opinión de este tema, quizá porque hace bastante tiempo que se formaron esta opinión y no han revisado la herramienta. Si es tu caso, te animo a revisar la lista de ventajas que ofrece Divi WordPress actualmente.
Se han ido lanzando nuevas versiones del tema, cada una de las cuales incluye diferentes mejoras. La última es Divi 4.0, ¡una auténtica pasada!
A continuación revisaremos la lista de posibilidades que ofrece. ¿Sabías que existen en la actualidad más de 600.000 páginas web creadas con Divi? ¡Por algo será!
12 razones para utilizar Divi WordPress
– Puedes probar Divi de forma completamente gratuita.
– Es muy fácil de manejar. Al principio quizá te líes un poco porque tiene muchísimos ajustes y posibilidades. Pero es súper intuitiva y enseguida aprenderás a utilizarla
– Tendrás más posibilidades de maquetación que con ningún otro tema. Puedes configurar absolutamente todos los elementos, incluyendo header y footer. También podrás añadir animaciones a las imágenes, lo que dará a tu diseño una apariencia más viva y más actual.
– Ahorrarás tiempo al crear tu página web. Y, en consecuencia, ahorrarás también dinero.
– Al adquirir una licencia anual adquieres todos los diseños y paquetes de layouts de Elegant Themes (los desarrolladores de Divi). Esto es súper útil tanto si te dedicas al diseño web, ya que no tendrás que estar peleando para aprender un nuevo entorno en cada proyecto. Aquí puedes echar un vistazo a la biblioteca de diseños. Además podrás utilizarlo en todos los sitios web que quieras, ¡sin límites!
– Y también adquieres los plugins Bloom y Monarch. Bloom es para crear formularios de suscripción, y Monarch para facilitar la compartición de tus contenidos en redes sociales.
– Se trabaja “arrastrando y soltando” en un editor WYSIWYG: “what you see is what you get”. Significa que las ediciones son en tiempo real y en modo previsualización. Según vas editando vas viendo como queda.
– Es completamente responsive, es decir, está optimizado para que se vea perfectamente en cualquier dispositivo. Esto es algo imprescindible hoy en día. Además es súper sencillo adaptar el contenido a los diferentes dispositivos cuando es necesario. Más adelante explicaré cómo.
– Tiene un excelente soporte por chat y email que funciona 24 horas al día, 7 días a la semana, todos los días del año.
– La posibilidad de añadir tus diseños a la biblioteca te facilitará enormemente el trabajo a la hora de crear tu página web. Puedes añadir el diseño de una sección o de la página entera, y volver a utilizarlo cuando lo necesites.
– Puedes beneficiarte de todas las posibilidades de Divi sin cambiar tu theme. Puedes mantener tu plantilla y añadir solamente el plugin Divi Builder. Después, cada vez que vayas a crear una nueva página o a modificarla, podrás seleccionar si quieres utilizar o no el editor de Divi.
– El historial de ediciones permite deshacer fácilmente los cambios cuando lo necesites.
Así que si vas crear tu página web y vas a escoger un tema, ten esta opción muy en cuenta: por el precio de una plantilla obtienes todas las características y ventajas que acabamos de ver.
Además, no te olvides de contratar un hosting de calidad para alojar tu web y de configurar correctamente tu cuenta de Analytics para medir el tráfico de tu web.
Tutorial Divi WordPress
1. Dando los primeros pasos con Divi
Las instrucciones a partir de ahora varían un poco, según estés empezando de cero o tengas ya una página web WordPress.
Si estás empezando de cero con tu web, ten en cuenta que este tutorial se refiere solamente al uso de Divi como tema o herramienta. Así que para poder seguir el tutorial, revisa primero estos pasos:
- Define claramente la estructura que tendrá tu sitio web: crea un esquema con el menú principal y los menús secundarios. Crea también un documento donde se recojan todos los textos del sitio web y elige las imágenes que vas a utilizar (incluyendo el logo). Guárdalo todo junto en una carpeta.
- Sigue este tutorial para crear tu web con WordPress, con todos los pasos empezando por el alojamiento web. En el tutorial también encuentras instrucciones para descargar e instalar el tema Divi.
¿Ya tienes una web en WordPress? Crea tu cuenta en Elegant Themes, compra la licencia y descarga el tema. Después solo tienes que subirlo como cualquier tema WordPress y activarlo.
Una vez que tienes Divi instalado, cada vez que vayas a crear una nueva página tendrás la opción de utilizar el editor por defecto o el “Divi Builder”.
OJO: En el caso de que vayas a modificar una página existente, selecciona la opción “Reemplazar contenido”. Te permitirá aplicar los diseños de Divi y todas sus posibilidades, manteniendo el contenido actual.
Más adelante veremos en detalle cómo crear una página aplicando un diseño predefinido de Divi. ¡Verás qué fácil es!
2. Configuraciones básicas
Cuando hayas instalado Divi, aparecerá un nuevo ítem llamado “Divi” en el menú lateral. Haz clic sobre esa opción y sobre “Opciones del tema” para hacer las configuraciones elementales.
Como ves en la imagen, aparecerán una serie de pestañas: General, navegación, constructor… Las configuraciones más básicas están en la pestaña “General”. Ahí podrás cambiar el logo, establecer la paleta de colores y configurar los iconos de redes sociales.
Añade tu logo
Para establecer el logo, sube primero el archivo con la imagen a la biblioteca de medios y copia el enlace de la imagen que aparece en “Detalles de adjunto”.
A continuación ve a Divi > Opciones del tema y pega el enlace de la imagen. Haz clic en “Guardar Cambios” ¡y listo!
Establece la paleta de colores
Atento a esta función porque te ahorrará mucho trabajo. Por si aún no lo sabes, es clave que tengas definida la paleta de colores de tu marca, ya que es uno de los soportes clave de tu identidad corporativa. A partir de los colores de tu logo, por ejemplo, puedes crear paletas muy atractivas con Paletton o Color Adobe.
Y tan importante como tener estos colores definidos es conocer los códigos hexadecimales de los colores. Puedes instalar una extensión en tu navegador para averiguar el código hexadecimal de cualquier color en pantalla (yo utilizo Color Pick Eyedropper).
Con Divi puedes mantener la identidad visual en toda la web de forma muy sencilla, solo tienes que configurar la paleta de colores. Para ello, haz clic sobre el primer círculo de color en la sección “Paleta predeterminada de selección de colores” y sustituye el código hexadecimal por el tuyo.
Haz lo mismo con el siguiente círculo de color y así hasta que tengas todos tus colores configurados. Te llevará pocos minutos, pero después, cuando estés creando las páginas, cada vez que vayas a cambiar el color de un elemento, tendrás a mano tu paleta de colores.
Configura los botones de Redes Sociales
Las redes sociales disponibles por defecto son Facebook, Twitter e Instagram. Para configurarlos, activa primero las opciones “Mostrar icono de xxx” y después solo tienes que pegar la URL de cada uno de los perfiles en los espacios correspondientes. Fíjate en la imagen:
Existen plugins para añadir otras redes sociales, aunque son opciones de pago.
3. Cómo crear una página a partir de un diseño predeterminado de la biblioteca de Divi
Vamos a crear una página nueva para tu sitio web. Para ello haz clic en “Páginas > Añadir nueva” en el menú lateral. Selecciona “Usar Divi builder” y haz clic en “Elegir diseño”:
Se mostrarán los 144 paquetes de diseños de la biblioteca de Divi. Dentro de cada paquete existen diferentes “layouts” o disposiciones, para que elijas el más adecuado al tipo de página que vas a crear: landing page, blog, página “About us”…
Para hacer la selección más sencilla, puedes filtrar a la izquierda las categorías. Así encontrarás diseños con la estética más adecuada para tu caso:
Selecciona uno de los paquetes para ver los diferentes layouts. Puedes previsualizarlos haciendo click sobre “Live Demo”.
Una vez que te decidas, haz clic sobre la “Use this layout” en la disposición elegida para que se cargue en la página. No te agobies mucho si ninguno encaja exactamente con lo que quieres: son súper fáciles de modificar y completamente configurables.
Sección, fila y columna
Observa que al pasar el ratón sobre las diferentes partes de la página, aparecen recuadros enmarcando los diferentes contenedores. Los contenedores albergan módulos (de texto, de imagen, de vídeo…)
Es importante que dediques unos momentos a examinar los diferentes tipos de contenedores y su jerarquía. Así, encontrarás secciones que incluyen filas que pueden incluir una o más columnas. Observa la imagen:
Al principio puede desorientar un poco que aparezcan y desaparezcan los recuadros, pero con la práctica verás lo fácil que resulta abrir la configuración de los diferentes elementos.
Las posibles configuraciones son infinitas. Además, varían según el contenedor o módulo con el que estemos trabajando. La buena noticia es que está todo traducido al castellano y es un entorno súper intuitivo.
Simplemente tienes que tocar la rueda dentada para que se abra la ventana de ajustes del módulo sobre el que tengas colocado el puntero.
Introducción a los ajustes de contenedores y módulos
Por ejemplo, veamos las configuraciones principales de un módulo de texto: El cuadro de ajustes tiene tres pestañas: Contenido, diseño y avanzado.
- En Contenido añades el texto que quieres poner. Como ves, el editor es como el de toda la vida. En este apartado hay un espacio para añadir la URL si quieres enlazar el módulo con otra página, y también la opción de configurar el fondo.
- En Diseño tienes mil configuraciones posibles: Tamaño, tipo y color de fuente, separación del módulo, el espacio entre letras, la altura de línea, la sombra de la caja…En este apartado hay que destacar la opción de configurar diferentes tamaños de cada elemento según el dispositivo en que se muestren. Al pasar el ratón sobre el ajuste de Tamaño de texto, aparece el icono del móvil. Cuando haces clic sobre él, se activa la triple configuración que ves en la imagen: Escritorio, tableta, teléfono. Verifica siempre tu diseño en todos los dispositivos, y haz ajustes si observas que algún texto aparece cortado en el móvil.
- La pestaña “Avanzado” da paso a otras configuraciones como el CSS personalizado o las transiciones.
Es imposible aprender Divi leyendo, ¡necesitas investigar por tu cuenta! Te animo a que lo hagas sin miedo, recuerda lo que comentaba al principio: Divi permite en cualquier momento deshacer uno o más pasos retrocediendo en el historial.
¡Es muy fácil! Pasa el ratón por la parte inferior de la pantalla para que aparezca la botonera y haz clic sobre el icono del reloj.
Hasta aquí mi revisión de Divi WordPress, donde he intentado mostrar algunas de las cosas que se pueden hacer con este tema, las que me parecen más importantes.
Espero que el post haya servido para despertar tu curiosidad, y el tutorial para hacer más fáciles tus inicios. ¡Y también para que sepas que me encanta este tema! Cuéntame en comentarios si tienes dudas con el tutorial, ¡intentaré ayudarte!
