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

SP Page Builder (Pro) 3.x

Updated Last: 20 November 2020

Addons

Joomla Module

Joomla Module is an awesomely crafted addon for adding modules to the web pages of your website. Selected Module will be added to the position you have added the addon. This addon will also allow you to select the module position from the drop-down module position list. So you can see SP Page Builder makes it easy while adding modules to your sites.

  • Admin Label
    Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.
  • Title
    This option will allow you to add a text to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

ADDON OPTIONS

  • Type
    In Type options, there are two types one is “module” another one is “module position”. You have to select “module” if you want to add a module to the addon. Upon selecting the module the option for choosing the desired module will be revealed. If you want to add module position, you have to select the ‘Module Position’ option. After selecting the module position, options for choosing the desired module position will be revealed.
  • Module
    In this option, you will see the list of your modules in a drop-down. You have to select a module that you want to add to your addon.
  • CSS Class
    This option will allow you to style a particular element in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element. Also, don’t forget to refer it to your CSS file.

Accordion

Accordion is actually a way of controlling elements view. In accordion menu the contents remain hidden, they reveal the information when you click them. Accordion graphically looks cools and comes pretty handy when you have a lot of contents to show. As they reveled or expanded upon clicking, the user-friendliness remains intact.

  • Admin Label
    Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.
  • Title
    This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.
  • Accordion Style
    SP Page Builder accordion comes with different kinds of accordion styles. This accordion style field lets you choose your desired style from the drop-down list of styles.
  • Open Item
    There are few options of how the items will be displayed. If you select “open first item” then the first item will be opened and all other will be closed. The option “open all items” makes all the item opened and the option “close all items” will make all the item closed.
    CSS Class
    This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.
  • Add new item
    Click this option to add a new accordion item. Add your desired number of accordion using this option.
  • Accordion item title
    Item title describes what the accordion holds and gives a glimpse of what the content is about. Use this text field to add a title to your accordion.
  • Title icon
    There are lots of icons are there to choose from. You can find almost every types of icon there. Use the search field on top to find your desired one.
  • Content
    In accordion content is everything. Use this editor field to enter your accordion content here. You can also enter media files in the content field. So, arrange your content in your desired way using this content field. 

Animated Heading

The addon comes with the 2 following core functionalities.

  1. Highlighting Animation
  2. Text Animation

The shiny new addon is an advanced heading/title maker that you can use to create a section heading. Simply drag and drop the addon anywhere you want to add a title/heading. Then define the highlighted and/or animated parts of the heading. There are 9 highlighting animations and 10 text animations built inside the addon. Using Animated Heading addon is really easy and straightforward. Simply place the addon to the section title’s position, then add and customize the title text using it. To use the Highlighting Animation feature, choose it from the Animation Style drop-down menu. In the Highlighted Text field, enter the texts that you want to highlight. You will also get 2 other fields before and after the Highlighted Text field to enter the other texts in the title. You get many other configuration options to choose the highlighting shape, color, shape width, HTML tag management, and basic heading text settings. Under Styling Options, you get controls for your highlighted animated text styles along with the overall heading texts.

Alert

The alert is a text box containing the specific message. There are different types of alert according to types of the message it is going to deliver. With SP Page Page Builder alert addon you can easily set up an alert on your website. 

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

ADDON OPTIONS

Alert Content
Use this editor field to enter your alert content here. You can also enter media files in the content field. So, arrange your content in your desired way using this content field.

Show Close Button
With close button, the alert will be closed. Enable this option if you want to show the close button, leave this disabled if you don’t.

Alert Style
There are four different types of alert styles are there. Each style contains different significance. Select your desired one from the drop-down list of alert styles.

Animated number

Animated number is an addon of adding well-designed number counter display with nice animation. Animated number is mostly used to display number counter, achievements, and many other counter content. The animation customization tools provided with SP Page Builder can be utilized easily to style the animated number.

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Counter Digit
Counter digit represents the maximum number you want to animate to. Use the textfield to enter the maximum counter digit you want to display in the webpage.

Animation Duration
Animation duration is the delay between each number. Set the animation duration of your counter digits using this field. Also you have to enter the duration in millisecond.

Animated Number Font Size
Animated number font size should be as per the design and outlook requirement. Set your required animated number font size using this field.

Animated Number Color
Animated Number color is also a design requirement. Use this field to add an animated number color to make it more eye-catching and maintain a stunning look at your website.

Counter Title
A counter title will display on top of the animated number. So this is the quick keyword of what's the animated number is about. Enter the title using this field. Ex: My trophy.

Title Font Size
Title font size should be as per the design requirement also with the relevance of the animated number font size. Enter the title font size here.

Content Alignment
You can set the alignment of the animated number in three different positions “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop-down list of the field.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Articles

The article is a great addon of SP Page Builder to your blog posts, articles, product promotional activities in the desired part of your website. Articles are automatically formed according to your given settings nicely in your web page. SP Page Builder automatically generates beautiful and crafty design and display for a stunning visual experience.  Article Addon cannot display content from SPPB mode, you have to add INTRO text in tab "JOOMLA EDITOR".

Article: General

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

ADDON OPTION

Choose Resource
There are two types of content resources are there “Joomla Article” and “K2”. You have to select one of them and if you select K2, in that case, you have to ensure that k2 component is installed.

Select Category
For articles, we should have already declared some categories. All the created categories and subcategories will be shown automatically in the drop-down list. Select category the article belongs to.

Post Type
You can add different types of posts. There are numerous different types are available like “Audio”, “Video”, “Gallery”, “Link” and numerous others. Select your desired one from the list.

Ordering
Select the ordering of how the article will be ordered. There are few options available there. Select your desired one from the drop-down list of ordering options.

Limit
You can limit you article display. You can set how many articles will be displayed. Enter the desired value in the field according to your design requirement.

Columns
This field is there for you to set the limit of how many columns you want in your every row. You have to insert that value according to your desire and outlook requirement.

Show Intro text
If you want to show intro text in your article, enable this option otherwise the intro text-related options will not show up. Leave it disabled if you don't want intro text.

Intro text characters limit
According to websites, the requirement set the limit of how many characters will be there in the intro text.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Article: Option

Hide Thumbnail
If you want to show the thumbnail enable this option. The thumbnail normally displays banner image of the article. Leave it disabled if you don't want it.

Show Author
If you want to show the details of the author set this option to ‘yes’. Set that option to ‘No’ if you don't want it.

Show Category
Using this option you can control whether to show or hide the category of the article. Enable for showing otherwise leave it disabled.

Show Date
If you want to show the date set this option to ‘yes’. Set that option to ‘No’ if you don't want it.

Show Readmore
Use this option to set this option to ‘Yes’ if you want to display the read more link. Set it to ‘No’ if you don’t want read more.

Read more Text
Enter the read more link button text in the text field. This text will appear on top of the readmore button.

Show all button
Whether to show all articles button. 

Article Scroller

Article Scroller addon has a great use when there’s a need for showing a lot of articles in a compact space, that too with an elegant design. Its usage is second to none. For a news/magazine website, it is the best way to present breaking news and for other websites, it can be used to show a glimpse of the most attracting articles.

Important Notes: The Article Scroller addon collects content data from an article that has been created using the Joomla Editor. The important note here is, the Article Scroller addon will only show the article content that is before the "Read More" text. Anything after the "Read More" text even contents created with SP Page Builder article integration will not be shown with this addon. If you don't use "Read More" in an article created with Joomla Editor, the article contents will be shown. The Article Scroller can also retrieve related data of an article including the banner image, publishing time/date, title and more. 

Admin Label: Admin label helps you to identify all the things that you’ve created with this addon. This will also guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Addon Mode: The addon mode allows you to control the appearance of the addon. Currently, there are two preset styles for this addon. The News Ticker will allow you to show one scrolling headline at a time on your webpage while News Scroller will allow you to define the number of articles you want to show and a number of articles to scroll with every slide.

Choose Resource: Normally if all your articles were created as the traditional way, then you do not need to worry and leave this field as it is. But in the case of K2, you need to have the K2 component installed and selected from here.

Select Category: As all the Joomla articles are created under Category, choosing a category will let all the articles of that particular category to show using the Article Scroller addon. You can show articles of multiple categories if you want to. Tip: for organizing the contents better, you can create a category and assign you selected articles to that particular category and show it using the addon.

Ordering: Now that you’ve selected the articles to show, you need to set their ordering that is how the articles are going to appear on the page. Choose one from the four types.

Image As Background: This setting is only available for the News Scroller mode. When this option is enabled the addon’s background will be replaced by the banner images of every article.

ADDON OPTIONS

The addon options will vary depending on the Addon Mode you’re using. First, let's explore the settings for News Ticker mode.

Ticker Heading: You need a catchy title or a proper heading that will attract your audience to check out the articles and improve the UX of your website. The text you type in here will be shown on the left section of the addon.

Heading/Date Width: You need to adjust the width of the heading section according to the content length. You can control the width of the left section of this addon from here. You can even set a different width for different device types.

Heading/Date Font Size: Control the font size of the heading (left section of the addon) from this option.

Heading/Date Font Weight: The font weight normally refers to the thickness of any font, the higher the value is the thicker they become.

Heading/Date Font Family: Choose the font for the heading (the left section of the addon).

Show Heading Right Shape: If you want to add a little shape to the scroller then turn this feature on.

Select Heading Shape: When the Show Heading Right Shape feature is enabled, you’ll have the option to choose from the predefined shape.

Heading/Date Background Color: The default background (purple) color of the left section can be changed from here.

Heading/Date Text Color: You should adjust the text color of the heading (on the left section) as per your design requirements.

Right Side Background Color: As the name suggests, you can change the right section background color from here.

Right Side Title Font Weight: The font weight normally refers to the thickness of any font, the higher the value is the thicker they become.

Right Content Font Family: To change the font of the right section headings, choose one from the list.

Right Side Title Color: As the name suggests, this function is used for changing the heading color of the right section.

Right Content Font Size: The font size should complement the design, to change the font size of the right section use this option.

Show Article Published Date: The article publishing date can be shown using this function when enabled the publishing date will be shown on the rightmost side.

Show Article Published Hour: The article publishing time can be shown using this function when enabled the publishing date will be shown on the rightmost side.

Border Width: The border width is the outside layer of the addon, you can create a border width to add diversity to the addon.

Border Color: You can change the default border color from here. The color applies to the right section of the addon.

Border Radius: By default, the addon is in a square shape. Applying border-radius will result in a round shape to the addon.

Arrow Color: You might want to change the color of the arrow sign of the slider. You can control the color of the arrow sign from here.

CSS Class: This option will allow you to style particular elements in the addon. Customize and style a particular area and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

When the News Scroller mode is selected, you’ll find a few extra functions like the followings.

Date Text Letter Spacing: It’s similar to the popular letter spacing feature. Increasing the value will result in increasing the gap between date letters.

Date Text Overlap: You can make the month and date text overlap each other using this option. The month text will overlap the date text when this option is enabled. Turning on this feature will provide the option to change the text color, font size and adjust the gaping.

Right Title Font Size: You might need to change the (right section) heading font size as per your design requirements.

Introtext Characters Limit: You can limit the article introduction text characters to adjust the addons width.

Item Bottom Gap: To add diversity to your design you can separate the items (articles) with a gap among them. The higher the value is the bigger the gap becomes.

Border Width: The border width is the outside layer of the addon, you can create a border width around the items (articles) by putting the value here.

Border Color: Since you’ve created borders around the articles (items) it’s natural to add colors around them. Choose a color from this feature which will apply to all the items.

Audio

Audio addon of SP Page Builder is there to add your audio mp3 file in your website. This addon delivers you a totally hassle-free way of adding audio files to your website. You just have to upload your mp3 file or OGG file of your audio and the rest will be done by the awesome SP Page Builder. Yet not believing? Try adding one. 

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

ADDON OPTIONS

MP3 File URL
Use the SP Page Builder media manager to upload the mp3 file you want to add. SP Page Builder will get the URL of your mp3 file and put it where you want.

OGG File URL
You can also upload OGG file of your audio. Use the SP Page Builder media manager to upload the OGG file of your audio.
Note: You just have to upload any one of the types.

Autoplay Audio
If enabled, the audio will be playing automatically immediately after the site loads. If you don’t want it leave it disabled.

Repeat Track
If the option is set to ‘Yes’ the audio will keep repeating. Select ‘No’ if you want otherwise.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Block number

Block Number is an awesomely developed addon of SP Page Builder. Block number addon displays a number with the nice background color. Usually displaying features of products or any other point based content block number addon comes pretty handy. You are in total control of adding the color, number, content, and rest will be done by the SP Page Builder.

Admin Label
Admin label helps you identify better than you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

ADDON OPTIONS

Heading
Use this section to add a heading to your block number. If you don't want it, you have to leave it. Title will be displayed on top of the contents of the block number.

Text
Block number always comes with some content or text elements. Use this text field to add the content you want to display the block number.

Block Number
In this, you have to add the block number value. Example: 1. Block number must have to be a non fractional integer number.

Block Size
Use this field to enter the block size of the block number. This should be according to your design requirement and outlook. Example: 48.

Block Background
Good thing about block number is that they can be displayed in various color. Use the color picker to pick color for your block.

Color
Use this field to define the color of your font of the block number. This should be combined with the color of the block background to give best visual experience.

Block Border Radius
Set the block border radius according to your design requirement. Use this field to input the value.

Content Alignment
You can set the alignment in three different position “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop-down list of the field.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Button

Buttons on the web are there to perform an action. A well designed, good looking button is always crucial in any web design. Buttons hold the key to page redirection, interaction and data flow in the web pages. In SP Page Builder button addon is nicely developed for adding nice buttons to your web pages quickly. You have to just add and customize some of the button design property and the rest will be done by this awesome page builder.

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Button Text
Button text is the text that will be displayed on top of the button. It’s quick text on what that button is going to do. Leave it blank if don’t want any button.

Content Alignment
You can set the alignment of the button in three different possitions “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop-down list of the field.

Button Font Style
There is numerous awesome font style is available in a drop-down list of font styles. You just have to select your desired font style. You can select multiple font styles if you want.

Button Letter Spacing
Set the letter spacing between the letter spacing in the button. There numerous pixels for you to select. If you select default then the default CSS letter spacing will count.

Button Link
Button link is the absolute URL of the page that will be linked. Remember the link must contain http:// or https:// in the URL. URL can be sensitive, so the double check will let you be on the safe side.

Button Style
SP Page Builder provided you some great button style. You just have to select the desired one from the list. You can also create your button custom style. For that, you have to set the button appearance, button background color, button color, button background color.

Button Appearance
There are three different types of button appearance style “flat”, “outline”, “3D”. Each one contains a different design style. Select one from the list that suits you the best.

Button Size
There are five different types of button style available. Set the size of your button from the drop-down list of sizes.

Button Shape
In this field, you have given three different types of button shape. Set the desired shape of the button from the given list according to the design requirement of your website.

Full-Width Button
A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.

Button Icon
There are lots of icons are there to choose from. You can find almost every types of icon there. Use the search field on top to find your desired one. Select you the one you want from the list.

Button Icon Position
There are five different types of button icon positions available. Set the icon position of your button from the drop-down list of sizes.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Button group

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Content Alignment
You can set the alignment in three different position “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop-down list of the field.

Gutter
If you are adding multiple buttons. Set the gutter between them. Works as space.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Add New

Button Text
Button text is the text that will be displayed on top of the button. It’s quick on what that button is going to do. Leave it blank if don’t want any button.

Button Font Style
There is numerous awesome font style is available in a drop-down list of font styles. You just have to select your desired font style. You can select multiple font styles if you want.

Button Letter Spacing
Set the letter spacing between the letter spacing in the button. There numerous pixels for you to select. If you select default then the default CSS letter spacing will count.

Button Link
Button link is the absolute URL of the page that will be linked. Remember the link must contain http:// or https:// in the URL. URL can be sensitive, so the double check will let you be on the safe side.

Button Style
SP Page Builder provided you some great button style. You just have to select the desired one from the list. You can also create your button custom style. For that, you have to set the button appearance, button background color, button color, button background color.

Button Appearance
There are three different types of button appearance style “flat”, “outline”, “3D”. Each one contains different design style. Select one from the list that suits you the best.

Button Size
There are five different types of button style available. Set the size of your button from the drop-down list of sizes.

Button Shape
In this field, you have given three different types of button shape. Set the desired shape of the button from the given list according to your design requirement of your website.

Full-Width Button
A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.

Button Icon
There are lots of icons are there to choose from. You can find almost every types of icon there. Use the search field on top to find your desired one. Select you the one you want from the list.

Button Icon Position
There are five different types of button icon positions available. Set the icon position of your button from the drop-down list of sizes.

