Okay so this is a really quick tutorial on how to do different kind of section
transitions for your website. I'm Tim Martin and this is Real Website
Hints.com. In this video we're gonna be looking at three different kinds of
section transitions. We're going to be looking at sort of this organic looking kind of
paint spill section transition, although you can use this technique to create
just about any kind of shape between two sections. Then next up we're gonna be
looking at this sort of double slash transition. We've got a slash going one
way and then a slash going the other way. Kind of distinguishing this cool-looking
black and white page, and making it just a little bit more interesting. And then
finally we've got this sort of multiple angle transition here, and it's kind of a
really cool look. I'm gonna show you guys exactly how to do these and they're
really not that hard. They might take a tiny bit of your time, but I think it
really can improve the look of your website. So let's dive in and check it
out, and see exactly how these transitions are made. Okay so how do we
go from something like this, just a really basic and transition, to something
more like this. We've got this really cool spill effect between the sections
of our website. It's actually pretty simple, and it's something I think a lot of
people overlook, because they're really looking for that high-tech coding answer,
when really you can just use something simple. And in this case all I have here
is just a basic image that I made in Photoshop. Let's go ahead and see how we
create this. The first thing we need to do here is we need to know what this top
header color is, and we're gonna take that over to Photoshop. So then inside of
Photoshop you need to just create any sort of image. This is the image I created here.
It's kind of a paint spill image but you can create any kind of image and then we
just need to export this image. Now what I found worked the best was to export
this image as a gif. I made this image 1,900 pixels wide and then I set it to
bilinear. For some reason bilinear just seemed to work the best and gave it the
best look. As you can see here the image file size is really small. It's only
13.4 kilobytes. So it's not really going to impact the loading
speed of our website too much. So go ahead and just export
that. And then just go back over to our website. And what you need to do is just
create a new section right here. Just create a regular section. We're gonna add in a
row, and then I just want to add something in to make sure that our
sections gonna show up, so let's add in a divider module. Go ahead and click on
that. Save that divider module, and then let's
go over to the section settings. This is we're gonna add in our background. So click
on the section settings. Go to background, and click on the image icon. Add in your
image. Go ahead and select it. Add it in. And the next thing we need to do is we
need to add in some spacing to make sure that our whole image shows up. So to do
that we're gonna go ahead and we're gonna click on design. And then we're going to go
to spacing. And we're gonna add padding at the bottom. And now I've got an
article that I will link to, that will show you exactly how to calculate the
exact percentage of padding that you need. So in this case I needed 14 percent
padding, so I just went ahead and added that in. And we want to set the bottom
padding to zero. Just to make sure that everything looks correct. And there we go.
Now we can see the full background image. Okay and then in the section below this
we want to drag out all of this padding. So we'll just drag it up. Clear it out
there. And there we go. I've got a great-looking page with this splash
section transition. Okay so for this next type of section transition here let's
start out with this page here. It's already a pretty attractive looking page.
It's got black and white, let's make a little bit 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 can use the background gradient feature to
accomplish this. Let's go ahead and see how we do that. So this example here we
have a row with two columns. And on each column we've got two background images.
I've set this row to full width, and I've reduced the gutter width all the
way down. That way the images display full width on this row. Okay so what
we're gonna do is we're going to go over to the row settings, so on the green
section click on the gear icon. And then we want to go to the background. And we
want to scroll down to the column 1 background. That's where we're going to
add in is gradient effect. Okay so go ahead and click on the gradient tab.
Now I've already adjusted this setting in this demo, so I'm going to go ahead and reset
this a little bit. So the first step is to change the
colors that we have. And now this first color here can really be any color you
want it to be, because we're going to set the transparency all the way down to zero.
Then after you set the transparency down to zero. And the second color we want to
be black, because that's the look we want. Then we're going to scroll down here at
the bottom and under column one gradient, we want to click on this, "column one
place gradient above background image". And that's going to let us see what
we're doing. And then as soon as we click that button
we can see the gradient forming. So the first thing I like to do is sort of move
the gradient direction and get it kind of close to where I want it to be. Go anead and
move that right here. And then to get that sharp line we need to go to the
column one start position, and slide that over and then slide back to column one
end position until they just overlap a little bit. And that's going to give us
the line. And then just adjust the positioning of them until you get the
line where you want it to be. So about here that looks good. Okay that looks
good so now we'll just click on the check to exit out of this. And then we're
gonna do the exact same thing on this bottom section here. This bottom row here.
So let's go ahead and do that. Click on the gear icon. We're going to go over to the column
one background. We're gonna click on the gradient tab right here. Okay and then
it's already added in the gradient, because I've already done this when I was
testing this, but you can see here it sort of the same kind of settings you
just need to set it up here. And then for this work 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 the white coming through. So to do that you
click on content and then you scroll down to background and just make sure
that that's blank. So that's how we can create this cool-looking slash
transition between sections on the Divi theme. Either between sections or between
columns. Okay so now let's check out the last kind of section transition that I
want to talk about in this video and that is sort of this multi angled
section transition. And one thing to know about this is a little bit more
complicated, and also it might not work on some browsers in particular it might
not work on Internet Explorer. Let's go ahead and dive in and check out how to
do this next transition. Okay so here we are back at just the regular section
transition here, and in order to make this angle transition we need some code.
And I've got an awesome tool online called Clippy it's gonna allow us to do
that. So let's go over here let's go over to Clippy, and i'll link to that down
below. So what we have here is we've got
various different shapes that we can choose from, and then on the left here in
the main window we can adjust the settings on the shape that we choose. So
here I've selected the nonagon shape and then on the bottom over here it's gonna
show us how all the code is changing while we're doing it. We're just going to need to
copy that code onto our website. Let's go ahead and just start dragging these
things around to get the shape that we want. I'm just going to go ahead and do that now. You see
the picture that's the part that's gonna show up and where there's the whitespace
that's the part that's gonna be cut out. So I'm gonna fast forward while I
drag through these uneven edge here that I'm creating.
If you wanted to be more precise about it you could look down here and modify
the code and adjust the percentages more precisely, but for this I'm not too
concerned about it. What sort of the general idea I'm just gonna go ahead and
do that. And then we're gonna go ahead and copy the code down here.
Okay now let's head back over to our website and we're gonna be applying it
to this top section right here. So, we're just gonna go over to the top section
settings, just click on that little gear icon. We're gonna go over to advanced and
then click on custom CSS. We're gonna paste it right here into the main
element. There we go, and now you can see that it's already drawn up. So if this
were on the section here what we're seeing is actually the background of the
entire page, and that's this white color so the next thing we need to do is make
the in background for the entire page that purple color so it looks like it's
part of the bottom section. So to do that in the Divi theme we need to go down to the
bottom here and use the bottom menu. If you don't see the bottom menu you just click
on the three dots with the purple circle in the middle, then click on the gear
icon. Background and then change the content background area to the purple
color that we have here. Let's go ahead and paste that color in. And there we go
so that's how we do this sort of multiple angled section background using
a little bit of code that we actually didn't even have to write ourselves. Okay
well I hope you guys found those hints helpful if you did give me a thumbs up
and consider subscribing to my youtube channel for more hints just like this.
If you actually haven't started building your website yet and you're looking for
help on how to do it check out my free tutorial series world guide you through
the best way to build a website that I have found, and I'll link to that at the
end of this video. If you want more tutorials just like
this I'll link to a whole playlist of other videos just like this at the end
of this video. So thanks a lot for watching and I'll see you guys in the
next video!
For more infomation >> 🔴🔴🔴😎How to live from Laptop 😍Bye coc don sudip😋😱😱most see and comment👁🗨👁🗨👁🗨!i am live🔴 - Duration: 15:06. 
For more infomation >> 'It's Very Realistic': How State Police STOP Team Trains For Active Shooter - Duration: 2:34. 
For more infomation >> New Year's Eve: How to protect yourself from the cold weather - Duration: 4:09. 
Không có nhận xét nào:
Đăng nhận xét