Divi: Tutorial de la Plantilla de WordPress

Actualizado el día 17 de mayo de 2023 por Santos Muñoz Tebar

Este tutorial ha sido preparado para que puedas aprovechar al máximo de todas las bondades de Divi, una poderosa plantilla de WordPress que podrás emplearla en la gestión de tu Website.

Aproximadamente una década atrás existía una gran limitante para cualquiera que deseara obtener una página web adecuada a sus necesidades y deseos. Si no se tenía conocimientos en programación PHP, HTML o CSS, las posibilidades se resumían a depender de un programador que gestionara nuestro portal con el gasto administrativo consecuente.

Todo esto ha quedado en el pasado con la llegada de plataformas que nos hacen la vida más fácil, como es el caso de WordPress. Una persona con mínimos conocimientos en creación de páginas Web puede apoyarse de herramientas como Divi y gestionar de forma cómoda y sencilla su propio Portal.

Divi una de las mejores plantillas de WordPress

Cada vez son más los que se inclinan a utilizar Divi como tema o plantilla de WordPress para gestionar sus portales, y este hecho no es una casualidad. Esto sucede por la siguiente razón: Divi es la plantilla más fácil e intuitiva que un novato pueda utilizar sin la necesidad de saber de ningún tipo de lenguaje de programación.

Esto no quiere decir que solo sea usada por inexpertos. Programadores experimentados y profesionales hacen uso constante de Divi por su versatilidad. Esta alternativa ofrecida por la compañía Elegant Themes Inc ha sido una maravilla para aquellos profesionales (chef, estilistas, abogados, etc) que necesitan darse a conocer por medio del mundo del Internet, pero no disponen del tiempo para aprender de programación.

Es cierto que en WordPress existen una gran cantidad de plantillas completamente gratuitas, pero suelen ser poco personalizables. Divi es muy versátil a la hora de adecuarla a tu gusto y lo mejor de todo es que es muy fácil de hacer, lo que hace que valga la pena adquirirla. Un plus extra es que al obtener la plantilla Divi, también podrás contar con muchos más temas y plugins disponibles.

¿Por qué usar Divi de WordPress?

Divi es una plantilla general, es decir, aplicable a cualquier tema y estilo. Su resultado es de un aspecto muy profesional y su popularidad es impresionante. Seguidamente detallaré razones de peso para utilizar Divi en WordPress

Calidad Profesional

Esta plantilla es sumamente compatible con plugins que agilizan el trabajo y otorgan una presentación amena. Además, se aprovecha la velocidad al momento de recibir un tráfico de vistas considerable.

Personalización ilimitada

A diferencia de los temas gratuitos que suelen ser limitados y algunos con una presentación un tanto cutre, Divi es ultra-personalizable. Podrás adecuar a tu antojo elementos como: logotipo, tipografía de los títulos, el menú o el contenido. Dispone de una nutrida paleta de colores para aplicarlo al entorno o la implementación de fondos personalizados.

Asistencia y soporte

Por ser un trabajo recompensado por la adquisición monetaria de los usuarios, estarás siempre asistido por parte del equipo de programadores en las mejoras que se vayan integrando con el tiempo. Además, siempre tendrás a la mano la documentación necesaria en distintos formatos para que puedas sacarle el máximo provecho.

Seguridad

El equipo de programación de Divi se esfuerza por mantener los escudos de defensa activos y reforzados, en contra de los ciberataques que puedan afectar el trabajo de los que han depositado su confianza en la plataforma.

Relación calidad vs precio

Es cierto que para obtener Divi será necesario realizar un importe. Sin embargo, este de ningún modo es excesivo en comparación con todo lo que ofrece en su paquete. Por otro lado, es una inversión a futuro, debido a que al realizar un rediseño, lo podrás hacer mediante esta misma plantilla.

Cómo Instalar Divi en WordPress

Una vez analizado todas las ventajas que puede ofrecer la plantilla Divi, lo más lógico es que desees instalarlo y comenzar a aprovecharte de cada una de sus bondades. Te enseño como hacerlo.

Luego de haber comprado la plantilla Divi, deberás instalarlo siguiendo estos 5 sencillos pasos:

1. Entra en Elegant Themes desde tu usuario.
2. En descargas elige Divi y pulsa el botón “Download”. Se descargará la plantilla en formato comprimido, por lo que será necesario descomprimir.
3. Desde WordPress debe ubicarte en Apariencia, luego vas a Tema y seleccionas “Añadir uno nuevo”.
4. Pulsa el botón “Subir Tema” y navega en el explorador de tu PC para ubicar la carpeta que has descomprimido. Seleccionala y finalmente pulsa en “Instalar”
5. Una vez que esté correctamente instalado, deberás activarlo para que aplique los efectos.

Luego de completar todo el proceso de instalación, deberás proceder a configurarlo para que puedas utilizar sus opciones básicas.

Configuración básica de Divi en WordPress

Ahora me centraré en explicar la configuración del primer nivel junto a cada elemento que la compone, y luego veremos un paso a paso de como crear una Website con Divi.