Link opens
You can select whether the button link will open in the same window or a new window in the browser. Set it to your desired option.

In modern design, carousel is the context rotating images with contents and elements. Carousel is the exclusive slider addon of SP Page Builder. Whether content or image you can get an amazingly well-developed carousel within a second with this awesome addon. It automatically generates all the accesses and functionalities a trendy functional carousel should have.

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Autoplay
Autoplay is the function of auto-rotating the images and content without any click from the user. If you want that feature. Set the carousel to autoplay.

Show controllers
Controller’s job is to direct the order of images and content in the specific direction. If you enable the option the controllers will show up in the carousel. Controller are shown on underneath the carousel.

Show navigation arrows
Navigation arrows are there to direct the flow of images and content in the specific direction. If you enable the option the navigation arrows will show up in the carousel. Navigation arrows are shown on both sides of the carousel.

Content alignment
You can set the alignment in three different positions “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop down list of the field.

CSS Class
This option will allow you to style particular element in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Carousel Items

Add New

Carousel Item Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Carousel Content
Use this editor field to enter your alert content here. Arrange your content in your desired way using this content field. Carousel content will be shown on top of the carousel image.

Carousel Image
Use SP Page Builder well-developed media manager to upload the images of the carousel. You can upload images by adding multiple items.

Button Text
Button text is the text that will be displayed on top of the button. It’s quick on what that button is going to do. Leave it blank if don’t want any button.

Button Font Style
There is numerous awesome font style is available in a drop-down list of font styles. You just have to select your desired font style. You can select multiple font styles if you want.

Button Letter Spacing
Set the letter spacing between the letter spacing in the button. There numerous pixels for you to select. If you select default then the default CSS letter spacing will count.

Button Link
Button link is the absolute URL of the page that will be linked. Remember the link must contain http:// or https:// in the URL. URL can be sensitive, so the double check will let you be on the safe side.

Link opens
You can select whether the button link will open in the same window or a new window in the browser. Set it to your desired option.

Button Style
SP Page Builder provided you some great button style. You just have to select the desired one from the list. You can also create your button custom style. For that, you have to set the button appearance, button background color, button color, button background color.

Button Appearance
There are three different types of button appearance style “flat”, “outline”, “3D”. Each one contains different design style. Select one from the list that suits you the best.

Button Size
There are five different types of button style available. Set the size of your button from the drop-down list of sizes.

Button Shape
In this field, you have given three different types of button shape. Set the desired shape of the button from the given list according to your design requirement of your website.

Full-Width Button
A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.

Button Icon
There are lots of icons are there to choose from. You can find almost every types of the icon there. Use the search field on top to find your desired one. Select you the one you want from the list.

Button Icon Position
There are five different types of button icon positions available. Set the icon position of your button from the drop-down list of sizes.


Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Autoplay
Autoplay is the function of auto-rotating the images and content without any click from the user. If you want that feature. Set the carousel to autoplay.

Show controllers
Controller’s job is to direct the order of images and content in the specific direction. If you enable the option the controllers will show up in the carousel. Controller are shown on underneath the carousel.

Show navigation arrows
Navigation arrows are there to direct the flow of images and content in the specific direction. If you enable the option the navigation arrows will show up in the carousel. Navigation arrows are shown on both sides of the carousel.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Carousel Items

Add New

Carousel Item Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Carousel Content
Use this editor field to enter your alert content here. Arrange your content in your desired way using this content field. Carousel content will be shown on top of the carousel image.

Carousel Background Image
In pro, you can add a carousel background image. Use the SP Page Builder media manager to upload your desire carousel background image.

Carousel Image
Use SP Page Builder well-developed media manager to upload the images of the carousel. You can upload images by adding multiple items.

YouTube/Vimeo Video
If you want to add a Youtube or Vimeo video, Enter the full URL of YouTube or Vimeo single video. The URL must have to contain http or https.

Button Text
Button text is the text that will be displayed on top of the button. It’s quick on what that button is going to do. Leave it blank if don’t want any button.

Button Font Style
There are numerous awesome font style is available in a drop down list of font styles. You just have to select your desired font style. You can select multiple font styles if you want.

Button Letter Spacing
Set the letter spacing between the letter spacing in the button. There numerous pixels for you to select. If you select default then the default CSS letter spacing will count.

Button Link
Button link is the absolute URL of the page that will be linked. Remember the link must contain http:// or https:// in the URL. URL can be sensitive, so double check will let you be on the safe side.

Link opens
You can select whether the button link will open in the same window or a new window in the browser. Set it to your desired option.

Button Style
SP Page Builder provided you some great button style. You just have to select the desired one from the list. You can also create your button custom style. For that you have to set the button appearance, button background color, button color, button background color.

Button Appearance
There are three different types of button appearance style “flat”, “outline”, “3D”. Each one contains different design style. Select one from the list that suits you the best.

Button Size
There are five different types of button style available. Set the size of your button from the drop down list of sizes.

Button Shape
In this field you have given three different types of button shape. Set the desired shape of the button from the given list according to your design requirement of your website.

Full-Width Button
A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.

Button Icon
There are lots of icons are there to choose from. You can find almost every type of icon there. Use the search field on top to find your desired one. Select you the one you want from the list.

Button Icon Position
There are five different types of button icon positions available. Set the icon position of your button from the drop down list of sizes.

Clients

Client is a dedicated addon to showcase your clients, whom you work for. With SP Page Builder clients you can add the clients logo, their information with ease and display them with amazing design structure. You can also customize the addon from the frontend of your website with the front end editor. You can add unlimited clients and display them with columns on the website. You can also define how many clients will be there in every column.

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title textbox, it will be automatically added to the addon section.

Client per row
Set the number of client will be displayed per row.You enter a number exp: 4, or use the scroll up and down to adjust your desired number.

Content Alignment
You can set the alignment in three different position “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop down list of the field.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Clients

Add New

Item 1

Client Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Client Image
Use this field to add a client image to the client image. Use SP Page Builder media manager to upload and insert the image

Client URL
Client URL is profile URL of the client. Use this field to enter the URL. URL must contain the total URL including http or https. 


Contact form

Contact form is a question set that you need to fill to contact the site administrator or the responsible one. That's why SP Page Builder contact form addon lets you create a contact form easily and without hassle.

  • Admin Label
    Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.
  • Title
    This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

ADDON OPTIONS

  • Recipient Email: Use this field to enter the recipient email address. Recipient email holder will receive the inputted contact form information and queries.
  • Enable Captcha: Contact form can lead your site to lots of security vulnerabilities. That's why SP Page Builder introduced captcha with its contact form addon. Enable this option to enable captcha.
  • Captcha Question: In this field, you will add a smart question for your captcha as per the security priorities and this captcha question will be displayed on the contact form.
  • Captcha Answer: Use this field to enter the answer to the captcha question you have just entered in the captcha question field.
  • Use Custom Button: You can use custom button if you desire by enabling custom button option and giving the required customization of your button.
  • Button Text: Enter the button text here. Leave it blank if you don’t want any button.
  • Button Font Style: There is numerous button font style you can choose from uppercase, lowercase etc.
  • Button Letter Spacing: Set the button letter spacing using this option.
  • Button Style: You can choose a desired button style from the given list.
  • Button Appearance: You can choose a suitable button appearance from the list.
  • Button Size: What button size you want? There are numerous options you can choose from.
  • Button Shape: Choose your button shape from the list using this option.
  • Full-Width Button: Set this option to ‘Yes’ if you want a full-width button. Leave that to ‘No’ if you don't.
  • Button Icon: You can add a button icon using this option. Select the button icon from the list.
  • Button Icon Position: Where you want the icon left or right? Select your desired position.
  • Show / Label Checkbox: According to EU-GDPR requirements users need to give explicit consent for the website to collect their information (also by contact form). This consent cannot be masked in a lengthy 'Terms and conditions' text, but needs to be separate and very clear to the user. That's why we added this checkbox field with the required status, this way users will not be able to submit the form without explicitly offering consent. Inside textarea field you can use HTML tags, for example, <br>, < a href="/..">, <strong> - all you need to change design or add link.
  • Use Custom Button: It allows you to change text, color, and button appearance.
  • CSS Class: This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Countdown

The sole purpose of the countdown addon is to add a timer that you set the countdown of an event will occur after the timer comes to zero. You can display your countdown with month, hour, minute, seconds. You have to add date and time of the countdown to stop and the rest will be done by the addon.

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title textbox, it will be automatically added to the addon section.

