A website is an essential marketing tool for restaurants, but launching one is not easy. In this post, we’ll walk you through the building of a restaurant website with Elementor, step by step.
Running a restaurant is debatably one of the most difficult businesses to take on. Yet, experienced professionals do it every day, with the help of hard working staff, excellent offerings, and modern marketing tools that entice patrons to walk through their doors.
A website is one of the most important marketing tools for restaurants.
Not only does a site solidify your online presence, it enables people to visit your site, view menus, check the price-range of meals, and get an idea of the overall atmosphere. Unfortunately, it’s not always easy to rebuild or launch a restaurant website. But, you can quickly build a restaurant website with Elementor, without any coding knowledge.
Not only that, Elementor has multiple restaurant templates, so you can update what you currently have on your website in a matter of minutes. Use these impressive designs alongside Elementor page modules to construct your own pages with the drag and drop builder.
The goal is to make your restaurant website the best it can be, and Elementor is already a proven leader in this arena. So, we’ll walk through the building of a restaurant website in Elementor, and go over any adjustments you might need to make with the preset content.
In this article, we assume that you’ve already installed the Elementor page builder on your website as a plugin. You can find the free version of Elementor here and upgrade to the Pro version if you’d like access to even more snazzy restaurant templates.
You can use any WordPress theme, but some of them do require modifications for Elementor templates to look their best. For instance, I used the Twenty Seventeen theme for this tutorial and had to remove the default header image by going to Appearance > Customize.
With all that covered, now it’s time to learn how to build a full restaurant website with Elementor! In theory, Elementor helps you build a close to perfect restaurant website within a matter of minutes. However, you’ll most likely spend several hours or days customizing the content to tailor it to your business.
Step 1: Add a New Page in WordPress to Act As Your Homepage
In the WordPress dashboard, Go to Pages > Add New. You might have already added some pages, but I find it’s best to create a new one from scratch with Elementor.
Call the new page something like Homepage or Restaurant Homepage. This will allow you to remember what that homepage is called in the future. Click on the ‘Edit with Elementor’ button to open the page builder. At this point, you can Publish the page, but you’ll also have the opportunity to do so later on.
Step 2: Find an Elementor Template for Restaurants
Part of the reason so many developers enjoy Elementor is because it comes with an extensive library of page templates and individual page modules. When the Elementor builder shows up, click on the little Folder button to Add a New Template.
This reveals the Blocks, Pages, and My Templates in your library. I recommend typing in ‘Restaurants’ in the search bar to bring up all of your options. You can also scroll in the Page tab to see if anything else catches your eye. Who knows? There might be a great template for another industry that can be customized for a restaurant.
Regardless, there are several beautiful restaurant homepages to choose from. I like the second one, since it has a retro feel to it, and the items are easy to customize and brand on your own. Once you locate the template that works for you, click on the Insert button to proceed.
Step 3: Make Sure the Template Looks Right
As mentioned, you may have to hide a header or footer depending on how your template is configured. You also might notice that the template content is being pushed to the right side and not stretching across the entire page. There’s a simple solution for this. Find the Settings icon on the far bottom left-hand corner. Click on it.
The problem is that the current Page Layout for this particular page is set to Default. You need to select the drop-down and go with Elementor Canvas, which takes all of the template content and fills the page with it.
If you haven’t done so already, click on the Publish button.
Step 4: Set the Homepage as a Static Page
One necessary adjustment is to ensure that this new restaurant homepage is actually going to show up when people search for your domain. WordPress can’t detect which page you want as your homepage, so you must do that yourself.
Back in the dashboard, go to Settings > Reading.
Choose your homepage to display as a static page, then find your newly created homepage in the Homepage drop-down menu. As you may remember, I called my page Restaurant Homepage. You will also probably want to set a Posts page for your blog, but there’s no need to walk through that whole process in this tutorial.
Step 5: Make the Template Content Your Own
What’s amazing about Elementor templates is that many of them look like completed websites. They have stunning logos, text that isn’t gibberish, and modern formats. However, your restaurant obviously has its own brand, menu, and contact information, so you’ll need to edit it accordingly.
Beginning with the logo, click on the default logo in the visual editor. This launches your settings for that logo. Then upload your restaurant’s logo, change the image size, and type in a caption. You can link and align it in the header area. Click on the Style and Advanced tabs to play around with further settings. If you mess something up, click on the Undo button in Elementor.
After the logo, scroll down on the restaurant homepage to see what other types of content you can tweak. Some of them might not be relevant to your business, but most of the time you can simply change the content (like uploading new photos) to fit your restaurant’s needs.
For example, there’s a grid area included with this template, that uses text and photos to reveal a story about your restaurant. I like this section to detail your primary offerings, or even include your menu as a visual presentation. Want to rewrite the text? Just click on a text block to delete any superfluous content. You even have options for things like drop caps, various fonts, italics, and more.
One thing to consider is which links and buttons are already included in the template. In this template, you’ll notice a gallery of images called ‘Our Sweets Collection.’ This is quite nice for showing images of your food, but there’s also a ‘More Sweets’ button below it. If you were to leave this on the homepage, customers would be confused by it and not able to click on it.
So, if it is unnecessary, I recommend either deleting it or clicking on the button to paste in a URL.
What you’ll find is that every element in the template is customizable. This includes text boxes, images, buttons, and fonts.
For example, there’s another small gallery on the template used with smaller images. Click on any of these and replace them with your own images. There’s also a spot to type in some testimonials from your customers or reviewers.
Finally, this template provides a Visit Us section. Feel free to click on the map and paste in your own address. And fill in the proper contact information, such as the address, email, and phone number.
Step 6: Add a Menu Page
All restaurants have varying website styles, but it’s common to have either a menu on a separate page or on the homepage. I often see links to PDF files, but that’s not the best for SEO or for the user experience.
So, in order to add a Menu page, go to Pages > Add New in your WordPress dashboard. Once again, name that new page something that you will remember. Click on the Edit in Elementor button to continue.
Choose the Add Template icon again.
As you search through the library, you will see a variety of templates. As of right now, a beautiful Menu page template is included in the Pro version of Elementor. The Pro version is a great value, so if you are seeking more professional templates like the Menu page, feel free to upgrade whenever you want.
As for other free pages, there’s a Contact Page for general restaurants, a Sweets Restaurant Homepage, and a Coffee Shop Homepage. All of them look excellent, it just depends on what type of restaurant you’re running.
Regardless of the page being created, you still go through the same process of adding the template to a new page and editing the content to your liking. As you can see below, the Contact Page is applicable for restaurants with multiple locations. You can also remove the locations and use it as a regular contact form.
Step 7: Creating Your Own Menu Page
Returning to the topic of Menu Pages, don’t forget that you don’t have to use Elementor templates. The page builder offers several page building modules for you to construct your own pages and save them as templates.
For instance, there are dozens of ways to make menu pages. A quick one that comes to mind is by selecting the Image Box module and inserting it into your page.
This would be a simple menu, but the Image Box tool provides an image, along with a headline and text. Therefore, you can quickly upload an image of a dessert, then format a list of items on your menu. Personally, I prefer to work on the styling of my menu a bit more, but this is a great example of what you can whip up in just 30 seconds.
Step 8: Make Sure You Have All of the Right Pages and Menu Items
Adding a menu is done by going to Appearance > Menus in the WordPress dashboard. Then you link the appropriate pages to the menu items. After that, you need to click through your restaurant website to make sure all of the pages and links work.
It’s common to miss some of the necessary pages for a restaurant website, so here’s a list of some popular pages to include:
- Reservations (You might integrate this with a service like OpenTable or find a reservations plugin you like.)
- Contact Us (With maps and phone numbers)
- About the Restaurant
- Cooks (To show how experienced they are and to put some faces to your business.)
- Links to social media pages
- Ratings and Reviews
- Video and image galleries of your food and the building (indoors and outdoors)
Are You Ready to Build a Restaurant Website with Elementor?
What’s great about Elementor is that you can integrate it with whatever theme you are currently using. So, you don’t have to completely get rid of your current online presence, but the addition of Elementor (and its templates) is sure to clean up the website and make it more presentable to your customers.
As you walk through your restaurant website design, start with the templates that come with Elementor. These are often all you need to lay the foundation. Next, adjust the content and add new page building modules to fit your own brand and business. After that, create a menu, test the user-experience, then launch it for everyone to see! This process ensures that you don’t get stuck with a WordPress theme that’s no good or rarely updated. In addition, Elementor frequently releases new templates for you to try out.
If you have any questions about building a restaurant website with Elementor, let us know in the comments section below.