Modern, responsive, and good looking restaurant websites are in short order these days. Restaurants tend to run on slim profit margins, so it’s not surprising that many owners assume that a website will chew through what remains of their earnings.
But a website that is well-built can bring a huge return on a business owner’s original investment. This is especially so for restaurants that otherwise have to rely on platforms like Yelp, Google, and GrubHub to educate customers on what they offer.
In this tutorial, we’re going to demonstrate how restaurant owners can take control of information about their establishment using the One Page Restaurant Website template.
Table of Contents:
- Step 1: Plan out your content
- Step 2: Delete slides you don’t need
- Step 3: Add new background images or colors
- Step 4: Edit the copy
- Step 5: Duplicate the interior slide and update the content
- Step 6: Customize the CTA links and Google Map
- Step 7: Update the header in the global layers
How to quickly create a modern one-page restaurant website
A restaurant website doesn’t need to be massive in size in order to be effective. However, it does need to be attractive, responsive, and built using modern trends and features. It also needs to provide customers with all the information they’re looking for.
In this tutorial, we’ll show you how to repurpose this one-page restaurant website template for a local brewpub:
If you’re new to using Slider Revolution, these resources will help you get started:
Step 1: Plan out your content
You’re going to be able to build out an entire restaurant website with just this Slider Revolution template. So before you put a ton of work into this, first figure out what kind of content you need to include on the site.
For instance, ask yourself:
- Does your restaurant take reservations?
- How about online ordering?
- Do you want to tell people a bit about your establishment?
- Do you have a PDF version of your menu to share? Or is it short enough to build out on the pages/slides of the template?
- Do you sell gift cards?
- Do you have an active social media presence?
- What’s your preferred method of contact?
Asking yourself these questions will accomplish a number of things. First, it’ll tell you if you have too much content for a one-page website. If you have the right amount, the questions will help you figure out which content to include and where to put it on the page.
For our new restaurant website, we’ll need six slides to build out the following:
- Hero section that welcomes visitors to the site and restaurant
- Food menu section that allows visitors to download and view the menu online
- About section that tells visitors a bit about the establishment’s history
- Brewery menu section that allows visitors to see which beers are currently on tap
- Instagram section that invites visitors to follow and connect with the restaurant
- Visit section that gives visitor all the info they need on the location and hours
Next, gather together the images (or videos) you’ll use to promote each section. It’s also helpful to write the copy for each section ahead of time.
Step 2: Delete slides you don’t need
There are 11 slides in this one-page restaurant website template. If you’re promoting something like a food truck or pop-up restaurant, then you probably have a small enough menu to fit within these slides.
If you have a more traditional menu with 5 or more categories and numerous items within each, then it would be better to reduce the number of slides in this template. That way, you can make the one-page site more diverse in terms of information.
We’ll demonstrate how to do this in the rest of these steps.
For now, to delete the slides you don’t need, go to “Slides” in the toolbar. Hover over the slides you want to remove and click the trash can icon beside each:
Delete any 8 of the interior slides (anything between Slides #2 and #10). This will leave you with Slide #1, Slide #11, and one other slide.
We’ll create our custom design for the interior slides using this remaining one. Later, we’ll duplicate it and you can build out the rest of your content using it as a template.
This is an important step as you won’t have to spend time recreating styles from slide to slide and can instead just focus on filling in content instead.
Learn more:
Step 3: Add new background images or colors
The template has a background photo in each of the slides/sections. You don’t have to follow this format if you don’t want to. You can use images, videos, or color (solid or gradient) in the background of each section.
To edit the current background of each slide, select the slide to edit. Then go to “Slide Options” and “Background”. Use the dropdown to choose the Type of background you want to add. Then make your changes:
Do this for the hero section (#1), CTA section (#11), and the interior slide. Save your changes in between each slide.
Learn more:
Step 4: Edit the copy
The amount and type of copy differs from slide to slide. You don’t have to use all of the existing fields if you don’t need them. Deleting text layers is just as easy as deleting slides.
Let’s start with what kind of editing you can do under “Layer Options”:
- Use “Content” settings to edit what the text says in each layer.
- Use “Style” settings to edit how the text looks — the font, size, weight, color, and more.
Also, for slides/sections that have a call-to-action button, you can use these settings as well:
- Use “Style” settings to change the button’s color and border.
- Use “Hover” settings to change the button’s appearance upon hover.
Note: There are other settings you can play around with, like advanced styles and animation. However, we’d suggest starting with the basics and only adding on if there’s something specific you have in mind.
Edit the hero section first. This slide has the most basic structure and will be the easiest to customize:
Make note of any style changes in the hero as you’ll want to use them throughout the rest of the slides. Save your changes and then open your interior slide for editing:
Note: Notice how we deleted the two Attribute layers, but preserved everything else. Even the Price layer became our button in this slide. The more you can preserve the existing elements in your Slider Revolution template, the less time you’ll have to spend customizing things.
Lastly, turn your attention to the final CTA section:
We removed the Subfooter line since this is a one-page website and we don’t have other pages to promote. Feel free to keep this in if you have additional information to share with visitors.
One last thing:
If the text you added is much longer than what was in there before or your new font makes it appear longer, do some responsive editing before moving on. You can switch between the device variants in the toolbar:
You’ll also need to preview the slider to see how it looks on the frontend.
If changes are needed, make those edits in the specific device’s view. The work you did in the Desktop view will be unaffected by changes you make on smaller screens.
Learn more:
- Editing Text from Template Modules
- Adding and Configuring Button Layers
- Checking to Ensure Modified Content Is Still Responsive
Step 5: Duplicate the interior slide and update the content
Now that the content styles and layouts have been finalized, you can build out the rest of the slides/sections.
Go to “Slides” in the top toolbar, hover over the slide you wish to duplicate, and click the copy/duplicate button:
What we’re going to do is duplicate the hero slide for two new interior sections and then duplicate the interior slide template to create another menu section. That way, the layouts alternate between sections (you can see the effect in the GIF at the top of this post).
If your duplicated slide doesn’t appear in the right order after its creation, click and hold that slide name and then drag it so it appears in the right order:
Pro tip: Give each slide/section a unique name. That way, your slides will be easier to manage going forward. You can do this by opening “Slide Options” and then replacing the name in the center of the toolbar.
Once that’s done, go into the new (duplicated slides) and update the following:
- Background image or color
- Text layers
- Button text
Save your changes between slides.
Pro tip: After you’ve finished designing the new sections, update the thumbnail from “Slide Options” and “Thumbnail”. This will also make it easier to manage your slides.
Learn more:
Step 6: Customize the CTA links and Google Map
Since this is a one-page restaurant site, links play an important role. You might not need them in every section, but they’ll come in handy depending on what you want visitors to do.
To create or edit links in Slider Revolution, select the layer in the timeline or canvas. Then go to “Layer Options” and “Actions”. You can do a number of things with links here.
For example, the button in the hero section is already set up to link to the Next Section. This will auto-scroll users down to the section when they click it:
You can also program buttons to link out to other pages or resources. For instance, the button field we created for our food menu section now has a Simple Link connected to it:
We’re pointing it to our menu PDF file and have set up the target as New Window so that it will open in a new browser tab. This way, visitors won’t have to leave the restaurant site in order to see the full menu.
Another type of link you’ll need to set up is the Google Maps link in the final section. Open the slide and click on the Google-Map layer:
This is a text layer with an iframe embed code in it.
To edit this map and link, locate your establishment in Google Maps. Click on the “Share” button that appears next to it. Switch to the Embed a map tab. Then copy the HTML:
Return to Slider Revolution and replace the existing code with your own.
Open the preview of the site to confirm that the marker lands in the right place and that, when clicked, it opens up your restaurant’s page on Google. This will be useful for visitors to read Google reviews, see customer photos, and get directions to your location.
Learn more:
Step 7: Update the header in the global layers
The last thing to do to our restaurant website is update the header. To do this, go to “Slides” in the toolbar and click on Global Layers.
There are a lot of moving pieces here, so let’s break this down to just the parts you need to customize:
Menu group
There are two layers: Menu-Title refers to the words “The Menu” that sit in the top-left corner of the site. Toggle-Menu is the hamburger icon that sits to the right of it:
There are a few things in this section you might want to edit:
- Label wording
- Text font
- Color
Edit these layers the same way you did the text layers in the regular slides.
Navigation links
In the template, there are 6 navigation links that drop down from the menu button. We’re going to keep the same number of links, but we’re going to edit the labels under “Content” as well as where they link to under “Actions”:
You should also update the fonts if you updated them everywhere else.
Call-to-action button
The last piece to edit is the call-to-action button in the top-right corner. Right now it’s a bright-green button that says Book a Table. When visitors click on it, two options drop down — click-to-call or book via OpenTable.
Here’s what we need to edit to make it our own:
- Button layer: Font and background color
- Phone layer: Text, font, and actions
- Opentable layer: Text, font, and actions
Here’s what that looks like:
When you’re done, preview your changes on the frontend. You want to make sure that the header looks good and that each element responds to clicks the way you want it to.
Learn more:
Build a one-page restaurant website that converts
A professional, attractive, and modern restaurant website doesn’t need to be a costly or lengthy endeavor. With the Restaurant One Page Website template, you’ll have everything you need to design a one-page restaurant website that provides customers with location information, links to the menu, and more.
awesome