Como añadir un mensaje fijo en el encabezado de Infinity Pro

En este tutorial vamos a ver como insertar una widget área por encima del encabezado para poder colocar un mensaje fijo en el tema Infinity Pro de Genesis.
Vamos a tener que registrar la widget área y después ubicarla en el tema.
Para ello insertaremos el siguiente código en el archivo functions.php de nuestro tema o en un plugin de funcionalidades que podemos crear y personalizar.
Código para registrar la widget área:

//* Registrar widget area
genesis_register_sidebar( array(
	'id'          => 'before-header',
	'name'        => __( 'Before Header', 'infinity' ),
	'description' => __( 'Esta es la sección antes del encabezado.', 'infinity' ),
) );

Y ahora el código para colocar la widget área en el hook que está antes del encabezado (before-header):

//* Colocar l widget area "before header"por encima del encabezado
add_action( 'genesis_before_header', 'infinity_before_header' );
function infinity_before_header() {

	genesis_widget_area( 'before-header', array(
		'before' => '<div class="before-header widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );

}

Para ver los hooks de Genesis es útil esta imagen de genesistutorials.com:

Una vez guardado este código veremos que en el panel de administración en Apariencia/Widgets hay una nueva widget área llamada «Before Header»:

En esta widget área podemos poner un widget de html con el texto que queramos mostrar o podemos añadir cualquier otro widget que nos interese.

El último paso será ajustar los estilos.

Vamos a tener que dar una posición fija al div before-header y un ancho del 100%. Le podemos dar un color blanco de fondo y centrar el texto:

.before-header {
    background-color: #FFFFFF;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 9999;
}

Luego tendremos que aumentar el padding o espacio superior del encabezado y el icono de Off-screen para dejar sitio a esta barra:

.site-header{
	padding-top: 28px;
}
.offscreen-content button, .offscreen-content-icon button {
    padding: 30px 10px 2px 12px;

}

Con todos estos cambios el resultado es éste:

También podemos darle un poco más de énfasis con un fondo más potente:

.before-header {
    background-color: #d43c67;
    color: white;
}

Y listo! Ya véis que con unos pocos pasos hemos podido tener una nueva widget área dónde podremos poner avisos, texto o cualquier widget.