COUNTDOWN OPTIONS

Date
You have to add the finishing date of the countdown timer. On this very day, the countdown will be stopped. You have to add the date using the following format eg. 2018/05/25.

Time
After the addition of finishing date now, you have to add the finishing time. On a specific day, on a specific time, the countdown will be stopped. You have to add the time in the 24hr format like eg: 18:20.

Finished Text
Use this field to add a finished text. The finished text will be displayed after the countdown timer finishes the counting.

Counter Height
In this field, you have to add the height of the counter that means how much the counter blocks will take space up top.

Counter Width
Use this field to add the width of the counter. The width you declare will work as the space for the timer.

Counter Font Size
Set the font size of the counter. You can make them focused on adding your desired counter font size.

Counter Text Color
Add the counter text color as per your design requirement. You can use the color picker tool to add the desired color you want.

Counter Background Color
Add the counter Background color as per your design requirement. You can use the color picker tool to add the desired color you want.

Use Border
There are some of the border-related customizations by enabling the use of border option. You can set the border width, determine the border color, you can also set the border style from the drop-down style list and other options.

Border Width
Set the border width of the counter. Enter the desired digit as per your design requirement.

Border Color
Add the counter Border color as per your design requirement. You can use the color picker tool to add the desired color you want.

Border Style
There are different border style to choose from. They are None, Solid, Double, Dotted, Dashed. Choose your desired one.

Border Radius
Set the border radius for your border of the counter.

Label Font Size
If you added a label to your counter, then you have to add a label font size that goes well with your design context. You can use the scroll up and down button to adjust the font size of your title.

Label Text Color
Add the counter Label text color as per your design requirement. You can use the color picker tool to add the desired color you want.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.


Divider

Divider is a superbly crafted addon to add a divider between web elements. There are different types of divider you can add to SP Page Builder. The addon provides all the elements and styling option to set up a stunning divider.

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Divider Type
There are two types of divider you can add. You can either select border divider or you can select the image divider. For image divider type you have to add the divider image in the image upload option.

Border Style
Set divider border style from the list. There are three types ‘Solid’, ‘Dashed’, ‘Dotted’. Use your desired one.

Border Width
Set the border width of the divider border. Enter the desired digit as per your design requirement.

Border Color
Add the divider Border color as per your design requirement. You can use the color picker tool to add the desired color you want.

Margin Top
Set an optimum distance from the top element

Margin Bottom
Set an optimum distance from the bottom element

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file. 


Empty space

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Empty space gap
Enter the space gap amount using this field. Example: 20. You can do scroll up and down to adjust the number you want

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.


Form Builder

Admin Level: Admin label helps you to identify everything that you’ve created with this addon. This will also guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Form Options: The form option offers three fundamental settings for the form builder addon. Here, you’ll have three different types of settings categorized to their respective tabs. Let's go into them one by one.

Form Elements: You will be able to add form fields (i.e form items) by clicking on the “+ Add Item” button. You’ll be given 10 form field types to choose from.

  • Text: when you need to take text input from your form like name or address you can use this field type.
  • Email: this input field is used only when you need to collect email address using your form.
  • Phone: you can use this field to collect a phone number or data that only holds numbers.
  • Textarea: you might want to allow your users to send you messages or take short paragraph type inputs.
  • Radio: the radio buttons are almost like MCQ question types. You can ask a question and using the radio field type, allow your users to give their feedback.
  • Checkbox: when you need your customer to agree with something, otherwise the form won’t submit. This is the field type to use for that purpose.
  • Select: this field type comes in handy when you need your users to choose from various options.
  • Date: the date input type have many applications like you can ask your users when is their expected delivery time.
  • Range: this field will come in handy for those you need to know their range like their income range, or the budget to buy the product you’re offering.
  • Number: this is an interesting field type, using this you can ask things like what’s the birth year of your users.

Once you choose a field type on the form, the respective settings will be shown to you to set up properly. The fields are pretty self-explanatory except one. The Field Name option is a special one, you need to define the name in lowercase and hyphen (-) instead of space. No space, uppercase or title case are allowed. The purpose of this field is, using the name you define here, an item can be called in the Email template.

Success & Error Message Options: This section offers you the controls of success and error messages. You can customize each if necessary. 

  • Required Field Error Message: You can change the default required filed error message. The content you put here will be shown when someone forgets to fill out the required field. 
  • Form Submit Success Message: Write your own successful form submission message. This will appear when a form was submitted successfully.
  • Form Submit Failed Message: You can customize the text for a failed form submission attempt. The text you put here will only appear when a form fails to submit. 

Enable Redirect: After successfully submitting the form, if you'd like to take your user to a certain link you can put that link after enabling this option.

Enable Captcha: When this option is enabled a form cannot be submitted unless the user answers the Captcha. When using Google reCAPTCHA, remember to enable the reCAPTCHA plugin in your backend and set up the site keys properly in order to use this form. 

Enable Policy Checkbox: You can include your user policy text or GDPR if necessary by enabling this option. 

Button Options: This section is dedicated for making customizations in the form submit button. You can change the button text, the text alignment, put an icon and change its position. 

Form Styles: You can modify the form style with these settings. You’ll have the ability to change field style, label style, and button style.

Field Style: Here lies the settings for modifying the form field in your own way. Settings for all field types are available here.

  • Field Gutter: Gutter is the space between two columns, in this case, two form items. You can define the gutter for different device types. The greater the value is the bigger the gap becomes.
  • Bottom Gap: You can control the horizontal gap among the form items for different device types.
  • Field Background Color: Using this option you can change the background color for all fields.
  • Field Text Color: This is the global text color for all field items. Applying the color here will affect every item of the form.
  • Field Font Size: You can change the font size for all fields using this option.
  • Field Placeholder Color: A placeholder is the text shown in the form fields before the user starts to type in their information.
  • Input Field Height: Using this option you can control the field height of all the items in the form.
  • Border Width: You can apply border around the field items. Here you can define the border width for left/right/top/bottom area.
  • Field Border Color: As you can create border around the field items similarly you can apply color to that border using this option.
  • Field Border Radius: The item fields generally come in rectangular shape, to make a roundish edge around them you can increase the border radius.
  • Textarea Height: The Input field hight controls the height for all the items except for the Textarea type. You can control the field height for textarea input type using this option.
  • Padding: If you want to control the inside space of the form fields, you can do so using this option.
  • Checkbox Color: You can change the checkbox color from using this option.
  • Radio Color: Use this option to change the radio button color.
  • Hover Options: You can define the styling for the hover effect from this option. You can change the field background color, field border color, placeholder color.

Label Style: This section will allow you to change the color and font size of the label texts. You can also control (create) extra space outside the label texts using the Margin option.

Button Style: This section holds the settings for modifying button styling. Let's browse them one by one.

  • Button Style: There are 10 predefined button styles available for you to choose from. But if you feel like that’s not what you’re looking for, you can always select the custom type and make your own modifications.
  • Button Appearance: You can define how the button’s going to look on the webpage from this option. Currently, there are four predefined types: flat, gradient, outline, and 3D.
  • Button Size: We have provided you with a few predefined button sizes, you can pick the one that fits perfectly with your design.
  • Button Shape: As the name suggests, this option will allow you to change the shape of the button, currently, there are three button shapes.
  • Font Family: Choose the font family for your button that fits you design the best from the plethora of font collection.
  • Button Font Style: You can apply underline, italic, and uppercase style effect to the button text. You can also control the thickness of the characters using this section.
  • Button Letter Spacing: The letter spacing is the gap in between the characters, here it defines the gap between button text letters. A positive value will increase the gap and negative value will reduce the gap.
  • Margin: You can manipulate the outer space of the button by applying margin value here. Putting a positive value on any field will manipulate its respective space.

Email Template: This is a very delicate option for the form builder addon. If anything goes wrong here, you’ll mess up big time. Some fields here are mandatory and some are not.

Recipient Email: This is a mandatory field for the addon. The email address you put here will receive the responses collected using this form.

Email Headers: This is another delicate feature for this form. The words you see here wrapped in curly braces are actually the name of field items that you defined earlier when creating an item. For example, you’ve created a form item using the “Email” field type, and in the “Field Name” text box, you wrote “my-email”. Since you’ve named the email item” as “my-email”, you need to change “{{email}}” to “{{my-email}}” here in this section to call your email item.

  • Reply-To: Here goes the email address of the person who will get the email when you respond to the submitted request send via this form.
  • Reply-Name: The name of the person you’re replying to.
  • Cc: You might want to send a copy of the form back to the person who submitted it. In that case, use the variable “{{email}}” (Or, whatever you defined when creating the item) in this field.
  • Bcc: If you want to send a blind copy of the form response, you can put that email address here.

