It’s a fact that one of the main  obstacles in building a Joomla website, especially for beginners, is that they  have no idea about, or are simply too tired of, writing long lines of boring  codes. As a result, except for pure-text content, they don’t know how to  present their content in a visual, eye-catching way. Luckily, JSN PageBuilder can help.

  In this article, I’ll show you, step  by step, about how to build a simple Joomla! page using this Joomla! extension.  Don’t worry if you don’t know how to code. In fact, you don’t have to write any code at all. You can choose suitable  elements from 20+ advanced page elements and customize them with just a few  clicks, and you can use drag-n-drop to rearrange the content section in single interface.

Before we start

  Make sure that you have installed  JSN PageBuilder on your Joomla! site.


  1. Create a new article to build your page

JSN PageBuilder

  Go to Content → Article Manager →  Choose your current article/Add new article → Select PageBuilder (instead of  Default Editor).

You also can build a page based on  a module.

2. Define content layout

Click to add new rows and columns  to the article. You can easily change the column widths to fit your purpose  just using drag-n-drop.

Content layout

  In the row setting panel, you can  also adjust the padding and, border, and add various type of background for the  row.

Row settings

3. Add and customize elements

Click “Add element” and select a  suitable type for the content: JSN PageBuilder provides you with the most  popular types of elements for a Joomla website.

Advanced page elements

For example, if you want to present  a text slider on your page, you can use Carousel. You can find Carousel, or any  other type of element simply by using the Spotlight  Filter function of JSN PageBuilder.

Spotlight  Filter

  Click and select carousel items to  add your own content, including text, and background images.

In the styling tab, you can freely  adjust the options of the slider. The live  preview box will show you what you will get in the front end

Carousel element setting

  Now you might want to add some  information to your front page to introduce your company to the audience. Let’s  add a heading element with the text “ABOUT US”, a small image for separation,  and finally, some lines of simple text about your company.

  This is what you’ll have to do in  the back-end:

Article at backend

  And this is what you get in the  front-page:

Article at frontend

4. Add a background to make your content more  attractive

In case you want to add a  background image to make your content more attractive, it’s super easy with the  support of JSN PageBuilder.

  Add a new row of elements and add  your pure text there. Select Row settings to add your  background. You can choose from various options, including solid color,  gradient color, pattern, or image. And remember to change your text color to  fit the background.

Add image background

  Let’s go back to your front page:

Final Joomla page

Now I think  you’ve got the general principle. 

  •     Click to select appropriate elements.
  • Drag  and drop.
  • Customize the styles.

That’s all you have to do. Building a Joomla!  page, or even a Joomla! website is now much easier with help from JSN  PageBuilder. Good luck! Want to share your experience? Leave comments now. We will appreciate it much.


Go to top