{"id":34934,"date":"2024-07-03T11:43:29","date_gmt":"2024-07-03T09:43:29","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=34934"},"modified":"2024-07-03T11:43:31","modified_gmt":"2024-07-03T09:43:31","slug":"divi-testimonial-slider","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/","title":{"rendered":"How to Create a Divi Testimonial Slider Without a Plugin"},"content":{"rendered":"\n<p>Testimonials play a crucial role in building trust and credibility for businesses. They serve as powerful social proof, influencing potential customers&#8217; decisions. To effectively showcase testimonials on your website, using a slider can be an engaging and space-efficient method. <\/p>\n\n\n\n<p>In this tutorial, we&#8217;ll explore <strong>how to create a custom Divi testimonial slider<\/strong> using Divi&#8217;s blurb modules and some custom code. Whether you&#8217;re a web designer or a business owner, this guide will help you craft a compelling testimonial slider.<\/p>\n\n\n<div class=\"gb-container gb-container-a47f883d\">\n\n<h3 class=\"wp-block-heading\">Table of Contents<\/h3>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li><a href=\"#guide\">Step-by-Step Guide to Creating a Custom Divi Testimonial Slider<\/a><\/li>\n\n\n\n<li><a href=\"#step-1\">Step 1: Place a Section and Row<\/a><\/li>\n\n\n\n<li><a href=\"#step-2\">Step 2: Blurb settings<\/a><\/li>\n\n\n\n<li><a href=\"#step-3\">Step 3: Custom Code<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"guide\">Step-by-Step Guide to Creating a Custom Divi Testimonial Slider<\/h2>\n\n\n\n<p>Let me start by showing you the final result of what we&#8217;ll be creating.<\/p>\n\n\n\n<a class=\"gb-button gb-button-ca2c8e04 gb-button-text\" href=\"https:\/\/www.demo.markhendriksen.com\/divi-testimonial-carousel\/\" target=\"_blank\" rel=\"noopener noreferrer\">See Demo<\/a>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1\">Step 1: Place a Section and Row<\/h3>\n\n\n\n<p>Start by placing a section and a row with one column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"108\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/section-and-row.jpg\" alt=\"section and row\" class=\"wp-image-34938\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/section-and-row.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/section-and-row-380x60.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/section-and-row-300x48.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/section-and-row-510x81.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/section-and-row-190x30.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/section-and-row-567x90.jpg 567w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Open the section and go to the Advanced tab. <\/p>\n\n\n\n<p>In the CSS Class field place the class: <strong>testimonial-section<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"657\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-section-the-class-testimonial-section.jpg\" alt=\"Give the section the class testimonial section\" class=\"wp-image-34940\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-section-the-class-testimonial-section.jpg 563w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-section-the-class-testimonial-section-380x443.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-section-the-class-testimonial-section-257x300.jpg 257w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-section-the-class-testimonial-section-510x595.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-section-the-class-testimonial-section-51x60.jpg 51w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-section-the-class-testimonial-section-77x90.jpg 77w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><\/figure>\n\n\n\n<p>Now open the Row and go to the Advanced tab. <\/p>\n\n\n\n<p>In the CSS Class field place the class: <strong>testimonial-row<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"655\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-row-the-class-testimonial-row.jpg\" alt=\"Row css class\" class=\"wp-image-34941\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-row-the-class-testimonial-row.jpg 561w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-row-the-class-testimonial-row-380x444.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-row-the-class-testimonial-row-257x300.jpg 257w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-row-the-class-testimonial-row-510x595.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-row-the-class-testimonial-row-51x60.jpg 51w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Give-the-row-the-class-testimonial-row-77x90.jpg 77w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/figure>\n\n\n\n<p>Now open the Row again but this time go to the column settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"653\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Open-the-column.jpg\" alt=\"Open the column\" class=\"wp-image-34942\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Open-the-column.jpg 561w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Open-the-column-380x442.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Open-the-column-258x300.jpg 258w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Open-the-column-510x594.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Open-the-column-52x60.jpg 52w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Open-the-column-77x90.jpg 77w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/figure>\n\n\n\n<p>Go to the Design tab and then to Spacing.<\/p>\n\n\n\n<p>For the left padding use 15px.<\/p>\n\n\n\n<p>Change to the mobile tab and place 0px as the left padding.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"653\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Padding-settings.jpg\" alt=\"Padding settings\" class=\"wp-image-34943\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Padding-settings.jpg 563w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Padding-settings-380x441.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Padding-settings-259x300.jpg 259w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Padding-settings-510x592.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Padding-settings-52x60.jpg 52w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Padding-settings-78x90.jpg 78w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab. <\/p>\n\n\n\n<p>In the CSS Class field place the class: <strong>testimonial-column<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"657\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-column-settings.jpg\" alt=\"Testimonial column setting\" class=\"wp-image-34944\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-column-settings.jpg 563w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-column-settings-380x443.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-column-settings-257x300.jpg 257w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-column-settings-510x595.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-column-settings-51x60.jpg 51w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-column-settings-77x90.jpg 77w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2\">Step 2: Blurb settings<\/h3>\n\n\n\n<p>Place a blurb module in the column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"391\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-blurb-module.jpg\" alt=\"Place a blurb module\" class=\"wp-image-34946\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-blurb-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-blurb-module-380x219.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-blurb-module-300x173.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-blurb-module-510x293.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-blurb-module-104x60.jpg 104w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Place-a-blurb-module-157x90.jpg 157w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Place a Title and Description for your testimonial.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"858\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-settings.jpg\" alt=\"Blurb settings\" class=\"wp-image-34947\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-settings.jpg 570w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-settings-380x572.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-settings-199x300.jpg 199w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-settings-510x768.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-settings-40x60.jpg 40w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-settings-60x90.jpg 60w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/figure>\n\n\n\n<p>Place a testimonial profile image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"571\" height=\"651\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-profile-image.jpg\" alt=\"Testimonial profile image\" class=\"wp-image-34948\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-profile-image.jpg 571w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-profile-image-380x433.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-profile-image-263x300.jpg 263w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-profile-image-510x581.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-profile-image-53x60.jpg 53w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Testimonial-profile-image-79x90.jpg 79w\" sizes=\"(max-width: 571px) 100vw, 571px\" \/><\/figure>\n\n\n\n<p>In the Design tab, you can adjust the title and text size. I have aligned the text to the center.<\/p>\n\n\n\n<p>Turn the image animation off.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"652\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Turn-blurb-animation-off.jpg\" alt=\"Turn blurb animation off\" class=\"wp-image-34949\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Turn-blurb-animation-off.jpg 568w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Turn-blurb-animation-off-380x436.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Turn-blurb-animation-off-261x300.jpg 261w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Turn-blurb-animation-off-510x585.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Turn-blurb-animation-off-52x60.jpg 52w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Turn-blurb-animation-off-78x90.jpg 78w\" sizes=\"(max-width: 568px) 100vw, 568px\" \/><\/figure>\n\n\n\n<p>Go to the Advanced tab. <\/p>\n\n\n\n<p>In the CSS Class field place the class: <strong>testimonial-box<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"571\" height=\"652\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-class.jpg\" alt=\"Blurb class\" class=\"wp-image-34950\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-class.jpg 571w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-class-380x434.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-class-263x300.jpg 263w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-class-510x582.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-class-53x60.jpg 53w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Blurb-class-79x90.jpg 79w\" sizes=\"(max-width: 571px) 100vw, 571px\" \/><\/figure>\n\n\n\n<p>You can duplicate this blurb module for the other testimonials.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3\">Step 3: Custom Code<\/h3>\n\n\n\n<p>Go to Divi > Theme Options > Integration > Add code to the &lt; head > of your blog<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"318\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-code-to-the-head-of-your-blog.jpg\" alt=\"Add code to the < head &gt; of your blog\" class=\"wp-image-34953\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-code-to-the-head-of-your-blog.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-code-to-the-head-of-your-blog-380x178.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-code-to-the-head-of-your-blog-300x140.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-code-to-the-head-of-your-blog-510x239.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-code-to-the-head-of-your-blog-128x60.jpg 128w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Add-code-to-the-head-of-your-blog-192x90.jpg 192w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Place the following code here:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;script&gt;\ndocument.addEventListener(&#039;DOMContentLoaded&#039;, function () {\n    const column = document.querySelector(&#039;.testimonial-column&#039;);\n    const testimonials = document.querySelectorAll(&#039;.testimonial-box&#039;);\n    const totalTestimonials = testimonials.length;\n    let testimonialsPerView = 3;\n    let currentIndex = 0;\n\n    const prevArrow = document.createElement(&#039;div&#039;);\n    prevArrow.classList.add(&#039;arrow&#039;, &#039;left&#039;);\n    prevArrow.innerHTML = &#039;\u25c0&#039;; \/\/ Left arrow\n    document.querySelector(&#039;.testimonial-section&#039;).appendChild(prevArrow);\n\n    const nextArrow = document.createElement(&#039;div&#039;);\n    nextArrow.classList.add(&#039;arrow&#039;, &#039;right&#039;);\n    nextArrow.innerHTML = &#039;\u25b6&#039;; \/\/ Right arrow\n    document.querySelector(&#039;.testimonial-section&#039;).appendChild(nextArrow);\n\n    function updateTestimonialsPerView() {\n        if (window.innerWidth &lt;= 479) {\n            testimonialsPerView = 1;\n        } else {\n            testimonialsPerView = 3;\n        }\n        updateCarousel();\n    }\n\n    function updateCarousel() {\n        const offset = -currentIndex * (100 \/ testimonialsPerView);\n        column.style.transform = `translateX(${offset}%)`;\n    }\n\n    nextArrow.addEventListener(&#039;click&#039;, () =&gt; {\n        if (currentIndex &lt; totalTestimonials - testimonialsPerView) {\n            currentIndex++;\n            updateCarousel();\n        }\n    });\n\n    prevArrow.addEventListener(&#039;click&#039;, () =&gt; {\n        if (currentIndex &gt; 0) {\n            currentIndex--;\n            updateCarousel();\n        }\n    });\n\n    window.addEventListener(&#039;resize&#039;, updateTestimonialsPerView);\n    updateTestimonialsPerView(); \/\/ Initial check\n});\n&lt;\/script&gt;\n<\/pre><\/div>\n\n\n<p>Now go to Divi > Theme Options > CSS<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"187\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/css-code.jpg\" alt=\"CSS code\" class=\"wp-image-34955\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/css-code.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/css-code-380x105.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/css-code-300x83.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/css-code-510x140.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/css-code-190x52.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/css-code-327x90.jpg 327w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Place the following code here:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.testimonial-section {\n    max-width: 1200px;\n    margin: 0 auto;\n    overflow: hidden;\n    position: relative;\n}\n\n.testimonial-row {\n    overflow: hidden;\n}\n\n.testimonial-column {\n    display: flex;\n    transition: transform 0.5s ease;\n    gap: 20px; \/* Add gap between the items *\/\n}\n\n.testimonial-box {\n    flex: 0 0 calc((100% \/ 3) - 17px); \/* Adjust width considering the gap *\/\n    background: #f9f9f9;\n    padding: 20px;\n    margin: 0 !important;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    border-radius: 10px;\n    box-sizing: border-box;\n}\n\n.arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background: rgba(0,0,0,0.5);\n    color: #fff;\n    padding: 10px;\n    cursor: pointer;\n\tz-index: 9;\n}\n\n.arrow.left {\n    left: 10px;\n}\n\n.arrow.right {\n    right: 10px;\n}\n\n\/* Responsive design *\/\n@media (max-width: 479px) {\n    .testimonial-box {\n        flex: 0 0 100%; \/* Show one item at a time *\/\n}\n  \n.testimonial-column {\n    gap: 0px; \/* Add gap between the items *\/\n}}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>Congratulations! You have successfully created a custom Divi testimonial slider that is not only visually appealing but also fully functional with just Divi blurb modules and some custom code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Testimonials play a crucial role in building trust and credibility for businesses. They serve as powerful social proof, influencing potential customers&#8217; decisions. To effectively showcase testimonials on your website, using a slider can be an engaging and space-efficient method. In this tutorial, we&#8217;ll explore how to create a custom Divi testimonial slider using Divi&#8217;s blurb [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":34960,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-34934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Divi Testimonial Slider Without a Plugin<\/title>\n<meta name=\"description\" content=\"Learn how to create a stunning custom Divi testimonial slider using blurb modules and custom code with our step-by-step tutorial.\" \/>\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\/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 Create a Divi Testimonial Slider Without a Plugin\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a stunning custom Divi testimonial slider using blurb modules and custom code with our step-by-step tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/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=\"2024-07-03T09:43:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-03T09:43:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Create a Divi Testimonial Slider Without a Plugin\",\"datePublished\":\"2024-07-03T09:43:29+00:00\",\"dateModified\":\"2024-07-03T09:43:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/\"},\"wordCount\":388,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/\",\"url\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/\",\"name\":\"How to Create a Divi Testimonial Slider Without a Plugin\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg\",\"datePublished\":\"2024-07-03T09:43:29+00:00\",\"dateModified\":\"2024-07-03T09:43:31+00:00\",\"description\":\"Learn how to create a stunning custom Divi testimonial slider using blurb modules and custom code with our step-by-step tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg\",\"width\":720,\"height\":400,\"caption\":\"Divi testimonial slider\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/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 Create a Divi Testimonial Slider Without a Plugin\"}]},{\"@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 Create a Divi Testimonial Slider Without a Plugin","description":"Learn how to create a stunning custom Divi testimonial slider using blurb modules and custom code with our step-by-step tutorial.","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\/divi-testimonial-slider\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Divi Testimonial Slider Without a Plugin","og_description":"Learn how to create a stunning custom Divi testimonial slider using blurb modules and custom code with our step-by-step tutorial.","og_url":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2024-07-03T09:43:29+00:00","article_modified_time":"2024-07-03T09:43:31+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Create a Divi Testimonial Slider Without a Plugin","datePublished":"2024-07-03T09:43:29+00:00","dateModified":"2024-07-03T09:43:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/"},"wordCount":388,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/","url":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/","name":"How to Create a Divi Testimonial Slider Without a Plugin","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg","datePublished":"2024-07-03T09:43:29+00:00","dateModified":"2024-07-03T09:43:31+00:00","description":"Learn how to create a stunning custom Divi testimonial slider using blurb modules and custom code with our step-by-step tutorial.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/divi-testimonial-slider\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/07\/Divi-testimonial-slider.jpg","width":720,"height":400,"caption":"Divi testimonial slider"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/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 Create a Divi Testimonial Slider Without a Plugin"}]},{"@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\/34934","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=34934"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/34934\/revisions"}],"predecessor-version":[{"id":34959,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/34934\/revisions\/34959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/34960"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=34934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=34934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=34934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}