Move Structure Panel Next to Element/Attribute Panel

I find myself moving the cursor back and forth across the canvas to go from the structure panel to the element/attribute panel and back. If the panels were next to each other, it would be easier for me. This could be accomplished several ways: ability to float/dock a panel, setting to specify the locations of the 3 panels, etc. Idea submitted to idea board.


YES!!! This is such a simple but brilliant idea that would save literally kilometers of mouse cursor travel. I don’t see it on the ideas board, but if I do, I’ll definitely upvote it!

Bump: Submitted this suggestion to idea board end of May and it hasn’t made it through the gate keepers yet. Dragging the cursor back and forth across the canvas to go from the element list to the structure panel is frustrating. WPCodeBox has a simple and elegant solution - a toggle switch - “Canvas in Center” or “Canvas on Right”. Please consider. I have implemented the CSS provided (or collected) by Sridhar to move the structure panel to the left. However, there have been some oddities (such as a third (empty) panel appearing between the elements+structure panels on the left and the canvas on the right which makes the canvas very tiny on my laptop screen),

1 Like

I just started playing with Bricks today, and the distance between the structure panel and the element panel was killing me. Here’s the code I used to move the structure panel all the way to the left, bump the element panel 300px to the right to make room for the structure panel, and adjust the preview panel to account for the new positioning:

function rearrange_bricks_editor() {
	if ( bricks_is_builder() ) {
		echo '<style>';
		echo '#bricks-structure {left: 0; right: auto !important; width: 300px;}';
		echo '#bricks-preview {margin-right: 0 !important; }';
		echo '#bricks-structure {left: 0; right: auto !important; width: 300px;}';
		echo '.brx-body:has(.show-structure) #bricks-panel-header {min-height: 61px;}';
		echo '.brx-body:has(.show-structure) #bricks-panel {margin-left: 300px;}';
		echo '</style>';
add_action( 'wp_head', 'rearrange_bricks_editor', 11 );
1 Like

Thank you for sharing. This part of the Bricks workflow is very annoying. Sridhar shared something early on which I used, but it started to go wonky after a number of Bricks updates. I wish Bricks would include some simple toggle “structure panel on left”, “structure panel on right”. WPCodebox has such an option and it is delightful to be able to select which side.

You could also use Advanced Themer which allows you to add shortcuts to your most used elements on the right next to the structure panel. You can also resize the Structure panel.

True, AT provides help. But I would prefer to work with all my tools together, not split in half with a canvas in the middle

I probably should have mentioned that I placed the code I mentioned in my last comment into the functions.php file of the Bricks child theme.

There should be a way to insert it using WPCodeBox as well, but I haven’t tried that.