Page Builder Sandwich

Get PBS Pro

Tag: update

  • Adding Stylish Maps to Your Page Is an Interactive Experience

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2You can now place maps in your page designs using Page Builder Sandwich!

    It’s a weird thing to be excited about maps. You grab the Google Map URL then embed it. Or maybe grab a map plugin online and put in a shortcode. Or maybe your other page builder already has one and you can add one any time you want. But the reason why we’re excited is that we have brought adding maps to a whole new level.

    Here’s a preview:

    The Old Boring Way of Adding A Map

    Here’s how you add a map with your typical page builder:

    1. You drag a new map element,
    2. You enter the latitude and longitude in the fields,
    3. You enter in other values in the fields like map height, map width, tick the road style checkbox, etc,
    4. Hit preview and check what it looks like and decide that you need to change something to make it look cooler,
    5. Go back to the page builder and change the values, then repeat step 4 above.

    The Page Builder Sandwich Way of Adding A Map

    Maps in websites are interactive – you can pan around, zoom in and out the map. So we thought, why not remove all the guess work and just allow people to interact with the map directly while building your page?

    Here’s how you add a map with Page Builder Sandwich:

    1. You add a map element,
    2. You type in the latitude and longitude or address where you want the map to center on,
    3. You move the map around and zoom in or out of it to get your desired look,
    4. Add some cool colors to your maps to fit your style,
    5. Hit save.

    Our way is much more fun and intuitive. You essentially interact with the map the way you would with a normal Google Map.

    Colored Maps or Style them with SnazzyMaps

    An awesome feature we’ve placed in is the ability to tint and color your maps, and it’s super easy to do. (This is for the premium version only). If you want to colorize your map, just click on our color picker and choose a color, and your map would immediately change.

    Here’s one that we’ve tinted pink:

    Page Builder Sandwich also supports more elaborate color schemes via SnazzyMaps. They have a huge list of user-contributed color schemes, and they let you create your own if you want more control over the colors.

    Just find the color scheme that you like, then grab the code and paste into Page Builder Sandwich. The color scheme will get applied to your map right away.

    Here’s a cool color scheme called papuportal dark from SnazzyMaps:

    Put Maps Wherever You Like

    There are a lot more cool stuff that you can do with maps – like add them in full-width rows for a more dramatic effect. You can also add them inside a carousel if you like, or inside tabs (an upcoming feature).

    If you don’t have Page Builder Sandwich yet, you can try out the premium version by clicking on the “Live Demo” link above.

  • Version 2.2 Progress Update

    Version-2-2-Progress-UpdateLast week we released version 2.1 that fixed a lot of bugs and added the WordPress link editor dialog to Page Builder Sandwich.

    Now we’ve addressed the two major requested features in Page Builder Sandwich:

    1. A more streamlined, cleaner, simpler and redesigned user interface.
    2. The ability to add/edit custom CSS classes and IDs for elements, rows and columns.

    The old interface looked like a mashup of multiple buttons. Technically, it is simple since there are buttons and you just click on them. But in reality, it didn’t look and feel simple and was a bit intimidating for new users (thank you to our supporters for pointing this out). So now all the different tools are grouped together into similar tools: text formatting, rows and columns, etc. And to make things un-intimidating, only the most basic buttons are shown at the start. The more “advanced” tools can be toggled into the view. This is to allow new users to quickly grasp first how everything works by just introducing them to the core layout, then if they feel comfortable they can view the rest of the tools.

    I was surprised to see how many requests there were on allowing custom classes and IDs to be edited per element. Personally, when I use page builders I seldom use those tools, but that’s just me. The challenge with adding custom classes and IDs is that it should retain the philosophy of Page Builder Sandwich where things should always be as simple and intuitive as possible. So with version 2.2, when you select any element in your page, you should see a properties area in the inspector where you can add or modify your custom CSS classes and IDs. This also works for rows and columns, so you can fully change adjust them to whatever you need.

    Thank you to everyone for supporting the development of Page Builder Sandwich! Stay tuned for more future updates ?