Form Email: This is an optional field. You can define a Name and Email address that will be shown as the email address sending you the responses obtained from the form.

Email Subject: You may use the Form Builder addon in more than one places. To help you categorized them properly, you can take advantage of the “site-name” variable which will put the website address of the form and the “email” variable to put the sender email address on the subject.

Email Body: You can put the email content in this field. You can use the word you used in “Field Name” box for defining the form items as variables. And you need to put those variables in double curly braces “{{}}”

Note: Remember, if you were to use the name or email collected by the form, you need to use the name you defined (in the “Field Name” box) when creating the respective fields.

CSS Class: This option will allow you to style particular elements in the addon. Customize and style a particular area and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

If you don't get messages from Form check those:
1) SPAM Folder maybe they gone there
2) In Form Builder : Form Options > Email Template > From Email
put a email created for your main domain, must be different than Recipient Email
3) As Recipient Email try your @gmail account

Feature box

Feature Box is a superbly crafted addon to display your features, tag messages or something with a good title, content display, focused elements. The SP Page Builder Pro feature box will display your featured content in most focused way for maximum exposure.

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title textbox, it will be automatically added to the addon section.

Title HTML Element
There are all the title HTML element listed here in this section like “h1”, “h2” etc. Check your requirement and select your desired one from the list.

Title Font Size
If you added a title to your action block, then you have to add a title font size that goes well with your design context. You can use the scroll up and down button to adjust the font size of your title.

Title Line Height
Line height is the height of the lines in the title. Set the line height for the title. Line height will be numeric value. Ex: 25. The number represents the pixel (px) value.

Title Font Style
There is numerous awesome font style is available in a drop-down list of font styles. You just have to select your desired font style. You can select multiple font styles if you want.

Letter Spacing
Letter spacing is the space between the letter. Set the letter spacing for the title. Letter spacing will be numeric value. Ex: 25. The number represents the pixel (px) value.

Title Font Weight
Font weight refers to the thickness of the weight. Set the font weight of your title. Ex: 300. The value 700 represent bold and 1000 represents bolder.

Title Color
You can set your desired color according to your design context using this field. Use the color picker to pick color for your block.

Title Margin Top
Set the margin top of the title. Use this option to enter the value. The value you have entered is the pixel(px) value.

Title Margin Bottom
Set the margin-bottom for the title. Use this option to enter the value. The value you have entered is the pixel(px) value.

Title URL
Enter the title URL that will be linked to addon title. Leave blank if not required.

Layout Type
Select icon or image layout type from the list available that goes along with your design context.

ICON OPTIONS

Background Color
Add the icon Background color as per your design requirement. You can use the color picker tool to add the desired color you want.

Border Color
Add the border color as per your design requirement. You can use the color picker tool to add the desired color you want.

Border Width
Set the border width of the divider border. Enter the desired digit as per your design requirement.

Border-radius
Add the Border radius as per your design requirement. Border radius is for the corner of the border to be skew or straight.
Margin Top
Set an optimum distance from the top element

Margin Bottom
Set an optimum distance from the bottom element

Padding
Define paddings for top, right, bottom and left areas. Padding is the space between the content of the element and its border. A padding defines the space inside something. Generally, padding is expressed sequentially in Top, Right, Bottom, Left order. Negative values are not allowed.

ADDON OPTIONS

Content
In this addon content is everything. Use this editor field to enter your content here. You can also enter media files in the content field. So, arrange your content in your desired way using this content field.

Content Alignment
Content alignment is in which position the content will be aligned. Set your desired position to align the content.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

ADDON OPTIONS

Flickr ID
Use this field to enter Flickr ID here. To find your Flickr ID visit idGettr. This little site will help you get your Flickr id.

Count
In this field, you have to add the desired number of Flickr images you want to add to your webpage. So,Set the number of photos you want to display.

CSS Class

This option will allow you to sty a particular element in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Gallery Items

Add New

Item Title
Use this field to enter the title of this gallery item. This will be the alt text for the gallery image.

Thumbnail
Choose an image from the gallery thumbnail. This image will be displayed in the thumbnail of the gallery. Upon clicking the full image will be displayed.

Full Image
Image to show on click in prettyPhoto lightbox.

Google map

Purpose

Google Map addon gives you opportunity to add Google Maps with label on your Joomla site. No Personally Identifiable Information or Personal Data are stored by Google Maps addon.

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title textbox, it will be automatically added to the addon section.

ADDON OPTIONS

Address Location
Enter latitude and longitude value of the location with comma separated. eg. 40.7324319, -73.82480799999996
Use this website: http://www.latlong.net/

This website will help you to get your location latitude and longitude values.

Map Height
Set the height of the map that defines how much space the map is going to cover.

Map Type
There are different types of map types available and they are ROADMAP, SATELLITE, HYBRID, TERRAIN. Select the desired that goes well with your website.

Zoom
Select zoom from the below list.

Disable Mouse Scroll Wheel
Disable zoom when scroll mouse wheel over the map.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file 

Heading

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Title HTML Element

There are all the title HTML element listed here in this section like “h1”, “h2” etc. Check your requirement and select your desired one from the list.

Use Link
Use this option to add the link to the heading. Upon enabling it the two option will open. You have to paste the link and select the option where will it open.

Font Size

Font size should be as per the design requirement also with the relevance of the addon's demanded font size. Enter the title font size here.

Font Style

There is numerous awesome font style is available in a drop-down list of font styles. You just have to select your desired font style. You can select multiple font styles if you want.

Title Font Weight

Font weight refers to the thickness of the weight. Set the font weight of your title. Ex: 300. The value 700 represent bold and 1000 represents bolder.

Line Height

Line height is the height of the lines in the title. Set the line height for the title. Line height will be numeric value. Ex: 25. The number represents the pixel (px) value.

Letter Spacing

Letter spacing is the space between the letter. Set the letter spacing for the title. Letter spacing will be numeric value. Ex: 25. The number represents the pixel (px) value.

Margin

Set the margin for the title. Use this option to enter the value. The value you have entered is the pixel(px) value. Set the margin for all four sides (Top Right Bottom Left). Negative values are also allowed.

Padding
Define paddings for top, right, bottom and left areas. Padding is the space between the content of the element and its border. A padding defines the space inside something. Generally, padding is expressed sequentially in Top, Right, Bottom, Left order. Negative values are not allowed.

Content Alignment

Content alignment is in which position the content will be aligned. Set your desired position to align the content.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Icon

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Icon

There are hundreds of icons in the drop-down list if icons. Select your desired one from the list. Click the icon to add.

Size

Set the size of the icon using this option. Example: 36. Use the scroll to up and down the number to adjust it according to your requirements.

Width

Set the width of the icon using this option. Example: 38. Use the scroll to up and down the number to adjust it according to your requirements.

Height

Set the height of the icon using this option. Example: 36. Use the scroll to up and down the number to adjust it according to your requirements.

Color

Add the counter color as per your design requirement. You can use the color picker tool to add the desired color you want.

Background Color

Add the background color of the icon as per your design requirement. You can use the color picker tool to add the desired color you want.

Border Color

Add the border color of the icon as per your design requirement. You can use the color picker tool to add the desired color you want.

Border Width

Use this field to add the width of the border. The width you declare will work as the space for the border of the icon.

Border Radius

Add the Border radius as per your design requirement. Border radius is for the corner of the border to be scew or straight.

Margin

Set the margin for the icon. Use this option to enter the value. The value you have entered is the pixel(px) value. Set the margin for all four sides (Top Right Bottom Left). Negative values are also allowed.

MOUSE HOVER OPTIONS

Enable Hover Options

Enable this option to open the hover effects. Upon enabling option, you have to add hover color, hover background color, hover border color and lots of other option. Fill the options as per your design requirements.

Hover Effect

There is two types of hover effects "zoom in" and "zoom out". Select your desired one, if you want it select 'none'.

Icon Alignment
Content alignment is in which position the content will be aligned. Set your desired position to align the content.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file. 

Icons Group

Icons group addon helps you add multiple icons to altogether to a certain section of your website. Along with other usages, It’s also great for showcasing your social media profiles.

Admin Label: Admin label helps you to identify all the things that you’ve created with this addon. This will also guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Font Size: You can control all the icons size used in this addon by this option. It’s a responsive feature which means you can define different sizes for different device types.

Gutter: To define gutter, it’s the horizontal gap between elements. Which means with this option you can control the gap between the icons. The greater the value is the bigger the gap becomes. You can define different values for different device types.

Items Display: You can choose how you would like to view the icons in this addon. There are two options available: inline, block.

Icon Alignment: The icon alignment setting defines where you want to put the icons. You can choose from: left, right, center.

  • Icons: This is where you would be able to add multiple icons. Clicking on the “+ Add Item” will let you add a new icon and will open up the relevant settings. 
  • Title: Title helps you to identify your element for later use. A title should be named after its usability. A proper naming will help you to understand its future use.
  • Icon: The Icons group addon has a collection of hundreds of icons which includes Font Awesome 4.7. You can choose your desired one from the list.
  • Link: Since you’d be using an icon, it only makes sense you’d want to redirect to a link. You can put that URL in this field. Note: without a valid link, some functionalities of this addon may not work.
  • Open Link in New Tab: The name is of this feature is pretty self-explanatory. If you’d like to open the URL to a new tab, turn it on.
  • Color: Set the color of your icon from here. When applying color, be considered about your website design.
  • Background Color: The background color covers the entire background space of the icon. You can apply solid colors for the background.
  • Width/height: You can set custom width and height for your icon using these features. You can set different sizes for different devices.
  • Border Width: The border width defines how thick you want to make the border-line. It’s a responsive setting which means you can define different values for different devices. But in order to make an effect, you need to choose a border style.
  • Border Style: Using the border style feature you can apply a few styles to your border. Choose from: Solid, Dotted, Dash, Double, and None.
  • Border Radius: Radius controls the edge of the icon border, making the value greater will make it more of a circle.
  • Border Color: There is an option for you to color the border as well. Applying a color will make the border design more effective.
  • Padding: Using the padding option you can control the position of the icon inside its box. Like placing it in the middle or in the corner. It’s a responsive feature which means you can set different values for different devices.

ICON LABEL OPTIONS

If you wish to name your icon you need to turn this feature on. Enabling it will open the respective features.

Select Label Position: First you need to define the position for the label of your icon. You can choose from: Top, Bottom, and Right.

Label Text: You need to write down the text you want to use for naming the icon in this field.

Label Font Size: You can control the font size of the label text using this option. It’s a responsive feature which means you can set different values for different devices.

Line Height: It controls the gap between the icon and the label text. It’s a responsive feature which means you can set different values for different devices.

Letter Spacing: The letter spacing is the gap in between the characters of a sentence, here it defines the gap between label text letters. A positive value will increase the gap and negative value will reduce the gap.

Font Style: You can apply various styles to the font style of label text. Here you have the option for underline, italic, capital and bold.

Label Margin: You can take total control over the label text position using the margin option. A negative value will put the label outside of its box and a positive value will move it further inside.

MOUSE HOVER OPTIONS

If you want to apply a hover effect to this particular icon. You can turn on the feature here.

Hover Background Color: Change the background color for hover state for the icon using this feature.

Hover Color: Change the icon color for hover state using this feature. Only solid RGB color is available.

Hover Border Color: Change the border color for hover state for the icon using this feature.

CSS Class: This option will allow you to style this particular icon of the addon. Customize and style a particular area and then use this field to add the CSS class name you just used to style the icon also don’t forget to refer it to your CSS file.

TITLE OPTIONS

You can name the icon collection built using this addon. Once you type in the title, the respective fields will appear.

Title: You can declare a title for the collection of the icons. You need to write down the text you in this field.

Title Position: Once you write down the title, you will be able to set its position. Choose from: top/left.

HTML Element: You can define the HTML element for Title text. You can choose from: h1-h6, p, span, and div.

Font Family: Choose the font family for your button that fits your design the best. You can pick your desired font from the awesome list of 700+ Google Fonts.

Font Size: No matter which HTML element you choose for the Title. You can change the font size from here. It’s a responsive feature which means you can set different values for different devices.

Line Height: It controls the gap between the icons and the title text. It’s a responsive feature which means you can set different values for different devices.

Title Font Style: You can apply various styles to the title font. Here you have the option for underline, italic, capital and bold.

Letter Spacing: The letter spacing is the gap in between the characters of a sentence, here it defines the gap between label text letters. A positive value will increase the gap and negative value will reduce the gap.

Margin and Padding: These are the inner and outer gap of the title element. You can set different values according to the device types.

Title Icon: You can also add an icon along with the title. Once you choose your icon, you need to define its position.

CSS Class: This option will allow you to style particular elements in the addon. Customize and style a particular area and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Image

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Select Image

Use SP Page Builder well-developed media manager to upload the image. You can upload images by adding multiple items.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Image content

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Image

Use SP Page Builder well-developed media manager to upload the image. You can upload images by adding multiple items.

Image Position

Select in which side the image will be. You can add the image either on the left side or right side. If you add the image on the right side then the content will be on the left side.

CONTENT
Addon Title
Enter the title of the content block. The title represents the content and it will display on top of the content.

Content
Use this field to enter the content you want to display the image content addon. Use the text editor to bring necessary customization to your content.

Button Text
Button text is the text that will be displayed on top of the button. It’s quick text on what that button is going to do. Leave it blank if don’t want any button.

Button Font Style

There is numerous awesome font style is available in a drop-down list of font styles. You just have to select your desired font style. You can select multiple font styles if you want.

Button Letter Spacing

Set the letter spacing between the letter spacing in the button. There numerous pixels for you to select. If you select default then the default CSS letter spacing will count.

Button Link
Button link is the absolute URL of the page that will be linked. Remember the link must contain http:// or https:// in the URL. URL can be sensitive, so the double check will let you be on the safe side.

Link opens
Use this option to choose whether or not your link opens in a new window.

Button Style

SP Page Builder provided you some great button style. You just have to select the desired one from the list. You can also create your button custom style. For that, you have to set the button appearance, button background color, button color, button background color.

Button Appearance
There are three different types of button appearance style “flat”, “outline”, “3D”. Each one contains different design style. Select one from the list that suits you the best.

Button Size
There are five different types of button style available. Set the size of your button from the drop down list of sizes.

Button Shape
In this field you have given three different types of button shape. Set the desired shape of the button from the given list according to your design requirement of your website.

Full-Width Button
A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.

Button Icon

There are lots of icons are there to choose from. You can find almost every types of icon there. Use the search field on top to find your desired one. Select you the one you want from the list.

Button Icon Position

There are five different types of button icon positions available. Set the icon position of your button from the drop down list of sizes.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Image Layouts

The Image Layouts addon presents six astonishing layouts for creating attractive visual content. Using which you can turn your users into potential customers. This addon allows you to use image, text content, and button altogether in one single addon. You can even control the grid allocation and add video modal in this addon, for details head over to this blog post.

Admin Label: Admin label helps you to identify everything that you’ve created with this addon. This will also guide you while doing further customizations. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Select Image Layouts: The addon currently offers six image layouts. Choose the one that represents your content in the most attractive way.

Select Image: Here you can upload the image for your addon. SP Page Builder supports jpg, jpeg, png, gif, svg, and webp as image file formats. There’s is an option to retrieve image from the web. You need to put the image link the following text field.

Border Radius: You can set a border-radius for the image with this feature. The value is set to pixel (px). The maximum value for the border-radius is 1000.

Alt Text: Using this feature you can set the alt text of image which is vital for SEO and improves website accessibility.

Image Order Options: This feature has an active relationship with the content area. It is used to define the ordering for image and content area like defining their position. With this feature, you can set different position ordering for different device types. After choosing the device type, you need to set the order 1 or 2 from “Image Desktop/Tablet/Mobile Order”.

Image Click Link: You can put the link where you want to redirect users when image clicked. You can also upload attachment here. If you like to open the new page in a new tab enable “Open Link In New Tab” button.

CONTENT SETTINGS

Content Order Options: This feature has an active relationship with the image area. It is used to define the ordering for content and content wrapper like defining their position. With this feature, you can set different position ordering for different device types. After choosing the device type, you need to set the order 1 or 2 from “Content Desktop/Tablet/Mobile Order”.

Text Alignment: This feature allows you to set the content alignment for different device types.
Content Vertical Alignment: Define how you’d like to align your content vertically. For a better view try not to put too many texts.

