SP Page Builder, Drag-and-Drop Joomla Sites

sp pagebuilderSP Page Builder is a new Joomla! extension from Joomshaper which allows you to build Joomla pages via a drag-and-drop interface.

SP Page Builder is similar to Drupal's Panel in that it allows you to easily create pages and choose from many different layouts. Once the layout has been selected, you can add modules, accordions, icons, images, tabs and much else.

In this tutorial, we'll introduce you to SP Page Builder and show you how easy it is to build pages.

#1. Getting started with SP Page Builder

sp pagebuilder1
  • Go to Extensions > Extension Manager.
  • Select the the zip file you downloaded and click the Upload & Install button
  • Go to Components > SP Page Builder.
  • Click New.
sp pagebuilder2

#2. Creating a page and choosing a layout

  • Choose a Title.
sp pagebuilder4
  • Click Add Column.
  • Choose to create a layout with 3 columns by clicking the button marked below.
sp pagebuilder3

#3. Add an accordion

  • Click the green Addon link.
sp pagebuilder5
  • You're going to see a list of many features you can add. In this example, we'll choose Accordion.
sp pagebuilder6
  • Set a title for the Accordion feature.
sp pagebuilder7
  1. Click on the first accordion title
  2. Set a custom label
  3. Choose an icon class (optional)
  4. Add some content into the accordion area.
sp pagebuilder8
  • To add more items, click on Add Accordion button and repeat steps from 1 to 4.
sp pagebuilder9
  • When you are done. Click the Save button.
sp pagebuilder10

#4. Add a Joomla module

  • You can also place Joomla modules on your page. Start by clicking the green Addon link:
sp pagebuilder5
  • From the list choose Joomla Module:
sp pagebuilder11
  • Set a title.
sp pagebuilder12
  • Choose the module to load. For this example, we'll use Search.
sp pagebuilder13
  • Click the Save button.
sp pagebuilder10

#5. Add a text block

  • You can also place text areas on your page. Start by clicking the green Addon link:
sp pagebuilder5
  • From the list, choose Text Block:
sp pagebuilder14
  1. Set a title.
  2. Add some content.
sp pagebuilder15
  • Click the Save button.
sp pagebuilder10
  • Now we havea 3 column layout with addons. Click the Save & Close button to save the page.
sp pagebuilder16

#6. Create a menu item

  • Go to Menus > Main menu > Add new menu item
  • For the Menu Item Type, choose SP Page Builder > Page.
  • Select Page: choose the page you just created.
sp pagebuilder17
  • Click on the Save & Close button.

#7. Final Result

  • Go to your public site and see how it looks:
sp pagebuilder19

There are many more features in the free version of SP Page Builder, such as tabs, slideshow, images, buttons, icons, etc.

Be aware at the time of writing this post SP Page Builder is only a beta release and only available for Joomla 3. SP Pagebuilder is now stable and ready for live sites.