Tag: website building

Version 3.0: Rethinking How a Page Builder Should Work

It’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.

October 17, 2016
Pages and Plugins: Maximizing Your WordPress Experience
Some of WordPress’ features (especially the more complex ones) may take newer users some time to be familiar with. And if you are one of these newer users, WordPress’ intricate jargon might have the tendency to send you towards a spiral of intimidation, especially when getting that near-inevitable feel of information overload. Yikes.

Now, if you’re a part of this particular percentage of WordPress users, we implore you not to fret; the good news is that it is but a misconception that being a WordPress noob automatically equates to a limited WordPress experience. This brand of thinking is a common error that almost anyone makes, and we urge you not to make that very same mistake.

The truth is, you needn’t have that much of an in-depth grasp of the inner workings of software and code in order to begin building a site– or to get one to work in your desired way, for the matter. “How is that possible?” you might ask? Well, one of the ways this can be achieved is in the form of creating pages on your site, and adding in plugins.

WordPress is both complex and convenient, and through a bunch of our articles for beginners, we’ve pretty much gotten that covered. Previously, we’ve also discussed how plugins contribute to WordPress’ customizability and flexibility, and how they allow its users to make the best out of their WordPress experience. And while familiarizing yourself with the importance of plugins is pivotal to your site-building journey, the basic elements of WordPress–such as the existence of pages, can get you off to a pretty good start as well.

Pages VS Posts Defined

In the realm of WordPress, the term “page” is almost always associated with the term “post” –as in “pages and posts”– and there are times when people mistake them for interchangeable terms. Arguably, it’s easy to get confused between the two (especially if you’re still wading around the shallow end of the WordPress Beginner pool). So with that in mind, take note that while these things may seem trivial, it’s always a good idea to familiarize yourself around WordPress’ little things, especially if you’re just starting out.

An easy identifier for differentiating between posts and pages is that posts are the individual entries you create on your site (this article you’re reading right now, for instance, is a post). These entries aren’t exactly a necessity for websites, unless yours has an active blog like ours. However, what may be a crucial element of your site are setting up pages, which is what this article will be a bit more centered on.

Pages are Building Blocks

Unless you’ve never touched a computer before (which we assume is unlikely), chances are, you’ve already seen or heard of website pages before, or at least have a fair idea of what they might be. If you are unfamiliar, don’t worry; it’s also likely that you’ve already stumbled upon pages on your visits to other websites: FAQ and/or About sections, contact forms, and picture galleries. For beginners and freshly-built websites, they can be akin to building blocks, in a sense. If put together, they make up the essentials of what your site’s all about, and what it has to offer.

So it’s all well and good to be wary of these basic differences, yes. But combined with your basic plugin know-how, you’re actually in a perfect position to take advantage of your newfound knowledge on WordPress pages, even if you are a beginner. The question now though, is how.

Taking Advantage: Basic Plugins You Can Install

On a basic WordPress site, creating pages is easy, sure. You’d just have to work your way through it, read a few instructions, click a few buttons and you’re good to go. If you want anything more than that, though, you’re going to have to install a couple of plugins.
1. SEO (Search Engine Optimization) plugins
Getting your site out there in the open is hard enough, and the task of spreading word about your site is much harder. Believe me. That’s why a little help from SEO plugins are crucial for your site to get that boost in ranking.

Here at Sandwich, we use Yoast, which is often dubbed as today’s leading SEO plugin in the market. There are a bunch of other SEO’s to choose from though, and there are numerous sites, such as SitePoint, that compare and contrast the different SEO plugins if you want to weigh in your options.
1. Back-Up plugins
Backing up is one of the most important precautions you have to take when you set up your site; you really can never be too careful. After all, it’s better to take a few minutes (or hours, depending on your experience) to set up a good back-up plugin, than spending an eternity setting up your site all over again if your data accidentally gets wiped clean.
1. Security plugins
It’s a cruel, cruel world out there, even in the realm of the interwebz. Bad guys will want to steal your data and even hack into your site, among other things. And so it’s always a good idea to install a security plugin along with your back-up for good measure. We use VaultPress for both back-up and security.
1. Anti-Spam plugins
No one wants spam, unless it’s the food. Delicious.

Well, popular canned goods aside, there are plenty of ways unwanted spam can creep its way into your WordPress site. According to WPExplorer, while it’s possible to manually tweak WordPress to prevent spam, you can also opt for a quicker solution: installing an anti-spam plugin for your site.
1. Cache
Installing a caching plugin is a sure-fire way to speed up your site’s and server’s performance. We’ve been using WP Fastest Cache for some time now, but there are a lot of other high-rated, trusted cache plugins too – like W3 Total Cache – which you may also want to give a go.

