How to Give Your Testimonials Section the Attention It Deserves [Tutorial]

Want to get as many website visitors to notice the testimonials section on your home page? Then it needs to be designed for attention. This tutorial will teach you how to do that.

Creatives and service providers depend on satisfied customers to give them positive reviews. Without glowing praise or information that provides more context about what they do and what it’s like to work with them, it can sometimes be difficult to convince prospects to hire them.

In this tutorial, we’ll be using the Testimonial Carousel Collection to show you how to create a testimonials section for the home page that will be impossible to miss. As a bonus, this carousel doubles as a mini portfolio.

Table of Contents:

How to design a testimonials section that’s guaranteed to impress

There are all kinds of business models that would benefit from having a testimonials section built into their website. For instance, if you’re building a website that sells SaaS subscriptions, this testimonial carousel design would be a perfect way to show off some of your high-profile users:

Creatives can also use this testimonials section design to showcase client praise as well as their own work. In the following example, we’ll demonstrate how easy it is to repurpose the template for a wedding photographer:

Before you get started, take a moment to review these overview docs if you’re new to Slider Revolution:

There are five testimonial carousel designs included in this template package. Go to “New Module from Template”, do a search for “testimonial carousel” and you’ll find the full package (in yellow) along with the five individual carousel designs (in purple).

The one we’re using in this tutorial is Testimonial Carousel 4.

To install the module template, hover over it and click the plus-sign icon that appears. Then install just the template (not the package).

Note: If you’d prefer to create a more understated testimonial section design, Carousels 1 and 5 may be a better option for you. The others use motion, texture, and depth to create a more eye-catching design for your testimonials.

Learn more:

Step 2: Add more slides

Dismiss the Global Skin Color modal that appears when you open the template. We’ll deal with the carousel’s colors in the next step.

Right now, let’s tackle your slides. The template has three slides that represent each of the testimonials. If you want to stick with three, there’s nothing more to do in this step and you can move onto the next one.

If you want to add more, go to “Slides” in the top toolbar. Then click the duplicate icon next to any of the slides to add as many as you need.

We’ve added two more to our section.

Learn more:

Rather than go through the slides one by one to edit the colors, you can use the Skin tool under “Module Options”.

Four global colors have been generated for you:

  • Highlight is the circle behind the quotation mark icon.
  • Headline Text is the color of the Name layer.
  • Content Text is the color of the Testimonial and Title layers.
  • Background is the color of the carousel.

To change any of these colors, click the color swatch next to each Skin Title. Select new ones from the color selection dialogue.

Note: If you don’t automatically see your new colors reflected in the canvas, save your changes, back out of the template, and open it up once more. You’ll see them updated now.

Learn more:

Step 4: Add the testimonial images

It’s not always easy to get a photo from clients after they give you a testimonial. One way around this is to use their company logo. Another option, if you’re a photographer or designer, is to use the work you created.

That’s what we’re going to do for our photographer’s testimonials.

To edit the photos in each slide, locate the layer called Image. The current photos are about 470px by 470px, so aim to replace them with similarly-sized graphics.

This is a shape layer, so you’ll edit the image under “Layer Options” and “Style” settings:

If the subject of your photo isn’t in the center, there are a couple of settings you can use under “Style” to fix this:

Use the “Position” blocks to move your image around until your subject is in the center. Or you can use the “Border” settings to reduce the rounding of the edges. This will reveal more of the image in case you think it’s valuable to show more context (like if you’re showing off your designs as opposed to a photograph).

Learn more:

Step 5: Edit the quote text

There are three text layers that form each testimonial:

  • Testimonial is the quoted text.
  • Name is the name of the person who left the review.
  • Title can be their job title, company name, location, or other supplementary information.

To edit what these layers say, go to “Layer Options” and “Content” to change the text. You can then use the “Style” tab to customize the font and styling of the text.

Note: The Quote Icon layer is a text layer as well. You already edited the background color when you set the Highlight color under Step 3. The only things you need to do now is update the font to match the font of your Testimonial text layer and update the Text Color if needed.

Make sure that all the stylistic changes you make to the first slide are applied consistently throughout the carousel. Save your changes after you finish with each slide.

Learn more:

If you open the preview, you’ll see that there’s other text in the carousel. You’ll find these layers if you go to “Slides” in the toolbar and select Global Layers:

  • Cta Button is the text link that reads “See All Reviews”.
  • Headline is the “Testimonial Carousel” section name.
  • Total Slides displays the number of slides in the carousel.
  • Slide Number displays the current slide number.

So long as you keep the number of testimonials to a reasonable number (no more than seven), you don’t need the Total Slides or Slide Number layers. To delete them, select them in the canvas or timeline and then hit the Backspace or delete key.

You can now edit the remaining layers similar to how you edited the previous set. However, there are three extra steps you’ll need to take with regards to the Cta Button.

First, there’s a bottom border that serves as an underline for this text link. To edit the color or thickness of the line, go to “Style Options” and “Border”:

Next, go to the “Hover” tab and scroll down to “Style”. Modify the link’s color, border/underline, and animation settings when someone hovers over it here:

Lastly, go to “Actions”. A Simple Link has already been created. However, it has nowhere to point visitors to in the Link URL field:

Add the link to your Testimonials page here. To save your changes, exit out of the modal.

Learn more:

Step 7: Customize the navigation style

There are two SVG layers under Global Layers called Arrow Left and Arrow Right. These are the navigation arrows that appear on the edges of the carousel.

If you’d like to modify the style of the arrows, double-click on them to open the SVG library. You can choose one of the arrow icon templates there or upload your own SVGs to replace them:

To modify the appearance of your arrows, use the “Style” tab to customize their normal style and “Hover” to customize how they look when users interact with them:

When you’re done, preview your changes to make sure the buttons look and work as you want them to.

Learn more:

Step 8: Update the gradient color

The last piece to edit in this template is the soft gradient that appears towards the bottom of the testimonials section. This is a global layer called Radial Gradient.

To edit the color, select the layer and go to “Content” or “Style”. You can edit the BG Color from either of these tabs.

The easiest way to modify the gradient is to keep the existing gradient configuration and just change the HEX codes for the two colors:

Click each of the color tabs along the gradient bar. Then input the custom value for each in the Color field.

When you’re done, save your changes and preview your work once more.

When you’re satisfied with your new carousel, use the shortcode to add this section to your home page. You can also use the Slider Revolution widget in your page builder to do this.

Want to convince prospective clients to hire you? One way to do this is to show off an impressive body of work. Another way is to let your former clients do the talking for you. The great thing about this testimonials section template is that it will allow creative professionals to do both simultaneously.

How to Give Your Testimonials Section the Attention It Deserves [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

SR Staff

We're a passionate bunch of designers and developers writing about the ins and outs of web design.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.