Divi Booster es un plugin que pasa inadvertido y es una extensión que añade una enorme cantidad de funcionalidades a nuestro querido tema Divi.

De manera muy fácil te permite realizar cambios sin tener que tocar ni una sola línea de código. Si llevas un tiempo usando Divi, te habrás dado cuenta que a veces, has necesitado funciones que Divi por defecto no las incorpora. Sea la función que necesites, Divi Booster tiene la mayoría de las características que has deseado. Con este plugin tan sencillo y barato (sólo 19 euros) te hará la vida más fácil en tus diseños web.

Si tus conocimientos en CSS no son muy buenos, Divi Booster es lo que necesitas.

[toc]

¿Quieres añadir una imagen que se muestre por encima del menú principal? ¿necesitas agregar más iconos sociales a tu sitio como Flickr o Skype? Pues esto y mucho más te lo permite Divi Booster.

En este extenso artículo te voy a mostrar una a una todas las gestiones que puedes realizar. Para que lo comprendas sin dificultad añadiré por cada explicación imágenes para que los conceptos se entiendan a la primera.

¡Vamos al lío!

¿Cómo instalo Divi Booster?

Para instalar Divi Booster, haz lo siguiente:

  1. En tu WordPress accede a “Plugins–>Añadir Nuevo”
  2. Selecciona “Subir Plugin”
  3. Localiza en tu ordenador el plugin con extensión .zip
  4. Instala y activa. ¡Ok!

Una vez activado lo tendrás disponible en el menú de tu Divi

Site-wide Settings

La primera sección está relacionada con todos los aspectos generales del sitio web. Se divide en 3 subcategorías: Iconos, Layout y Site Speed. En anteriores versiones también estaba el apartado Links, ahora en otra sección.

Iconos (Icons)

Añadir iconos customizados para usar en módulos [tamaño recomendado 96×96 píxeles]
Add custom icons for use in modules [recommended size 96x96px]

Esta opción es muy demanda por muchos usuarios. Aunque Divi dispone de una extensa galería de iconos para módulos, en muchas ocasiones necesitas iconos concretos. Simplemente sube tus iconos uno a uno respetando el tamaño recomendado de 96 píxeles de ancho y alto. Puedes agregar tus propios iconos para blurbs y módulos de galería. Puedes subir tantos como quieras. Después de cargar el primero, guarda la configuración y se añadirá otro campo de carga.

Este es el resultado de subir un icono de meteorología y mostrado en un módulo de anuncio.

Añadir más iconos de redes sociales (introducir URL):
Add more social media icons (enter URL):

Desde esta opción podrás añadir iconos para redes sociales como las que se muestran en la imagen de la sección. Si no es suficiente, tienes disponibles más de 160 iconos a otras redes sociales que se accede desde el personalizador de Divi. Tienes iconos para Uber, Tripadvisor, WhatsApp, Etsy, Envato, etc…

Abrir los enlaces de los iconos sociales en una nueva pantalla
Open social media icon links in a new tab

Esta opción es muy simple. Activada, fuerza a que los enlaces a los perfiles sociales se abran en nueva pestaña o ventana, ya que Divi no lo hace por defecto.

Plantilla (Layout)

Añadir imagen antes de la cabecera:
Add image before header:

Otra de las opciones que faltan en el tema de Divi y que está disponible en otros temas es la capacidad de insertar una imagen de ancho completo para mostrarse en la parte superior de la página, por encima de la barra del menú principal o el secundario. Puedes añadir una imagen para mostrar un banner publicitario o lo que quieras. Una vez subas la imagen en la galería multimedia, procura realizar los ajustes necesarios en Ajustes de visualización de adjuntos para alinear la imagen y mostrar la resolución que necesites.

El efecto de superposición sobre la barra secundaria que ves en la imagen de ejemplo, la he realizado con una imagen transparente en formato png y jugando con un par de ajustes CSS. Una opción que te permitirá más creatividad en tus diseños.

Añadir  área de widget “pegajoso” a la izquierda de pantalla
Add “sticky” widget area to left of screen

Un área de widget “pegajosa” permite agregar widgets a tu tema y mantenerse en pantalla mientras desplazas la página hacia abajo.  Esta opción es ideal para clavar los iconos sociales, una biografía, un boletín de subscripción o una oferta temporal.

Cuando activas la opción, aparece un nueva zona widget llamada “Sticky Sidebar (Left)” donde podrás añadir lo que te parezca. En este ejemplo he añadido un widget meteorológico.

Sobreponer cabecera en una caja:
Make main content overlap header in box layout:

Esta característica permite que el área principal de diseño de caja se superponga a la barra de navegación del encabezado, logrando el efecto con bastante facilidad.  Puedes elegir el número de píxeles para la superposición y el color de la cabecera y del color de fondo de la página. Hay que tener en cuenta que el efecto sólo se muestra en pantallas de tamaño completo. Para pantallas más pequeñas se utiliza el diseño Divi predeterminado.

Eliminar sombreado de caja
Remove box layout shadow

El tema Divi incluye con varios diseños, incluyendo una “caja” de diseño que coloca todo su contenido dentro de otra caja. Este cuadro se distingue del fondo por un efecto de sombra. Si te gusta el contenido en caja, pero solo quieres eliminar el efecto de sombra, activa esta opción.

Elegir anchura de contenido para móviles:%
Set mobile content width:%

Divi dispone de una opción para ajustar el “ancho del contenido” de tu web. Esto te permite elegir la anchura que quieres que el contenido de su tu sitio tenga (el valor predeterminado es de 1080px). Sin embargo, no hay una opción equivalente para configurar el ancho del contenido en dispositivos móviles. Por defecto está fijado en un 80%. Si quieres cambiar esto, ya lo sabes.

Velocidad del sitio (Site Speed)

En este apartado sólo hay disponible la opción de habilitar la compresión de datos para aumentar la velocidad de tu sitio web Divi. La velocidad de carga de un sitio es un factor muy importante para Google, que utiliza la velocidad a la que carga su sitio para determinar si subirte o bajarte en los resultados de búsqueda. Si quieres una buena clasificación, tu sitio debe ser rápido. Prueba tu Divi con la herramienta PageSpeed ​​Insights de Google antes y después de activar la opción y déjate sorprender.

Debes tener en cuenta que habilitar la compresión es sólo una pieza más en el rompecabezas de optimización de un sitio. Si bien debería mejorar los tiempos de descarga disminuyendo el tamaño de sus páginas web, puedes tener la sorpresa de que la mejora es pequeña en relación con el tiempo total de carga de la página. Pero esto no es motivo para habilitar la compresión GZIP en tus páginas.

Nos vemos en la segunda parte de Divi Builder.