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

SP Page Builder (Pro) 3.x

Updated Last: 26 May 2023
Back to SP Page Builder

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.  Information about which version you are currently using is available on the left-bar of SP Page Builder window or inside Extension Manager.

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). Screenshot from Joomla 3.10.

    step 1

    In Joomla 4.0.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.

    step 2

  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 to update SP Page Builder

SP Page Builder (Pro) 3.x can be updated like any other Joomla! extensions just by installing a new version on the current one. Caution: Do not uninstall the previous (or the current) version. Make sure that your hosting account is using PHP 7.0.x or PHP 7.2, if not - please ask your hosting support for help or switch to a higher version directly from the cPanel.

Please make a database backup before updating any Joomla components to prevent data loss in case any error occurs. (tip: you can use Akeeba for backup)

Steps to follow for updating SP Page Builder Pro (for 3.x and higher versions)

  • To install it automatically from the Joomla admin area, do the followings:
    1. Go to Extensions: Update > click "Clear cache" button (top left)
    2. Click the "Find Updates" button
    3. Mark SP Page Builder from the list
    4. Click "Update" to install the latest version

  • Or, to install manually, do the followings:
    Download the last stable version from the download section and install it like any other extensions in Joomla! To do that -
    1. Go to Extensions > Manage > Install
    2. Browse to the Upload Package File tab
    3. Now, drag and drop the sp page builder zip file (com_sppagebuilder_pro_v3.x.x)
    4. Clear your browser cached files.
    5. Clear Joomla cached files.

If you have an older version of SP Page Builder 1.x installed, please follow these steps 

  1. Download SP Page Builder Pro 2.5 (ask Support for that version).
  2. If you have JCE editor, update to last stable version.
  3. Make database backup (you can use Akeeba backup).
  4. Install SP Page Builder Pro 2 package.
  5. Clear browser cache deeply.
  6. Clear Joomla cached files.
  7. If you cannot login to Joomla Admin area, please delete that folder: administrator\modules\mod_sppagebuilder_admin_menu
  8. Check Pages in admin, if you have all of them. Open few to check.
  9. Check pages view from front-end.
  10. Make sure that template used by you is ready for SPPB 3. Updated, no old addon overrides.
  11. Make full site backup.
  12. Download SP Page Builder Pro 3
  13. Make sure that you have Joomla 3.9+ installed
  14. Install it.
  15. Repeat step 5, 6  and 8

If you added license key and e-mail in SPPB Options you should also be able to use Update from Extensions Manager > Update.

Note! If you have installed JCE Editor, please update to last stable version, 2.7+.
Do not update PRO version with LITE version because you will loose all PRO features.

How to enable Article Integration

SP Page Builder Pro allows you to use Page Builder mode also inside Joomla articles (and k2 items). To get the option to switch between the Joomla  editor (TinyMCE) and the Page Builder you have to:

  1. From "Integration" tab select "Install" button in Joomla Article box.
  2. Then click the "Enable" button.
  3. Till now you should be able to see and use editor mode switcher in all Articles.
    For each article separately choose used editor mode. Keep chosen option during Save & Close.
  4. Intro text must be added in Classic mode, SPPB cannot be used for this.
    SPPB mode can be used only for single detail article view.

How to backup Pages created in SP Page Builder

It's possible to backup/export all pages but requests extra steps. Here are popular methods:

  1. You can export all pages, one by one, by the Export button feature.
  2. Use the Akeeba Backup extension and exclude tables from the database that you don't need. Keep only those that have "sppagebuilder" phrase in their names. Look point below.
  3. Use PHPMyAdmin and export those tables: prefix_spmedia, prefix_sppagebuilder, prefix_sppagebuilder_addons, prefix_sppagebuilder_sections, prefix_sppagebuilder_integrations.

The most important are those two:

  • prefix_sppagebuilder (pages) 
  • prefix_spmedia (location of images)

prefix = database prefix, in old Joomla versions it was jos_

Remember to copy (keep) also used images (jpg, png, gif, svg) and video files (mp4). Just backup those folders (if you have them):

  • images/2019
  • images/2020
  • images/2021
  • images/2022
  • and also different folders - if you used them inside pages or SPPB modules.

Use the FTP tool or File Manager from cPanel to transfer/backup folders and files inside.

