Divi: How to create a compact testimonial slider for a header

Would you like to insert a compact testimonial slider for a Divi header?

Adding testimonials to your site is an effective way to build credibility for your business (or your brand) and build trust with users. visiteurs. 

A testimonial slider is a handy tool for showcasing testimonials in one place. With that in mind, it makes sense to add a compact testimonial slider to your header so that these testimonials are one of the first things the user sees when they visit your website.

In this tutorial, we are going to show you how to create a compact testimonial slider to showcase short testimonials in the header of your Website. 

To do this, we are going to modify the Divi Slider Module in a fun and unique way.

Let's start!

But before you can discover our guide on Divi, The Best WordPress Theme in the World and the Easiest to Use

Preview

Here is the compact testimonial slider that we will build using Divi's Slider module.

And here is that same testimonial slider added to a global header.

And here's what it looks like on mobile.

Create a new page with Divi Builder

To get started, you will need to do the following:

From the WordPress dashboard, go to Pages > Add New to create a new page.

Give it a title that makes sense to you and click Use Divi Builder

Then click Start Building (Build From Scratch)

After that, you will have a blank canvas to start designing in Divi.

How to Create a Compact Testimonial Slider in Divi

Add New Row and Slider Module

To get started, add a one-column row to the section.

Then add a Slider module to the row.

Edit slide

Under slider settings, remove the default second slide under the tab Content, then click to change the settings for the remaining slide.

Slide content

Under the tab Content from the slide settings, update the following:

• Title: “Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
• Button: Read All
• Body: — Tatiana Gagelman

Once done, save the slide settings.

Read also: Divi: How to Use Background Mask Settings and Pattern Transform Options

Update slider settings

Duplicate slide and hide controls

After updating the first slide with contents, duplicate this slide to create one or more additional slides.

Then under the option group Elements, hide the slider controls by updating the following:

• Show Control: NO

Update the background of all slides

Next, we'll add a background that will be used for all slides.

To add the background, update the following:

• Background Gradient:
  • Gradient Stops 0%: #000000
  • Gradient Stops 100%: #000000

• Background Image:
  • Size: Fit
  • Position: Center Left
  • Blend: Luminosity

Slider settings

Under the tab Design, update the following:

Cover

• Use Background Overlay: YES
• Background Overlay Color: rgba(0,0,0,0.7)

Title text

• Title:
  • Heading Level: H4
  • Font: Josefin Sans
  • Font Weight: Medium
  • Text Alignment: left
  • Text Size: 16px(Desktop and Tablet), 14px(Phone)
  • Line Height: 1,5em

The body of the text

• Bodysuit:
  • Font: Josefin Sans
  • Text Alignment: left
  • Text Color: #aaaaaa
  • Letter Spacing: 0,05em

Button

• Use Custom Size For Button: YES
• Button:
  • Text Size: 1em
  • Text Color: Default (Desktop), #000 (Hover)
  • Background Color (Desktop): rgba(255,255,255,0.19)
  • Background Color (Hover): #ffffff
  • Border Width: 0 pixels
  • Letter Spacing: 0,05em
  • Font: Josefin Sans
  • Margin: 0px(Top and Bottom)
  • Padding: 0px(Top and Bottom), 0,6em(Left and Right)

Auto fill and animation

Next, update the slider spacing to be compact and set the desired auto animation speed.

• Margin: 0px(Top and Bottom)
• Padding: 1em(Top and Bottom), 5%(Left and Right)
• Automatic Animation: ON
• Automatic Animation Speed: 3500

Custom CSS

Under the tab Advanced, add the following custom CSS to update the style of each slider element (title, button and arrows)

Slide title

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

This will ensure that the slide title will not create a line break on smaller screens.

Slide button

position:absolute;
bottom: 1em;
right: 6%;

This gives the button an absolute position so that it sits well below the title and to the right of the slide, making the slider even more compact.

Drag arrows

font-size: 30px;
margin-top: -15px;

It just makes the slider navigation arrows smaller to accommodate the compact size of the slider.

Tip: Add the same background color to the column for smoother slide transitions

To do this, open the settings of the parent column of the slider and add the following background color:

• Background: #000000

Adding author background images to a slide

If you want to include an author background image for a slide, you can do so by adding a background image to each slide.

Once you have added the background image to the slide, the background image will inherit the styles already in place under the slider (not the slide) settings.

Result

Check out the end result.

Adding the compact testimonial slider to a header template

Save the module in the Divi library

Before we can add the compact testimonial slider to a global header, we first need to register the module in the Divi library. 

You can do this by hovering over the Slider module and clicking the " Add to Library“. Then give a name to the layout and click on the button " Save to Library"

Added compact testimonial module layout to a header template

Edit Custom Header

Once the new testimonial slider module has been saved to the library, we are ready to add it to a custom header.

Access to Divi > Theme Builder, then click on the icon that allows you to modify " custom-header"

Insert saved testimonial slider module from library

In the header layout editor, click to add the compact testimonial slider module where you want it to appear.

In the mod “InsertModule”, select the tab “Add From Library”. Find the compact testimonial slider you saved earlier in the library and select it.

Once loaded, save the changes.

See also: Divi: How to display the Fullwidth Header module in full screen

Final result

Below is the testimonial slider added to a global header.

Here we have the testimonial slider without the author background images.

And here's what it looks like on mobile.

Download DIVI now!!!

Conclusion

Compact testimonial slider can be a new addition to the header of anything Website seeking to enhance the credibility of its services in the most visible place on its website. 

You can also use it to redirect visiteurs to a testimonial page or sales page to increase conversions. We hope this will be useful to you in your next Divi projects.

If you have any concerns or suggestions, find us in the comments section to talk about it.

You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.

Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...