How to Make a Divi Testimonial Slider with Page Builder Everywhere

September 10, 2019

In today’s age of digital marketing, it’s important to present a thorough and transparent view of your brand to the world. But even with a great website, clever copy and easy-to-use channels of communication, you may find that some customers are still hesitant about buying into your brand.

To give these undecided potential customers a nudge in the right direction, why not let your satisfied customers do the talking?

Testimonials have become extremely important to include in a website. If your business sells products or services, incorporating these powerful elements into your website will improve the appearance of your brand and place it in a positive light.

In the following tutorial, we’ll take you through the step-by-step process of adding an attractive and eye-catching testimonial slider to your Divi website. For this tutorial, we’ll be using our plugin Page Builder Everywhere

What is Page Builder Everywhere?

A lightweight and powerful Divi plugin, Page Builder Everywhere lets you use the Divi Builder in even more sections in your website. By default, the sidebar, archive pages, footer, header and a few other areas are off-limits to the Divi Builder, and any edits or enhancements you’d like to make in these areas have to be done by editing code or through the use of CSS styling. 

With Page Builder Everywhere, you can edit these impossible-to-reach sections with very little hassle, using the Divi Builder as per normal.

One of the best features about the Page Builder Everywhere plugin is that it gives you the ability to nest modules

With this, you can place modules within modules, and build out truly unique web presences, all with the familiar and easy to use Divi Builder. You can see a number of these examples in action here.

With Page Builder Everywhere giving you the ability to nest modules, you can create a seriously slick-looking testimonial feature for your site, dropping a number of testimonial blurbs into a single slide of the slider module. 

To learn how to create an awesome Divi testimonial slider, follow the step-by-step tutorial below!

For more advanced testimonial slider designs – Testify Plugin

Page Builder Everywhere Plugin was created to make the impossible possible. You can create so many beautiful designs with it, without the Divi limits. Promo bars, tabs with pricing modules, tabs with slider and shop modules inside… Really no limits! It’s like discovering new planets beyond the Divi System! Slider with testimonials is just a one of the many examples.

If you are looking an easier way and more compelling way to create Divi testimonial sliders, you should check out the Testify plugin. It is extremely easy to customize and can be styled to match any brand identity. It offers a lot of new features compared to the standard Testimonial Divi Module. Copy, author name, image, quotation mark and navigation type – every part of the testimonial can be stylized.

Also, testimonial thumbnail images can be designed on the parameters of size, spacing, animation type, animation duration and autoplay settings. Testimonials can be styled on an individual basis, or alternately, multiple styles can be set using the taxonomy system.

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere Theme Builder Layout
If you are looking for a beautiful and unique way to display testimonials that you’ve created or those that your visitors have uploaded through a form, and want to categorize, filter and customize them in no time, check out our Testify Divi and WordPress Plugin.

Can’t decide which plugin is right for you? You don’t have to choose. You can lock in access to the two plugins (plus nearly a hundred other products!) by joining our Membership. Read more about Membership Plans.

Testify Demo

  • I replaced my client’s testimonial plugin with Testify and it immediately impressed her. We both love the subtle animations and how it adds to the professionalism of the site. The design overall clearly had a lot of thought put into it, it’s my go-to testimonial plugin from now on.

    Leslie Bernal

  • Everything Divi Space does looks so good, it makes me want to punch someone. – Founder of Caldera Forms

    Josh Pollock

How to Make a Divi Testimonial Slider with Page Builder Everywhere

 If you prefer to watch a video of the same tutorial, head on over to our YouTube channel.