1) First, you need to enable the Smart Search plugins from the Joomla plugins directory.

2) Then you need to create an article using SP Page Builder.

3) If you want to show the SP Page Builder contents in smart search then you need to add some search keywords in the Joomla editor.

4) Please don’t forget to select SP Page Builder before saving.

5) Now you need to index your contents. To do so please go to Components > Smart Search.

6) Then click on the Index button.

That's it, you got the smart search working!

How to use Multi-language Pages

SP Page Builder (Pro) is a prepared component for creating multilingual websites. You can configure a website with all Joomla available language.

Each Page created in SP Page Builder(Pro) can be assigned to a different language. It also means that first, you have to configure Joomla multilingual system to be able to choose languages for items. Install extra language and configure it, also from Languages: Content. Then you you're able to choose language for each Page.

  1. Inside chosen Page (Home, About us, etc.)  > Options (top right corner).
  2. Then choose Publishing > Language > Select language from list*. 
  3. Apply changes.
  4. Save Page settings.

* It's similar features/settings as you have for core articles, modules, and menu items. By default, all new Pages are assigned to all languages. If you are not using the multi-language feature of Joomla, keep the default of 'All'.

Note: Unfortunately, in the current version you cannot choose a different language for each row or/and addon separately.  Language chooser option work only for entire Pages.

 Component options translation only:

  • If your language is on the list, you can install from it.
  • If you cannot find there your language you have to check: JoomShaper account in Transifex.
  • Translations were made by the Joomla community.

How to Override Addon in a Template

The standard output from any SP Page Builder addon can be overridden by adding code to the /sppagebuilder/addons/ directory of your front-end template. An override is a file or database entry that is loaded instead of the normal core file.

An Introduction to Addon Overrides:

  1. First, you need to copy selected addon folder from this directory:
    components/com_sppagebuilder/addons
  2. To this location, creating the appropriate directories in the event they don't already exist:
    templates/your_template/sppagebuilder/addons/
  3. Now you can safely edit the addon file(s): 
    site.php - this file is to present front-end view with added content 
    admin.php - this file is responsible for addon settings/content (text, chosen image, colors, links etc.).
  4. Save the file and your change will be visible.

Note: The wrong way is to directly edit Joomla or component files. If you do, you'll lose all your changes during the next update of your site.

How to Create Custom addon in SP Page Builder

You don’t have to be a professional developer to have your own addon. If you know a thing or two about programming and can write functions to execute your desired task. You can create a custom addon for SP Page Builder any day you want. Follow the following process to create your own custom addon in SP Page Builder but before that download and extract this source code zip (download file using Firefox, Safari, Edge).

  1. Open the sample.php file with any code editor and rename the class PlgSppagebuilderSample to your preferred name, you should replace the word Sample with your desired name.
  2. Now open the sample.xml file and replace three words in this file. Firstly, in the <name> tag put the name of your addon. Secondly, and this is the important part, in the <filename> tag replace the word sample with your addon name. Note: all characters must be in lowercase.
  3. Among the extracted files, you'll find addon folder which holds another folder named hello_world this is the folder for our new (custom) addon. You can change it according to your addon name. This folder will host assests folder which will have the addon icon, admin.php, and site.php files.
  4. In the admin.php file define the value for addon_name, title, icon and then start writing your own functions. 
  5. Open the site.php file and change the class name SppagebuilderAddonHello_world to SampleBuilderAddonYour_addon and whenever you are going to name a div use this format sppb-addon-hello-world. 
  6. Don't forget to save the files once you have made modifications. Finally, make a zip file (like the one you've downloaded and extracted just now). This is the file you'd be installing to your Joomla website.
  7. Install the zip file you created like any other Joomla extension on your site, by going to Extensions > Manage > Install > Upload Package File (tab) and drop the zip file. 
  8. Finally, go to the plugins list and enable your addon. You can do that by going to Extensions > Plugins > find your plugin and enable it. 

Your newly created addon should now be visible along with all the other SP Page Builder addons. 

How to Embed PDF in SP Page Builder

You cannot fully use shortcodes from plugins that can insert PDF file. There are several ways to include a PDF file in your article (with Article Integration enabled) or page (SP Page Builder):

  • The easiest way to put a PDF file and display it in the browser is using the button addon. 
  • Another way of adding a PDF file s using the <iframe> tag inside RAW HTML addon. It allows setting your preferred width and height as well.If you don’t want the users to download your PDF file, add #toolbar=0 after the URL of your PDF document.

