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.
There are 3 layouts using JSN ImageShow to create the slides:
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)
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.
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 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.
- 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
- 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
There are 3 layouts using JSN EasySlider to create the slides:
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.
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.
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.
- At the first slide, we use big image as background image, input the image’s URL in background setting, set suitable size and positions.
- We separate the sentence into 4 parts; each text part has another settings for better display.
- Click the tab “Effect” to make the transition for the layer
- Create the button “Join us” and fill background color in the tab “Style”
- 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.
- Click + button in the left bar to create the new slide and continue adding the new background and new content.
- Click to preview the slider’s animation before you save it.
- 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.
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.