Documentation

SP Page Builder (Pro)

Introduction

SP Page Builder is a most flexible Drag & Drop page builder For Joomla 3.x. You can create any layout you want, instead of template that lock you into pre-created layouts. It can be used for constructing unique-looking Pages. It can be used wit any template, free or commercial. It allows you to easily add created page(s) in menu and display with useful and cool effects inside. Whether you’re a beginner, web designer or developer building commercial sites for clients or a business owner managing and maintaining your own website. SP Builder’s flexibility and functionality means one thing: web content design made easy.  Take full control over your Joomla! 3.6+ site with our page builder extension. You can start from Free version, then if you like it, take a step further and use more advanced Pro version.

page builder home start

This extension was especially designed to help you to make your site more informative and attract attention of your visitors to internal elements. And what is more important is working no matter what Joomla! template they are using.

We hope that this guide helps you discover of features the most suitable component for your next or current project.

Page Builder & Joomla templates

SP Page Builder gives you complete freedom to choose any Joomla Template you like. It's not a commitment to a single template or template developer. We built this component to make it independent of the Joomla! template you’re currently using, regardless of whether you are dealing custom, free or commercial template. Of course without needing to make any adjustments to the existing code. The advantage is that you're free to change templates as often as you like. Your content will always come along with you.

For example we tested it with: Helix2 Framework, T3 Framework, Gantry, Warp, Expose and YJ Simple Grid.

How to install SP Page Builder

Technical requirements for SP Page Builder (Pro):

  • PHP 5.5, recommended PHP 5.6+
  • PHP memory_limit = 64M  (in most cases can be changed in php.ini or .htaccess file)
  • PHP upload_max_filesize = 8M or more

If the host web server has GZIP support enabled with PHP, it is possible to upload a zipped (.zip) SP Page Builder package file that will be installed by Joomla! back-end default installer. The installation process for Joomla extensions is the same as the one for templates:

  1. Download the component to your desktop.
  2. Then Log into your Joomla Dashboard. In the top menu, hover over Extensions and then click Extension Manager.
  3. Under Upload Package File, click Browse and select the component that you downloaded above.
  4. Then click Upload & Install.

After the SP BP component has been installed, you are presented with a message saying that the installation process was a success. It means also you can use it for your new project.

NOTE: There is usually an upper limit to the size of files that can be uploaded within the web server itself. This limit is set in the PHP configuration file (php.ini) and may differ between web servers and web hosts. The limit cannot be altered from within Joomla!. Some hosting companies do not allow the limit to be altered at all. To allow larger files to be uploaded it will probably be necessary to increase the upload_max_filesize, max_file_uploads and the post_max_size settings - mostly in php.ini file or in hosting panel. Values must be above 5 MB for each.  About how to install SP Page Builder on localhost we have video manual here: https://www.youtube.com/watch?v=Ue7TfmQNBQA

If you bought a PRO version to download it please go to this area

 

How to update SP Page Builder

Sp Page Builder can be update or upgrade like any other Joomla extension just by installing a new version on current one. But each time we strongly suggest to make a backup of whole MySQL database before. This step is important especially if you are planning  to upgrade from Free version into Pro (commercial) version.

Some javascript used for new version of component was modified, however the browser being used is still using the old cached version of the javascript which no longer works. Be sure to clear your browser's cache and your Joomla! cache.

After component update please :

  1. Clear Joomla cache: System -> Clear cache -> Clear All  (or only SP Page Builder element from list).
  2. Clear your default browser cache. Just clicking the refresh button (or hitting F5) won't be sufficient in this case, because this reloads the webpage while still using the old files from the cache. You need to use a "force refresh" (!). You can achieve this by pressing the following key combination:
    On PC: Ctrl + F5
    On Apple MAC: CMD + R
    Those step are important for updates from older version to current one. They help CMS to get the latest javascript and css libraries from component.
    If addons in back-end aren’t displaying correctly, you can try using your browser’s incognito or “private browsing” mode to see if the problem is caused by something other than cache or cookies.

Note! Please do not uninstall current version because you may lost your page entries or crash PB tables.

If you have similar error message to this one:

Unknown column 'a.hits' in 'field list' SQL=SELECT a.id, a.title, a.alias, a.text, a.created_user_id,a.published, a.access, a.catid, a.ordering, a.created_time, a.created_user_id, a.language, a.hits,l.title AS language_title,ua.name AS author_name,ug.title AS access_title,c.title AS category_title FROM jos_sppagebuilder as a LEFT JOIN `jos_languages` (...)

