Monday , March 4 2024
Home > Magezon News > Product Releases & Updates > Page Builder 3.0 Sneak Peek: More Control Over The Layout

Page Builder 3.0 Sneak Peek: More Control Over The Layout

page-builder-control-over-layout-thumbnail

In the previous post, we introduced you to a most awaited feature called Frontend Editor. Today, we’re excited to share with you other upcoming features of Page Builder’s new version regarding control over the page layout. Scroll down to discover what they are and what they actually do! 

Content Positioning

content-positioning

In the Page Builder’s new version, we will add a new vertical alignment option for columns. As a result, you can easily position the content within the column in the same manner, such as top, center, and bottom. It will make the content have a put-together look and be more neat and classy.

Draggable Sizing & Spacing Controls

We’re also working on another helpful feature named Draggable Sizing & Spacing Controls. This feature will help you save tons of time modifying the width, height, margin, and padding of every element, row, and column. You can quickly drag to adjust these settings directly without opening the settings window and entering values. Let’s go into details on each setting.

1. Draggable Widths & Heights

draggable-width-and-height

With the UI improvements, customizing sizing becomes easier and faster than ever. You simply hover over the edge of any four sides of the element, column, or row and use the small draggable anchors to drag in either direction. 

2. Draggable Margin & Padding

draggable-padding-and-margin

What’s more, you’re able to drag to modify the top, bottom, left, or right padding and margin of any element, row, or column. With the draggable anchors, you can add padding to any inside border of an element by hovering over an edge and dragging the anchor to increase or reduce the padding.

Much like adding padding, you simply hover over the outside border of a row, column, or element and drag the anchor to adjust margins. Besides, you’re able to break the grid by adding negative margins. The negative margins allow you to position elements in any direction, break them free from their parent containers and create overlapping effects.

What’s more, the extension will give you the ability to adjust top and bottom margins/padding or left and right margins/padding simultaneously.

3. Set New Width, Height, and Overflow Controls

width-height-overflow-control

In addition to the sizing controls, the new version will have a new set of options for overflow. This option comes in handy when you want to adjust a specific height or width for an element. You’re able to control overall, horizontal, and vertical overflow settings. Furthermore, it will include 4 custom overflow values to choose from: Visible, Hidden, Scroll, Auto.

Note: What you see in the sneak peek’s illustration images doesn’t reflect our final Page Builder that will be published. As the extension is still in development, any change may happen.

Wrap Up

We hope this post has helped shed some light on the new features regarding controlling the page layout of the new Page Builder and how you can use these features in this latest version. Stay tuned for more awesome updates, and leave a comment below to let us know what you think of these new features.

About Jen Tran

Jen Tran
Jen Tran works for Magezon as a marketer. She is responsible for writing blogs about Magento and Magezon extensions to help Magento users have a better understanding of it.

Check Also

smart code editor banner

Page Builder 3.0 Sneak Peek: Smart Code Editor

Hi everyone, in this sneak peek, we’re excited to reveal one of the brand-new features …

Leave a Reply