JSN PageBuilder, easy Drag-and-Drop Joomla Pages

jsn page builderJSN PageBuilder by JoomlaShine makes it possible to create custom layouts. It does this by turning an article into a page with customizable rows and columns. The process is so easy that anyone can do it.

In this tutorial, we'll introduce you to JSN PageBuilder and show you, with examples, how to build a page.

Step 1. Installation

For this tutorial, we'll use the pro version of the extension.

Go to the JSN PageBuilder extension page and choose the plan that suits your needs.
If you choose the free version, please take note that it has some limits.

jsn page builder joomla
  • Login to your Joomla administrator area.
  • Go to Extensions > Extensions Manager.
  • Click Upload a Package File and browse for the zip file.
  • Click the Upload and Install button.
  • Wait until you see the installation has completed and press the finish button.
jsn page builder joomla

Step 2. Create an article

Go to Content > Article manager > Add new article

This is how you create an article in the regular way. Now, notice there is a new feature in the edit screen above the content area that allows you to switch between the default editor and the PageBuilder.

jsn page builder joomla

Click on the PageBuilder button

jsn page builder joomla

Step 3. Add a row

You can add rows with a predefined number of columns. Click on the Add row button and choose the columns you need. In this example, we'll choose 2 columns.

jsn page builder row

Now that we have a new row, it's time to add elements.

Step 4. Add a Text element

  • Click on the Add element button
jsn page builder joomla text element
  • From the list, choose Text
jsn page builder joomla text element

In the next screen you can add your title and text, as well as preview the final result. For advanced options, click on Styling tab to choose font, margins and animation.

jsn page builder joomla text element
  • When you are done, click the save button.

Step 5. Add a Joomla module

  • Click on Add element button
  • Choose Joomla module
jsn page builder joomla module element
  1. Add title
  2. Choose the module
jsn page builder joomla module element
  • When you are done, click the Save button.

Step 6. Add an Image element

  • Click on Add element button
  • Choose Image
jsn page builder joomla image element
  1. Add title
  2. Choose the image file
  3. Set an alternative text
  4. Choose the image size
  5. Enable a link
jsn page builder joomla image element
  • When you are done, click the Save button.

There are many more elements available in JSN PageBuilder, such as tabs, audio, video, etc.

Step 7. Final result

  • Go to your public site and see how it looks:
jsn page builder joomla frontend