Tip:
Highlight text to annotate it
X
Welcome to our "Creating a Restaurant Site" workshop.
People visit restaurant websites primarily for one of the following three
reasons:
The first is to view your contact information so they can find where your
location is,
contact you if they have a question, or to make a reservation.
The second reason is to view your menu.
The decision of whether or not to dine in your restaurant
ultimately comes down to the food, so people wanna see
what you will serve and how it is priced. Lastly,
they'll want to see photos. Prospective customers will want to get a sense of the
feel of your a restaurant
so they'll know whether it's suitable for their occasion and the people they're dining
with.
Is the restaurant casual or fancy? Is it appropriate for a business meeting
or a date? Is it kid friendly? These are all questions that you can answer
by strategically choosing images that paint a picture of what the experience of
dining at your restaurant is like.
This is all you'll need to have a great restaurant website as long as these
elements are easy to find
and can be viewed on any device you're in business. Let's look at an example of a
restaurant website that's particularly effective.
In this workshop, we're gonna build a restaurant website together.
In part one of this workshop we'll choose a template and customize it
focusing first on the most important steps: Adding menus,
images and contact information, including an OpenTable reservation tool.
In part two of this workshop, we'll build on the solid foundation
and add content features that will help draw more traffic to our website
and in, turn to our restaurant. Here we'll be focusing on search engine optimization.
Sharing news and press, promoting events,
and selling gift cards & merchandise through your website. You can follow along with
us
on our restaurant example site at WS dash
restaurant dot Squarespace dot com.
So let's begin and go through the steps of building a restaurant website
together.
First, you will need to choose a template and sign up for your trial account
We're going to use Aviator.
Enter your name
email address and password to get started. If you've already signed up with
Squarespace
and you're creating a second website, you can use the same
email address and password here to manage these sites under one login.
You are now in the Content Manager, where you can access and edit your page
content.
Click the x next to each page
to remove them from your site. For now, we'll remove
all pages except the example menu page and Aviator's unique template-specific
collection
called the info page. This page can be used as a landing page
or a quick reference page, and the information on the page can be
automatically generated
based on your information you have added in the Settings > Basic Information.
It isn't required to set this page as home, or to show it as a link on your
navigation bar.
Before we adjust our settings we will hide the Info page from the main navigation
but still have an accessible through a direct link. We can click
and drag the page title down to the not linked section. For now,
we'll leave the info page set as our site's homepage.
Next we'll click the gear icon to enter the settings area.
The settings area allows you to access everything under the hood of your site.
You can enable social sharing buttons, change templates,
register a custom domain name and more.
Under basic information,
we can enter our site title. This should be the same name as our restaurant.
Scroll down to the logo image option.
You can drag an image here or click the plus button
to open a dialog box to select an image file. Please note:
this will replace the site title and tagline text on your actual site
but your site title will still appear in your search engine results.
In the subject / type drop-down menus, select business from the top menu
and restaurant / bar / caterer from the second.
Then enter your contact information in the phone number, email,
and physical location fields.
This information will be available to search engines and can be used as a
content source
on the info page. Social media networks
are invaluable resources for businesses today. You can gain followers,
communicate directly with your customers and drive traffic to your main site.
Click Connected accounts
to link your business is social media accounts. Then click the Add Account
button.
You'll need to connect the personal Facebook account that acts as the admin
for the Facebook Fan or brand page. From there
click the drown-down menu under push target and choose your fan or brand page
title
then paste the URL of your Facebook fan or brand page
in the profile URL field. When you're finished
click save. You can repeat a similar process to sdd your Twitter account
Instagram account or any other account type available on our menu.
For each account
you can toggle on/off the options to show our built-in social icon
allow automatic download data for enabled feeds
and allow push option to be available for sharing new blog posts.
Now we're in business! To give ourselves a good feel
of how our site will appear when we start to add content, we'll take a quick look at the
style editor
to remove some other example content and replace it with our own.
Simply click the preview icon to view your site as visitors will.
Then we'll click on the paintbrush icon to open the style
editor. The Aviator template allows for two different backgrounds to be added
to your site:
A specific background for just the info page
and a general background for the rest of your pages. Click on the info page background
image
element and click the trash can icon to remove the example image.
We'll add our own image by clicking the now empty spot
and browse our computer for an image we'd like to use. This is a good opportunity
to use an image
that gives your site visitors a feel for your restaurant's environment and personality.
If you don't have a photo of your spot you can choose something else that gives a
sense of your brand's personality.
Are you fun, casual, fancy? There are plenty of resources online that offer great
stock photography.
We'll come back to our style editor after we've added more pages to our site
so that we can add a background image for the rest of them. Since we're viewing the info
page now
we can see the specific style options for this page near the bottom of the
style editor.
Let's first use the poster layout option.
Next
we'll choose the content overlay color. Let's choose white for a bit more contrast.
So that takes care of our info page settings.
In order to make adjustments to our other pages, we'll save these changes
and navigate to a new page by exiting the style editor. Now that we're viewing a
different page
we'll see options that will apply to the rest of the site as a whole. Again in this
template,
only the info page offers options to change the layout to poster
or business card, and to auto-populate content based on what we've entered in a basic
information settings.
Now let's change the header and footer backgrounds to white
so our logo will stand out a bit more. You can use a transparency option
if you want your backgrounf image to show through a bit or even adjust the content
background-color
to achieve a bit of contrast. Finally
we'll save the style changes we made to our site so far. And here's how it looks at
the moment.
It's looking pretty good so far. All Squarespace templates are built using
responsive design
so this will look great on mobile devices including smartphones and tablets.
So we're off to a great start. We'll come back and make some final adjustments
before we've added the rest of our site content.
For now, click the X to close the style editor.
Now let's click the gear icon to return to the Content Manager
where we can add a menu. It's important to make your menu easily readable on the
web.
We do not recommend using PDFs. These are harder to read
especially on mobile phones. Additionally
having your menus available as text on a website makes them accessible to search
engines like Google
and can improve your chances of being discovered online.
Now click Add Page, select page
and title it Menu.
While viewing our new menu page click the add block button
and in the add a block overlay, click and drag the menu block to position it
within your content.
Or, you can just click it to place it below your content.
The menu block uses special formatting
to make the design clean simple and easy to update. Since most restaurants write out
their menus using word processing software
like Microsoft Office, we decided to make it easy for you to simply copy the text
of a menu
from a document or email and paste it into the menu block.
I'm gonna paste a brunch menu in and we'll see with the syntax looks like.
Once we save, we can see how it translates to the menu layout.
For now, let's edit our menu again
and take a look at how this menu syntax works. To add a menu item
simply type the name the item below a section of the menu. You can see your menu
update in the Content Manager
as you add content. Directly beneath the menu item
you can add a description of the item. Beneath the description
you can add the price. It's not required to include a description
you can simply add a price directly beneath the menu item instead.
Adding a price is optional as well. You can also add an option to an item
such as adding chicken, shrimp or vegetarian, or
add avocado. Just add a plus sign in the line beneath the price
and list the option. You can add as many options as you'd like
by listing each on a separate row. To add another item
leave a row empty and repeat the process. You can split a menu into sections
such as first course, second course, or red wine
white wine, Rosé. To add a section, simply and the section name
above the appropriate items, then add at least four hyphens beneath that.
On the line directly underneath the four hyphens, you can type a description of
the section.
Make sure to leave a space before you type the first item.
That way it won't be mistaken as a description. A single menu block can
hold multiple menus to differentiate between your offerings
like brunch, dinner and wine. To add a new menu
simply type the name of the menu and place a least four equals signs beneath
it.
You'll see this here with our brunch menu. On the line directly beneath the equal
signs
you can add an optional description of each menu. Finally
one other formatting trick to know is how to add pricing variants.
For example in our wine menu, we wanna sell some of our wines by the glass or bottle
and we want to list both of those prices next each wine.
You can and pricing variants by using a slash between prices.
This is also useful if you offer an item such as a half portion
or full portion. You can also designate a market price for seasonal items
by adding $MKT, or dollar sign market price as the price.
As long as the currency symbol is first, you can place the price immediately
following the menu item
or item description. Click the Design tab within the menu block configuration
to edit the appearance of your menu. The simple menu style
creates a single column menu with centered text. The classic menu style
create a menu with multiple columns. Classic may be preferable if your menu is
longer
so your visitors will not have to scroll as much to see all of your menu items.
Note that this option is responsively designed so the number of rows will change
dynamically depending on the width of your screen.
We will choose the center option for our menu. Here you can also choose the dollar
the Euro, the pound, or the yen as the currency symbol for your menu items.
Alternatively you can hide the currency symbol by selecting none.
Click the formatting help tab for reminders on how to format the text in this block
and when you're all set just click the Save button to save your menu block.
There are a number ways you can display menus in your website.
Take a look at the demo menu page that came with our template.
You'll see another method to add your different menus using multiple menu
blocks.
Rather than separating menus in tabs, you can have each in a different block.
This can be useful if you wanna be creatve with your layouts, or have separate
menus on separate pages.
We can also and text and image blocks to give an introduction to our menu
or to show off more photos of our food. This is a great way to make your menu
stand out
and add visual interest. Our layout engine is designed into a 12 column grid layout.
This allows you to arrange content blocks into multiple columns
with an easy click drag and drop using your mouse. When you drag two content blocks
next to each other
you'll create two columns. Each is equally halfof this twelve column grid
or in other words, each spans the width of six columns.
Dragging the center handle between these blocks will resize these
proportionately.
You can resize it to a 4 and 8 split or a 2 and 10
and if we add a third block to these rows it will be four columns wide
each. Once we resize them using the block handles
this will change proportionally again.
Finally you can always use a Folder page to nest individual pages together.
Each menu can then be displayed as a navigation link
in a drop-down menu on your navigation bar. Just drag a page into the folder
to add it and organize it.
If you would like to have a PDF version of your menu available for download
you can link a file for download by adding a text block to your page.
Type text such as download pdf menu
select it with your mouse then click the link icon on the format bar.
Click the upload files tab and choose the file from your hard drive.
if you prefer you can similarly add a link to an image
such as a thumbnail of the menu. Just add an image block
and use the clickthrough URL field
to choose or upload your PDF file.
Adding content to the footer or sidebar of your template is effective for sharing the
most important information
as it appears in all pages and is located in an expected place.
Preview your site and click the pencil icon in the lower right corner.
This preview edit mode
is how you edit the template itself rather than the individual pages
and the content you put in the editable areas is visible regardless
of which page you flip to so it always remains accessible.
When you click the pencil icon, a plus and will appear next to your footer
content area.
Clicking this will allow you to add new content blocks here.
You can also click in any of the blocks that are already there to edit.
Adding your physical address in your footer
will allow visitors to instantly find your location without searching for a single
page.
You can also integrate other content blocks in your footer area.
The map block is a nice compliment to your contact information.
The resize and float options you will find in the image block are also available on the map
block.
Click and drag the handles to resize the map to best fit in the content area.
You can also set up a contact form using the form block.
The form block can be used in various ways, from surveys
to contact forms, but a common simple use that we'll demonstrate now is to
collect
email addresses for a mailing list or newsletter sent from a MailChimp
account. Just add a form block
and choose what kinds of fields you would like to include: For example
name, email, address. Asking for just an email addresses is often sufficient
and keeping it simple also makes it likely that people will submit their
information.
We can then choose where we want to store submissions under the storage tab.
You have the option to connect the form to Google Docs to start building a
mailing list
to a MailChimp account to send out newsletters, and to an email address to be
alerted whenever there's a new submission.
Let's also add a text block above the field to read sign up for our newsletter
to give a call to action.
We'll click the gear icon to return to our content manager. The gallery page is a
quick and easy way to let your customers browse the gorgeous photos of your
location
staff and food and to get a further sense and what they will experience at
your restaurant.
In the content editor, we'll simply add a new page
choose gallery, and give it a title. We can click
and drag our images right from our desktop onto this page. They'll instantly upload.
The gallery page functions differently in different templates.
In this template, it is a slideshow, but in others it may display as a
full-screen sideshow
a slider or grid. Nonetheless, you can always add a gallery block to a new page
and this can be styled in multiple ways. For example we can add a page
add a gallery block
drag and drop to upload new images
just as we did on the gallery page
or we can reuse images from the existing gallery. Then we'll click on the Design
tab to choose from various ways to display them.
We can choose from grid, slideshow, stacked
or slider.
Each of these options will have multiple variables such as whether to display
thumbnails, how large they should be how quickly the image should rotate
if at all, and more. One feature to take note of
is the light box view. When a gallery block is set as grid
you can enable the light box option in the gallery block configuration.
This will allow your images to open in an enlarged and readable size
when the thumbnail is clicked by a visitor. This is perfect for promoting events
press clippings or just to give a closer look at your items.
For now, we'll stick to our gallery page as it's nice and simple
and sometimes less is more. Next we'll create a reservations page to make it
easy for customers to book tables at our restaurant. Let's start with the regular
page.
We can add a disclaimer or any important information about our reservations in a
text block.
Next
we'll use our OpenTable block to set up online booking. Once you've registered
with OpenTable
you will be provided a restaurant ID. Simply add that ID to the configuration
and save. Any changes to your reservation system
can be done directly through OpenTable's website. View this page
and you'll see that you're all set to accept reservations. Now that we have
most of our content in the website
we can finish customizing our styles. Once again click the paintbrush icon to
open the style editor.
We'll now click on the page background element to add the main background image that
will appear on
every single page of our website except the info page.
Let's align our font setting with our business's brand
and we'll set our font color to align with that same theme. If we have a set of
brand standards
we can choose the exact color we'll need by pasting or typing
the hexadecimal color code in the style editor.
If you scroll down in the style editor, we'll also find an option to
customize a look at our Open Table block.
Here we can edit the background color of the block, and once again
we can use the hexadecimal color code to match our brand. There's an option to
hide the icons
and another to choose between a light are dark theme
for our text, button and icons. Now our site looks great!
we can make any fine-tuning twice same sizes and styles
and save your changes
again could be ecstatic that the style and the day
now that we've covered the basics we can start to build in content that one child
traffic to your website
so hopefully translate into more customers with greater frequency
one of the key advantages and green space is that it allows you to manage
multiple types of content from one place
while you're saying is already optimized to me in Dexter ran by search engines
there a few actions that you can fill and to provide a bit more information
to the search engine crawlers a robot's these are all necessary for success one
high-ranking say
but I can always help but said back to our settings area
and select the basic Information tab specifically
we're going to enter brief and succinct description in the meta description
field
the meta description is used here Saints overall description
annual generally seen as underneath your site's URL in search results
this should not be keywords: but a cohesive description
about the link them a tweed Squarespace also automatically generates and
maintains a site map for you
which can help some other less sophisticated search engines find all
other pages
another good idea is to and descriptions to your images
this information is read by search engines to find all the context to be a
image
and improve your site success ability for the visually impaired regularly
creating new content
is also important to search engines and your visitors new content will job
search engine bats and customers to return on a more consistent basis to see
what's new
one of the simplest ways to add new content here said
is at a press page in this case he is a regular page
and a gallery block to display images from web site in magazines to showcase
our press coverage
after selecting the gallery block will go ahead and Dragons up our images in
the content am
was these are uploaded
we can edit each one to add the title and description and even linked to the
source article:
in the Design tab let's use the grid design and choose to open image is in a
lightbox
another great tool for restaurants as our events page
here
we can add an event for Mother's Day special
just like a regular page we have access to all of our blocks to and imagines
galleries text products and more
next meal and a thumbnail image in the Options tab to represent the event
finally
let's like the social accounts we've already connected that we'd like to
share new event on automatically
you can use built-in shortcuts to also share the author
title or URL the event post with your social media post
or you can take any text directly in the field and it would be pushed as well
with the event page we can choose from a list display
or calendar via
the counter display looks like this similar to a regular paper calendar
when the event titles clicked it'll open up all the event details
we're going to use the ListView for the site
in a ListView when a visitor views the events page to see a listing of events
that are coming up
when they click the title again all the details were open
just like in the calendar view
visitors can also use the G Kallur I CaL buttons to add your event and has
details
their own Google Calendar for iCalendar Macker i OS devices
there's also a section in a style and inner
but you can use to further customize the layout and design a beer tent page
if you have any other questions about using the events page we have a detailed
guide on our help said
if you'd like to mix events
press releases and general news you may want to use our blog page
check out our blogging workshop to learn more about blogging was great space
to round on a workshop we'll talk about a commerce platform
cameras can be a great tool for restaurants who like to sell goods
online
such as cooking supplies baked goods a gift cards
we can either have a dedicated store page
we can use product blocks to southern directly with a new band
a blog post on our reservations page first
but click the Add part button and his physical product but give the product
the name
and add a photo along with a brief description
who also on offer gift card in a few denominations
so choose the berry in time to do so once we felt in the price
stock one knee and shipping weight:
well and the variant
after adding a varying denominations we're all set
no its head back over to the mothers day event
and at a gift on product Bach
search for a gift card to bring a byproduct well and the title
description and the Add to Cart option
now any visitors interested in our mothers day event will also be able to
purchase their gift card
right from the event page if you'd like a more in-depth look at the commerce
platform
we've also got a fantastic workshop to walk if you all its features
that does it for creating a restaurant said workshop
take what you've learned here and expand and build upon it
it has never been easier to create a beautiful sight the restaurant
and keep it up today without knowing a single bit of code I certainly hope this
works up here is an inspiration and confidence
efficient any assistance I word when pressed McKay team is available 24 hours
and help that's where space to calm has many more guys in videos
feel free to let us know if any questions
thank you for watching