How to create a revolution slider ?

Did you know that an intuitive, ergonomic website is likely to increase conversion rates? That’s why UX, or user experience, plays such an important role these days. To this end, sliders are useful tools both for navigation and, above all, for making a good first impression on visitors.

Consequently, this article will deal with an essential element of the home page: a Silder, which in most cases is found just after the navigation menu. In fact, it’s the second part after the navigation menu that visitors will come into contact with, and its impact on their decision to continue the visit is great.

So don’t neglect its creation, and I’ll guide you “step by step” through the entire process. In addition, don’t hesitate to consult the video accompanying this article, which supports the steps described here.

The Revolution slider

Today’s video shows you how to create and set up a Revolution slider. I’m going to do it as part of my website creation for my SEO agency Twaino :

What is a slider revolution?

A slider is a feature that allows you to display a variety of information in a loop or not. This information can include text, images, videos, links, etc., and is grouped together in “slides”.

In this way, a slider can comprise a single slide or several slides, whose multimedia elements can be animated or interactive to react to user actions.

There are several tools available for creating a slider, but in this guide we’ll be using “Slider Revolution”. This is actually a very powerful and popular premium WordPress plugin with over 4 million users. This plugin is integrated free of charge into the Avada theme when you purchase it.

WordPress slider options

With WordPress Slider, you can choose between several slider styles, of which there are mainly three. Note that the choice of one or the other strongly depends on the products or services you wish to showcase on your site.

Image with superimposed text

Generally speaking, this style of slider revolution features visuals combining an imposing image, a clear, concise message and a call to action. It’s the most popular slider style, as it retains the essence of the information you wish to highlight.

As a result, it’s well suited to a website that wants to present a flagship product or service, or that’s running a limited-time offer or promotion.

Personally, I prefer this type of slider, as it’s very economical in terms of resources, making for a fast, efficient website.

Slideshow or carousel

Many WordPress sites opt for this style of revolution slider, which has a certain dynamism to it. So it’s easy to see why it’s the best choice for providing users with a beautiful interface. What’s more, this option offers the possibility of showcasing a wide range of information.

On the other hand, the figures show that it’s not the ideal solution, since barely 1% of users click on slideshows or carousels. This observation was made after a study on the ND University site, based on 3,755,297 visits to the home page.

In fact, 89.1% of those who clicked did so on the first page only. These statistics show that the carousel is not the best option to display on your web pages if you hope to increase conversions.

I therefore recommend that you only choose a carousel if you feel it’s relevant to your site and to what you want to promote. To get it right, choose a maximum of three slides and rank them according to priority.

In addition, opt for manual scrolling of the carousel to give users the choice of whether or not to scroll through your slides. But don’t expect users to be really interested in the latest slides.


This slider revolution option is becoming more and more popular, since unlike slideshows, videos create a very strong impact immediately, and have a much higher conversion rate. This is why more and more companies are choosing this option to highlight an innovative, sophisticated product or special offer. It’s also likely to attract visitors’ interest quickly.

To do this, you need to ensure that your video footage is perfectly aligned with your brand and is of professional quality. Don’t hesitate to call on a photographer who has mastered the art of video, or learn to do it yourself.

Best practices for creating a good Slider Revolution

Keep in mind that you need to emphasize the most relevant points when designing your homepage, since web users’ attention spans are very limited. Whatever your objective, you need to use your silder to direct their attention after they’ve landed on your site.

Choosing the right visuals

Almost all websites use images, illustrations or videos to communicate what they offer in a visual way. So you need to make sure that the visuals you use to design your slider revolution do exactly that, and that they’re of high quality.

To do this, I suggest you don’t limit yourself to the beauty of your visuals, but choose them because they represent what you want visitors to understand at a glance when they arrive on your website.

Limit information and animations with your revolution slider

Don’t confuse visitors by overloading your slider with lots of information. If they’re confused, they may quickly leave your website. So go for a clear, precise message with a button that calls for action.

I suggest you take the time to think things through and identify the messages that are most relevant to your business. You should also be aware that, just as a lot of information can drive people away, too little information can sometimes have the same effect.

In fact, too much free space without visuals and a strong message won’t attract visitors’ interest, and they may leave your website.

On the other hand, I recommend that you make reasonable use of your silder’s animations on your web pages, and not overuse them, so that visitors can quickly find what they’re looking for on your site.

Creating a step-by-step resolution Slider

Given the mock-up of my WordPress site, I had the opportunity to show you in my last article how to create a navigation menu on WordPress. Following on from that, I’m now going to set up a revolution slider on the home page, which doesn’t have one.

To do this, we’re going to use the Slider Revolution plugin. This slider is one of many plugins that offer a wide range of options for creating sliders.

To install it, simply go to the plugins area and download the slider plugin like any other plugin. Of course, you’ll get several plugins after your search.

However, I’d like to warn you that it’s not easy to use, and you’ll need some practice to quickly find your way around.


There are four main steps in creating a slider:

  • Choosing the slider location and making the configurations;
  • Setting up the visuals: background color, text, buttons, images;
  • Resizing the slider;
  • Optimizing the slider for different media.

Log in to your WordPress “Admin” account

Before you can start creating your slider, you first need to log in to your WordPress site’s admin account. To do this, simply add “…./wp-admin” to the URL of your site. On the interface that appears, fill in the boxes with your credentials and validate to access the WordPress Dashboard.

Choose the slider location and make the configurations

1) Modify the home page

Once I’ve logged into the Dashboard, I’ll go to the home page of my site, as this is where I want to integrate my slider.

Then click on the “Modify Page” window with the pencil icon at the top, just after “Create”.

On the interface that appears, in the “Builder” section of “Fusion Builder”, you’ll see “Slider Revolution”, which will allow you to insert your Slider. Note that you can add Sliders to some or all of your pages, depending on your needs.

If you have several sliders on different pages, you can access all of them directly by going to “Slider Revolution” on the left-hand sidebar of the dashboad and clicking on the option with the same name.

2) Go to the Slider configuration interface

In the “Builder” section labelled “Slider Revolution”, click on the blue “Edit Slider” button to enter the slider configuration area.

Parametre slider revolution

The page that appears offers the options of the window labelled “Param. Slider”, click on the first window on the left, “All Sliders”.

Naviguer pour voir le slider

3) Duplicate the default silder

To speed things up, I recommend duplicating the default slider and making any necessary changes. Not only will you save time, but you’ll also avoid getting lost in the tool’s various settings.

Se rendre sur All sliders

To do this, press the down arrow next to the name of your slider (mine is “1# avada-seo-hero”).

Then select the “Duplicate” option to have a copy of the slider.

Dupliquer le slider

Enter the title of the duplicated slider in the dialog box that appears, and I’ll enter “Twaino Home Page”.

Nommer le nouveau slider

Then press the “Duplicate” button to confirm the duplication.

Cliquer sur le slider

4) The slider configuration interface

Once the duplication is complete, click on the copy you’ve just made to proceed with the modifications. On the configuration interface, you’ll see in first position the number of slides – I have three at my level.

In the second position, there are various options:

  • Background images / Main ;
  • External URL ;
  • Transparent ;
  • Colored ;
  • YouTube Video ;
  • Vimeo Video ;
  • HTML5 Video.

These different options allow you to choose the type of visual you wish to place in the slide. At my level, “Colored” is selected, and as I modify it, I notice that the background of my first slide changes color.

Naviguer pour voir le slider

In third position, we find a projection of the slider which shows directly what it looks like with each modification. Right at the bottom are the settings for the various elements, which will be arranged according to your needs and timing.

Vitesse et enchainement evenement

By pressing the “Play” button, you’ll get a preview of the animations you’ve set up. Please note that you can change the timing settings at will, down to the second, but I personally choose not to do this right now, as it’s a time-consuming process to set up correctly.

5) Delete unnecessary slides

At my level, I have three slides when I only want one, so I’m going to delete the last two.

Slider 2 sans changement

To do this, go to the slides in question and drag down to choose “Delete” from the drop-down menu.

Effacer les sliders non utiles

Then you can save by clicking on the green button with the save icon. I suggest that you save often to validate your changes.

Confirmer la suppression

As for the next step, I already have a site mock-up that shows me what I’m aiming for. All I have to do is use it to get the final rendering, and I urge you to do the same. You can also entrust the creation to the designers for a professional marquelle.

Sauvegarder regulierement

Setting up the visuals: background color, text, buttons, image

1) Change background color

To do this, I’ll copy the color code I want to use directly into Adobe Illustrator.

Aller chercher les bonnes couleurs

If you also have a mock-up of your site and don’t necessarily know the color code you want to use, just ask your graphic designer. This code is generally made up of 6 characters, including numbers and letters.

Appuyer sur colored pour le fond

Then click on the colored area of the “Colored” option I mentioned in point 4. At this point, you can choose a solid color or a gradient color, according to your wishes and needs.

Attribuer la bonne couleur

It’s a two-color gradient at my level, so I select “Gradient Color” and double-click each arrow at the bottom of the gradient to insert my color codes.

Selectionner Gradient
Couleur du fond

2) Insert text on the slide

