Options of SP Page Builder | SP Page Builder (Pro) 3.x - Documentation | JoomShaper

SP Page Builder (Pro) 3.x

Updated Last: 10 January 2023

Options of SP Page Builder

After installing SP Page Builder, it’s essential to set the SP Page Builder global configuration to your preferred settings. It holds some significant functionalities that will boost your production speed at its best. You can navigate to the global setting options either by going to, Joomla backend > Components > SP Page Builder > click on the Options button.

Or, navigate to Joomla backend > Systems > click Global Configuration and find SP Page Builder from the left sidebar. 

Once you’re there you’ll find the following screen. 

Sp Page Builder Pro - Options


Production Mode

The production mode automatically stores the CSS code that generates from all the addons in a web page into a single CSS file. By doing so, it reduces the website loading time. The addon CSS used to be generated inside the header tag before this mode was introduced. With the Production Mode enabled, all the code will automatically be stored in a separate CSS file. To enable this mode, go to System > Global Configuration > SP Page Builder > Production Mode > Yes.

To better understand the application of this mode, have a look at the Before state (before the Production Mode is enabled) of a website.

In the above screenshot, you can see the CSS code generated from all the addons reside in the <head> tag, but when the Production mode is enabled, they are stored in a separate CSS file.

So you see, a new CSS file is automatically created to store the CSS code that generated for the webpage.

Purge CSS option

When the Production mode of SP Page Builder is enabled, the component essentially generates a CSS cache file for faster page load. But, this may cause a delay in reflecting your latest page customizations on the live site - because the cached CSS file may still be in use. Use the Purge CSS option to remove the cached CSS in one-click.

Add Container

When designing your website from scratch, you’d want the liberty to design your page the way you want it. Therefore, enabling the “Add Container” option gives you the freedom to make webpage full-width. 

Google Map API Key

If you want to use Google Map to your website, you’ll be needing an API key from Google. Browse this link to get your Google Maps API Key. 

Load FontAwesome

FontAwesome 5 Free is always loaded when you use SP Page Builder. If you don’t want to use any font from FontAwesome on your website or remove the duplicated file if FA5 is loaded from template, you can turn this feature off.  More info you will find inside "Icons" tab still in the current documentation.

Lazy Load

Lazy loading is a technique that defers loading of non-critical resources at page load time. It means loading objects (images, iframes, videos) asynchronously. Since SP Page Builder Pro 3.7 update, you’ll have access to two types of lazy loading methods. The first one for the Chrome browser is built-in. And the second one is based IntersectionObserver’s, and you can enable from here. More information you will find in the current documentation, check "Lazy loading" tab or read a blog post.

Disable Animate CSS

SP Page Builder allows you to apply Animation effects to all its rows. Have a look at the below image for reference.

If you want to turn off this animation on the entire website, you need to set this option to Yes.

Disable Default CSS

When you don’t want to load the default style of your template, you can enable this option. 

Disable Default Open Graph Settings

The default Open Graph setting defines what content will show when you share a page of your website on Facebook. You can override the default by setting the toggle to “Yes”. However, if you want to use the default design you need to provide your Facebook App ID. 

Disable Twitter Card

The Twitter Card content is exactly what is shown in the Open Graph. The only difference is Open Graph is for Facebook and Twitter Card is for Twitter.