Barra lateral de widgets fija en Divi

¿Te has planteado alguna vez lo útil que puede ser una barra lateral fija que se mueva a medida que los usuarios ven tus páginas? Podrías usarla para animarles a visitar tus redes sociales, mostrar un formulario de suscripción, una serie de imágenes que enlacen a otros sitios tuyos, anuncios, lo que sea.

Pues hoy te traigo un truco para crear en Divi una nueva barra lateral fija, que se mueva con la navegación del usuario, flotante en la parte izquierda del contenido, en la que puedas añadir los widgets que quieras.

Solo tienes que animarte a añadir un par de códigos…

Las funciones imprescindibles

Abre el archivo functions.php del tema hijo de Divi y añade al final lo siguiente:

/* Nueva area de widgets fija para Divi */
// Crear nueva area de widgets fija
function myprefix_widget_area() {
register_sidebar(array(
'name' => 'Barra lateral fija',
'id' => 'myprefix-widget-area',
'before_widget' => '<div id="%1$s" class="myprefix_widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action('widgets_init', 'myprefix_widget_area');
// Cargar jQuery
function myprefix_load_jquery() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'myprefix_load_jquery');
// Agregar el nuevo area de widgets al footer
function myprefix_add_floating_sidebar() { ?>
<div id="myprefix-widget-area-wrap"><?php dynamic_sidebar('myprefix-widget-area'); ?></div>
<script>
jQuery("#et-main-area").prepend(jQuery("#myprefix-widget-area-wrap"));
</script>
<?php 
}
add_action('wp_footer', 'myprefix_add_floating_sidebar');

Un poco de estilo con CSS

A continuación añade los siguientes estilos CSS a la caja de CSS personalizado de las opciones de Divi o en la sección de CSS adicional del personalizador de temas, donde prefieras:

/* Estilos barra widgets fija Divi */
@media only screen and ( min-width: 981px ) {
#myprefix-widget-area-wrap { 
z-index:1000; 
display:block !important; 
float:left; position:fixed; 
background-color:white; 
margin-top:2px;
}
.myprefix_widget { 
padding:16px; 
}
}
@media only screen and ( max-width: 980px ) { 
#myprefix-widget-area-wrap { display:none; }
}

Aquí una captura de dónde puedes ponerlo:

Por supuesto, puedes hacer retoques en el CSS si fuese necesario.

¡Ya está! Con esto tienes toda la maquinaria necesaria.

Ahora encontrarás una nueva área de widgets en la que podrás añadir los widgets que quieras, como harías normalmente.

Y, una vez guardes los cambios tus widgets añadidos se mostrarán en tu barra lateral fija, que se moverá con la navegación de los usuarios, mostrando siempre ahí a mano lo que hayas agregado.