Next, I want to insert the text “Would you like to increase your organic traffic?” on the slide. To do this, click on my default text “We Provide The Best Seo Services”.

Changer le texte

You’ll notice that the same test appears on a black rectangle at the top and that the text on the slide is framed, showing that I can modify it.

Copy your text and paste it in the black rectangle in place of the other text. You’ll notice that your text now appears on the slide.

If you see “
if you see the word ” “, this is a line break tag. So, in the black rectangle, my text looks like this:

“Do you want to increase your organic traffic?

Ecrire le texte adapte

But it’s presented as I want it to be on the slide:

“Do you want to increase

your organic traffic?

When you click on the text, you’ll see that there are text options at the top of the configuration field. To change the font of this text, enter the name of the font you want in the appropriate box. In my case, I’ll enter “Gudea” instead of “Source sans pro”.

Mettre la bonne police pour le titre

You can also change the font size to suit your needs. I set it to “55” for this text. I do the same to add the second text “Discover our methodology, and our tips for increasing your visibility”. Except this time, the font is “Dosis” and the size “25”.

Réduire la taille du titre

3) Modify the slide buttons

3-1) Modify the text and give the button its first color

To modify the slide buttons, proceed in two steps:

  • Replace the text;
  • Change the button color.
Changer texte bouton

For the first step, click on the button text. You’ll find the black rectangle with the default text. I’ll change it by writing “BLOG” instead, and “SERVICES” for the second button.

Insérer le texte Blog bouton
Ajouter Services

To get the exact color that’s on the template, copy the code from it. Next, click on the button itself and you’ll have several options right at the top of the field, including “Background”, located to the right of “Font”. Select it and choose the desired color or paste the code to have precisely a certain color.

Sélection couleur bouton
Choix de la couleur
Modifier couleur bouton

I also take the opportunity to change the font and text size in the menu at the top of “Background”, with “Gudea” as the character and “15” as the size.

Choix de la police bouton
3-2) Give the slide buttons a second interactive color

Once I’ve given the buttons a color, I’ll add a second color that will be displayed when a visitor hovers over the button. To do this, go to “Overview”, which is on the same line as “Background” and completely to the right.

Changement partie Survol bouton

You’ll then have the “Overview” menu, which also includes “Font”, “Background” and other options. Then click on “Background” and “Color” to choose the type of color you want. You can also change the text font, as I did with mine.

Couleur survol solide

Then return to the “Idle” menu next to “Overview” to return to the previous configuration settings.

Changement couleurs du survol

Save your changes, and when you pass over the button, you’ll see that it does change color.

Next, I do exactly the same for the second “SERVICES” button.

4) Change your slide image

To change the image, simply double-click on the default image to access the “Media Library”.

Cliquer sur image du slider
Vérifier taille image sur bobliotheque

Then press “Upload files”, which allows you to upload your image with the “Select files” option.

Déposer image slider revolution

So I import my image and take care to name it.

Selection image slider revolution

Note that beforehand, I looked at the size of the default image to adapt the size of mine. To do this, go to “Media” on the left-hand sidebar of the dashboard and then to “Library”.

Taille image slider revolution

All you have to do is search for the image in question and click on it to see its details.

Création design meme taille

Mine is 613 x 650 pixels.

Upload image slider revolution

Sauvegarde slider revolution

5) Link the new slider to the right page

The previous modifications will not appear directly on your home page when you go there. To see what it looks like, you’ll need to associate the slider you’ve just created with the home page in question.

Se rendre sur la page du slider

First, go to the home page, then click on the “Edit Page” window with the pencil icon at the top.

Appuyer sur modifier la page

Next, go to the “Fusion Builder” settings and scroll down to the “Sliders” menu under “Fusion Slider Options”

Aller sur select slider revolution

Click on the “Select Slider Revolution Slider” drop-down bar and select the name of your theme. I choose “Twaino Home Page (#4)” and click on the blue “Update” button in the bottom right-hand corner to save the change.

Choisir le nouveau slider et sauvegarder

Click directly on “Preview” next to “Update” to see how the home page looks.

Appuyer sur preview pour voir le slider

At my level, the changes have been taken into account, but my slider contains a lot of unnecessary space, which I’m going to reduce.

Appercu du slider sur la page

Resizing the slider

1) Reduce slide size

Go to “Slider Revolution” on the dashboard sidebar and then to the “Param. Slider” window.

Aller sur paramètre pour changer la taille

You’ll then see a number of settings, including :

  • Centent Source ;
  • Slider Title & ShortCode;
  • Select a Slider type;
  • Slider Layout ;
  • Customize, Buil & Implement;
Content source rien a modifier

