El plugin Divi Booster es un plugin que tiene un coste de 29$ (unos 25 €) y que permite una infinidad de nuevas opciones de configuración para la plantilla Divi de WordPress
COMPRAR DIVI BOOSTER
Este post es el segundo de la serie Divi Booster en el que se van analizando las principales opciones de configuración de este fabuloso plugin para WordPress y Divi.
DESCUENTOS DIVI
Otros posts de la serie:
&nbps;
&nbps;
ÍNDICE DEL POST
-
1.- Divi Booster apartado principal Site-wide Settings (configuraciones generales)
- 1.2.- Poner una imagen encima del header de Divi y Divi Booster
- 1.3.- Añadir un widget flotante que cuelgue del lateral izquierdo del header con Divi
- 1.4.- Diseño del header cuando se elige el diseño de Divi tipo box o en caja para la web
- 1.5.- Eliminar sombra en el diseño “box” o caja de la web con Divi y Plugin Divi Booster
- 1.6.- Reducir anchura del contenido en header y footer en móviles con Divi Booster
- 1.7.- Solucionar problema en la creación de web en una sola página con Divi
- 1.8.- Comprimir archivos Divi para mejorar la velocidad de la web
Para continuar con la configuración de Divi Booster vamos a “Divi > Divi Booster”.
1.- Divi Booster apartado principal Site-wide Settings (configuraciones generales)
Todas las opciones de configuración que vamos a ver en este post están en el primer apartado de la configuración del plugin Divi Booster que se denomina: «Site-wide settings».
1.2.- Poner una imagen encima del header de Divi y Divi Booster
Vamos a ver cómo podemos poner una imagen en la parte superior del header de una web realizada con la plantilla Divi y WordPress con el plugin Divi Booster.
Dentro del apartado “Layout” encontraremos el siguiente checkbox:
“Add image before header” y el botón: “Choose Image”.
Haremos clic en el checkbox y después en el botón “Choose Image”, y subiremos la imagen que queremos utilizar en la parte superior de la cabecera de la web.
Antes de darle al botón “Use image” asegúrate que el tamaño de la imagen que vas a insertar es el adecuado. Lo puedes ver en “Ajustes de visualización de adjuntos”.
tamaño de inserción de imagen encima del header de wordpress y Divi
Después haremos clic en el botón “Use image” y la imagen quedará añadida
Configurar imagen en header web con WordPress y Divi
La visualización de la imagen en la parte superior de la cabecera será la siguiente:
Ejemplo de inserción de imagen en la cabecera de la web con Divi Booster
1.3.- Añadir un widget flotante que cuelgue del lateral izquierdo del header con Divi
Vamos a ver ahora como utilizar Divi Booster para colocar un Widget pegajoso o flotante que cuelgue de la parte izquierda del header y que siempre esté visible a pesar de hacer scroll en la página.
Dentro del apartado “Site-widge Settings” y el subapartado “Layout” tenemos la siguiente opción:
Check box con el texto: “Add Sticky widget area to left screen”.
Marca el check box y haz scroll hasta la parte inferior de la página para guardar.
Añadir area de widget en la parte izquierda del header con Divi y Divi Booster
a.- gestión de widgets
Ahora vamos a la interface de gestión de widgets: “Apariencia > Widgets” y ahí veremos que hay una nueva zona o area de widget a parte de la barra lateral y las zonas de área de pie de página.
Esta nueva zona de widget se denomina: “Sticky Sidebar (left)” y en el introduciremos un widget de búsqueda a modo de ejemplo.
Nuevo area de widget en wordpress con Divi en la cabecera de la web
El resultado será el que puedes ver en la siguiente imagen.
Resultado de insertar area de widget en el lateral derecho bajo el header
En la documentación de Divi Booster comentan que una utilidad práctica sería utilizar este widget flotante del header para poner iconos de redes sociales.
COMPRAR DIVI BOOSTER
1.4.- Diseño del header cuando se elige el diseño de Divi tipo box o en caja para la web
Ahora vamos a ver una serie de opciones de diseño cuando elegimos el diseño en caja de Divi (web en box) para la web.
El efecto es el que puedes ver en la siguiente imagen:
Opciones de diseño con la web en caja o box con Divi Booster
Para poder ver este efecto en tu web realizada con Divi tendrás que establecer el diseño en caja para la web. Esto lo podrás hacer en: “Divi > personalizador de temas > Ajustes generales > Ajustes de formato” y ahí marcar el checkbox: “HABILITAR DISEÑO CON CAJA”.
Lo habitual (aunque opcional) también sería desactivar el menú flotante del header. Para ello iremos a: “Divi > Opciones del tema” y en la opción: “Barra de navegación fija” poner el selector en “Desactivar”.
Para la personalización en Divi Booster iremos a “Site-wide settings” y al subapartado “Layout”.
Marcaremos el checkbox: “Make main content overlap header in box layout” (poner el contenido principal superpuesto sobre el header en el diseño en caja).
Tendremos 3 opciones a configurar:
- a.- Header height (altura header): aquí estableceremos la altura del header en píxeles
- b.- Header color: aquí el color del header
- c.- Page background color: aquí el color de fondo de la página por debajo del header
Opciones de personalización diseño en caja con Divi y plugin Divi Booster
Puedes ver en la siguiente imagen a que se refiere cada uno de los anteriores apartados de configuración con Divi Booster de una manera más visual.
Localización de las diferentes opciones de personalización de Divi booster para web en modo caja
1.5.- Eliminar sombra en el diseño “box” o caja de la web con Divi y Plugin Divi Booster
Para elegir el diseño en caja para la web con Divi, que es una opción que tenemos en: “Divi > personalizador de temas > Ajustes generales > Ajustes de formato > HABILITAR DISEÑO CON CAJA”.
Al elegir esta opción de caja para la web en los laterales aparece una sombra que hace resaltar el contenido de la web respecto al fondo.
Si no nos gusta ese sombreado que aparece podremos quitarlo con una opción que nos aporta el plugin Divi Booster.
Esta opción la tenemos también en “Site-wide Settings” y subapartado “Layout”.
El check box pone: “Remove box layout shadow” (borrar sombreado diseño en caja)
En la siguiente imagen podemos ver la diferencia (fíjate en los bordes de la web):
imagen superior diseño en caja sin sombra lateral, imagen inferior diseño web en caja con sombra lateral
cuando la web se ve a través de un dispositivo móvil.
Al igual que las opciones anteriores, esta configuración la estableceremos desde “Site-wide Settings” y subapartado “Layout”.
Marcaremos el checkbox: “Set mobile content with:” (establecer anchura del contenido en móviles).
En el selector estableceremos el porcentaje que estará disponible para el contenido en header y footer para dispositivos móviles.
En la siguiente imagen puedes ver la diferencia entre no activar esta opción (imagen izquierda) y activarla con un valor del 50% (imagen de la derecha). En el footer también hay diferencias.
Visualización de la reducción de anchura del contenido en header y footer en móviles con Divi y Divi booster
1.7.- Solucionar problema en la creación de web en una sola página con Divi
Es posible que quieras crear una web en una sola página y que los enlaces del menú superior te lleven a diferentes partes de la página.
Esto puede ser porque vayas a hacer una página web en una sola página o porque quieras implementar estos saltos en página solo en algunas páginas de tu sitio web.
En cualquiera de los casos en el siguiente post te explico cómo hacer saltos una página a través de los enlaces del menú con WordPress y Divi-> ir al post
El problema viene porque a veces al hacer clic en el enlace del menú la web se desplaza hacia una sección de la página, pero se pasa un poco. Es decir, se posiciona un poco por debajo del lugar en que debería posicionarse.
Este problema lo podemos arreglar con el plugin Divi Booster. Para accederemos a la configuración de Divi Booster e iremos a: “Site-wide Settings” y subapartado “Links”.
Marcaremos el checkbox: “Fix Divi anchor link scrolling” (arreglar salto del enlace en Divi) y guardamos al final de la página.
1.8.- Comprimir archivos Divi para mejorar la velocidad de la web
Divi Booster también incluye una opción para la compresión de la plantilla Divi. De esta manera el tiempo de descarga de las páginas de sitio disminuirá y por tanto la web será más rápida.
Seguramente esto lo notarás más si no utilizas un plugin de caché en el cual ya tengas seleccionada la opción de comprimir archivos.
Para activar esta opción deberás acceder a la configuración del plugin Divi Booster e ir a: “Site-wide Settings” y subapartado “Site Speed”.
Marca el checkbox: “Enable compression to reduce download times” (activar compresión para reducir los tiempos de carga). No olvides guardar al final de la página.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola! Que pena que no tienes más videos de divi booster! Gracias y espero que pronto subas algunos más!
Hola Carlos,
Hay bastante info sobre Divi Booster en el blog, aunque como bien dices, aún se puede añadir algún post más
Hola Joaquín,
Has hecho más partes de vídeo sobre el plugin DIVI BOOSTER?
Buenas,
Hace ya tiempo que no hago nuevos vídeos sobre Divi Booster,
pero si que quiero hacer algunos más
Desde este post puedes acceder a todo lo que he hecho sobre Divi Booster
Hola Joaquín
Una pregunta… ya veo que controlas Divi Booster… Me gustaría saber (es que me estoy volviendo loco) si el plugin Divi Booster permite crear más de tres columnas en el blog page. Tanto Divi como Extra de Elegant themes solo dejan un máximo de tres columnas para el módulo blog en modo rejilla. Y si no… ¿me puedes recomendar algún plugin que haga esto?
Muchas gracias! Y felicidades por tus vídeos y post. Son muy muy recomendable.
Saludos
Hola Joxhe,
Divi Booster no añade ninguna funcionalidad para añadir más columnas en el modulo blog de Divi.
Es posible que exista algún plugin pero lo desconozco. La única forma que se me ocurre es añadiendo código, te pongo varios post que hablan sobre este tema a ver si te sirve alguno:
Four Columns Divi blog grid
How to create a 2,3 or 4 columns square blog layout
Blog module grids in divi: increase columns
Muchísimas gracias Joaquín… la primera opción que me has planteado me ha servido y sobretodo funcionado. Me estaba volviendo loco. He visto que divi booster tiene muchas funcionalides. En algún lugar he leído más de 50. ¿Dónde puedo ver estas funcionalidades antes de animarme a comprar ese plugin? o ¿me lo recomiendas directamente?
Gracias otra vez por responder tan rápido.
Hola Joxhe,
el plugin es una pasada te permite añadir hasta 95 nuevas opciones de diseño a Divi,
En el siguiente post tienes un resumen de algunas de ellas y enlaces a los post donde se detallan dichas funcionalidades
Divi Booster origen
Poco a poco voy escribiendo posts sobre divi booster y añadiendo funcionalidades en el post que te he comentado anteriormente, pero son tantísimas las opciones que incorpora el plugin que aun no las he podido explicar todas. Pero poco a poco las voy incorporando al post principal con enlaces a otros post de la serie Divi Booster que estoy haciendo
Buenas,
Dentro del footer, soy capaz de colocar enlaces internos que se ajustan al margen izquierdo y que funciona bien. El problema surge cuando quiero colocar información que no redirecciona a ningún enlace (información corporativa) y que deseo que quede centrada.
a href="http ://www.---------.com/dirección-x" rel="nofollow">Dirección-x , a href="http ://www.----------.com/dirección-y" rel="nofollow">Dirección-yA partir de aquí es donde no logro mi cometido.
Gracias.
Hola Alberto,
entiendo que estás utilizando el plugin Divi Booster para personalizar la información del footer ¿no?
Hola Joaquin,
Por ejemplo el widget pegajoso no se ve en móviles, almenos a mi, la mayoria de visitas es desde móvil
Hola Jose Luis,
si, tienes razón,
lo acabo de comprobar y efectivamente el widget flotante del header no se muestra en dispositivos móviles.
Esto también tiene su lógica, ya que seguramente en móviles se vería raro.
Muchas Gracias Joaquin, muy generoso y eficiente. Estaría bien que al final del articulo pusieras un enlace al primero articulo. Un saludo.
Hola Miguel Ángel,
el enlace al primer artículo de Divi Booster está justo encima del índice del post
Ahí iré indicando todas las partes, me quedan aun unas cuantas por hacer 😉
gracias