In this article we will talk about the main component when it comes to developing our templates, and that is:
Sp Page Builder Pro
Sp Page Builder Pro offers a lot of functionalities and it’s impossible to cover all of them in this post. This article will cover some basic tips like dealing with rows, adding a new addon, inserting the css etc.
We often get questions about what the backend for a certain Joomla template looks like or some users have problems with some basic settings of the Sp Page Builder.
Please keep in mind that we are presenting the way we work with this component, this doesn’t mean that it’s the only correct way and you cannot work with it differently.
Before we start, we want to let you know that you can test Sp Page Builder Pro’s front end editor here. In order to work fully with the front end editor and edit our addons, keep in mind that you need to erase the styling we inserted in the custom css box from the style tab.
Now let’s see how we work with it.
1. Installing Sp Page Builder Pro and configure it.
We begin, of course, with the installing of the component which we have covered in the documentation.
We always work with the back end editor when it comes to developing templates. This doesn’t mean that it’s wrong to work with the front end, everybody can work with Sp Page Builder the way they want.
2. Creating a new page and assign it to the menu.
Again I feel the need to mention that this is not an advanced course for using this component, but just a basic setup, so we are sorry of this is boring to you.
Now, to get on with the job, we click on Sp Page Builder in the administrator panel’s menu and we select pages. We click on the green button that writes “New”, we type the title we want, save it and exit.
Then we go to the menus, select the menu we want and add a new menu. At menu item type we select Sp Page Builder – Page. After this we select the page we created.
Finally we have a page assigned to the menu.
3. Adding our first row, setting up the columns and start working with the addons.
Rows
Now that we assigned the page to the menu, we go back to the page created and add the first row. Click to add the new row and select the preset layout we want or type in the custom layout we want.
On the row options, the general tab, we have the ability to align column items in the center, make a row fluid or remove column gutter.
Where some users encounter problems is finding the background settings of the row. We have them on the second tab, the style tab, where we can also insert the padding.
Columns
Same like in a row, we can insert different padding on the columns, we can insert backgrounds and also we can set up the responsive layout for them.
Addons
In each column, on the top, we have the option to add a new addon. We click on it and select the addon we want.
After this we erase every default setting we find, we go to the style tab scroll down to the css box and start inserting the styling there.
We always use that box for styling and not the default settings in the addon. Again, it’s not a wrong or right practice , you can work with addons differently and it’s total fine.
4. Video example.
You can check the below video where you can see all the steps mentioned above. You will understand better what we talked about in this article:
This is how we work with Sp Page Builder Pro to develop premium Joomla templates. We hope we made ourselves understood and you find it easy to work with us. Again, keep in mind that we presented the way we work with the component, this does not mean that it is the only way to work with it. This article was made for you to understand better our templates and this way you will know where to go to edit them.
Stay tuned!
