How to Design a Restaurant Website in 8 Steps [+ Free Templates]

A restaurant website with delivery options and take out that complies with CDC guidelines is crucial to your business during the COVID-19 pandemic. You can design a website fast and get it online quickly with these simple steps. Restaurant websites typically showcase reservation information and location, menus, and staff bios. Website builders like WordPress offer templates to design professional restaurant websites without coding skills, making it ideal for restaurant owners with little website design experience.

WordPress hosted restaurant websites have the option to easily add plug-ins like GloriaFood or RestroPress to quickly expand their online ordering and payment options. These plug-ins help restaurants quickly comply with any restrictions in locations that ban dine-in operations while providing contactless payment options to protect your team.

Here’s how to design and launch your restaurant website in eight steps:

1. Get Your Domain & Hosting

To create a restaurant WordPress website, you first need a hosting plan. We recommend Bluehost because they combine everything into one package (website, domain AND professional email accounts) and offer the best pricing starting at $2.95/month.

To get started, simply follow the link and click “Get Started Now.” The first step is to choose your hosting package. Their basic plan is just $2.95/month when you sign up for 36 months. It should be sufficient for most single-location restaurants. Consider the “plus” plan only if you intend to create more than one website, or need more than 5 business email accounts.

Next, you’ll choose your business website domain— e.g. www.YourRestaurantName.com. While Bluehost lets you choose between different extensions, most restaurants opt for a .com name, since its the most popular and well known. If your top choice is taken, consider adding an extra word, like your city name, or check out our top 25 domain name ideas for additional tips. You can also use the tool below to see what’s available:

2. Connect Your Domain Name & Security Certificate

Once you’re signed up for Bluehost, you’ll be asked to set a password and confirm your email address. After this, you’ll be taken to the Bluehost welcome page. Before designing your website, you need to link your new domain name to your website, then enable a security certificate to protect your website visitors’ information and improve your site’s search engine rankings.

Connect Your Domain Name

Click “My Sites” on the left panel and “Manage Site.” Then, find the “Settings” panel. In the box that says “Site URL,” change the temporary URL to your new domain name. This links your new domain name to your website. Once linked, visitors will be directed to your website when they type in your URL.

Enable the Security Certificate

Next, to enable the security certificate by clicking the “Security” tab. Find the box that says “Free SSL Certificate” and enable it. This will change your website to an “https,” meaning it encrypts all visitor data to prevent data breaches that could threaten your customers’ security. A secure website ranks better in search engines like Google because Google prefers a website that protects visitors for a better experience.

Once those steps are complete, click “Log in to WordPress” to start designing your site.

3. Install a Restaurant Website Template on WordPress

Website templates include a layout, fonts, colors, images, and pages to help make your website. From there, you can edit your chosen template to match your brand and business needs, even without coding skills. Restaurants should first choose a stock restaurant website template, then tweak the design using navigation-menu or drag-and-drop website builders.

To begin, click on “Log in to WordPress” to go to your WordPress dashboard. This is the main “control center” of your website, where you’ll design your pages, make edits, add blog posts, change website colors and fonts, and more. For a restaurant website, you need to download a restaurant theme like Fit Web Themes: Restaurant Edition. We will be using this theme as the example in the following steps.

Now, you need to install the theme on your WordPress website. To do this, hover over “Appearance” on the left menu and click “Themes.”

From there, click “Upload” in the top-right corner as shown below.

Next, click the “Upload Theme” button at the top of your screen. You should receive a prompt to upload a file. Upload the theme .zip file you just downloaded into WordPress. Once loaded, click “Install Now.” Wait for it to install, then click “Activate.” You’ll now have Fit Web Themes installed on your website and can start customizing it.

4. Customize Your Restaurant Template

To customize your template, add your name and restaurant information and upload your own or third-party rights-free photos. You can also make simple adjustments to the format and style of the site. Fit Web Themes: Restaurant Edition was designed to be as user-friendly as possible. Still, it’s highly customizable, meaning you have full control over colors, fonts, and page formatting, all customizable via an easy-to-use options menu.

Customize Using the Navigation Menu

Hover over “Appearances” on the left-hand toolbar, then click “Customize.” The customization menu is divided into subsections, like Header and Social Links. For the most part, you simply have to click on the navigation menu, then use the menu options to edit your restaurant template.

Here are the subsections you’ll find in the navigation menu.

Add Header

Design the header panel to your website. You can upload a logo, or simply enter your restaurant name as text (you’ll be able to adjust the font later). Below that, input your street address and phone number.

If you still need a logo, check out designers on Fiverr, with pricing starting at $5.

Add Social Links

