How to create an attractive slider in a Joomla website - JoomShaper

How to create an attractive slider in a Joomla website

20 February 2019
Hits 10,965
7 min read
How to create an attractive slider in a Joomla website

Sliders are widely used and they can dramatically enhance the beauty of your website. A good slider can make your visitors fall in love at the first sight. Plus, if you can make the sliders interactive, this will incredibly increase the conversion potential. But the question is, how do you do that?

We will create the Joomla slider with the Slideshow addon of SP Page Builder. The process is pretty straight forward. Here are the prerequisites.

  • Get SP Page Builder Pro from this link
  • Install SP Page Builder Pro on your Joomla site
  • Visit or create a page where you want to add the slider
  • In the frontend editing mode, add a row and start building the slider

Step 1: Prepare the row

At first, we will open the Row Options and make it Fluid Row from the General section.

How to create an attractive slider in a Joomla website

You’ll notice there are still some empty space remaining at both the top and bottom of the addon area. If you want to make it go away, browse to Style tab and set the padding to 0px.

How to create an attractive slider in a Joomla website

Also, choose Custom for the “Select Content Container” option at the top left of the editing panel (General tab).

Step 2: Add the addon to your desired position

Now that we have the row in our target place. Let's add the Slideshow addon to the row.

How to create an attractive slider in a Joomla website

Step 2.1: Prepare the addon to have a fresh start

Upon placing the addon on the row, a demo slider frame will appear. We will delete that demo slider frame and then create our own ones.

How to create an attractive slider in a Joomla website

Currently, a timer progress bar is turned on by default, which you can stop from the Slider Global Settings. Also, we will turn off the bullet and arrow controller from the Bullet/Line Controllers Settings and Slider Controller Settings tab respectively to have a fresh start.

How to create an attractive slider in a Joomla website

Now our canvas is ready to create a new slider. Click the Add Item button to add your first slider frame.

Step 3: Start building the slider

Upon clicking the Add Item button, the following panel will appear.

How to create an attractive slider in a Joomla website

Step 3.1: Set a background for the slider frame

Give the slider frame an admin label, set a background image (see the above screenshot). Click the Apply button. Now our first slider frame just got a background. Scroll down in the left options panel. In slider Global Settings, choose Slider Height as Custom, and set the “Slider Animation Style” to Bubble.

Step 4: Add slider contents

It’s time to start adding some contents inside our slider frame. Click the small gear symbol to open the first slider frame in editing mode.

How to create an attractive slider in a Joomla website

Then click on the “Add Item” button right beside the Slider Content section.

How to create an attractive slider in a Joomla website

This will allow you to choose a content type.

Adding a slider content title: Let's select Title from the drop-down list, put the title content (use a <br/> tag if you want a line break) in the box and define its type (h2) from the HTML Element list.

How to create an attractive slider in a Joomla website

Scrolling down, we will turn on the “Show Caption Image In Column” and “Reverse Caption Image Column” options for a better look of our slider. Make “Slider Image Alignment” Center, and “Slider Content Alignment” Left.

Also, let’s beautify the title by selecting the following properties from the Styles tab.

How to create an attractive slider in a Joomla website

  • Text color: #ffffff
  • Font size: 60
  • Line height: 60
  • Font family: Poppins
  • Font style: Normal

Now, from the Animation tab, we will add an animation effect to this title. Let’s do the following changes.

  • Animation Type: Slide
  • Animation Direction: Left
  • Animation Duration: 800
  • Animation Delay: 900
  • Animation Slide From: 100
  • Animation Timing Function: Ease

Check the screenshot below for a better understanding.

How to create an attractive slider in a Joomla website

Click Apply. 

Adding a text description following the title: We’ve added our first content. If we want to keep adding more contents then the procedure is the same. Click on “Add Item” and choose the content type- this time we’ll be adding some text about our product, so let’s choose the Text content type from the list and put our content in its respective field.

Let’s beautify the text by selecting the following properties from the Styles tab.

How to create an attractive slider in a Joomla website

  • Text Color: #ffffff
  • Font Size: 14
  • Line Height: 24
  • Font Family: Poppins
  • Font Style: Light
  • Text Shadow: #fff

Next, from the Animation tab, we will add an animation effect to this text. Let’s do the following changes. 

  • Animation Type: Slide
  • Animation Direction: Left
  • Animation Duration: 800
  • Animation Delay: 1000
  • Animation Slide From: 100
  • Animation Timing Function: Ease

Adding a button following the text: Now it’s time to add a button to help our users explore around. Like the above step, at first, click the Add Item button. Then choose Button from the content type dropdown.

How to create an attractive slider in a Joomla website

We’ll be presenting with a lot more functions as the button needs to be polished. Let’s fill them up quickly since the fields are pretty self-explanatory.

From the Content tab, make the following changes.

  • Content Type: Button
  • Button Content: Explore (anything you want)
  • Button Link: # (any link you want)

From the Animation tab, make the following changes.

  • Animation Type: Slide
  • Animation Direction: Left
  • Animation Duration: 800
  • Animation Delay: 1000
  • Animation Slide From: 100
  • Animation Timing Function: Ease

From the Style tab, make the following changes for the button.

