How to Build a Restaurant Website

A step-by-step guide to building a restaurant website with Instinctor. Full-screen food photography, a menu section, table booking, and a contact form.

1

Create a new page

Log in to your Instinctor admin and open the Pages section. Click Add Page, give it a name like Home, and open it in the Impulse builder. The page starts with one empty screen. In the Page Settings panel on the right, set the screen transition to Slide and the scroll behavior to Snap so each section locks to the full viewport.

2

Build the hero screen

Click the empty screen and add an Image block. Upload a high-quality food photo, at least 1920 by 1080 pixels. In the image settings, click Generate depth map. The builder sends the photo to the depth service and returns a parallax map. Set the depth strength to around 30. The image will shift in three dimensions as the visitor scrolls. Add a Title block above the image for your restaurant name. In the title settings, choose the Kinetic mode and set animation to Fade for a clean reveal on load.

3

Add a menu section

Click the plus button below the hero screen to add a second screen. Add a Products block and set its display mode to Menu. Add your dishes as products with a name, description, and price. Leave the Add to cart button off if you only want the menu to be a display, or enable it if you take online orders. The menu layout shows items as a stacked list with the name on the left and the price on the right.

4

Set up table booking

Add a third screen and place a Booking block in it. Go to the Services section in your admin panel and create a service called Table Reservation. Set a duration, such as 90 minutes, and leave the price at zero if there is no deposit required. Back in the booking block, the service will appear automatically. Set your available days and time slots in the service availability settings.

5

Add a contact and location section

Add a fourth screen with a Contact block. Configure the form fields to collect name, phone, and message. In the form settings, add your email address as the recipient so submissions land in your inbox. Below the form, add a Text block with your address and hours. Use the Grid block with two columns if you want to show the address and hours side by side.

6

Configure SEO settings

Open the SEO panel for the page. Set the title to your restaurant name followed by the city, for example Valentino Italian Kitchen, Philadelphia. Write a meta description of one to two sentences describing the cuisine and location. Upload a food photo as the Open Graph image so social shares show the right picture. In the page URL field, use the restaurant slug directly, such as valentino-kitchen.

7

Publish and set as front page

Click Publish in the builder. Go to Settings and set this page as the front page by entering its ID in the Front page field. Visit your domain to confirm the page loads. The four screens should snap into place on scroll, with the hero depth effect active on the first load.

Instinctor is $29.90 per month. Includes the Impulse builder, ecommerce, smart chat, booking, and SEO tools.

Get started More tutorials