[youtube https://www.youtube.com/watch?v=yAwW_XP7gsI&w=560&h=315]

To begin, you’ll need to purchase the Page Builder Everywhere plugin from ether Divi Space or Aspen Grove Studios. Once you have purchased the plugin, download the .zip file of the plugin, and head over to your WordPress website.

Install the plugin by clicking on Plugins > Add New, and follow the installation prompts. For more information on installing plugins on a WordPress website, read our guide How to Install a WordPress Plugin (Step by Step Guide for Beginners) or watch the video How to Install the Page Builder Everywhere Plugin for Divi on YouTube.

[youtube https://www.youtube.com/watch?v=BFi4c3ctWmI&w=560&h=315]

Once the plugin is installed, be sure to enter your unique license key relating to your purchase. Once the license is entered, you can begin with the tutorial!

In our example, we’re modifying one of our free layouts, eCommerce Layout. Click here to see the eCommerce Layout demo or download it for free.

In the tutorial, we’ll be editing the static testimonial section to become a slider with multiple testimonials.

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-1 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-1 Theme Builder Layout

You could either download the layout and follow along step by step or simply create your own testimonials using the blurb module as we have. 

To begin, isolate the three testimonial blurb modules by creating a new section and row with just the testimonials in it. If you’re starting from scratch, create a new section with a three-column row and add three respective blurb modules.

Here, you need to set the row to fullwidth or 100%. To do this, click on the row settings, Design tab and set the row to fullwidth. If you are using a more recent version of the Divi theme, set the max-width to 100%. 

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere Theme Builder Layout

In our example, we’ve used a gutter width of 2 but you can change this variable depending on the aesthetic you’d like to create. 

Also remove the padding around the top and bottom of the row. If you don’t remove the padding, you’ll end up with double padding across the two modules. 

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-1 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-1 Theme Builder Layout

To change the padding, click on Spacing in the Design tab and set all Custom Padding variables to 0px.

Once you have made these changes, right-click on the row and click Save to Library

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-2 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-2 Theme Builder Layout

When you save your layout, make sure to call it something unique. The Divi Library does not let you preview the visual of the layout so you’ll need to keep track of the name. In this example, we’ve called this batch of testimonials Testimonial Slider 1.

At this point, duplicate the set of blurb modules and enter the next collection of testimonials. In our example, we’ve changed the profile picture icons and names of the demo testimonials. 

Once you’ve created the next batch of testimonials, save the row to the Divi Library and assign it a unique name. In this example, we’ve called the second batch of testimonials Testimonial Slider 2.

Now for the fun part – creating the actual Divi testimonial slider with Page Builder Everywhere. Where relevant in your layout, add a new row, section and add in a Slider module. While there’s no right or wrong space to add testimonials, they should generally be around a call to action such as a contact form, newsletter sign up or further link to services, placed nearby to an element where an inspired customer can make contact with your brand. 

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-3 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-3 Theme Builder Layout

Navigate to Design > Spacing and make sure to set all padding variables to 0px

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-4 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-4 Theme Builder Layout

Now, add a new slide to the Divi slider module.

Next, navigate to the Content tab. Make sure you’ve selected the Visual content editor. Click the Page Builder Every insert button (which looks like the Divi icon) at the far right of the editor.

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-5 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-5 Theme Builder Layout

Now, a drop-down menu will arise showing all of the layouts in your Divi Library. Select one of the two collections of testimonial blurbs saved from earlier. 

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-2 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-2 Theme Builder Layout

To make sure the text color is displaying properly, navigate to the Design tab and ensure that the Text Color is correct (either light or dark depending on your layout design). 

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-6 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-6 Theme Builder Layout

Next, add a second slide to the slider module and, like before, add the second testimonial blurb layout saved to the Divi library. 

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-3 Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere-3 Theme Builder Layout

Click Save Changes to preserve the edits made to the Slider module and update your page or post layout. 

Now, return to the front end of your site and you’ll have a stunning Divi testimonial slider showcasing positive feedback of your brand!

how-to-make-a-divi-testimonial-slider-with-page-builder-everywhere Theme Builder Layouthow-to-make-a-divi-testimonial-slider-with-page-builder-everywhere Theme Builder Layout
We hope that you’ve enjoyed this tutorial. If you implement it on your Divi website, send us a link – we’d love to check out your creation!

Let us know which other Divi tutorials you’d like us to create for you!

Source

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.