Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

El plugin Divi Booster es un plugin que tiene un coste de 19$ y que permite una infinidad de nuevas opciones de configuración para la plantilla Divi de WordPress

 

QUIERO DIVI BOOSTER

Nota: Tras hacer clic en el enlace, haz clic en el botón azul del lateral derecho “$19 – Buy now”

 

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.

Otros posts de la serie:

 

 

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”.

 

insertar imagen encima del header de la web con Divi booster

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

 

imagen header con Divi booster

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:

 

añadir imagen a la cabecera con Divi booster

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 a wordpress en el header con Divi Booster

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.

 

añadir nueva zona de widget en la cabecera de la web con wordpress y plugin Divi Booster

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.

 

nuevo area de widget en encabezamiento de web wordpress

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.

 

 

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 personalización con la web Divi y wordpress en modo tipo caja o box

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

 

altura del header y colores con Divi Booster

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.

 

opciones de personalizacion de divi modo box

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):

 

diferencia sombreado en diseño web en caja opción divi booster

imagen superior diseño en caja sin sombra lateral, imagen inferior diseño web en caja con sombra lateral

 

 

1.6.- Reducir anchura del contenido en header y footer en móviles con Divi Booster

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.

 

como se reduce la anchura del header y footer en móviles

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.

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto. Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies