How To Tips | SP Page Builder (Pro) 4.x - Documentation | JoomShaper

SP Page Builder (Pro) 4.x

Updated Last: 23 May 2023

How To Tips

This section contains answers for popular "How to create/use/hide/override/translate ..." questions about SP Page Builder (Pro). For solving technical problems check the Troubleshooting and FAQ section. If you have more questions use the support forum.

How to add the license key and activate Pro feature

If you noticed "This feature only available at Pro version of SP Page Builder." message trying to use extension features - first make sure that you have the SP Page Builder Pro version installed.

You cannot upgrade Page Builder from Lite to Pro by adding a license key only. Pro version must be installed first.

  1. If you have a Lite version installed, please download the Pro version* and install it. It will upgrade code of extension without touching created before content, it's a fully safe process.
  2. Go to your JoomShaper Dashboard. Then please copy the license key, only numbers without any space around. The License key is a 32-digit number.
  3. Then from the Joomla! Backend, go to: SP Page Builder Pro > Options (top right corner) > License & Update (look at the screenshot below).
    In Joomla 4.x. admin area: Components > SP Page Builder Pro > Pages > Options > License & Update.
  4. Insert email address and license key to their respective fields. Use the same email you entered while signing up for JoomShaper account.
    Note: any extra space will result in an error.
  5. Save & Close the settings.
  6. Clear browser cache.

    Now you should be able to use all PRO features.

*Paid subscription is required to download SP Page Builder Pro and upcoming updates. Personal and Business Membership plans have different limitations. The SP Page Builder Pro that's included in the quickstart package, does not allow you to update and download SP Page Builder separately.   

How can I add support to SVG files?

SVG stands for Scalable Vector Graphics. It's an XML-based file format for vector images. They can be scaled to any size without an adverse effect in quality that's why this type of image file is so popular for logos and icons.

By default, Joomla Media does not support SVG files and during file upload, you may see "Unable to upload file". Hopefully can add SVG support to articles, pages, and templates easily.  Go to the Media global configuration (Content > Media > Options).

  1. Add svg,SVG to the list of global extensions (file types),
  2. Add svg as legal image extension,
  3. Add image/svg+xml,application/svg+xml as legal MIME types.

From that point on, you will be able to see SVG files in the Media Manager, you won’t have any preview for those files but you can easily select the SVG files wherever the media manager is used for image insertion.

In the JCE editor, you need to add ‘svg’ to the list of permitted file extensions if you cannot see/select them. Plugin Parameters -> Image Manager Permitted File Extensions.

How to use Custom JavaScript

Can I use custom JavaScript code inside SP Page Builder? In general, the answer is No. There is no custom JS addon yet. Also, we do not recommend using RAW HTML addon for such code, it wasn't developed for the JavaScript (!).

You have to install an extra module (extension) that allows you to put custom JavaScript inside. For the first try, we suggest adding & test this method from the back-end, with database backup done.

  1. For a module, we suggest using: HD-AnyCode or Flexi Custom Code.
  2. Then put your custom JS code inside.
  3. Set status "Published" for that module.
  4. Choose position: "pagebuilder".
  5. Then use the "Module" addon (from SP Page Builder) to choose and insert this module inside the Page layout.

How to use RSForms or Covert Forms inside Page Builder

Both those extensions have a module that can display the selected form - using this method is easier than a shortcode.

  1. In Joomla Module Mananager click Add button and choose a module from one of those Form Builders components.
  2. Inside the module choose the needed form ID/name from the list.
  3. Publish the module (Status: Published) and then choose "pagebuilder" position (or other not used in layout).
  4. Inside Page from SP Page Builder add Module addon then find & select that RSForm/Convert Form module.
  5. Save settings. The form should be displayed on your Page.