Consumers are always looking for tips on which digital and physical products to buy. That’s why they commonly seek out trusted experts and product review sites to provide them with honest breakdowns and comparisons.
The only problem is that these product comparison pages are often full of huge walls of text explaining how the products and their features differ. While there’s not much you can do to improve the reviews themselves, you can improve the appearance of key elements on the page — like the product comparison table as well as the list of winners or featured products.
In this tutorial, we’re going to focus specifically on the list of winners section. We’ll demonstrate how to use the Travel Agency Card Slider template to create this section for the home page and individual review pages.
Table of Contents:
- Step 1: Remove the global layers
- Step 2: Customize the background colors
- Step 3: Customize the background radial shapes
- Step 4: Edit the product comparison descriptions
- Step 5: Update the product cards
- Step 6: Add new navigation cues
How to design an attractive winners list for product comparison pages
Many product comparison pages follow a similar formula. It starts with an introduction of the products to be compared. Then a list of winning products appears — sometimes in a simple table format, sometimes in a plain text or bullet format. The reviews then follow.
In this tutorial, we’re going to start with this travel post slider template:
And demonstrate how to repurpose it for the winners list.
You can use just one slide to create the winners section for each page. Or design a slider for the home page that promotes the most popular product comparison posts and corresponding winners.
If you need an introduction to Slider Revolution before you begin the tutorial, start here:
Step 1: Remove the global layers
Since we’re turning this template into a section on either a product comparison page or home page, we don’t need any of the global layers. To locate them, go to “Slides” in the toolbar and select “Global Layers”.
There are two rows of global layers. The first Copy Row-3 contains the header elements that run along the top of the section — the logo, tagline, and navigation links. The second Copy Row-3 contains the social media icons, tagline, and navigational elements that sit along the bottom.
The quickest way to delete them all is to hold down the Ctrl or command key, select both of the row names, and then hit Backspace or delete. This will remove all of the global layers.
Learn more:
Step 2: Customize the background colors
Go back to “Slides” and open up the first slide.
There are two areas where you’ll need to edit the background. The first is under “Module Options” and “Layout”. The current BG Color is a dark blue color. It’s what appears when the module initially loads on someone’s screen.
To change it, click on the color block next to BG Color. Then set a new background color:
Pro tip: Either choose a color from your branding or use one that seamlessly blends with the slide’s background colors.
You may also want to customize the slide background. It can be hard to tell because of the colorful radial shapes in the design, but the slide’s background is a light grey gradient.
To edit the slide background, go to “Slide Options” and “Background”. Click on the color block next to BG Color to edit it just as you did the module background.
Be sure to use a lighter color or gradient so that the dark text and colorful images stand out well against it. If you have lighter imagery and white text, however, you can go darker with the background.
Note: If you’re designing a promotional slider for the home page, repeat this process for all three slides. If you’re designing a product winners section for the comparison page, delete the extra slides by going to “Slides” in the toolbar and clicking the trash can icon next to any two of the slides.
Learn more:
Step 3: Customize the background radial shapes
There are two blurred radial shapes in each slide: Radial Blur 1 and Radial Blur 2. They sit behind the cards, serving as a colorful spotlight.
Note: The radials also move as the user’s mouse moves over them. It’s not a big movement, but if they spend enough time scanning over the product cards, they’ll notice it. If you want to make adjustments to the hover effect, the settings are under “Layer Options” and “Mouse Trap”.
To customize the colors of these shapes, select them from the timeline editor. Then go to “Layer Options” and “Content”. Click on the gradient block next to BG Color to modify the colors.
Typically, we’d suggest using preset colors and gradients in the color selection modal for faster customization. However, to maintain the blurry look of the radial shapes, it’s better if you only update the colors in the gradient.
Click on the bottom tabs along the color bar. Then enter the HEX code under Color that you want to replace each with.
Repeat this process for however many slides you have. Save your changes between slides.
Learn more:
Step 4: Edit the product comparison descriptions
You can use the text layers on the left side of the slide to describe the products being compared on the right. There will be three layers to edit:
- Headline
- Description
- Cta Button
The Headline and Description are text layers. To customize them, go to “Layer Options”. Modify what they say under “Content”. Then use “Style” to make changes to font, color, weight, and more.
Whenever you modify the text in your slides, make sure to apply the same stylistic changes throughout.
The Cta Button layer also needs to be edited in this step. Use the “Content” and “Style” settings to modify the text in the button.
To update the way the button looks:
- Use “Style” to edit the background color and/or border.
- Use “Adv Style” to modify the Box Shadow.
- Use “Hover” to update how the button looks when users interact with it.
Pro tip: If you plan to use the same colors for the button from page to page (or slide to slide), save it as a Preset at the bottom of the color selection dialogue. This way, you can apply the same color palette in just one click.
One last thing to edit is the button link. Go to “Layer Options” and “Actions” to program a custom link.
If you’re putting this slider on the home page to promote various product comparisons and reviews, modify the Simple Link that’s in there now. Enter the link under Link URL for the specific page you want to direct visitors to.
If you’re putting this section at the top of an individual product comparison page, click the trash can icon next to the Simple Link on the left. Then select Scroll below Slider on the right.
This will take visitors down to the reviews section beneath the product comparison winners section.
Learn more:
- Editing Text from Template Modules
- Adding and Configuring Button Layers
- Editing Links in Template Modules
Step 5: Update the product cards
There are various elements that will need updating for Card 1, Card 2, and Card 3. There are two text layers:
- Place is the city/town name in the current slides
- Country is the country name next to the geolocation symbol
Update those two layers the same way you did the text layers in Step 4. There’s limited space in these cards, so be sure to preview your work on the frontend to ensure your new text doesn’t run over the card’s borders.
There are three graphical elements in the card designs as well.
You can leave the Gradient layer as it is. This is a dark, semi-transparent layer that makes the text at the bottom easier to read.
The Image is the main card graphic. To update the images, select them from the timeline editor or canvas one at a time. Then go to “Layer Options” and “Content” to upload a replacement image to the background.
Pro tip: When choosing images for this space, size them around 800px by 1200px. Also, try to get the main subject (i.e. the product) as close to the center as possible.
You can use the Position tool beneath the BG Image uploader to move the graphic around if your product isn’t perfectly centered. That said, the cards appear larger on the frontend, so check the preview first to see if further adjustments are even needed.
The last element to customize in the cards is called Map Icon.
This red icon sits to the left of the Country text layer and serves as a visual indicator of what type of information/data is there. For products, what you put here depends on how you’re showcasing them.
For instance, if you’re using the cards to promote the top 3 products, you could do away with the Country layer. Then turn the Map Icon layer into a star rating.
Or if you’re doing as we are and giving each product a superlative and award, you could swap out the Map Icon for a trophy icon.
To make changes to this icon, select it from the timeline editor or canvas. Then go to “Layer Options” and “Content”.
In the text editor, you’ll find the string that generates the existing icon. Delete it. Then click on Icon above the editor box. Do a search for the icon you want to use and click on it.
To change the size or color of the icons, use “Style” settings.
Pro tip: If you’re using this template to create a slider for the home page, the buttons should be the only clickable elements in the design. However, if you’re using it to create a winners list for the top of product comparison or reviews pages, you might want to add links to the cards. This way, readers can click the main button to start reading the full review or they can take a shortcut to specific product reviews via the corresponding cards.
To create those links, select the Image layer and do the same thing you did to create “Actions” for the buttons. You’ll need to program the links as Scroll To ID and then add an ID attribute to the area on the page where those specific reviews begin.
Learn more:
Step 6: Add new navigation cues
In Step 1, we removed the arrow and slide counter navigation elements from Global Layers. If you’re designing a static section to appear at the top of product comparison pages, then you can skip this final step as no navigation is needed.
If you’re designing a promotional slider for your home page, however, you’ll need to add new navigation controls for your users.
To do this, go to “Navigation Options”. Currently, there is a Progress bar navigation enabled. Leave it as is.
While you could add Arrows to the left and right margins of the slider. There’s not a whole lot of room to work with. Instead, enable Bullets and add them to the bottom of the slider.
Find a style that works best for your slider design. Then customize the bullets as little or as much as you want using the settings panel.
Learn more:
Design your product comparison pages to be more trustworthy
Improve the appearance of product comparison pages and make it easier for people to discover which products you’re reviewing. In return, watch as more people read the content, trust in your reviews, and click the affiliate links.
One way to improve the appearance of these pages is to create a list of winners — for the tops of the comparison pages as well as the home page itself — that is visually attractive and descriptive. The Travel Agency Card Slider template will enable you to do this.