{"id":13199,"date":"2019-08-23T11:18:45","date_gmt":"2019-08-23T09:18:45","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=13199"},"modified":"2025-04-24T06:39:57","modified_gmt":"2025-04-24T04:39:57","slug":"how-to-make-a-divi-testimonial-slider","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/","title":{"rendered":"How to Make a Divi Testimonial Slider"},"content":{"rendered":"\n

In this step by step tutorial, we are going to build a Divi testimonial slider. Testimonials are a great way to build trust and credibility to your visitors. With the testimonial slider we are going to build, you can show off your testimonials to your audience to make them decide to buy your product or get your service.<\/p>\n\n\n\n

You can find a demo of the testimonial slider here:<\/p>\n\n\n

\n\nView Demo<\/a>\n\n<\/div>\n\n\n
<\/div>\n\n\n\n

This testimonial slider is built on the default Divi slider<\/a>.<\/p>\n\n\n\n

Step 1: Downloading the Divi testimonial slider<\/h2>\n\n\n\n

Go to your membership dashboard and then go to free downloads, under Divi testimonial slider layout you can download the layout files. If you are not a member yet you can sign up here<\/a> (its free).<\/p>\n\n\n\n

After downloading the file \u201cDivi testimonial slider.zip\u201d you need to unpack the folder. Inside this folder you will find the json file.<\/p>\n\n\n\n

Don\u2019t\u2019 forget to publish\/update your section.<\/p>\n\n\n\n

Step 2: Uploading & Installing the json file<\/h2>\n\n\n\n

Go to Divi > Divi Library and click on the import & Export button.<\/p>\n\n\n\n

\"Import<\/figure>\n\n\n\n

After clicking on import a popup will show up, click on the Import tab and then on choose file. Navigate to your download folder and start uploading the json file Divi testimonial slider.json<\/p>\n\n\n\n

\"Start<\/figure>\n\n\n\n

Step 3: Installing Font Awesome<\/h2>\n\n\n\n

For the quotes in the slider, I used font awesome icons. If you want to add Font Awesome<\/a> icons as well you need to place 1 line of code in our header. This is very easy to do.<\/p>\n\n\n\n

Go to the Font awesome website and sign up here:<\/p>\n\n\n\n

\nhttps:\/\/fontawesome.com\/start\n<\/div><\/figure>\n\n\n\n

After signing up and verifying your email you should receive a line of code.<\/p>\n\n\n\n

Now go to Divi > Theme Options > Integration > Add code to the < head > of your blog<\/p>\n\n\n\n

And past the code in here.<\/p>\n\n\n\n

\"Font<\/figure>\n\n\n\n

Step 4: Setting up the testimonial slider<\/h2>\n\n\n\n

Create a new page or open an existing page.<\/p>\n\n\n\n

Click on the blue arrow to add a new section. Then go to the Add from library tab and choose the Divi testimonial slider section.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Adding the CSS code<\/h3>\n\n\n\n

For this slider I have created some custom CSS code. You can place the following CSS in Divi > Theme Options > CSS<\/p>\n\n\n\n

\/* TESTIMONIAL SLIDER *\/\n\n.testimonial_slider .author_name {\n\tfont-size: 20px;\n\tfont-weight: bold;\n}\n\n.testimonial_slider .author_position {\n\tfont-size: 16px;\n    color: #af8035;\n    font-weight: bold;\n    margin-top: -5px;\n    display: block;\n\ttext-transform: uppercase;\n}\n\n.testimonial_slider .fa-quote-left,\n.testimonial_slider .fa-quote-right {\n    color: #af8035;\t\n\tfont-size: 34px;\n}\n\n.testimonial_slider .fa-quote-left {\n\tpadding-right: 15px;\n}\n\n.testimonial_slider .fa-quote-right {\n\tpadding-left: 15px;\n}\n\n\n@media (max-width: 980px) {\n.testimonial_slider .fa-quote-left,\n.testimonial_slider .fa-quote-right {\n\tdisplay: none;\t\t\n}}\n\n\n.testimonial_slider .et_pb_slides .et_pb_slider_container_inner {\n    display: block !important;\n\tmin-height: 435px;\n}<\/code><\/pre>\n\n\n\n
Explaining the CSS<\/h3>\n\n\n\n
At line 4 you can change the font-size for the author name.
At line 9 you can change the font-size of the author position.
At line 10 you can change the font color of the author position.
At line 19 you can change the color of the quote icon.
At line 20 you can change the size of the quote icon.<\/p>\n\n\n\n
Step 5: How to change the content in the testimonial slider<\/h2>\n\n\n\n
If you open a slide then you find all the content in the body field.<\/p>\n\n\n\n
You can change the content from the visual tab however you need to be careful not to delete any code. I recommend to change the content in the text tab. Replace your content between the tags.<\/p>\n\n\n\n
\"Visual<\/figure>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":13201,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-13199","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"\nHow to Make a Divi Testimonial Slider | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"In this step by step tutorial, we are going to build a Divi testimonial slider. Testimonials are a great way to build trust and credibility to your visitors\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Divi Testimonial Slider | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"In this step by step tutorial, we are going to build a Divi testimonial slider. Testimonials are a great way to build trust and credibility to your visitors\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-23T09:18:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:39:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Make a Divi Testimonial Slider\",\"datePublished\":\"2019-08-23T09:18:45+00:00\",\"dateModified\":\"2025-04-24T04:39:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/\"},\"wordCount\":500,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/\",\"name\":\"How to Make a Divi Testimonial Slider | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg\",\"datePublished\":\"2019-08-23T09:18:45+00:00\",\"dateModified\":\"2025-04-24T04:39:57+00:00\",\"description\":\"In this step by step tutorial, we are going to build a Divi testimonial slider. Testimonials are a great way to build trust and credibility to your visitors\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to Make a Divi Testimonial Slider\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Make a Divi Testimonial Slider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a Divi Testimonial Slider | MarkHendriksen.com","description":"In this step by step tutorial, we are going to build a Divi testimonial slider. Testimonials are a great way to build trust and credibility to your visitors","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Divi Testimonial Slider | MarkHendriksen.com","og_description":"In this step by step tutorial, we are going to build a Divi testimonial slider. Testimonials are a great way to build trust and credibility to your visitors","og_url":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2019-08-23T09:18:45+00:00","article_modified_time":"2025-04-24T04:39:57+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Make a Divi Testimonial Slider","datePublished":"2019-08-23T09:18:45+00:00","dateModified":"2025-04-24T04:39:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/"},"wordCount":500,"commentCount":7,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/","url":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/","name":"How to Make a Divi Testimonial Slider | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg","datePublished":"2019-08-23T09:18:45+00:00","dateModified":"2025-04-24T04:39:57+00:00","description":"In this step by step tutorial, we are going to build a Divi testimonial slider. Testimonials are a great way to build trust and credibility to your visitors","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/08\/Divi-testimonial-slider.jpg","width":720,"height":400,"caption":"How to Make a Divi Testimonial Slider"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-make-a-divi-testimonial-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to Make a Divi Testimonial Slider"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/13199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=13199"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/13199\/revisions"}],"predecessor-version":[{"id":35673,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/13199\/revisions\/35673"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/13201"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=13199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=13199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=13199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}