Example HTML code:

 <iframe src="/images/pdf/example.pdf#toolbar=0" width="100%" height="500px">
    </iframe>
pdf file

How to use Shortcodes from plugins

Can I use shortcodes from extra installed plugins or components inside SP Page Builder? In general: No. Because we are not responsible for any errors resulting from displaying external code. There is no built-in support, you cannot use them inside addon, but there is a way which may work:

  1. In Modules, add a new Custom module.
  2. Inside textarea insert shortcode  { } [ ] or use button from the plugin.
  3. In custom module settings: Options > Prepare Content: Yes.
  4. For module set position: pagebuilder.
  5. Set status: Published.
  6. Then inside SPPB mode add Joomla Module addon and inside choose this module.

Notice! In some cases, external code may damage the page layout.

How to use Custom CSS

Yes, you can use custom CSS code inside SP Page Builder to customize the appearance of any page, row or addon appearance. Your own CSS styles allow you to override the default styles. Custom CSS you can add from:

  • Page > Options > Custom CSS
  • Addon > Style > Custom CSS

Don’t forget to click on the ‘Save / Apply’ button on the top when you are finished. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s preview.

Note: Any custom CSS that you add inside Page is only available with that particular page. If you would like to use it on whole website, then you will need to cut and paste it inside custom CSS area from your Joomla template.

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. There are two methods to achieve it. One of them may work. Both of them request a common step. You have to install an extra module (or extension) which 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.

Method #1:

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

OR  when an above method doesn't work use

Method #2:

  1. Install the Sourcerer (From Regular Labs) it can be Free or Pro version.
  2. Create a new custom module, and use the Sourcerer plugin to insert the JavaScript code.
  3. In module settings: Options > Prepare Content: Yes
  4. Set status "Published" for that module.
  5. Choose position: "pagebuilder" - or input it manually.
  6. Then use "Module" addon (from SP Page Builder) in the desired place, select custom module (step 2).

How to use Custom PHP

We don't have a custom PHP addon yet. But there are two methods to achieve it (they may work):

  1. Download and install: Flexi Custom Code module (directory.appsnity.com).
    Add custom PHP code inside, then check if work by publishing in a module position. If yes, in module settings change module position to "pagebuilder" then you can put that module inside "Module" addon if you need code inside SPPB.
  2. Install the Sourcerer (From Regular Labs) it can be Free or Pro version, and put code inside Custom Module.  In module settings: Options > Prepare Content: Yes - and publish inside "Module" addon.

How to use Custom HTML

 If you have installed SP Page Builder Pro there is RAW HTML addon on the list. This is very useful if you need to add a HTML block to your page. This is only for raw HTML code, do not use JavaScript or PHP code there. Also iframe can be disabled because of security reasons. Yes, you can use style=" " with custom CSS inside. Some features of Raw HTML will only work for users who have the “unfiltered_html” capability.

How to translate Contact form

Over 13 languages  you can easily install from SP Page Builder admin area. It should be the first step to get a translation for both, front and back-end. We use the transifex platform to manage SP Page Builder translations.

Method #1:

SP Page Builder (Pro) like any other component includes .ini files which contain all of the English terms we have used. In most cases you have to translate at least those two files:

  • language\en-GB\en-GB.com_sppagebuilder.ini  
    (this file include words used in contact form fields, twitter, Social Share addon, Optin Form and front-end editor)
  • language\en-GB\en-GB.mod_sppagebuilder.ini
    (this file is used for SPPB module view only, not if have contact in Page or SPPB inside Article)
  • administrator\language\en-GB\en-GB.com_sppagebuilder.ini 
    (this file include all admin phrases)

The example language phrases used in Ajax Contact Addon:

 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_NAME="Name"
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_EMAIL="Email"
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_PHONE="Phone"
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_SUBJECT="Subject"
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_MESSAGE="Message"
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_SEND="Send Message"
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_WRONG_CAPTCHA="Wrong answer! Please enter right answer."
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_SUCCESS="Email sent successfully!"
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_FAILED="Email sent failed."
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_CAPTCHA_NOT_INSTALLED="Please make sure that, re-captcha pluging is enabled"
 COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_INVALID_CAPTCHA="Invalid Recaptcha"

