Blog

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

Ultimate guideline to build eye-catching sliders in JSN Dona demo

Ultimate guideline to build eye-catching sliders in JSN Dona demo

 

JSN Dona is our versatile multipurpose Joomla template and also one of the hottest templates at this moment. A premium Joomla template ships with outstanding features and a FREE edition for you to try. It's really awesome, right?

As you might see in the demo of JSN Dona, our layouts have impressive sliders that quickly attract visitors from the first sight. They are built by the free editions of two stunning JoomlaShine extensions: JSN EasySlider & JSN ImageShow. You can get them all when you install the sample data of JSN Dona.

In this article, I am pleased to tell you how we created these beautiful Joomla sliders in several steps.

Sliders created by JSN ImageShow

Step 1: Create JSN ImageShow showlist
Step 2: Create the JSN ImageShow showcase
Step 3: Present the slide in “promo” position
Step 4: Create the module for Introduction text

Sliders created by JSN EasySlider

Step 1: Draw the idea for your slide
Step 2: Create the slide with JSN EasySlider
Step 3: Present the slider in “promo” position

Sliders created by JSN ImageShow

There are 3 layouts using JSN ImageShow to create the slides:

 

  • Religion
  • Business
  • Portfolio

Reason to use JSN ImageShow:

JSN ImageShow is the powerful Joomla gallery extension which is used to make important more attractive, eye-catching and then keep visitors highly focus on the content (Headings, description, call-to-actions)

Detailed guideline

All the slides are built in the same concept:

  • 01 JSN ImageShow module
  • 01 Introduction text module located in “promo” positions.

I will go into detail with the slider in Business layout.

Step 1: Create JSN ImageShow showlist

JSN ImageShow can get images from multiple sources such as local folder, online storages like Facebook, Picasa, Flickr or other Joomla gallery components such as Phoca and JoomGallery. 

  • In our case, we created an online album on Picasa and get images from there.
  • Follow this video, you can quickly create new showlist & select images from Picasa.

Create showlist using Joomla gallery extension

Step 2: Create the JSN ImageShow showcase

  • Create a Business Showcase with overall width: 100% & overall height as 615px and showcase theme as Theme Slider.
  • Configure the theme's settings to suit your desired layout.

Showcase settings in JSN ImageShow-Joomla gallery extension

Step 3: Present the slide in “promo” position

  • Create the JSN ImageShow module with created showlist and showcase, set position as “promo
  • This module is styled with module class suffix “demo-env-slider”. If you want to edit it, you can find all the codes styled for the class “demo-env-slider” in file “custom.css”, at: [root folder]/joomla-templates/on9y0_dona/pro/templates/on9y0_dona_pro/css

Slide css style in JSN ImageShow-Joomla gallery extension

Step 4: Create the module for Introduction text

  • The Intro text is created as Custom HTML module. You can find it as “Promo Intro text” module.
  • This module is styled with module class suffix promo-intro-text. If you want to edit it, you can find all the codes styled for the class “promo-intro-tex” in file “custom.css”, at: [root folder]/joomla-Conceptemplates/on9y0_dona/pro/templates/on9y0_dona_pro/css

Introduction css style in JSN ImageShow - Joomla Gallery Extension

Sliders created by JSN EasySlider

There are 3 layouts using JSN EasySlider to create the slides:

 

  • Politics
  • Charity
  • Education

Reason to use JSN EasySlider:

JSN EasySlider is an awesome Joomla slider extension which allows you to present informative content in 01 slide: all images, text, button, or even a video with smooth transitions. It catches visitors’ attention and delivers message and propels them into actions. 

Detailed guideline

All slides are built in the same concept: 01JSN EasySlider module in “promo” positions. I will go into detail with the slider in Charity layout.

Step 1: Draw the idea for your slide

JSN EasySlider works as a layer slider, where we can arrange various contents as multiple layers with different transitions and styles.

  • Define all content you want to present.
  • Define the way  each layer will be presented

JSN EasySlider can get images from the URL or you can upload directly. In our case, we uploaded all the images to Picasa album and get the URL.

Step 2: Create the slide with JSN EasySlider

  • At the first slide, we use big image as background image, input the image’s URL in background setting, set suitable size and positions.

JSN EasySlider - Joomla Slider Extension background

  • We separate the sentence into 4 parts; each text part has another settings for better display.

JSN EasySlider - Joomla Slider Extension Text settings

  • Click the tab “Effect” to make the transition for the layer

JSN EasySlider - Joomla Slider Extension Tab

  • Create the button “Join us” and fill background color in the tab “Style”

JSN EasySlider - Joomla Slider Extension Button settings

  • To make sure the slider present beautifully on table and mobile device, you can switch to the tablet and mobile layout. Here you can make the text bigger, rearrange the text position or crop the image. You have the full control on your slider’s appearance.

Switch tablet layout using JSN EasySlider - Joomla Slider extension

  • Click + button in the left bar to create the new slide and continue adding the new background and new content.

Create new Joomla slider with JSN EasySlider

  • Click to preview the slider’s animation before you save it.


Preview JSN EasySlider - Joomla slider extension

Step 3: Present the slider in “promo” position

  • From the JSN EasySlider sliders management page, you can click button “Assign to module”. This will automatically create a new module for your slider. Now you can input the title and choose the position for this module.

Charity Joomla slideshow module

So, these are steps we did to create vibrant Joomla sliders for JSN Dona demo. You can easily edit each the slider as well as create the new one for your need. If you have want to learn more about using JSN ImageShow and JSN EasySlider, you can read the documentations of these products.

Download it right now

5 useful Chrome addons for Joomla developer
A complete Joomla website on live for less than $1...
 

Comments (0)

There are no comments posted here yet

Welcome To JoomlaShine!

Your feedbacks are valuable to us

Start the survey

Related Posts