Content Options: The addon offers three types of content and the content option feature is categorized by the same three tabs. Each representing their own set of settings. Choose one to view their related settings.

TITLE OPTIONS

Title: Give your content a title if needed. It’s not a mandatory field, you can leave it blank if you wish. This text field supports some special inline HTML tags according to precedence.

HTML Element: You can define the HTML element for Title text from this option.

Title Color: Change the color of the content title with this feature.

Font Family: You can change the style of the Title font from the awesome list of 700+ Google Fonts.

Title Font Size: No matter which HTML element you choose for the Title. You can change the font size from here.

Title Line Height: This feature controls the vertical space between the title and the content. The higher the value is the greater the gap becomes.

Title Font Style: From this option you can modify the font style. You can choose from: bold, italic, underline, and uppercase or apply all.

Letter Spacing: It’s the gap between two letters. To increase the gap apply a positive value and to decrease the gap apply a negative value.

Margin and Padding: These are the inner and outer gap of the title element. You can set different values according to the device types.

TEXT OPTIONS

Text Content: Your text content for the addon goes here. There are few tools to help you format your text content properly.

Color: Change the color of the content title with this feature.

Font Family: You can change the style of the Title font from the awesome list of 700+ Google Fonts.

Font Size: You can change the entire content font size using this option.

Line Height: This feature controls the vertical space between the title and the content. The higher the value is the greater the gap becomes.

Font Style: From this option, you can modify the font style. You can choose from: bold, italic, underline, and uppercase or apply all.

Letter Spacing: It’s the gap between two letters. To increase the gap apply a positive value and to decrease the gap apply a negative value.

Margin and Padding: These are the inner and outer gap of the title element. You can set different values according to the device types.

BUTTON OPTIONS

Button Text: You can change the button text from this option. If you do not require a button, leave the field blank.

Font Family: You can change the style of the Title font from the awesome list of 700+ Google Fonts.

Button Font Style: From this option, you can modify the font style. You can choose from: bold, italic, underline, and uppercase or apply all.

Button Letter Spacing: It’s the gap between two letters. To increase the gap apply a positive value and to decrease the gap apply a negative value.

Button Link: You can put the link where you want to redirect users when the button is clicked. You can also upload attachment here.

Button Style: You can set the style for the button from the 10 preset options.

Button Appearance: There are four preset button appearance types, choose the one that blends with your design.

Font Size: You can change the font size from here as well as the button size.

Enable Background Options: You can define the background and content color for both normal and hover state of your button using this option.

Margin and Padding: These are the inner and outer gap of the title element. You can set different values according to the device types.

Button Size: You can choose the size of the button among these five predefined button sizes.

Button Shape: There are three buttons shape options to choose from.

Button Icon: You can set an icon for your button to represent your content more powerfully, SP Page Builder uses Font Awesome icons.

Button Icon Position: Define the position of the button if you set any.

CONTENT WRAPPER STYLE OPTIONS
This section controls the styling of the entire content section of the addon which means the overall background of Title, Body, and Button. You can apply two different styles choosing one will open up their specific settings.

Background Color: You can either apply a solid background color or gradient effect. Choosing one will open up their specific settings.

Padding: Padding controls the inner gap between the content and the element they are in. You can set the padding gap in pixel.

Border Width: You can give a border to the content wrapper by putting a value here. Define the value in pixel.

Border Color: After applying the border you’ll see, the border got a default black color. You can change the border color from this option.

Border Radius: If you don’t like the default square shape of the content wrapper you can always change the shape by applying border-radius to it. Define the value in pixel.

Box Shadow: You can tune up the content appearance by applying a box shadow. Choose a color, define the vertical and horizontal offset, make it blur and apply spread if necessary.

CSS Class: This option will allow you to style particular elements in the addon. Customize and style a particular area and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title textbox, it will be automatically added to the addon section.

Instagram User ID

To find the ID for your own Instagram account.

Access Token
You can get your access token ONLY from official Instagram website - developer section. Access as FB Developer, create and app, assign an IG test user, generate the token.

Item Limit
Number of photo per row

CSS Class
This option will allow you to style a particular element in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file. 

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Modal Selector
There are three types of modal selector available in the drop-down list of modal selectors. Select a type of modal sector from the below list

Modal Separator: Button

Button Text
Button text is the text that will be displayed on top of the button. It’s quick text on what that button is going to do. Leave it blank if don’t want any button.

Button Style
SP Page Builder provided you some great button style. You just have to select the desired one from the list. You can also create you button custom style. For that you have to set the button appearance, button background color, button color, button background color.

Button Appearance
There are three different types of button appearance style “flat”, “outline”, “3D”. Each one contains different design style. Select one from the list that suits you the best.

Button Size

There are five different types of button style available. Set the size of your button from the drop-down list of sizes.

Button Shape
In this field you have given three different types of button shape. Set the desired shape of the button from the given list according to your design requirement of your website.

Full-Width Button
A full width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.

Button Icon
There are lots of icons are there to choose from. You can find almost every types of icon there. Use the search field on top to find your desired one. Select you the one you want from the list.

Button Icon Position

There are five different types of button icon positions available. Set the icon position of your button from the drop-down list of sizes.

MODAL CONTENT

Modal Content Type
There three different types of modal contents "Video", "Image", "Text Editor". Select your desired one from the list.

Content Text

Use this section to add the contents that you want to show with your modal popup. Use the editor to customize your content according to your need.

Popup Width
Set the modal popup width. The width will define the amount of space the modal is going to cover horizontally.

Popup Height

Set the modal popup height. The height will define the amount of space the modal is going to cover vertically.

Selector Alignment

You can align the selector 'left', 'center', or 'right' as per your desire.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Modal Popup
Modal Separator: Image

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Image
Select an image from your Joomla! directory or Use SP Page Builder well-developed media manager to upload the image.

MODAL CONTENT
Modal Content Type

There three different types of modal contents "Video", "Image", "Text Editor". Select your desired one from the list.

Content Text
Use this section to add the contents that you want to show with your modal popup. Use the editor to customize your content according to your need.

Popup Width

Set the modal popup width. The width will define the amount of space the modal is going to cover horizontally.

Popup Height

Set the modal popup height. The height will define the amount of space the modal is going to cover vertically.

Selector Alignment

You can align the selector 'left', 'center', or 'right' as per your desire.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Modal Popup

Modal Separator: Icon

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Selector Icon

There are hundreds of icons in the drop down list if icons. Select your desired one from the list. Click the icon to add.

Icon Font Size

Set the size of the icon using this option. Example: 36. Use the scroll to up and down the number to adjust it according to your requirements.

Icon Color

Add the counter color as per your design requirement. You can use the color picker tool to add the desired color you want.

Icon Background Color

Add the background color of the icon as per your design requirement. You can use the color picker tool to add the desired color you want.

Icon Border Color

Add the border color of the icon as per your design requirement. You can use the color picker tool to add the desired color you want.

Icon Border Width

Use this field to add the width of the border. The width you declare will work as the space for the border of the icon.

Icon Border Radius

Add the Border radius as per your design requirement. Border radius is for the corner of the border to be scew or straight.

Icon Padding

Set all the padding area a the space between the content of the element and its border (Top Right Bottom Left). Negative values are not allowed.

MODAL CONTENT
Modal Content Type

There three different types of modal contents "Video", "Image", "Text Editor". Select your desired one from the list.

Content Text

Use this section to add the contents that you want to show with your modal popup. Use the editor to customize your content according to your need.

Popup Width

Set the modal popup width. The width will define the amount of space the modal is going to cover horizontally.

Popup Height

Set the modal popup height. The height will define the amount of space the modal is going to cover vertically.

Selector Alignment

You can align the selector 'left', 'center', or 'right' as per your desire.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Person

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Select Photo

Select an image from your Joomla! directory or Use SP Page Builder well-developed media manager to upload the image. This is the image of the person.

Person Name

Enter the name of the person that you want to add to this addon.

Person Designation
Use this field to enter the designation of the person that you want to add to this addon.

Person Email

Use this field to enter the email address of the person that you want to add to this addon.

Intro text

This field is here to represent the details information about this person you are adding to this addon. Insert a brief information about the person.

Facebook URL
Enter absolute URL for Facebook profile. Leave blank if not required.

Twitter URL
Enter absolute URL for Twitter profile. Leave blank if not required.

Google Plus URL
Enter absolute URL for Google Plus profile. Leave blank if not required.

Youtube URL
Enter absolute URL of YouTube profile. Leave blank if not required.

