Page Builder Sandwich Docs

Get PBS Pro

Category: Basic Usage

  • How to Delete Items in your Page

    How to Delete Items in your Page

    Deleting stuff in Page Builder Sandwich is usually done by simply selecting the text or element then hitting the delete or backspace button.

    Another alternative is to click the delete / remove button on the inspector:

    53dabdd7d7 file ZZXjBNEw56

    There are some cases where this doesn’t work. Items that won’t work are normally containers such as rows, columns or carousels. This is to prevent accidental deletes when deleting content.

    To delete those items, click on the delete / remove button on the element’s properties in the inspector. For example, to delete a row, you’ll have to use this area:

    96b535f82e file

  • How to Add Images

    How to Add Images

    Adding images are very straight-forward. You can either:

    1. Drag an image from your Windows Explorer or Finder directly into your browser window, or
    2. Click on the media element button and upload it using the familiar WordPress Media Manager.

  • How to Embed Content from Other Sites

    There are 2 ways you can embed content from other sites:

    1. Embed By Pasting The URL

    You can embed content from various sites like YouTube videos, Vimeo videos, Instagram photos, Flickr photos, Tweets and even Reddit comments by pasting their permalink URLs directly.

    https://www.youtube.com/watch?v=dQw4w9WgXcQ

    You can find a list of embeddable URLs from the WordPress codex:   https://codex.wordpress.org/Embeds

    You can also install other plugins that add support for additional embed URLs. For example, Wistia URLs are not supported by WordPress out-of-the-box, you can install their plugin to enable embedding, afterwards, PB Sandwich should be able to also handle them.

    Take note that one entire line of text should contain only the URL for this to work.

    2. Embed By Pasting The Embed Code

    You can also paste in embed codes directly.

    Embed codes look like this:

    <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

    Take note that one entire line of text should contain only the embed code for this to work.

    3. Use the Media Button

    Click on the “Add Media” tool, then paste your URL in the “Insert from URL” tab.

    4. Use the

    Shortcode</h2>
    WordPress comes with an shortcode, you can directly type this shortcode in to embed content. For example:
    <pre>https://www.youtube.com/watch?v=dQw4w9WgXcQ

  • Keyboard Shortcuts

    Keyboard Shortcuts

    To allow you to work faster, you can use various shortcut keys available with Page Builder Sandwich.

    Non-Formatting/Tool Shortcut Key Combinations

    These are shortcuts for non-formatting/tool commands. For formatting/tool shortcut keys, hover your mouse over each button on the text formatting bar to view their shortcut key combination.

    Shortcut Key Description
    CTRL+E (while not editing) Start editing
    CTRL+SHIFT+R (while editing) Refresh page (since CTRL+R is used for right aligning)
    CTRL+S Save changes
    CTRL+ESC Discard changes and stop editing
    CTRL+C Copy
    CTRL+V Paste
    CTRL+X Cut
    CTRL+ENTER Line break / next line
    CTRL+Z Undo
    CTRL+SHIFT+Z (Mac)
    CTRL+Y (PC)     		Redo

  • How to Upload Your Own Icons

    How to Upload Your Own Icons

    In the premium version of Page Builder Sandwich, you can use your own SVG / vector icons. Here’s how:

    1. Begin editing with Page Builder Sandwich.
    2. Locate the SVG icon that you want to use in your desktop,
    3. Make sure that the filename of the icon is descriptive, the name will be used for searching your icon later. e.g. “apple-mac-desktop”
    4. Drag the file into the browser to upload it. (After you drop the file, the Media Manager will appear to begin the upload process. If it doesn’t appear, click on the “Add Media” element button in PBS’s inspector to open it, then upload your icon from there.)
    5. Close the Media Manager window and click on the “Add Icon” element button to open the Icon Picker popup.
    6. Search for your newly uploaded icon. e.g. if the filename of your icon is “apple-mac-desktop”, you can use the terms “apple”, “mac” or “desktop” to search for your icon.

    Uploaded icons can also be used as bullet icons in bullet lists and button icons.

    Note: If your icon doesn’t appear in your searches, it might be that the filename wasn’t properly parsed by PBS. In those cases, you can use the terms “custom” or “upload” to find your uploaded icons.

  • How to Add Widgets

    How to Add Widgets

    Adding widgets can be done by clicking the Widget Element button in the Elements section in the inspector. Upon clicking, a popup should appear that lists all the widgets Page Builder Sandwich has found in your site.

    Why Some Widget Options May Not Work Properly

    All widgets found in your WordPress site can be added, however some widgets that use customized/specialized Javascript code within their settings might not work properly. Widgets that use these might not work:

    • Color pickers aside from the one included in WordPress
    • File uploader options that do not use WordPress’ Media Manager
    • Other special scripts like interactive map pickers, font pickers,
    • Javascript code that triggers when a setting changes values, etc.

    The default WordPress widgets and similarly created widgets should have no problem.

    How to Work Around This

    If you really need that specific widget to work, there is a work around this.

    You can use the plugin Custom Sidebars by WPMU Dev to create a new sidebar/widget area, add your widget in there using the normal method in Appearance > Widgets. Then in Page Builder Sandwich, add a Sidebar Element and select the sidebar that contains the widget that you need.

    Another alternative is to re-create the effect you want using the various elements and styles available in Page Builder Sandwich.

  • How to Add Shortcodes

    How to Add Shortcodes

    Adding Shortcodes

    Shortcodes can be pasted or typed in directly while editing. After you’ve typed in your shortcode, press enter or navigate out the shortcode and it should show up in its rendered form right away.

    Another way of adding shortcodes is to click on the Shortcode Element on your inspector. This will bring up a popup that lists all the shortcodes available in your site. Select one or double click on any of them to insert it.

    Editing Shortcodes

    You can edit shortcodes in 2 ways:

    1. Click on the shortcode to select it and edit the shortcode properties in your inspector. If there are attributes & content in your shortcode, then those should appear as fields that you can change. The shortcode should update automatically with your changes.
    2. Double click on the shortcode (or hover your mouse over it then click on the edit toolbar button) to edit the raw shortcode. You can freely modify the whole shortcode this way. When you’re done, press enter or select another element to update the shortcode.

    Where are my Shortcode Attributes?

    Shortcode attributes cannot be detected by Page Builder Sandwich. So you will have to type those in. We are working on a way to map shortcodes into the system to make it easy for everyone. Stay tuned for that one.