Which probably appear after your attempts to install new version - to fix it you have to use PHPMyAdmin. Use following request which will add hits column to table:

ALTER TABLE `#_sppagebuilder` ADD `hits` bigint(20) NOT NULL DEFAULT '0' AFTER `language`;

Where "#" - must be replaced with your datbase prefix.

PHPMyAdmin tool you will find in your Hosting Panel, but also you can use, for temporary period, a free adminer-4.2.x.php  PHP Script (from adminer.org) instead which is a full-featured database management. Above commend should fix this error.

sql

 

Pro and update notification

If you have bought Pro version of SP Page Builder to get update notification and possibility to update just by one click you have to put your account data in settings area.

  1. In SP Page Builder PRO (admin area) on top right you will find Options button, click on it, now choose "License" tab where you have to fill two fields: License Key and your e-mail from JoomShaper.com account.
  2. In Extensions -> Update : choose "Clear Cache" button to delete all old requests. Now you can also click "Find Updates" if you're sure that we published new version and you still have a old one installed.

Above steps will help you solve problems with no update possiblity like it was presented on below screenshot.

update problem

 

How to fix JUser: :_load: Unable to load user with ID

If you see this error while seeing a SP Page Builder Page in the back-end of your site, it means the user associated to that item was deleted. There are multiple fixes for this issue but some of them require using a PHP MyAdmin  – we prefer only 100% universal and safe solutions. In component go to "Publishing" tab. Find AUthor and click blue icon with profile icon. Then choose different user from list and Save changes.

 

Nested Categories

Each page created by SP Page Builder (Pro) can be assigned into logical structure by categories and subcategories. Categories provide a helpful way to group related pages together. By default there isn't any category, and you do not have to create any if you don't want to. You can add a category directly from the SP Page Builder » Categories screen. Provide a name, and if you are creating a child category then choose a parent category. Provide a addcional description for your category and click on Save & Close button.

When creating and assigning categories, we think it's good idea to have a planned structure. For example division may be based on language used for pages (English, Dutch, German, Spanish) or topic sections like Products or Home Variations.

nested categories

How to add new page

This module(block)-based system allows to you build your page visually without ever having to touch a line of code or deal with a sea of messy shortcodes. You can create advanced layouts using columns and nested elements, as well as integrate ready modules. SP Page Builder gives you a completely new set of tools for creating and managing your content with tabs, accordions, images, testimonials, videos and much more and of course default Joomla modules. With this component it really is as simple as draging and droping chosen elements into the column to create page layouts in a fast and easy way. This makes it extremely easy for you to maintain and customize your site.

First step, is always this same, use New button to create a new page, then add title to this page, this is the only mandatory field.

new page pro

List of avaiable options:

move  - allows you to move rows in layout using mouse

columns

 - allows you to divide current row into columns

addon

 - allows you to insert one addon inside block from long list of avaiable (their number depends on the version of SP Page Builder)

options

-  It contain Column Options

 + - allows you to add new row

duplicate - allows you to duplicate row

del- allows you to delete current row, this action cannot be undone.

Each column have its own options which allows you to set few typical appearance settings:

  • Background Color - choose background color, by default it's transparent.  Use a background color and a text/font color that makes the text easy to read (contrast).

  • Column Padding - allows you to change padding for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

  • Column Animation - this option provides several effect of animation for a column. These include simple, standard animations that are frequently used.

  • Animation Duration - set how many millisecond an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

  • CSS Class - if you wish to add custom style for particular content element, then use this field to add a class name and then refer to it in your css file.

 

Column size (Add column)

You can choose grid from the available options (variants) or put your own values, but summary must be equals the number of 12.  Grid in SP Page Builder is based on bootstrap 3 layout.  Bootstrap's grid system allows up to 12 columns across the row used on page.

Below you can check real percent (%) values :

  • 12 = width: 100%
  • 11 = width: 91.66%
  • 10 = width: 83.33%
  • 9 = width: 75%
  • 8 = width: 66.66%
  • 7 = width: 58.33%
  • 6 = width: 50%
  • 5 = width: 41.66%
  • 4 = width: 33.33%
  • 3 = width: 25%;
  • 2 = width: 16.66%
  • 1 = width: 8.33%

