How to Create Custom Testimonial Tabs with Divi (FREE Download!)

[Music] so [Music] so [Music] so [Music] hey divination thank you for joining us in this live stream today we'll show you how to create custom testimonial tabs with divi so if you haven't checked out the via make sure that you do i've mentioned a link in the description below and let's get to it right so before we get started with the actual tutorial let's take a quick look at the outcome across different screen sizes i also want to say hi to everyone on both youtube and facebook if you guys have any questions make sure to leave a comment and i'll be checking on those comments quite frequently so over here at the top i have um a blurb module with you know someone who's testifying and on the right side we have a testimonial now if i hover the other elements in the first column another testimonial shows up so this is completely custom-made with tv's built-in modules and we're creating the seamless transition between different tabs so it's not a click tab it's a hover tab so as soon as you hover one of the elements the testimonial changes on the right side now let's take a quick look on smaller screen sizes so we have a similar experience there but as opposed to on desktop we're using you know hover here it'll be click so as soon as people click on smaller screen sizes another testimonial will appear and the effect is quite seamless so we'll recreate that using a divi and we'll start off with a brand new page so over here at the top i'm going to enable the visual builder and you know as usual when creating a new page you'll get three options we'll start building from scratch all right so for this tutorial we'll just need one section and we'll start off by styling this section and i'm gonna open the section settings over here and i'm gonna start by adding a background color let me just grab the color code so this is the background color we're going for and then we'll go to the design tab and in the spacing settings we'll apply some custom margin and padding values so that will be five percent um top and bottom margin and five percent for the left and right side as well and then again we're using five percent for the top and the bottom padding of our section then we'll go to the border settings and add 20 pixels to each and every corner now that these section settings are complete we can add our first row and this row will contain if i go back over here this row will contain the divider and the text module so let me just add that we'll use a row with one column and before we add any modules to it we're going to open the row settings and in the spacing settings we're going to add some space between this row and the next row that'll come by adding three percent to the bottom margin all right now we can add a text module so i will place some h2 content now just make sure that this is h2 and i'll move on to the design tab and over here in the heading 2 text settings i'm going to use montserra as my phone font um i'll enable the semi bold font weight too and i'll increase my text size to 31 pixels and use -1 pixel for the heading letter spacing there so that's our first module up next we have a divider module so make sure that the show divider option is enabled and then move on to the design tab and over here we're going to change the color of our divider to white we'll make some changes to the sizing as well so the weight is going to be 10 pixels 14 width and 10 pixels height so this is the width is 14 i'm gonna change that over here and we're also keeping that you know those around the corners in our design by adding 10 pixels to each and every corner in the design tab now that we have our first row we can focus on the testimonials itself and to add those testimonials we'll use a row with the following column structure so the third one in the first column over here that's the one that we're using and we're going to open the row settings first and go to the sizing settings and we're going to make sure that the columns have the same height by equalizing the column heights over here this will just give this kind of seamless boxing effect where the height of both columns is the same and you get this really you know clean outcome and we're also going to add a background color to the second column you can notice that over here as well so let me just grab that grayish color and then i'm going to go to the spacing settings and on smaller screen sizes we'll need some padding so on desktop we'll keep that as you know as is and we'll enable the responsive option and make sure that we add some top and bottom padding of 300 pixels on both screen sizes so this will give the following outcome this is just space that we're generating for the testimonial so as soon as i add it to the tablet option over here it will be inherited on mobile as well so 300 pixels for the top and the bottom padding and we're also going to add some rounded corners 10 pixels to each and every corner now that we have the wireframe in place we can start adding modules i'm just going to take a quick look to see if you guys are following along let's see there are viewers if you guys have any questions make sure to leave them in the comment section on facebook or youtube and i'll be checking on those all right so to show the uh testifiers over here we're going to use blurb modules so let me just go back over here and add a first blurb module as soon as we finish the first one we'll then be able to reuse it so i'm just adding you know the name of the testifier to the title box and um in the body of this blurb module you can add the position or anything you want really and over here we're not going to use an icon but instead an image and it's important over here that you make sure that you have a one-on-one ratio because we're going to turn this as you can see in the preview we're going to turn this into a circle and to be able to pull that off we need images with the same height and the same width and then we'll go to the background settings we'll apply this purpley color so let me grab that color code and then we'll go to the design tab and over here in the image in icon settings we're going to choose left for the placement and we're turning the image into a circle by adding 100 pixels to each and every corner and you can already see it's turned into a circle over there next up we're going to style the title text settings so we're using a montzera for our font um same one we used for the title over there and semi-bold for the font weight and we're slightly reducing the letter spacing to -1 pixel for the body we're using another font um very popular one as well lotto it's called and we're slightly decreasing the body text size to 13 pixels now we still need to give a little bit of shape to our blurb module and we'll do that with some custom padding so in the spacing settings i'm gonna add five percent to the top and bottom padding and five percent to the left and right padding as well and this is already looking way better and of course we're keeping that around the corners uh style going on in our design by adding 10 pixels to each one of the corners in the border settings and now a um [Music] an image or an icon inside a blur module has by default an animation and if you go to the animation settings you can see that clearly it says top to bottom over here that's the animation that's going on um just to reduce that kind of you know in this particular design i didn't prefer having that animation going on because it would distract from the user experience so i just decided to go for no animation but you can leave it as is or change it into another one as well now it's also very important for you to add a css idea over here in the advanced app the css id that we're using is testimonial person one so you can read it off the screen over here so the first blurb module is going to contain this particular css id and then the other ones to follow are gonna change at the number at the end so it's gonna be consecutive so the second one is gonna have two at the end the third one three and four and so forth and so on um but really important that you add this because later on will create this kind of smooth effect with some code that we'll add and we'll definitely use the css id to get there now you can definitely notice that the structure of my blurb module over here is a little different the image is bigger so to make sure that we have that kind of experience going on we're going to go to the advanced tab in over here in the custom css options we're going to scroll down until we come across the blurb image and we'll assign a width of 25 so we're basically just increasing the size of you know this particular element within our blurb module and we'll also add some top margin to the title over here so john doe has a margin top of 25 pixels this will just help us align everything a little better in our design so now that we have the first testifier blur module we can reuse it so you can just clone it up to as many times as you want i'm gonna go for four different testifiers where you can add as many as you want really and change the style of the blurb module too that's really not that important um i'm gonna just change the background colors of the other ones real quick but of course you'll need to change all of the content all of the images and you know just match it with your own website really so these are the color codes that we're using but you can find everything step by step the color codes um all of the different settings written down in the blog post which is mentioned immediately in the blog post below so if you go to the blog post just i mean in the video description you can find that blog post so you can get those color codes there if you really like the design and you can also download this layout and just immediately upload it to your website and get started with it so as soon as you upload it to your page it'll be functioning so if you just want to rather you know use the layout you can do that too all right and then it's really important for you to change the css idea so i've mentioned this um not long ago that we need to have this kind of consecutive orders now i've opened the second blur module and i'm going to change the css idea number at the end so this is going to be 2 and we're following a consecutive order the third one is going to be three and this will just help us create you know a unique id for each one of the testifiers that we can link to each one of the testimonials all right so now we can move on to the second column i'm just going to take a quick look to see if there's any questions someone's asking is this going to use jquery yes you can use it you can you know kind of build something similar with the tabs module but um in this kind of user experience we're focusing on hover as you can notice and that's not included in the taps modules so that's the reason why i've gone ahead and used blurb modules along with text modules so we're still in the divi builder um the db environment we're using all the modules but we're just you know creating this kind of transition which is really smooth uh using some jquery which you'll be able to grab in the blog post that is mentioned in the description below or in the layout itself if you just want to get started with them all right so let's move on to the second column over here we're going to add a text module so we're going to add a quote here so over here in the design you can notice that in the top left corner and i'm just going to grab that character real quick there we go and we'll move on to the design tab and over here we're gonna use playfair display for this text module this is the color we're using so it's the same as the background color of our section we're increasing the size to 200 pixels and one em for the text line height then in the advanced tab we're gonna use absolute as the position in the top left corner and a horizontal offset of five percent so this crease this kind of cute design i would say and now we can focus on adding the testimonials by adding a new text module i'm just going to grab the copy real quick so the placeholder text that we'll place within our text modules there we go so you can place anything you want really and i'll move on to the design tab and in the text settings i'm going to go for later again use a black text color 20 pixels for the text size 2.1 em for the text line height and i'm going to make sure that this is centered then over here in the sizing settings you have to make sure that this is 100 so we're going to use absolute position and that's why we need this to be definitely 100 percent in spacing settings we're going to use 30 for the top margin and 10 for the left and the right side so over here in the advanced app the last thing we actually need to do to this text module is you know add a css id so this is going to be tested mono monocopy one you can notice that this number at the end matches the testifier in column one so we're not using absolute position as i mentioned this will do those settings will do um but make sure that you add a css id that matches the testifier in column one so if if you want this to be your first um testimonial that's linked to this testifier over here the purple one use one at the end and just follow that consecutive order so now that we've added the css id we can clone this four times matching the number of testifiers we have over here of course you'll need to change all of the content for each and every one along with the css id so again we're using this consecutive order we're changing the second one into two the third one into three the fourth one into four at the end and now as you can notice over here um there's one if i refresh this page let me just refresh it by default the first one is open and it also indicates it by you know slightly uh pushing the testify to the left side so the blur module to the left and this is the matching testimonial so to make sure that that one stays there by default when someone enters the page we're going to add a one css class to the first quote over here it's going to be show testimonial this is the css class you'll need to add to the first testimonial and now we can add our code so i'm just going to add a new code module you can place this code anywhere you want also in the divi theme options but just to keep it structured i'm going to add a code module or right below the divider module and i'll first enter my css code which you can grab by going to a blog post which is mentioned immediately in the description of this video so let me just add it this is the css code we're using so this just helps us tackle the different blur modules and find their matching quote along with the jquery code which i'll grab now as well so as soon as you add the code if you're following the tutorial and you're going through it step by step make sure that you place the css code between style tags and the jquery code between uh script tags as you can notice over here so that's really important and now we can exit this this should work perfectly now so i'm just going to exit my page and show you guys a preview all right so here we have it now if i hover the other ones another testimonial will appear so you can use this for anything you want not not only testimonials anything that you want to turn into tap but have like this kind of smooth hover effect you can use this design for and just tweak all of the modules that you want um and you know create your own variation of the design so just make sure that you use consecutive css ids um and yeah that you just followed this kind of structure of the tutorial and you can create amazing designs with it so i'm just gonna take a last look at the comment section to see if you guys have any questions so leon says love this testimonial format i'm happy you do i hope you guys enjoy it and make sure to check out the free download as well if you just want to get right into it and use it off topic but will there be a friday roundup i am not sure i'm sorry i don't know i have no idea but i guess we'll see soon but uh probably yes i would assume that there's gonna be one yeah please continue this type of tutorials i'm happy you like it monson hope i'm saying that right so yeah i don't see any more questions so um i guess this is it well thank you guys for joining if you liked it please give it a thumbs up and we hope to see you in the next one bye

Channel: Elegant Themes

Views: 4,404

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: p9kKIyuS7Z8

Length: 23min 28sec (1408 seconds)

Published: Tue Nov 03 2020