Vamos a ver cómo hacer con Divi un encabezado que se encoge cuando bajamos en la página y vuelve a su tamaño normal cuando subimos.
Por lo general cuando el usuario baja en la página no está prestando atención al menú o al encabezado porque está leyendo el contenido o bien buscando algo dentro de él.
Entonces es útil encogerlo para que no «robe» espacio en la pantalla.
Sin embargo, cuando el usuario está de regreso, es una buena estrategia volver a agrandarlo para llamar la atención del lector y conducirlo hacia otras secciones o contenidos.
Veamos paso a paso cómo hacer con Divi una cabecera que se encoge al hacer scroll hacia abajo y que vuelve a su tamaño cuando subimos.
En este caso tenemos una página que utiliza el encabezado estándar de Divi, con su logo y menú.
Este encabezado, si bien se encoge un poco cuando bajamos en la página, no es personalizable y además creo que debería encogerse más.
Entonces vamos a aprender cómo hacer con Divi un encabezado personalizado y que se encoja al hacer scroll hacia abajo en la página.
Para eso nos vamos al Generador de Temas o Theme Builder y vamos a configurar un nuevo encabezado global para el sitio web.
Elegimos la opción Construir desde cero y una vez que carga el constructor vamos a los ajustes de la Sección.
Antes de comenzar a agregar módulos vamos a los ajustes de la sección para configurarla.
Una vez dentro de los ajustes de la sección vamos a configurar ciertas cuestiones generales del encabezado.
En Fondo definimos:
En Tamaño definimos:
En Separación definimos:
En Sombra de la caja definimos:
Con ésto logramos un efecto flotante para el encabezado.
En ID y clases CSS definimos:
En CSS personalizado vamos a la caja Elemento principal y copiamos lo siguiente:
position: fixed;
top: 0;
Con ésto conseguimos que la sección se quede siempre fija en el borde superior de la página cuando hacemos scroll.
Luego bajamos hasta Puesto:
Con ésto logramos que la sección se coloque en una capa por encima del resto de los elementos de la página.
Una vez completados estos ajustes guardamos los cambios e insertamos una fila con estructura de 3 columnas según la siguiente imagen.
Entramos a los ajustes de la fila y vamos directo a la pestaña Diseño.
En Tamaño definimos lo siguiente:
En Separación configuramos:
De esta forma eliminamos todo espacio arriba y abajo de la fila.
En ID y clases CSS definimos:
Y por último en CSS personalizado vamos a la caja Elemento principal y copiamos lo siguiente:
display: flex;
align-items: center;
Ésto hará que las 3 columnas se mantengan una al lado de la otra incluso en pantallas móviles.
En la columna 1 insertamos un módulo Imagen que contenga el logo del sitio web y configuramos su tamaño. Lo cual es muy importante en este caso.
En la pestaña Diseño sección Tamaño definimos las medidas del logo.
Estos valores dependen mucho de las dimensiones de tu logo. Es importante que tengas en cuenta que el logo no te quede más alto que el botón que vamos a poner en la columna 3, para que funcione correctamente el conjunto.
En la columna 2 vamos a insertar un módulo Menú de Divi para contener al menú propiamente dicho y configuramos los siguientes ajustes del módulo.
En la pestaña Diseño sección Diseño definimos:
En Texto del menú definimos:
En Menú desplegable definimos:
En Íconos definimos:
Con ésto terminamos con el menú de la columna 2.
En la columna 3 insertamos un módulo Botón para colocar una llamada a la acción y configuramos sus ajustes de la siguiente manera.
En Alineación definimos:
En Botón definimos:
En Separación definimos:
En Sombra de la caja definimos:
Con ésto ya hemos terminado el diseño de nuestro encabezado que se encoge al hacer scroll con Divi.
Lo último que nos queda por hacer es insertar unos códigos CSS y Javascript que son los encargados de hacer la magia.
Como por el momento no hay opciones en Divi para lograr este efecto tenemos que conseguirlo aplicando código. Pero no te preocupes que solo vas a tener que copiar y pegar.
Así que vamos de nuevo a la columna 2 y debajo de módulo Menú insertamos un Módulo Código y pegamos dentro el siguiente código:
<script>
jQuery(function($){
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('#section-padding').addClass('reduce-section-padding');
$('#row-width').addClass('increase-row-width');
} else {
$('#section-padding').removeClass('reduce-section-padding');
$('#section-padding').addClass('slow-transition');
$('#row-width').removeClass('increase-row-width');
$('#row-width').addClass('slow-transition');
}
});
});
</script>
<style>
.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px ;
padding-bottom: 0px ;
}
.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% ;
}
.slow-transition {
transition: all 0.9s ease-out 0s;
}
#main-content {
margin-top: 5vw;
}
</style>
Luego de hacer ésto no te olvides de guardar los cambios en el constructor y también en el Theme builder.
Y si vamos de nuevo a nuestra página y la actualizamos vemos como el encabezado estándar de Divi fue reemplazado por este elegante encabezado con logo, menú y botón de llamada a la acción.
Y si bajamos en la página ésto es lo que pasa. El encabezado se encoge y tanto el logo como el botón se alejan del centro hacia los costados hasta pegarse a los bordes.
Para que funcione correctamente ten en cuenta lo que te decía más arriba. Que el logo no debe ser más alto que el botón. Si eso sucede el efecto mostrado no será perfecto.
En cualquier caso puedes resolverlo ajustando los tamaños, ya sea del logo o bien del botón. Cuestión de ir probando.
Espero que te haya gustado este ejemplo que tomé del blog de Divi y que te sirva para crear un menú que se encoge al hacer scroll mucho más elegante que el menú predeterminado de Divi.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…