1 2 3 4

(!) Remember that grid columns should add up to twelve columns for a row.

 

Joomla core module(s) inside

Yes, it's possible to use default (core) Joomla! modules inside SP Page Builder layout, not only addons from component.

joomla-module

In current version you can use Joomla! core modules (for example Breadcrumbs, Main Menu, Login Form) .
Even when you didn't find module which you need you can still use module positions from your template to insert that module above or under area created by SP Page Builder.

 

How to copy a row

SP Page Builder allows you to copy row settings not only between current edited page but also between different web sites where SP Page Builder is already installed. On each row you will find two buttons:  Copy and Paste. First is for creating a settings code and seconds allows you to insert it there.

row copy page builder

First what you have to do is click a "Copy" button, wait a few seconds and select all code from window and copy to temporary memory. Now in SP Page Builder create a new row and click "Paste" button.  And up pops a nice dialog that you can use to easily drop a code into the textarea.

paste new row

 Now you have to wait few seconds until system will process the request. Do not change page or clink any links in that time. just wait. And after that new row with copied all addons & columns layout should be presented.

row clone

 

 

SEO tips & Facebook options

SP Page Builder have build-in Open Graph support. Enables any page to become a rich object in a social graph. It uses Open Graph Title, Image and Description field - this option adds Open Graph tags in HTML which can help Facebook and Google+ decide which image should be taken.

Note: It's best to use a square image, as Facebook displays them in that matter. That image should be at least 600px wide in any of the usually supported image forms (JPG, PNG, GIF).

open-graph

How it works

The Open Graph protocol (OGP) enables any Web page to become equivalent to a FB page, by turning to an object in FB's social graph. The information is set via custom META tags on the source page. The Open Graph Meta Tags will help integrate your page into Facebook when someone clicks the "like" button or just generally shared.

What are the advantages

After implementing Open Graph tags, You will be able to increase your Facebook traffic 2x times, simply because now there will be always a good image next to text. Using this option allows you control how your site's information is shared.

What about typical Meta tags

To fill meta description and meta keywords fields in pages created by SP Page Builder you have to use Joomla! Menu Manager where you will find SEO features:

seo

Note: Meta descriptions are commonly used on search engine result pages (SERPs) to display preview snippets for a given page. Optimal Length for Search Engines between 150-160 characters. These short paragraph is opportunity to advertise content to searchers and to let them know exactly whether the given page contains the information they're looking for. As with title tags, it is important that meta descriptions on each page be unique.

meta

 

Publishing options

publishing

In publishing options you can decide if current Page (from SP Pabe Builder):

  1. will be published or not,
  2. for what language - because the language setting allows you to assign the page to all languages or to one specific language,
  3. and set Access rules - which determines who will be able to see the page, based on default Joomla! ACL.

 

How to add page view into menu

Because SP Page Builder is Joomla! component you can easily add new menu items using your extension views. The last thing we need to do is to add a new pagelink to the menu of our site. In our case, we will add it to the main menu.

menu

  1. In Menu Manager use New button to create a New Menu Item.
  2. In new window insert new title for item. This is the actual text that will be shown on your site menu.
  3. In Menu Item Type choose SP Page Builder.
  4. A lightbox will appear asking you to chose the type of menu item you will be creating. Select SP Page Builder -> Page.
  5. Now you need to specify the exact Page item you want to display in that menu. To do this, hit the Select button next to the Select Page field.
  6. Then from list choose Page which you want to use from those which have been created and published.
  7. Once you do that, click on the Save & Close button in the upper part of the page.
  8. You can now navigate to your newly created Page.

page-builder-menu

 

How to translate phrases

If English is not your native language you probably want to use the SP Page Builder component in another language(s), for example: German, Italian, Dutch, Russian or Suahili. We agree that translation is a crucial part of the website-localization process, and may help also your customer to understand how our tool works (admin panel).  This component includes one file (.ini) which contains all of the English terms we have used; this allows our users to only edit one file in order to be able to translate our templates to any language in the world. All you have to do is to translate two files:

  • language\en-GB\en-GB.com_sppagebuilder.ini   (this file include words used in contact form fields and twitter addon)
  • administrator\language\en-GB\en-GB.com_sppagebuilder.ini  (this file include all admin phrases)

