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 and 4 (free and pro edition).

Extra add-ons included 56 add-ons to help you create a wonderful site with SP Page Builder.

Extra Add-Ons Pro

  • Custom Html
  • Ui Accordion
  • Ui Alert
  • Ui Business Hours
  • Ui Button
  • Ui Button Group
  • Ui Callout
  • Ui Call To Action
  • Ui Card
  • Ui Card Header
  • Ui Card Slider
  • Ui Code
  • Ui Content Align
  • Ui Cookie
  • Ui Countdown
  • Ui Counter
  • Ui Description
  • Ui Divider
  • Ui Gallery
  • Ui Grid
  • Ui Grid Counter
  • Ui Heading
  • Ui Heading Highlight
  • Ui Headline
  • Ui Icon(Uikit svg icons)
  • Ui Image
  • Ui Infobox
  • Ui Leader Price
  • Ui Light Gallery
  • Ui List
  • Ui Map (Openstreet)
  • Ui Marker
  • Ui Modal
  • Ui Navbar
  • Ui Notification
  • Ui Overlay
  • Ui Person
  • Ui Particles
  • Ui Pricing
  • Ui Progress
  • Ui Simple Gallery
  • Ui Simple Pricing
  • Ui Slider
  • Ui Slideshow
  • Ui Social
  • Ui Subnav
  • Ui Svg
  • Ui Switcher
  • Ui Table
  • Ui Team
  • Ui Testimonial
  • Ui Testimonial Slider
  • Ui Text
  • Ui Toggle
  • Ui Totop
  • Ui Video

Extra Add-Ons Free

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

Front-End overview

Sp Pagebuilder 4

Note: SP pagebuilder 4 no longer supports back-end editing, if you prefer working on back-end editing, stay with pagebuilder 3 version.

Sp Pagebuilder 3

Back-End overview(Sp Pagebuilder 3)

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 4

Download SP PageBuilder 3

# Extra Add-ons folder structure

Download the extra add-on extra_addons_sppagebuilder_Unzip_First.zip and unzip it. The package contains the following file and folders.

  1. plg_uikitassets.zip: This plugin loads the css/js libraries to add the functionality for Extra add-ons.
  2. Extra Sp PageBuilder 3: This folder contains the extra add-ons for sp pagebuilder 3.
  3. Extra Sp PageBuilder 4: This folder contains the extra add-ons for sp pagebuilder 4.

Installing Extra add-ons plugin assets(required)

  • Install the Plugin assets (named similarly to plg_uikitassets.zip) by navigating to System → Extensions → Select the "Browse for file" button. Locate the downloaded ZIP, select the plugin to begin the installation process.

    • Installing Extra add-ons for Sp Pagebuilder 3

    Next, install the plg_sppagebuilder_extra.zip plugin, the installation process is exactly the same for plugin asset.

    Note If you are using SP Pagebuilder Pro, please install the package plg_extra_addons_sppagebuilder_pro.zip for the live editing support.

    Enable Extra Plugins:

    After install the Extra add-ons plugin, go to Extensions -> Plugins -> search for extra then enable it.

    Note System - Extra Addon Assets plugin needs to be enabled to perform the Extra add-on functionality. By default, the Enable Uikit Framework option is Disabled, if you are not using WarpTheme template, you need to enable the Uikit framework for Extra add-ons to function.

    Implement Extra add-ons for Sp Pagebuilder 4

    Navigate to Extra SP Pagebuilder 4 folder, Extract the theme addons.zip file to a directory on your PC.

    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

    Here the example about the folder structure for wt_extra_addons template:

    Using extra add-ons as a plugin not working at the moment with SP Pagebuilder 4, the front-end rendering doesn't support for our add-ons if the add-ons stored in plugins/pagebuilder folder. So if you are using Sp PageBuilder 4, you need to implement the add-ons manually.

    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.

    # Upgrade

    Upgrading to Sp Pagebuilder 4

    If You are using SP Pagebuilder 3, go to Components -> SP Page Builder -> Pages -> Options. Then select SP PageBuilder Next from dropdown list

    After that, you will receive an update notification to update from Pagebuilder 3 to Pagebuilder 4

    Upgrading Extra Add-ons for Sp Pagebuilder 4

    Go to System -> Extensions -> search for Extra -> select Extra Addons Plugin - SP Page Builder then click Uninstall button.

    SP Pagebuilder 4 does not support front-end editing as a plugin(add-ons which included repeatable item field) at the moment, you need to implement the add-ons manually.

    We can revert back the plugin method later when SP Pagebuilder 4 add support for it without losing the content because the Extra add-ons are designed with the same layout options and add-ons configuration for both versions.

    The next step is Implement Extra add-ons for Sp Pagebuilder 4 the add-ons into an existing Joomla template manually.

    # Using Extra Add-Ons

    You can use the Extra Add-Ons via Front-end, Back-end(only sp pagebuilder 3) or Joomla module.

    Extra add-ons for Sp PageBuilder 4

    Screen Recording 2023-01-09 at 13.50.18.mov from WarpTheme on Vimeo.

    Extra add-ons for Sp PageBuilder 3

    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(Sp PageBuilder 4): 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 3)

    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

    Uninstalling Extra add-ons for Sp Pagebuilder 3

    Go to System -> Extensions -> search for Extra -> select Extra Addons Plugin - SP Page Builder and System - Extra Addon Assets then click Uninstall button.

    Uninstalling Extra add-ons for Sp Pagebuilder 4

    Go to System -> Extensions -> search for Extra -> select System - Extra Addon Assets then click Uninstall button.

    Navigate to joomla-root/templates/template_name/sppagebuilder/ and delete the /addons folder.