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
Ya sabes que el archivo functions.php está dentro de la carpeta wp-content -> themes -> revolutionpro -> functions.php
/* Header Top
*******************/
/* Registrar */
genesis_register_sidebar( array(
'id' => 'utility-bar-left',
'name' => __( 'Barra Top Izquierda', 'revolution-pro' ),
'description' => __( 'Este es el widget izquierdo de la barra de utilidades', 'revolution-pro' ),
) );
genesis_register_sidebar( array(
'id' => 'utility-bar-right',
'name' => __( 'Barra Top Derecha', 'revolution-pro' ),
'description' => __( 'Este es el widget derecho de la barra de utilidades.', 'revolution-pro' ),
) );
/* Mostrar */
add_action( 'genesis_before_header', 'rag_utility_bar' );
function rag_utility_bar() {
echo '<div class="utility-bar"><div class="wrap">';
genesis_widget_area( 'utility-bar-left', array(
'before' => '<div class="utility-bar-left">',
'after' => '</div>',
) );
genesis_widget_area( 'utility-bar-right', array(
'before' => '<div class="utility-bar-right">',
'after' => '</div>',
) );
echo '</div></div>';
}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.
Copia y pega este código al final de tu hoja de estilos. Te recuerdo el camino: wp-content -> themes -> revolutionpro -> style.css
/* Para ocultar la barra en dispositivos moviles */
.utility-bar {
display: none;
}
@media only screen and (min-width: 960px) {
.utility-bar {
display: block;
background-color: #000; /* Cambia el color de fondo de tu barra aqui */
color: #fff; /* Cambia el color del texto de toda la barra aqui */
font-size: 10px; /* Cambia el tamaño de las fuentes de la barra aqui */
}
.utility-bar .wrap {
max-width: 100%;
width: 1200px;
display: block;
position: relative;
margin: 0 auto;
height: 30px; /* Altura de la barra*/
top:7px;
}
.shrink .utility-bar .wrap {
display:none;
}
.utility-bar a {
color:yellow; /* color de los enlaces en la barra */
text-decoration:underline;
}
.utility-bar-left,
.utility-bar-right {
width: 50%;
}
.utility-bar-left p,
.utility-bar-right p {
margin-bottom: 0;
}
.utility-bar-left {
float: left;
}
.utility-bar-right {
float: right;
text-align: right;
}
}Bueno, ya ves que ahora ya funciona todo perfectamente.
Por supuesto a este código CSS le puedes hacer lo que quieras para personalizarlo más a tu gusto.
Yo te lo he preparado con comentarios para que sepas donde tocar y cambiar cosas como:
- La altura de la barra superior
- El color de fondo
- El tamaño y color de fuentes
- El color de los enlaces…
Pero ésto son solo ejemplos que te pongo ahí para que veas lo fácil que es.
En realidad con un poco de conocimiento de CSS puedes hacer lo que quieras.
Vamos a por un detallito más.
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:
Ve al archivo sticky-header.js que encontrarás en: wp-content -> themes -> revolutionpro -> js -> sticky-header.js
Una vez allí localiza la línea 58 y allí cambia el 20 por 0. Aquí te dejo el código entre las lineas 52 y 65. Pero sólo tienes que localizar el 20 ahí y poner 0.
/**
* Toggle the shrink class on the site-container element.
*
* @since 1.0.0
*/
toggleShrinkClass = function() {
if ( 20 < $( document ).scrollTop() ) {
containerHasShrunkClass = true;
$( '.site-container' ).addClass( 'shrink' );
} else {
containerHasShrunkClass = false;
$( '.site-container' ).removeClass( 'shrink' );
}
}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 108 clases publicadas con más de 216 vídeos .
¡Nos vemos pronto con un nuevo snippet!
