Divi: the easiest WordPress theme to use
Divi: The best WordPress theme of all time!
With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]
The Sliders are elements that can be found on almost all the home pages of websites. Slider Smart 3 is a powerful plugin available in free and premium version.
The main features of this plugin
As a feature, it offers among others:
- An intuitive user interface
- A Drag-and-Drop Video Page Builder with Live Preview / 8
- Dynamic slides that can be created using articles and filtered by ID, or custom pages
- Slide generation (Dynamically) from a variety of social networks (Facebook, Dribbble, Flickr, Instagram, Twitter, YouTube and more).
- Customizable control sliders
- Sliding animations in the background (Ken Burns)
Free vs Premium
If all you are looking for is a basic slider, Smart Slider 3 is available on WordPress.org in the plugins directory. Even the free version is impressive and special compared to some of the other sliders.
A personal single-site license costs only $ 25 (the renewal is at 15 $).
There are some key differences between the free and premium version in terms of content and features. Here's what you'll get with the premium version:
- An unlimited generator of dynamic slides
- Advanced commands
- Expert mode
- Animations in the background
- An image viewer and editor
- 43 slider demos
Tutorial: Creating a basic slider
If you have never installed WordPress, discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog.
Once activated, the WordPress Slider Smart plugin puts its own menu at the bottom of the WordPress admin panel.
If you have never installed a WordPress plugin, find out How to install a plugin in WordPress
Click on the menu Smart Slider, the main interface opens where the first option you will see is a big green button: " Create Slider » which opens an initial configuration window as you see below.
From there you can name your slider and choose a general style. There are a lot of styles to choose from (like full width, full page, carousel, thumbnail and more), but we're going to go with a block slider based on the layout of our existing website.
Click on "Create" and Slider Smart will begin designing your basic slider model. After a few seconds you will find yourself on a page that provides all the basic details about the plugin.
The first thing to note here is the section " Publish Slider". You will need to use one of these three methods (Shortcode, Page or Post editor, or PHP code) when it comes time to publish your slide (n ° 1 below). Before we can do that, we need to create slides.
This is where the plugin really demonstrates its ease of use.
All you need to do is click on the green button " Add Image slide "(n ° 2 below) and your media library will open. From there you can select as many images as you want, or start with just one, then click " Select In the media library window.
Note: You are not limited to images when selecting your slide. You can also use video or articles as well as create empty, static, or even dynamic slides.
Smart Slider loads your slide into the interface and you're ready to save and publish or start customizing. However if I publish my slideshow it will work fine but it is not quite what I was looking for as you can see in the image below.
To correct this I went to the menu "Size" and I scrolled down to the section responsive mode. The selection was "Fullwidth", so i chose "Auto" and saved my progress. From there, I returned to the " General "and a selected center alignment.
Easily create your website with Elementor
Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]
When I talk about ease of use here, keep in mind that this whole process took less than 5 minutes for my first attempt.
Now it's time to work on the slide itself. When you hover over your slides in the viewport, you will notice that a green box appears on the upper left corner. As you might have guessed, clicking will mark this slide as the first in the sequence.
With my slider created and the background in place, it was time to add some content and transitions. To perform this step, I simply clicked on the slide I wanted to edit which leads me to the layers section.
There are a lot of individual settings in the right panel, but if you scroll down you'll find an image of your slide. You can then click on one of the items in the left panel to place them on your slide.
Creating these slides is another school. There are so many options available. To give you an idea of the flexibility of this plugin, take a look at what each element can do for your slider via:
- An item menu
- Layer settings
In each of these menus, there are multiple sub-menus. For example, when you create a text element, you can adjust font settings such as:
- Police families
- The text color
- The font size
- The height of the line
- The decoration of the text
- Letter and word spacing
- Text edit settings
- Text shadow
Each text element on your slider can have unique settings, unique animations, and its own sync settings. There is even a section for the Custom CSS.
As you add elements and animations to your slide, on the pro version you will also notice a calendar function, which allows you to control the display time of individual elements and the duration of their animations using simple slide-bars.
I was relying on this feature when adding different layers for this slide a bit later.
Adding layers & animations
With our slider in place and the background installed, it's time to introduce some different elements and layers. We'll start by adding an image of a snowman to the slide. To do this, I go to the menu "Layers" And click " Picture ". This will place a fictional image on the slide.
From there, you can click on the dummy image at the bottom left, then select and resize the image in the media library.
Once I've chosen, inserted, and resized my image, it's time to add some basic animation that can be accomplished in just a few steps.
The first is to select the tab "Animations" as seen below. Once done, we will click on the green animation button "In".
The next screen is where I can choose my animation as well as adjust the schedule. For this particular slide, I introduce a "RIGHT" animation and increase the duration to 2200ms.
Are you looking for the best WordPress themes and plugins?
Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]
Are you looking for an ftp to manage your WordPress files and folders, discover How to use FTP on Windows 10
I will also add a delay of 300ms. At the bottom of this screen there is an option to have a specific event and a trigger for that animation, such as a mouse hover or a click in the slide. I'm not going to complicate things with these settings for this example.
Then I will add some text. Following the same process as above, click on the item " add text And make your necessary adjustments. I entered the text and then went to the font settings where I changed the size and color.
I add an animation " Fade In And adjusted the calendar so that it starts right after the snowman animation.
You will also notice in this menu that there is a possibility to have specific text for tablets and devices mobile. This is a great example of the kinds of features that make this plugin so flexible and user-friendly.
In some "other" sliders, I would have been forced to use a media query and custom CSS.
Finally, I add two more layers. The first is a text layer and the second is an image layer. Again, I'm going through the exact same process as above, but I have taken a little extra into the timing of the animation. You can see the final results below.
All in all, creating this slide was a process of 20 minutes.
Note: Convert this slide to GIF will modify certain deadlines of the beautiful selected animations that I have carefully assembled.
Here is ! After trying a lot of plugins WordPress of slider, both free and premium, I can honestly say this is one of the best I have ever tested. It's not just one specific characteristic that makes it unique. It's a combination of things that show how just a great plugin it is.
It's important to note that I haven't covered every individual feature.
I'm sure if I spent a little more time working with this plugin, I would find a few things that I would like to change, and maybe even a few bugs. I think the ease of use keeps people there long enough that they can eventually take full advantage of the multitude of features offered. And believe me, there are many.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.
We offer here some premium WordPress plugins that will help you do that.
1. WooCommerce Page Builder
WooCommerce Page Builder is a very popular WordPress plugin which offers a fairly consistent number of shortcodes and which allows you to create several types of personalized pages (product, cart, checkout, "my Account") on your website WooCommerce. It is an extension of Visual Composer plugin that you must install beforehand.
Thanks to this plugin, you will have the possibility of create e-Commerce websites unique using any WordPress theme, and make you big bucks.
Originally launched in 2016, the Elementor WordPress plugin is one of the youngest page builders on this list. Despite its late start, Elementor quickly racked up over 1 active installs on WordPress.org, making it one of the Visual builders of the most popular WordPress pages.
What makes its reputation is its fluid visual interface, its different style options and other powerful features such as the complete creation of WordPress themes.
Its interface is divided into two main parts, with a third zone for certain parameters. The free version of Elementor offers 28 free widgets. The Pro version brings about 30 other widgets, a total of 58 widgets in the Pro version. The free version includes about 40 free templates, while the Pro version brings hundreds of additional templates.
3. Ninja Popups
With over 30 sales and a 000 star rating, Ninja Popups is one of the most popular WordPress plugins available on Code Canyon.
Easily create your Online Store
Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]
Besides a huge range of models for a variety of use, it also comes with several features such as: a visual builder of Popup, 10 different display positions for popups, 74 different animation effects, anti-blocking technology support to bypass ad blockers, a variety of targeting options, statistics in the dashboard, content blocking for opt-in email or sharing on social media, tons of integrations with email marketing services and more.
Find out about other recommended resources to help you build and manage your website.
- How to understand the structure of WordPress files
- How to add a navigation menu to a WordPress page
- How to configure the WordPress Slider Revolution plugin
Here is ! That's it for this tutorial and I hope it will help you easily create sliders or slides with the help of the WordPress Smart-Slider plugin. If you liked it, don't hesitate to share with your friends on your favorite social networks.
But, in the meantime, tell us about your Comments and suggestions in the dedicated section.