Divi Booster: amplifica la potencia de Divi (Parte 2)

Seguimos con la segunda parte del tutorial Divi Booster, el magnífico plugin que permite aumentar las posibilidades de diseño de tus páginas web.

Si no leíste la primera parte, es el momento de hacerlo ahora.

Vamos por faena.

Ahora veremos las opciones disponibles en la sección de Cabecera (Header) y sus diferentes subcategorías.

Cabecera (Header)

Cabecera Superior (Top Header)

Colocar todos los iconos a la derecha
Put all icons on the right

Divi te permite insertar un número de teléfono y una dirección de correo electrónico que se muestra en Top Header, así como una serie de iconos de redes sociales. Para alinear a la derecha estos texto e iconos activa esta opción.

Mostar iconos sociales para móviles en la barra secundaria
Show secondary nav bar social icons on mobiles

Si tienes iconos sociales en la cabecera secundaria, no aparecen en los dispositivos móviles. Si quieres mantenerlos para verlos en smartphones deberás activar esta opción.

Color del enlace:
Link hover color:

Desde aquí puedes cambiar el color de los enlaces cuando pasas el ratón por encima. Este color se aplica tanto a los enlaces de texto como a los iconos sociales.

Colocar contacto y los iconos de información a la izquierda, y los iconos sociales a la derecha
Put contact info icons on left, and social icons on the right

De forma predeterminada, la barra del menú secundario muestra los iconos de contacto (teléfono, correo electrónico) y los iconos sociales alineados a la izquierda. Si quieres tener el encabezado dividido con la información de contacto a la izquierda y los iconos sociales a la derecha, ya sabes.

Añadir un texto en el menú superior:
Add text to top header (on left-hand side):

El menú superior de Divi te permite añadir un número de teléfono, una dirección de correo electrónico y los iconos de redes sociales. Pero todavía no te permite agregar texto sin formato. Esta opción activada te dejará añadir un texto. En la imagen de arriba he añadido el original texto «texto top header Divi Booster».

Si sólo deseas mostrar el texto, puedes eliminar el número de teléfono y la dirección de email en «Divi > Personalizar de Temas > Cabecera y Navegación > Elementos de Cabecera».

Asegúrate de no dejar ningún espacio en las cajas o los iconos se volverán a mostrar nuevamente.

Crear un enlace con click al número de teléfono
Make phone number a «click to call» link

Simplemente marca la casilla para que el número de teléfono se convierta en un enlace con click. Opcionalmente, también puedes agregar un número diferente para marcar.

Cabecera Principal (Main Header)

Añadir una nueva área de widget debajo de los enlaces de navegación
Add new widget area below the navigation links

Muchos usuarios de Divi preguntan si es posible agregar un área de widget a la derecha de la barra de cabecera. Con esta opción agregará un área de widget justo debajo de los enlaces de navegación del encabezado Divi. Si lo deseas, puedes reemplazar los enlaces de navegación del menú principal con los del área del widget.

Centrar verticalmente los enlaces del menú principal
Vertically center the header links

Si cambias la altura del logotipo en tu plantilla Divi, puedes encontrar que los enlaces de la derecha del menú principal ya no se muestren muy bien centrados verticalmente. Esto ocurre porque Divi, utiliza una cantidad fija de relleno (padding) para mover los enlaces a la posición verticalmente correcta. Pero esto sólo funciona si el logotipo se establece con el tamaño predeterminado. Un logotipo más grande hará que la barra del menú sea más alta, pero el relleno alrededor de los enlaces no cambiará.

Solucionar el problema de la lupa en el menú principal
Fix header menu width / magnifying glass issue

Cuando intentas poner un montón de enlaces en el menú, Divi hace que los enlaces salten a otra fila y la lupa de búsqueda se desplace hacia abajo de la página.

En el ejemplo, verás que el icono de la lupa se ha desplazado en una tercera fila.

Activando esta opción de Divi Booster solucionamos el problema.

No encoger el header hasta que el usuario no se desplaze XXX píxeles hacia abajo
Don’t shrink the header until user scrolls down by XXX px

Esta opción consigue retrasar la reducción de la cabecera fija de Divi, hasta que el usuario se haya desplazado por la página hasta el número de píxeles indicado. Divi dispone de un efecto de desplazamiento predeterminado que «encoge» la cabecera a una versión más compacta a medida que hacemos scroll por la página. Si deseas mantener el tamaño completo a medida que te desplazas puedes hacerlo desde aquí.

Usar el botón de menú de móviles también en escritorio
Use mobile header menu button on desktops too

Divi tiene un pequeño botón de menú que aparece en los dispositivos móviles y tablets. Es el típico icono de 3 rayitas. Activando esta opción conseguirás tener el botón de menú en todos los tamaños de pantalla (y ocultar los enlaces de menú).

Ocultar el borde inferior del header
Hide header bottom borde

Simplemente consigue eliminar la línea negra que separa el header del contenido de la web. En la imagen puedes comprobarlo.

No encoger el header durante el desplazamiento
Don’t shrink header on scroll

