Web Design Tutorial: How To Build a WordPress Website for a Restaurant Bar a Divi Theme Tutorial


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.

8 Comments

Add a Comment

Your email address will not be published. Required fields are marked *