How to create a revolution slider ?

Did you know that an intuitive and ergonomic website is likely to increase conversion rates? That’s why the UX or user experience plays such an important role nowadays. For this, sliders are useful tools both for navigation, but especially for making a good first impression to visitors. Therefore, this article is going to deal with an essential element of the homepage: a Silder which is in most cases just after the navigation menu. Indeed, it is the second part, after the navigation menu, that visitors will come in contact with and its impact on their decision to continue the visit is great. You should not neglect its creation and I will guide you “step by step” during the whole process. In addition, feel free to watch the video that accompanies this article and that supports the steps described in it.

The Revolution slider

Today, I present you in my video

how to create and set up a revolution slider. I will do it as part of my website creation for my SEO agency Twaino :

What is a slider revolution?

A slider is a functionality thanks to which it is possible to display various information in a loop or not. This information can be composed of text, images, videos, links… and are grouped by “slide”.

Thus, a slider can include one or more slides whose multimedia elements can be animated or interactive to react to user actions.

Several tools are available to create a slider, but we will use “Slider Revolution” in this guide. This is actually a very powerful and popular premium WordPress plugin with over 4 million users. This plugin is integrated into the Avada theme for free when you purchase it.

The different slider options

There are several slider styles to choose from and there are mainly three. Note that the choice of one or the other depends heavily on the products or services you want to showcase on your site.

Image with text overlay

Generally, this style of slider includes visuals that combine an imposing image, a clear and concise message, and a call to action. It is the most common style since it allows you to keep the essential information that you want to highlight.

Therefore, it responds well to a website that wants to present a product or a service that is a highlight, an offer or a promotion limited in time.

Personally, I prefer this type of slider which is very economical in terms of resources and therefore allows to have a fast and efficient website.

The slideshow or carousel

Many websites opt for this style which has a certain dynamic. It is therefore very easy to think that it is the best choice to offer users a beautiful interface. Moreover, this option offers the possibility of being able to highlight several information.

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

Moreover, 89.1% of those who clicked did so on the first page only. These statistics indicate that the carousel is not the best option for increasing conversions.

I therefore recommend that you choose it only if you find it relevant to your website and to what you want to highlight. To succeed, choose three slides at most and take care to classify them according to their priority.

In addition, choose a manual scrolling of the carousel to allow users to have the choice to scroll or not your slides. But don’t expect users to be really interested in the last slides.


This option is becoming more and more popular because 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 and sophisticated product or a special offer. This is likely to attract the interest of visitors quickly.

To do this, you need to make sure you have a video sequence that fits perfectly with your sign and is of professional quality. Don’t hesitate to use a photographer who has a great command of videos or learn to do it yourself.

Best practices for creating a good Slider Revolution

Keep in mind that you need to highlight the most relevant points when designing your homepage since the attention span of the users is very limited in time. Whatever your goal is, you must use your silder to direct their attention after they land on your website.

Choose the right visuals

Almost all websites make use of images, illustrations or videos to communicate what they offer in a visual way. So you need to make sure that the visuals you are going to use for your slider design act exactly in this sense and that they are of high quality.

To do this, I suggest that 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

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

I suggest that you take the time to think about it and identify the most relevant messages for your business. Also, be aware that just as a lot of information can scare away Internet users, too little information can sometimes have the same result.

Indeed, too much free space without visuals and without strong messages does not attract the interest of visitors who may leave your website.

On the other hand, I recommend you to use reasonably the animations of your silder and not to abuse them to allow the Internet users to quickly find what they are looking for on your site.

Creating a step-by-step resolution Slider

Given the model of my website that I had the opportunity to realize, I had the opportunity to show you in my last article how to make a navigation menu. Following which, I will now create a revolution slider on the home page that will include.

To do this, we’re going to use the Slider Revolution plugin which offers a range of options for creating sliders. However, I prefer to warn you that its use is not easy and you need practice to quickly find your way around.

Moreover, I note four main steps in creating a slider:

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

Log in to your site’s ” Admin ” account

Before starting the creation of the slider, you must first connect to the administrator account of your website. To do this, simply add “…./wp-admin” to the URL of your website. On the interface that appears, fill in the boxes with your credentials and validate to access the “Dashboard” of WordPress.

Choose the location of the slider and make the configurations

1) Modify the home page

Once connected to your Dashboard, I will go to the home page of my site since this is where I want to integrate my slider

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

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

In case you have several sliders on different pages, you can directly access all of them by going to the “Slider Revolution” section on the left sidebar of the dashboard and then clicking on the option with the same name.

2) Go to the Slider configuration interface

In the “Builder” section labeled “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 marked “Param. Slider”, click on the first window on the left “All Sliders”.

Naviguer pour voir le slider

3) Duplicate the default silder

To go faster, I recommend duplicating the default slider to make the necessary changes. Not only will you save time, but you will also avoid getting lost in the different settings of the tool.

Se rendre sur All sliders

To do this, press the down arrow next to the name of your slider, mine is called “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, I enter at my level “Twaino Home Page”.

Nommer le nouveau slider

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

Cliquer sur le slider

4) The configuration interface of your slider

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

In the second position, there are different options:

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

These different options allow you to choose the type of visual you want to place on the slide. At my level, “Colored” is selected and by modifying, I notice that the background of my first slide changes color.

Naviguer pour voir le slider

In the third position, there is a projection of the slide which shows directly what it looks like with each modification. Just below, there are the settings for the different elements that will be arranged according to your needs and the timing you want.

Vitesse et enchainement evenement

By pressing the “Play” button, you will have a preview of the animations that are set up. Please note that you can change the timing configuration at will to the second, but I personally choose not to do it now because it is a very time-consuming setting to set up correctly.

5) Delete the useless slides

At my level, I have three slides when I only want to have one and to do this, I will 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 going to the green button with the save icon. I suggest you save often to validate your changes.

Confirmer la suppression

For the rest, I already have the model of my website which indicates me towards which result I wish to tend. I just have to use it to have the final result and I strongly advise you to do the same.

Sauvegarder regulierement

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

1) Change the background color

To do this, I will directly copy the color code I want to use in Adobe Illustrator

Aller chercher les bonnes couleurs

If you also have the model of your website and you do not necessarily know the color code you want to use, just ask your designer. This code is usually composed 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, depending on your desires and needs.

Attribuer la bonne couleur

This is a two color gradient at my level, so I select “Gradient Color” and double click on each arrow at the bottom of the gradient to insert my color codes.

Selectionner Gradient
Couleur du fond

2) Insert a text on the slide

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

Changer le texte

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

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

If you see the word
“”, you should know that this is a tag that allows you to go to
the line.
I now have in the black rectangle, my text that looks like this:

“Do you want to increase your organic traffic?”

Ecrire le texte adapte

But which looks like I want it to 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 that show up at the top of the settings box. To change the font of this text, enter the name of the font you want to have in the appropriate box. In my case I enter “Gudea” instead of “Source without a pro”.

Mettre la bonne police pour le titre

Also change the size to your liking, I set it to “55” for this text. I do the same to add the second text “Discover our methodology, and our advice to increase your visibility”. Except that this time, the font is “Dosis” and the size is “25”.

Réduire la taille du titre

3) Modify the buttons of the slide

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

To modify the buttons of the slide, you have to proceed in two steps:

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

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

Insérer le texte Blog bouton
Ajouter Services

To have the exact color that is on the template, copy the code of it. Then, click on the button itself and you will have just at the top of the field, several options including “Background”, located to the right of “Font”. Select it and choose the color you want 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 size of the text in the menu at the top of the “Background”, with “Gudea” as the character and “15” as the size.

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

After having given a color to the buttons, I will add a second one that will be displayed when a user passes the cursor 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 will 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 font of the text, as I did with mine.

Couleur survol solide

Then go back to the “Idle” menu which is right next to “Overview” to return to the previous configuration settings.

Changement couleurs du survol

Save the changes and when you pass over the button, you will notice that it changes color.

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

4) Change the image of your slide

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 I 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, you can go to the “Media” section of the left sidebar of the dashboard and then to “Library”.

Taille image slider revolution

You will then have the gallery of all the images on the website and all you have to do is search for the image in question and then click on it to see its details.

Création design meme taille

For mine, I have the dimensions 613 x 650 pixels.

Upload image slider revolution

Sauvegarde slider revolution

5) Associate the new slider to the right page

The previous changes will not appear directly on your homepage when you go there. To see what it looks like, you will associate the slider you just created with the homepage in question.

Se rendre sur la page du slider