A diferencia de la opción vista «Don’t shrink the header until user scrolls down by XXX px«, cuando la activas, evita que la cabecera se encoja.

Ocultar header completamente
Hide header completely

Oculta el encabezado, y mueve el resto de la página hacia arriba para llenar el espacio ocupado por la cabecera.

Altura mínima del encabezado:
Header minimum height:

Normal: px
Shrunk: px

Establece una altura mínima en lugar de altura absoluta para permitir que el encabezado crezca si agregas más contenido. El primer valor «normal» establece la altura inicial del encabezado, mientras que el segundo valor «Shrunk», fija la altura del encabezado cuando se encuentra en el estado «encogido» que sucede cuando el usuario navega por la página hacia abajo. Se aplica sólo en pantallas anchas, de modo que en los móviles se usará la altura habitual del encabezado Divi.

Cambiar color de fondo de un elemento del submenú:
Submenu item hover background color:

Al abrir un menú desplegable y colocar el cursor sobre un elemento del menú, el color de fondo se cambia para resaltar el elemento. Si deseas cambiar este color, o deshacerse del efecto de desplazamiento (usando el mismo que el menú real), actívalo.

Color del enlace del menú:
Menu link hover color:

Pues eso mismo. Cambia el color cuando pasas el ratón por encima de un enlace del menú. Puedes elegir un color y un valor de transparencia.

Arreglar los colores de los enlaces del submenú en web de una sola página
Fix sub-menu link colors on single page navigation

Si utilizas en Divi un diseño de navegación de una sola página, podrás comprobar que hay algún comportamiento extraño con los submenús. Consiste en que quedan marcados (en color) como visitados los enlaces que todavía no hemos accedido y al revés, el visitado queda marcado en negro. Lo que consigue esta opción es que los enlaces sean negros por defecto, excepto el visitado.

Espacio entre los elementos del menú: px
Space between menu items: px

Para aumentar o disminuir el espacio entre los elementos de menú en el menú Divi Booster, puedes utilizar esta opción.

Cambiar la URL del enlace del logotipo a:
Change logo link URL to:

De forma predeterminada, los enlaces del logo en Divi te llevan de nuevo a la página principal. Con esta opción te dejará insertar la url que quieras cuando se haga clic en tu logo.

Color del icono de Búsqueda:
Search icon hover color:

Si quieres cambiar el color del icono de búsqueda del tema Divi, activa la opción y elige color.

Cambiar el texto del menú centrado «Seleccionar página»:
Change centered menu «Select Page» text:

Tu tema Divi viene con una serie de formatos de headers, incluyendo dos diseños «centrados». Al visualizar estos diseños centrados en móviles, se muestra el menú del encabezado junto con el texto «Seleccionar página». Aquí puedes cambiar ese texto mostrado.

Mostrar el título del sitio y el tagline en el encabezado
Show site title and tagline in header

Divi tiene una cabecera altamente configurable. Una cosa que falta, es una manera fácil de mostrar el título del sitio y el tagline (breve descripción del sitio). Con esta opción se añade el título del texto y el tagline a la derecha del logotipo, como se muestra aquí.

Encabezado para móviles (Mobile Header)

Utilizar un diseño de cabecera «app-style» para móviles
Use an «app-style» header layout on mobiles

El encabezado Divi se modifica dinámicamente para que pueda verse correctamente en dispositivos pequeños, como los smartphones. Dependiendo del tamaño de la pantalla, el logotipo y el icono de menú varían en la distancia desde el borde de la pantalla. Esta opción muestra una apariencia más consistente entre los dispositivos.  Sólo funcionará para el estilo de encabezado «Predeterminado», y no para otros estilos. Así es como se vería.

Ocultar el icono de búsqueda en móviles
Hide the search icon on mobiles

Divi Theme muestra la lupa de búsqueda en la barra de encabezado de todos los dispositivos. Si quieres que sólo aparezca en dispositivos más grandes (no móviles), puedes ocultarlo.

Añadir texto antes del botón de menú (móviles):
Add text before menu button (mobiles):

Esta opción reemplaza «Menú» con el texto que elijas. Ten en cuenta que el texto será clicable y mostrará el menú móvil.

Tamaño de la fuente del menú móvil: px
Mobile menu font size: px

El tamaño de fuente es normalmente de 14px. Si estableces un valor más alto aumentará el tamaño de fuente, mientras que un valor inferior lo disminuirá.

Ocultar elementos del menú secundario en el menú móvil
Hide secondary menu items in mobile menu

Divi permite establecer un menú principal en el encabezado principal y un menú secundario en el encabezado superior. Si ve su sitio en el móvil, puede notar que los elementos de menú de ambos menús se muestran dentro del mismo menú móvil.

En el ejemplo que puedes ver, tiene un menú principal y otro secundario (1). Pero en ocasiones no quieres que los elementos del menú secundario se muestren (2). Con esta opción se ocultan en la versión móvil (3).

Hasta aquí la segunda parte de Divi Booster.

Nos vemos en las tercera parte (y última) de ¡Divi Booooooster!