Happy 14th Birthday to Joomla!



Your go-to resource for Joomla knowledge, tutorial, information and latest news in Joomla world

How we used JSN PageBuilder to empower JSN Dona

How we used JSN PageBuilder to empower JSN Dona


JSN Dona provides 6 homepage layouts. In the template demo, you can see many modules with powerful features such as article list, testimonial, etc... Most of these modules were created with the assistance of JSN PageBuilder along with many Class Suffixes only applicable for JSN Dona.

JSN PageBuilder is a perfect tool to help you build and manage content for Joomla 3.x websites. The free version of the product is already included in the sample data of JSN Dona.

In this article, I would like to show you how we utilize JSN PageBuilder Free and these custom Class Suffixes to empower JSN Dona.

Note: All the custom classes can be edited in file [root folder]/templates/on9y0_dona_pro/custom.css


Feature List

1. Article List

We use JSN PageBuilder to build Article List function in some modules and articles which will be listed below:




"Charity" Homepage

Charity Projects

Charity Latest article

2nd Popular Events


"Politics" Homepage

Current campaigns

Political latest news

"Religion" Homepage

The News of Religion


Program & Events


Latest News


"Education" Homepage

Courses in our university


“Portfolio" Homepage

Popular Articles


"Business" Homepage

Latest blog


Let's take the module "Charity Projects" of "Charity" Homepage as the example:


Module "Charity Projects"


The module "Charity projects" is located at position content-top. Open the module setting, you can see it contains 2 rows:


Module "Charity Projects" content


The first row has a module element that contain another module named Recent Projects while the second row is divided into 3 columns, each column consists of 2 different elements: an Article List and a Buttonbar.

In this module, the Article List must be set with the CSS Class Suffix layout-col-dona layout-col-one in the tab Styling of the Article List setting to look like in demo.


2. Featured Service

The only module that has this format is "Our services" in "Business" Homepage


Module "Our services"


This module is located in position content-top with Class Suffix service-module. It has 1 row with 3 columns. Each column is a group of an Image (with Class Suffix sv-icon), a Heading (with Class Suffix sv-title), a Text and a Button (with Class Suffix btn-more-link).


Module "Our services" content


3. Donate & Join us Box

A Donate or Join Us Box are built in the same way. You can find 2 modules of this in JSN Dona Demo: Module "Donate" in "Charity" Homepage and module "Join us" in "Politics" Homepage

Let's take the module "Donate" as the example:


Module "Donate"

This module stays in position content-bottom without a Class Suffix. A Heading followed by a short Text and a donate Button all in one row makes up this module content. This row is assigned with Class template-full-width box-center that makes the module display full-width in browsers regardless of the limited width of website's body.


Module "Donate" content

4. Testimonial

You can easily create a testimonial within JSN PageBuilder with a dedicated element Testimonial. In JSN Dona Demo, this element is used in the article "Education testimonials" in "Religion" Homepage and module "Testimonial" in "Bussiness" Homepage.

Let's take the article "Education testimonials" as the example:


Article "Education testimonials"


This article consists of a Testimonial having the Class Suffix jsn-edu-testimo.


Article "Education testimonials" content


5. Image gallery

With the Image element, you can display images and arrange them as a gallery in modules and articles. There are 2 image galleries in the demo: module "Charity Image Gallery" in "Charity" Homepage and module "Our gallery" in "Business" Homepage.

Let's take the module "Our gallery" as the example:


Module "Our gallery"


This module is located in position content-top-below with Class Suffix gallery-module and its content is made of many Image elements arranged in 2 rows and 4 columns:


Module "Our Gallery" content


6. Map integration

JSN PageBuilder provides an element which allows displaying Google map in modules or directly in articles. This element is called Google Maps

You can see the example of this element in the module "Google Map" in "Business" Homepage.


Module "Google Map"


This module is located in position content-bottom with Class Suffix address-module Google-Map-content.png

Module "Google Map" content


The Google Maps element in the first column contains the Class Suffix env-maps


So, above are the contents and modules with special Class Suffixes we used to create the demo for JSN Dona template. A part from editing Joomla articles, JSN PageBuilder also has the ability to help you edit html module content and even K2 articles. You can even define your own classes to change the template appearance so it can fit the need of your website. If you want to learn more about using JSN PageBuilder you can download the documentation here.

Please be mindful that you can only create 5 articles with JSN PageBuilder Free Edition in maximum (no limit in module creation). To be able to freely create more articles please consider upgrading to JSN PageBuilder Pro Edition via Components => JSN PageBuilder => About.


Please feel free to leave comment if you have any question. JSN Dona is the special gift for all Joomla users to celebrate Joomla 10th birthday. Don’t miss this chance!



Download it right now


Popular websites using Joomla! 3.x
JSN EasySlider - More features, more powerful

Comments (0)

There are no comments posted here yet

Welcome To JoomlaShine!

Your feedbacks are valuable to us

Start the survey