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

 

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 19$

 

QUIERO DIVI BOOSTER

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

 

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

 

 

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

Cambiar scroll necesario en píxeles para que se reduzca el header

 

 

2.4.- Usar el menú para móviles en la web en modo escritorio

 

Opción en Divi Booster: Use mobile header menu button on desktops too

Con esta opción la web realizada con la plantilla Divi mostrará el típico icono de un menú tipo hamburguesa no solo en la versión móvil de la web sino también en la versión de escritorio.

Para activar esta opción iremos a: “Divi > Divi Booster > Header > Main Header” y luego activaremos el checkbox: “Use mobile header menú button on desktops too”.

 

Cómo poner el icono del menú hamburguesa en escritorio además e móviles

Poner el icono del menú hamburguer en escritorio y no solo en movil

 

Descubre en este post todas las opciones de diseño de menú del header que ofrece la plantilla Divi por defecto

 

 

2.5.- Quitar reborde parte inferior del header con Divi Booster

 

Opción en Divi Booster: Hide header bottom border

La línea inferior que define el header tiene un pequeño reborde o sombreado por defecto con la plantilla Divi. Con esta opción del plugin Divi Booster podremos eliminar este suave reborde.

Para activar esta opción iremos a: “Divi > Divi Booster > Header > Main Header” y luego marcaremos el check box: “Hide header bottom border”

Recuera guardar los cambios

En la siguiente imagen puede ver en la parte superior la web con el reborde en la parte inferior del header y debajo una imagen de la misma web sin el reborde (utilizando la opción de Divi Booster)

 

quitar reborde del header con divi booster

Arriba web con header con reborde, abajo sin reborde con Divi Booster

 

 

2.6.- No reducir la altura del header al hacer scroll con Divi

 

Opción en Divi Booster: Don’t shrink header on scroll

Cuando hacemos scroll en una página de un sitio web realizado con WordPress y la plantilla Divi, llegado un momento se produce una contracción o reducción en la altura del header. Este header queda flotante (no desaparece) al hacer scroll.

Con la opción de Divi Booster que vamos a ver ahora podremos evitar que se produzca esa reducción en la altura o contracción del header al hacer scroll.

Para ello iremos a: “Divi > Divi Booster > Header > Main Header” y marcaremos el checkbox: “Don’t shrink header on scroll”.

A continuación guardaremos.

 

 

2.7.- Ocultar totalmente el menú principal de Divi

 

Opción en Divi Booster: Hide header completely

Con esta opción del plugin Divi Booster podremos eliminar por completo el menú principal del encabezamiento de la web con Divi. El menú secundario si aparecerá en la parte superior del header.

Para conseguir esto iremos a: “Divi > Divi Booster > Header > Main Header” y marcaremos el checkbox: “Hide header completely”

Recuerda guardar los cambios.

 

quitar la zona de menú principal del header con divi booster

Cómo quitar el menú principal del header con WordPress y Divi

 

 

2.8.- Cambiar la altura del header en posición normal y encogido

 

Opción en Divi Booster: Header minimum height:

Con esta opción podremos definir la altura del header o encabezamiento de la web tanto en su posición normal como en su posición contraída. Es decir, cuando se hace scroll y se reduce la altura del header.

Para ello iremos a: “Divi > Divi Booster > Header > Main Header” y marcaremos el checkbox: “Header minimum height”.

A continuación estableceremos los valores:

a.- Normal: aquí pondremos la altura en píxeles del header cuando está en posición normal

b.- Shrunk: aquí pondremos la altura en píxeles del header cuando está en posición contraída, por haberse hecho scroll en la misma.

 

 

2.9.- Cambiar el color de fondo al pasar el ratón por un submenú

 

Opción en Divi Booster: Submenu item hover background color

Con esta opción estableceremos el color de fondo del ítem del submenú cuando pongamos el puntero del ratón sobre dicho elemento.

Para ello iremos a: “Divi > Divi Booster > Header > Main Header” y marcaremos el checkbox: “Submenu item hover background color”. A continuación haremos clic en “Elige el color” y seleccionaremos el color de fondo.

Recuerda guardar los cambios

En la siguiente imagen puedes ver el resultado de establecer un color de fondo o background al poner el ratón sobre un elemento del submenú.

 

modificar el color de fondo del menú desplegable

Cambiar el color background o fondo de los elementos del menú desplegable

 

 

2.10.- Cambiar color del enlace del menú al poner el ratón con Divi Booster

 

Opción en Divi Booster: Menu link hover color:

Con esta interesante opción de Divi Booster podremos establecer un color de texto para los elementos del menú cuando pongamos el ratón sobre ellos. Es decir, una acción hover de color de texto sobre los ítems del menú.

Para ello iremos a: “Divi > Divi Booster > Header > Main Header” y marcaremos el checkbox: “Menu link hover color”. A continuación haremos clic en el botón “Elige un color” y seleccionaremos el color que queramos.

 

 

