eXp Realty
            Knowledge Base Support WordPress Tutorials Beginner

            How to add a Boxed Testimonial Slider

             I’m going to show you how to create a Boxed Testimonial Slider like the one below which looks great on all screen sizes.


            The first thing we need to do is create our slider module. So add a new standard section with single row and single column and then insert a slider module.


            Next, open up the slider module and give it a custom css class, I’m using testimonial-slider.



            Next, we’re going to define some settings for the slider, you can make these whatever you want but this is what I have used so if you want yours to look exactly like the demo then use the 
            same setting as you see below. (I haven’t changed anything in the Advanced Design Settings).








            Now let’s get onto adding our content.  Scroll up to the top of the slider module and hit Add New Slide. Set a background colour, I’m using #999999, and set the text colour to light or dark depending on your background colour, I’m using light. We are going to ignore all the other fields as we will be adding everything else into the main content area.



            Scroll down to the content area and add the following code in the text editor. Then just change the image URL and text to your own and then hit Save. You can add some line breaks or paragraph tags before and after to get the spacing you need depending on the length of your content.

            • <div class="et_pb_testimonial_portrait" style="background-image: url('YOUR IMAGE URL HERE');"> </div><p style="text-align: left;">Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Pellentesque posuere. Maecenas vestibulum mollis diam. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est.</p><p style="text-align: right;">- Jack &amp; Jenny Green</p><p>


            Now you have your first slider set up, just hit the duplicate button and create as many sliders as you need and then edit the image URLs and text as you need.



            Now for the CSS, copy and paste the code below into your Divi RainMaker Theme Options epanel custom CSS section and don’t forget to save.

            • /*---------- [Testimonial Slider ]----------*/


            • .testimonial-slider,
            • .testimonial-slider .et_pb_container {
            • height: auto !important;
            • }
            • .testimonial-slider,
            • .testimonial-slider .et_pb_slide {
            • max-height: auto;
            • border: 1px solid #fff;
            • outline: 30px solid #000;
            • }
            • .testimonial-slider .et_pb_slide_description {
            • position: relative;
            • top: 25%;
            • padding-top: 20px !important;
            • padding-bottom: 10px !important;
            • height: auto !important;
            • }
            • .testimonial-slider .et_pb_testimonial_portrait {
            • display: table-cell;
            • float: left;
            • position: relative;
            • width: 175px !important;
            • height: 175px !important;
            • margin-right: 30px;
            • border: 3px solid #ffffff;
            • background-repeat: no-repeat;
            • background-position: center;
            • -webkit-background-size: cover;
            • -moz-background-size: cover;
            • background-size: cover;
            • }

            • .testimonial-slider .et-pb-controllers a {
            • border-radius: 0px;
            • }

             

            And that’s it, now your testimonial slider form should look like the one in the photo.

            There are other ways to do this, but what I like most about this method is it looks great on any screen size, without any media queries required!


            Helpful?  
            Help us to make this article better
            0 0