Add social media icons to the top-right corner of your website. Simply paste your page link under the appropriate field and the icon will automatically appear. There’s also an option to add an email address with a mail icon. If you haven’t created social media accounts yet, learn about the benefits of Facebook, Yelp, and Instagram for business.

Pick Fonts

By default, the site uses the Londrina font for headers, and Open Sans font for the body. However, you can select different fonts and preview them instantly to the right. Body font is used in paragraph sections like “About” or “Hours.” Your headings font appears in section titles, and the subheadings font is used for buttons and your main navigation menu.

You can choose from a long list of body fonts, including Open Sans, Josefin Slab, Montserrat, Comfortaa, and Raleway. An equally long list of header fonts is available, including Roboto Slab, Indie Flower, Londrina Shadow, Shrikhand, and Satisfy. Choose a font that aligns with your brand image.

Select Colors

The Default Background Color control allows you to adjust the background color for certain sections and pages on your website. The reason it doesn’t change the background color everywhere is because some sections (like Location and Gallery) have their own color controls.

If you want to use the same background color across your whole website, simply choose your color, then locate the six-digit HEX color code. Write this down, or copy it to your clipboard, then apply it anywhere else you want to use this color.

Build & Arrange Sections

Sections are the content elements you want to appear on your homepage to provide visitors with the information they need right away. Choose which sections you want to appear on your homepage, and in what order. Simply click and drag the sections to arrange them in a different order. Or, click on the eyeball icon to remove a section from your website.

Here’s a rundown of the six homepage sections available for this theme:

• Hero -The hero features a title, background photo, and two optional buttons. This should almost always appear at the top of your website.
• Location – Location displays your address, hours, and contact information, plus an embedded Google Map.
• Gallery – The Gallery adds a simple image gallery to your homepage.
• About – This is a place to add a short bio, menu description, or mission statement.
• Email Capture -This offers an optional mailing list signup form powered by Mailchimp.
• Footer – Here, you can add text, links, or images to the bottom of your website.

Section: Hero

The hero section features a large banner image with bold, capitalized text, and two optional buttons underneath. Think of this as the main “headline” of your website. It should capture your visitors’ attention, provide a simple summary of your business, and give visitors an easy way to proceed via the two buttons. To add an image, select one of the default images we’ve provided or upload your own. Unsplash offers free high-resolution images you can use.

Once you’ve uploaded an image, pay careful attention to your color scheme. If your photo is dark, make sure your text is easy to read by changing it to white or a bright color. If your photo is fairly bright, contrast it by using dark colored text. The “Background Color” allows you to further lighten or darken your image by adding a transparent layer over the image.

To add buttons to your image, simply enter button text and a URL where the button should appear. Also, choose a color and button style that matches your website style. To remove a button, simply delete the text and URL. Once you change the button style, after the preview screen refreshes, you’ll no longer see that button.

Section: Location

This is where you add business information like your address, hours of operation, and contact information. This section also features an embedded Google Maps widget that shows your address as a pin on the map. To set this up, you’ll need a Google or Gmail account (which you can create for free), then follow these instructions from Google to get an API key.

Section: Gallery

This offers a simple gallery to display photos of your dishes, dining room, or guests. The photos will appear as thumbnails, and visitors can click to zoom in. Use the “Layout Columns” to change the number of columns in your photo gallery. Here, you can also increase or decrease image sizes. For example, changing to three instead of four columns will create larger rows of three larger images each.

Section: About

For the About section, add a paragraph description of your restaurant. If you have an important message you want to convey and it didn’t fit in the hero section, this is where it should go. You could include a paragraph of your restaurant’s origin story or why you’re better than other local restaurants. For example, you may offer vegan or farm-to-table dishes, or you may be located in a historical building and offer an experience to match.

This section is hidden by default, so if you want to use it, you can enable it under “Section Order.” We have hidden it because only select restaurants should use it. Your main website goal is to get visitors to your ordering page, your menu, or to find your address/contact information. A text-based section like this can often distract from more important features on your homepage.

Section: Email Capture

This is an optional section for Mailchimp users who want to add a newsletter signup form to their website. Write a header and subheader, then add your Mailchimp API Key and List ID. Move this around to where it best makes sense. If email marketing is one of your top priorities, move it below your hero to maximize engagement. Head to “Section Order” and drag email capture above the other sections.

If you haven’t started email marketing yet but are interested in trying it out, Mailchimp has a free version for small businesses. Click here to sign up or learn more about what it offers in our email marketing software buyer’s guide.

Section: Footer

Like the header, your footer appears on every page of your website and is typically used to post website credits, photo credits, and copyright information. You can also add up to six accolades, which are small icons that represent awards or achievements your business has earned.