You can learn more about caching on the WordPress Codex site.

FUN FACT: Cache is pronounced ˈkash not kashè

Additional Plugins for Your Pages

1. Contact Form Plugin

As the site owner, you are responsible for answering your audience’s queries and responding to their suggestions. So at some point, after your site-building journey, they may want – or even need – to reach you; and this is what contact forms plugins are for. While it is possible to build a contact form for your site from scratch, we have to admit there are times when doing so wouldn’t be very practical, considering that it will definitely take some time for you to do so, especially if you’re a beginner.

WPBeginner has a list of what they rate as the best contact form plugins in the market, while Site Point has a similar article of ones that are available for free.

2. Social Media Plugin

Unless you’re a website that people frequently flock to, it’s admittedly a bit challenging to get your site’s content (such as articles) going around. This is why there are times when the need for a social media plugin arises. Chances are, if your audience finds your content interesting enough, they might want to share it with their friends on social media outlets.

3. Commenting Tools / Disqus

Like we’ve mentioned, communicating with your audience is a must, especially if your site content revolves around feature articles. Getting to know your audience gives you a leverage too; you can use whatever feedback they have to better your site and/or your products.

Disqus is a very popular commenting tool, and one of the most popular ones in the market. Kikolani also has a very handy article that might help you in deciding which commenting tool will work best for your site.

There Are More Plugins Than You Think

The list of plugins available for WordPress sites doesn’t stop with this article. These are but a few that we find very helpful; the realm of WordPress plugins definitely holds more than the eight we’ve enumerated above.

That being said, we probably didn’t get to cover anything. So do you have a plugin in mind that you think should make the list? Tell us in the comments section below, and we might just take in your suggestions for one of our future articles!

Happy Site-Building!
September 2, 2016
5 Simple Tips To Make Your Website Look Good

In general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

Here are some basic tips on what you can do to improve your website’s design.

Add high-quality images

oars.com

whitetablecatering.com

You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

Choose the right colors

Lawrence Boone Selections uses black to add a sense of luxury and value to their website

Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

A website’s color scheme plays a big role in creating the proper tone and mood for your brand. Picking a nice color doesn’t necessary mean its the right one. Each color sends off a different message and response. Colors is one of the first things that site visitors notice and it can actually impact your website’s success.

Pick two to three base colors at most for your design. If you feel the need to add more color, you can utilize the tints and shades of your base colors. In color theory, a tint is the mixture of a color with white, which increases lightness while shade is the mixture of a color with white, which reduces lightness.

Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

Use contrasting typefaces

There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

Paring two typefaces can be hard even for designers. You could keep it simple by playing around with two different fonts from one typeface. If a second typeface is necessary, choose something that contrasts well against your first typeface. Normally, combining a serif font and sans-serif works well together. Another important tip is to choose typefaces that matches your company’s style. You could have the nicest looking font in the wold, but when used in the wrong context, it could still look terrible.

Keep it clean using whitespace

Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

Make it mobile-friendly

People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

Additional Tip: Using Page Builder Sandwich on your website will automatically enable mobile viewing and adjust it for mobile screen size.

Conclusion

Remember: Underestimating the power of design is one of the worst mistakes you can make when building your website. You don’t have to exert too much effort when designing your website, of course, but in the meantime, simply following these tips can ensure that your site doesn’t emit any feelings of disapproval from your audience.

August 9, 2016
5 Reasons Why Whitespace Matters

Basically, whitespace, at its most basic definition, is the space around and between all the elements of a composition that is left unmarked. It’s not just a waste of screen space, as most websites owners think. When used well, whitespaces can actually provide benefits to better promote a product. It is an important key to creating good design and it makes a website better in every way.

Although the name whitespace implies that the space is white, it doesn’t always have to be literally white. Whitespace can actually be any color—It can even have a subtle pattern or texture. It’s an area that you don’t want the eye to focus on. Alternatively, it’s called a negative space.

So, why does whitespace matter?

Image Source: News Feed

Reason #1: Improves readability

Whitespace between baselines and paragraphs actually help people comfortably read all of the content on the site. Adjusting small details of your site (like line-spacing/leading or the letter-spacing) could make a huge difference in make reading easier.

The goal is to make people want to keep reading by designing layouts that are easy on the eyes.

Image Source: HP Magic Words

Reason #2: Speeds up interaction

