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 addon plugin plg_sppagebuilder_extra.zip 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)

For free add-ons, you need to implement the add-ons manually for your template. If your template don't support Uikit Framwork, 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
  1. Create a copy of your theme's /addons folder. That way, you will have a backup in case the update fails.
  2. Visit product page then download and unzip free add-ons package.
  3. Copy the /addons folder from the package and replace the one in your addons with this one.

# 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 assets 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.

Custom Add-ons Package

The plugin file contains 50+ extra addons, the compiled CSS and JavaScript files. You can create your custom add-ons installation package and remove unused add-ons to improve the performance while working in SP Page builder editing mode.

Unzip the plg_sppagebuilder_extra.zip package then navigate to addons folder, here you can see all extra add-ons, you can remove any addon that you not plan to use, e.g: uialert, uitext, uivideo, uitoogle, uitotop, uisvg and so on.

Next, zip the package then install it via Joomla Extension Manager.

Note: You can remove/delete existing addons at joomla-root/plugins/sppagebuilder/extra/addons

Override 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

Performance Editing (Pro only)

If you use SP Page Builder Pro and face the issue with the response time (slowly) when editing add-ons content (back-end), the solution is that remove any extra add-ons that you aren't planning to use to improved speed when editing content or working with add-ons in editing mode. See our custom add-ons package section above to learn more.

Problem: With large numbers of add-ons, SP pro add-ons and Extra add-ons (Over 100+), it takes time to load add-ons list on the back-end panel.