The “Select Slider Type” parameter lets you select the type of slider you want. I chose the slider without the “Hero Scene” arrow for my single slide.

Choisir Hero Scène

The “Slider Layout” parameter lets you modify the size of the slide.

Sélectionner type de slider

First, there’s the “Full Width” layout, which already suits me fine. Right at the bottom are the dimensions I’m going to modify, but I need to know at least the width of my website to do so.

Ajuster le slider layout
Changer la taille apparition

To find out, go to your theme options.

Avada et theme option

I click on “Avada”, then on “theme options” and in “Layout”, you’ll find “Site Width”, which represents the width of your website.

Avada Layout site width

Copy the dimension you find just in front of the “Site Width” option, mine is “1260 px”.

Modifier les layouts

Then simply paste it into the “Slider Layout” parameter, precisely in the first rectangle just below the computer screen design marked “Desktop Large”.

Finaliser les layouts

Decrease the slide height too, so I change the default “820 px” to “600 px”. I do the same with the screen on the right marked “Portable”, taking care to paste the width in the appropriate box and enter “600 px” in the second box.

Verifier le resultat du layout 1

Note that you can change these dimensions at any time. Save your changes to validate them, and once you’re back on the home page, I can see that the new dimensions have been taken into account.

Vérifier le résultat du layout 2

However, you now need to refocus the text and the slide image.

Vérifier layout pour telephone

2) Recenter your silder’s content

Go to “Slider Revolution” on the sidebar of the dashboard and then to the “Slide Editor” window. Here, simply click on each element and move it up.

Se rendre sur slider revolution

Save your changes and go back to the home page to see the results.

Modifier le positionnement image ordinateur

I advise you to go back and forth several times if necessary to get the right fit.

Modifier le positionnement éléments ordinateur

Please note that we’re talking here about large-screen display, and that the presentation may differ from one medium to another.

Vérifier le resultat du slider revolution

Optimizing sliders for different media

Sliders are not displayed in the same way on computers as on laptops or tablets. To do this, go to the “Slide Editor” window in “Slider Revolution” and once in the configuration field, you’ll find three icons in the top right-hand corner, symbolizing desktop, laptop and cell phone.

Click on each of these icons to see how your website looks on these different media. In my case, the first one presents my website well, unlike the last two icons where the content is not yet centered and some parts of the text are cut off.

1- Optimize display on laptops

To recenter the content of your slide on the laptop, click on the icon in question and move up each element as in the previous step.

Faire le parametrage correctement pour ordinaeur portable

You can also change the text size if you wish.

Note, however, that these modifications do not affect other display types at all.

Modifier le placement élément ordinateur portable

2- Optimize cell phone display

For cell phones, click on the corresponding icon to proceed with optimization.

Regarder le résultat sur téléphone

At my level, I notice two lines framing my slider.

Changer emplacement objet slider revolution

In effect, they delimit the display area, and any element outside them does not ultimately appear on the support.

To do this, I reduce the size of my overflowing text and increase the size of my second text. I recommend that you enlarge the buttons a little more, and to do so, click on each of them to access the various options just above the configuration field.

Ajustement taille police slider revolution

Change the text size after stretching the button. Remember also to center the text by clicking on the arrow on the blue “Style” button in the top left-hand corner and then on the “Space” window.

Centrer texte bouton slider

Then press the “Inherit” drop-down menu and choose “Center”.

Vérifier slider revolution sur telephone

On the other hand, there’s also the image that I’m going to recenter, taking care to reduce its size a little for a good fit.

I save the changes and, by minimizing my browser to simulate the display of my site on a cell phone, I can see that everything is fine.

Final check of modifications

This final step involves checking the final display of your website on all media to see how it looks. For this, don’t hesitate to use your smartphone as well as your tablet and any other type of support to carry out the check.

And that’s it! We’ve just finished creating the home page slider.

Cliquer sur le bouton pour inserer un url

In another article, I’ll show you how to associate the slider buttons with specific URLs or pages to facilitate navigation.

Même fenetre nouvelle fenetre


After creating a website’s navigation menu, the next step is usually to create a slider for your home page. And as I mentioned, you have several options in terms of visuals, including still images, slideshows and videos. However, you owe it to yourself to choose a slider that combines good design with extremely fast loading speed. For the simple reason that the slider is one of the first elements to be presented to visitors, and it has a huge impact on their decision whether or not to continue browsing your website. That’s why I’m suggesting you use Slider Revolution, a powerful and effective tool, but one that can be rather complex and time-consuming to set up. I hope that the steps outlined above will help you enormously to get up to speed with the tool.

See you soon!

Leave a comment