5 Ways to Get Creative with Divi’s Person Module

hello divination and welcome in today's video I'm going to share with you five ways to get creative with Davey's person module these are the final results were aiming to achieve so without wasting a lot of time let's dive in and let's get started so let's start by creating a brand new page so I'm gonna come over here to pages click on add new we're gonna keep a page on name I'm just gonna call mine five ways but you can name your page whatever you want and then I'm gonna click on use Divi builder so here we have three options built from scratch choose premade layout and clone existing so we're going to build our page from scratch so I'm gonna click here on build from scratch next we're gonna choose our column structure so I'm gonna go with four equal parts and then it's gonna close this for now now we need to go into the row setting so I'm gonna click here on this gear icon to enter my row settings now I prefer designing my sites with this snap to the left so I'm gonna snap my settings to the left and then I'm gonna click here on design sizing and then we are going to make this role for width we're gonna come over here to our gutter with and set this to one right so the next stage is to go to spacing options and we are going to add a top padding and bottom padding of 100 so just to speed up the process just activate this chain if your settings are the same both from the top in the bottom so in this case it's a hundred and you can see here the hundred has been applied both to the top in the bottom now I also need to add a padding of 100 both to the left and the right so I'm gonna add that activate my chain and we might as well go in and set our settings for the mobile devices so I'm gonna click here on my tablet and set this to 80 so make sure you've clicked on the tablet tab I'm gonna set this to 80 activate my chain do the same over here set this to 80 now this value is also going to be the same for the smartphone so I'm just gonna make sure that I enter my values here okay so now that I have all my values in place I'm just gonna click back on the desktop tab now let's add an image module to column 1 but before we do that we just need to save our row settings click this plus button and search for our image module and then I'm going to select it right so I'm gonna click here go to my media library and look for my image so the image I'm gonna use is this one right here so I'm gonna select it click on upload an image now I'm gonna go to my box shadow so I'm gonna click here on design box shadow and I'm gonna go with this first design here so we just want this drop shadow to be very very subtle so we soon leave this as it is now what you could also do is to come over here to the filters and play around with the filters to achieve a specific look so on the contrast I'm gonna set this to about 40% in fact let's make this one 30 and for the saturation I'm gonna set this to 40% and then I'm gonna save now over here on column 2 let's add our person module so I'm going to search for it and select it so we can give our name here so we're gonna call this Jessica Joe and for the position let's call this called this marketing director now let's go ahead and add a gradient background so I'll come over here click on background add the second tab I mean click the second tab and click this plus button to add our colors so I'm gonna start with the first color here now this color is going to be an RGB a value so I'm just gonna paste my value between the brackets just like that now 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 description below now it's time to enter our second color so I'm just gonna click here just select the color and again this is an RGB a value so notice that I'm dragging this slider over here to the right and then I'm gonna paste just like that now let's head over to the gradient direction and change this from 180 to 150 right so what we will need to do next is to get rid of this image here so I'm gonna come over you to the image and delete that and also get rid of the contents in here scroll down and just get rid of all this content great so now the next stage is to go into the design tab and customize our body text settings so I'm going to start here with the title font and I'm going to search for my font called Balu I'm gonna select it and then over here I'm going to change my title color to white now I'm gonna come over here to my body text so first of all let's change our font weight to light and color to white and then we're gonna scroll all the way down here to our spacing and let's add some margins so I'm gonna start off with my margin left - 4vw and we might as well go in and set our margins for the smartphone so I'm gonna click here on this little icon click on the phone tab and on the phone tab this needs to be 0vw okay so now you can see it's just snapped into place great so I'm gonna come over here back to the desktop tab so for the right margin we're gonna set this to 8 VW and again for the smart for the smart phone we're gonna change this and set it to zero okay back on the desktop tab now let's add our padding of 25 both to the top and the bottom so I'm gonna activate my chain so now our text has some breathing space on the top and the bottom and we also need to add some left padding like that so now that looks much better now let's head over to the border and we are going to add a left border and we're gonna set this to 3 pixels and we can change the color to white and then over here on the box shadow we're gonna choose this first style and change our blur strength to 80% right so we're done for now let's go ahead and save now we need to add another person module to column 2 so I'm going to click this plus button search for my person module I'm gonna select it so what we're gonna do here is we're going to add some dummy links for our social media profiles so as you can see the moment I enter this link these icons now are starting to appear here on the bottom now what we could also do is go into the design tab and change these icon colors by coming over here to icon and then I'm gonna paste my color in here now back over here on the contents what I'm gonna do as well is to get rid of this image and also the title and position right so now it's time to go to the padding so we can so that we can adjust our spacing and text settings so I'm gonna click here on design spacing and I want to add a top padding of 30 used to give this some breathing space I'll be also gonna add it left padding of 30 over here so that it's not very close to the to the image right here right so now that we have this let's go ahead and also make some adjustments for our tablet and smartphone so I'm gonna come here to the phone tab and set this to zero and notice what happens when I set this to 0 now it feels in more of this space which is great okay so now that it's done that's pretty much our design for our first example so I'm gonna go ahead now and save now let's work on the next example so I'm gonna click this plus button here to add my new section it's gonna be a regular section and again gonna have 4 columns so I'm just gonna close this for now and then go into my row settings so over here we're gonna add some background colors so I'm gonna start here with our column two background color so I'm gonna come over here to column two click this plus button to add my background color and paste it just like that we're gonna come over here to design sizing just like what we did before we're gonna make this row full width we're gonna come over here to gutter with set two one and we're going to equalize the column height now let's go let's come over here just spacing so what we're gonna do here is we're gonna add a top and bottom padding of a hundred so as we did before he's gonna activate this chain and for the tablet and phone we're gonna set this to 80 but before we do that we might as well enter our left and right padding activate my chain and then I'm gonna click on this little icon and go into my tablets and here we're gonna set this to 80 and then on the phone it's gonna be the same value 80 throughout okay great so I'm just going to go ahead now and save and then we're gonna come over here to column one and add an image module selected so I'm gonna choose my image upload an image and then we're gonna come over here to design and add a box shadow so gonna go with the first design here and the box shadow blur strength needs to be set to 160 and to my 160 here so now you can see here that my blur has increased in strength right so as we did before let's head over to the filters and we are going to start with the saturation of 40 so I'm gonna edit here and then we are also going to add a contrast of 130 and then save right so over here we can add a person module so I'm gonna search for it select it so as we did before we're gonna give this a name and this is gonna be Jessica Jones so the position just as before we're gonna set this to marketing director then I'm gonna get rid of all this text and also the image right so over here on the background color we're gonna add our color but this is gonna be an RGB a value so I'm going to just drag the slider down a little bit until I get the RGB a values and then paste my values between the brackets now if you want to use the same colors that I'm using throughout this tutorial as I mentioned before I will leave a link to the post in the show notes below all right so moving on I'm gonna scroll down here and go to my text orientation so I'm gonna click here on design text and then I'm going to set my orientation to centered so now we're gonna start with the title font and we need to change this font from the default to a Braille fat face so I'm gonna search for it and here it is we're gonna change our text color to black and the size to 40 now it's time to make changes to the body to the body text so I'm gonna scroll down here to the body text settings change our font to light and the color to black just like we have here on the title and we're gonna change the size from 14 to 15 pixels now it's time to head over here to the spacing so I'm gonna click here on spacing and we're gonna start off with our left margin and this is going to be minus 21.6 now while we add it let's add our tablets settings so I'm gonna set our tablet settings to minus 46 and for the phone we're gonna set this to zero VW now it's time to add our padding so we're gonna start off with padding top and padding bottom of 30 so I'm gonna come over here into my 30 and activate my chain so that my value is applied both to the top and the bottom so when you take a look here at what we've just done we've just created some breathing space here on the name and the title which is great design okay so now it's time to go over here to the box shadow I'm going to choose my style and then over here for the blur strength we're gonna say this to 80 and then save right so over here we're gonna add another person module so I'm gonna search for it so as we did before we're just gonna add some social media links here but I'm just gonna add some dummy links for now so that I couldn't control and now you know they're now showing over here okay so what we're gonna do here again on the image we're gonna get rid of this image and also the title and the position and then over here on design I'm gonna go to our icons and set our icon colors to black just to match our titles over here on the top now as you can see we don't have enough breathing space in this area here so let's go to our spacing and add our top margin of 3 V W we also need to add our top padding and bottom padding off 30 activate my chain and we also need some left margin left margin and right margin okay so that looks much better now so pretty much this is our second style so let's go ahead and save so as we did before we're gonna add a new section so I'm gonna click here on this plus button at a regular section for columns and then just gonna close this for now and then go into the row settings in fact because we used the same settings here what we're gonna do is we are going to copy all the row settings and paste them on to our row that we've just created so I'm going to copy the role styles and paste them here great so what managed to do now is just to go into our row settings design spacing so what we need to do here is just to make sure that our settings here are okay for our tablets and also our smartphones so I'm gonna start off here with the padding click here on this little icon and then check my tablet so at the moment our padding is set to 80 so this needs to be set to 30 and for the phone the padding needs to be set to 25 and for the top and bottom here this is okay because we have 80 and the same for the phone great so all the settings that we need are now in place so let's head over now and add our person module to column 1 so I'm just gonna save this for now click this plus button search for my person module now select it so let's start off with the name and then we're gonna add a background color so I'm going to click here on background click this plus button and add white as our background color and then over here we need to get rid of this image and the text so all we need is the name and a position so I'm going to delete that now let's head over here to the design tab and set our title font weight and colors so I'm gonna click here on title text when we change our font weights to ultra bold and our color to black and the size to 40 pixels now this time we're gonna add letter spacing of minus 4 pixels and then we're gonna move here to the body text and for the body text we are going to change our font weight to light and the color to black and the size to 15 now it's time to go to the spacing tab so I'm gonna click here on spacing so first of all we're gonna add a margin on 40 to the top top padding of 30 and 30 on the bottom as well and then left and right is also 30 now over here on the top for the costal margin let's go in and set our margin for on on 2-0 for the tablet in the phone so I'm going to come over here set this to 0 and 0 for the phone as well now for this beginner we are going to add a different design to this so let's head over here to our border and what we're going to do here is we're going to add in fact we have to break the chain first because we want our top left corner to have 20 pixels and then we're gonna come over here to a box shadow and choose the first style and you can see here my 20 pixels has been applied and it's only on the top left okay so now that we have our box shadow let's go ahead and make some further adjustments so I'm gonna scroll down here until I get to my blur strength because this is where we need to change this from 18 to 140 okay so that's looking good so far next we're gonna add our shadow color so our color here by default is this light gray which has a transparency but we need our own custom one so I'm gonna paste my value between this brackets just like that and now we have this beautiful color so for now we're gonna save and then we're gonna add a person module to column 1 so I'm going to click here on this plus button search for my person module select it so this time we're going to remove the name remove the position and our social links ok so we can see here that they have been added here on the bottom so what I'm gonna do next is to get rid of our image and click here and delete that right so here we also need to add a background color so I'm gonna click this plus button add white to my background color and then you're gonna click here on design go to our icons and set our colors I can color to black so that it matches the name and the title so as you can see all our text here is way too close to the edge so we need to come over here and add our margins so we're gonna come over here to spacing and add 30 to the top and bottom left and right and make sure you activate this change because these sizes are being added both to the left and right top and bottom and then over here for the custom margin I'm going to set this to 0.5 VW right so over here we're gonna go to the border break this chain and add 20 pixels of the bottle and then finally let's add our box shadow so I'm gonna come over here choose my box shadow so let's start with the vertical position because this time we're gonna set this to 50 pixels and our box shadow blur strength I'm gonna set this to 140 and for the spread strength frequency this 2-10 and then you're gonna add our color by replacing what we have here in the between the brackets like that and then save now over here on column two you we need to add an image so I'm gonna search for my image module select it and then I'm gonna choose my image from my media library here click on my image upload an image and then I'm gonna come over here to design border and this time we're gonna add 20 pixels to all the borders so now we have a beautiful rounded corners here on this image alright so that's looking great so the next thing I'm gonna do now is to just save this for now and then go into my row settings background and remove column two background color just like that okay and then save now back over here I want to go into my image module click on design and then I'm gonna come over here to my box shadow and choose my style and change my blur strength and this time this needs to be set to 80 now let's go to the filters so let's start off with our saturation and set this to 40 and our contrast to 130 and pretty much this is art design for this example right so let's go ahead and save now let's recreate example number four so I'm gonna click here on this plus button click on regular so this time I'll column structure is slightly different how many choose this one right here I'm gonna close this for now and then I'm gonna go into our row settings click on design sizing make this real full width and then we're gonna activate our gutter width and set this to 1 I'm gonna head over here to spacing so for our top and bottom padding gonna say this to 100 activate the chain and for the tablet in fact you might as well enter our left and right and again this is gonna be a hundred now let's go to our mobile devices and set this so here on the tablet this needs to be set to 80 and the same for the smartphone so that's gonna be 80 as well and then over here for the left and right this needs to be set to 30 for the tablet and 25 for the phone okay great so now that we've added all our spacing values let's go ahead and save and then on column one we need to add a person module so I'm going to search for it and select it so we're going to start here by adding social media links I'm gonna remove the image and we also need to enter our name so now let's go to the icon settings and set the color to black and for the text settings let's let's set our text orientation to center right so let's start with our title font and we're gonna set this to ultra bold and the color needs to be black and the size we're gonna set this to 40 now as we did before in the previous example let's set our little spacing to minus 4 okay now let's move over here to the body text settings and here again gonna say this to light our size is gonna be 15 and the color is gonna be black and for the body line height you can set this to 2 a.m. now let's head over to the spacing so I'm gonna click here on spacing and let's start off with our top padding of 280 so I'm gonna set this dude to 80 and this is the same size for the bottom as well so I've activated the chain left and right padding is going to be 200 activate my chain again now let's add our values for our tablet and phone so let's start with the tablet and this is going to be 200 and 150 and for the phone this needs to be set to 50 and 20 okay so that's that looks much better now on the phones and that looks nice with the tablet as well and perfect for the desktop great so moving on the next we're gonna do now is to head over to the borders so we're gonna set this to 700 and notice that the 700 has been applied to all the sides and then we're gonna come over here to the border width and set this to 1 so now we have a perfect circle let's add our border colors by clicking here on this eyedropper tool and in fact our color is right so it's all threes so I'm gonna save this for now right so over here we need to add an image some research for my image module select it and then I'm gonna add my image upload an image great so the next stage is to come over here to design spacing so we're gonna add a top margin off 7vw and left here we're gonna add minus 5vw right so over here on the border we're gonna add a thousand pixels to all the sides to form a perfect circle and then we're gonna come over here to the box shadow choose our style and then we're gonna choose our blur strength of - I mean off 160 and the spread strength of -10 now it's time to head over to our filters so I'm gonna click here on filters and I'm gonna start with the saturation bring this all the way down to zero and then I'll contrast we need to set this to 130 so pretty much this is our design let's go ahead now and save now you'll notice that my circle here is not a full circle so you may want to go back in here and adjust I I mean you adjust your borders just click here on borders and perhaps set this to a thousand so this is just going to depend on the size of your monitor okay so just go ahead and adjust that so over here this spot here is really annoying me let me just go back in and see what size we need for the border okay so let's move on to our fifth example so I'm going to come over here and click this plus button to add our section and for our column structure at this time we're gonna go with this structure so I'm gonna select it and we just close this for now and let's go into row settings so here on our row settings that start with let's start by going to our background and we're going to add a column 1 background gradient so here on column 1 let's click on the second tab click this plus button and let's start by adding our first color so I'm gonna click here to select my first color I'm going to paste my color in here and my second color is going to be white and for my column 1 gradient direction and we're gonna set this to 90 because by default it's set to 180 and for our start and end position this is gonna be 40 and 40 percent next we're gonna come over here to design sizing we're gonna make this full width and we also going to activate the gutter width and set this to 1 now let's head over to the spacing and we're gonna start with our top padding on and bottom padding over 100 activate our chain so that our values will be applied both to the top and the bottom and then I'm gonna come over here at left and right activate the chain so over here on the tablets we're gonna set this to 80 at my 80 here and left and right ease 30 right so for the smartphone I'm going to change this 30 to 25 alright great so all our custom margins are now set next we're gonna add a person module to column 1 so I'm going to save this click this plus button and search for person module selected so again let's enter our name marketing director and then you're gonna add social media links now we don't need the image for this on and get rid of the image now let's head over here and sit on icon settings so the color is gonna be black and now we're gonna go to the text settings so first of all the orientation is going to be set to right so let's start with our title font so title font here women we're gonna choose a font called Chandler we're gonna set the color to black and also the size to about 50 so we want this nice and big and for the letter spacing we're gonna set this to minus 1 now let's head over to the bath body text settings so let's start with the font weight when I say this to light color to black science 215 and online height to 2 a.m. and now I'm gonna go over to the spacing and we are going to start off with top padding and bottom padding of 200 activate on chain and then for our left padding we're gonna say this to 500 and to the right it's gonna be 200 now let's head over and set our tablet sizes so for the tablet it's gonna be a hundred top and bottom and then two fifty and a hundred and then for the phone this is going to be 50 go to the left and the right okay so now that we've set our a spacing the next stage now is to go to the borders so we're gonna come over here to border so the width needs to be said two three and then for the style let's set it to dashed so we're done for now let's go ahead and save and then over here let's add an image module so I'm going to search for it selected going to choose our image then uploaded now let's head over to a design spacing and we need to add a top margin off a 7vw and for our left margin here we're gonna set it to minus 10v w and then I'm gonna go into the tablet mode and set this to zero and the top margin 2-2 VW right so let's head over here to our box shadows and we're gonna choose our first style and for our blurred strength you can set this to a 160 and our spread strength to minus 10 right so it's time now to add all our filters so I'm going to come here to filters and for this time for saturation will set this to 50 and our contrast to 130 so pretty much this is our final design let's go ahead and save and then let's save the page and do our final preview so I'm gonna exit the visual builder so this is our first design second design and that's all final one so they have it thank you all for watching if you like this video please give me a thumbs up and if you have any questions regarding these tutorials please leave your questions in the comments box below and I'll do my best to respond to them until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 8,271

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

Id: 784-Ypkah94

Length: 30min 6sec (1806 seconds)

Published: Tue Jan 08 2019