version-3-0-rethinking-how-a-page-builder-should-workIt’s been 10 months since we’ve unleashed Page Builder Sandwich to the public. We now have around 6,000 active installs, and that’s quite an achievement for us. We’ve gotten a ton of feedback because of it as well, both good and bad. The consensus however, is that people enjoy how easy it is to build layouts and create their content compared to the other page builders out there.

A large amount of the feedback we got were feature requests, and we’ve added in a lot of those features the past few months. But as we kept doing so, we were also began slowly changing the user interface in the process. And, consequentially, we were also changing the user experience… for the worst. It had come to the point though that we needed to rethink the interface, because it simply did not work smoothly anymore, and the different features did not jive together with it too.

The Defunct Interface

In the previous versions of PBS, we wanted everything to be in the form of buttons. Why? Because buttons are easy to use. You just… click on them. On the older versions of the inspector (the sidebar on the image above), clicking a button would increase a value, then shift+clicking a button would decrease it. That sounds easy enough. But with the addition of carousels, tabs, maps and other new elements and features, all those buttons became a mash of different icons with different designs, and kinda started looking more like hieroglyphics than a cool interface. This wasn’t a problem for seasoned users, but it’s quite intimidating to look at if you’re new to PBS.

Next, there were a couple of problems showing up on the inspector. The original idea was to make everything simple and available inside the inspector. And by everything, I meant everything – from turning text into headings, to changing background colors, font colors, you name it. In its current state however, the inspector now contains a lot of options that will have you use the mouse wheel to scroll up and down consistently. Quite different from the inspector I formerly hoped to make for users.

Lastly, we recently introduced shortcode mapping for your favorite plugins. This feature required us to create text fields, number sliders, checkboxes, and additional new option types needed to make your shortcode editing experience more pleasant. Initially, it was a good idea, and yes, it made manipulating shortcodes easier for you. But again, this feature deviated from our “buttons only” interface. In retrospect, it was really impossible to use only buttons for changing shortcode attributes. Now, in the latest version, we ended up with 2 types of controls: the buttons and the shortcode fields.

There are a few more reasons that made us decide that our interface was no longer effected (or suited for our needs), but the above points are the major ones. One thing was always for sure though: we knew that had to update the interface.

Defining How A Page Builder Should Ideally Work

Instead of jumping in and changing things right away, we took a hundred steps back to take a look at the whole page builder experience. We wanted to bring in a new life to the interface. Truthfully, we didn’t want to keep rebuilding it year after year. It’s  exhausting and definitely does not bring significant help to the WordPress community. This time, we decided to do things slowly and carefully. We’ve studied every corner of Page Builder Sandwich and what makes it a good page builder, and finally  fleshed out the whole editing experience into a few core concepts.

Essential Concept #1: Typing Directly in your Content to Edit Stuff

One of the main reasons for installing a page builder is to get out from the constraints of the backend text editor of WordPress. It’s not that the backend editor isn’t good, but when creating your webpages, it doesn’t immediately show you what your webpage would look like to your site visitors, nor does it allow you to layout your content outside a one-column layout. You can only see your text there and some images, but none of the more elaborate stuff (e.g. contact forms). You can add shortcodes, yes, but they won’t show up in their rendered form*.

* There are plugins being made by others to address this such as Shortcake UI, but that’s beside the point.

That’s where front end page builders come in. They bring the editing experience out from the backend, and into the front end, with you editing your site the way your visitors would really see it. As Pippin would phrase it: What you see is what you get (WYSIWYG).

Another good thing about being a frontend editor is that it allows you to edit your text directly. Typing in headings and paragraphs gives the ease of using the usual word processor in website building. Buttons and tab labels should be also changeable by simply clicking on them and typing.

This is the area most other page builders don’t deliver well on. Most of them force you to type inside a text field to edit everything. Again, this shouldn’t be the case in real frontend page builders. Typing and editing text directly has been a strong point of Page Builder Sandwich since version 2, and we made sure that this is still upheld in version 3.

Essential Concept #2: Utilizing the Mouse for Quick Tweaks

The mouse is a powerful tool that often gets neglected in page builders. Often times, page builders use it to allow people to drag stuff around and drop them in different locations, or to click on buttons or input fields. While this is okay, there is so much more that you can do with the mouse in terms of page building.

For one, there is awesome visual feedback in using the mouse as the tool in editing the page, especially in adjust visual properties like margins, paddings and sizes. Now, tweaking your elements becomes a natural experience.

In PBS version 3, you will be able to adjust a number of things using your mouse. You can adjust margins/spacings between individual elements, the paddings within your columns, as well as the sizes of images, icons and maps. We’ve also replaced buttons that allow you to change numerical values into sliders.

Essential Concept #3: Text Should be Easy to Style

If you take a step back from your monitor, you’ll notice that most of what you add in your webpages are text content. Yes, we do have images and icons in there to accompany them – and lately we tend to add in larger images in our sites. But the majority of the important content are all text: headings, bullet lists, paragraphs, quotes, etc. Alongside it is how we style our text to suit our designs. We either change their sizes and colors, or make it bold or italicized. This is for our content more readable, relevant, and attractive to our respective readers.

Because we style the text often, buttons which allows us to change styles should be very accessible. They shouldn’t be tucked inside a pop up box that we need to open up first. Most page builders suffer from this sickness. In order for their user interface to be labeled as ‘clutter-free’, even the most-used options are shielded in plain view.

To solve this, we took a look at the most commonly used word processors. We noticed that they usually have a row with a ton of buttons near the top of the screen used to format text and copied the same layout for version 3. We now have a row of all the text styling buttons always present on the top of your screen. This makes styling really quick and close to your second nature in text editing.

Essential Concept #4: Advanced Styling Options Should be Flexible Yet Easy to Understand

The bottom line with a page builder is that it should allow people to create stunning designs easily. This means that we should provide a lot of different settings and options without compromising a difficult learning curve. Being able to adjust margins, paddings and styling text are great, but those can only do so much. You’ll need much more elaborate options to get the job done, options like background images, patterns, borders, fixed backgrounds and more. Stacking in all of those different settings can get a little overwhelming, so we’ve simplified some of them and organized them in categories to make things friendlier in version 3.

Essential Concept #5: Shortcode Support

Lastly, let’s not forget that our page builder stands on top of WordPress. We should embrace the platform and its features and not restrict them or deviate from them. One huge feature that WordPress provides are shortcodes. It doesn’t mean that the whole content should be composed of shortcodes – that would be messy – but instead we should just be compatible with them. A lot of plugins and themes use shortcodes, and it would be such a loss if ignored them all. In fact, shortcodes gives the users utmost flexibility when it comes to creating pages.

We introduced a few weeks ago our shortcode mapping system, and because of it we have mapped hundreds of shortcodes from hundreds of plugins. We have prioritized the most popular plugins found in the WordPress plugin directory, so chances are you’ll encounter them in your own sites. This has only strengthened in version 3, and we will continue to improve this on the way forward.

Conclusion

We’ve taken all those essential properties above and built them into Page Builder Sandwich version 3. It’s the best page builder we have built for WordPress so far. It’s more intuitive and more natural to use, it performs faster, easier to use, and more friendly than ever.

If you have any thoughts on an essential page builder feature, let us know by commenting it below.

Leave a Reply