20%

Happy 14th Birthday to Joomla!

OFF ALL TEMPLATES & EXTENSIONS

Blog

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:

Layout

Modules

Articles

"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:

charity-projects.png

Module "Charity Projects"

 

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

charity-projects-content.png

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.

article-list-styling.png


2. Featured Service

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

Our-services.png

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

Our-services-content.png

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:

donate_20150914-115236_1.png

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.

donate-content.png

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:

Education-testimonials.png

Article "Education testimonials"

 

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

Education-testimonials-content.png

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:

Our-gallery.png

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:

Our-gallery-content.png

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.

Google-Map.png

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.

pro-upgrade.png

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