To add accolades, click “Add new Accolade,” and upload an image. Ideally, this should be a transparent .png image so it doesn’t clash with the background color of your website. You also have the option to link a URL. For example, you can add an article that mentions your business. To find logos of the sites/titles that showcase your restaurant, use Google Images. Set the color to “transparent” on the top menu bar.

Create Navigation Menus

Your main navigation menu will appear on the website header to help your website visitors easily find pages and content. To create your main navigation menu, click “Create new Menu” and name it “Main Navigation” or something similar. Check the box that says “Navigation Menu” and click “Next.” Now Click “Add Items.” This opens a menu where you can decide which pages to add to your navigation bar.

Because you’ve only created one page so far (Home), there won’t be many options to add. Just click “Home” for now and add more later as you want to.

Save Your Changes

Once you’ve finished making edits using the customization menu, click the gear icon at the top of the customization menu and select “Save Draft.” Then click the “X” to head back to the main dashboard. You can come back to the customization menu at any time to make more changes.

5. Create Your Food & Drink Menu

A menu displays your restaurant’s dishes or food options with vivid pictures, descriptions, and pricing information. Most restaurants add their menu by either uploading an image of their menu or typing it out on a webpage with a few images added for embellishment. To help your menu rank well in search engines like Google and perform better on mobile devices, the second option is best. Using the free plugin “Food and Drink Menu,” create your menu sections, individual menu items, organize your menu, and publish.

Install the Food and Drink Menu Plug-in

You’ll find a prompt on the dashboard to install this plugin as shown above. Just click “Begin installing plugin.” From here, you’ll be prompted once more to click “Install.” Once complete, click “Return to Required Plugins Installer” and then select “Activate” below Food and Drink Menu. You should now see a new icon appear on the left side of your screen. If you don’t see “Menus” like in the image below, refresh the page.

Add Menu Sections

Menu sections divide your menu into the types of dishes you offer, including appetizers, soups, salads, sandwiches, desserts, drinks, or pasta. You can label them anything you’d like. To add them, hover over the menu icon, and select “Menu Sections.” Add the various sections labeled as types of dishes you offer.

Once you’ve added a section name, don’t forget to change the slug (this is the URL and looks like the bolded text here: www.johnsrestaurant.com/menu/fish-specials). You can usually find this right under the field where you input your page’s title. Type the same word in all lowercase. Use a hyphen instead of a space if there are multiple words. For example, you might add “appetizers,” as noted above, or “fish-specials.”

Add Menu Items

The menu items are actual photos and descriptions of the dishes you offer and their pricing. Once you have menu sections, you can begin adding these items. To do so, hover over the menu icon and select “Menu Items.” Click “Add new menu item” at the top. On the next page, you can add an individual menu item. There are four key fields for each item, including the title, description, menu sections, and price fields.

Be sure to fill out all of these fields. In the title section, add the name of your dish. In the description field, add a short description of the menu item and click “Add Media” to upload an image of it. In the menu field, indicate which menu section you’d like to add the item to (for example, the pasta or sandwich section of your menu). In the price field, list the price of the dish or item.

Arrange & Publish Menu Items

Once all of your menu items have been added, hover over the “Menus” icon on the left toolbar, and click “Menus.” Now, click “Add Menu” at the top. Give the menu a name (for example, Dinner, Brunch, or Catering), then scroll to the bottom where it says “Menu Layout.”

Here you can drag the different menu sections you created to design your menu page. Place them in one of two columns, and drag and drop them to arrange the order. When you’re finished, click “Preview Changes” at the top. When you’re happy with your design, click “Publish.”

Add Your Menu to Your Website’s Navigation Menu

Once your menu (or menus) are finished, remember to add the menu to your main navigation bar. To do so, navigate to “Appearance” in your website dashboard, then click “Customize” and “Navigation Menus.” Now, click “Main Menu.” Click “Add Items” and you should see the food menu you just created as one of the options. Select it and save your menu.

6. Add More Pages to Your Website

While not always necessary, many business owners like to add additional pages to their website, such as About, Contact, Catering, or Our Story pages. These give you the opportunity to add extra information without making your homepage too crowded. If you’re uploading an image file to display your food/drink menu, this is also how you create the menu page.

To create a new page, head back to your dashboard and click “Pages” on the left toolbar. Click “Add New” at the top of the page, as shown below.

For each page you create, there are three key elements to look out for. The title page is at the very top. Here you will include a page title like “About Us,” “Catering,” or “Our Story.” The page slug should match the title with a hyphen in between more than one word (“our-story,” for example). Lastly, the page contents should be added in the large box below the slug. You can add text to this field by clicking on it and typing. Add photos by clicking on “Add Media.”

