Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates.

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

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

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 will modify the Slider Module from Divi 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.

insert a compact testimonial slider to a Divi header

And here's what it looks like on mobile.

insert a compact testimonial slider to a Divi header

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.

Divi lines converted to tabs

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

Then click Start Building (Build From Scratch)

Divi lines converted to tabs

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.

Divi Compact Testimonial Slider

Then add a Slider module to the row.

Easily create your website with Elementor

Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.

Divi Compact Testimonial Slider

Edit slide

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

Divi Compact Testimonial Slider

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
Divi Compact Testimonial Slider

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 content, duplicate that 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
Divi Compact Testimonial Slider

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
#image_title
  • Background Image:
    • Size: Fit
    • Position: Center Left
    • Blend: Luminosity
#image_title

Slider settings

Under the tab Design, update the following:

Cover
  • Use Background Overlay: YES
  • Background Overlay Color: rgba(0,0,0,0.7)
Divi Compact Testimonial Slider
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
Divi Compact Testimonial Slider
The body of the text
  • Bodysuit:
    • Font: Josefin Sans
    • Text Alignment: left
    • Text Color: #aaaaaa
    • Letter Spacing: 0,05em
Divi Compact Testimonial Slider
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)
Divi Compact Testimonial Slider
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
Divi Compact Testimonial Slider
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.

Do you want to sell your products on the internet?

Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.

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.

Divi Compact Testimonial 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
Divi Compact Testimonial Slider

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.

Divi Compact Testimonial Slider

Result

Check out the end result.

#image_title

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" page (in French).

Divi Compact Testimonial Slider

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" page (in French).

Divi Compact Testimonial Slider

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.

Divi Compact Testimonial Slider

Once loaded, save the changes.

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

Final result

insert a compact testimonial slider to a Divi header

Below is the testimonial slider added to a global header.

insert a compact testimonial slider to a Divi header

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

insert a compact testimonial slider to a Divi header

And here's what it looks like on mobile.

insert a compact testimonial slider to a Divi header

Download DIVI now!!!

Conclusion

The compact testimonial slider can be a new addition to the header of any website looking to build credibility for their services in the most visible place of their website. 

You can also use it to redirect visitors to a testimonial page or a 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.

...

%d bloggers like this page: