Page Builder Sandwich

Get PBS Pro

Category: Tips

Tips on using Page Builder Sandwich.

  • How to Add Custom Shortcodes on Page Builder Sandwich

    How to Add Custom Shortcodes on Page Builder Sandwich

    From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

    Shortcodes allow you to add things to your website (like widgets, for example), without having to add in huge chunks of code like developers normally would.

    For example, a regular piece of code, in terms of length, would probably look something like this:

    <html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

    For this example, let’s pretend that the piece of code above will let you add an entire paragraph of Lorem Ipsum placeholder text.

    Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

    [lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

    You can see how they’re miles different from each other in terms of length.

    Now imagine that both pieces of code– The original, lengthy piece, versus the shortcode containing just the word “lorem”, would both do the exact same thing: Add Lorem Ipsum text.

    This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

    Where can I find shortcodes?

    If you have a favorite plugin or widget, chances are, they have a shortcode available for you to use.

    Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

    Adding Custom Shortcodes on PBS

    On Page Builder Sandwich, you can add shortcodes directly onto your page by just typing or copy-pasting it onto your content area.

    We did this below with a shortcode from Shortcodes Ultimate, adding a content box on the Page Builder Sandwich demo page:

    Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

    From one of our previous articles on Shortcode Mapping, the definition is as follows:

    Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    Part of this means that you no longer have to manually look for your shortcodes on their respective documentations or repositories.

    As long as you have the plugin that includes the shortcode installed ont o your wordpress site, it’ll be easily available for you to use on Page Builder Sandwich.

    So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

    And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

    Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

    You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

    So if you want to add custom shortcodes, or shortcodes you’ve made on your own, you can, as long as you have them installed onto your WordPress site.

    Here are some other helpful plugins that you can use to create your own custom shortcodes:

  • How to Utilize E-mail Marketing Using Page Builder Sandwich

    How to Utilize E-mail Marketing Using Page Builder Sandwich

    Yes, you can.

    The more important question, though, is how and why do you need to do it?

    My business is small. Can’t I just wing it?

    Email marketing has an average ROI of 3,800 percent. For every dollar invested, the average return is $38, according to Salesforce.

    In other words, it’s definitely something worth investing your time in.

    Because while there are tons of ways to market your products and capture leads– you can still try to make use of the less-popular cold call, for example– the most sure-fire way to connect and communicate with your target audience in the 21st century is through e-mail marketing.

    So if you’re running a business –any kind of business, whether small, big, online or otherwise– digital and e-mail marketing is an absolute must.

    Aside from cutting on costs (e-mail is free, after all), businesses rely on it not just because it’s been proven to be successful, but also because it yields results that are both measurable and flexible; you can track your audience’s responses to your e-mails, for example, or note how many clicks and opens your e-mail marketing campaigns get.

    How you can do it with Page Builder Sandwich

    There are lots of available software you can use to help you market your products and content digitally, like Hubspot’s E-mail Marketing Software, or Mailchimp, which gives you a management system that helps you create, organize, and analyze your newsletters.

    But did you know that using Sandwich, you can actually integrate some of the popular software mentioned via the Newsletter Element?

    The Newsletter Element (and how it works)

    You can find the Newsletter Element by hovering over to the Elements Inspector over to the left side of the screen, and selecting Newsletter from the bottom area.

    Using the Properties Inspector, you can also choose which newsletter integration you’d like to use with the Newsletter Element. For this exmple, we’re going to use MailChimp (highlighted in blue in the dropdown below).

    And, using the Input Field button, you can try to play around with the Newsletter Element’s settings as well, so you can change colors, customize success message options, and other settings, like so:

    By trying your hand at the different available settings for the Newsletter Element’s options, you can end up with something like this:

    Plus, with the help of our Pre-Designed Sections and other design tips, you can actually do a whole lot more.

    Other useful resources for e-mail marketing beginners

    • 11 Types of Marketing E-mails That Actually Generate a Response

    Conclusion

    While other noteworthy marketing trends still exist today, one thing’s for sure: E-mail marketing is definitely here to stay, and it’s important that you utilize it when you can. Who knows? Through e-mail marketing, your business could just get that big break it’s been looking for.

    Design in less time!

    Get access to Sandwich’s Pre-Designed Sections, Templates, and a whole lot more.

    Try Live Preview

  • How To Customize Page Builder Sandwich’s Pre-Designed Sections On Your Own

    We’ve been getting quite a few inquiries the past week about Pre-Design Sections (and by extension, the PBS Templates), what they are, and how they can be accessed.

    So in this article, we’ll be teaching you how to not only access them, but also how to maximize these features of Page Builder Sandwich: By customizing them and making them your own.

    Accessing the Pre-Designed Sections

    If you aren’t familiar yet, all you have to do to access the Pre-Designed sections is to hover your mouse onto the left side of your screen, and access the Elements Inspector. This is the sidebar that lets you drag and drop elements directly onto your content area.

    Say hello to the Elements Inspector!

    Once it’s accessed, simply scroll down to the bottom and select Pre-Designed Sections. A library of the sections will pop up. Select one from the collection, drag and drop, and it’ll show up on your content area, like so:

    From here, you can move the elements within the section around, or move the entire thing and adjust its position. And there you have it! You’ve selected a Pre-Designed Section from Page Builder Sandwich.

    Now it’s time to add in your own twist: By customizing and tweaking with the elements’ settings within the selected section.

    Customizing the Pre-Designed Sections

    Each element’s setting within any one Pre-Designed section can be edited and customized according to your website’s needs and your personal taste.

    This means everything included in your selected Pre-Designed section – like text, colors, images, buttons, everything – can be edited and tinkered with by you.

    So for instance, if you’re not happy with the default blue-green tint and the wheat field image in the default Pre-Designed section below…

    You can adjust it. For instance, if I wanted a different background tint on the left:

    Or if you wanted to replace the image of the wheat field on the right:

    Or even change the button style, margin, padding, and font:

    …You can.

    For comparison:

    Default PBS Pre-Designed Section

    The same Pre-Designed Section, completely tweaked and customized. Notice the different font, color scheme, button style, photo, and margin width. You can actually take this further, and let your imagination run wild.

    Here are a few more examples on how you can spice up our Pre-Designed Sections

    Default Pre-Designed Section from Sandwich

    The same Pre-Designed Section, customized

    You can do it with our Full-Page Templates, too:

    Default Template from Sandwich

    The same Template, customized

    Conclusion

    There’s more to Page Builder Sandwich’s Pre-Designed Sections than you think.

    Tweak and customize them to make them completely your own, or even use them as a starting point for when you don’t want to design your page from the ground up.

    Remember, Page Builder Sandwich is here to help you design in less time. Making full use of our Pre-Designed Sections and Full Page Templates will help you do just that.

    Design in less time!

    Get access to Sandwich’s Pre-Designed Sections, Templates, and a whole lot more.

    Try Live Preview

  • 4 Website Design Mistakes You Need to Avoid in 2018

    If there’s one thing you need to remember when building a website, it’s to never take good design for granted.

    As we’ve mentioned in a previous article, a site visitor’s first impression on your website can make or break you in just a matter of seconds.

    In other words, if they don’t like what they see within that timeframe, chances are they’re going to close their browser windows and direct their attention elsewhere.

    Fortunately, there are a lot of ways to prevent this from happening; one of them is to familiarize yourself with good web design practices. And the good news is you don’t need to be a professional web designer in order to do so.

    Because while it’s true that not everyone has a good eye for design, preventing bad design becomes easier once you know what to avoid.

    That said, make sure you keep these 4 common web design mistakes in mind. This way, you’ll have one less thing to worry about when you finally start building your website.

    Mistake #1: Using More Than 3 Fonts

    A rule of thumb when designing websites? Try not to have too much visual elements going on within your space. Having more than 3 fonts on your site design is a surefire way to break this one rule. It’ll also overwhelm your site visitors.

    Keeping your website fonts to a minimum of 3 is a general design practice observed by professionals. Plus, it increases your site’s level of readability and consistency, which are key to your site traffic’s success.

    DON’T DO THIS:

    Don’t use more than 3 fonts and try to avoid “fancy fonts” as much as possible. These tend to make your site look unprofessional and outdated.

    DO THIS:

    Use only 2 fonts, or a maximum of 3 if you have to. Notice how the page below looks clean and sleek, all while keeping readability and consistency all throughout the design.

    Try comparing the differences between this example and the previous one. The example below with only two fonts is a website that your visitors will likely take seriously.  This previous one above with the overwhelming amount of fonts isn’t.

    Mistake #2: Failing to Use White Space

    White space is one of the most important aspects of web design. But what is it?

    Put simply, white space is literally the empty space between elements in a composition.

    In other words, it’s negative space. This pertains to anything on your website that isn’t filled with text, photos, or other design elements.

    Now, the problem arises when website owners want to fill all of the white space in, which is an absolute no-no.

    White space matters because it gives your site visitors and readers some breathing space when going through your site. Just how it was mentioned in the first design mistake to avoid, overwhelming your website with too much design elements is more than enough reason for your site visitors to leave and for your traffic to decrease significantly. It also makes for poorly executed design.

    DON’T DO THIS:

    In the example below, take a look at how the text is nearing the edges of the purple section’s margin. Notice as well how all elements leave almost zero room for white space.

    DO THIS INSTEAD:

    Give your site readers some room to breathe. If adding in long paragraphs is unavoidable, just remember to always take the rules of spacing into account—they’re pretty easy to remember anyway ?.  It will leave your page looking cool, crisp, and professional.

    Mistake #3: Designing Websites With Zero Flow in Your Site’s Content

    It’s important to pay attention as to how  information on your website is presented. Moreover, site content should generally follow a logical flow, taking the site viewer’s intuition into consideration.

    Check out the two examples below to see what we mean.

    DON’T DO THIS:

    Unless you’re a graphic designer by profession, it’s probably not a good idea to experiment with the standard flow of your website’s sections.

    Below, you can see that the site’s design lacks both visual and logical flow; everything is all over the place. You don’t want your audience having a hard time navigating through your site, either. This is another surefire way to do it.

    DO THIS INSTEAD:

    Notice how the sections of the website flow depending on what actions the visitor is most likely to take.

    The design is intuitive and has a logical flow: First, the organization introduces itself and fills the audience in on the basics; like what it’s about and what it does. Second, it adds in reliable figures to establish credibility. Lastly, the website gives the audience its contact numbers and a list of events, prompting them to take action.

    Mistake #4: Trying to Fit in Every Bit of Information Onto Your Website

    Adding in walls of uncessary text where white space should can drive your audience away. Remember to only keep important details.

    Studies find that readers only visit 20% of your webpage; everyone else outside that percentage will probably just scroll through your site.

    DON’T DO THIS.

    Don’t overwhelm your visitors with inconsistent, giant walls of text, especially if it means having to sacrifice your website design’s cohesiveness and structure.

    DO THIS INSTEAD:

    Keep your copy short and concise, and take out chunks of unecessary text if you can help it. Only keep vital information that your site visitors absolutely need to know.

    Conclusion

    Website design is important, and can be a huge deciding factor in whether or not you gain site traffic.

    Remember not take it for granted. Always alot time to research, and look up design articles to guide you along the way. Before you know it, you’ll be seeing your site traffic moving upwards. ? Good luck!

    Design in less time!

    Check out how much faster Page Builder Sandwich let you design your web pages.

    Try Live Preview

    This week’s useful resource:

    CANVA has hundreds of resources that you can access on their website. Apart from useful and easy-to-follow design tips, they also have photo editing tools, graphs, and a wide range of useful resources you can use for your creative projects.

    Check out this cool Color Guide from Canva for your next design venture.

    Canva Design Wiki

    Unleash your creativity.

    Check Out the Canva Color Guide

  • How to Add the Parallax Effect, Video Background, and Ken Burns Effect

    Page Builder Sandwich has a feature that we collectively like to call Fancy Background Effects. There are three of them: the Parallax Effect, Video Backgrounds, and the Ken Burns Effect.

    What are the different Fancy Background Effects?

    PBS’ Fancy Background Effects give your website the boost that it needs to attract site viewers. They’re a surefire way to grab attention, and when executed correctly, can yield eye-catching results in website traffic.

    The Parallax Effect

    Implementing the Parallax Effect onto your page gives your background a sense of depth, letting certain elements of your site “pop out” while scrolling. Here’s an example of a page with a parallax background implemented, and one without.

    With Parallax Scrolling

    The background image scrolls at a different rate as the rest of the elements in the page.

    Without Parallax Scrolling

    The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.

    Video Backgrounds

    Video Backgrounds allow you to place looping videos on backgrounds instead of still images. The great thing about PBS’ video backgrounds is that you can simply paste your desired YouTube or Vimeo link when prompted, and we’ll turn it into a video background for you. You can also upload your own videos for this, too.

    Some samples of video backgrounds you can check out:

    The Ken Burns Effect

    Ken Burns, who popularized the Ken Burns effect in film.

    In documentaries, do you ever notice when they show photos that slowly zoom into detail? That’s called the Ken Burns Effect. You can access these effects on Page Builder Sandwich, too.

    How do I add the Fancy Background Effects?

    You can find all the Fancy Background Effects through the following steps:

    Step 1: Choose a row you’d like to add an effect on. Click on this row’s settings button (the gear icon on the left). This will open the Properties Inspector.

    Step 2: Once the Properties Inspector pops up, scroll down a bit until you find the option called “Fancy Background Effects”.

    Step 3: Once you’ve found it, you’ll see that you can click a dropdown button and select which background effect you’d like on your row.

    Step 4: Depending on which Fancy Background Effect you choose, you can adjust each effect’s settings. For example, for the Parallax effect, you can adjust its height and position.

    And you’re done! After this, you should see your Fancy Background Effects appear on your site in full swing.

    Have you used PBS’ Fancy Backgrounds yet?

    Are there any other background effects you’d like to suggest we add to our features? Or show us your PBS-made site with one of the effects? Let us know in the comments section below!

  • Happy Fourth of July! 20% OFF on ALL Licenses Until July 6!

    Get 20% OFF on all Page Builder Sandwich licenses from July 4 to July 6, 2017! Just enter the promo code 4JULY2017 to get your discount today!

  • 5 Reasons Why Whitespace Matters

    Reasons-Why-Whitespace-MattersBasically, 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?

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

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

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

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

  • Page Builder Sandwich Lite Is Now Available In The WordPress Plugin Repo

    PBS-Lite-Is-Now-Available-In-The-WP-Plugin-RepoNow you can download the Lite version of Page Builder Sandwich from the WordPress.org plugin repository!

    The lite version is a trimmed down version of the premium plugin, but is still totally usable. Here’s a list of features and tools available in the Lite version:

    • Live frontend editing
    • Direct, click and type editing without the hassles of popups
    • Text formatting tools: colors, bold, italic, underline, horizontal rule, alignments, etc, basically everything you can do in the backend TinyMCE editor.
    • Images and image manipulation using the WordPress Media Manager
    • Link creation using WordPress’ link creator dialog
    • Block elements: headings, blockquotes, bullet and numbered lists
    • Live shortcode rendering and editing, along with a full list of all available shortcodes
    • Layouting with nestable rows & columns
    • Row & column properties: background color, margins paddings and borders
    • Working undo/redo
    • And plenty more!

    Download the Lite Version Now

    If you’ve seen the plugin page and you’re wondering why the plugin isn’t brand spankin’ new, it’s because this isn’t the plugin’s first iteration. A year ago, it was a backend page builder, but I didn’t like it and after months of contemplating and brainstorming, I took a completely different direction and it’s now an awesome frontend page builder that I personally enjoy using.

    Will This Work With My Theme?

    Technically this should work with any and all themes. Along with our users and customers, we have successfully used Page Builder Sandwich with a lot of themes including themes from the WordPress.org theme repository, Genesis Themes, StudioPress Themes, Elegant Themes and themes from ThemeForest. If it doesn’t work with your theme, please let us know and will fix it.

    Will This Work With My Current Content?

    Page Builder Sandwich should work well with your existing content. Your content should be editable right away in the frontend!

    If you’re content is filled with shortcodes nested inside shortcodes (for example if you are using column shortcodes), we advice that you first clean up and remove those column shortcodes. Page Builder Sandwich comes with pure-CSS, shortcode-less and responsive columns. It would be better if you use those instead since they’re faster and more robust.

    Special introductory discount

    If you want more features such as full-width rows, advanced text, image, row and column formatting, then you’ll enjoy the premium version. You’ll also get plugin updates and customer support.

    For the next few days, we’re offering you a 50% introductory discount. Take advantage of this now!

    If you’re unsure, give the lite version a spin on your own setup first, or check out the live demo from the top menu ?

  • Markdown Now Supported, Plus A Few Cool Formatting Tools

    Markdown-Now-Supported,-Plus-A-Few-Cool-Formatting-ToolsI’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.

  • Embedding Video, Audio and Other Content Now Supported

    Embedding-Video-Audio-and-Other-Content-Now-SupportedHappy 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.

    oembed_cast
    Pasting a URL in a single line converts them into an embedded content.

    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