Here’s a more in-depth look at each page type:

About Us

The “About Us” page should include a description of your restaurant, one-paragraph bios and images of your staff members, and any awards your restaurant has earned. It’s good to include a link to a review website where your restaurant is listed so people can see your brand through happy customers’ eyes. If you specialize in foods (like vegan or sushi, for example), consider including an FAQ section to answer common customer questions.

Our Story

Tell the story of your restaurant’s birth and how it has evolved since then. Include what makes your business special or different than other local restaurants. Add some emotion and humanness to your story and let your personality shine through to make this page meaningful.

Contact Us

When it comes to the food industry, customers have lots of questions about ingredients, pricing, and policies. Many of these questions can be answered in the FAQ section of your “About Us” and “Menu” pages, but, for additional questions you may not have thought of, be sure customers can contact you by including an email address, phone number, and social media pages here.

Catering (if applicable)

Here, you want to list exactly what types of foods you can offer for a customer event. You’ll also want to tell interested visitors how to request for an event to be catered by your restaurant. Include call-to-action buttons like “Learn more” (to direct them to your menu page), “Get started,” or “Contact us” (to direct them to your “Contact Us” pages).

Reservations

This page includes information about booking and how customers can contact you to do so. If visitors can make reservations via your website, include a reservation form here. If you want them to call or email reservation requests, offer them clear contact information. For mobile users, include calls-to-action buttons like “Book a reservation” that direct visitors to your preferred contact method, like a phone number they can click on to call.

Events Calendar

Many restaurants have special events (like live music or themed nights) that they wish to invite customers to join. An event calendar alerts customer to in-store events you have coming up, allowing them to plan their schedules around them.

Once you’ve added your additional page(s), you can preview each page, save each as a draft, or just click “Publish” to make it go live on your website. You can always make edits later, even after you’ve published pages.

7. Create a Blog for Your Restaurant Website

A restaurant blog can showcase your expertise in your niche (sushi, for example), or your restaurant’s culture, in-house talent, or recipes. Good posts are also shareable, helping you to attract more customers via platforms like social media and email newsletters. WordPress is a great platform for a restaurant blog because can add a post from your dashboard, then easily write your content. Upload images and publish each post under a relevant category (like “recipes”).

Add a New Post

To add a new post, simply head to “Posts” on the left-hand menu bar of your WordPress dashboard, and click “Add New.” Just like creating a new page, add a title, write text, and add images/media content. Also, add a featured image by clicking on the “Set Featured Image” link under the Featured Image field on the bottom right-hand corner of the page (scroll all the way down to find this).

Add Blog Post Categories, Assign & Publish

We recommend saving each blog post under the same category, like “Blog” or “Updates.” This way, adding your blog to your main navigation bar is easy. Just click “Add Items,” “Categories,” and “Blog.” If you wanted to create two different blogs (one for recipes and another for events, for example), then simply use two different categories. Now you can link to them separately on your navigation bar. After you set each post’s category, click “Publish.”

8. Launch Your Site

Launching your site means you are publishing it so your visitors can view it. You should not do this until your website content is filled out completely. After you launch your site, you can always go back and edit it, but, for your first launch, the most important part is that no URLs lead to blank pages. To launch your site, click your Bluehost button on the left-hand WordPress menu option.

Now locate the box that says “Launch Your Site” and click the “Launch” button. Once you’ve done this, people online can see your website. You should now be able to type your URL in a browser and reach your site. If you get an error page, head back to Step 2 and confirm that you entered the right URL on the “Settings” panel.

Main Restaurant Website Design Elements

Restaurant websites typically feature pages like Menus, About Us, blogs, and other pages. When combined, these help restaurants bring more customers in-store by providing people with information like the types of dishes the restaurant sells, how customers can make reservations, how they can contact or locate the restaurant, in-store event announcements and schedules, and how their staff members contribute to a great in-store dining experience.

In addition to standard site features, restaurant websites often include the following elements:

• Menu Page – Using platforms like WordPress, you can install plugins that help you easily create your menu, but even if you build out your menu manually, this should be a standard feature on your restaurant website.
• Reservations – Whether embedded in the footer or added as its own page, information about booking a reservation should be prominently displayed on your website. Visitors should be able to make reservations directly on your site or use clear phone/email information to contact your restaurant directly.
• Events Page & Calendar – Most restaurants host special dinners or have public events they advertise. To help your customers visit your restaurant regularly, make sure to always keep your events page or calendar up-to-date with upcoming event information like times, dates, and descriptions.
• About Us – It’s important to create a page with headshots of kitchen staff and brief biographies of each one and how they use their talents in your business. Also, include a brief description of your restaurant’s food specializations and what sets you apart from competitors. Any awards the restaurant has received can also be included here.

