Page Builder Sandwich is not like your typical page builder, it’s uncomplicated and simple to use.

You can view the video below for a quick tour.

Where Is The Editor?

First, create a new page, post or CPT. Then visit your new post or any existing one in your frontend. PBS is 100% frontend, you won’t have to tinker around in the backend.

There should be a “Page Builder Sandwich” button on the top of your page (on your admin bar), click on that to start editing. You should see the text formatting area pop up from the top, and the add elements panel pop up from the side. The content area of your theme is now your editor!

You can only edit single pages with PBS. You can’t edit a list of blog posts, or a 404 page since those are created by your theme. Posts, pages and custom post types are okay.

Editing Your Content

Now here comes the awesome part.. once you are in the frontend and inside the editor, click any text in your content or click inside your content area and start typing! Unlike other page builders, PBS allows you to directly edit content without the need to go through popup dialog boxes.

Formatting Your Content / Making Stuff Look Pretty

While editing, the area on the top is called the Text Formatting Bar. This bar contains all the formatting tools that you will use for styling text like: colors, bold, italicize, alignments, adding links, bullets and more. Hover over each button to find out what the tool does.

Adding Elements

Hover your mouse over the Add Elements button on the upper left of the screen to show the Add Element Panel. You can also just move your mouse to the left side of the screen to make it show up.

To insert any element, hold down your mouse on one, then drag it into your content area. The area where the element would be placed would become highlighted. Release your mouse button to place the element.

Styling and Modifying Elements

Hover your mouse over any element that you have in your content and then outlines and toolbars should appear over them.

You can hover your mouse over the edges of the outlines to increase/decrease margins between elements.

You can also click on a button on the toolbar to perform quick actions on the element. Clicking on the gear icon on the toolbar would bring up the Properties Inspector which contains more options.

The Properties Inspector

The properties inspector gives you more control over the looks of your elements. You can add a lot of things like shadows, animations, change map colors, border radius, and plenty more.

You can also access the properties of the parents of element. For example, if you placed an image inside a column and opened up the properties inspector, then you can access the properties of the image, the column it’s contained in, and the row which the column is contained in.

The properties inspector contains a lot of different settings for different elements, so be sure to check them all out.

Using Shortcodes

Page Builder Sandwich shows you actual shortcodes in the frontend, and you can edit them easily too!

If you have memorized your shortcodes, you can insert shortcodes by typing them directly in your content. But if you haven’t memorized them all (who does that?) the inspector lists all the shortcodes available in your site. Drag a  Shortcode button from the inspector into your content area and find the one you want to insert, click on that to insert it.

Shortcodes get rendered into actual content in the frontend, to edit them, you can select it and check out their attributes in the inspector. Or for more control, you can double click on the shortcode to edit it in raw form. After performing your edits, your shortcode will update to reflect the changes.

Rearranging Your Content

You can click and drag anything and move them anywhere with PBS. When you drag something, move it on top of another element in the page, you can either move them above or below any other content.

Saving Your Work

Once you’re satisfied with your design, just click on the save button on the top left of your page. That’s it!