Remember that instead of changing the original file, you can to make a copy of this file (from the server, template quickstart or component package). Open the .ini file with a text editor which is capable of handling UTF-8. Each HTML will be good for this purpose. You can also use free tools, like: Notepad++  if you are using a Windows operating system. A good start is to make sure that you’re using UTF-8 encoding. Now, you can translate selected entries into your preferred or native language. Edit the file and translate phrases on the right side of the equals (=) sign to the new language. The left side of each line (left of the equals sign) must remain the same – they are needed by the system. You don’t have to translate all strings from that file, select only those you really need. Each translated string must be enclosed by double quotes, always !

Then, you have to change the filename
from: en-GB.com_sppagebuilder.ini
to: xx-XX.com_sppagebuilder.ini

Where xx-XX is a LANG-PREFIX, for example es-ES – for Spanish (Español).

All phrases from Contact form & Twitter addon are inside file: language\en-GB\en-GB.com_sppagebuilder.ini:

#Ajax Contact#
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_NAME="Name"
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_EMAIL="Email"
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."
#Tweet Addon#
COM_SPPAGEBUILDER_TWEET_FOLLOWERS="Followers"
COM_SPPAGEBUILDER_TWEET_FOLLOW="Follow"
COM_SPPAGEBUILDER_SECOND="Second"
COM_SPPAGEBUILDER_SECONDS="Seconds"
COM_SPPAGEBUILDER_MINUTE="Minute"
COM_SPPAGEBUILDER_MINUTES="Minutes"
COM_SPPAGEBUILDER_HOUR="Hour"
COM_SPPAGEBUILDER_HOURS="Hours"
COM_SPPAGEBUILDER_DAY="Day"
(...)

contact form addon

Once the phrases inside file have been translated, you can copy your language file into your language directory using an FTP client. That's all.

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

lang strings

In the Language Constant input field insert, for example: “COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_SEND” without quotes – then in next field your translated phrase. In our example (below) we used a phrase from Contact Form Addon.
Languages Overrides

 

Hide on mobile devices

Yes you can hide selected elements olny from smartphone and tablet devices. If you're using a SP Page Builder (Pro) on JoomShaper templates based on Helix3, you're the lucky one,  because all of them were built based on Bootstrap 3 Grid System. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.  For faster mobile-friendly development, you can use Bootstrap 3 classes for showing and hiding content by device via media query. Use a single or combination of the available classes for toggling content across viewport breakpoints.

hide-mobile-tablet

Below you can see example of use " hidden-xs" class in addon setting window. But of course you can use them in Row and Column Class field as well.

hidden-xs

 Here is list of all classes which you may use in your SP Page Builder page, of course if used template uses Bootstrap 3.x.

classes-Bootstrap-hide-show

You can see how easily it is to build complex and dynamic pages with the SP Page Builder and Bootstrap 3 grid.

Page Builder in Helix2 templates

SP Page Builder is not typical Joomla component and a special attention is required if you are planning to assign the page built with SP PB as your main, home page. In particular, you need to turn off the Joomla "Component" block from your layout:

  • In your Joomla back end go to Extensions -> Template Manager -> shaper_TemplateName (based on Helix2 frameworks only). 
  • Click on the tab "Advanced" -> find parameter "Component Area" -> select option "No" -> click on Save & Close (see screenshot attached below).

componet-area

IMPORTANT: this tip works only on Joomshaper's templates, based on Helix-II, so it won't work if your template is based on new Helix 3. In Templates based on Helix3 you do not have to change any settings, because you will not find such a switch anymore.

No Text block on front-end ?

If you added Text block correctly and text area it was filled with content and saved in most cases should be able to see whole text. But there is one instance when you might not seen content.

no text

 

It's when you added "[]"  inside text, for example you have written "[button]". Sorry but inside SP Page Builder you cannot use "[]" - bracket inside content areas.  Remove all of them, then save settings and you will see whole text again.

bracket

How to override addons

Addon already built-in SP Page Builder can be easily overridden like for example modules. Template overrides in Joomla! are almost limitless.
Here are few tips which should help you understand of whole concept:

  1. From this folder: components\com_sppagebuilder\addons
    choose addon which you want to modify, much more than using CSS rules.
  2. Using FTP tool copy whole selected folder (with admin.php and site.php inside) inside used template folder : templates\shaper_template\sppagebuilder\addons\
  3. Now you can easily change php code inside without worries that next component update will hide it.