How to create an attractive slider in a Joomla website

  • Font Size: 14
  • Font Family: Poppins
  • Font Style: AA Normal
  • Letter Spacing: 1px
  • Background Color: rgba(0, 0, 0, 0)
  • Border Width: 1px 1px 1px 1px
  • Border Color: #ffffff
  • Border Radius: 5
  • Padding: 8px 50px 8px 50px
  • Text Shadow: #fff
  • Box Shadow: #fff
  • Button Hover Color: #BE3233
  • Hover Background Color: #ffffff

Adding an image inside the slider frame: Now the only thing left to do is add our product image. Let’s follow the similar path like the above to add the new content, but this time we’ll be choosing Image as the content type from the dropdown. This will enable us to upload and select an image in our slider. Let's do that.

How to create an attractive slider in a Joomla website

Remember to hit “Apply” every time you add a new content.

After adding the image, we need to set its animation and style.

From the Animation tab, make the following changes.

  • Animation Type: Slide
  • Animation Direction: Top
  • Animation Duration: 800
  • Animation Delay: 1000
  • Animation Slide From: 100
  • Animation Timing Function: Ease 

Now, from the Style tab, make the following changes for the image.

  • Image Width: According to your image (366 in this example)
  • Image Height: According to your image (645 in this example)

Adding contents is done for the first slider frame.

How to create an attractive slider in a Joomla website

We will add a second slider frame following the same method.

Step 5: Working with the slider controller and slide timer

Our slider is almost ready. You can add more slider frames if you want. But for this tutorial I would keep it limited to 2 slider frames, because there are more things to do. Now we will customize the slider controller and the timer.

Customizing the slider controller: Slider controllers let the visitors click and jump into any slide easily. Controllers also display the position of a frame in a slideshow.

Make the following changes in the Slider Controllers section

  • Show Bullet/Line Controllers: Yes
  • Controllers Style: Line
  • Controllers Position: Bottom Center
  • Controllers Gap From Bottom: 50

To get a linear controller interface, we will customize the “BULLET/LINE CONTROLLER NORMAL STYLE” section as follows.

  • Height: 5
  • Width: 15
  • Border Radius: 18

Go to the Bullet/Line Active Style tab, and make the following changes

  • Bullet/Line Active Height: 5
  • Bullet/Line Active Width: 30

Setting the slider timer: You can show/hide the slider timer bar from the addon’s General settings tab.

How to create an attractive slider in a Joomla website

Also, there you can activate the autoplay along with other options.

Don't forget to save the changes by clicking the Save button at the bottom.

Done!

And... Our slider is now ready. Now let’s take a look at the output.

How to create an attractive slider in a Joomla website

The Slideshow addon is a huge tool to build UNLIMITED slider styles with amazing effects. In this tutorial, I’ve shown a standard slider example. You can unleash your creativity to get your unique slider design and behavior. We’ve also released 16 readymade slider blocks with the announcement of the Slideshow addon. You can use them as well.

I believe this tutorial will be helpful in using the SP Page Builder’s Pro Slideshow addon to create a slider on your Joomla site. Have you already created a slider using the addon? Please share your thoughts and experiences with the community via comments.

Try SP Page Builder for FREE!    Get SP Page Builder Pro Rate on JED

Arafat Bin Sultan

Arafat Bin Sultan

Lead Content Developer
Arafat is the Lead Content Developer at JoomShaper. He is a tech-enthusiast by born with a keen interest in space, photography, and video making.

Comments (10)

B
balofan
This comment was minimized by the moderator on the site

Thanks for the great post.

This is handy for making stunning slides using page builder.

Paul Frankowski
Paul Frankowski    balofan
This comment was minimized by the moderator on the site

Thanks, I hope you will renew your membership soon.

H
Heviland
This comment was minimized by the moderator on the site

THX for yours work!

Paul Frankowski
Paul Frankowski    Heviland
This comment was minimized by the moderator on the site

You're welcome. Thanks for being with us.

Jeffry Pyrax Sasela
Jeffry Pyrax Sasela
This comment was minimized by the moderator on the site

Good Tutorial...please write tutorial for creating Slider as on Moview Template which is more complicate....is it possible to be done by SP Pagebuilder?

Paul Frankowski
Paul Frankowski    Jeffry Pyrax Sasela
This comment was minimized by the moderator on the site

There was decided slider, with slideshow addon, is possible but not so easy, because it requests to add HTML with classes into slide items. So I guess, just find Scroller module it would be faster to manage, especially if you make the site for your customer.

Andrea Soc
Andrea Soc
This comment was minimized by the moderator on the site

good work! we need more How to for to make the most of the potentials of sp

Arafat Bin Sultan
Arafat Bin Sultan    Andrea Soc
This comment was minimized by the moderator on the site

Thank you Andrea for sharing your opinion. We will publish more tutorials in the coming days. Have a good time!

S
ssnobben
This comment was minimized by the moderator on the site

Thks! I

ts great to have this turorial bcs slider is one of the most important feature for websites.

There is some to catch up with Wordpress for Joomla like https://revolution.themepunch.com/ and I also use this Createiv Joomla slider in my projects http://creativeslider.demo.offlajn.com/

Cheers!

Arafat Bin Sultan
Arafat Bin Sultan    ssnobben
This comment was minimized by the moderator on the site

Thank you for the thoughtful feedback!

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.