Translate the strings to your language and save them as with native language prefix and copy to your language folder. For example:

fr-FR.com_sppagebuilder.ini |  ru-RU.com_sppagebuilder.ini 
es-ES.com_sppagebuilder.ini  | nl-NL.com_sppagebuilder.ini  

File (.ini) must be saved as UTF-8 without BOM encoding. Once the phrases inside file have been translated, you can copy your language file into your language directory using an FTP client.

Method #2:

In some cases language phrase from contact form can be located in template language file (.ini) so please check also there: language\en-GB\en-GB.tpl_THEME_NAME.ini

Method #3:

You can translate selected phrases also using the overrides feature in Joomla (Admin Top Menu): Extensions > Language Manager > Overrides tab. But first, you have to get know BIG LETTERS phrases, take them from the language file. Below is a basic example from the back-end.
Languages_Overrides

Joomla Language Overrides documentation link: https://docs.joomla.org/J3.x:Language_Overrides_in_Joomla

How to set multiple recipients in Form Builder addon

In Form Builder addon you set can max 3 recipients which can get an e-mail from form sent by user.

  1. Use the Recipient Email field for the main e-mail ([email protected]
  2. In Email Headers add Cc: [email protected] -- that person receives a copy of the sent message.
  3. In Email Headers add Bcc: [email protected] -- just like CC, BCC is a way of sending copies of an email to other people. The difference between the two is that, while you can see who else has received the email when CC is used, that is not the case with BCC. The other recipient won’t be able to see that someone else has been sent a copy of the email.

Notice! Contact addon doesn't have this feature, inside it you can set only single recipient.

How to get short URL aliases for articles

To get short URL aliases from Article or similar article display addon please:

  1. Enable "Use URL Rewriting" in Joomla Global Configuration > Site > SEO settings.
    Remember to rename htaccess file.
  2. Add selected article category to the menu, as a new menu item (blog view), it doesn't have to be inside MainMenu.
  3. Article Options > Integration
    URL Routing: Modern  
    Remove IDs from URLs: Yes
  4. Then clear Joomla cache.
  5. Remember to update all links added manually to buttons etc.

How to change Row background image settings in mobile view only

Safari browser and some others mobile browsers interpret incorrectly the background-attachment:fixed  together with background-size: cover properties which causes issues (blurry background image). To fix it you should override styles for mobile view only.Please follow these steps:

  1. In Row Options in custom Class Name add phrase: no-fixed-cover
  2. Then inside Page Options > CSS  or template custom CSS section add following code
  3. Clear Joomla cache, and refresh browser cache to see improvements:
/* ----------- Smartphones & Small Tablets----------- */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px) { 
.no-fixed-cover {background-attachment: scroll !important; background-size: contain !Important;}
}
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
 .no-fixed-cover {background-attachment: scroll !important; background-size: contain !Important;}
}

 * Instead "scroll" value you can also use "initial" - just check what value better work for your mobile browser.

background-attachment: initial !important;

How to use Columns Equal Height

By default this option is enabled (pre-made in CSS) it helps to keep visual integrity of the design. Where columns are all equally tall in the Row, matching the height of the tallest. All you have to do is:

  1. Set background color (different than Row Background color), border or shadow for each column separately.
  2. Save column settings
  3. Save Page settings and preview changes.

Note! This feature is not for crop/cut off content (images or text inside). It works only for columns, not background set for addons.

Advantages: You don't have to restrict the number of used words nor cut sentences off mid-flow. For this purpose, we used CSS3 Flex property to calculate the length of the item(s)  relative to the rest of the items inside the same container.  Items can “flex” their sizes (grow) to respond to the content/space, which giving us far more flexibility with the appearance of the columns.

How to hide Edit Page from the front-end

Some users asked us: How to hide the Edit Page button from the front-end for everyone including the Super User(s). By default settings of SP Page Builder 3.4.x is not possible, but using CSS you can solve it.

#sp-page-builder .sp-pagebuilder-page-edit 
 {display:none !important; opacity: 0; z-index: -1;}

You can use the above custom CSS inside selected Pages only (Options > Custom CSS) OR in your template custom CSS section for the whole website

