How to Make A Website for free on WordPress.com Restaurant Example

How to Make A Website for free on WordPress.com Restaurant Example

August 22, 2019 90 By Bernardo Ryan


in this video I’m gonna show you how to
make this website for free using wordpress.com this is a one page business
website perfect for any kind of business in this example I’m using a cafe but if
you just change the images and put in your own content it really fit any kind
of business i’m Tim from real website hints dot com and I want to help you make great
websites and find the best and easiest way to do it if you want to see what my
current recommendation is for the best and easiest way to make a flexible
website check out this video right here or head over to real website hints dot com
slash best website if you just wanna learn how to make this gorgeous website
stick around and I’m gonna show you how to do it step by step right now so let’s
go ahead and get started first thing you need to do is click your browser over to
wordpress.com and you want to create a website and it will be quick and get
started and you can go ahead and pick a theme here the theme that I chose is not
here so we can actually skip this step and click on skip and if you have a
domain name that you can use a charge you money but in this example I want to show you how to make a completely free website to do that our domain name is
going to be something like your website or here they have example .
wordpress.com if you want your own domain name you know like google has
their own domain name of google.com if you want your business dot com you need to pay them some money $18 to have to register your domain name
and then have them posted and set it up for you but for right now we’re gonna do
a free website so go ahead and type in your name I’ll choose real website
hints dot com whoops real website hints dot WordPress dot com and that one’s free as you can see here’s we’ll click on
select and then we’ll stick with the free plan and we’re going to enter in your email address mine is Tim at real website hints dot com go ahead and enter a
password and click on create my account so here we are where we are going to build our website this here is showing
what our website is gonna look like right now and as you can see there’s
nothing to see there and start building we click over here on my site and you’ll
find that on wordpress.com this my site menu is pretty much everywhere although
I noticed that as I was working on this tutorial that there are still using the
old wp-admin dashboard on some sections of this website so we might see that pop
up it looks like they’re mostly transitioning to this my site menu for
adjusting your webpage probably not important to you but just a little heads
up if you see a different menu here from making these changes now when it comes
to building websites with WordPress and thats wordpress.com or wordpress.org
where do you download the WordPress files to your own server of your
choosing you’ll find that when you’re adding
content to pages or blog posts or adjusting the settings almost all that
is the same for every single WordPress website where you get a lot of variation
is in the design settings of the website and the design settings are almost
completely dictated by which theme you have installed on your website and so
there’s just wide variety of controls for adjusting the look of your website
depending on what they may use and some are really easy to use and some are a
little bit more difficult so go ahead and pick the theme that I’ve chosen for
this tutorial and that’s the I believe pique cafe theme for the pique theme so go ahead
and click on this right here and the really important thing to look at when
you’re looking at themes and this is because it’s something that Google has
started really looking into is making sure that a website works on any device whether
that’s a phone or a tablet or on a computer as you can see here they’ve got
these buttons up here to show you what the theme will look like on different
devices as a sort of what the theme would look like on a tablet device or on
a phone and then on computer it’s really important when you’re building a website
to make sure your website works and looks great on all those devices because
if you want to be found on Google or other search engines that’s going to be
something that’s going to be very important and as you can see it’s very
similar to the website that I created I’m basically using the same idea they had in
their demo gonna show you how to do it because it’s not a hundred percent intuitive
on how you do a lot of these things and and make it look this way let’s go ahead
and get started with this theme and so to do that we can try and customize so
there we go it’s added that theme to our website you can see you can already
see the changes have taken place and it’s brought up this customize menu we’re not going to customize anything right now but we will click save and activate and this
will activate the theme on our website and click on discover the themes awesome
features and as I said before each theme has its own way of handling the design
elements of your website and so what you want to do with this page here which has
all the instructions on how to use this theme is you want to either print it out
or download it and just set it aside so you can access it when you’ve got a
question about what to do all the answers on how to make changes to the
scheme are right here I’m gonna walk you through a lot of them, but it’s a really good
idea to print this out and save it. so go ahead and do that now to add the
logo and change the title of a website what we want to do is when I get when I
go to my site and then scroll down to themes and then click on this button here
that says customize is what we’re gonna change a lot of the design settings for
a website so we’re going to click on site title tag line and logo and a although real website hints would
probably be the name of this since I called the website real website hints but in
this case we’re gonna call this cafe website and we’re gonna upload a logo
click on select files and then we’re gonna go to cafe website logo that I’ve already
made and we’ll do set as logo and there we go. And now if we don’t want this cafe website titled to
appear which we don’t in this case when I click on this display Header Text that’s gonna
remove that you can see over here on the right these changes taking effect and
generally you’ll be able to see the changes that you make in the customize
window take effect over here but not for all settings so just keep that in
mind we don’t see a change happen over here click the save and publish button
and then close out of this and then just check on the changes that you’ve made so
that’s just a quick tip there now let’s go back to our my website and the next
thing we do is add a couple of pages to make all the functionality work right
right now the website is set to show our blog posts here but since we want to
make a one-page website using this theme we actually need this to display a series of pages
which they call panels so let’s go ahead and make a couple of pages here see you
click on pages and then we can just click on Add right here and so we’re
gonna call this page the home page and then all we do is
click Publish and then we do when I have a blog on this website so we can keep
our customers or viewers up to date with what’s going on so it will do is we
need to make another page for our blog posts so click over here to pages and
we’ll click on Add page we’ll call this page latest info and then click on
publish to add that page and then go back to pages and so now we’re back on the my site logo
and what we wanna do is click on the Customize here again and then we want to
do static front-page want to change this to a static page so change it to that
home page that we just created for our front page and then we’ll change this
post page to the latest info page and we don’t have to add anything to the latest
info page it’ll automatically show our blog posts in order as we publish that
it’s always really important remember after you make any changes over here to
click the save and publish but if you don’t do that you won’t save your changes I’ve done that many times it’s been very frustrating then click the X here and let’s just see how
that affected the front page of our website and you can see here we’ve got
our logo up here and then we get these odd share buttons which we’re going to need to get rid of I’ll show you how to do
right now and then we’ve got just this the footer section of our website so let’s
go ahead and get rid of these weird share buttons because we don’t like those on our website it’s not going to look good one page website so we’re going to click on the Configure sharing and click
on sharing buttons and then uncheck both of these things when I click on show
sharing buttons. We can leave them on posts because that might be appropriate depending on
if you want to have sharing buttons on your post but on pages we’re going to turn
that off and then click on Save Changes here and just for good measure will
click on Save Changes here make sure that that took effect which is it did. Click on my website and the next step is to add a header image to go along with our cafe
website logo so when I click on themes customize and as you can see here they
suggest a header size of 1,400 by 400 pixels it’s really important when you’re
using this team for all the background for all the panels that you can create
that all of them have a with a 1400 let’s go ahead and add a new image (select files) I’ve already pre created all of these background images go ahead and add
this one here cropped up to 400 so that’s going to be our header and footer images you can see
here and let’s go ahead and create our first panel which will show up here so
we can click on either the Edit Page button here so we have that home page that we created and that’s gonna be the very first panel our website text in here for now and then add some
buttons like are shown in the example you want to look at the instructions for
the theme and they’ve given you some instructions on how to add buttons they’ve already designed the buttons that you saw in the demo and as you can see right here here are the
instructions and a button and this is the HTML code information for adding a
button and where this little hash is here if you wanted to link to some place that’s
where you would add the link and we’ve got two different styles of buttons so
is this blue button and then the other one is white and added all you gotta do
is just copy this here right click to copy this aside and I’ve got the code
information and you need to click over to HTML here since it’s HTML code
we need to write it in there as HTML if you put it in here you’ll just see the actual
code on your website and not so click on HTML we can actually remove that HTML there we don’t need it and then paste and if you put in a hash like this it’ll make
this button a placeholder if you actually want to go to a specific page
you type in the URL of that page right in hear we’ll add that second button right next to there then go back to
visual and let’s put a space in between those two there we go as you can see here on the backend you’re not going to see the actual buttons you’re just gonna see a link but
when I go back to the front you’ll see them as actual buttons and then to add
the background image for that first panel we select this featured image over here
and you click on set featured image we’re going to add a new image and we’re going to use this image as our image and click on open and click on set featured image there you go you can see it set up here and since we already created this page click on update and that’s gonna save our settings alright let’s go and see our changes so we just click on here will take us to the home page or website and then we go so you can see
that we’ve got the logo of our website we’ve got this nice background image of you
wondering where I got all these images are actually all free to use images and
go to real website hints dot com slash free images you find my post showing you
several different places where you can find great free image websites now we’ve
got a little bit of a problem here is these aren’t centered let’s go ahead and
fix that so to do that we’re going to click on Edit
Page over hear what we do is win just highlight all of this text and then we
wanted just click the center button and if you click on this button over here
adds some more options that you can have for making changes to your page so let’s
go ahead and click Update to save those changes we just made and let’s check
that out there we go now it’s all nice and centered so now we’ve got this header
the top of our website and a nice footer for our website so go ahead and add
another panel below this so we’ll click on my site and want to add a new page has on
this theme to add more panels we create pages for each panel to go ahead and
click Add to create a page for our testimonials or call it and make this display our testimonials were
gonna create here we click on the page options and we change the default
template to testimonials and now this page is going to show us the
testimonials on it so go ahead click on publish and then we just create a couple
of testimonials using this special section here for specifically for
testimonials and that’s unique to the specific name and click on testimonials
and we add NEW and they can see here we’re back on the traditional WordPress
dashboard so if you’re making your website and you had downloaded WordPress
from wordpress.org this is what the dashboard would look like from making
changes to your website so we’ll go ahead and add the customer’s name here
Steve Rodgers and if you wanted to have a little bit description about this
person the way that this theme works is you would
add a little bit of code right next to it it’s pretty simple he just add this EM
code and then say what ever you want to say about the person and then you add
this / em at the end and in this theme this information here’s you know appear
underneath the name you can add the testimonial that the customer had there and if you set
a Featured Image it’ll have the image that customers go ahead and upload a
file and then we’ll click on publish and will add one more
new testimonial just a fill up the space and you had a bunch of testimonials will automatically rotate them through
randomly so to show different testimonials every time somebody log on
to your website so go ahead and add one more new testimonial clicking Add new
here and let testimonial for me that little em code here and then close that
HTML comments and then we’ll set a featured image and click Publish and just to keep
things consistent we can actually adjust the pages from here but to keep things
consistent go back to the my site back to our pages over here clic on
what do our customers say well as a featured image which is going to show up
on the background in this theme then we’ll click on set featured image and then to make this
testimonial section we’re gonna go to my site and then themes customize and then in
this theme here what we do is we go to theme options and this is how these
panels here are how we add the different sections to our homepage so this first
section here was changed in the site title tag line and logo section and then this first panel click on theme options we click on panel one and then add the content for that and that’s what do our customers say section so we’ll click on that and as
you can see here it shows up very next thing and then we can click on save and publish go ahead and add the next section of our
website the next section we had a little blog sections we already created that blog
page so to have it show up we’ll add a couple of blog post so I’m going to show you how to add some blog post right now so we’ll go back, actually close this and then
we’ll add a couple of new blog posts and we’ll add a bit of content to that if you
want to add a featured image to this post you could do that here and the
featured image on posts in this theme act differently it actually gonna show a
picture at the top of the post rather than setting it as a background but for
this one here I don’t have a picture so we won’t add one more quick on publish
and then we’ll add one more post just sort of fill out that section so we’ll go back to posts here and we’ll click add Post and this one trivia night and we’ll add some text here and you know what for this one we’ll go ahead just added featured image you can see what it looks like so featured image set
featured image and let’s go ahead and use this image again here said as
featured on publish now let’s add this section to our home page or click on my
site contains customize and then we’ll make this panel two so we go to theme
options panel two and then we set that to the latest info which is what we said
earlier has our posts page so go ahead and click on that save and
publish we’ll close this will go and see what our website looks like now
we’ve got the header for a website with those cool buttons that what do our
customers say about us and we put the latest info here we can set a background
for the latest info so let’s do that real quick so we can click over here on
Edit page and then we can do set featured image then we’ll add a new picture like this one here to open that set featured image make sure you always click Update
and now let’s go ahead and see what our page looks like there we go out latest info we’ve got these two blog posts and he added another blog post it would show up here and then your most
recent blog posts would automatically show up on your front page and if you
click on one of these posts so you can click on this post here and we’ll see that featured image
that we had and what that looks like click on read more and see here the
featured image got added up here and it’s got the logo of our website on it and that’s
just the default for how this theme treats featured images in blog posts and
then you can read his blog post here and then we can go back to the homepage by
just clicking here and then if you don’t have a featured image it’s going to use
that header image that we added earlier so we click on best practice and then
you can see that header image that we created earlier right there and then you
can see where users can add share this on FaceBook or they can add a
comment on each post and you can turn that off like a showed you earlier on in
the settings just go ahead and continue and we’re going to add a specialty
section I’ll show you want it’s gonna look like to go ahead and add this specialty section
here with this map in the background and then this little specialty box here I’ll
show you exactly how to do that let’s go ahead and start with that go back to our
website click on my site and click on pages and add new so we’ll get this
panel a title for this page title now the way that this theme is set up to add
that little box on the side requires us to use a little bit of HTML
code and it shows how to do it in the instructions for this theme as I said
before other themes for WordPress one of the
entirely like is the Divi theme by Elegant Themes which is a paid theme in actually
does not work with wordpress.com it only works with your own separate WordPress
website but a lot of that stuff is very drag-and-drop intuitive easy use this
theme is a little bit more tricky but it does give you really great results so
let’s see how we do this. What we do is give our page title click on HTML over
here and then we’re going to copy from the instructions the code for how to
make that section so the code for that little side box section is this here
it’s div class overlay alignright one word and then what coders like to do
oftentimes is every single piece of code that you put in for a html has got to have a tag that shows the end of it so I like to add that right in the beginning
so we closed the div tag here it’s what’s called closing the tag and I’m
not really an excellent awesome amazing programer I just know a little bit of HTML
code because when you’re working with WordPress websites it comes in really
handy sometimes a little bit so there we go this div code here so that’s
the front of it and this is telling it what to look like so overlay right align
right and that this alignright part is actually referring to some CSS code that
the theme designer has added in and then for each section that we want to have this sort
of title for additional code for these icons and it talks tells you exactly how
to add those icons in this phone numbers let’s go ahead and add in the first line
there and I’ll show you how to do it to get that look we’re gonna use the h3 tag or
the heading 3 tag because that’s the size and the color is already part of the
theme for this tag and then we’re gonna add the image which
is the icon so we need to use the image tag with is “i” and then class equals and
quotation marks space “fa” space “fa” dash phone I’m not making
this stuff up it all in the instructions for this theme so not sure of exactly
what to wright you’ll see it right there and so that’s the tag for the
image and then we’re going to close that image tag / “i” then we’re going to add the phone which is the word “phone” it’s going to show up and then when it closed at H3 tag and then below that put in the phone number and then go on to our next
line and if you want to see what this looks like you know it’s really
important whenever you’re writing code everything’s going to be exactly correct go ahead and publish that and we can
click the Preview just to see how we’re doing here so
there we go he did see it added that little box to the side courses is not how it actually going to
display our website because this is showing it as its own page rather than as a
panel but it shows us that we’re on the right track then we can just close that preview and then we’ll
just keep going and I’m gonna copy and paste the rest of this and basically all
the same same methodology just repeated over and over again and it just got
these different image classes which are all in the same description so all that
information you’ve got from the theme description so it’s go ahead and update
this page so that’s saving it so we’ve got that information saved and will set a
featured image will use that map featured image as I said before I got
all these featured images from one site I’ve got a whole listing of where you can find free images real
website hints.com / free images here we go that featured images and I did
reconfigure all these images to have that 1,400 pixel width so they all look
right on this webpage has with this specific theme you need have all the
images for the backgrounds be exactly the same with that’s really important to
get great results different themes some different themes will automatically
spread it out the right width this particular theme everything used to be the
same width We’ll click on update let’s go ahead and add this panel to our website so we’ll go to
back to the pages and will click on themes customize and then we’ll go to
theme options again and that was panel 3 and will make that they visit or connect
with us panel in a scroll down and we can see that it’s been added there was
great our page is really coming along now we’ll click on save and publish if you don’t click on save and publish it won’t get saved and won’t get added to our website now I will show you one more
thing from the example they’ve got this section here with it got three different
columns and gonna show you how to do those three different columns using this
theme so what we need to do is we need to actually make four pages the first
pages gonna serve as kind of the main container for this panel and it’s where
the title for the panels is going to be then the other three pages are going to form
the columns for this panel to go back to our site here and when they go add page called this page “menu hits” and
will click Publish and then we’re going to create another new page and we’ll call
this one “meatzza”, like pizza but different a little bit of contents to this page I like to
use this just for fun I’m using filler content of this website called bacon
ipsum it’s just all texts with meat in it just kind of have
a fun little thing to go ahead and just copy some of this text go back to our site and we’ll add that in here and then what we want to do is under page options we don’t
want to be a top-level page we want this to be under the menu hits page click
on that and then we click Publish and then we’re going to add another new page
go back to pages we’ll click add then we’ll add some slightly different text just so that it looks a
little bit different here and we need to remember to under page options at that
under the menu hits publish and then we’ll go ahead and add one more we’ll go to pages and click add. We’ll add some text here and then under page options put this under the menu hit section Click publish and then actually on the menu
hits page to go back and edit that because I think we’ll add a featured image to this we’ll up load a new image will use this image here we’ll set this featured image and then we’ll click on update go ahead and add that to our next panel click on themes customize and then theme options panel four and menu hits and let’s see what that looks like
and what I forgot to do we’ll go back and do that what we need to do is change this to the grid format on
the menu pages to go ahead and do that we couldn’t save and publish just leave
that right there and close this go to pages menu hits and click on page
options and will change the template to grid page template click on update go to my site and check that out
there we go and some reason the background didn’t
stick so let’s see why that didn’t happen we’ll go to edit page and some reason the featured image just
didn’t stick we’ll just add that again click on update it seem like there’s a problem saving it last time there we go so it should work now go back to my site. There we go we have a great looking website the only thing is we need to just fix
this footer section and make it a little bit more interesting a little bit
less long oh we’ve got actually two things to look at here one is we can have a we can
add menu to our website so we can go ahead and do that and then the last
thing is this footer section lets ‘s ahead look at the menu first actually
a website menu that is so to do that we go down here we click on menus we’ve got this default menu here which has
added all of the pages that we’ve created but if you wanted to create your own custom menu click on this here and you do add new menu and then you can add
different pages to your menu go ahead and to that we’ll click on we’ll just put this in order what our
customers say will add that item click on add a new item and if you wanted it to cascade down which we don’t want to in this theme and you wanted to add a different kind of theme and he wanted to
add items underneath that you’d add a child menu item and it would make a drop
down but we’re for this web page you’re not going to add another menu item can
add that item below and we’ll add latest info and then we’ll add another item
and we’ll add the visit or connect with us and we’ll add another item and we’ll add the menu hits items and and then we’ll save that menu ok so now we’ll go back to our home page and
since it’s set to the primary menu and its menu one the one we just created that will be on the top of our webpage let’s go ahead and see that here there we go now we’ve got this menu that will
connect to these different pages that we created as good the many sorted out now
let’s deal with that footer so let’s go back to my site and we want to go themes
customize site and we wanna go to widgets and widgets are either side bars or the footers
usually on most themes go ahead and go to Widgets with the first to get the
sidebar and that’s what she was showing up in the blog post section we looked at
our blog posts if you want to adjust those settings there and just as they’re
okay so it’s a good look at what the widget area looks like a scroll down
here you can see here it just in one column but we have these three
widget areas and typically these three widget areas the first widget area will be on
the left second one will be in the middle and the third one will be on the
right that only works if you have all three which areas filled up with
information in them if you don’t have that it will just stay in the center
like this Let’s go ahead and look at the first widget
area and it’s got all of this information in here we don’t want any of
these things actually for our look so we’re going to click on remove for all of
these and so for the first widget area we’re
gonna put a little bit of information about our restaurant so I can you use
the text widget right there and we are going to give it a title to add some content and if
we wanted to add another widget below that we could do that here in this case we’re
gonna do that so we’ll go back go to the second footer area and will just add this recent
Posts give it a title is from our blog you can choose how many you want to show up
and it’s just gonna show the title of it is not going to show the whole thing and you can choose if you we want it to show the post date or not then we’ll go back and we’ll add a third
widget area and for this will use the social media icons and then we get title
and then if you have your Facebook username or your Twitter username you
can add that in there if you want to see what it’s going to look like it at the
hash and there was a couple of these hashes you can see what it’s going to
look like and then we can scroll down here said I can see we’ve got those
three areas on the bottom of our website and make sure click save and publish because if you don’t
it won’t save your changes and there we go so that’s how you make a free website
using wordpress.com course every different theme with WordPress is going
to have a slightly different instructions on how you do it I do think
this is a very good looking fairly easy to make websites but she did you follow
the instructions that I’d given you here and then you look at the instructions
for this theme so I hope you found that very helpful if you want to see my favorite current ways of making websites head over to real website hints dot com / best website if
you have any questions about making websites or what the easiest way to do
something is or you want me to look into something please go ahead and leave a comment below or visit me at
real website hints dot com I hope you found this helpful and I hope you get out
there and make some great websites for your business thanks for watching