5 Fantastic Ways You Can Style Divi’s Testimonial Module

hello divination and welcome in today's tutorial I'm gonna share with you five fantastic ways you can style Divis testimonial module this is the final result we're aiming to achieve so without wasting a lot of time let's dive in and let's get started okay so the first thing we're gonna do here is to create a brand new page so I'm gonna come over here to pages click on add new we're gonna give a page on name so I'm gonna call this five fantastic ways click on use Divi builder so for this tutorial we're gonna build everything from scratch so I'm gonna click here on build from scratch and we're going to need four equal columns so I'm gonna go ahead and choose my column structure here so for now we're not adding any modules yet so I'm gonna close this and then we're gonna go into our row settings so I'm gonna click here on row settings and I'm gonna snap this over to the left because I prefer working that way so the first thing I'm gonna do here is to make this role fool with so I'm gonna click here on design sizing make this role full width and then we're also going to set our custom cutter width so I'm gonna come over here so by default it's set to 3 so we want to set it to 1 so the custom cutter width is the distance or the space between the columns so we want to make sure that we don't have any of that somes drag this all the way to 1 so when you start adding constant here you'll notice that there won't be any spaces between these columns for now I'm gonna save and then we're gonna come to our first column here and add an image so I'm gonna click here on add new module and I'm gonna search for my image module select it and then I'm gonna click here and choose an image from my media library so in the image I'm going to go with is this one right here so I'm going to click on it and by the way if you want to know what size I'm using here it's 400 by 600 pixels and this image is calls can be found from our pre-made layout so if you go to our premade layouts you can use high-res images and you can use them for commercial projects as well so now that I have my image selected here I'm gonna go ahead and click on upload image so now you can see our image has been added in there the next thing you need to do now is to go to our filters and just stylize this image so i'm gonna click your own design filters so the first thing i'm going to do is to go to saturation and i'm going to set this to 40% because by default it's set to 100 so we're gonna reduce the saturation there okay and then the next thing we're going to do is to they contrast and again we're gonna increase this to about 126 percent okay so that looks really nice so for now we're gonna go ahead and save and then the next thing we're gonna do is to add a button just below this so I'm gonna click this plus button here and so it's in fact my button module is here so I'm gonna select it so we want our button here just say read John's story so we want to type it out so now we want to customize this button because to be honest it doesn't really look very stylish so to do that we want to come over here to design and then you want to click on button use custom stands for buttons so now this opens up all these options that we can play around with to make our button look the way we want okay so the first thing I'm gonna do here is to set our size so right now I think 20 is a bit too big so we're gonna say this 214 and then over here on the color we're gonna add our colors for our gradient so I'm gonna click here on the second tab and then click this plus button to add our gradient over here I'm gonna add my first gradient color so I'm gonna paste it here now if you want to use the same values as I'm using throughout this tutorial I will leave a link to the post in the description below okay so let's add our second color so I'm gonna click here paste my second color over here and then we also need to adjust our gradient direction so we're gonna scroll down here by default it's set to 180 degrees so we want this set to 100 so that's all we need to do here for the background so let's go ahead now and make more settings so for the button border width it comes in at 2 pixels so let's set this to 0 now for our font we're gonna set our font weight to ultra bold so I'm gonna scroll down here and set this to ultra bold and uppercase now as you can see the button here is quite difficult to read so to change that we need to change our text color so let's go back over here to the top and change our button color and set it to white so now we can read that button text you can see this button is way too close to our image so let's add some spacing values so I'm going to scroll the way down here and choose spacing so we're gonna start off with adding a top padding of 10 pixels in fact it's Sigma D it's gonna be top and bottom padding so I'm add my 10 pixels here and then just activate this chain so by doing that the you added both to the top and the bottom now let's add our left and right padding and again this is going to be the same value here so I'm gonna add it both to the left and the right right so let's add a box shadow so I'm gonna click here on box shadow and the style I'm gonna go with is this one right here so I'm gonna select that and my box shadow blur strength we're gonna set that to about 80% and for my shadow color I'm just gonna click here and make sure I have the color that I need and of course the default one works really well so I'm gonna leave that as it is and then we're gonna save so the next stage now is to add a testimonial module to column 2 so I'm going to come over here click this plus button and then I'm going to search for my testimonial select it so the first thing I'm gonna do here is to add the author's name so I'm just gonna call him John Doe and job title John is gonna be a marketing director and the company name let's call this Divi so what we're going to do next is we're going to add a slide three transparent background so I'm going to scroll down here click on background so by default it's a it's a solid color so I'm going to click here and to get a transparent background you need to drag the slider down until you get RGB a values so I'm gonna paste my value here and as I mentioned before if you want to use the exact same values as I'm using throughout this tutorial I will leave a link to the post in the show notes below right so pretty much happy with what I've done so far the next thing I'm gonna do now is to go to design and we're gonna sterilize the quote icon color so I'm gonna come over here and click on this paintbrush tool so that would take me directly to my quote icon so my quote icon color is going to be here so I'm going to click on the eyedropper tool and paste my color in here just like that next I need to add my quotes background color so I'm gonna again click on the sky dropper tool now this time my color is going to be transparent somewhere and drag the slider down and then paste my values between the brackets so make sure the values that you enter here are between the brackets otherwise it won't work now the next thing I'm gonna do is to set our body text so I'm gonna click here on this eyedropper phone this print was true and our font here is going to be for Donna so I'm going to search for it select it and my body line height is going to be set to 1.7 so I'm gonna scroll down here and set this to 1.7 now it's time to go and set our top margin so I'm gonna scroll down here click on spacing right so for our top margin here for our desktop it's gonna be 15 V W and then we might as well enter our bottom margin I'll be on this screen so I'm gonna add 50 pixels next I'm going to enter my values for my tablet and smartphone so I'm gonna click on this little icon here click on tablet so for my tablet here is going to be 0 V W for the top and for the bottom it's going to be 50 pixels and that's gonna be the same for the phone and again my values are already in there okay so back to over here to the desktop the next thing I'm going to do is to set my margins so I'm gonna start with my left margin which is going to be minus 10 V W and that's gonna be for the desktop and tablet so for the smartphone it's gonna be 0 V W so while I'm with this page here I might as well enter my value for my right margin and this is going to be 5 V W okay so I'm gonna enter my value here and then I'm gonna go into the tablet view and then I'm gonna add in fact I need to go into my phone view and add 0 V W for my left margin so I'm still scroll down here so you can see what is happening so as you can see here my content is way too close to the edge but as soon as I start ending my entering my values now it's in frame which is exactly what we need to achieve with that great so for the tablet here we can see it's looking good and then if I switch over here to the desktop again it's still looking great alright so moving on its style it's time now to add our padding so for padding we're gonna add 70 to the top and the bottom so I'm gonna activate my chain here and then we also gonna go and add our left and right padding so I'm gonna come over here into my 50 pixels both through the left and the right so the reason why I've just done that is actually added enough breathing space in this rectangle here for our content readers to be able to read this clearly so moving on let's add a left border so I'm gonna click here on border I'm gonna click here on this tab for our left border so the most important thing here is to make or you add the Buddha width so I'm just gonna drag this until I get to about seven okay so seven is right seven pixels is right for me here and then I'm gonna add a color to that so I'm gonna click here on this eyedropper tool and paste my color so let's move on and add a box shadow to this so I'm gonna click here on box shadow and I'm gonna go with the first style here and for my blur strength I'm going to set it to 80 pixels so I'm going to scroll down here said this to 80 the spread strength is going to be minus 10 and finally I'm going to add my color so I'm gonna click here on the eyedropper tool and paste my color between the brackets so pretty much this is all I need to do here I'm gonna go ahead and save now the next stage is to clone these modules and add them to the rest of the columns so I'm gonna start here with the image in the button so I'm gonna hold down my command key to do bar to select someone click then click the button so if you're on a PC it's ctrl key you hold down the control key and then you click on the items that you want to mod to select so once you've done that now that they are both selected I'm gonna use another shortcut which is command C to copy if you're on a PC it's ctrl C okay so I've just done that next I'm gonna go to column 3 and then paste so to paint I'm gonna hit command V if you're on a PC it's ctrl V and then I'm gonna come to column 2 and then I'm just going to copy and paste it here so now that I have this moved over here the next stage now is to change the image so I'm just gonna click here on my image module click here on this image icon and then I can now change and add image that I want to add so I'm going to go with this one here in fact I can just cycle through these and see which one I like so in fact I've changed of a change of mind I'm gonna go with this one here click upload an image you're gonna change the button gradient so let's first save this and then we're gonna come over here click on this gear icon to get into the button module settings click on design button and then I'm gonna click here on the first color and replace that with my new color I'm gonna do that again on the second color paste my new color and now it looks totally different so everything else is fine the Grainger direction the gradient direction is 100 degrees so that's perfect so moving on the next thing I'm going to do is to change the testimonial border color so I'll firstly I'm gonna save this and then I'm gonna come over here click on my testimonial settings design border and then I'm just going to change my color here so this is the border I need to change so making sure that I've selected it I want to click here on the eyedropper tool and paste my color in here just like that so you can see now that the colors that I've added here are matching with the button here and it's different styles for these two employees I'm gonna save and then the final thing is just to change this name here so I'm just gonna highlight it and call her married oh great so that's my first example I'm gonna go ahead and save this now it's time to recreate example number two so I'm gonna scroll down here a little bit so I can click here on this plus button to add my new section so I'm gonna click here on regular this time I'm gonna go with three columns I'm gonna select that closest for now and then go into the row settings so I'm gonna click here on this gear icon design size make this real full width and as we did before we're gonna customize log gutter width so I'm gonna set this to one drag this all the way down to reduce the spacing between the columns so the next thing I'm going to do now is to add some custom padding values to rows and columns so I'm gonna click here on spacing so the first thing we're gonna do here is to add 200 pixels to the left and right padding so I'm gonna come over here add my value activate my chain and while we here we might as well enter our tablet and smartphone sizes so I'm gonna click here on this little tool click on tablet and for our tablet we can set this to 30 pixels and for the phone we're gonna set this to 25 and I'm gonna activate the chain as well so next I'm gonna go to column 1 left padding so I'm gonna set this to 5 pixels and for the right paddy we're gonna set it to 2.5 pixels now it's time to enter hours tablet and smartphone so I'm gonna click here on this little icon and we're gonna set this to 0 and the same for the phone that come that's gonna be 0 as well now let's head over here to column 2 left padding we're gonna set this to 2.5 pixels and this is going to be the same value for the left and the right so I'm gonna activate my chain and I'm gonna go into my tablet and smartphone and for these we just need to add 0 to the phone and the tablet move it on it's time now to add our column 3 padding so for the left I'm gonna add 2.5 pixels and for the right is good this time it's going to be five pixels and for the tablet tablet and smartphone it's gonna be zero and zero for the phone right so all our settings I'm plays I'm going to save this and the next thing I'm gonna do here is to add a video module to column 1 so I'm clicking on this plus button and search for my video module I'm going to select my video module here now to make our video really look nice we need to add an overlay so I'm gonna click here on overlay click this plus button and add our image for the overlay so I'm gonna go ahead and choose this one right here upload an image and you can see now it looks much better next we're gonna add a testimonial module to call them one so I'm gonna save this and click this plus button and search for testimonial I select it so again we're gonna give this author name John Doe marketing director and the company here I'll just put Divi so this time we're going to disable the approach so I'm gonna come over here to elements and then show quote icon I'm gonna say no to that because right now you can see it's behind the video and it's not highly visible so we might as well get rid of it next we can add a white background color to this so I'm gonna click here on background click here and add my color so the next thing I need to do now is to customize our text so I'm gonna click here on this brush tool and I'm going to set my body text color to black let us spacing to 0.5 minus 0.5 and my body line height it's going to be 1.7 right so moving on let's go over here to our spacing and add our margins so I want to add a top and bottom margin so let's start with the bottom margin of 30 some entry here and my top padding is going to be 50 so in fact you know what this 30 pixels needs to be for the tablet and the phone so I'm just gonna get rid of it again click here on this little icon then I'm gonna add that for my tablet and for my phone okay so make sure you add this to the right place back over here on my desktop so now I'm gonna add my top padding and bottom padding of 50 pixels so I'm added here and I'm gonna click here on this chain icon so that my value is added both to the top and the bottom next I'm gonna add my left and right padding so I come over here and the value is going to be 80 pixels next we're also going to add a border around some liquor on Porter so what we're gonna do here is we're going to add some rounded corners but to the bottom so to do that you want to click here on this chain icon because if you leave it on if you add any value here it's going to be applied to all the corners so that's not what we want so I'm just gonna get rid of this so to have your values to specific corners you want to disable this chain and then you can add your values manually so I'm gonna add it to the left and the right right now you can't see anything I think you'll be able to see this when we add a shadow' all right so moving on let's add our box shadow right so I'm gonna scroll down here click on box shadow and I'm gonna go here with the first option and now you can see our rounded corners so let's go ahead now and add our blur strength and also our spread strength so I'm gonna start here with the blur strength and set this to 80 and for my spread strength I'm gonna set it to minus 10 and then finally my shadow color I'm just going to come over here and just check and make sure that I have the color that I want and this is perfect so we're gonna leave the color as it is right so before we continue right here we have this image we don't need this image placeholder here so I'm just gonna click here or in fact and go over here to content and delete that so that's all we need for now I'm gonna go ahead now and save this if you take a look here at the top I have also made that mistake of leaving this here so let's go ahead and get rid of it so I'm gonna click here on module settings image delete that save that and I'm going to do the same over here as well okay so now we have everything that we need so all I have to do now is to clone the modules and place them in the remaining columns so use the shortcuts that we used before you can highlight all of these by holding down the command C and doing multi select and then you can just copy by pressing command C if you're on a Mac or command V if you're on a PC and then I'm just gonna do that next you want to come over here and change your video links so I'm gonna click here on module settings so I'm just gonna leave this video as it is but in your case you if you want to change this you can just click here on the actual video on the settings and then you click form inserts from URL and this will be the different link to your videos so this could be from YouTube Vimeo and so on so this is where you place you in your video URL but I'm gonna leave this as it is the only thing I'm gonna do here is to change my overlay image so I'm gonna come over here to overlay click on this area here and then choose the image that I want to use so for this I'm gonna go here and choose this image right here upload an image and you can see now it's a different image and I'm gonna save that and I'm gonna do the same over here click on gear icon overlay then I'm gonna add my image okay so that looks great so I'm gonna go ahead and save so that's our final design right so moving on let's do another example so this is going to be example number three so let's go ahead and add a brand new section click on regular and this time we need two equal columns so I'm gonna select that I'm gonna close this for now and then we're gonna go into the row settings so I'm gonna click here click on background and the first thing we need to do is to add a color to column 1 background so I'm gonna come over here click this plus button and paste my color in here now as I mentioned before if you want to use the exact same colors as I'm using throughout this tutorial I will leave a link to the post in the show notes below right so now that I've added my color let's move on and add our second color to column 2 background and I'm gonna just click this plus button and this color here is going to be white so I'm just click here from my color palette next we're gonna go to our custom gutter width so I'm gonna click here on design sizing you're gonna make this row full width and you're gonna set our custom cutter width to 1 next we're gonna come over here to spacing so this is where we want to add our margins and padding and so on so we're gonna start with the top and bottom padding so we're gonna set this to 0 both through the top at the bottom and left and right next we're gonna come to column 1 top and bottom padding and this is gonna be set to 100 and then the left and right padding is going to be 50 pixels both to the left and the right column to padding the same thing I'm gonna set this to 150 to the left and the right right so what we're gonna do now is we're gonna add a border so we're gonna click here on border and we're going to add rounded corners first and we're gonna set this to 20 pixels all around and then over here for our box shadow we're gonna choose the first style and set our blur strength to 18 so it's like let me scroll down so you can see what is happening here so for a blur strength and I said 18 right so now that we have everything in place the next stage now is to add on testimonials so I'm going to save this click this plus button and we're going to search for our testimonial module select it and let's add our name here and again I'm going to use John Doe Marketing Manager next we're gonna we're going to upload an image so I'm gonna come over here to image click this icon here and then we're gonna add our image so the first one I'm gonna go with here since this is John so I'm gonna select this one here load an image so wouldn't use these images you want to make sure that it's square otherwise you won't get the full face in frame so in fact you know what let me try a different one here I'm gonna go with this one so that's close to a square so you can see here now it's feeling in the whole space so what I'm gonna do here is I'm just gonna call this this lady here Susan next we're gonna disable this quote so I'm gonna come over here disable that and we also don't need this text here so I'm just gonna go back over here to my text and get rid of it so all I have now is just a picture the name and the company details right so the next thing I'm gonna do is to come over here to background and use background color I'm just gonna say no to that now let's customize our text so I'm gonna click here on this little brush tool and the first thing I'm gonna do is to add my body fonts so we don't to use the default so the one we're gonna use here is called fat face so I'm going to search for my font here add a color so we're gonna make this all black and for our text size we're gonna change this from 14 to 20 so you watch it nice and big so that's what we need to do for now I'm gonna go ahead now and save and the next the next stage now is to add a text module so I'm gonna click here on this plus button search for my text module select it and I'm just going to replace this text with some dummy lorem ipsum text like that so as you can see here this these paragraphs are way too close to the image here so let's fix that by adding a custom margin so I'm gonna come over here to design spacing and we are going to add a top and bottom margin of 50 pixels so you can see now this has now enough breathing space which is loose which looks much better so for now I'm gonna save and then the next stage is to add our company logo just be this paragraph text so let's go ahead and do that so I'm just gonna save this for now so I'm gonna come over here click this plus button and I'm gonna add an image module selected then I'm gonna search for my icon then I'm gonna use here so I'm gonna choose this one here upload an image and then we're gonna save so as we did before if you want to add all our modules on to the second column all you have to do is to copy and paste them over so I'm gonna hold down my command key and then I'm just gonna select all the modules like that I'm gonna hit command C to copy if you're on a PC control C and then coming over here I'm gonna hit control command V or control V if you're on a PC so all you have to do now is to come into this area here and click the module and change the image come over here and I'm gonna choose the image to go with that and I'm gonna go with this one this time upload an image and gonna change the name so I'm gonna give this guy a name and we could change this you know marketing director to something else but I'm not gonna bother with that for now and the next thing I'm gonna do here is to change this image in fact this image is already changed so I'm gonna save that then we're gonna come over here to the logo click on this module settings to change the logo the logo and this time I will choose a different one so I'm gonna go with loud Nick so upload the image and by the way if you want to resize these images there's a quick way to do this you can always come over here to design sizing and then you can just reduce by just dragging the slider down to about 50% so if you prefer to the left that's fine but you should want it centered you just click here and center it so for now he's gonna leave it at that save that and then I'm also going to apply this size over here to this logo as well okay so now they have the same size okay so moving on let's work on example number four so I'm gonna click here on this plus button to add a regular section next we're gonna have three equal columns so I'm going to select my column structure here closest for now and then open our row settings I'm gonna click on this gear icon design in fact we're gonna go to the background and you're gonna start with column 1 background so here on the column 1 background we're gonna add an image so I'm gonna click here on the 3rd tab click this plus button and add our image so the image I'm going to add here is this one right here so I'm going to select it upload an image and then the minute you do is to make sure that this image is not set to repeat so we want to come over here and set it to no repeat next we're also gonna add an image to column three background so I'm gonna click here on the third tab click this plus button and add our image so I'm gonna go with this one right here upload an image and as we did before we want to set it to no-repeat now let's head over to the sizing so I'm gonna click it on design sizing we're gonna start by making this row full width set this to yes custom cut it with yes I'm gonna set it to 1 and then I'm gonna equalize the column Heights now let's move let's head over here to spacing so the first thing I'm gonna do here is to add a top and bottom padding set this to zero and then save so over here on column one we're gonna add our testimonial module so I'm gonna click this plus button search for my testimonial module I'm gonna select it so one more time let's add our names so this is going to be John Doe so I'm just gonna call this manager TV right so before we proceed we want to make sure that that image is disabled so I'm just gonna come over here and delete it now let's give this module a background gradients so I'm gonna come over here to background click the second tab and then I'm gonna click this plus button so I'm gonna first start by adding my first color and then I'm gonna add my second color here by clicking on my select color paste it next we want to make sure that our gradient direction is set to 120 now let's set our quote icon colors so I'm gonna click here on this little brush tool so my color here is gonna be black and my background color it's gonna be white now let's move on to the text settings because as you can see we can't really read this text because it's on a dark background so we're gonna click here on this little icon and set our color here to light or you can set it here to white and for our body text alignment we want to make sure it's left aligned and let's head over now to the spacing because right now our text is way too close to the borders so we can improve that by adding some padding so I'm gonna come over here to spacing so I'm gonna start here by adding my top and bottom and then left and right so we're gonna set this all to a hundred and I'm going to do the same activate my chain and now we have enough breathing space around this text and if you want to add your custom text in here all you have to do is to click here on content text and then you can just paste over this dummy text so I'm just gonna do that and that's how easy it is you can set your text right so moving on the next thing I'm gonna do is to add a box shadow so I'm gonna scroll down here and click on design box shadow so I'm gonna go here with the first style next I'm gonna add my spread strength my blur strength and this is going to be 80 and my spread strength is going to be minus 10 and this time we're going to use a different shadow color which doesn't have a transparent transparency to it so I'm gonna click here on this eyedropper to drag this all the way up and paste my color in here next I'm gonna go to mine filters so I'm going to scroll down here and what we need to make sure is the opacity here the default one is set to a hundred percent so once we've established that we need to head over to the hover filter so I'm gonna scroll over here or hover over this opacity click here on this arrow tool and I'm gonna click here on hover and this allows us now to add a hover effect so ominous now this all the way down to zero so what's gonna happen now is when you add if when you put your mouse over this area here it's gonna switch between the actual testimonial here and the image so now I'm gonna save and then I'm gonna clone this testimonial module so I'm just gonna hit command C and paste it here on column three so all I have to do now is to change this name so instead of having John this time we're gonna use the name Jackie and to make this really different from the first one here let's give this its own settings so what we're gonna do here is we're gonna go into the settings and we're gonna change the gradient colors so I'm gonna scroll down here click on background and I'm gonna change my first color and then I'm gonna add my second color as well paste it here and the direction here is fine we can set it to 120 so that we have consistency with the first one so that's what we need to do for now I'm going to go ahead and save and then the next stage now is to just clone this row so I'm just going to come over here and click this clone button so all we have to do now is to go into our settings here into our testimonial settings and remove these gradient backgrounds so I'm just gonna come over here and just delete that okay and next we want to just want to add a normal you know white background so I'm gonna click here and add my white background so you want to do this again over here to the right so before we move on to to the right one so all we have to do now is to go into design text and we want to change this text from in fact we need to change the color here to black or dark so it's gonna click here and add my color so he can either make it black like that or if you want to make it slightly lighter or lighter gray in display around here with this eye icon selector so for now I'm just gonna save and then to just apply my changes quickly over here to the right all I have to do is to right click copy module styles and then I'm gonna right click here and paste module styles and then all you have to do is to change the names right so moving on I'm gonna click here on this plus button to add another regular section so I'm gonna click here on regular and this time we are going to add a color to a background color to the actual section so I'm gonna close this for now and then I'm gonna click here on the skier icon click on background and add my background color I'll paste it and then save next we're gonna add a column structure so I'm gonna click here on this plus button and I need three equal columns I'm gonna select my column structure here now let's head over to sizing so it's no but we're gonna close this for now and click on my row settings design we're gonna make this row full width so we need to come over here to sizing select make this row full width and we're also going to use a custom color width so I'm gonna come over here in fact I click the wrong button I need to use the custom cutter width and this time I'm gonna set this to 2 just reducing the distance over the gap between the columns slightly right so moving on you're gonna come over here and add a text module to column 1 so I'm gonna save this and then I'm gonna click this plus button and search for my text module I want to select it so here I'm just gonna add some dummy text in here next we're gonna add a background color so our color here is going to be white so I'm gonna select that now let's head over to our text settings so I'm gonna click here on this little brush tool so that's gonna take me directly to my text settings and what we need to do here is to make sure that our text orientation is set to centered right so what we're gonna do next year is as you can see this text doesn't doesn't have enough breathing breathing space so what we need to do now is to add some margins and padding's so I'm gonna click here on spacing and we're gonna start off by adding a 50 pixels to the left margin and we're gonna do the same to the right and for the desktop in fact for the smartphones I'm gonna click here on tablet and we're gonna start with that and when I set this to 20 and this is going to be the same values for the phone as well okay so back over here to my desktop the next thing we need to do now is to add a custom padding of 100 the top 80 to the bottom and then 50 50 left and right okay so now we have enough breathing space around this rectangle so that's what we need to do for now so I'm gonna save this and then the next stage is to add a testimonial module to column 1 so I'm gonna click this plus button search for it and then I'm gonna select it so the first thing I'm gonna do is to start by adding the names so again this is going to be John Doe director and I'm gonna add the company name here and then we also need a description in fact we don't need a description for this so I'm gonna go ahead and delete this and we don't also need this image here so I'm gonna come over here to image and delete the placeholder image so what I'm going to do now is to add my own custom image so I'm gonna click here on this plus button and add my image so I'm gonna go with this one here click upload now I'm gonna add a background gradient so I'm gonna click here on background click on the second tab click this plus button and at my first color here and then I'm gonna add my second color and then finally I'm gonna set my gradient direction to a hundred now for the icon settings I'm just gonna click here on this little brush tool to take me directly to my settings so I'm gonna make sure my icon color is set to black and then the background is set to white now for the text settings as you can see we can't really read what is here so I'm gonna click on this brush tool and that's gonna take me to my check settings so what I'm gonna do here first of all is to align this to the center and then I'm gonna come over here to text and just change that to light so that we can read it now let's head over here to our body text settings so what I'm gonna do here is to just make sure my body font is set to ultra bold so I come over here send you to ultra bold and the style is going to be uppercase and the body text size is going to be 15 so just a slight difference in size here and our letter spacing is going to be minus 0.5 and our line height is going to be 2.1 so the next I'm gonna do here is we want this image here to be overlapping on top of this description text so to do that we're going to use negative margins so I'm going to scroll down here go to spacing and I'm gonna add a custom margin to the top of minus 25 so what you could also do here is if it's not close enough what you can do is to use this dial and you can just drag it until you're happy with where it is so for now I'm certainly of mine ads - 28 so next we're gonna add a box shadow so I'm gonna come over here choose my style and for my brother strength I'm gonna set this to 80 pixels and then finally for my shadow color I'm gonna click here and just make sure that it's zero comma zero zero three and that's fine so the default is okay there right so move it on we're gonna clone these both modules twice and add them to the remaining columns so I'm just gonna save so as we did before you can just use your shortcuts you can hold down the command key and do mount to select so I'm just gonna select that and then all you have to do is to hit command C to copy if you're on a Mac if you're on a PC is ctrl C and then to paste its command V and control V so all you have to do now is to go to each and every one of these and change your testimonial gradients and also the images and the text that goes with it so these are final designs so I'm gonna go ahead now and save and then let's do a quick preview so I'm gonna save everything and then we're gonna exit the visual builder all right so this is our first design our second one so just before I go to the last one here let me show you that you can actually mouse over these areas and this has a really cool style and then this is our final design so there you have it thank you all for watching if you like this video please give me a thumbs up and do follow us on our social media platforms by doing so you'll be notified every time we release new tutorials and if you have any questions regarding this tutorial please leave your questions in the comments box below until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 14,025

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme

Id: cca9eGzqX_Y

Length: 36min 41sec (2201 seconds)

Published: Wed Feb 20 2019