As more and more websites are appearing each day, standing out from the rest is key. One way to make your website attractive to the audience is by adding sliders. Sliders are basically slideshows highlighting the key features or products or even announcements on your website. Every website now has a slider and little animation gives an extra kick. You can add various attractive images to run on the website.
Here we will be talking to add, setup, and apply sliders for your WordPress website.
Watch the video–
The #1 problem with sliders is that they could slow down your website & Many are not responsive on mobile. And this will affect the user interface. So choosing the right platform is key in every WordPress site.
One of the best tools to add sliders for your WooCommerce or any WordPress website is the Smart slider 3 plugin.
Smart Slider 3
Smart Slider 3 is an advanced powerful yet simple to use image slider plugin. It has both a free and premium version with added functionalities. You can do many with even the free version. Its features include a great user interface, Drag and drop builder, Free sample templates, Customizable autoplay for animation, added SEO benefits, and more. You can perfectly customize every single section of the slider and make it even more very responsive to any kind of device.
Installation and Setup
To install the plugin, Go to your WordPress website dashboard. You will be able to see Plugin → Add New and search for Smart Slider 3.
You can see the ratings and number of active installs which is pretty good for a plugin. Click on “Install Now” and “Activate” once done. You will be able to see the Smart Slider option on the dashboard.
Create a project
Clicking the smart slider option from the dashboard will take you to a welcome page. Proceed with Go To Dashboard. On the New page, Choose New project in the green label.
You'll be taken to a new page asking ‘What do you want to create today”. You will be able to see Create new project and Start with a Template
Start with template
From here you will be able to add a slider from a set of sample slides and customize it according to your will. Indeed you'll have access to twelve free sliders if you have the free edition. You'll get access to a library of 100 + pre-built sliders if you have the pro edition, which will provide you with a great starting point.
You can choose one of your choices and import it. Once imported you can customize with text animation layers etc. This is for absolute beginners and is easy to do.
Create new project
When starting from scratch and creating a unique design you can go with creating a new project.
You will be asked to enter basic details about the slider you are planning to add.
Project Type, where you can choose either you want to add a block of an image or create a slider with multiple images.
Slider Type to choose the type of slider, either it's a simple slider, or image carousel, or showcase which is supported in the pro-version.
In the Setting, you are asked to assign a name for your project to set the width and height of the slider in your website.
In Layout, you get to add anyone from 3 option- Boxed, Full width, or full page(pro)
Once you have chosen the appropriate for your design, Click on to Create.
You will be taken to next step to add the slides and various number of settings.
Through the green add slide button, you will be shown different options on what kind of slide you want.
Image– This is the same alternative as those seen before.
Blank– A slide with text only
Post– Slide with one of your articles or pages in WordPress
Static Overlay – A very unique type of slide that will appear over all other slides at the end. If you want to have a picture slider with your logo over it, it is great.
Dynamic Slides-Use for the slider that automatically produces its content. For instance, the recent posts slider to where you can upload images.
Select the suitable, Here we are adding an image and going to upload one.
Once you uploaded, the media library will be live.
As you select image, There will be an attachment details box appearing. Here you can enter details of the images.
The will help you boost your SEO for the website. Be sure to add few keywords that will help you rank your website. The Alt Text, Title, Caption and Description can be potential. The details you enter here will not be able to see for your visitors. The search engine sort by these backend text. So be sure to add these for each image.
Once done, click Select to complete the importing of images for your slider.
Each image you selected can be further edited by clicking on the image.
You will be able to see numerous settings in the image dashboard. Will take you through few and Explain how it works.
General– Consists of PHP and short code for publishing the slider, Other setting like editing the name, thumbnail and alignment of the slide.
Size– You can adjust the size including height and width, evenly for desktop tablet and mobile.
Also other size setting to fix breakpoints, Layout overflow etc, are also set from here.
Controls- To customize the navigations and control options.
You can choose from a variety of options to set arrow, button, bullet, change the size, colour everything is available in this section.
The sections here let you add bullets and thumbnails to your slider.
Animations– In smart slider 3 you can add animation effect into your slider. Moreover, this feature can enable high user experience without slowing down your website. There are 6 different animation types supported in the free version. you can adjust the speed and duration of the animation.
Autoplay– Here you can enable the autoplay instead of manual swiping. You can set the slide duration and other options like stop on media and resume on media options.
You can customize the button shape, colour, and style. The look of the slide can be managed overall through this slider plugin. Positions can be set from here and hide whichever part you like.
Likewise, the settings include optimize, loading slides, developer options for higher management. Over all a great tool to set a beautiful slider.
Publishing a slider-
Once you are set with design and images, you can publish it.
You can add a new page and place the slider on any particular page. Or else add the slider on any particular page. Placing the slider in the home page is great. There are 3 options available in the smart slider to publish the slider.
You can navigate to the page you want to add the slider on your website, then click on the edit page.
If you are using any of the below editors-
Gutenberg, Classic editor, Elementor, Divi, beaver builder, visual composer, WPBakery Page builder then you will be able to add it through the block.
You can see a smart slider in the add block part. You can just select the designed slider and place it over the correct position.On updating, you will be able to see the slider applied to your website.
If you don't have any of this editor or just the normal WordPress editor then you can add shortcode. In the general setting, you can copy the shortcode and paste it in the correct space.
Once updated the slider should be visible on your website.
After trying out a few sliders, Smart slider is so far the best we have come across to. Most free plugins for sliders for WordPress are clunky to use and frustrating.
Smart Slider 3 is built with a user interface at the forefront, meaning that it takes little time at all to get the hang of how it functions so that you can rapidly and efficiently put together a slider. Smart Slider 3 manages to nail it straight out of the start, though. I hope the ease of use can hold users alive long enough that the myriad of features available will finally be completely taken advantage of.
Hope this article help you. Drop in your queries and requests.
Read More: How to add a variable product in WooCommerce