Move Structure Panel Next to Element/Attribute Panel

Feature Requests / Improvements
1

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.

4 Likes
2

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!

3

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
4

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
5

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.

6

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.

7

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

1 Like
8

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.

9

I was just doing a search on the forum for this exactly! I too would like structure panel on the left.
In fact, I would love to be able to “dock” the panels, or at minimum the structure panel.
Now what would really be great is if I could “undock” both the left and right panels and use second monitor :grinning: ala Photoshop and Figma or how ACSS has it’s panel in the builder and on the frontend, allowing you to work with ACSS on multiple screens seamlessly.