The above elements should be a part of the overall restaurant website structure and design. As you design each page, include vivid images of food, white space to keep from overwhelming readers, clear contact information, a map of your location, and a place for adding regular updates or posts.

6 Top Restaurant Website Templates

WordPress restaurant templates are website designs you can install in minutes, then customize to match your restaurant brand and offerings. Restaurants use them to easily showcase their history, staff bios, menus, reservation info, events, and more. There are hundreds of restaurant themes available for restaurants to create something truly unique and reflective of their brands.

Here are a few WordPress restaurant themes to consider when building your custom website:

---

Fit Web Themes: Restaurant Editions

Price: Free

This has a customizable, modern design. Features include prominent contact information, ordering buttons, responsive design, and a customization menu for full control over colors, fonts, and page formatting.

---

Belise Lite

Price: $49

This is a classy theme with a modern minimalist design that helps restaurants keep visitor focus on their dishes, instead of complex designs and navigation. It has a responsive layout, an events section, a simple food menu, the ability to display a portfolio, WooCommerce compatibility for online sales, contact forms, color choices, and compatibility with the WordPress Multilingual (WPML) Plugin, which allows for easy-to-create multilingual websites.

---

The Flavour

Price: $49

This is a modern, classy, and vivid design. Its features include a responsive layout, slider options to showcase dishes, an events calendar, compatibility with WPML to create a multilingual website, contact forms, and advanced built-in search-engine-optimization (SEO). It’s highly customizable via a drag-and-drop-style editor, built-in page layouts, Google font integration, and unlimited sidebars that can be used to customize each page.

---

Amici

Price: $50

This is an elegant and sophisticated, yet simple design that mimics an in-store flip-menu experience. Its features include responsive design for display on mobile devices, Retina-ready display that offers more vivid images, contact and reservation forms, fast website loading, and compatibility with the WPML plugin for easy multilingual website pages.

---

Tavern

Price: $59

This theme has a classic, yet rustic design. It features a responsive design for mobile device viewing, image and video sliders, video background options, Retina display ready (for vivid image display), built-in SEO optimization, drag-and-drop editing, and 60+ page elements (like CTA buttons and more) you can choose from to customize each page. It is also compatible with the WPML plugin for multilingual websites and WooCommerce for online selling.

---

Rosa

Price: $75

This is a bold, highly customizable theme with responsive design for beautiful displays on mobile devices, searchable and slidable food menus, online reservations and ordering, and SEO-optimized layout to help your site rank well on Google. It’s best for small businesses showcasing a rich cultural experience.

5 Top Restaurant Website Design & Maintenance Tools

Website design and maintenance tools help small businesses maintain and update their websites so they can drive more traffic. For example, restaurant websites are most successful when they use tools to help them rank well on Google, create content to keep visitors engaged and convince them to visit, and update layout/design to meet the expectations of site visitors.

Here are a few tools to help you make the most of your restaurant website:

• Fiverr – This is an online freelancer platform where you can hire restaurant-specialized website, blog, and menu writers for as little as $5 per project.
• Yoast – This is a free SEO WordPress plugin that helps you optimize your design and content to rank well on Google so local customers can find you online.
• Canva – This is a free graphic design platform you can use to create images even if you have no knowledge of graphic design. It has menu, logo, blog banner, announcement, and other templates you can easily customize with your own photos and text then upload to your website
• Freshmarketer – This is a conversion rate optimization toolkit that helps you fix problems that keep website visitors from converting (like clunky reservation booking or inability to place an order, for example). They offer small business plans that are free and some that cost as much as $99 a month, depending on the features you’d like to use.
• Hibu – If your small business is strapped for time, you can outsource your website design and maintenance to Hibu. They will design a website for as little as $400, then maintain it to ensure it ranks well in Google for as little as $100 a month.

The Bottom Line – Restaurant Website Template

Restaurant website design is a powerful tool for small restaurants to drive sales online and in-store. Designing in-house saves small businesses money. However, many small restaurants don’t have marketers with coding skills on staff who can develop a professional website from scratch. Business website templates solve this by giving small restaurants pre-built basic designs they can easily edit to showcase their brands and offerings.

However, before you begin designing, you must purchase a domain name and hosting for your website. Bluehost offers hosting and domain names for purchase, as well as an easy WordPress setup feature that costs just $2.95 for the first 36 months. When you sign up, you can add on professional email accounts to manage your business online. Click below to learn more.

Visit Bluehost