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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.5 / 5. Total de votos: 8

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido