SP Page Builder页面构建-(Joomla页面构建工具)

SP页面构建是一个在Joomla!3版本下的响应式页面构建组件。它让你非常容易的创建Joomla页面,将它们添加到菜单和显示,里面有用的和凉爽的效果。无论你是初学者,网页设计师或开发人员构建商业网站为客户或业务管理和维护自己的网站,SP Builder的灵活性和功能意味着一件事:web内容设计简单。它可以用于构建unique-looking页面。充分控制你的Joomla !3.3 +网站与我们的后台页面构建器扩展。

basic features Page Builder

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.

SP Page Builder and 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: Helix Framework, T3 Framework, Gantry, Warp, Expose, YJ Simple Grid.

How to install SP Page Builder

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 and the post_max_size settings.

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.

page-builder-1

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.

Column Options

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 paddings 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.

Using Joomla core module(s) inside SP Page Builder

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

joomla-module

In current version you can use only 3 modules (Breadcrumbs, Main Menu, Login Form) but in future versiosn we will add support for more of default modules.
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.

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

它的工作原理

他遵循开放图形协议 (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 default meta tags

SP页面构建器可以使用Joomla !菜单管理器与所有默认搜索引擎优化功能:元描述和meta keywords字段。

meta

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.

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 theSelect 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 hide selected elements on small devices (phones, tablets)

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.

How to translate phrases in Page Builder

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 includes contact form fields)
  • administrator\language\en-GB\en-GB.com_sppagebuilder.ini  (this insludes 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)

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 > Language Manager -> Overrides tab. But first you have to know whole BIG LETTERS phrase taken from language file.

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.

How to use Page Builder built page as home page 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.

I don't see Text block on front-end.  What is wrong?

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 " ". 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