Increase/decrease maximum upload size through the media uploader

Depending on the host, you’ll see a limit for the file size that you can upload through your Joomla Media uploader. Add the below code to your .htaccess file to increase the upload limit to 16MB:

php_value upload_max_filesize 16M
php_value post_max_size 16M
php_value max_execution_time 300
php_value max_input_time 300

In case of major error on your site, please contact with hosting company support.

How to add a container to SPPB Module

The container is not used by default for SPPB modules, that's why if you want to have content inside "smaller box" like in articles or pages you have to add extra class each time.  In SPPB module setting > Column Options > Custom Class >  add word:  container 

Switching to SP Page Builder from Gridbox

Gridbox and SP Page Builder are not compatible. If they are both enabled they may generate conflicts and unusual problems. It is not advisable to use them together on the same site. In general do not use more than Page Builder type software on production website.
Unfortunately, but we do not have a migration tool between any Page Builder. You have to rebuild your layouts from the beginning

How to work with columns

 SP Page Builder to manage columns use Bootstrap's grid system allows you to divide a row into 12 columns of equal width. However, these columns can also be combined in order to create columns that are wider and positioned differently. If you do not want to use all 12 column individually, you can group the columns together to create wider columns.

manage-columns

You can have:

  • Two equal-width columns (6+6)
  • Two columns with different width (4+8)
  • Three equal-width columns (4+4+4)
  • Four equal-width columns (3+3+3+3)
  • Custom grid with: full wide column, two equal-width columns and full wide column (12+6+6+12)

Example grid structure (12 columns, 3 columns, 2 columns, and single column)

Tip: Remember those grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.

You can also control of tablet and mobile view, how many columns would be displayed there.
In Column Options > Responsive > Tablet Layout / Mobile Layout > set

column_options

You have to use this same settings for all columns in Row.

Please watch a video guide how it works: https://youtu.be/VWztuFXiDiU

 

What are SP Page Builder Mobile, Tablet and Desktop Breakpoints

Breakpoints are the point a which your sites content will respond, they are  based on minimum viewport widths and allow control elements as the viewport changes. The SPPB grid system has 3 basic classes: xs (phones), sm (tablets), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts. For example, SP Page Builder allows you to hide from displaying: addons, columns and rows for 3 main devices. Our component primarily uses the following CSS Media Query ranges:

  • xs - Small devices (Phones) - Less than 767px
  • sm - Medium devices (Tablets) - range: 768px - 1199px
  • lg - Desktops - min 1200px and up

How to use Nested Rows

Inside selected column you can add additional row ("child rows"  or "row in row"). Embedding a row within a column is very useful if you need to subdivide a column but you don’t really want to break it out. First, you need to use keys icon from Column toolbar, then Add New Row. Remember nested (sub)row should include a set of columns that add up to 12 or fewer. This way you will get two independent columns.

Below is example with two columns set to size 3+9. As you can see there is a place for addons on the left column (size 3) and right area which is much wider (size 9).

How to set full width (fluid row) in Article

SP Page Builder inside article works inside component area. In Helix based templates this area is inside container with max-width set, so by default you cannot use full width. Fluid Row : Yes inside Row option don't work. Using custom CSS to can modify this default behavior.  For selected articles only (unique article number):

body.itemid-430 #sp-main-body .container {max-width: 100%;}

Method for all articles:

body.view-article #sp-main-body .container {max-width: 100%;}

Notice! Above CSS code will spill whole article (make full width) for all elements, article blog image, title and content.

How to change generated CSS storage

In SP Page Builder 3.4.x we added new feature Production Mode. If enabled the production mode automatically stores the CSS code that generates from all the addons from SPPB only in a web page into a single CSS file. By doing so, it reduces the website loading time. Up until now, the addon CSS had been generated inside the header tag, but with the Production Mode enabled, all the code will automatically be stored in a separate CSS file.

Warning! If you have installed Akeeba Admin Tools (Pro) and you used Htaccess Maker make small correction in settings in the section:
Allow direct access, including .php files, to these directories: "media/com_sppagebuilder" folder.

To enable Producation mode, go to SP Page Builder > Options > Production Mode > Yes.

SPPB Production Mode

To better understand the application of this mode, have a look at the Before state of a website.

