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).

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 addons (premium) 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)

Download the Extra add-on plugin 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

# Extra Add-ons Plugin (FREE)

Starting from Extra add-ons 1.1.8, no need to implement the free add-ons manually via template folder, just download the plg_sppagebuilder_extra_free.zip and install it.

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

  1. Download Free Extra Add-Ons from the Product Page.
  2. Unzip extra_addons_free.zip and copy the /addons folder to joomla-root/templates/template_name/sppagebuilder/

Note Create sppagebuilder folder if it doesn't exist in your template folder.

# Setup a Demo Package (Add-Ons Quickstart)

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 Addon is available, you will receive a notification via email. In that case, just visit the Account page and download your Extra addon Pro package.

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

Important For Extra Add-Ons 1.1.7 or lower, You need to delete the sppagebuilder folder located at joomla-root/templates/template_name/sppagebuilder/ (if you implemented these add-ons before)

Because the SP Page Builder lookup and execute the add-ons via template_name/sppagebuilder first instead the Extra add-on plugin. We need to remove this folder to make sure the SP Page Builder load the newest stuff of Extra add-on plugin (1.1.8 or higher).


  • Navigate to joomla-root/templates/template_name/ then remove sppagebuilder folder that included free extra add-ons
  • Download and install Extra add-on 1.1.8 plugin.

# Using Extra Add-Ons

You can use the Extra Add-Ons via Front-end/Back-end or using extra add-ons via 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 If you use front-end editing mode with Extra add-ons, after changing the content, you need to click APPLY button before saving the page.

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:


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)

Starting from Extra add-ons 1.1.7, we created an Uikit asset plugin for Joomla, if your templates don't support Uikit 3 framework, you can install this plugin and use our Extra add-ons with Sp Pagebuilder.

Download Extra Uikit Assets

This plugin load Ukit css/js libraries for WarpTheme Extra Add-Ons and all modules that require Uikit front-end framework. RTL Support automatically by default. The plugin load Ukit css/js for pages built with SP Page Builder only so it does not affect your website performance!

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

List WarpTheme templates already included Uikit 3 Framework:

Tixo II, Factory II, Minima II, Blank II, BusinessX, Cleaner, Bold, Edu II, Mida II, Construction II, Rachel II, Nitro II, Finadvisor II, Enterprise II, Nova II, MMA, Fixnox, Lemo, Alisa, Trendi, Vhost, Mini.

If you are using one of these templates, you don't need to install the Uikit Assets plugin for Extra Add-ons.

Override Add-ons Output

Add, override or extend anything without the risk of losing your customizations when updating the plugin.

If you want to override the default looks and feel for any addon, you can override the output for the add-on using override method. Navigate to joomla-root/plugins/sppagebuilder/extra/addons then copy the add-on you wish to change, e.g uicard

Next place the addon to joomla/templates/template_name/sppagebuilder/addons/

Create a new sppagebuilder folder and addons folders inside your template folder if it does not exist