Introducing SP Page Builder 3.3 with radical new UI, refined UX & new features - JoomShaper

Introducing SP Page Builder 3.3 with radical new UI, refined UX & new features

18 September 2018
Hits 32,801
8 min read
Introducing SP Page Builder 3.3 with radical new UI, refined UX & new features

Every day is a new day, this fact alone does not make it special. What makes a day special is when something great happens. Something that worth mentioning to your mates, something to cherish for the rest of your life. Today is such a day my friend when SP Page Builder comes with an aesthetic new UI and you’ll share the story of today’s joyful experience with your fellow developers for a long time.

Personally, I’m super excited about today’s release. It brings so many rich features that I might even miss out some. This update focuses on providing you with a simplified yet very handy frontend editor that brings out almost all the major functionalities from the backend to frontend (by the way these functionalities are also present in the backend editor). It’s impossible to put into words how convenient the frontend editing has become, you can only experience the feeling once you actually use the tool. Let's start exploring SP Page Builder 3.3 with a video.


It's time to have a quick look at the full changelog:

  • New: Major redesign in the builder system
  • New: Layout bundle system (complete templates) introduced
  • New: SEO options added to the page settings in the frontend editor
  • New: Create a new page from the frontend editor
  • New: Capability of adding pages to menus from the frontend editor
  • New: Edit, delete, or view any page from the frontend editor
  • New: A list of all pages available on the frontend editor
  • New: Edit articles (built with the page builder) on the frontend
  • New: Price List addon
  • New: Image Overlay addon
  • New: Clear full-page content with a single click
  • New: Flickr Gallery addon updated with new API
  • Fix: Local video in Section BG conflict in Edge issue
  • Fix: Image width issue in Flickr Gallery addon
  • Fix: Greek language entity encoding issue
  • Fix: Column options editing conflict with Flexible Padding issue
  • Fix: PHP error for external video parameter in row/start.php
  • Fix: Column drag and drop issue
  • Fix: Font Awesome 4 updated to the latest version

Completely redesigned User Interface

The frontend editor has got a brand new design. The new UI is sleek, elegant and decorated in a more simplified manner. It has been re-engineered to introduce a better UX. Most of the major functionalities of the backend are now present on the frontend as well. This design concept placed all the SP Page Builder functionalities in a very organized way to offer a streamlined web development experience with a minimal effort. Don’t just take my word for it, allow me to show you a quick glimpse.

New sleek design of SP Page Builder 3.3

Presenting Layout Bundles

The idea to introduce layout packs is pretty simple. You can think of it as a slight alternative to a template. Basically, a layout pack will provide you with the pages a template should have.

Presenting Layout Bundles in SP Page Builder 3.3

A pack (or bundle as we are calling it) consists of pages like Home, Team, Contact, About and more depending on the purpose that the layout bundle serves. You can use different pages from different layout bundles as well. For instance, you are going to build a wedding website, you can import the pages related to it from the respective layout pack, but you like the contact page of another business pack. In that case, you can easily import the page from that business pack to your current website. That’s the beauty of this new layout packs. Currently, SP Page Builder offers 40 layout bundles with 60+ layouts inside. You can access them from the left sidebar of the frontend editor. To find your preferred one use the search box or sorting.

Create, edit or delete pages on frontend

The big Plus sign on the left sidebar will let you create a new page right from the page builder’s frontend editor. After creating the new page, click the “Add New Row” button to start using addons, “Import” to use a previously exported page or “Page Templates” to get a pre-designed layout.

The “Pages” section of the left sidebar shows a list of all the pages of your website. You can preview, edit or delete a particular one using their respective icons. To find your desired page, use the search box or sort them by their categories. An important tip that may come in handy at times, you can use the “Empty Page” option to clear out everything from an entire page with just a simple click. This feature is found under the “Tools” section.

Adding pages to menu on frontend

The v3.3 update has made it possible to link a page to any menu from the frontend. A new page which has not been assigned to a menu or even an existing one which has already been assigned to a menu, can be linked as a new menu item using the “Add to Menu” function, found under the “Tools” section.

Adding a Page to Menu on SP Page Builder 3.3

Page settings and SEO

SEO plays a significant role to attract traffic to any website. Search engines use the meta description to summarize what’s on a webpage and shows it to attract the visitors. Keywords and open graph settings are also the key players here. Keeping that in mind, we have brought these important SEO settings on the frontend editor under Tools > Page Settings > SEO.

Page Settings on SP Page Builder 3.3

As for the other page settings: the Basic section will let you change a page title, page category, status, and access level. And the Page CSS will let you use custom CSS in that particular page.

New addon: Price List

The price List addon lets you create and present price lists in a stylish, informative, and an organized way that will keep you one step ahead of the competition. The addon has multiple applications where it can be used but it will especially help to showcase the menu items of a restaurant. The “Price and Line” section offers some essential settings like showing discounts, lines between item names and prices with different styles, and the typography control.

Introducing new addon Price List in SP Page Builder 3.3

The “Image/Number Options” offers some important settings as well, including the “Tag” option which can be used to display or highlight special items like vegans and the “Numbers” can be used to display the menu order.

New addon: Image Overlay

We have an addon to display images on your site using SP Page Builder. We have another addon to show text content along with images. But do we have any addon to apply aesthetic effects to an image? No? Wrong. Now we do. Using the new Image Overlay addon, you can apply 6 different image animations, 9 different text positions and an unlimited number of color overlays on the images on your site.

Article editing on the frontend

As you already know, using SP Page Builder it is possible to create a Joomla article, not just that, you can use all the addons and other functionalities of SP Page Builder inside any Joomla article. Now what's new in this update is, if you have previously created any article using SP Page Builder, you don’t have to go back to the backend of your website, you can now edit it right from the frontend.

Note: In order to use this functionality, you need to reinstall Joomla Article Integration. To do so, navigate to 'Integrations' from SP Page Builder (backend) left menu bar, find "Joomla Article" and click 'Uninstall'. Install it again and then click "Enable". A step by step guideline can be found in this article

Other notable things

Along with the amazing new interface that SP Page Builder is offering in this update, it has also fixed few known bugs and brought several improvements. We have introduced a new API to the Flickr Gallery addon so that you can display an unlimited number of images with Flickr Gallery and fixed the image width issue. The column option editing with flexible padding issue including drag and drop is now fixed as well. Among other fixes, Greek language encoding issue is a remarkable one. It has taken a significant amount of time and effort to pull it off but now we are happy to say that there’s no more issue with Greek language entity in TinyMCE editor.

This is your beloved SP Page Builder with a new elegant UI. The newest functionalities will definitely boost up your development spirit and will certainly provide you with a better experience. As always, don’t forget to share your invaluable experience with us. Thank you for being with JoomShaper :) 

N.B. It is strongly advised to take a full website backup before updating SP Page Builder. 

Try SP Page Builder for FREE!    Get SP Page Builder

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.