Extra Add-on Documentation

# Introduction

A library of unique Extra Addons built with Uikit Front-end Framework for your favorite SP Page Builder. It's compatible with SP Page Builder 3 (free and pro edition).

Front-End overview

Back-End overview

Extra Add-on requires the SP PageBuilder component, You need to download and install SP Pagebuiler Free/PRO edition, head to the developer website to learn more.

Download SP PageBuilder Free

Extra add-ons included 32 core add-ons (pro) and 23 free add-ons to help you create a wonderful site with SP Page Builder.

Core Extra Add-Ons (Pro)

  • Custom Html
  • Ui Accordion
  • Ui Button
  • Call To Action
  • Card
  • Content Align
  • Countdown
  • Counter
  • Description
  • Gallery
  • Grid
  • Card Slider
  • Headline
  • Call Out
  • Leader Price
  • Light Gallery
  • List
  • Map (Openstreet)
  • Marker
  • Overlay
  • Person
  • Pricing
  • Progress
  • Simple Gallery
  • Simple Pricing
  • Slider
  • Slideshow
  • Switcher
  • Table
  • Team
  • Testimonial Slider
  • Video

Free Extra Add-Ons

  • Alert
  • Business Hours
  • Button Group
  • Infobox
  • Card Header
  • Code
  • Cookie
  • Divider
  • Heading
  • Headling Highlighted
  • Uikit Icon
  • Image
  • Modal
  • Navbar
  • Notification
  • Particles
  • Social
  • Subnav
  • Svg
  • Testimonial
  • Text
  • Toggle
  • ToTop

# Installation

Install Extra Add-ons plugin into your existing Joomla site or start with quickstart package. They are available as Joomla demo package (Quickstart) and include Extra Add-ons and the corresponding theme demo content. This is great if you want to to have a peek at how everything is put together.

# Extra Add-ons Plugin (Pro)

Starting from 1.2.1, we added the Extra add-on package that support Live front-end editing for SP Page Builder Pro version(plg_extra_addons_sppagebuilder_pro.zip). If you are using Pro version, you can update the package by installing the new package. Take a look the blog post for more detail.

Download the Extra add-on plugin plg_sppagebuilder_extra.zip if you are using SP Page Builder Free or plg_extra_addons_sppagebuilder_pro.zip if you are using SP Page Builder pro and install it by following the official Installing an extension instructions.

Enable Extra Plugin:

After install the Extra add-ons plugin, go to Extensions -> Plugins -> search for extra then enable Extra Addons Plugin - SP Page Builder plugin

If your template don't support Uikit front-end framework, remember install the Uikit Assets plugin.

# Setup a Demo Package

A demo package is a full Joomla installation, which includes the extra template, all add-ons and sample data responsible for the layout and setup of our Extra add-ons demo. This is great if you don't want to start from scratch or just to have a peek at how everything is put together.

Note We are using Akeeba component to backup/restore Joomla website, you can see more instruction here or head to the developer website.

# Updating

If a newer version of Extra Add-on is available, you will receive a notification via email. In that case, just visit the Account page and download your Extra add-on package.

Steps:
  1. Download plg_sppagebuilder_extra.zip via account page.
  2. Go to Joomla Administrator area -> Extensions-> Manage-> Install then reinstall the package.

# Using Extra Add-Ons

You can use the Extra Add-Ons via Front-end, Back-end or Joomla module.

Via Back-End: Create a new page with sp page builder or modify your existing pages, click add new add-on -> select tab WarpTheme then choose your add-ons

Via Front-End: Login to Joomla front-end, edit the page that built with sp pagebuilder -> then you can select the add-ons list from Left Sidebar panel:

Front-end Usage (SP Page Builder Free)

If you use front-end editing mode with SP Page Builder free version, after changing the content, you need to click the APPLY button to see the result appear on the right panel. SP page builder free version does not support live editing.

Front-end Usage (SP Page Builder Pro)

You can see the result appear immediately after changing the add-on content, no need to click apply button.

Via Joomla Module: Go to Extensions -> Modules -> New -> SP Page Builder, here you can add the new row then add your new addon from modal panel:

Uninstalling

Select "Extensions" and then "Extension Manager" from the dropdown menu -> search for extra then check Extra Addons Plugin - SP Page Builder checkbox and uninstall it. You can following the official Uninstalling an extension instructions for more help.

# Uikit Assets (optional)

Extra add-ons requires the Uikit front-end framework to function. If your templates are not including the Uikit 3 framework, you need to install the Uikit Assets plugin and enable it. This plugin contains the Ukit Css/Js libraries for the Extra Add-Ons.

By default, all WarpTheme templates based on the Helix Ultimate already included Uikit3 framework. If you are using one of these templates, you don't need to install the Uikit Assets plugin for Extra Add-ons.

Download the Extra Uikit Assets plugin plg_uikitassets.zip and install it by following the official Installing an extension instructions.

Download Extra Uikit Assets

# Implement the live editing for SP Page Builder PRO

Problem:

The extra add-ons 1.2.1 released recently that support the Live Editing mode for SP Page Builder Pro, however, the live editing mode not being applied correctly in some cases, if you face this situation, please do following:

Solution 1:

1. Download plg_extra_addons_sppagebuilder_pro.zip, Unzip the package

2. Copy the unzipped /addons folder to joomla-root/templates/template_name/sppagebuilder/

Solution 2:

If you already installed the package plg_extra_addons_sppagebuilder_pro.zip for SP Page Builder Pro, just navigate to joomla/plugins/sppagebuilder/extra/ then copy the /addons folder to joomla-root/templates/template_name/sppagebuilder/

Note Create a new sppagebuilder folder inside your template folder if it does not exist

Video Live Editing Tutorial