SP Page Builder 3.4 Pro brings the most awaited Slideshow addon, Blend mode and more

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.

SP Page Builder 3.4 Pro brings the most awaited Slideshow addon, Blend mode and more

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

Notice!  Production Mode does not compress CSS/JS files from other installed extensions. For this purpose install JCH_Optimizer plugin.

How to use Purge CSS option

When you use the Production mode of SP Page Builder, 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. To address this matter, we’ve added a Purge CSS option in SP Page Builder that you can use to remove the cached CSS in one-click.

How to access and import layout bundles?

All of the SP Page Builder Pro users, upon confirming the license key, can access, explore and import any layout bundles.

In order to get the latest layout bundle, you need to update SP Page Builder Pro to the latest version. You can access the layout packs from both the backend and the frontend. Since the frontend method shows everything live, here we’ll see a step by step guideline for the frontend method.

Step 1: Open Page Templates

After creating a page, (you can now create a page on the frontend) and opening it in editing mode, click on the “Page Templates” button.

Importing page template in SP Page Builder step by step

Or, from the left sidebar click “Layouts”.

Importing page template in SP Page Builder step by step

Step 2: Import a layout

Having done either of the above steps, it will pop up all the layout bundles of SP Page Builder then you can browse and select the one that fits your needs. 

Finally, click “Import” to use any page layout inside the bundle. Repeat these steps for importing multiple pages. Now you can customize these pages with your own contents. Please remember, if you have trouble finding any existing layout bundle, try clearing the cache of your Joomla website. To do so, go to System > Clear Cache > Delete All.

How to solve "Notice: Undefined property: SppagebuilderViewPage"

In 99% cases that bug is caused by template override. Many templates which you can buy online are still based on the old SPPB framework (v2.5.x).
In SPPB Pro 3.x we made many changes in code that's why if template developer wouldn't update - you might get those types of error messages instead of of working page. You have two ways to solve it:

  • Quick:
    DELETE that folder and file inside
    templates/THEME-NAME/html/com_sppagebuilder/page/default.php
  • Longer:
    Ask the Template developer/seller for the template code update.

How to fix "Bad karma: we can't find that page!" from sh404SEF

This error message during page preview is from the Sh404Sef component, not directly from the Joomla core. SH404SEF could very probably be considered the most known full SEO extension for Joomla, it allows you to manage URLs paths. To correct the problem of the non-existing page - please:

  1. Update SP Page Builder Pro component to last stable version, 3.6.4+
  2. In sh404SEF Configuration > General > Tab "By component" > Sppagebuilder > in 2nd column choose:  Joomla! router.php, with menu  > Save changes.
  3. Purge wrong URL(s) stored in SEF URLs section of sh404SEF component.
  4. Clear Joomla cache.
  5. In some very rare cases, you have to change value also in the first column "default handler".

sh404SEF

If you've ever run into a situation where you have updated your site's Open Graph and meta tags, but the Share Preview of your post is showing out of date/incorrect information, you may need to reset the cached data for your page(s) on the social networks.

From where I can get Google Maps API

Since July 2018, Google Maps is no longer free, now you are responsible for your personal Google JavaScript Maps API key. New Maps JavaScript API v3 has another key system, so the v2 key (old) will not work anymore. The key you can get from Google Could Platform. To get this key, visit the Google APIs Dashboard. Assuming you already have a Google account, you should be able to access this dashboard without needing to sign up for anything. Once your billing has been set up, you can move onto creating your API Key. If the JavaScript API is not enabled, then click Enable on the Google Maps Javascript API window. From API & Services > Dashboard, press the button +Enable APIS and Services choose the "Maps Javascript API" and then Enable.

Note, according to a Google policy, you a 12-month or $300 credit free trial. When this free trial ends, you will get up to 28 000 map requests per month and 40 000 direction calls per month, free of charge. You will only be billed when your usage exceeds your monthly $200 credit limit.

Sounds scary? You don't have to use Google Maps - instead use addon with Open Streets Map (SPPB Pro). Those types of maps are free to use, without any API key nor credit card details.

Alternative way - you can still have a map for FREE ($0) just choose map area, click Share to generate map embed code, and then copy and paste iframe code inside Raw HTML addon. You can change map size inside HTML code, it's pretty basic.

google maps for free
Was This Helpful? Yes (15) No (4)