files

How to create a new addon

First notice, in most cases you have to be php developer to create a completly new addon. If you're not, we suggest to override current addon or use one which is already in component. Besides do not forget that you are able to use any module inside SP Page Builder layout, using module addon.
In SP Page Builder tool there are over 40 addons, some of them are simple when others have more complicated construction.  We suggest you to start analyse with the simple one like those:

  • components\com_sppagebuilder\addons\empty_space
  • components\com_sppagebuilder\addons\raw_html
  • components\com_sppagebuilder\addons\icon

As you can see those are basic addons with small number of options/features. But all of them have common objects and code sections.

 Each addon has its own folder and was build using 3 files only:

  • admin.php - includes all settings, language strings and declarations
  • icon.png - just a graphic icon for administration area only, 32x32 px, a PNG format
  • site.php - includes front-end view based on admin settings

 A new addon need to have a new, unique name which should be definied in both .php files.

In site.php on top section:

AddonParser::addAddon('sp_new','sp_new_addon');
function sp_new_addon($atts, $content){

And also inside admin.php file:

SpAddonsConfig::addonConfig(
    array(
        'type'=>'content',
        'addon_name'=>'sp_new',

 

Structure of admin.php is much more complicated because it includes all settings for front-end view. Expect addon name, you have to decide what type of elements you will be using there:

  • color (color chooser)
  • editor  (text area with editor toolbar)
  • select (select from definied vaules)
  • text (used for single-line input and accept any form of text)
  • number (used for number input and accept numeric values only)
  • media (media manager which allows to insert and upload image)
  • repeatable (accordion fields to insert data)
  • icon (Awesome Font Icons chooser)

Here is example code from feature addon:

         'heading_selector'=>array(
                'type'=>'select',
                'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS'),
                'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_DESC'),
                'values'=>array(
                    'h1'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H1'),
                    'h2'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H2'),
                    'h3'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H3'),
                    'h4'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H4'),
                    'h5'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H5'),
                    'h6'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H6'),
                    ),
                'std'=>'h3',
            ),
            'title_fontsize'=>array(
                'type'=>'number',
                'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_FONT_SIZE'),
                'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_FONT_SIZE_DESC'),
                'std'=>''
                ),
            'title_fontweight'=>array(
                'type'=>'text',
                'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_FONT_WEIGHT'),
                'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_FONT_WEIGHT_DESC'),
                'std'=>''
                ),
            'title_text_color'=>array(
                'type'=>'color',
                'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_TEXT_COLOR'),
                'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_TEXT_COLOR_DESC'),
                ),

Which are responsible for Header, Font Size, Font Weight and Title color settings.

 

Component inside Page Builder

Joomla only allows to include modules into your articles/modules via "Content - Load Modules" plugin. Unfortunately you cannot do the same for component.
What is important to know, SP Page Builder is a component and by default Joomla doesn't allows you to use more than one component in single view.

 

Editor Toolbar

In all content text areas of SP Page Builder we used a TinyMCE 4.x which is a default WYSIWYG editor in all Joomla! 3.x. We understand that in some cases there too small number of features (action buttons) in toobar, so if you want to change it, you have to edit of of SP Page Builder core file: administrator\components\com_sppagebuilder\assets\js\helper.js

This file you can find inside both: QuickStart (QS) package or SP Page Builder (Pro) package. If you have installed QS and you didn't update component yet, please take helper.js file from QuickStart package.

In following example we will show you how to add two buttons:  font color & bg color icons to existing Content toolbar.

1) In helper.js file find section "plugins:" - probably it will be in line 255

2) Add there new row, like in this example code: "textcolor colorpicker textpattern",

            plugins: [
            "advlist autolink autosave lists link charmap preview image",
            "searchreplace code fullscreen",
            "textcolor colorpicker textpattern",
            "media contextmenu paste"
            ],

3) Then find line with "toolbar: " if should be few lines further, also there you should add new phrases: forecolor backcolor

   toolbar: "insertfile | styleselect | bold italic fontsizeselect styleselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | blockquote | bullist numlist | link image fullscreen"

4) Save changes in used editor and copy updated version of file to server - use FTP tool.

5) To learn how to add more buttons please read: https://www.tinymce.com/docs/demo/classic/

 

 

Newsletter