Do you want to add the sidebar into no-sidebar site? Off canvas or toggle effect will be the good idea for it. So sidebar will not occupy the extra space from your content area. In this article I am showing how you will use the primary sidebar into off canvas sidebar. See the live preview at below:

Disabling the Blog Sidebar

Navigating to Appearance -> Customize -> Content -> Blog Layout and disabling the sidebar. Now sidebar will not appear on the site.

Adding Widgets into Primary Sidebar

Primary Sidebar is always enabled at Dashboard. So navigating to Appearance-> Widgets page and adding the widget(s) into Primary sidebar.

Creating Off Canvas Sidebar

Creating the off canvas markup at site and adding the Primary sidebar there. Beaver Builder Theme have fl_body_open hook. Rendering the off canvas sidebar HTML markup using this hook and displaying the primary sidebar with WP’s dynamic_sidebar() function.

Open the functions.php file of BB child theme and add the following PHP snippets at end of the file. Before editing the file you will keep a backup of your child theme.

Off Canvas Sidebar Panel

add_action( 'fl_body_open', 'probb_off_canvas_sidebar' );
function probb_off_canvas_sidebar()
{
	echo '
' . "n";
	echo '
' . "n";

	echo '
' . "n";
	echo '' . "n";
	echo '
' . "n";

	dynamic_sidebar( 'blog-sidebar' );

	echo '
' . "n";
	
	echo '
' . "n";
	echo '' . "n";
	echo '
' . "n";

	echo '
' . "n";
}

Adding Custom CSS

Creating the full height off canvas panel with CSS. Open the style.css file of your BB child theme and drop this custom CSS code there

Custom CSS

.off-canvas-sidebar {
	background: rgba(0,0,0,0.5); /*CHANGE THE RGBA VALUE */
	height: 100%;
	width: 100%;
	position: fixed;
	right: 0;
	z-index: 999;

	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition:    all 0.7s ease-in-out;
	-ms-transition:     all 0.7s ease-in-out;
	-o-transition:      all 0.7s ease-in-out;
	transition:         all 0.7s ease-in-out;

	-webkit-transform:  translate(100%,0);
	-moz-transform:     translate(100%,0);
	-ms-transform:      translate(100%,0);
	-o-transform:       translate(100%,0);
	transform:          translate(100%,0);
}

.off-canvas-sidebar.on {
	-webkit-transform:  translate(0,0);
	-moz-transform:     translate(0,0);
	-ms-transform:      translate(0,0);
	-o-transform:       translate(0,0);
	transform:          translate(0,0);
}

.fl-sidebar {
	background: #fafafa; /*CHANGE THE HEX VALUE */
	display: block;
	height: 100%;
	margin: 0;
	max-width: 320px;
	overflow-y: auto;
	padding: 20px;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 10;
}

.fl-sidebar::-webkit-scrollbar {
	width: 5px;
}

.fl-sidebar::-webkit-scrollbar-track {
	background: #ddd; /*CHANGE THE HEX VALUE */
	border-radius: 5px;
}

.fl-sidebar::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: #bbb; /*CHANGE THE HEX VALUE */
}

.sidebar-close-btn {
	margin-bottom: 20px;
}

.sidebar-cta-btn,
.sidebar-cta-btn:hover,
.sidebar-cta-btn:focus,
.sidebar-cta-btn:active {
	color: #fff; /*CHANGE THE HEX VALUE */
	cursor: pointer;
	left: -20px;
	line-height: 12px;	
	opacity: 1;
	padding: 10px 4px 0;
	position: absolute;
	top: 48.5%;
	z-index: 999;

	-moz-transition: transform 3s ease;
	-webkit-transition: transform 3s ease;
	-o-transition: transform 3s ease;
	transition: transform 3s ease;
}

.sidebar-cta-btn i {
	font-size: 12px;
	height: 12px;
	position: relative;
	width: 12px;
	z-index: 1;
}

.sidebar-cta-btn::before {
	border-width: 30px;
	border-style: solid;
	border-color: transparent #000 transparent transparent;
	content: "";
	position: absolute;
	top: -15px;
	right: 0;
}

.sidebar-cta-btn:hover::before {
	border-color: transparent #f00 transparent transparent;
}

Creating JS Script

Visitor will not see the sidebar when visiting the site. They will click on “+” icon , off canvas panel will slide from right to left and sidebar will appear on the site. Clicking on the “X” icon they can hide the sidebar. These whole functionality is controlling with the JavaScript.

Create a new file “toggle-sidebar.js” and save into BB child theme’s js (case-sensitive) folder. You will create the js folder if it is not available in your child theme. Here is the full code of this JS file
Full Content of toggle-sidebar.js file

(function(document, $, undefined){

	$(document).ready(function () {

		if( $('#wpadminbar').length > 0 )
			$('.off-canvas-sidebar').css({'top': $('#wpadminbar').height()});

		$('.sidebar-cta-btn, .sidebar-close-btn').click(function(){
			$('.off-canvas-sidebar').toggleClass('on');
		});

	});

})( document, jQuery );

Later enqueue the JS file with wp_enqueue_scripts hook on the site. Open the functions.php file and drop this small PHP snippet
Enqueue JS Scripts

add_action( 'wp_enqueue_scripts', 'probb_enqueue_script_toggle_sidebar' );
function probb_enqueue_script_toggle_sidebar()
{
	wp_enqueue_script( 'toggle-sidebar', get_stylesheet_directory_uri() . '/js/toggle-sidebar.js', array(), '26072017', true );
}