Create Joomla Pages With JSN PageBuilder 3: A Step-by-step Tutorial
A standard Joomla page can be built in a few minutes, but a beautiful and eye-catchy page that competes with other websites is not simple to create immediately. Luckily, we have JSN PageBuilder 3 extension as a powerful ‘tool’ for creating any Joomla page for any purpose.
JSN PageBuilder 3 is one of the top Joomla drag-and-drop page builder extensions that has been updated with high technology. You may need to read its documentation to understand its features before looking deeper at this blog, and make sure that you have installed JSN PageBuilder on your Joomla! site.
This blog is going to introduce you how to create a Joomla page named “About Us” for a website of a shoe manufacturer.
1. Let’s start with a new article
Please go to Content → Articles → Click Add New Article.
A blank article appears on your screen, and there is an orange button “Click To Edit” at the center telling you that “This article is managed by JSN PageBuilder 3”. Please click on that button to open the editor mode of JSN PageBuilder 3.
In case there is no button like that appears, please find another option on the taskbar: click the “Switch Editor” button then choose “Page Builder 3” and everything is done.
2. Define a content layout
A good layout is a platform for your page to have a clear structure. Defining a layout beforehand cuts down the time spending on building a Joomla page, and guide you on the right track.
In this step, I recommend we draw a draft layout on paper, and estimate sizes for each part if possible. The draft doesn’t need to be nice, but understandable and possible for you to build a page.
3. Set general information for a page
With the latest version of JSN PageBuilder 3 (1.3.0), you are able to not only insert a page title, SEO title, and meta description, but also add its intro image, category and set a page status directly (without exiting the Fullscreen mode). Please fill the information before we move to the next part.
4. Create Joomla Page Content
To help you focus better on this guideline, I break down the whole page into 4 parts. Here they are:
4.1. The Header Part: “About Us"
To start building any part of one page, the first thing we have to do is to add one section (which includes elements that we will insert later) by going to the Add Element icon -> choosing the Element tab -> select Layout -> drag and drop the Full Section element to the blank page content area.
I decided to name this section “Header” on the Show Page Outline feature because it helps me to find its position and arrange it in the whole structure more easily. You can skip this step, but why not make use of this feature now?
Next, I want to impress the audience that this page introduces a shoe store, so I make the background have an image to display a glorious pair of shoes by:
- Click on the section -> choose the Styling tab.
- On the Background setting, please click on the Select Image icon -> select one image as a background, or you can upload a new one by dragging and dropping it directly to that area -> hit Select and it is done.
The background has been done, now I am about to add a heading for this page:
- Go to the Add Element icon -> choose the Element tab -> select Heading -> drag and drop one heading style to the section.
- Insert text, choose an icon and add an URL to the heading when you are in the General tab.
- To change the font, color and size, please go to the Styling tab. The golden rule for setting sizes is to set up from Section (big) -> Row -> Column -> Element itself (small). Here is how I did in this case:
Tips: It is much easier to select Section, Row or Column with the Navigation Bar at the bottom. Or else, you may need to go to the Show Page Outline to do that.
For beginners, you may feel confused with “column” and “row”, and wonder why things become so complicated. Well, they belong to the Grid Layout that is necessary to build a page, so I suggest you search for more information to understand better (like this article).
- To add animation, custom class or choose what devices to display, you have to move to the Advanced tab. This case does not have any advanced settings because I want to keep it simple. The Advanced settings will be on another specialized topic.
Now, the header part seems to be okay, but do not forget your page has to be well responsive to every device. Have you noticed the device button located at the center of the top menu bar?
When you switch the device mode, the settings need to be changed as well. In this case, there is a small change of the Box Styles area: dimensions, margins, paddings are resized to fit many devices.
4.2. The “Who We Are" Part
Although there is no visual border separating among those page elements, you can ‘imagine’ two invisible columns in this part. One is for the Youtube video; and the other includes a heading, a paragraph, and two buttons. Now, we are going to look deeper at each ‘column’.
The Youtube video
At first, we are inserting a new layout element called “½ ½” under the About Us part. A new section with 2 columns is just created.
- Next, please select a left column -> go to Element -> type “Video” on the search bar, or go to Media -> drag and drop the Youtube element on the page content area.
- To add/change the URL of the video and its display screen, please go to the General tab. In this case, I set 16:9 for the Ratio and turn on Show Control.
- To resize its dimensions, paddings and margins, please go to the Styling tab and look at Box Styles.
The Text Area
In JSN PageBuilder 3, there are plenty of styles for a heading, a paragraph, and a button to make the text area of a page become more interesting and eye-catchy:
- With the blank column on the left side, please select one heading, one paragraph and two buttons from the Element feature, and add them to that column.
- Modify their settings on General, Styling and Advanced tabs. Here are my settings of the “Who We Are” heading:
4.3. The Product Introduction part
When you are familiar with 2 parts above, it will have no difficulty to create such content part with JSN PageBuilder 3 to introduce products like this.
The heading is similar to the one in the “Who We Are” part, but the product detail is quite strange to you, so let me guide you this part:
First of all, please go to Element -> choose Layout -> pick the ¼ ¼ ¼ ¼ section. A new section with 4 columns is displayed on the page content area. You can add more than 4 columns and make them have the same dimension by turning on Equal Width mode on the General tab with the Row level.
Look at this image below, you will see there are two big elements: an image and a block including 2 headings.
Then, we just add those elements one by one: firstly with the image, then a block and headings come in the end. They will be automatically scaled to fit the size of one column, so you don’t need to handle scaling elements.
In this part, I set up the section background with a blue color (#007AC4) and the block background with a white color (#FFFFFF), which are in good harmony with the whole page. One little advice for you is to set colors of each element of a page in a perfect match with the brand identity so as to be memorized better in customers’ minds.
4.4. The Customer Review part
Customer Reviews or Testimonials are highly recommended to become a part of the About Us page because they can prove the value of what the brand wants to offer, and persuade other potential audience to purchase your products and services. That’s why I am sharing some guidelines to build the Review part in a simple way:
- Generally, the heading and paragraphs are created like the way mentioned above. The layout style is ⅓ ⅓ ⅓ because we are going to have 3 reviews on this page.
- The section background has a fresher blue color (#098FDD) to differentiate from the Product Introduction part.
- The quote icon is got from the Icon element. The default of icons are always a star, but you can change its type later on the General tab.
- Now, the page seems to be perfect! Let’s hit the “Save” button to publish it on your website.
Tips to build a nice Joomla page
- Elements should be aligned in a geometric shape in order to improve the design of your page.
- Colors are picked and combined in a harmony way, and they are related to the brand.
- Text boxes on the same row should have relatively the same number of characters in order to make a good layout.
Finally, we have known all the steps to create a Joomla page with JSN PageBuilder 3 extension. This is about the “About Us” page - a very common topic that almost website builders want to know, so I hope this blog helps you well. If you want to recommend anything to make this blog better, feel free to leave some comments and we truly appreciate that.
Let’s build your Joomla page with JSN PageBuilder 3 now!