How to Fill Text with Images for Creative Backgrounds using Divi

hello divination and welcome in today's tutorial I'm going to show you how to fill text with images for creative backgrounds using Divi so let me show you the final result of what will be designing in today's tutorial so as you can see this is our first example and this is our second one so as you notice here our image is actually within the main text which is what we're trying to achieve here so as we go here we have a different star there and then finally for our fourth design we also have a totally different style okay so without wasting a lot of time let's dive in and let's get started okay so over here I'm in my admin dashboard so the first thing I want to do is to create a brand new page so I'm going to come over here to pages and click on add new so you can call your page whatever you want so for this I'm just going to call it design click on use the Divi Builder and then I'm gonna go straight into the visual builder so next we want to add a text module so I'm gonna click this plus button here to add our columns first so for this we're going to need say single column and in the column we're going to need a text module so I'm going to select my text module here so the text we're going to need here is just going to be 0 1 so that's the text we'll get you need now let's go on to the design option so I'm going to click on design text so our text font is going to be popped in so I'm gonna select it here and then I'm going to come over here to the font weight and make sure this is set to heavy and then for the text size we're going to set this to 40 EMS so we might as well add the settings for the desktop and the tablet so I'm gonna click this little button here click on tablet and then for the tablet we're going to make sure this is set to 25 EMS and then for the smart phone we're gonna set this to 15 like that so I'm gonna go back to my desktop next we're going to add our text color so I'm gonna scroll down a little bit select my selector and then what I'm gonna do here is I'm going to drag the slider down a little bit because we are going to need an art be a value so I'm gonna paste it within the brackets now if you want to use the exact amounts that I'm adding here you need to go to the post which I'll link to in the show notes below and that's that's where you get all the settings next we need to come over here to the text orientation and make sure that it's set to centered so I'm gonna scroll down and then click on center now it's time to add our custom padding so I'm going to click on spacing and then for the padding top we need to add 288 pixels and then 288 for the bottom next we're going to come over here to the borders and then we're gonna set our border width to one pixel and then we're gonna set the border color to white like that next we need to set our blend mode to screen so I'm gonna come over here to filters blend mode and then I'm gonna set it to screen so once we've done all this we can go ahead now and save right so what we gonna do next is to add a brand new row and add a call to action module so I'm gonna click a single column search for my call to action I'm gonna select it and the title here is going to be called Discoverer and then for the button text we're just gonna call this learn more and for a background color we're going to make this transparent so I'm gonna click on background and then click on here and then I'm just gonna drag both sliders all the way down until we don't see anything so this has just made my background transparent now let's go to the design tab and make sure that our text is now visible so I'm going to click on design text and then over here where it says text color we're gonna change this from light to dark so now you can see our text is now visible you can see here that our we added a button but it's not visible that's because I haven't added the link to the button so let's go back and do that so I'm gonna click on content click on link and then for my button URL I'm just gonna add a blank link and then we're gonna go back to design so let's go ahead and make our adjustments to our text so over here we're gonna make sure text orientation is said to left and then we're gonna come over here to our title text make sure that this is set to Poppins just so that we keep everything uniform right so the next thing we're gonna do is to set our font way too heavy so I'm going to come over here change this to heavy and then we're gonna make change our font style and make it all caps right so the next thing we're gonna do is to come back over here to the content because as you can see I haven't added my description text in here so this looks kind of weird so let's fix that so I'm gonna come back over here to my content tab click on text and then I'm gonna paste my content here in the content area like that so that looks much better now okay so let's go back to the design and continue making all our adjustments so for our title text we're gonna change the size to about 71 nice and big and then we're also going to adjust our and other screens so we're gonna start off with the tablet we're gonna set this to 50 and then I'm gonna come over here to the smartphone and we're gonna change this to 40 right so this just makes it so that when we look at this design in different screen sizes everything looks nice and nothing is being cut off right so let's go ahead and add our title text color so I'm gonna click here and then I'm just gonna reduce this a little bit so I can add my RGB values in here so I'm gonna paste it like that so that's going to be our text color and then I'm gonna add some letter spacing so we're just gonna increase the support for just like that now let's go to our body font so I'm gonna click on body text so we're gonna change this to poppins and then over here for our font weight we're gonna set this to light now it's time to add our sizes so we're gonna make sure this is set to 32 and then I'm gonna click my tablet view and then we're here we're gonna set this to 24 but we're gonna make you 24 for both screen sizes like that and then back over here to my desktop so you can see here that's looking really nice so let's adjust the body line height so over here I'm just gonna make sure that it's set to 1.3 and then for our body text color I'm gonna set this to all threes okay so that's looking really nice so the name see we're gonna do here is to work on the button so to make our button adjustments we need to make sure that we activate use custom styles for buttons so I'm gonna say yes to that so I'm gonna start over here with a button text color and I'm going to paste my value in here like that next we're gonna go into the button background color click the plus button and then I'm just going to drag the slider down a little bit and then paste my value within the brackets like that now let's adjust our margins so I'm going to scroll all the way down here until I get to spacing so over here I'm going to add a custom margin of minus 600 pixels and then over here for the bottom I'm gonna add 40% now the reason why we set the margin with a pixel value is because we wanted to limit the movement of the module when adjusting the browser width so the bottom is set to 40% in order to keep the bottom section from overlapping the row that holds this module okay so now that we have all our information on our page let's go ahead and make our adjustments to the row so I'm gonna save and then I'm gonna come over here to my row settings click on background and then over here on the column 1 background I'm gonna click this plus button to insert our image so the 3rd that I at the tab that I need is the 3rd tab so I'm gonna click on it click the plus button and then I'm gonna add my image click on upload an image next I'm gonna come over here to my design tab click on sizing we're gonna make this row full width so let's activate that by clicking yes and then I'm gonna come over here to use custom gutter width and we're gonna set this to 1 so this allows our row to go edge to edge next we're gonna just our padding so I'm going to click on spacing so for the padding top I'm gonna add 10% and 7% bottom and then we're gonna come over here to the border and you're gonna set our border width to 1 but we're going to set our color to white like that and then I'm gonna save now right now I can't really see where everything is so what I'm gonna do is I'm going to activate my grid mode so I'm gonna click over here on my expand settings click these little dots to go into my settings and then I'm going to activate my grid mode in fact I might as well activate all of them and then I'm gonna save right so what I'm gonna do next is to come over here to my second row click on the gear icon to go into the settings I'm going to click on the design spacing so what we're gonna do here is we're going to adjust our custom padding and add 0 to the top and 0 to the bottom like that and then we're gonna go ahead and save so the final thing that we're going to do now is to get rid of this image on the background by adding white star to our text module so to do that because right now we can't really see where this text module is so I'm gonna come over here to my wireframe view click on the settings of the text module and then I'm gonna go back to my desktop view so all I have to do now is to come over here to background add white to my background so you can see here as I'm dragging this all the way to the white it's actually getting rid of my image and living what living my image in the number and this is exactly what you want to achieve okay so I'm going to drag this all the way to white so now you can see that it's just the the number with the image coming through right here which is a very good effect so all I have to do now is to save so all we have to do now is to finally add our dividers to our section so let's go ahead and do that so I'm going to come over here to my section settings click on design dividers so we need to add the first divider to the top so I'm gonna click here and choose my design which is that and then next I'm going to come over here to my divider color and add my color so this is going to be an RGB a value so I'm just gonna drag the slider down a little bit and then paste my values in here like that now let's come over here to the divider height and make some adjustments to this so you can play around with this until you're happy with how high you want this to be but make sure that it's not too much because as you can see this is gonna start going into the row so you want to keep it up there so in my case here I'm going to leave it at about 245 so we're gonna come over here and add divide it to the bottom as well so we're gonna choose our style as we did before I'm gonna select it like that add our divider color like we did before I'm gonna paste my values within the brackets and then I'm also going to adjust the height like that and then he should want to make adjustments on the tablets you can always come over here to this little icon go to the tablet and then you can always make adjustments here so for the tablets I'm gonna bring this down to about 125 so that we can see this design and then over here on the divider arrangement we're gonna make sure that this is set to on top of content okay so we may want to just to increase this a little bit maybe to about 127 like that but as I mentioned you can play around with these and see what works best for you so I may as well come over here to the top and make adjustments to that because that's a bit too high so I'm going to reduce this a little bit so that's looking much better okay so I want to go back to my desktop view so now that we're done I'm gonna go ahead and save right so what we're going to do next is we're just gonna add a section which will separate all our sections that we're going to create below this so for now I'm not gonna add a row so I'm just gonna add a background color in this section so I'm going to click my section settings click on background and we're gonna come over here to this second tab and add a gradient so I'm going to click this plus button here so over here on my first color I'm gonna add my RGB a value like that so you can see here that but color had just blended into my section here and then for my second color I'm gonna do the same pasted my RGB a value within the brackets and then we're done with this we're gonna go ahead now and save okay so what we're gonna do next is to start working on our second section so to do that we're going to copy what we have here on the top section and add it below this section that we've just created so let's go ahead and do that so right now my page is quite large and I can't see where I am so I'm gonna go into my wireframe view so I'm gonna copy or in fact I've got I can clone this section and then drag it below this section that would just create it so I'm just gonna click and drag great so let's go back to our desktop view so as you can see these colors are not working well together so let's go ahead and fix that so I'm gonna come over here to my section settings click on design dividers and then we're gonna go to the divider top right there click on the color and I'm going to paste my color in here like that so now we can see that things are transitioning well between these two sections and that's exactly what we need so I'm gonna save so the first thing we want to do here is to change this value from 1 to 2 so I'm gonna click the text module change this to 2 okay so what we're gonna do next is we're gonna change this text from discover to design so I'm gonna click on text change this from discovery to design next I'm gonna come over here to my design tab and change the color of my button so I'm gonna click on button button text color and then I'm gonna paste my color in here okay so we have all the elements that we need so this look this is looking really really nice okay so what we're going to do next is before we add the third design we're going to add a transition section which will have the colors of both sections as we did before so I'm going to come over here click this plus button click on regular and then just close this and then over here I'm going to come to my section settings click on background and then click the second tab click the plus button and then we're gonna add our two colors so my first color here is going to be an RGB a value so I'm gonna click here and paste my values within the brackets I'm gonna do the same over here for the second color paste my value and then we're gonna go ahead and save okay so now it's time to create our third section so what we need to do is to just copy the one that we've just created already so I'm gonna come back over here to my wireframe view so I can really see where my sections are so I'm gonna clone this and then drag it below this section that we've just created like that and then I'm going to go back to my desktop view okay so before I get started I'm gonna come over here and adjust my section color so I'm gonna come over here to my settings click on design dividers and then for the top one I'm just gonna add my color like that so you can see here that this is now seamless I'm gonna save this so what we're gonna do here is to add our image to our row so let's go ahead and do that so I'm gonna come over here to my row settings click on background and then I'm just gonna add my image I'm gonna select it from my media library and then click on upload an image so you can see here my image has now been added so I'm gonna close this for now and then I'm gonna come over here to my text module and it's set my number here to number 3 I'm gonna save this for now and then over here on our call to action module we're gonna change our text to develop so I'm going to come over here to my wireframe view select my call to action settings and then change design to develop like that then I'm just gonna make sure that everything is in place excellent so I'm gonna go ahead now and save so pretty much this is our design for our third section let's go ahead and do the last and final one so as we did before I'm going to click this plus button here to add a brand new section it's gonna be regular section and then I'm just gonna add my transition colors so I'm gonna come over here to my section settings click on background and then I'm gonna click on the gradient tab so I'm gonna click this plus button here to add my colors I'm gonna paste my first color in here it's gonna be RGB a so I'm gonna paste the values between the brackets like that click on the second one and then I'm going to paste them within the brackets like that so that's all we need to do for now I'm gonna go ahead now and save now it's time to duplicate one of our sections so let's go ahead and do that so as we did before I'm gonna come over here to my wire frame view and then I am just gonna use this one that is just above my section so I'm gonna clone this and then I'm gonna drag it below this section like that and then back over here to my desktop view so I can see everything great so what we want to do here is to change the colors of the blend that we a that's happening right here so let's go ahead and do that so I'm going to click on my section settings click on design dividers so for my top color I'm gonna paste my value in here like that so now we have a similar transition here which is great so I'm gonna go save okay so what we're gonna do next is we're going to change our text in here so first of all instead of having them before we're going to change this to go so notice that I'm doing this inline instead of going into the actual modules okay and then over here the word develop we're gonna change this to deliver and then the next thing we're gonna do is we're going to change our color here to on our button to match what we have here on our dividers so I'm just gonna correct the spelling here okay so what I'm gonna do is I'm gonna come over here to my wireframe view click on my call to action I'll click on settings design and then we're gonna go into the button and make our changes here so our text color needs to change so I'm gonna paste my value in here like that so right now we can't see anything we need to be in the in the desktop view great so we can see here that our color has changed okay so next we need to come over here to our title text and change our colors so I'm going to click here and I'm going to add my RGB a value within this brackets okay so for now we're gonna save and then as you can see we need to change the color of this text so I'm going to come over here to my text module click on design text and then over here on my text color I'm gonna paste my value within the brackets like that so we're not done yet because we need to add our image to the background so I'm gonna save this for now and then I'm gonna come here to my row settings click on background and then I'm gonna delete this image right here click this plus button and then I'm gonna add my image so my image is in my downloads folder so let's go ahead and upload it so I'm gonna click here to an upload select files so I'm just gonna search for my image right so it's this one right here I'm gonna double click on it ok so now that my image has been uploaded to my media library all I have to do now is to click on upload an image so now we can see our image is now showing through this text so I'm gonna save here for now and then I'm gonna come to the bottom here and change my divider color so I wanna come over here click on my section settings design dividers click on bottom and then I'm going to change the color like that save okay so pretty much this is our final design I'm gonna save and then we're gonna preview our designs so for now I'm going to exit the visual builder save and exit so 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 go live or we release new tutorials until next time thanks for watching and see you soon

Channel: Elegant Themes

Views: 21,921

Keywords: Divi tutorial, divi, elegant themes

Id: E0VUW296Fhc

Length: 22min 14sec (1334 seconds)

Published: Thu Mar 15 2018