Web Design tutorial: How to create website section transitions in WordPress a Divi 3.0 tutoial

Okay so this is a really quick tutorialon how to do different kind of section changes for your website.I’m Tim Martin and this is Real Website Hints.com. In this video we’re gonna belooking at three different kinds of section changes. We’re going to be looking atsort of this organic appear kind of paint spill section transition, althoughyou can use this technique to create just about any kind of shape between twosections. Then next up we’re gonna be looking at this sort of double slashtransition. We’ve got a reduction going one road and then a slash exiting the other way.Kind of recognise this cool-looking black and white page, and inducing it justa little bit more interesting. And then finally we’ve got this sort of multipleangle transition here, and it’s kind of a really cool look.I’m gonna show you guysexactly how to do these and they’re really not that hard. They might take atiny bit of your time, but I think it truly can improve the review of yourwebsite. So let’s dive in and check it out, and ensure exactly how thesetransitions are made. Okay so how do we go from something like this, simply areally basic and transition, to something more like this. We’ve got this reallycool spill effect between the sections of our website. It’s actually prettysimple, and it’s something I visualize a lot of people overlook, because they’re reallylooking for that high-tech coding answer, when truly you can precisely use somethingsimple.And in this case all I have here is just a basic image that I met inPhotoshop. Let’s go ahead and see how we cause this. The first thing we need todo here is we need to know what this top header color is, and we’re gonna takethat over to Photoshop. So then inside of Photoshop you need to merely create any sort ofimage. This is the image I created here. It’s kind of a colour shed persona but youcan create any kind of image and then we just need to export this image. Now whatI attained succeeded the best was to export this image as a gif. I made this image1, 900 pixels wide and then I designated it to bilinear. For some reason bilinear justseemed to work the best and presented it the best look.As you can see here the imagefile size is really small. It’s only 13.4 kilobytes. So it’snot really going to impact the loading race of our websitetoo much. So go ahead and simply exportation that. And then just go back over to ourwebsite. And what you need to do is just create a brand-new area right here. Just create aregular section. We’re gonna included in a row, and then I just want to addsomething in to make sure that our segments gonna show up, so let’s add in adivider module. Go onward and click on that.Save that divider module, and then let’s go over to the section settings.This iswe’re gonna contributed in our background. So click on the section decideds. Go to background, and click on the portrait icon. Add in your idol. Go ahead and adopt it. Add it in.And the next thing we need to do is we need to add in some spacing to make surethat our entire portrait shows up. So to do that we’re gonna go ahead and we’regonna click on design. And then we’re going to go to spacing. And we’re gonna supplemented paddingat the bottom. And now I’ve got an essay that I will link to, that willshow you exactly how to calculate the exact percentage of padding that youneed. So in such cases I needed 14 percentage padding, so I just disappeared ahead and addedthat in.And we want to set the bottom padding to zero. Just to make sure thateverything sounds rectify. And there “theres going”. Now we can see the full background image.Okay and then in the section below this we want to drag out all of thispadding. So we’ll really drag it up. Clear it out there. And there we go. I’ve got agreat-looking page with this splash section transition. Okay so for this nexttype of section transition here let’s start out with this page now. It’salready a moderately handsome appear page. It’s got black and white, let’s make a littlebit more interesting by making a slash between these black and white sections.And fortunately with the Divi theme this is actually pretty easy to use.You canuse the background gradient feature to accomplish this. Let’s go ahead and seehow we do that. So this pattern now we have a row with two pieces. And on eachcolumn we’ve got two background epitomes. I’ve change this sequence to full diameter, andI’ve abbreviated the gutter extent all the way down. That path the portraits displayfull diameter on this sequence. Okay so what we’re gonna do is we’re going to go overto the row locations, so on the green section click on the gear icon. And thenwe want to go to the background. And we want to scroll down to the column 1background. That’s where we’re going to add in is gradient impact. Okay so goahead and click on the gradient invoice. Now I’ve already adjusted this setting in thisdemo, so I’m going to go ahead and reset this a little bit.So the first step is to change the colorings that we have. And now this firstcolor now can really be any color you want well, because we’re going to set thetransparency all the way down to zero. Then after you defined increased transparency downto zero. And the second color we want to be black, because that’s the inspection we want.Then we’re going to scroll down here at the bottom and under line one gradient, we want to click on this, “column one arrange gradient above background image”.And that’s going to let us find what we’re doing.And then as soon as we sounds that button we can see the gradient forming.So thefirst thing I like to do is sort of move the gradient attitude and get wise kindof close to where I demand well. Go anead and move that right here. And then to getthat abrupt wrinkle we need to go to the column one start stance, and slither thatover and then slide back to column one intention statu until they just overlap alittle bit. And that’s going to give us the line. And then only adjust thepositioning of them until you get the line where you want it to be. So abouthere that gazes good. Okay that sounds good so now we’ll just click on thecheck to depart out of this. And then we’re gonna do the exact same thing on thisbottom segment here. This fanny row here. So let’s go ahead and do that. Click on thegear icon.We’re going to go over to the column one background. We’re gonna click on thegradient tab right here. Okay and then it’s already included in the gradient, because I’ve already done this when I was experimenting this, but you can see here itsort of the same kind of settings you exactly need to set it up now. And then for thiswork we need to make sure that the column here of the background is white.And that the text module has a transparent background, so we can see thewhite coming through. So to do that you click on content and then you scrolldown to background and precisely make sure that that’s blank. So that’s how we cancreate this cool-looking slash transition between regions on the Divitheme.Either between areas or between towers. Okay so now let’s check out thelast kind of section transition that I want to talk about in this video andthat is sort of this multi tilted part change. And one thing to knowabout this is a little bit more complicated, and also it might not workon some browsers in particular it might not work on Internet Explorer. Let’s goahead and dive in and check out how to do this next transition. Okay so here weare back at time the regular segment change now, and in order to makethis angle transition we need some code. And I’ve got an awesome implement onlinecalled Clippy it’s gonna allow us to do that. So let’s go over here let’s go overto Clippy, and i’ll link to that down below.So what we have here is we’ve got many different chassis that we canchoose from, and then on the left here in the main window we can adjust thesettings on the contour that we pick. So here I’ve selected the nonagon mold andthen on the bottom over here it’s gonna show us how all the code is changingwhile we’re doing it.We’re just going to need to transcript that code onto our website. Let’s goahead and just start dragging these things around to get the shape that wewant. I’m just going to go ahead and do that now. You watch the picture that’s the part that’s gonnashow up and where there’s the whitespace that’s the part that’s gonna be cutout. So I’m gonna fast forward while I drag through these unequal shape now thatI’m creating. If you wanted to be more precise aboutit you were able to look down now and modify the code and adjust percentages per moreprecisely, but for this I’m not too concerned about it.What sort of thegeneral mind I’m just gonna go ahead and do that. And then we’re gonna go aheadand copy the system down now. Okay now let’s leader back over to ourwebsite and we’re gonna be applying it to this top section right here. So, we’rejust gonna go over to the top slouse settles, simply click on that little gearicon. We’re gonna go over to advanced and then click on custom CSS. We’re gonnapaste it right here into the main element. There we go, and now you can seethat it’s already drawing up of. So if this were on the section here what we’reseeing is actually the background of the entire page, and that’s this white colorso the next thing we need to do is procreate the in background for the whole pagethat violet color so it looks like it’s part of the bottom section.So to do that inthe Divi theme we need to go down to the bottom now and use the bottom menu. If youdon’t see the bottom menu you simply click on the three flecks with the violet circlein the middle, then click on the gear icon. Background and then change thecontent background area to the purple color that we have here. Let’s go ahead andpaste that color in. And there we go so that’s how we do this sort ofmultiple angled segment background consuming a little of code that we actuallydidn’t even have to write ourselves. Okay well I hope you guys located those hintshelpful if you did gives people a thumbs up and consider agreeing to my youtubechannel for more inklings just like this. If you actually haven’t started buildingyour website more and you’re looking for help on how to do it check out my freetutorial line macrocosm guide you through the best way to build a website that Ihave found, and I’ll link to that at the end of this video.If you demand more tutorials just like this I’ll link to a whole playlist ofother videos just like this at the end of this video.So thanks a lot forwatching and I’ll see you guys in the next video !.

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts