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
Glossary
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.
Video
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 Twaino.com 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.
The page that appears offers the options of the window marked “Param. Slider”, click on the first window on the left “All Sliders”.
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.
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.
Enter the title of the duplicated slider in the dialog box that appears, I enter at my level “Twaino Home Page”.
Then press the “Duplicate” button to validate the duplication.
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.
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.
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.
To do this, go to the slides in question and drag down to choose “Delete” from the drop-down menu.
Then you can save by going to the green button with the save icon. I suggest you save often to validate your changes.
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.
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
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.
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.
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.
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”.
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 tothe line.
I now have in the black rectangle, my text that looks like this:
“Do you want to increase your organic traffic?”
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”.
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”.
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.
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”.
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.
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.
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.
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.
Then go back to the “Idle” menu which is right next to “Overview” to return to the previous configuration settings.
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”.
Then press “Upload Files” which allows you to upload your image with the “Select Files” option.
So I import my image and I take care to name it.
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”.
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.
For mine, I have the dimensions 613 x 650 pixels.
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.
First, go to the homepage and click on the “Edit Page” window with the pencil icon at the top.
You then have the Fusion Builder settings and scroll down to the “Sliders” menu under “Fusion Slider Options”
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.
Click directly on “Preview” which is located right next to “Update” to see the rendering of the home page.
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.
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.
You will then have different settings including:
- Centent Source;
- Slider Title & ShortCode;
- Select a Slider Type;
- Slider Layout ;
- Customize, Buil & Implement;
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.
The “Slider Layout” parameter allows you to change the size of the slide.
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.
To know this width, go to your theme options.
So I click on “Avada” and then “theme options” and in “Layout” you will find “Site Width” which is the width of your website.
Copy the dimension that you find in front of the “Site Width” option, mine is “1260 px”.
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”.
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.
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.
However, you must now refocus the texts and the image of the slide.
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.
Save this modification and go to the home page to appreciate the result.
I advise you to make several ”round trips” if necessary to have the right adjustment.
Note that this is the display on a large screen and that the presentation may be different from one medium to another.
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.
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.
2- Optimize the display on cell phones
For the cell phone, click on the corresponding icon to proceed with the optimization.
I notice at my level that there are two lines that frame my slider.
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.
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.
Then press the “Inherit” drop-down menu and choose “Center”.
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.
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.
Conclusion
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!
