Select Page
Moving sidebar to the bottom of content - Divi
Moving sidebar to the bottom of content – Divi

I am using the Divi theme and page builder for my WordPress website and am happy with it.


No Sidebar - Page Layout selected in Divi Page Settings
No Sidebar – Page Layout selected in Divi Page Settings

On some of my blog posts ( example: https://webdevpuneet.com/how-to-remove-hover-on-touch-devices/ ) – I had to use the ‘No Sidebar’ Page Layout ‘Divi Page Settings’ while editing the post. But I needed the sidebar to come after/below the content. So I had to go through this simple code editing.

Sidebar.php code

<?php
if ( ( is_single() || is_page() ) && in_array( get_post_meta( get_queried_object_id(), '_et_pb_page_layout', true ), array( 'et_full_width_page', 'et_no_sidebar' ) ) ) {
?>
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="sidebar" style="width:100%;">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div> <!-- end #sidebar -->
<?php endif; ?>

<?php
	return;
}

if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
	<div id="sidebar">
		<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</div> <!-- end #sidebar -->
<?php
endif;

Example / Screenshots

Example – https://webdevpuneet.com/how-to-remove-hover-on-touch-devices/

Sidebar coming at the bottom of content in posts with no sidebar
Sidebar coming at the bottom of content in posts with no sidebar