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!