LinkedIn
Enter absolute URL for LinkedIn profile. Leave blank if not required.

Pinterest URL
Enter absolute URL for Pinterest profile. Leave blank if not required.

Flickr URL
Enter absolute URL for Flickr profile. Leave blank if not required.

Dribbble URL
Enter absolute URL for Dribbble profile. Leave blank if not required.

Behance URL
Enter absolute URL for Dribble profile. Leave blank if not required.

Instagram URL
Enter absolute URL of Instagram profile. Leave blank if not required.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file. 

Pie progress

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Progress Percentage

Progress percentage represents the total part of the progress bar will be filled up. Enter the progress value for pie chart in numeric value like: 40.

Size
Use this field to enter the size of the pie chart in px. It will always be a square. The default size of a pie progress bar is 110.

Bar Color
This color will be displayed as the inactive color for PIE bar. This color is the background color of the bar and the bar progress color will on top of this color.

Bar Progress Color
Set the progress color for the PIE chart. This color is the active color that represents the progress of the bar.

Bar Width
Set PIE chart bar width. The width will define the amount of space the bar is going to cover horizontally. 

CONTENT
Title

Enter the title of the content block. The title represents the content and it will display on top of the content.

Content

Use this field to enter the content you want to display. Use the text editor to bring necessary customization to your content.
CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Pricing table

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

Every pricing plan needs a title. Use this field to enter the title. Choose the title that goes along with the plan.

Price
Use this field to insert the pricing plan price. The addon will automatically arrange the showcasing of this price.

Duration
Insert pricing plan duration. This represents how much the pricing is per month.

Pricing Features
Insert pricing feature. New line will display in the frontend as an unordered list item.

Background Color

Add the background color of the element as per your design requirement. You can use the color picker tool to add the desired color you want.

Color

Add the text color of the element as per your design requirement. You can use the color picker tool to add the desired color you want.

Button Text

Button text is the text that will be displayed on top of the button. It’s quick text on what that button is going to do. Leave it blank if don’t want any button.

Button Font Style

There is numerous awesome font style is available in a drop-down list of font styles. You just have to select your desired font style. You can select multiple font styles if you want.

Button Letter Spacing

Set the letter spacing between the letter spacing in the button. There numerous pixels for you to select. If you select default then the default CSS letter spacing will count.

Button Link

Button link is the absolute URL of the page that will be linked. Remember the link must contain http:// or https:// in the URL. URL can be sensitive, so double check will let you be on the safe side.

Link opens

Choose whether or not your link opens in a new window.

Button Style

SP Page Builder provided you some great button style. You just have to select the desired one from the list. You can also create your button custom style. For that, you have to set the button appearance, button background color, button color, button background color.

Button Appearance

There are three different types of button appearance style “flat”, “outline”, “3D”. Each one contains different design style. Select one from the list that suits you the best.

Button Size

There are five different types of button style available. Set the size of your button from the drop-down list of sizes.

Button Shape

In this field, you have given three different types of button shape. Set the desired shape of the button from the given list according to your design requirement of your website.

Full-Width Button

A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.

Button Icon

There are lots of icons are there to choose from. You can find almost every types of icon there. Use the search field on top to find your desired one. Select you the one you want from the list.

Button Icon Position

There are five different types of button icon positions available. Set the icon position of your button from the drop down list of sizes.

Featured?

Enable this option if you want to highlight this pricing column.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file. 

Progress bar

 Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Progress

Enter percentage number of progress. e.g. 50

Progress Bar Height
Set height of the progress bar. Leave blank if you want to use default height.

Style
Select a progress bar style from the below list.

Stripped
Enable this option for striped progress bar

Text
Enter text to display in progress bar. Leave blank if not required.

Active
Enable this option for active progress bar.

Show Progress Percentage
Enable this option to display progress percentage.

CSS Class
If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.

Raw HTML

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title textbox, it will be automatically added to the addon section.

HTML Code
<p>Insert raw html here.<br/>Here is an example of hyper link <a href="http://www.joomshaper.com">JoomShaper</a></p>
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. Some features of Raw HTML will only work for users who have the “unfiltered_html” capability.

CSS Class
This option will allow you to style a particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file. 

Social share

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

SOCIAL SHARE OPTIONS

Social Media
Select social media websites from the list like Facebook, Twitter, Google Plus, Linkedin, Pinterest, Tumblr, Getpocket, Reddit, VK etc. 

Show Website Name

Select your desired options if you want to display the social share websites name.

Show Share Count

Share count will display the amount of share on the websites. Enable the option if you want it.

Show Total Share Count

Display the total share that means the all the share in all the websites you have added. Enable the option if you want it.

SOCIAL SHARE STYLES

Style

There are numerous styles are available like Solid Simple Solid Colored Custom. Select your desired one from the list.

Use Border

Enable the option if you want to use the border. 

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Sound cloud

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title
This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added to the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Embed Code
Insert Soundcloud embed code here. Goto soundcloud.com the click on any track or album that you want to display here. Now click on share button then select Embed. Now copy the code and paste here.

CSS Class
This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Tabs

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Style for Tabs

There are different styles for tabs like Default, Pills, lines. Choose your desired one as per your requirements.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Tab Items

Add New
Item 1
Tab Title

Add the tab title using this field. The title will be displayed on top of the tab. Upon clicking the contents will be displayed.

Tab Icon

Use the icon for the tab from the hundreds of icons listed in the tab icon list.
Tab Content

Add the tab content that the tab will display while open. Use the text editor to modify it as per your desire.

Testimonials

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Client Review

Use this field to enter the client review that you want to add to your website with testimonial addon. Use the editor to modify the text.

Client Name

Use this field to enter the client name whose review you want to add to your website with testimonial addon.

Client Company

Use this field to enter the client company whose review you want to add to your website with testimonial addon.

Client Avatar

Upload the image to the avatar. Use SP Page Builder well-developed media manager to upload the image.

Avatar Width
Set the avatar width. The space the avatar is going to cover horizontally.

Avatar Position

Set the avatar position left or right. Select your desired position.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Testimonials PRO 

Admin Label
Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

AutoPlay
Autoplay is the function of auto-rotating the images and content without any click from the user. If you want that feature. Set the testimonial slider to autoplay.

Show Arrows

Navigation arrows are there to direct the flow of images and content in the specific direction. If you enable the option the navigation arrows will show up in the testimonial slider. Navigation arrows are shown on both sides of the slider.

CSS Class

This option will allow you to style particular element in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file.

Add New

Item 1
Client Name

Use this field to enter the client name whose review you want to add to your website with testimonial addon.

Client Avatar

Upload the image to the avatar. Use SP Page Builder well-developed media manager to upload the image.

Testimonial Message

Use this field to enter the client review that you want to add to your website with testimonial addon. Use the editor to modify the text.

Client URL

Enter client URL. Leave blank if no URL is required.

Text block

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Content

Use this field to enter the content you want to display with the content addon. Use the text editor to bring necessary customization to your content.

Content Alignment

Set the alignment for this addon contents.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it in your CSS file.

Timeline

Admin Label

Admin label helps you identify better that you did with this addon. This will guide you while doing the further customization. You should name the admin label by keeping the relevance to the purpose of the addon you have added. This will surely save you from a lot of hassles.

Title

This option will allow you to add a title to the title. The purpose of the title is to express the naming of the section you just added with the addon. If you want to add the title, you just have to add it in the title text box, it will be automatically added to the addon section.

Bar Color

Select a color for timeline bar. Use the color picker tool to pick the desired color of your choice.

CSS Class

This option will allow you to style particular elements in your added addon. Customize and style the particular content and then use this field to add the CSS class name you just used to style the content element also don’t forget to refer it to your CSS file. 

Add New
Item 1
Item title
Use this field to enter your desired text to use as the addon title.

Content

Add the content of the timeline using this option. use this text editor to modify the content text.

Timeline Date
Insert the date of this timeline eg.08 Feb 2013

Twitter feed

 

Video

With this add it’s easy to add your Youtube/Vimeo clip and since v3.3 mp4  into any page using the popular SP Page Builder. There are built-in options for privacy.

Note: Starting from April 2018, Google Chrome changed the Autoplay policy. Videos even if they have enabled the autoplay option will not start automatically anymore. It is not related to YouTube, it is simply a browser policy.  

Note: YouTube page load is 5x slower in Firefox and Edge than in Chrome because YouTube's Polymer redesign relies on the deprecated Shadow DOM v0 API only implemented in Chrome.