En este post continuamos viendo las opciones Divi Booster, este sensacional plugin para WordPress para aumentar las opciones de diseño y funcionalidades de la plantilla Divi.

El precio de este plugin es de solo 29$ (Aprox. 25 €)

 

COMPRAR DIVI BOOSTER

 

En este post nos vamos a centrar en la inmensa cantidad de opciones que tiene el plugin Divi Booster para personalizar el header de una web realizada con la plantilla Divi

 

CUPONES DESCUENTOS DIVI

 

POSTS DE LA MISMA SERIE:

 

 

Todas las opciones de personalización y diseño del header están en “Divi > Divi Booster > Header”

Dentro encontraremos 3 subapartados: Top Header, Main Header, Mobile Header.

ÍNDICE EL POST

 

 

1.- Divi Booster TOP HEADER

 

Vamos a ir viendo en primer lugar todas las opciones de la subcategoría TOP HEADER de Divi Booster.

 

1.1- Poner todos los iconos a la derecha con Divi Booster

 

Opción en Divi Booster: Put all icons on the right

Con Divi booster podremos poner todos los iconos que aparecen en el header o cabecera a la izquierda, pero esta opción ya la vimos en el post Divi Booster parte 1, apartado 2

 

 

1.2.- Mostrar iconos de redes sociales en el móvil

 

Opción en Divi Booster: Show secundary nav bar social icons on mobiles

Con el plugin Divi Booster también podremos mostrar los iconos de redes sociales en la versión móvil de la web, cosa que no ocurre con la plantilla divi por defecto.

Esto ya lo vimos en el Post Divi Booster parte 1, apartado 4

 

 

1.3.- Cambiar color al poner el ratón sobre el teléfono, email o iconos de redes sociales del header.

 

Opción en Divi Booster: Link hover color

Con Divi booster podremos cambiar el color del texto cuando ponemos el cursor del ratón sobre el número de teléfono del header, los iconos de redes sociales o el email.

Para ello iremos a “Divi > Divi Booster > Header > Top Header” y luego iremos a la opción:

Link hover color marcaremos el checkbox y elegiremos el color al que queremos que se torne el email del header, teléfono e iconos de redes sociales al poner el cursor sobre ellos.

A continuación guardaremos

 

cambiar el color al poner el ratón sobre teléfono, redes sociales o mail

Efecto hover sobre teléfono, redes sociales y email del header

 

Al poner el puntero del ratón sobre el email, éste cambiará de color como puedes ver en la siguiente imagen.

 

cómo cambiar el color del email al pasar el ratón

Cambiar color email al pasar el ratón

 

Échale un vistazo a este post sobre como añadir un botón de llamada o «click to call» en la versión móvil de una web
COMPRAR DIVI BOOSTER

 

 

1.4.- Poner iconos de contacto a la izquierda e iconos de redes sociales a la derecha con Divi Booster.

 

Opción en Divi Booster: Put contact info icons on left, and social icons on the right

Esto lo vimos en el post de Divi Booster parte 1. Concretamente en el apartado 3

 

 

1.5.- Añadir un texto en el header junto al teléfono con Divi Booster

 

Opción en Divi Booster: Add text to top header (on the left hand-side)

Vamos a añadir un texto que aparecerá en el header (zona menú secundario de Divi). En el lateral izquierdo junto al número de teléfono.

Para ello iremos a “Divi > Divi Booster > Header > Top Header” y luego iremos a la opción:

Add text to top header (on the left hand-side)

Marcamos el checkbox y escribimos el texto que queremos que aparezca en el header.

 

poner un texto en la cabecera con divi booster

Añadir un texto al header con Divi Booster

 

El resultado lo puedes ver en la siguiente imagen donde hemos añadido el texto: “LA MEJOR CLÍNICA DENTAL DE MURCIA”

 

texto en la barra de menú secundario de divi

Texto añadido a la barra de menú secundario

 

 

1.6.- Hacer clic para llamar (click to call) sobre el número de teléfono del header con Divi booster

 

Opción en Divi Booster: Make Phone number a “click to call” link

Con esta opción haremos que en dispositivos móviles cuando se esté visualizando la página web y se haga clic sobre el número de teléfono que aparece en la parte superior izquierda del header con la plantilla Divi se produzca un marcado automático del número en el móvil.

 

Para configurar esta opción iremos a:

Para ello iremos a “Divi > Divi Booster > Header > Top Header” y luego iremos a la opción:

Make Phone number a “click to call” link

Haremos clic en el checkbox y en el campo “Dial this number” escribiremos el número de teléfono que queremos que se marque en el móvil.

Luego guardaremos

 

clic para llamar sobre teléfono header divi

Enlace de llamada (click to call) sobre teléfono header de Divi

 

 

2.- Divi Booster MAIN HEADER

 

Ahora vamos a ir viendo las opciones que hay dentro del apartado HEADER y subapartado MAIN HEADER

 

 

2.1.- Cómo añadir un widget en el header con Divi Booster

 

Opción en Divi Booster: Add new widget area below the navigation links

Con esta opción del plugin Divi Booster podremos añadir una nueva zona de widget en la parte lateral derecha del header, justo debajo de los ítems del menú.

Para ello iremos a “Divi > Divi Booster > Header > Main Header” y luego iremos a la opción:

Add new widget area below the navigation links y marcaremos el checkbox

A continuación guardaremos.

 

Cómo añadir un widget en el header de Divi

Añadir nueva area de widget en el header

 

Para añadir widgets a esa nueva área de widgets que hemos creado iremos a “Apariencia > Widgets”, donde tendremos una nueva área denominada: “Header”.

En el ejemplo vamos a poner un widget tipo editor visual con un texto que queremos mostrar en el header de la web taller de mi curso online de wordpress

 

poner widget en zona cabecera de divi

Añadir widget al area de widget del header de la web

 

En la siguiente imagen puedes ver el resultado

 

Añadir wiget de texto al header con Divi Booster

Añadido widget al header de una web hecha con Divi

 

 

 

Opción de Divi Booster: Vertically center the header links

En algunas ocasiones puede suceder que al realizar modificaciones en el tamaño en que se visualiza el logo produzca que los elementos del menú no queden centrados verticalmente.

Si te sucede eso marca esta opción a ver si de esta manera se soluciona el problema.

Esta opción la tienes en “Divi > Divi Booster > Header > Main Header” y luego el checkbox: “Vertically center the header links”

Recuerda guardar los cambios

 

 

2.3.- Retrasar la aparición del menú flotante de Divi con Divi Booster

 

Opción de Divi booster: Don’t shrink the header until user scrolls down by

Con esta opción de Divi booster podremos elegir qué cantidad de scroll hay que realizar para que se produzca la reducción de tamaño del header del menú flotante de Divi.

El scroll que hay que realizar para que se produzca la reducción de tamaño del menú flotante es pequeño. Con esta opción podremos ampliarlo.

Para activar esta opción iremos a: “Divi > Divi Booster > Header > Main Header” y luego marcaremos el checkbox: “Don’t shrink the header until user scrolls down by” y estableceremos el número de píxeles que será necesario recorrer con el scroll antes de que se produzca la contracción del header.

 

Cómo cambiar el desplazamiento de scroll para que se reduzca la cabecera de la web con Divi