En más de una ocasión te habrás encontrado con webs que antes del menú tienen una barra superior con enlaces normalmente de contacto.
Esta barra de utilidades, o header top como también se le suele llamar no es más que un widget area donde podemos añadir widgets.
Como adelantaba en la intro, esta barra superior suele valer para poner los datos de contacto, enlaces a redes sociales, acceso a intranets…
Aunque puede estar en cualquier página web, cobra especial importancia en tiendas online porque es un lugar perfecto para añadir varios «quitamiedos» esenciales de los comercios electrónicos.
Hoy vamos a ver cómo crear una barra superior en el child theme de Genesis Revolution Pro. Pero más adelante, añadiré otro snippet para crear una barra superior en Genesis Sample.
Mira, te dejo un ejemplo aquí de lo que vamos a hacer en el tutorial:
Espero que sea lo que estabas buscando, pero si no lo es, contáctame a través del soporte y cuéntame exactamente.
Tutorial para crear una barra superior en Revolution Pro.
Ahora sí, vamos a por el tutorial. Te dejo a continuación todos los pasos y el código necesario para crear una barra superior Revolution Pro, child theme de Genesis Framework.
Recuerda que es cortar y pegar (casi como coser y cantar) pero si lo prefieres te dejo un vídeo abajo en el que yo mismo lo implemento en directo para los que empiezan a tocar código.
Crear las widget areas para la barra superior de utilidades
Copia el siguiente snippet y pégalo al final de tu archivo functions.php
Ahora ya puedes ir al personalizador -> Widgets y verás que aparecen las dos nuevas áreas para widgets de nuestro flamante header top.
Ya las puedes rellenar y verás que el contenido aparece ahí. Pero le falta un poco de presentación. Para ello vamos a trabajar el CSS.
Añade el nuevo CSS para estilizar nuestra barra de utilidades
A continuación te paso los estilos básicos para esta barra de utilidades. Por supuesto puedes cambiar colores, tamaños de fuentes y todo lo que quieras de este snippet.
Cambiar la altura a la que se añade la clase Shrink
Como te decía antes, ya tenemos nuestro Header Top perfectamente funcional y estilizado. Pero si te fijas, a veces al hacer scroll se queda como atascado y empieza a temblar.
Ésto es porque Revolution Pro añade una clase llamada shrink para poder hacer cambios cuando se produce el scroll.
Nosotros hemos aprovechado esta clase de CSS para ocultar nuestra barra de utilidades cuando alguien haga scroll hacia abajo.
Pues bien, ahora tenemos que decirle a esta nueva clase que aparezca inmediatamente al hacer scroll.
Para eso sólo hay que cambiar un valor y listo. Sigue estas instrucciones:
Una vez hecho este ajuste ahora sí, ya tenemos adaptada nuestra barra superior o header top para el child theme Revolution Pro.
¡Listo!
Si prefieres ver todo esto en vídeo aquí te lo dejo:
Espero que te haya gustado y ya sabes que si tienes cualquier duda puedes utilizar el formulario de soporte para alumnos.
Si no eres suscriptor te informo de que cada semana publico nuevos snippets para complementar todo lo que aprendemos en mis Cursos de WordPress Online.
A día de hoy hay un total de 104 clases publicadas con más de 208 vídeos .
¡Nos vemos pronto con un nuevo snippet!