How-Page-Builder-Sandwich-Is-Different-from-the-RestThere are dozens and dozens of page builders out there, and you must be asking yourself: what’s so special about Page Builder Sandwich? Why would you want to bother using it if you’ve already got one in your hands?

In this article, I’ll be enumerating a handful of key features found in Page Builder Sandwich that makes it unique, and a total must-have for both content creators and designers. If you don’t know what a page builder is and why you need it, don’t worry, we have some stuff that can help you out.

1. You won’t just see a visual representation of your content, you see and edit your actual content

In other page builders, you see areas that just represent your content. You mainly layout your content with blocks and rectangular shapes, and result looks more like a framework of where your contents would eventually look like in your page. This leads constant clicking of the preview button just to see what the results would look like.

With Page Builder Sandwich, all editing is performed in the front end of your site and you edit your content directly for a true what-you-see-is-what-you-get experience.

2. Quick and easy direct editing without all those pesky popup dialogs

Popups have been a staple to page builders. In most, if you want to edit anything in your layout, whether it be a heading, a button label, or a small tagline text, you would first have to first wait for a popup dialog to open and to perform your changes inside it.

We have made it our goal to minimize the use of popups across the board in Page Builder Sandwich. By removing popups, editing any content is made easier and smoother than ever.

Editing is done in a straightforward manner – click on your text to put your cursor there and start typing away. You no longer have to wait for a popup dialog containing a TinyMCE editor to begin editing. The best part of it is that you can still drag and drop your content around.

Another innovation that helps with hassle-free editing is the ever-present inspector. The inspector serves as your toolbox and properties editor. Tools for formatting your content: text colors, headings, font size adjustments, margins, paddings, borders, blockquotes, and many more are an easy click away.

Reused functionality

3. Re-used WordPress functionality

Another thing we’ve noticed in other page builders is that they often reinvent the wheel. Some implement their own color pickers, image uploaders, gallery creators and various other tools. There’s nothing wrong about this per se, but WordPress is a treasure trove of code snippets, so why not use those?

WordPress is a huge and wonderful platform and contains a lot of cool tools built by tons of awesome contributors. Page Builder Sandwich uses functionality that is already bundled with WordPress as much as possible.

Instead of using our own color picker, we use the Iris color picker. Instead of our own image uploader, we use the media manager. Then there’s also backbonejs, underscorejs, wp.hooks and wp.shortcode to name a few more nifty scripts. We use all of those, and this has made our lives easier and this also leads to a more stable codebase.

Re-using WordPress’ functionality has led to some awesome surprises as well. For example, since we used the media manager to insert images, it was a pleasant surprise that we could now also handle WordPress galleries, video and audio playlists and remote URLs right off the bat. We could also just use the media manager to perform image editing, which eliminated hours of unnecessary development headaches.

4. Keyboard navigation and Shortcuts

In other page builders, the mouse is your friend. You drag and drop stuff with it and double click stuff to edit. But the keyboard is often neglected.

For example, in some builders, you can’t easily edit text one paragraph/section above from where you are editing because you will have to click out of a popup dialog and click into a new one. In Page Builder Sandwich, you can navigate with your keyboard. Hit the arrow keys to navigate between your content, it works even if your other content tucked inside another row or column.

Another important feature is the undo and redo keyboard shortcuts. They may not seem much at first, but think about this: what if you drag and dropped your content accidentally in the wrong location. In some page builders, you’ll have to drag it back to it’s original position. In Page Builder Sandwich, both undo and redo work. So whether you want to revamp what you typed, or want to revert back your dragged content (or multiple dragged contents), just hit undo or redo. Undo and redo works for drag and dropped content and even for property changes such as font-sizes and row paddings. This makes them powerful tools in your editing arsenal.

Relaxing experience

5. A true frontend page builder – A more relaxing and hassle-free editing experience

Our mindset during development is that editing in the front end should not feel like you are still editing using back end tools. It should not feel like the builder was created initially for the back end then ported into the front end.

All in all, for me, the main differentiator of Page Builder Sandwich is that we have built it with the goal of being a “true” frontend page builder – a re-imagination of how front end editing should be.

Leave a Reply