Let’s be honest: most of your visitors won’t have enough patience to look thoroughly when browsing through websites. When a website looks cluttered, it keeps users distracted from finding what they are looking for.

Whitespaces should help lead the viewer around the page. Less elements competing for attention plus proper use of whitespaces can prevent distractions that slows visitors down.

Image Source: Google

Reason #3: Drive attention to the right elements

Whitespace can give users visual cues on where they should be looking. When used in a correct manner, whitespaces help emphasize information and draw attention to a particular area on you website.

Remember, if everything stands out, nothing does.

Image Source: Pocket Penguins

Reason #4: First impressions matter

The look and feel of a website is the main key to good first impressions. Good first impressions often leads to longer visit duration. Too little whitespace can make your website look cheap and unreliable. Visitors won’t think the site or the brand is credible unless it looks attractive. Having a good amount of whitespace helps create the right tone for your website. Whitespace can be a way to communicate ingenuity, freshness, and sometimes, elegance.

Tip: Here’s an idea on how to make your web design simple and familiar.

Image Source: Flock Knitwear

Reason #5: Helps create breathing room and balance

A balanced design doesn’t mean symmetrical. A large design element can be balanced by a few smaller once. Adding whitespace is a great way to balance different-sized design elements on your page. Create a flow so the users eyes won’t dart all over the place. A good design should be able to guide the user from one point to another without confusing the visitor.

Conclusion

Next time you visit a website and find yourself staying a while, think about what made you stay and read. Do you think the line-spacing makes an article easier to read? Does the experience make you want to keep coming back for more? Did you have a hard time looking for the navigation?

Take note of the good application of whitespace on the website. If you think it can also work in your website, learn to apply and manage how much space you should allocate on your element until you think you’ve conveyed the right tone and readability without sacrificing the “flow” you want for your website.

The ultimate goal of any website is communication. Visual appeal goes hand in hand with the success of your website.

July 27, 2016
3 Things to Consider Before Diving Into Page Builders

There’s an off-chance you’re here because you’ve heard that PBS is quite possibly one of the quickest shortcuts to site building. While page builders, in general, exist to make things easier, there are still a few things you might want to take into account before diving deeper into this particular realm of WordPress development.

Learning WordPress: A Crucial Page Builder Prerequisite

This is probably the most obvious item on this list, but still the most important one. Page Builders aren’t quite purchasable on their own, unfortunately. They come in the form of plugins in WordPress, which you’ll need to install and learn in order to manipulate. Rest assured that WordPress is one of the easiest and most legitimate ways to create a website. You won’t regret knowing something technical, considering the age we are in right now. There is a difference between WordPress.com and WordPress.org, and knowing which one caters to your need saves time too!

If you’re a little intimidated by the abundance of some of the technical terms in this article, though, fret not. There are few helpful sites you can visit to help get you started. Some of these areWordPress Codex, and Treehouse. It houses WordPress tips and website building, depending on your need and level of knowledge.

You might want to test out the waters first, just to be sure

It’s always a good idea to give free and/or trial versions a go before making any huge purchases you might end up regretting in the future. Thankfully, most page builders come with free/demo versions. Of course, we could also look into a ton of reliable reviews about page builders while otherscompares and contrasts page builders. Make sure to weigh in your options carefully!

Aside from going through articles and reviews, one of the things we like about WordPress is that it has a huge community behind it. There are individuals, teams, and even businesses, willing to lend a helping hand their fellow WordPress users, especially new ones like you! The community basically works on a pay-it-forward scheme than a give-and-take.

Designs make a huge difference

WordPress Enthusiast Donna Fontenot Cavalier makes a very good point regarding drag and drop Page Builders, and the importance of basic design. While drag-and-drop builders like PBS can save you a lot of time, basic know-how and at least some familiarity in aesthetics is another crucial thing to consider when creating websites. Imagine a scenario– let’s say you get your hands on a nifty page builder of your choice: that’s great! But then let’s say you’re a person who doesn’t exactly have the best eye for art, design and functionality: uh-oh.

Don’t worry, though. Page Builder Sandwich isn’t just a Page Builder; our team is also dedicated to giving other WordPress users a hand, too. So if you’re dealing with a bit of trouble regarding design, don’t worry– we have a bunch of articles here on the PBS Blog with a lot of useful tips to help you get started. That way, you get to do more, learn more, and worry less.

Remember, if you have any questions or concerns regarding page builders, or anything relating to the items above, feel free to drop us a line in the comments section below. We’re always happy to help our customers out.

Happy Site-Building!

July 22, 2016