Author: Neil Lock

I’m happy to announce that as of version 2.4, you can now edit your content within your frontend using Markdown!

Markdown Syntax Support

What is markdown? It’s basically like shortcut keys, but instead of pressing a combination of buttons, you type them out and formatting gets applied right away. WordPress recently also just added Markdown support, and now you can also perform those within Page Builder Sandwich. You can add different headings, blockquotes, preformatted text or code, horizontal rules, bullet or numbered lists and links with Markdown.

Think of this as an alternative for using your mouse to click the formatting buttons. For example, while writing a blog post you decide that you want another heading, now you can just type in two pound signs (##) then your heading text. Once you hit enter the whole line would get converted into an <h2> tag. How cool is that?

You can find a list of all supported markdown syntaxes from our documentation page: http://pagebuildersandwich.helpscoutdocs.com/article/4-how-to-use-markdown

You can also try it out from the live demo

A Few Cool Formatting Tools and features

It’s also worth mentioning that now you have a few new tools at your disposal:

• Button tool – Now you can create shortcode-less buttons! Previously, you were just limited to just creating anchor links, not anymore! The great thing about this is that you can directly edit the button label and colors without going through any nasty popups.
• Code tool – Developers rejoice, now you can style inline text as code.
• Horizontal Rule tool – Great for separating your content. There’s a markdown syntax for this also, just type in one or more dashes in a line, it’ll get converted into a horizontal rule.

Aside from those, there are also new convenience features:

• Whenever you paste a link, it’ll automatically get converted into an anchor tag (unless if it’s an embeddable URL like a YouTube video, then the content will get embedded).
• Dragging an image from your finder or explorer directly into the window uploads your image in the Media Manager. This is such a time saver.

Happy New Year to everyone!

I’m excited to share with you that as of version 2.3, oEmbeds are now possible with Page Builder Sandwich! Now you can embed videos, images, threads, and plenty of other content from YouTube, Vimeo, Twitter, Flickr, Instagram, etc.

oEmbeds

Until now there wasn’t a way to add videos or any other type of embeddable content (aside from shortcodes) in the frontend. I’m happy to say that oEmbeds are now fully supported. Simply paste an oEmbed URL anywhere and hit enter then it will get embedded.

What URLs are supported? Well, any of the Embed URLs supported by WordPress! Plus, if you have a plugin that adds oEmbed providers (e.g. Jetpack by WordPress.com) then those will be supported as well.

Probably the best part about this new feature is that embedding doesn’t clutter your content. Embedded URLs in the backend editor would appear as a single line URL string.

If you want to give this a try, click on the live demo link above and paste some URLs there!

Other improvements and bug fixes

• Content type tool buttons (p, h2, h3, etc) will now highlight depending on what’s selected.
• Line height is now applied to the whole element instead of smaller span elements.
• Fixed: Elements sometimes get unnecessary inline styles
• Fixed: The inspector can go behind the admin bar and become undraggable
• Fixed: Better handling of button states
• Fixed: Formatting/unformatting removes linked text
• Fixed: Unable to format content that contain strong, em, i, b tags
• Fixed: Some formatting tools cannot be used inside columns and tables

If you are a hardcore blogger where all the content creation that you do revolves around writing full-length articles which contain the occasional complimentary image, then perhaps the existing TinyMCE content editor is enough for your needs. The current toolset already contains the necessary tools for writing articles, you have your basic text formatting tools such as bold, italic, headings, etc. But that’s about it.

No friendly layouting capabilities

While you can write articles with the current TinyMCE content editor, there is no decent way for you to layout your content other than having a single flowing column of text. Out of the box, you can’t line your text in two or more columns, nor can you create content sectioned off with a different background color. If you want your other sections of your website such as landing pages and contact pages to be unique, you would need some form of basic layouting capabilities.

Others have tried to go around this issue by utilizing WordPress’ shortcode feature. In a nutshell, shortcodes allow snippets of code to be inserted by using special tags. There are WordPress plugins that introduce different shortcodes which you can use to create columned content. For example, you would be able to wrap your content with multiple column tags if you want to place them in a two-column layout. While this method “works”, it’s not visually friendly since eventually, as place more content, everything would look like a huge pile of mess.

To fill this layouting void, page builders were created.

Page Builders make creating layouted content easy

Page builders give you additional tools that make arranging your content into unique layouts easy. Page builders usually remove the back end TinyMCE content editor and replace it (or add) a new one that would help you visualize your content. If you haven’t used a back end page builder before, imagine a set of blocks where each block would represent a type of content: an image, text, or a shortcode. It would then allow you to drag and drop those into different layouts and columns.

Aside from layouting, page builders also make the creation and placement of shortcodes easier. Before, you would be able to see shortcodes in all it’s raw form glory. You’ll see the square brackets along with all the attributes and values mixed into your content. Page builders commonly put in shortcode creators – popup dialogs that make choosing shortcode attributes more user friendly than just typing them in.

Front end page builders are the future

While all of this is a better experience for designers and content creators, a back end page builder has a huge problem inherent to them. While you can see a visual representation of what your content would look like, what you are seeing is not your actual content. This leads to people constantly checking the preview of their pages to see whether what they’re doing is correct. When using back end page builders, I personally click on the preview button at least 20 times easily just to check if my content is aligned correctly or that my margins are evenly spaced out. This is huge time consuming annoyance.

In order to solve this inconvenience, page builders should be brought to the front end. If this is done, then this would eliminate the guessing part of page layouting since you’ll be able to see your results right away.

As of the moment there are a lot of back end page builders and only a handful of front end page builders. Among those handful is Page Builder Sandwich. If you want to learn more about what makes Page Builder Sandwich unique and why it’s the right tool for you, read the article How Page Builder Sandwich Is Different from the Rest.

There 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.

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.

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.

This article will give a brief rundown on how Page Builder Sandwich works, and is intended to be a primer to those who are interested in how our page builder integrates into different things in WordPress. I won’t dwell into the individual features of Page Builder Sandwich, if you want those, head over to our videos page where we show off each feature individually with short screencasts.

If you want to know how Page Builder Sandwich is different from the other page builders out there, check out our article How Page Builder Sandwich Is Different from the Rest.

Where is it? And what can I edit with it?

Unlike a lot of other page builders, Page Builder Sandwich lives in the front end of your website. If you’re in the back end, we have provided a “Frontend” button alongside the content editor buttons that will bring you to the front end of your page.

Page Builder Sandwich allows you to edit your posts, pages and custom post type content. It doesn’t however allow you to directly edit your aggregated frontpage blog posts, and other non-single areas in your site. Just think of it this way, if what you want to edit has a content editor in the back end (like “New Post” and “New Page”), then Page Builder Sandwich can be used. You can edit your individual pages and blog posts, and if for example you have a plugin that introduces restaurant menus or portfolio items, you can edit those as well.

While in the front end, we have placed a blue “Edit with Page Builder Sandwich” button in your adminbar. Just click that to start editing your page.

Direct content editing

With Page Builder Sandwich, we have made content editing as easy and pain-free as possible. Editing content, is straight-forward and easy, just click and type. It’s that simple.

Introducing, the inspector

We have noticed that a lot of page builders have a lot of popups. Personally, I don’t like popups since they are distracting and they basically tell you “hey, stop what you’re doing until you fill up these fields first”. They destroy the flow of an otherwise smooth editing experience. Because of this, we have minimized the use of popups across the board, and instead we have created the inspector.

The inspector is a side-bar type area that contains all the formatting and layouting tools you will ever need. The inspector can be docked to the left or right side of your screen so that you can easily see what you are editing.

From the inspector, you can adjust various text properties like headings, font sizes, bold, italic, text colors, and plenty more. Aside from those, it also allows you to add images and create rows or columned content. It’s also capable of more advanced editing like adjusting rows into full-page width rows, row and column background colors, vertical content alignment, as well as margins and backgrounds. It’s quite powerful and you will find yourself using it for the most part.

Integrating with WordPress themes

Page Builder Sandwich by nature almost has no stylings included with it. When you are editing your content, the styles you see are mostly based off your theme.

Integrating with Shortcodes

Shortcodes are an important aspect in WordPress and most likely you will be using a handful of shortcodes in your site. Page Builder Sandwich handles these very well wherein your shortcodes will appear rendered in the front end. Shortcodes also remain editable, and the best part is, after you’ve edited your shortcodes, they will become rendered again along with your changes.

For convenience, you will be able to edit your shortcodes using the inspector. If you want more control, you will also be able to double-click shortcodes to edit them in raw form. Aside from this, all shortcodes available in your website is listed in the inspector for easy inclusion in your content.

What about website bloat?

Who likes slow websites? Not us, and definitely not you. We have made sure that Page Builder Sandwich has close to zero impact in your website’s performance. When logged out, at the very least, only row and column CSS styles are enqueued, along with the necessary JS and CSS scripts for the shortcodes you have used are enqueued.

For developers

If you are a developer and you have shortcodes in your WordPress plugins, Page Builder Sandwich provides a Shortcode API so that you can easily provide your customers with fields for easy creation and modification of your shortcodes.

If you want to extend further the capabilities or integrate with some parts of Page Builder Sandwich, we also have a bunch of useful action and filter hooks that you can use.