Hey there what's going on? I'm Tim Martin
and this is Real Website Hints. This is a web design tutorial where I'm going to show you how to make
this great bar website right here. What I
like about this design is its simple
classic design with a couple little
twists thrown in, and it can be applied
to a lot of different kinds of websites
not just a restaurant or bar website. So
we've got here at the top we've got a
very classic clean header design which I
really like, really easy to read gets the
basic message about what your website's
about right up there right in front. It's
a great thing then as you scroll down a
little bit.
Gonna see that there's this fade into
this image I'll show you how I created
that. As you scroll down a little bit farther
we've got this side-by-side section
where I put a slash in between the two
sections. Just to sort of differentiate it
and make it and make it a little bit more exciting.
So if you want to learn how I made this
page let's go ahead and do it!
So this tutorial assumes that you've
already got WordPress installed and
probably that you've got the Divi theme
installed. I like to use the Divi theme,
because I think it's one of the easiest
ways to build great-looking web pages.
Now if you're brand new, and you haven't
gotten your website set up, go ahead and
check out my free tutorial series where
I'll walk you through exactly how to get
hosting how to set up WordPress and how
to set up and configure the Divi theme.
And then you'll be ready to start with
this tutorial. If you want to get the
Divi theme, or if you want to check it out
for yourself if you don't have it already
check out the links below and I've
gotten an affiliate link to the Divi
theme. If you use that link and you
decide to get the Divi theme I'll be
provided with the small commission which
helps me make free tutorials like this
and provide free website templates like
this one right here which I offer on my
website to people just like you. So I
thank you for your support and if you're
ready to dive in and start making this
website let's go ahead and do it. Okay so
let's go ahead and start by going over
the dashboard and then we're gonna go
over to pages. I'm gonna add a new page
and let's give it a page and name. Okay
and then we want to use the Divi builder
because that's what I like to use cuz it
makes it so easy to build pages with.
Then let's go ahead and click on use
visual builder. I really like to use the
visual builder, because I just think for
me I really need to see what I'm doing
in it we're gonna get a sense of whether
the design is working or not. And then I
like to just go ahead and start since I
already know what my background is gonna
be go ahead and start by adding a
background. So, click on the little gear
icon here and the blue section. So, that's
like the main section the green areas
are rows; if you're new to using the Divi
theme. Click on background and then to
add you can add a color here you can do
a gradient, but we want to add a image
background. We're going to click on image. Then
click on the plus icon. Scroll down until
you find the image. So, all of the images
that have loaded have already been
optimized, and it's really important that
you optimize the images before you put
them on your website. There are a couple
of plugins that will optimize the images
for you on your website already, but I
just like to do it myself so I can see
the quality. See what's happening but you
at least want to make sure that you crop
it down to sort of the size that you
need. So, for this I'm using 1920
by 1280. I think I probably could have
made it a little bit smaller maybe using
a width of 1280 instead or maybe even
1080 probably would have been sufficient,
but the smaller you make your images and
the more you compress them the faster
websites gonna load and that's gonna be
the main thing that's gonna help the
website speed. Okay so we're gonna go
ahead and add this image to the
background click on upload, and then
check. You can see that it's already
being added in so that's great. And next
let's go ahead and start by adding in
that text that we want. So, it's gonna be
the name of our company. In this case
it's great bar. So, click on the plus icon
in the row and then we need to choose
how we want this road divided up. So, we
can have by half by thirds all these
other options. I just want a full one
full width row. And then we can just type
in what we're looking for so we're
looking for a text module so click on
text. And then I want this to be heading
1. And then let's go over to the design
to change the design of this. So, as we
made it a heading let's go to header
text, and then I want to change this font
here to Cardo. One of the great things
about the Divi theme is you do get all
these other fonts. So, we're gonna go over to
Cardo let's change this size. I want this
pretty pretty big. Let's make it 72 or so.
Let's change the color of the sort of
default color I want it to be two colors
but we'll change the default color. Let's just
go ahead and make this white and let's
center this text here since we want to
be in the center. One of the ways to
control the font colors if you want to
different font colors is actually using
the front end part of the builder,
because if you go back to the backend
builder here. You can select the font or
the text here and you can change the
color, but you're limited by these colors
here. And if you follow some of my other
tutorials you know that I'm a big fan of
creating your own custom color palette. I
think it's what makes a website design
look like it was designed by
professional is by having a color palette.
And I'm not really a design expert, but I
do know how to cheat a little bit. So, I
put together a tutorial that will show
you how to make your own color palette.
Make it look like it was designed by a
designer. So the color palette that I'm
using for this website this color
palette right here. So the way I decided
on this color palette was based on the
colors of the images that I'm using. Now
if you're doing this for
own business probably have a logo in
mind you probably already created a logo
so you probably want to start with maybe
your logo color that's what I usually
recommend. So we can't really make this
the color I want with this tool here but
we can do it with the Divi theme. So, just
click on check for okay. And then we're
gonna highlight...
Whoops.... Just gonna highlight the text
here, and then we can use the little
Paint Bucket tool. And I've already, in
Divi, I've already modified this theme to
have sort of my custom colors here. So,
I've already picked this here as my
custom color. So we can just check on
that and then just click close to close
this or you can push escape. And then
when you've started editing text like
this we've got this text bar that's
following us around. With the Divi theme
you can always just push escape to get
out of something. So, just click on the
Escape key. And that'll get you out of
this. Okay so the next thing we want to
do sort of add our bars tagline. So, click
on a new module here. Add a new module.
We're going to type in text again to get
to the text module. And then type in our
tagline. Now this is just a fictitious
company so I made up my own tagline. This
might be an OK tagline to use but
depending on the kind of business in
that you're in if you're trying to
optimize for your search engine
optimization you might want to make this
tagline something that relates to
specifically what your business does and
maybe what people are going to be
searching for related to your business.
Bump up the font size here. Let's make it
nice and big about 63. And I changed the
text orientation to center, can always
move these windows around so you can see
what you're doing.
And then let's go ahead and add one more
text bar and we'll include our address.
Now this is something with the Divi
theme as you can see here with the plus
for the row and the plus to add a new
text module in the same place, and yes
this is super annoying and I'm hoping
that they're gonna get the Builder to be
a little bit better to sort of figure
out these little problems here happen.
But just take a breath and remember that
the Divi theme offers a lot of different
ways to adjust things. So, what I like to
do when something like this happens is
you can just click on the three dots in
the bottom here. And, then we can go to
the wireframe view and we can click on
plus here and then
and then we can add in our text. I know
it's super annoying but the Divi theme
for me even with these little annoyances
they've given you enough workarounds to
work around it and I still really enjoy
using it because you can see what I'm
doing. I've got so much different
controls so I'm willing to put up with
the annoyances. And let me tell you I've
tried a lot of different themes and
plugins and they all have their little
annoyances and idiosyncrasies. So, it's
just a matter of working with it and
working with the theme and the tool that
you have and learning how to use it. And
now I'm gonna go back to the desktop
view. Just click on the desktop view down
here. Text here so let's go ahead and
modify this. And now I want to have a
little bit of separation between the
title and the tagline and then the text.
So, there's a couple different ways we
can do this. In this case what I'm
going to do is I'm just gonna add some
padding above the address text. Let's go
ahead and do that we can just close this
text thing. And we click on spacing here.
We can add a custom margin or custom
padding. I think it's all I'll actually
use the custom margin here. So, let's make
this 100. Let's make this a little bit
more let's make it 200. There we go so that gives us some nice space. Let's see what that looks like.
So click check here. And then let's add a little more space above this first text here so we can
we can see a little bit more of the
image. Just click on settings, design, scroll
down to spacing. Let's make this 200. So,
so far this is looking pretty good.
The text is a little bit hard to read, because
the image and the backgrounds a
little bit too bright. So to fix that one
of the things that I like to do is go
over to our row here. And just make the
row full width. So go over to row click
on design, size, and click on design,
sizing and then make this row full width.
And now we can go over to the content
section. We can go a background we can
add a background color in. Make this
black and we'll fix the spacing around
it here in just a minute, but we can use
the transparency slider and sort of get
a nice look so we can read all the text
and make it nice and really easy to read.
And then let's just sort of fix the
spacing around here so click on settings
again then design okay and then go down
here to gutter width. Use custom gutter
width and then set this to
one. That's gonna make that part
full-width. And then we can just adjust
the padding here for the main section by
just dragging it. And you can also go in
of course to the settings and change
that. There we go so now that looks..
that's looking pretty good. Let's go
ahead and start with the next section.
Okay I'm gonna do a new section here so
I'm going to click on the blue plus sign
to do a new section. Regular. And then we
want this splits then with this split
50/50. Let's click on 50/50, then scroll down
here. So let's do text. Add in a text
module. So the first part of our text
here is gonna be... So I'm just going to  change the
background color for the whole section
here. Click on background, and now the
color I've picked here I picked on
purpose. It's a dark blue color and
that's because I've got this image here
that I'm going to use where I in
Photoshop I fade it in on this exact
same color. So it looks like the image
fades in from the background even though
it's actually gonna be two separate
sections. Let's go ahead and keep working
on this. Alright so got a background here.
Let's add another text section. Alright
let's go over here to design and fix
this up a little bit. Make the color
light since we've got a dark background.
And then for the second section we're
gonna add an image, but I'm actually
gonna use an image background on that
part of the row. Just go ahead and do
that. So first off we're going to want to
make this row full width so that the
image goes across the full width. Design,
sizing make this row full width. Check. So
go back to the row settings here. And
then we'll do background. And we want to
scroll down here to column background
2. And make this an image. I already
created this image and uploaded it here.
Here it is. You can see the fade that's
already built into the image. There we go;
that's looking pretty good. Wow we just
need to make this image go full height
here. So let's go ahead and do that.
Okay so the first step to doing that is
let's just get rid of the spacing. Now we
can either do that by going into the
settings
design spacing and then clearing up the
padding here like this. See how that
takes that away? Or we can also just sort
of get the green box highlighted here
then we can adjust the padding here. We
need to do the same thing with the
blue box here which I already did.
It's adjust the padding here. Okay so
just clean that all up. Do the same thing
on the bottom, since we want this image
here to be full height. And now we need
to create a little bit of space around
the text here. So to do that I'm gonna
use the spacing on the text. All right
there we go. So now we've got some good
space around the text we can see our
image clearly. And one of the things that
I see like new website builders have a
hard time with and that is responsive
website. So Divi allows you to make
responsive websites, but what that means
is if you look back here at the test
screen. Is as we drag and change the size
of the window, which is what's gonna
happen when your viewers are looking at
your website. They're gonna be opening it
up and all sorts of different sized
windows and different size devices and
things like that. It's gonna change the
way your website looks a little bit. So
you've got to sort of take like a breath
and like not be so concerned about
getting everything to look exactly right.
Get the spacing exactly right. You got to
leave a little wiggle room because
everything's gonna be moving around a
little bit with a responsive website. And
that's great because that means that
your website can be able to be viewed on
any size window any size device,  and it's
gonna look good, it's just a matter of
making sure you allow that space around
there, so that it does look good.
Now one thing that I did notice now that
I've moved it around like that, is that
we need a little space over here. So
let's fix that also. Just gonna go over
here to settings. And this is just kind
of how the design process works and why
I like using Divi so you can see what
you're doing while you're doing it so
you can sort of see these problems as it
happening. And this is definitely how I
design. It's very much sort of you know
you look at it and then you adjust and
look at it and adjust until you get the
look that you're looking for. So let's
change the gutter width here to one.
There we go that should resolve that
issue there, but now it created some sort
of an issue here so let's go over here
to this handcrafted thing. Let's just put
some space down below that.
All right that looks good now let's go
ahead and add another section. So we're
going to get the blue box highlighted
and then click on plus and then do regular.
And then we're gonna do one full width
or one single row section here, all right.
Let's go ahead and create a new section
below this a regular section. And I'm
doing this and making another section
right below that menu, because I know I
want to use the menu on the mobile
version of this site, but on... Since we're
doing this sort of double side by side
look with these slashes I already know
that that's not gonna work on mobile. So
we're gonna have to do a separate design
using basically the same information but
just a slightly separate design for
mobile devices. And I'll show you guys
how to do that later on in this video.
Okay so now we want to use the 50/50... Now
we're gonna use the 50/50 row. And let's
go ahead and put in a text box here.
And then you can just duplicate this
since we know we want the size to be the
same and everything. So just click on the
duplicate button here and then let's
just drag this one over to the other
column. And then let's just change this
to dessert. And we know that I know that
this background here is gonna be a dark
colored background. So I'm gonna go ahead
and make this text color light. Alright
so let's go over here and make the text
color white there we go. Okay now let's
add our backgrounds for these two sides.
Let's first make this full width since
we know I know I want this to be full
width. So we'll go over here to settings,
sizing make this row full width. Custom
gutter... Bring that back down to one. Going to do
equalize column height. So that's gonna
make it easier for us to get the spacing
later on. And then if we go over here to
content, we can go to background. I'm
gonna do the row column 1 background.. Is
gonna be a white plate. So click on photo
icon here scroll down till I find my
white plate, and then again here to make
this full height we need to adjust the
spacing. So I'm gonna go up the spacing
custom padding... 0, margin.. 0. And then do
the same thing for the section here. And
then just so we can see what's going on
here. Let's add a divider module. I'm
going to do visibility show divider. No
we want to leave it as that. And then
let's just change the height of it so we
can see our full plates.
Let's try 300. Let's go a little bit more
here.
Let's try 500. A little bit more. There we go.
It should work and then let's just add
some padding to this text module here. So,
under design scroll down to sizing,
spacing, rather. And let's add a custom
margin on the top to 20. I'm so that's...
Let's try 10 percent. There we go. And you
know what? I want to make this text a
little bit bigger here. Let's go to 80.
And change this side here to 80. Let's go
ahead and add the background image for
the right side here. Go to the row settings,
background, scroll down to column 2 and
I'm gonna go with an image look at this
dark plate image here. There we go. Let's
add that spacing to this one here also.
There we go so that's looking pretty
good.
The next thing to do is to add that sort
of slash effect here to make it look
like there's a slash coming across. So
now, to do that I've got a link down
below to the tool that we're gonna use.
Okay so it's this Clippy tool here. Which
allows us to design the look that we
want as far as the slash goes. And then
we can just copy this code down here and
it's gonna put it into our website for
us. So to make this work we need to go to
trapezoid. And then we sort of want to
get kind of look we once in the
trapezoid section. So, we'll make it like
let's go like this something like this.
And you know get for me what I did
is I just tried it and played with it
and sort of figured out where the
percentages were changing and then just
adjusted it until I got the right look.
So to get a good rough idea of how you
think you want to go something like this
and then just copy this, copy this code
right here.
Let's go back to our website and then
since the slash is going on the left
side here what we want to do is go to
the settings for the left side. To do
that you go to the row settings, and then
go to advanced, custom CSS. And then we
want to use the column 1. Main element
and then just paste that text in. Okay
and it's hard to see but it did do it.
And that's because the background for
this section is white and to make it
work with this black plate. Let's make
that black so go up to the section here.
Click on backgrounds. Change the color
here to black. There we go. There we go.
Nice little slash. We do the same thing
with the row below. So, we're gonna add a
new row. It's also gonna be 50/50. And
then I'm gonna go ahead and add in the
text. I'll just fast-forward through this
part right here. Alright so now let's
make these columns here full width.
And then let's change the background for
this left side to white. So background,
column one. Maybe a white to match the
upper side. And let's change the padding
around this column so it fills up the
whole section here. Let's adjust the
gutter width. There we go. Now let's add
some padding around the text here. I'm
gonna make the text centered. First of
all, let's remove this row over here so
we can see what we're doing. There we go that
looks pretty good. And then let's do the
same thing on this side here. There we go.
Now let's get rid of this spacing up
above here. So, just drag that up. And now
let's make this slashes meet and this
takes a little bit of finagling. A little
bit of figuring it out to make it work,
but it's definitely worth it. So, we're going
to go back to our Clippy tool here and
this time we want the slash to go the
other way. Go ahead let's try this. And
it's gonna be a little bit different
because this section is a lot taller.
Okay and then for this we want the to
use the left side here to adjust the
setting. So, just click on the gear icon.
Go to advanced, custom CSS, go down to
column one main element, and then paste
that in. There we go. I happen to nail it
right there so I got they that perfect
match here. You might have to mess around
with the the sizing of this and the
spacing to get this sort of perfect
match, but that looks pretty good. One
thing I definitely recommend is as
you're working on your website, and
you're building it... Divi is supposed to
automatically save and it does work, but
I kind of use that as like an emergency
situation. So I definitely recommend
clicking the save draft button often!
Alright so there we go so now we've got
that slash look that we wanted. And then
to make this work for mobile, because
I've already tested this and this does
not work well for mobile. And you can
actually view it yourself by clicking on
a little mobile phone. It gives you kind
of an idea of what its gonna look like.
you can see that it really doesn't look
good I mean we've got the slash on the
right side of the screen and slash on
the left and it doesn't the the titles
don't match up with the text so we don't
have the dessert is not under the dessert.
It's that dessert it's under dinner and
then this doesn't have a heading so we
need to make a special section just for
mobile users. So what I recommend doing
is making a new section right below this.
So we're gonna use the section module.
Let's actually scrunch that up there so
it's at line breaks there make a new
section. Go with regular and then let's
just stick with this straight single row
section rather than dividing it up. So,
we'll start out with a text module and
I'm gonna sort of fast forward through
this part here, because you guys sort of
already know how to do these things and
I'll talk about at the very end how we
make it into a mobile page.
Now one thing I do want to point out
here is that what I want to do is I want
to copy this text here the menu text and
I want to paste it down below but it's a
little bit hard to kind of drag that all
the way. So again go ahead and use the
wireframe view tool to do that. This is
the text here for that row and then just
drag it right below that divider. There we go and
then we can go back to the desktop view.
Whoops! I actually want to drag that in a
row below that. So let's make a new row
and drag that text down below that new
row. All right there we go. Now I'm just
going to do the same thing for the
dessert section.
And then just to make this a little bit
more fun I'm gonna add a little slash
here on the bottom. There we go give that
slash down there too. So just a little
bit, a little bit of fun thing to bring
that into the mobile also. Now to make
this work for mobile only. So that this
is gonna show up on mobile and tablet
and look correct. What we need to do
let's go up here to the section and
click on advanced, and then visibility.
And we want to disable this on desktop.
So this section here won't be viewed on
desktop. We'll just keep going down for
all of the sections. You can do this with...
You can do this with anything in Divi. You can do
it the sections. You can do this with a module.
Whatever you want, but in this case we're
just suggesting just doing it with the
sections that apply to the mobile
version of this site. And you can see
that when you're on the desktop view
that the sections that you've disabled
they don't disappear they just turn this
light gray so you can still see them and
you know which sections have been
disabled. Maybe the same thing for the
dessert section here. Go to the gear icon
for the section, go to advanced,
visibility, and then disabled on desktop.
And then just check that and we'll
scroll back up here to the top and then
we want to make sure that these sections
here. So, the section below menus we want
the manu to show up on both, but the
sections below menu, below the menu
rather we'd want to only show up on
desktop. So we go to advanced, visibility,
and then we do disable on phone and
tablet. And that will make it default to
the sections that we created below only
showing up on mobile and tablet. And then
let's just make sure that we've got that
correct. This is not a new section so
there we go. So now when we go over to
the mobile view you'll see that the
dinner,  dessert sections that we first
created are now grayed out because they
won't be visible on mobile. And then the
dinner and dessert sections that we've
created below obviously... okay so so
here's a little issue with this and this
is why you need to test, but we need to
change the size of this slash here it a
little bit less aggressive. We can check
that out we can see here that the
sections that we want for mobile and
tablet are not grayed out because there
be visible on mobile and tablet. Let's go
ahead and adjust this slash here. I'm
gonna save the draft now alright. So
let's go ahead and move on to the next
section. Go back over here to the desktop
view and let's add in that new section.
Alright and do a full width section here.
Let's do a text box. We actually do
something a little bit different with
this text box. And I'm gonna give you
the text box a background color so it's
easy to see because when I have a really
busy background in this section. And then
I'm gonna add a little border around the
background just set it off from the
background even more. So let's go ahead
and jump in check this out. Enter in this
text here. I'm just gonna paste it in and
change the color of the bar again. Just
to match what I had before there we go.
And then to get out of this just push
escape, it's all I got to do. Then let's
just center this. I want to make the text
white because I'm gonna make the
background black behind it. So hope it
keeps there it goes okay so now we're
gonna do the black background here so
just go over to design and then scroll
down to. Okay it's actually under content
guys just scroll down to the background
and then change the background color to
black. There we go.
And let's make the text a little bit
bigger
using a header font here. The backgrounds
white so let's go ahead and put in that
background image. All right there we go.
And give a little space around this
black bar so it's a little bit easier to
see what's going on. Okay and then we'll
add the border there you go. So that
looks looks pretty cool. And then let's
add a four column section right below
this with some information about the
events that are available at this bar.
There's going to do the first one and
then I'm just fast forward to the rest
of them. What I've got here is you've got
an image section
and I'm gonna put a black border around
this image
make it
a little bit chunkier here. Something
like that and then we're gonna add a
text box below that and I'm gonna make
the background here black again. Make the
text color light. Then we're gonna do a
little bit to the do a little bit to
the padding and margin here to make make
it look like these two sections are
actually attached to each other. Let's go
down to design spacing. So the top margin
to 0, set the bottom padding to 20, right
10, bottom 20, left 10. Okay and then let's
change the padding around this image
here. Change the bottom padding to or
there we go. So, now it looks like the two
are linked together and then just to
make it a little bit more interesting
let's just change the color here on the
text to our sort of standout gold color.
Deleted the S here...
There we go and then let's change the
date to our fun little color here.
Now what I'm gonna do just to keep
things easy as I'm just gonna make
copies of these and make copies of these
and drag them over and then I can just
change the text and the image in them so
it'll be much faster to build them.
Okay so there we go that's that section
done and then our final section here is
got a map section. And to do this it's a
little bit more complicated because to
use the map you need to add a Google API
key in and so I'm not gonna walk you
through exactly how to do that but I
will link to tutorial on how to set up a
Google API key and then you can paste it
into the map module. I'll show you what
the finished product looks like.
It's already got the API key on this
here just give it an address there we go,
so now the map showing up but let's make
it grayscale and make it a little bit
more interesting let's widen it out so
it fills up the whole screen here. And
you can just decide how much grey scale
filter you want let's just go
100%. And if for some reason it's not
updating a preview but if you just click
the check box it'll update the map. And
so we need to make these full width here
make their own full width custom gutter
width back down to ones that it widens
out to the whole thing. And let's make
equalize the column Heights when we add
in the address on the right hand side it
will be there. And then let's just get
rid of the padding from the sections
here.
And let's make the whole background here
black since we want the background for
this right-hand side here to be black.
Okay so then there we go now we've got a
completed website here. Got it set up for
mobile so we have slightly different
menus for mobile versus desktop so when
you get the look that we want. And then
last thing to do is of course just check
to make sure everything looks good in
the when you exit the visual Builder. So
click on save draft, make sure you always
save trying to save regularly, and then
click on exit visual builder. Alright so
I hope you enjoyed this video. I hope
that you found it helpful helped you got
some tips that you can use on your own
website. If you like this video I'm gonna
put together a whole playlist of videos
just like this so be sure to check that
out, and I'll have a whole listing of
them also on my website. And for more
tips and tricks just like this be sure
to subscribe to this YouTube channel and
visit me at realwebsitehints.com
thanks for watching.
 
