Create Joomla Pages With JSN PageBuilder 4: 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 4 extension as a powerful ‘tool’ for creating any Joomla page for any purpose.

JSN PageBuilder 4 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 to how to create a Joomla page named “ JSN Coffee Shop ” for an eCommerce website of the business. 

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 “Create a new page” at the centre telling you that “This article is managed by JSN PageBuilder 4”. Please click on that button to open the editor mode of JSN PageBuilder 4.In case there is no button like that appears, your Joomla is running Joomla core Editor so please choose the other option on the taskbar: click the “JSN PageBuilder 4” button 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 guides 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 4 (1.0.0), you are able to not only insert an Intro text 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 Section: The Taste of Premium Coffee

To start building any part of one page, the first thing we have to do is to add the section (which includes elements that we will insert later) by going to the Add Element icon -> choosing the Element tab -> select Layout. You can see the layout now is ½ ½   so drag and drop that Layout to the blank page content area.I decided to name this section “Section 1” 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 coffee shop, so I make the background have different images to display amazing cups of coffee by:

• Click on the section -> In General tab -> Turn off Set Fixed Width
• Click on the column on the left -> choose the Styling tab. On the Background Image setting, please click on the Select from Image Manager 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.
• Then for the column on the right, I can see that it is divided into 2 layers, so I drag & drop a Block to that column, then duplicate it to create a second one.

Then, I will set Background for two Blocks similar to the way I set for the Column on the left.In JSN PageBuilder 4, 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:

The background has been done, now I am about to add a text for this part:

• Go to the Add Element icon -> choose the Element tab -> select Heading -> drag and drop one heading style to both Columns on the left and two Blocks on the right ( As you can see all of them include Heading).
• For the column on the right, I add a Paragraph below the Heading. For two Blocks, I add the Button elements below the Heading.
• Insert text when you are in the General tab.
• To change the font, colour 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.

Note:

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

• You can add animation, setting the visibility on devices in the General tab
• To change Custom CSS, you have to move to the Styling  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, part 1 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 centre 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 “About Coffee Shop" Section

Although there is no visual border separating among those page elements, you can ‘imagine’ two invisible parts in this section. One is the Background above, and the other is the below part includes a heading and a paragraph, Now, we are going to look deeper at each ‘column’.

The Section with Background

At first, we are inserting a Full layout element under The Taste of Premium Coffee section. 

• Next, please select a Section -> go to Background part -> Select from Image Manager 
• Then, you can open More Settings to configure the background image. Here, I want to set the background position to the centre, turn off background repeat, set background size to cover and set background attachment to fixed.

• To change the paddings and margins, please go to the Styling tab and look at Spacing.

The Text Area

• With the below part which is made from Heading, Paragraph & Image, please select two headings, one paragraph and one image from the Element feature, and add them to the main section.
• Modify their settings on General and  Styling tabs. Here are my settings of the “About Coffee Shop” part:

• Now, to make this part move to lower, I will select the column that covers all elements that I’ve put and set paddings and margin in the General tab.

• Then, I also set background Color and type the content inside this part. And here is the result after I finish building this section

4.3. The Instagram section

Now, we are going to the third section- which is the most interesting part of this article that I am quite excited about. This feature of PageBuilder 4 allows web developers to show their social media profile with outstanding product images without sending too much effort.Just a very easy action and you can make it available in your Joomla pages. So let’s start!

First of all,  you can easily see that this section includes 2 parts: the Heading and Instagram Photo. So please go to Element -> choose Layout -> pick the Full  section. 

A new section now is displayed on the page content area. Then, you will drag & drop a Heading and Instagram to this section.The default Instagram JSN PageBuilder 4 is shown but you can change it to link with your business Instagram quickly in the General tab.

I just changed the Heading first and then I will show you how to show your Instagram images in the below picture.You can see in the General tab, there is a quick guide to show you how to get your Instagram token so just please follow step-by-step.

Then when you get it, just put in the Access Token box, change the Total Items and Item per Row as your wish. You will see the result immediately.

4.4. The final section: Do you like Coffee?

So actually, if you are here, this section will be very easy right now. Similar to other sections, you will need to build the layout first. So here is the way I do it:

• I drag & drop the Full layout first, then one Heading, one Paragraph and one Button
• The section background is the image so I will select it from Image Manager 
• Then, I insert content for Heading, Paragraph and the Button
• In the General tab of the Button, PageBuilder 4 gives me total 6 choices to link the button with other parts which call Click Action. In here, I link it to External content so I need to put the URL in the box. 

• To change to Button state in Normal, Hover or Active state, you can open the Styling tab.

• Okay, 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.
• Colours 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.

Sum up

Finally, we have known all the steps to create a Joomla page with JSN PageBuilder 4 extension. This is about the “JSN Coffee Shop” page - a very common topic that almost all 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 4 now!

VIEW JSN PAGEBUILDER 4 NOW