First, go to the homepage and click on the “Edit Page” window with the pencil icon at the top.

Appuyer sur modifier la page

You then have 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 your theme name. I choose “Twaino Home Page (#4)” and click on the blue “Update” button in the bottom right corner to save the change.

Choisir le nouveau slider et sauvegarder

Click directly on “Preview” which is located right next to “Update” to see the rendering of the home page.

Appuyer sur preview pour voir le slider

I’ve got the changes taken care of at my level, but my slider has a lot of unnecessary space that I’m going to reduce.

Appercu du slider sur la page

Resizing the slider

1) Reduce the size of the slide

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

Aller sur paramètre pour changer la taille

You will then have different settings including:

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

The “Select a Slider Type” setting allows you to have the type of slider you want. I choose the slider that doesn’t have a “Hero Scene” arrow to have my only slide.

Choisir Hero Scène

The “Slider Layout” parameter allows you to change the size of the slide.

Sélectionner type de slider

First of all, there is the “Full Width” layout which already suits me very well. Just below is the dimensions that I will change, but I need to know at least the width of my website to do so.

Ajuster le slider layout
Changer la taille apparition

To know this width, go to your theme options.

Avada et theme option

So I click on “Avada” and then “theme options” and in “Layout” you will find “Site Width” which is the width of your website.

Avada Layout site width

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

Modifier les layouts

Then, simply paste it in the “Slider Layout” parameter and precisely in the first rectangle just below the design of the computer screen with the mention “Desktop Large”.

Finaliser les layouts

Also decrease the height of the slide, so I change the default “820 px” to “600 px”. I do the same with the screen on the right marked “Laptop”, taking care to paste the width in the appropriate box and to write the “600 px” in the second box.

Verifier le resultat du layout 1

Note that you can change these dimensions at any time as you wish. Then save your changes to validate it and once on the home page, I see that the new dimensions have been taken into account.

Vérifier le résultat du layout 2

However, you must now refocus the texts and the image of the slide.

Vérifier layout pour telephone

2) Refocus the contents of your silder

Go to the “Slider Revolution” section on the sidebar of the dashboard and then to the “Slide Editor” window. At this point, simply click on each element and pull them up.

Se rendre sur slider revolution

Save this modification and go to the home page to appreciate the result.

Modifier le positionnement image ordinateur

I advise you to make several ”round trips” if necessary to have the right adjustment.

Modifier le positionnement éléments ordinateur

Note that this is the display on a large screen and that the presentation may be different from one medium to another.

Vérifier le resultat du slider revolution

Optimizing the slider 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 of “Slider Revolution” and once in the configuration field, you will find in the upper right corner, the three icons symbolizing the desktop computer, the laptop and the 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 texts are cut.

1- Optimize the display on laptop

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 size of the text if you wish.

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

Modifier le placement élément ordinateur portable

2- Optimize the display on cell phones

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

Regarder le résultat sur téléphone

I notice at my level that there are two lines that frame my slider.

Changer emplacement objet slider revolution

Indeed, they delimit the display area and any element that is outside does not finally 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 make the buttons a little bit bigger and to do that, click on each one to get the different options that are right at the top of the configuration field.

Ajustement taille police slider revolution

So change the size of the text after you stretch the button. Also remember to center the text by clicking the arrow on the blue “Style” button in the top left 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 re-center, taking care to decrease its size a bit for a good fit.

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

Check the changes one last time

This last step is to check the final display of your website on all media to see how it looks. For this, feel free to also use your smartphone as well as your tablet and any other type of media to perform the check.

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

Cliquer sur le bouton pour inserer un url

I will have the opportunity to show you in another article how to associate the buttons of the slider with specific URLs or pages to facilitate navigation.

Même fenetre nouvelle fenetre


After creating the navigation menu of a website, the next step is usually to create a slider for your homepage. And as I mentioned, you have several options in terms of visuals including still image, slideshow and video. However, you owe it to yourself to choose a slider that combines a good design with an extremely fast loading speed. For the simple reason that the slider is one of the first elements that will be presented to visitors and that it has a huge impact on their decision to continue or not their navigation on your website. Therefore, I suggest you to use Slider Revolution which is a powerful and efficient tool, but it can be quite complex to use and time consuming. I hope that the steps presented above will help you a lot so that you become much faster with the tool.

See you soon for the rest!

Leave a comment