This section contains answers for popular "How to create/use/change/hide/override/translate ..." questions about SP Page Builder (Pro). For solving technical problems use the support forum.

How to add the license key and activate Pro feature

If you noticed the "This feature is 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 the 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 it. 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 into their respective fields. Use the same email you entered while signing up for the 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 .WebP files?

WebP is an image format developed by Google that aims to provide efficient image compression while maintaining high image quality. It's designed specifically for use on the web, where fast loading times and reduced bandwidth consumption are crucial. WebP images can significantly reduce the size of image files compared to other commonly used formats like JPEG and PNG. This can result in faster loading times for web pages.

Browser Compatibility:  WebP is supported by major modern browsers such as Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera.  Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later. Older versions of browsers, for example, IE11 do not support that format.

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

1. Add webp in Allowed Extensions, you can replace bmp - which is not used anymore.
2. Add webp in Legal Image Extensions (File Types).
3. Add image/webp in Legal MIME Types.

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

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

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.

Browser Compatibility:  SVG is supported by major modern browsers such as Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, and Opera. IE9-11 & Edge don't properly scale SVG files and do not support animations.

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 add reCaptcha Inivisble v2 in Joomla 5

Sadly, recaptcha invisible was removed from Joomla 5, and there is no official tip from the Joomla Team to recover it for now. But there is an unofficial way to get it done:

1. Download: Joomla_4.4.1-Stable-Full_Package.zip (or more recent 4.4.2+ etc.)
2. Unzip/Extract this folder: plugins\captcha\recaptcha_invisible

and those two lang files: administrator\language\en-GB\plg_captcha_recaptcha_invisible.ini and administrator\language\en-GB\plg_captcha_recaptcha_invisible.sys.ini

3. Using FTP upload them inside your Joomla 5 website (website server) and keep that same folder structure as it was in the original J4.4.
4. Login to Joomla 5 Admin area
5. System Dashboard > Discover > click "Discover" and install Recaptcha invisible plugin
6. Then you can find & edit it from Plugin Manager, put keys.

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 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 Convert Forms inside Page Builder

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

1. In Joomla Module Manager 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 select "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. 

We used that method many times - always worked. The only problem with not displaying the Form module is when you select the wrong module.

How to increase the size of the textarea area in the Text addon

In SPPB using the text editor inside the Text addon you can increase textarea area from default to full screen which is very useful when you edit long text.

• If you have a JCE (Core/Pro) editor you can add the missing icon using Components > JCE > Editor Profiles > Default > Features & Layout (tab) > Current Editor Layout - take the icon from Available Buttons & Toolbars. 
  
  Also from JCE settings (Edit Profile), you can set the Editor height of the JCE editor. You can use px or % value. Remember that height of the editor window can be also increased in the fullwidth view from the editor itself (bottom-right corner).

  Extra advice: in the JCE toolbar keep only those icons that you really need to use during typical text editing.  In most cases, you can reduce 50% of icons. This will save you a lot of space in the editor window.

  
  
• If you have a TinyMCE editor click the [...] icon to see the fullscreen icon. That icon is already on the toolbar.

How to make 5 columns and center these columns

You can easily make 5 columns in SP Page Builder 5 (Joomla) and center these columns with flexbox utilities. Those are the basic steps:

1. New Row
2. Columns > Custom: 2+2+2+2+2 > Generate
3. Row Settings > Style (tab) > CSS Class: d-flex justify-content-center
4. Page settings > Page CSS (or template custom.css):

.justify-content-center .sppb-row {
  justify-content: center; }

After using it

If you prefer to watch than read we have also the video guide (YouTube clip).