Ch. 071 Layout Builder

In this chapter:


The Layout Builder is an advanced interface used to assist in creating complex responsive layouts for Pressero content. The Layout Builder provides pre-defined layouts that can easily be dragged and dropped to the content of the page. Once a layout is created the user can then adjust the content of the layout by changing images and replacing text. Layout Builder is not a page creator that provides an unlimited set of options, but instead provides a limited set of well formatted options for the user to build upon.


Starting the Layout Builder

You can find the Layout Builder when editing Page Content, Category Content and Product Content. Simply click the button and the Layout Builder will launch. Any content that already exists within these content areas will be shown within the Layout Builder, but will NOT have the control options that the Layout Builder Layouts will have. 


Layout Builder Elements

There are three major areas of the Layout Builder. The Content Controls will affect the entire applications for saving, undo, redo, code view and help. The Layout Library is where all the "Layouts" exist, it is here that the user will drag and drop Layouts to the canvas. The "Canvas" is where all the users content will be manipulated.


Text Layouts

Choosing "Text" from the Layout Library a panel will open to show all of the text layouts. Simply click and drag any layout to the canvas. These layouts only have image elements.


Image Layouts

When choosing "image" from the Layout Library a panel will slide open showing all the possible image layouts. These layouts only exist of image elements.


Text + Image Layouts

When choosing "Text + Image" a panel will open showing all of the possible text and image layouts. Just click and drag any layout to the canvas. These Layouts have both images and text.


Drag and Drop

When you drag and drop any layout to the canvas you will see a ghosted version of the layout connected to your mouse hover over the canvas. There will also be a blue bar that will show, this indicates where the currently dragged layout will drop upon the canvas.


Layout Controls

When clicking a layout you will be presented with several controls. First the layout will be highlighted in blue with a tabbed area containing controls. Depending on the type of layout these tabbed controls will change. For text layouts you will have a "move", "column manager" and delete. For image or text + image layouts the tabbed controls will have "move" and delete.

Move: The move control allows the user to drag and drop the layout to different areas on the page.

Column Manager: This will allow the user to manage how columns of text reacts to different screen sizes.

Delete: This will delete the layout completely, all content edits will be lost.

Along with the Layout tabbed controls each element inside of these layouts will have their own controls. One for editing text and one for editing images. These controls are green.


Text Editing

When clicking on the green text editing control a separate text editing control will show. Here you have many controls to affect text.


Managing Columns

Managing columns can be a very complex idea. Here the user is managing how the columns will react to different device sizes. But, for the most part the user will not see any of these changes affect the current design. The reactions that the user is setting up here will only show when the user is actually viewing their content on the corresponding device.

To manage columns just click on the columns indicated within the device areas. Once a column is selected a slider bar will show at the bottom of the modal with the columns current percentage width. Slide the control left and right to increase or decrease how the columns will show on that device size.

Below you will see that a two column text area is being manipulated. At the current settings shown below the two columns will show stacked and 100% on phone and tablet devices. But, for small laptops and desktops these two columns will adjust to 50% width and show side by side.


Image Manipulation

When clicking on the green image button the user will be presented with our image manipulation area. Here the user can replace the image, add alt text, title text, padding, margin, borders and background color. 

As the user changes the image and adds options the changes will show in the top area.

Padding will show as space between the image and its border.

Margin will exist and space out side of the border around the image but the user will not see this adjustment here, it will only show on the live site.

Borders will show between padding and image and have several options; width, style and color.

Background Color will show behind the image, and when padding is added. The color will not show if the image does not have any transparency or if no padding is added.



After editing saving is easy. Just click the "Save" button at the top. The Layout Builder will close and send the user back to the area in Pressero admin that is being edited. This save button just saves the edited layout into the Pressero rich text editor. The user can choose to finish and save to the live site or re-open the Layout Builder and continue editing.

If the user is completely done with their changes then they will need to click save at the bottom of the page being edited, much the same as they would do when editing just through the rich text editor in Pressero admin without the Layout Builder.