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]
Since the beginning of this tutorial series dedicated to the WordPress plugin slider Revolution, we learned to download and install the plugin. We have next discovered its interface and its different functionalities. Now, let's go ahead by showing you the configurations of a "Slider".
If you are a beginner and are looking for resources to get started; you will find here everything you need to get started. And if you discover blog creation read How to Create a WordPress Blog Easily: Guide & Tuto
That said, let's find out what a slider is.
What is a slider in practice?
A slider is an HTML component. Yes I know, say so, it does not advance much. So a slider is a feature that allows you to display loosely (or not) miscellaneous information. This information is grouped by " slide ", Which is an entity of a" slider "and which can consist of image, video text, links, etc.
The " slider "Therefore contains" slides (At least 1), and these slides contain multimedia elements (images, video, music, text) that can be animated or interactive (react to the user's actions).
Remark : You can translate " Sliders " in " interactive and dynamic slides ».
Slider Revolution allows us to do that, and we will start without further delay.
If you haven't created a website yet and are looking for a WordPress theme that natively integrates this powerful WordPress plugin, this list of premium WordPress themes will be perfect.
Creation of a slider: First configurations
To begin, you must click on the menu " slider Revolution On your WordPress dashboard.
Now click on the item new Slider And you will come to the slider's configuration interface.
The slider configuration interface can be intimidating, but if you step back you will better understand its functionality. You may notice that this interface consists of two sections. The first on the left consists of 5 different areas, and the second on the right consists of 6 small areas. Right above you have the toolbar, which allows you to:
- Return to the list of sliders « All Sliders »
- Access slider settings (this is the window on which you are)
- The editing interface of slides
- A backup button
- A slide editing button
- A slider preview button
- A slider removal button
- A button to return (yet) To the list of sliders
I will now explain each section in the left column.
This WordPress plugin manipulates a lot of images, which could slow down your website loading. Discover Why you need to start optimizing your WordPress blog by images
the "Content Source" Section
This section allows you to configure the source of the slider. Indeed, here you can decide to create:
- A classic slider, in which you will have to configure all the animations yourself
- A slider of articles, in which your room for maneuver is quite limited
- A slider of specific articles that you can choose
- A slider of the Flickr news feed
- A slider of the Instagram feed
- A slider on WooCommerce products
- A slider on the Twitter feed
- A slider on Facebook posts
- A slider on YouTube Publications
- And a slider on Vimeo publications
It should be noted in passing that: Slider Revolution is a powerful plugin that allows to highlight products in an online store. Discover the 10 WordPress themes to create an online store and showcase your clothes
That said, we will be content to present how to create a classic slider, because it is the most used, the most difficult to master and the most extraordinary in its effects. With practice, you will manage to make your own configurations on other sliders. In case of problems, do not hesitate to come back and leave a comment here. So leave the option " Default slider »Active.
The Slider Title & Shortcode section
You probably guessed it. This section allows you to define the title of the slider and the shortcode that will accompany it (nothing too rocket science).
The "Select a type of the slider" section
This section allows you to define the basic structure of the slider. Indeed, you have at your disposal 3 options to choose from which allow you:
- For the first option define a default slider with widths adapted to the available space and having basic elements like navigation buttons.
- For the second option, you can decide to apply a dynamic and interactive style, without a navigation button and much more imposing than the previous option. This option is called "hero scene" because here you will put more emphasis on animations and interaction.
- The last option, offers a much more classic style with a simplified scrolling of images from left to right in a variety of animations.
Remark : Whenever you choose an option, you have a section "Load a preset from this Slider TypeWhich offers you advanced variations of the type of slider you have chosen.
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]
I will not be able to explain all the variations, but you will be able to draw conclusions from the available images. For example, for the slider type " Standard You have as fourth variation " Thumbs Bottom self ", Which allows you to create a slider with thumbnails at the bottom and has an auto-scrolling animation.
The "Slide Layout" section
This section allows you to set a layout for your slider. So you can leave ' Revolution Slider »Automatically choose the widths it will apply to the slider, choose to apply the full width to the slider or use the slider in full screen mode.
Depending on which option you choose, your Slider will be different on some devices. You have below a section of configuration of the grid according to the devices (mobile, desktop, etc..). Keep in mind that configuring the grid allows you to change the internal margins of each slider.
At the very bottom of this section, you can choose to enable overflow visibility, enable radio appearance retention, and set a minimum height.
The "Customize, Build & Implement" section
This section does not actually have an option for the plugin. It offers you some quick links to important sections.
We will now continue with the second column on the right.
The General Settings section
This section offers you some settings that will apply to the slider. This is how you can:
In the "Slideshow" tab
- Disable slider on flyover
- Stop the slider after a set number of scrolls
- Show slides randomly
- Loop the slide
- Disable or stop the slider on certain device size
- The last option "Wait for revapi.revstart ()", will not be useful to you.
In the "Faults" tab
You can define:
- The selectable character of the layers
- Define the identifier of the slider (it's done automatically)
- The minimum duration between slides
- The timeout before initialization
- The transition between the slides
- The duration of the transition expressed in microseconds
- The image size
- The CSS position of the background image
- Repeating the background image, if this image is not big enough
- Activation of the option " video Muette Which allows you to define the type of animation, the positions in an XY (yes, what you learn when you have to draw math functions), and other elements.
The progress bar tab
All the options in this section are for the progress bar, which you can enable and customize.
The 1 taber slide
This section allows you to activate a first alternative slide. This will allow the " slider To load a " slide Of your choice first. Remember that " slides Are elements that can be identified.
The "Layout & Visual" section
The "Appearance" tab
This section allows you to configure the appearance of the slider. In particular, you can define to display a shadow under the slider (very handy if you choose the default slider, with a significant low margin).
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]
You can also choose to display an overlayer covered with transparent dots (this will make your slider very original, but if you want to display information that will need to be thoroughly read, you will have to go without).
Then you have the background of the slider, the internal margin and the image in the background (what you need to know here is that a background image at this level will be displayed on all your slides).
the "Spinner" tab
This tab allows you to define an animation while loading the slider, nothing more.
the "Mobile" tab
This tab allows you to manage the display of the slider on mobile. You must know that mobile traffic is important and therefore you should not neglect it. You will have the possibility to hide the slider if the dimensions of the mobile (width) is less than a figure that you have determined (in pixels).
the "Position" tab
This allows you to determine the position of the slider relative to the page. I will tend to say, in relation to the location where it is located. This option does not need to be modified, because I suppose we all want the slider to be centered.
This section allows you to activate the navigation buttons between the slides on your "slider". You have 6 navigation options:
- The arrows
- The effect of touchdown on mobile devices
- And navigating with the arrow keys
Each option, when enabled, will allow you to configure the position of the navigation elements or their operating principle (default settings are usually sufficient).
"Carousel Settings" section
This section appears only when you choose the type " Carousel Slider », And allows you to configure its options. You will be able to:
- Enable infinite scrolling
- Define a space between the slides, if you do not want the slides to touch
- Set a rounded border in pixel
- Set a high top margin (padding-top)
- Set a low top margin (padding-bottom)
- The number of elements visible by "slide"
- « strech element", Allows you to stretch the element so that it occupies the entire width of the" slider »
Security is an important element in the uptime of your website and one of the techniques that will protect you against any serious attacks or bugs is to regularly back up your blog. Discover our 5 WordPress Blog Backup Plugins
"Parallax & 3D" section
Here you can activate the option " 3D On your slider.
"Problem & Handling" section
This section allows you to manage compatibility with old devices. You can simplify the slider on " IOS4 and Internet Explorer 8 ».
Otherwise, you can choose to display an alternative image, when the browser does not support the slider.
"Google Fonts" section
This feature allows you to manage the Google Fonts you downloaded and apply it to the slider.
Once you have defined the parameters of your slider. All you have to do is click on the record button.
If the WordPress Slider Revolution plugin is not your favorite when it comes to creating sliders on WordPress websites, here we offer two alternatives that can offer similar functionality.
LayerSlider is a premium WordPress multipurpose animation plugin. It gives you the option to create slideshows and image galleries with stunning effects, beautifully animated landing pages and page blocks, or even a full website.
It is one of the alternatives capable of closely competing Slider Revolution. Its visual drag and drop editor makes it very intuitive for anyone to start using it. No technical or coding skills are required. Its ever-growing selection of importable models is an ideal starting point for new projects and covers all common use cases. They are made with care, and can be easily customized to meet all needs.
Excellent support and frequent updates ensure you get the most out of your purchase.
Go further with this powerful WordPress plugin by reading this article Layer Slider: A WordPress plugin to create a slider
Easily create your Online Store
Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]
2. WP1 Slider
WP1 Slider is a versatile WordPress plugin. It is easy to use and has all the useful features you will need to create beautiful slideshows. Most slider plugins are too technical and need a lot of time to configure them, but WP1 Slider is designed for non-programmers and offers incredible options.
Among these you will find: theupport of Kenburn effects, 6 different models of slider transitions, theupport of shortcodes, a conception of slides by drag and drop, the cfast harassment and excellent SEO, thesupport for sharing on several social networks, the iintegration of YouTube and Vimeo videos, an e layoutfully responsive, the support of WooCommerce and others.
Other recommended resources
Here are some resources we strongly recommend:
Here is ! That's all for this presentation about the configuration of the WordPress plugin slider Revolution. We will continue in a future tutorial, where we will discuss the design of slides.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But, if you have any comments or suggestions in the matter, she will be welcome in the comments section. Especially share this article on your different Social networks.