Have you ever thought about how useful a fixed sidebar that moves as users view your pages could be? You could use it to encourage them to visit your social networks, display a subscription form, a series of images that link to other sites of yours, ads, whatever.
Well, today I bring you a trick to create in Divi a new fixed sidebar, that moves with the user navigation, floating on the left side of the content, where you can add the widgets you want.
You only have to add a couple of codes…
Table of Contents
Essential functions
Open the functions.php file of the Divi child theme and add the following at the end:
/* New fixed widget area for Divi */
// Create new fixed widget area
function myprefix_widget_area() {
register_sidebar(array(
'name' => 'Fixed sidebar',
'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');
// Load jQuery
function myprefix_load_jquery() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'myprefix_load_jquery');
// Add the new area to 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');Code language: PHP (php)A little CSS styling
Then add the following CSS styles to the Custom CSS box of the Divi options or in the Additional CSS section of the theme customizer, wherever you prefer:
/* Fixed widget sidebar styles 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; }
}Code language: CSS (css)Here is a screenshot of where you can put it:
Of course, you can tweak the CSS if necessary.
That’s it! With this you have all the necessary machinery.
You will now find a new widget area where you can add the widgets you want, as you normally would.
And, once you save the changes your added widgets will be displayed in your fixed sidebar, which will move with the users’ navigation, always showing there at hand what you have added.