Opciones del tema

Esta es la configuración más básica y elemental para crear un portal en Divi. Por medio de este nivel podrás adaptar tu logotipo, establecer un tema y mantenerlo actualizado, configurar el menú de navegación, etc.

Si te ubicas en el panel lateral izquierdo, podrás hallar el icono Divi. Si posicionas el cursor sobre ese icono, se desplegará todas las opciones disponibles donde deberás seleccionar “Opciones del tema”. Desde aquí, podrás adaptar cada aspecto de tu blog por medio de una serie de opciones dispuestas en pestañas.

Ahora, paso a describir de forma breve cada una de las pestañas de la función “Opciones del tema”

General

Desde esta pestaña podrás asignar tu logotipo personalizado, el icono de página, activar o no la barra de navegación para que se mantenga fija o que esté siempre presente. También puedes añadir enlaces de tus redes sociales y activarlas por iconos que puedes disponer en cualquier lugar que deses, colocar la API de Google para que funcione la geolocalización y establecer un botón “UP” para volver al primer tramo con un solo toque.

Navegation

Desde este apartado puedes gestionar todo lo que tenga referencia a la navegación del portal. Puedes eliminar links indeseables, activar o no menús desplegables y asignar una cantidad fija de ellos.

Builder

Este apartado permite que la totalidad del CSS sea compilado en un solo bloque estático, lo que sin duda mejora enormemente el desempeño de tu portal. Mi recomendación es dejar las opciones por defecto tal cuál como están, debido a que ya está configurado para que puedas obtener la mejor optimización del Website.

Layout

Desde esta pestaña puedes gestionar todo lo que tiene que ver con las categorías, los comentarios, fecha y autor. Puedes decidir desactivar o activar cada una de ellas, para que sean visibles en el blog.

Ads

En caso de que desees monetizar tu portal por medio de publicidad, puedes usar este apartado para incluir banners con todos los elementos que la componen.

SEO

Esta es una interesante opción, la cual te permite gestionar estrategias SEO en el título o en secciones definidas tanto en la página principal como en otras entradas particulares. Un plug-in popular y muy recomendado es Yoast SEO, que te permitirá sacarle el mayor partido al posicionamiento estratégico de tu web.

Integration

Como su mismo nombre lo indica, en esta pestaña podrás integrar cualquier código, como lo son las etiquetas <head>, <body> de un documento HTML.

Si eres programador, te será muy útil este apartado, donde podrás cambiar elementos de la estructura de un documento HTML usando librerías jQuery. Por otro lado, también podrás integrar códigos de Google Analytics para tus respectivos seguimientos o cualquier otra herramienta de marketing.

Updates

La última pestaña, pero no menos importante tiene que ver con las actualizaciones. Debes ingresar los datos requeridos en este aparado y así poder disfrutar de todas las actualizaciones futuras, lo que sin duda te mantendrá al día con todas las innovaciones, mejoras y nuevas aplicaciones.

Crear un portal usando Divi en WordPress

Una vez que te has familiarizado con las funciones de Divi y has realizado las configuraciones básicas que ya te he explicado, lo ideal sería aprender a crear un sitio Web mediante la plantilla o tema Divi.

Teniendo frente a ti el módulo de WordPress, pulsa la opción “Añadir nueva” y deberás seleccionar la opción “usar el constructor de Divi”. Si no te sale esta opción, te recomiendo repasar el subtema “Cómo Instalar Divi en WordPress” que encontrarás más arriba en este mismo Post.

Ahora, te encontrarás con 3 opciones de las cuales deberás decidir: Construir de cero, Elegir diseño predefinido o Clonar página existente.

Construir de cero

Si eliges esta opción, iniciarás el proyecto con una página en blanco donde deberás definir cada aspecto al detalle de tu portal.

Aunque eh comentado anteriormente que Divi es sumamente sencillo de usar, te recomiendo dejar esta opción para cuando estés más diestro en la gestión de la plantilla. Además, deseo explicarte como crear un portal en pocos minutos para que la puedas presentar ante los internautas.

Los expertos en Divi se aprovechan muy bien de esta vía, debido a la libertad de personalizar completamente su portal, lo que requiere destreza y experiencia.

Elegir un diseño predefinido

En este tutorial me decanto por utilizar esta vía siendo la opción más idónea para los novatos en Divi, donde sin complicaciones podrás realizar una página con aspecto completamente profesional y atractiva.

Cuando eliges un diseño predefinido, le estás indicando a Divi que deseas tomar un formato alojado en su biblioteca de layouts, y a partir de ella, darle forma a tu gusto. Son cientos de formatos disponibles a elegir.

Clonar una página existente

Como última opción tienes la clonación, es decir, importar un diseño que ya has realizado anteriormente.

La utilidad de la clonación es poder tener a punto en pocos minutos una web que requiera las mismas características de una existente, y te evita la necesidad de volver a configurar todo de nuevo.

Usando la opción “Elegir un diseño predefinido”

Como eh mencionado anteriormente, la opción más viable para crear un portal en poco tiempo es “Elegir un diseño predefinido”. Al seleccionar esta opción, tendrás a tu disposición formatos creados por diseñadores profesionales que podrás adaptar a tu gusto.

Eligiendo el diseño de la biblioteca de Divi

En la biblioteca de Layouts, puedes orientarte en dependencia del tema de tu Blog mediante la clasificación de categorías que se encuentran compilados en packs. Al seleccionar un pack, podrás ver una pequeña vista previa del diseño aplicado para la home, el landing page, la página de contacto, etc. En caso de querer ver la experiencia de forma más realista pero sin instalarla aún, puedes usar la opción “View Live Demo”

Si te ha convencido el pack elegido, deberás pulsar en “Use This Layout”, donde se importará el diseño y lo cargará en tu página. La ventaja de instalar los layouts de Divi en comparación con los temas de WordPress, es que estos son muy completos, así que al importarlos, también estarás percibiendo las imágenes y textos tal cual como lo has visto en el Demo. Esto permitirá que tan solo cambies el contenido de cada título y los textos informativos para que ya puedes postear tu blog.

Ajustando el encabezado y pie de página

Ahora que ya tienes a tu entera disposición el diseño que has elegido, debes proceder a modificarlo a tu gusto. Como podrás comprobar, se encuentra la barra de navegación y el pie de página de Divi.

Puedes decidir si dejarlo y ajustar el texto interno a las preferencias de tu portal o en su defecto eliminarlo, siendo el caso de que estés diseñando una landing page y requieras colocar otro más adecuado. Si este último es tu caso, podrás eliminar estos elementos saliendo del constructor Divi, te diriges a “Editar página”, luego en “Atributos de página” y finalmente realizar el cambio en la casilla “Plantilla por defecto” por “Blank Page”. No olvides guardar los cambios.

Modificando textos del Layout

Para realizar la modificación de textos, solo debes ubicar el puntero sobre el texto de la plantilla y sobrescribir en él como si de un editor de textos se tratara. Para aplicar formatos de color o cambiar los márgenes deberás acceder a los ajustes del módulo.

Aplicando formatos personalizados

Seguro ya te habrás dado cuenta que al pasar el puntero sobre los distintos elementos del layout, se despliega una pequeña barra de herramientas o panel de menú. Estas son herramientas que te permitirás realizar modificaciones a esos elementos.

El icono en forma de engranaje te permitirá ingresar a los ajustes del módulo seleccionado. Si pulsas sobre este icono, se despliega una ventana emergente con opciones de ajustes agrupadas en 3 pestañas: Contenido, Diseño y Avanzado.

• Contenido: En esta pestaña deberás definir lo que desees que se muestre en el módulo.
• Diseño: Aquí podrás gestionar la forma en cómo se muestra el módulo
• Avanzado: Esta última pestaña presenta ciertos aspectos avanzados a nivel experto

Con la utilidad de esta ventana emergente y sus tres pestañas podrás asignar características como: Tamaño de fuentes y objetos, tipografía, márgenes, colores, sombras, estilos de bordes, animaciones, etc.

Eliminando elementos del Layout

Es posible que te encuentres con ciertos elementos indeseables, de poco valor o que sencillamente están de más en la percepción de tu Website.

Para eliminar estos elementos deberás seguir un procedimiento tan básico y elemental como pasar el puntero sobre el elemento indeseable y elegir de la barra de herramientas el icono en forma de papelera. ¡Que sencillo verdad! Puedes optar por borrar un módulo, una fila o si lo deseas una sección completa.

Duplicando elementos del Layout

En la gestión y modificación de tu portal, a veces necesitas crear varios elementos que tienen mucha similitud con otros que ya han sido creados. Pues bien, de la barra de herramientas puedes usar el icono duplicar para crear una sección, fila o incluso un módulo idéntico al original. Luego podrás hacer ligeras modificaciones al duplicado para ajustarlo a tu conveniencia.

Ventajas de usar diseños predefinidos en Divi

Al ser un emprendedor que se está iniciando en el mundo de la creación de páginas web, la aplicación de diseños predefinidos te permite examinar al detalle cada elemento del layout, con lo que conseguirás aprender mucho sobre las aplicaciones que puedas darle.

Es posible que hayas quedado impresionado con el diseño de un portal y pienses que ese resultado es solo posible por medio de tener amplios conocimientos de programación. Sin embargo, ahora puedes ver que con las bondades que te ofrece Divi y unos cuantos ajustes básicos, puedes presentar tu sitio Web como todo un profesional.

Conclusión

Sin lugar a dudas, la plantilla Divi es una opción muy recomendada para lograr un verdadero resultado profesional en tu portal sin necesidad de estudiar lenguaje de programación.

Cada vez son más los que apuestan por esta alternativa, por lo que vale la pena probarla. Recuerda que el aporte que necesitarás realizar para su obtención no se compara en nada con todos los beneficios que recibirás, entre ellos una gran plantilla más un Page Builder profesional.