Chapter 4

Tavernify Academy

Design and Development

The best restaurant websites have one thing in common; beautiful presentation. An attractive design with excellent imagery can bring you many customers. Usability is important. But it’s the mouth-watering visuals that make these sites great.

The visual presentation should not distract your visitors from getting key information, however. Your locations, menu items and opening hours should be easily accessible.

Now, lets get our hands dirty and start building a website that attracts online customers into your restaurant.

First of all, open your  WordPress Admin Panel of your target application.

You can access your WordPress Admin Panel in two steps:

1. To Cloudways Platform and click www to select your application.

Click on Access Details option from the left menu bar and click on icon after URL under ADMIN PANEL section.

2. If you have connected your domain, it should appear like: yourdomain.com/wp-admin. Click on this link.

After accessing, the WordPress Admin Panel, enter these following details (as shown in the image above)

  1. Enter your WordPress site’s admin username.
  2. Now, enter your password.
  3. Click on  Log In .

Now, once you’ve logged in, start developing your website using easy-to-use website builders.

There are few options that you could choose from, but the famous ones are:

  • Elementor (Tavernify’s choice)
  • Beavers Builder
  • Oxygen Builder
  • Brizzy
  • Visual Composer
  • Divi

However, in this tutorial, we will be using Elementor as our framework to build your restaurant website.

Install Elementor Plugin

In your restaurant website dashboard, navigate to Plugins > Add New. Search for Elementor and click Install. When Elementor has been installed, click Activate.

Install Astra Theme

The last step is to install the Astra theme. We chose Astra as the main theme is that it works very well with Elementor. Plus it offers speed, reliability, responsive design and easy-to-use setup.

In your restaurant website dashboard, go to Appearance > Themes. On that screen, click the Add New button. Search for Astra, and then click Install. When the theme has finished installing, click Activate.

Creating Site Pages

Now that we’ve covered technical setup and you have everything in place, it’s time to start working on your site. In this tutorial, we’ll be building a 4-page website consisting of a homepage, a menu page, an about page, and a contact us page. Let’s begin.

1. Create a Page

Start to create a Homepage for your website.

At the Pages tab on you left of the restaurant website’s dashboard, click Add New.

2. Edit Page

Hover to Page Attributes and click Elementor Canvas. After writing your page title as above, click Edit with Elementor on the top.

Once the page loads, you’ll see two sections on the screen. On the left, you’ll notice the editing screen for Elementor while the right side shows you how your page looks and allows you to edit the structure and the contents.

Elementor uses sections, columns, and widgets to create the layout of any page. Sections are the largest building blocks and you’ll add columns which are called inner sections inside them. Inside inner sections or columns, you will be able to add widgets which are content blocks that add text, images, buttons, and other elements to your page.

You may now experiment the widgets by dragging them into the sections and start editing your content based on the brand strategy you have set before.

If you would like to have a full detail on how to use Elementor as an editing tool, you may follow the video made by this guy here.

3. Customize Page

Once you are done making all the changes on your pages, there are a few last customizations that you need to make in your restaurant website itself. You need to upload your logo, create a menu so visitors can navigate your site, and finally set the homepage for your site.

Upload a Logo

Let’s start by uploading a logo. To do this, in your restaurant website dashboard go to Appearance > Customize. Once the customizer loads, click on Site Identity and then click Select Logo.

When the media library loads, click on Upload files, select the logo file from your computer and click Select. Then, click Publish to save the changes.  

Create A Menu

Once you’ve uploaded the logo, go to Appearance > Menus and enter a name for your menu. Then, click Create Menu. From there, check the pages you’ve created and customized above to the right side of the screen.
 

You can then drag the pages to customize the order they display in and select the position for this menu. When you’re done customizing the menu, click Save Menu.

Set the Site’s Homepage

The last restaurant website customization step is to set the page that will serve as the homepage for your site. To do this, go to Settings > Reading. Next to the line that says “Your homepage displays” select A static page and select the homepage you’ve created. Click Save changes and then visit your site to see how it looks.

Reservation Form

 

Make Reservation in Your Restaurant Website

WP Fluent Form is a Modern form builder plugin that can be used to build your restaurant’s reservation form. It’s a completely free and open source WordPress plugin.

It has a powerful drag & drop form building facility, more than 40+ advanced custom field, email notifications & 3rd-party integrations. WP Fluent Form is one of the most feature rich plugin in the WordPress plugin industry.

Features: 

  • Extremely fast and easy to use
  • 100% mobile responsive
  • Conditional Logics on form fields
  • Multi-column form layout
  • Pre-made form templates
  • Shortcode based forms to publish in the frontend
  • Multiple Email Notification both for admin/frontend users.
  • Customizable email templates with shortcodes
  • Slack integration (completely FREE)
  • MailChimp Integration (completely FREE)
  • More 3rd Party integration

Creating Reservation Forms

First of all, you need to install WP Fluent Form from WordPress Plugin Repository.

  • Navigate to WordPress Admin PanelPluginsAdd New
  • Now, search for WP Fluent Form, click Install, and then Activate

 Now, Create a form

  • Click on the New Form button on your WordPress admin panel’s WP Fluent Form menu. Or you can also create a new form by clicking on the Add Form button from the All Forms dashboard.

  • Clicking on the New Form/Add Form button opens a pop-up that allows you to choose from 3 pre-built form templates- Contact Form, Support Form, Event Registration Form. There is a 4th option called New Form that allows you to build a form from scratch. Here we will discuss how to create a form from scratch.

  • Identify your form by naming it. To name a form, click on the Edit icon on the top-left corner (besides New Blank Form) and define its name in the following pop-up.You can name it as a Reservation Form instead.

  • Add fields according to your requirements.
  • Customize the Fields as required. WP Fluent Form comes with various options to enable users to customize the fields you intend to use. To customize an added field, hover on it and click on the Edit icon. You can also click on the Input Customization tab on the right sidebar. These customizations offer you various options starting from renaming a field, defining a placeholder, and positioning a field label to define the maximum size of an uploaded file.

  • As a restaurant, you should use the field below for the customers to fill in the booking request:
    • Name
    • Phone
    • Time
    • Date
    • Special Request
  • Done with the customization and everything? Click on the Save Form button on the top-right corner of your screen.

  • Now copy the shortcode. With Elementor, you may use HTML Widget, paste the short code on the widget, and place it on the section where you want your form to be visible.

Once you are done adding your form fields and customize then you can just copy the shortcode and paste in your restaurant website page. If you are using Elementor, you can paste it by selecting Text or HTML Widget. That’s it!

Setting Up Notifications:

Using email notification Module, get notified every time someone fills up a form. With WP Fluent Form, you can also notify your team members when the form is filled up. It means your team members can get notifications if you include them on the list. To enable this, go through the following steps.

Email Notification 

 

You see in the video that, It’s very easy to setup multiple email notifications as well as you can use smart field shortcode to send send customized emails to your form submitter as well as your team and yourself.

Email Notification Screen of WP Fluent Form

Website-WhatsApp Notification

With the current improvement of technology, your restaurant website now can notify straight to WhatsApp users whenever they fill-in the reservation form as above. So, non-email users might reap the benefit by notifying the reservation details only via WhatsApp. Due to the limited number of availability, this feature is not available for the public. If you are keen to know more about this, kindly contact us and we will assist you immediately.

Scroll to Top