How to Create Full Screen Sections with Top and Bottom Scroll Links with Divi

hello divination and welcome in today's tutorial I'm going to show you step by step how to create full-screen sections with top and bottom scroll links with Divi this is the final design we're aiming to achieve so without wasting a lot of time let's dive in and let's get started okay so right now I'm in the admin dashboard of my website so the first thing we need 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 the name of the page can be anything so you can go ahead and just name it whatever you want but in my case I'm just gonna call this Mac click on use the Divi Builder and then I'm gonna go straight into the visual builder next we need to add a full width section so I'm gonna come over here click this plus button and I'm gonna click on full width so this what we need here is the full width header module so I'm gonna go ahead and select it so now that we have all that in place I'm just gonna go ahead now and save and then on the top here we can see by default we have this section so let's go ahead and delete it because if you want you want we're not gonna need it okay so now we need to go into the module settings and start adding our background images and the rest of the information so I'm going to click here on the gear icon and then the first thing we need to do here is to add our title so I'm going to paste my title in here next I'm gonna add my subheading text so I'm gonna paste it again okay so now that we have it we've added our subheading text we need to get rid of this content text so I'm going to delete that and then the next stage now is to add our images so I'm going to come over here to images but the image we need to add is the header image URL so the image is going to be on the right side of this information so let's go ahead and do that so I'm going to click this plus button here and the image I need is an image of a laptop which is right here so I'm going to select it now make note this needs to be needs to have a width of 800 pixels so just make sure that these are your dimensions otherwise it won't look right and also if you haven't uploaded your images into the media library what you want to do is to first upload them from wherever you download them from so this could be maybe pixabay or unsplash or even our images from from our layout packs but the size needs to be 800 pixels ok so now I'm gonna click on upload an image and now you can see it has been added on the right side which is exactly what we need now the next thing is to add our background image so to do that we need to come over here to background and then we're gonna choose the third tab so I'm going to click here and click the plus button again my image is in the media library so I'm just gonna scroll down and find that image and it is right here now this image has dimensions of nineteen twenty by twelve eighty three but the most important thing is it needs to be about 1920 because that really fills up the width of our section so let me go ahead now and click upload an image and now we can see our image has been applied to the background now we need to do more customization so let's go over here to the design tab so under the design tab we need to go into text and logo and make sure that it's all centered so I'm gonna come over here to layout and then make sure that this is centered just by doing that next we need to make this full screen so I'm gonna select full screen and then the next stage now is to show the scroll down icon so I'm going to click here and we are going to give it a color so right now the size is 50 pixels that should be okay and we might as well make some adjustments for the other device or the other devices so I'm gonna click here and go to the tablet and for the tablet size it needs to be set at 13 so I'm just gonna enter it in here like that and that should be fine as well for our smart phones so I'm gonna click back on the desktop next I'm gonna add an overlay to this so that it's easier to read so I'm gonna click here on overlay and for our background color overlay I'm gonna click here on this eyedropper tool and add my value in here now this value is going to be an odd GPA so all I need to do now is to drag this second slider down a little bit and then paste my value between the brackets now if you want the exact same value that I'm using here you can find it in the post which I'll link to in the show notes below so that's the color I'm gonna useful overlay now we need to go and add our text sign so I'm gonna come over here to text and we're going to set our text ads 5vw okay and that's for the desktop for the smartphone we need to set it at 32 pixels so I'm gonna click this little tab right here and click on the tab on the tablet tab and then paste my value in here and that needs to be also the same for the smartphone great so back over here to my desktop view now you may be wondering why I've used the value of V W for the title text so the reason why I do that is because the value will make sure that the text adjusts to the browser size adding a pixel value for the smartphone will make sure that the text doesn't scale down too small right so for the next thing we need to do it now is to add a CSS ID so I'm gonna come over here to the Advanced tab come over here to CSS and ID and the CSS ID we need to add it's just the number one just like that so what we going to do is we're going to make some customizations so this CSS will allow the section below to link back up but this will be added later on in this tutorial ok so now that I have all that in place we need to go ahead and save our settings now what you also may do is to make further adjustments like as you can see right now I have elegant design on two lines so you may want to go in and make those customizations so let me just go in and make sure that it's all in one line so to go back into my settings I need to kill I need to click on this gear icon and then I'm gonna go into design title text and just make this slightly smaller like that okay so for in my case now for VW works fine because that enables me to have this in a single line okay so I'm gonna go ahead and save now now it's time to create our second section so to save us time what we're gonna do is we're just gonna duplicate this so I'm gonna come over here all the way to the top and click on this button here like that and then now we have the same design so all we have to do now is to go in and make just a few changes so the first thing we need to do is to go into module settings so I'm gonna come over here click on the gear icon so now I'm in the module setting so the first thing the second thing we need to do is to add our title so this is the title that we're gonna add and then on the button text we need to add some button text called learn more so I'm gonna come over here so instead of having it as click here we're gonna say have it as learn more okay so now the button is showing next we need to add our content so for our content I'm just gonna paste it here in this area right so for button two to appear all we need to do is to add the spacebar so now you can see that the button now is showing but right now we know we don't need to do any anything this so next I'm gonna come over here to my link so this is where we want to come to our bottom two URL and paste this so we need pound sign and one now it's time to make our design customization so I'm gonna click on the design tab next I'm gonna come to layout and this time we're going to make sure that the text and logo orientation is set to left so now this is now side by side next we need to go into our overlay so I'm gonna click here on overlay and click the eyedropper tool and this time we're going to add a different color here for our overlay so I'm going to paste my value between the brackets and as I mentioned before if you want to use the exact same values you can go to the post which I'll link to in the show notes below right next we need to add our title text size so I'm gonna click here on title text so by default it's set to 4vw because that's the value that we had from the previous section so I'm just gonna click here once and set it to 3 V W so for the tablet it's gonna be the same thing I'm gonna stage it again at 3 V W great now it's time to go into the buttons so we're gonna start off with button 2 so I'm going to click here on button 2 so in order for us to make customizations to button 2 we need to activate use custom styles for button 2 so here I'm gonna click it and it's gonna say yes and we're gonna start off with the size so I'm gonna make sure my size is set to 50 and for the desktop I mean for the smartphone it needs to be set at 30 so I'm gonna click here on this little tab and then click on the smart phone tab and set this to 30 just like that back over here to my desktop now we need to adjust our border width so right now it's set at 2 we need to just make sure it's set to 0 ok so we need to scroll down until we find show button to icon so by default it's set to yes we need to set this to no next we need to set our color for our hover background so I'm going to click here on this eyedropper tool and then we are going to add RGB a value so my value is just pretty much gonna be full transparency so I'm gonna drag the slider all the way down until we get all zeros now we need to add our bottom two icons so I'm gonna scroll back over here to the top and we're going to find our icon so first of all I need to activate show button 2 icon someone is like to say yes and then I'm gonna choose this one right here right so the next thing we need to do is to customize our button 1 so let's go ahead and do that so I'm just gonna scroll all the way here and close and close this for button 2 and I want to select button 1 and activate custom styles ok so the first thing we're gonna do is to start off by adding our text color size so I'm gonna paste it in here like that so you can see here it's become really massive but we're gonna we're gonna adjust it so for the smartphone it needs to be set at 16 pixels so let's go ahead and do that so I'm gonna click this little icon here and click on smart phone and then I'm gonna paste my value just like that so now you can see the button has got has been it's become a bit smaller so back over here to my desktop next we need to add our button 1 a background color so I'm gonna come over here click this plus button to add our background color and I'm gonna paste my hexadecimal value just like that next it's time to add our border color so again I'm gonna click here on this little icon paste our color and then scroll down until I find weight say it's show button one I con now we don't need that so I'm gonna say no to that so now when I mouse over it we don't have any icons showing up which is great so the next thing we're gonna do here is to add our custom padding so I'm so collapse button 1 settings sour padding can be found over here on spacing right so what I'm gonna do here is I'm gonna add padding of 7vw but this is gonna be both to the left and the right so we can activate this chain and the value I'm going to add here will be applied to both sides just like that next we need to add our CSS ID and to do that we need to come over here to the Advanced tab click on CSS ID and this time over here because we duplicated it it has 1 in there by default but we need to change this too now we also need to add some CSS code so I'm gonna come over to the CSS tab so we're going to start off by adding our code in the header container and this is the width of 100% the next code is in button - so I need to scroll down until I find button - and here it is paste this code now if you want to use this exact code of the CSS code this can be found in the post which I'll link to in the show notes below okay so this CSS code which is entered here should allow us to see our button position right here in the top but you can see here that it's only showing when I hover this area that is because I haven't set the setting correctly so let's go back over here to our design and click on a button - so what we need to adjust here is to make sure that I use is to make sure that our show button - icon is set to no so I'm gonna click here so what we need to do is to come over here where it says only show icon on hover or button - so let's set it to no so now we can see that it's now showing okay which is great and when we click on it this should take us to the first section so now let's go ahead and save because it's now time to create section 3 I'm gonna save changes and as we did before I'm just going to duplicate section 2 so I'm gonna come over here and click this button like that so now I've duplicated it next we need to come into our module settings so I'm gonna click the gear icon and now I'm in the module settings right so our title here needs to be changed to the city so I'm gonna paste it in here like that next we need to add our link to button 2 so I'm gonna come over here to links so we want this to link to the section above so this is going to be two so I'm going to paste two in here and get rid of one which was there before so next you can upload your background image but in this case I'm going to use the image that I have right now in the background so I'm just going to leave it as it is right so now that we decided to use the same image we need also need to do some customizations in the background option so I'm going to come over here to background and we're gonna make sure that background image size is set to cover and then our background image blend needs to be set to multiply so I'm gonna come all the way down here and change my image blend to multiply so it's close to the top and I selected right next me to add our background color overlay so to do that we're gonna come over here to the design tab and over here on overlay I'm gonna select overlay and we're gonna add our color so I'm going to click this eyedropper tool and my color is an RGB a value so I'm gonna highlight this and just paste my new value in here so you can see here by plate by applying that color it has changed the design of my background next we're going to go to our title so I'm gonna click here on title and our title needs to be set at 5 V W so I'm gonna add my V W in here it's my size next I'm gonna add my button background color so I'm gonna collapse my title text and then we're gonna go to our buttons so the one that I need is button born so I'm going to select it here and I'm gonna change my background color by clicking the color area and pasting my RGB a value in here just like that and then I also need the same color for my border so I'm gonna come over here click on the border color and paste my value in here just like that now we need to set our CSS ID so I'm going to click the third tab the Advanced tab click on CSF ID and classes and this time we're going to change this to 3 as I mentioned before the size of this title here can vary so you can play around with the sizes just to make sure that you have the right size that goes with your design but in my case I'm gonna leave it as it is right so the next thing we're gonna do is to add a different style to this third section so let's go ahead and do that so I'm gonna come over here to content tab click on background and this time I'm going to go to the gradient tab and we can add a gradient so the first color I'm gonna add here is this value I'm gonna paste just like that and for our second color this can just be full transparency so I'm going to bring this all the way down until I get full transparency just like that now over here on the gradient direction I'm gonna set this to 90 degrees and then for our start position I'm going to set this to 50% and for our end position I want to set it at 4% so now we can see we've just created a star which looks like we have two equal halves which is fantastic now what we need to do is to place the gradient above the in the background image so I'm going to select this option here so now our gradient is placed above the background image okay so now it's time to add our fourth section so I'm gonna save all that all the work that we've done so far we're going to duplicate the third section so I'm gonna come over here and click this button to duplicate it and if you scroll down here you'll see that we have a lot of options ready right so let's go into our module settings by clicking the gear icon right so we're going to add a different style to our page title so what we're gonna do is we're gonna get rid of our title here and also our sub head over here in our content area we are going to add this custom code so I'm gonna paste my code in here like that so this code allows us to have this text with dude with two different colors next we're going to add our URL for our button so I'm gonna come over here to links and for a button - we're gonna change this to three so I'm just gonna delete - and make sure we have three so this allows us to make sure that our buttons are going to link to the proper place right so the next stage now is to add our gradient colors so I'm gonna come over here to background and I'm gonna click on the second tab which allows us to add our colors to the gradient so the first color here is going to be an RGB a value so I'm going to click this slider here in order for us to get these brackets or can add my value so that's my first one and I'm going to add the second color by clicking the second item here and pasting my value like that now we need to set our background image blend so I'm gonna come over here to our image and instead of having it at multiply we're gonna set this to normal right so now we're done with the backgrounds it's going to the design tab and customize our text and logo so I'm gonna click design click on layout and this time we want our alignment to be set to center right so the next thing we need to do is to come over here to the title text and add our title text color so I'm going to click the eyedropper tool and paste my value in here so you can see here that now it's applied and it's applied to the word city next we're gonna add our buttons size so I'm gonna scroll down until I get to button 1 and my size is going to be instead of 2vw I'm gonna set it to 1.7 VW so over here for the bottom background color we don't want to have this solid color we want to have something a bit exciting so what we're gonna do is gonna delete this color altogether and then I'm gonna come to the second tab and click this plus button now this allows us to have a different design to our color so we can add our gradients so I'm gonna start off my first color here and paste my value in here so before I paste it onto you drag this slider so I can add my value between the brackets just like that Sigma next I need to add my second color so i'm gonna click my second color here and again it's gonna be an RGB a value so i'm gonna paste my value between the brackets make sure you enter them between the brackets like that okay great so now that we have this all we have to do now is to set our gradient at 90 percent and also our start and in position to 50% on both settings so now you'll see that we'll have this beautiful design where we have the color which applies to both sides of the button in fact the color added here is wrong so I need to go back and add my color so to do that is easy you can just go back in here and just paste the correct color so this is the color that I that I was looking for right so next we need to get rid of the border width so over here is by ice it's set to two by default so I'm gonna set it to zero just like that next we need to add our border radius so above the radius needs to be set at 15 pixels so I'm gonna paste that next I'm gonna add my button one letter spacing and I'm gonna paste my value in here it's 1.3 V W so as you can see here the little spacing is a bit too much but you can play around with the settings that suit your design so right now I'm just gonna dry I'm just gonna get rid of this because I thought that value was gonna make this look nice and I'm just gonna add maybe something a bit subtle so I'll say maybe about 4 pixels okay that's great so for the border radius if you want to increase the border radius you can always always come here to the border radius and increase that okay so the more you do it it's going to look like a pill so in fact I think I like this design so I'll leave it as that right so right now we have this image in here this may be something that we may not need for this design so in this case I'm gonna go ahead and remove it so I'm gonna come back over here to my content click on images and I'm just going to delete it okay so now we just have the title here the subtext and the button okay so that's all we need to add for this so let's go ahead and save this and then do a quick preview so I'm gonna save and exit the visual builder and this is our final design so first of all I'm gonna scroll all the way down so we can see the final design X and then we're gonna test the buttons and see if they working fine so if I click here this should take me to the next section and then using these arrows I can use these to navigate up and down 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 until next time thanks for watching and see you soon

Channel: Elegant Themes

Views: 38,048

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme, Full Screen Sections, Divi sections

Id: PB_p-xg4l-A

Length: 22min 8sec (1328 seconds)

Published: Wed May 23 2018