2.11.- Solucionar problema de colores enlaces menú de una web en una sola página

 

Opción en Divi Booster: Fix sub-menu link colors on single page navigation

Ya sabes que con Divi podemos crear sitios web en una sola página y enlaces en el menú que vayan directamente a una determinada sección de la página.

 

Aquí puedes ver un completo post sobre cómo crear este tipo de enlaces a partes específicas de una sección o crear sitios web en una sola página

 

El problema que presenta es que cuando hacemos clic en un ítem del menú la página se desplaza a una determinada sección pero en el menú aparecerán resaltados con otro color  todos los ítems  de menú que lleven a diferentes secciones en la misma página, y eso queda mal.

Debería aparecer resaltado en otro color solo el ítem de menú que hemos pulsado y no el resto de ítems que llevan a secciones de la misma página.

Con esta opción de Divi Booster haremos que todos los enlaces sean negros excepto cuando ponemos el ratón sobre el enlace. Esto no es una solución perfecta al problema, pero si es una mejora respecto al comportamiento normal de Divi.

Para ello iremos a: “Divi > Divi Booster > Header > Main Header” y haremos clic en el checkbox: “Fix sub-menu link colors on single page navigation”.

Recuerda guardar los cambios

 

 

2.12.- Cambiar espacio entre los ítems o elementos del menú con Divi

 

Opción en Divi Booster: “Space between menu items”

Con esta opción podremos establecer la separación que habrá entre los diferentes ítems del menú principal de Divi.

La separación por defecto entre los elementos del menú en Divi es de 22 px, por lo que si ponemos una cantidad mayor aumentará la separación y si ponemos una menor disminuirá la separación.

Para ello iremos a: “Divi > Divi Booster > Header > Main Header” y marcaremos el checkbox: “Space between menu ítems”.

A continuación estableceremos la separación que queramos en píxeles y guardaremos los cambios.

 

modificar separación items de menú con Divi

Cambiar la distancia o separación entre elementos del menú de la web

 

 

2.13.- Cómo cambiar el link del logo de Divi

 

Opción en Divi Booster: “Change logo link URL to:”

Por defecto con la plantilla Divi y la mayoría de plantillas para wordpress, cuando se hace clic sobre el logo de cualquiera de las páginas de nuestro sitio somos enviados a la home de nuestro sitio web.

Con esta opción podremos modificar ese link del logo y cuando un visitante haga clic sobre el logo será dirigido a una url diferente que podremos configurar.

Para encontrar esta opción iremos a: “Divi > Divi Booster > Header > Main Header”, marcaremos el checkbox: “Change logo link URL to:” y en el campo de texto escribiremos la URL a la que queremos que se redirija la web cuando se haga clic sobre el logo

 

 

2.14.- Cómo poner un efecto hover (cambiar color al poner el ratón) sobre el icono de búsqueda del header

 

Opción en Divi Booster: “Search icon hover color:”

Con la plantilla Divi tenemos la opción de mostrar un icono de búsqueda en forma de lupa en el header junto a los elementos del menú.

Con esta opción de Divi Booster podremos hacer un efecto hover sobre el icono de búsqueda. Es decir, hacer que cuando se pose el cursor del ratón sobre “la lupa”, ésta cambie de color y muestre el que nosotros configuremos.

Para encontrar esta opción iremos a: “Divi > Divi Booster > Header > Main Header”, marcaremos el checkbox: “Search icon hover color”, haremos clic en el botón: “Elige un color” y seleccionaremos uno.

 

 

2.15.- Cómo cambiar u ocultar el texto de “Select page” (seleccionar página) del menú de Divi en móviles

 

Opción en Divi Booster: “Change centered menu “Select Page” text:”

En anteriores versiones de Divi aparecía un texto (select page o seleccionar página) junto al icono tipo hamburguesa del menú, cuando este se veía en dispositivos móviles.

En las últimas versiones de la plantilla Divi ya no aparece este texto, por lo que la opción que vamos a ver no tendrá utilidad en éstas versiones.

Con esta opción de Divi Booster podremos ocultar o cambiar ese texto. Pero como he dicho solo funcionará en versiones antiguas de la plantilla Divi.

Para configurar esta opción iremos a: “Divi > Divi Booster > Header > Main Header” y marcaremos el checkbox: “Change centered menu “Select Page” text:”. En el campo de texto escribiremos el texto por el que queremos sustituir el texto actual que aparece junto al icono tipo hamburguer en móviles

 

cómo quitar el texto o modificarlo de seleccionar página

Cómo modificar o quitar el texto de select page del menú

 

 

2.16.- Cómo mostrar el nombre de la web junto al logo con Divi Booster

 

Opción en Divi Booster: “Show site title and tagline in header”

Con esta opción de Divi Booster veremos cómo podemos añadir el nombre de la web a la derecha del logo.

Lo que hará esta opción será añadir a la derecha del logo los textos que tengamos en los campos: “Título del sitio” y “descripción corta” situados en: “Ajustes > Generales”.

Para configurar esta opción iremos a: “Divi > Divi Booster > Header > Main Header” y marcaremos el checkbox: “Show site title and tagline in header”.

No olvidemos guardar los cambios

 

 

3.- Divi Booster MOBILE HEADER

 

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

Todas estas opciones estarán relacionadas con la visualización en dispositivo móvil del header de la web.

 

 

3.1.- Cambiar distancia desde el logo al extremo en la versión móvil de la web

 

Opción en Divi Booster: “Use an “app-style” header layout on mobiles”

Por defecto la distancia desde el logo hasta el extremo de la web, así como desde el icono tipo hamburguesa hasta el otro extremo va variando dependiendo de la anchura del dispositivo móvil con el que se está visualizando.

Con esta opción de Divi Booster conseguiremos regularizar esta distancia a cualquier anchura de dispositivo móvil y conseguiremos que el logo y el icono de menú hamburguer se vuelquen siempre a los extremos.

Para configurar esta opción iremos a: “Divi > Divi Booster > Header > Mobile Header” y marcaremos el checkbox: “Use an “app-style” header layout on mobiles”.

Nota: esta opción solo funciona con la disposición estándar o normal del header. Es decir, con el logo situado a la izquierda del menú.

 

mejorar header de la web en móviles

Regularizar distancia desde logo e icono menú hamburguer hasta bordes de la web en móviles

 

 

3.2.- Cómo ocultar el icono de búsqueda en móviles

 

Opción en Divi Booster: “Hide the search icon on mobiles”

Con esta opción conseguiremos ocultar el icono de búsqueda del header (lupa) de la plantilla Divi cuando la web se esté visualizando con un dispositivo móvil.

Para que funcione esta opción debe estar activada la lupa o icono de búsqueda del header.

Para configurar esta opción iremos a: “Divi > Divi Booster > Header > Mobile Header” y marcaremos el checkbox: “Hide the search icon on mobiles”.

 

 

3.3.- Cómo añadir un texto delante del icono de menú hamburguesa (hamburguer) en móviles

 

Opción en Divi Booster: “Add text before menu button (mobiles)”

Esta opción puede ser muy interesante para ayudar a usuarios más mayores que no tengan claro que el icono tipo hamburguer sirve para desplegar el menú.

Con esta opción de Divi Booster podremos añadir un texto previo al icono de menú hamburguer, cuando se visualiza en móviles.

Para configurar esta opción iremos a: “Divi > Divi Booster > Header > Mobile Header” y marcaremos el checkbox: “Add text before menu button (mobiles):”. En el campo de texto que aparece junto al check box escribiremos el texto que queremos que aparezca junto al icono tipo hamburguer al visualizar la web a través de móvil.

 

cómo añadir un texto junto al icono tipo hamburguesa en la versión movil de la web

Añadir texto junto al icono del menú hamburguer con divi

 

El resultado lo puedes ver en la siguiente imagen:

 

cómo poner texto cabecera junto item de menú movil

Texto MENU añadido al icono menú hamburguer en móviles

 

 

3.4.- Cómo cambiar el tamaño de la fuente de texto de los elementos del menú en móviles

 

Opción en Divi Booster: “Mobile menu font size”

Con esta opción podremos cambiar el tamaño de la fuente de texto de los ítems del menú o elementos del menú, cuando esté se está visualizando a través de móvil.

El tamaño por defecto en Divi de la fuente de texto de los elementos del menú cuando se visualiza en dispositivo móvil es de 14 px.

Si quieres aumentar este tamaño de fuente pon un tamaño superior a 14 px

 

 

3.5.- Ocultar elementos del menú secundario en visualización en móviles

 

Opción en Divi Booster: “Hide secondary menu items in mobile menu”

En la plantilla Divi los elementos del menú secundario (el que aparece en la parte superior del header) cuando se está visualizando en un dispositivo móvil aparecen dentro del menú general que se acciona al hacer clic en el icono del menú tipo hamburguesa.

Estos elementos del menú secundario aparecen a continuación de los elementos del menú principal.

Pero a veces es posible que no queramos mezclar los dos tipos de elementos del menú en uno solo.

Divi Booster nos da una opción para eliminar los elementos del menú secundario y que no aparezcan en el menú principal cuando se visualiza a través de un móvil.

Para configurar esta opción iremos a: “Divi > Divi Booster > Header > Mobile Header” y marcaremos el checkbox: “Hide secondary menu items in mobile menu”.

 

En la siguiente imagen puedes ver destacado lo que sería un elemento del menú secundario

cómo eliminar elementos del menú secundario de divi cuando se ve en dispositivo movil

Quitar elemento del menú secundario cuando se ve en móviles

 

En la siguiente imagen puedes ver cuál sería el elemento que quedaría eliminado de la versión móvil del menú

con divi booster eliminar elemento menú secundario en dispositivos móvile

Elemento que se eleminaría del menú con la opción de divi booster

 

 

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