Las cabeceras fijas, que siguen al usuario a medida que navega por tu página hacia abajo de tu contenido ofrecen una oportunidad constante de ofrecer tus servicios, otros contenidos o lo que tengas en tus menús.
Da igual el tema que utilices, si tienes la oportunidad de hacer que la cabecera se quede fija, acompañando la navegación de los usuarios, tienes un fantástico gancho de marketing a mano.
Además, es muy fácil, y no hace mucho vimos cómo hacer fija la cabecera de cualquier tema.
¿Por qué Astra?
Muchos temas tienen ya esta funcionalidad de hace fija la cabecera, como Divi, o la versión Pro, de pago, del tema Astra, un fantástico tema que cada vez utilizo más y es el que siempre recomiendo a mis alumnos, por su rendimiento, carga rápida y capacidades de personalización, incluso en la versión gratuita..
Ya hablaré más de este tema, una auténtica revolución, pues recientemente Astra ha sido el primer tema – no por defecto – en superar el millón de instalaciones.
Cómo hacer fija la cabecera en el tema Astra
Si no tienes ganas de adquirir la licencia Pro de Astra solo por esta funcionalidad no es necesario, solo tienes que hacer este pequeño truco.
Abre el personalizador de WordPress, bien desde la portada de tu sitio en el icono «Personalizar» de la barra de administración, o desde el escritorio de WordPress, en «Apariencia > Personalizar», da igual.
Una vez ahí ve a la sección llamada «CSS adicional» y añade el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* Cabecera fija Astra */ .main-header-bar { position: fixed; top: 0; width: 100%; } /*Ajustar relleno del contenido*/ .site-content { padding-top: 75px; } /*Ajustar relleno del contenido en moviles*/ @media (max-width: 800px) { .site-content { padding-top: 175px; } } /*Ajustar relleno del contenido en moviles*/ @media (max-width: 650px) { .site-content { padding-top: 200px; } } |
Cuando publiques los cambios pasarás de la cabecera estándar de Astra…
A una cabecera fija como esta:
Extra: Cabecera fija de Astra semitransparente
Para terminar de rizar el rizo, puedes hacer que la cabecera fija de Astra sea semitransparente y, de paso, aplicarle un color de superposición.
Solo tendrías que añadir el siguiente código:
1 2 3 4 | /* Cabecera fija Astra semitransparente */ .main-header-bar { background: rgba(40, 118, 157,.5); } |
Por supuesto, cambiando los valores rgba a los que tú quieras o se adapten mejor al diseño de tu web.
Con los valores anteriores se vería así…
Espero que te haya gustado este sencillo tutorial.
Pronto habrá más trucos y guías sobre el tema Astra, que como te decía me está encantando.
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
