Bon Appetite! Key Elements for Your Next Restaurant Website

Let’s say you’re running a pretty popular restaurant with delicious food and special recipes in town and you start thinking about moving things online to showcase your mouthwatering food, entice more hungry customers and even open up new branches all over the city. Smart move! But building a website for your restaurant is no easy feat unless you know the key elements for your restaurant website to make it both attractive and user-friendly at the same time.

In this article, by looking at 5 Jupiter X restaurant templates, we’re going to take you through the key elements that will help you build a mouthwatering restaurant website that’ll help you build a strong web presence and make your site visitors drool!

Images Layout

Go visual! You’ll hear this from just about every graphic designer you hire to design your website. And, yes, get ready to read about it once in a while in this post too! Images have a magical effect on promoting your restaurant. You don’t open a restaurant website to read the About page or to imagine what the food looks like from the menu, right?! A bunch of high quality and tempting images of the food hits visitors in the stomach every time! So folks, let’s admit that they’re essential elements for your restaurant website, and Images Layout is probably the best element to help you out showcasing them.

Images Layout lets you showcase as many images you want in up to 6 columns, choose between 4 different layout types (Masonry, Grid, Justify and List), add titles and description as well as different background overlay and lure visitors with appetizing pictures of your gourmet dishes!

You can find a beautiful live example of this element in the Jupiter X Danae template.

Elements for your restaurant website Images Layout Element
Images Layout Element

Posts Element

If you have a blog you are regularly updating to offer tasty recipes, writing about healthy diet trends or simply sharing the latest news with your restaurant, you might want to organize and show them on different pages of your website. And this is all possible with the Posts element. There are many features to play with and customize to your taste, skin type, layout and categories to name a few. And as mentioned before, you can set the source to be a blog or portfolio.

Elements for your restaurant website Posts Element

Or you can simply drag and drop the Posts element and start building it from scratch without linking it to the blog or portfolio. If you need to read more about its features and how to work with it, please head over here.

Here’s a nice example of the Posts element in action from the Jupiter X Restaurant template:

Elements for your restaurant website Posts Element 1
Posts Element

Form Builder

Add as many delicious food pictures as you want and catch the attention of visitors to your stunning food art, but at one point you’ll need to turn those visitors into paying customers and increase the restaurant’s footfall. A functional and easy to use reservation form will do the job! Now that visitors are even more hungry by browsing through tempting food pictures, they should be directed toward booking a table.

Elements for your restaurant website Form Builder

Forms can be used either for reservations or as a means of online ordering if you happen to have that option. You can create a simple form in seconds with the Form Builder element. Just drag and drop the Form element to your page, edit the placeholders, add an action email to collect the information and that’s it! You now can receive orders and bookings!

Avoid too many fields and ask questions with short answers as much as possible in order to make the booking process easy and efficient. The form used in the Jupiter X Restaurant template serves as a good example.

Slider

A slideshow is always a great way to feature menu specials and give customers a sense of what’s in store for them. Imagine opening the homepage to a full page header slideshow of your delightful hamburgers! Just like this delectable slide reel in the Jupiter X Burger Restaurant template:

Slider Element

Elements for your restaurant website Slider Element Gif
Slider Element

Adding slideshows is pretty easy in Jupiter X. All the steps you need to go through are explained in detail in this video. After watching the video in full, creating a stunning slideshow will only take seconds.

Testimonials

How many times have you booked a hotel room over another only because of a couple more positive reviews and ratings? How many times have you chosen a product online just by checking its stars and positive comments? Nearly always, right? The same thing goes with restaurants too! Testimonials are like social proof that will help potential customers choose you.

Elements for your restaurant website Testimonials
Testimonials

Using the Testimonials element, you can add an uncluttered and beautiful set of customer testimonials, customize its text, style and positioning, play with its animation settings and let the uniqueness of your restaurant stand out through the words of your satisfied customers. The Jupiter X Burger Restaurant template features a nice example of this element in action:

Testimonials

Price List

Restaurants and online businesses that are offering a product should have a functional price handling system for customers’ convenience. Using the Price List element, you can create your special menu and feature your dishes in an organized way. You can visually customize every detail of the list like the heading, image, price and even make items clickable by adding links.

Elements for your restaurant website Price List
Price List

The Jupiter X Italian Restaurant template features a beautiful sample of the Price List for its menu:

Elements for your next restaurant menu
Menu – Price List

Animated Box

We’ve emphasized the importance of images for a restaurant website enough, so no need to repeat ourselves! But there is always room for more fun! Using the practical Animated Box element, you can put your images inside a box with different animation effects; write some important content on the backside of the box; customize the layout, color, style; add icons and links and choose among many cute animation effects. That’s fun, right? Mark our words – adding a bit of taste to your image-dominant page guarantees customer satisfaction! Here’s a sample of the Animated Box element from the Jupiter X Restaurant template:

Elements for your restaurant website Animated Box
Animated Box

Counter

Another dynamic element for your restaurant website that will help you boost your restaurant’s reputation, increase the trust of the existing customers and create potential new visitors, is the Counter element. Just drag and drop the element to your page and brag about the number of satisfied customers, branches around the city, dishes served, any health certifications awarded, as well as any other interesting numbers while playing with its eye-catching styles and animations. Your achievements are definitely worth a mention!

Here is an example of the Counter in action from the Jupiter X Europa template:

Tabs Element

If you own a big restaurant that offers all kinds of food, from seafood to Mexican and from appetizers to desserts or from alcoholic to soft drinks, you might want to organize them into tabs to avoid your site visitors a headache! The Tabs element will help you make it happen in the neatest way possible. You can put each type of food in one tab, set a vertical or horizontal look on it, add icons next to titles, use images and customize every detail about tabs items such as background color, title, description and many more as you please.

Check out how it looks live in the Jupiter X Steakhouse template:

Elements for your restaurant website Tabs Element
Tabs element

Wrapping up elements for your restaurant website

In this post, we highlighted some essential elements for a stunning restaurant website in the hopes that it’ll encourage you to get started with your unique and tasty restaurant website. So now that you have the ingredients you shouldn’t be waiting any longer, hungry customers are waiting outside!

Let us know in the comments about your experience creating your restaurant website or if you have already created yours, drop us the website URL for as inspiration for your fellow restaurant owners.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Create a Custom Footer with the Jupiter X Footer Builder

Create a Custom Footer Featured Image

Almost all of the themes out there provide you a way to customize the footer for the website they belong to. But have you ever wondered if there is a way to break the mold and build a brand new design to create a custom footer? This was a question frequently asked by Artbees users – now it’s possible with the new Jupiter X theme!

In this article, we’re going to discover how we can customize our footer area with the Jupiter X theme via the default options and then see how we can create a completely new footer design from scratch. The tools we need for this tutorial include:

  • A WordPress website
  • Jupiter X Pro theme
  • Elementor Page Builder
  • Raven Plugin (Exclusively developed by Artbees to extend Elementor free functionality)

Let’s have a quick overview of how we can customize our website footer with the default options first since it’s an easy and fast method for having a beautiful footer. After that, we’ll show you how to create a completely new footer from scratch.

Customizing the Default Footer in Jupiter X

The first method will use the Jupiter X Customizer settings. As mentioned, it’s powerful enough to build a completely customized footer. However, when using this method, you have only one footer for your entire website, and in case you need a different footer for other pages, you’ll need to create a custom footer and assign it to those pages. We’ll get to that later. For now, let’s look at how we can access the footer customizer and apply some changes on the prebuilt footer.

From the WordPress left sidebar click on Jupiter X > Customize.

Create a Custom Footer Jupiter X Customizer
Access to Jupiter X Customizer

Then find Footer from the list and click on it.

Create a Custom Footer Dashboard
Customizer Dashboard Menu

These settings will allow you to customize everything in your footer including static/fixed behavior, showing/hiding the sub footer, making it full width, and showing/hiding some other elements on the footer like Copyright text and menu.

Create a Custom Footer Choose Footer
Choose Footer from the customizer left dashboard

The cool part is the Widget Area option. As soon as you enable it, you’ll see how many layouts of widgets you can choose for your footer. You can then populate the footer widget areas from WordPress Appearance > Widgets.

Create a custom footer widget area enable
Enabling Widget Area option unveils a set of footer layouts

As soon as you enable the Widget Area, you’ll be able to see the widget styling options in the second tab. It has a set of options including Widgets Title, Texts, Links, Thumbnail, Container, Divider, and Container Styles which allows you to customize every single corner of your widget. And you can do all of it live.

Create a custom footer widget styling options
Widget Styling options in Jupiter X Footer Customizer

It’s pretty neat, isn’t it? Now, let’s see what we can build as a custom footer.

Creating a Custom Footer in Jupiter X

This is the part where you’ll need the Elementor and Raven plugins. Elementor will give you the ability to build fantastic layouts, and the Raven plugin will let you create custom footers and headers on Elementor (free version) and also will give you 22 new elements to use. You can find more information about Raven plugin here.

The great thing about a custom footer is that you are no longer limited to the WordPress widgets. You can put anything you want, anywhere you want in your footer. Also, Jupiter X Pro offers a set of bundled plugins that extends the number of elements and effects (such as Jet Elements and Jet Tricks) that you can use in Elementor. You can utilize them as well.

To use a custom footer on your website, you must:

  • Create your custom footer in Elementor.
  • Assign it to all pages on your website or to a specific page.

We’ll walk you through this process step-by-step.

Creating a new Custom Footer in Elementor

1. Like every other WordPress modification, the first step will start from the backend Side Dashboard. From the menu on the left in, click on Saved Templates beneath Elementor.

Create a custom footer saved templates
Click on Saved Templates to see the old templates and add a new one

2. Next to the Saved Templates title, click on the Add New button.

Create a customer footer add a new template
Add a new template to Elementor

Note: If you are using Elementor Pro, you may see your old footer templates in the Theme Builder instead of Saved Templates.

3. For the template type select Footer, give your footer a name and click on the Create Template button.

Crate a custom footer choosing a template
Choosing a template type while adding a new template to Elementor

4. You will now be redirected to the Elementor page editor where you can choose a footer template from the library or create a custom footer from scratch using Elementor. Some of the pre-made footers are part of Elementor Pro and, in order to use them, you must first purchase Elementor Pro. You can also use the pre-made Jupiter X templates, which are free.

To see the Jupiter X templates, simply click on Jupiter X. You can use your preferred template by clicking on the Insert button.

Create a custom footer Jupiter X footer templates for Elementor
Jupiter X Footer Templates for Elementor

If you don’t want to use pre-made templates and plan to create your custom footer from scratch, simply click on the “x” icon. That will redirect you to the Elementor page editor.

Create a custom footer closing templates modal
Closing the templates modal

5. If you’re using a pre-made template, you can customize it or add new widgets. In order to customize a brand new footer (without using a pre-made template), first determine how many columns you need for your footer template. Then add your desired Elementor’s widgets to it, such as Site Logo. Since this is same as creating any other content on your page, in case you needed more information about how to add and modify content on your template, you can check some Elementor Tutorials and the Jupiter X knowledge base.

Create a custom footer building template from scratch
Building up the template from scratch

You can also add WordPress widgets to your footer template by going to the WORDPRESS category in the Elementor widgets panel.

Create a custom footer widgets in Elementor
WordPress widgets in Elementor

6. Publish the template after customizing it.

Create a custom footer save changes
Save and Publish the changes

Important Notes!
1. In case you are using Elementor Pro for a footer template with Display Conditions, some of the Jupiter X footer customizations may not work properly. To fix this:

Make sure the Display Conditions are not provided for your footer templates.

Create a custom footer elementor display conditions
Elementor Display Conditions

Simply save a template without conditions.

2. Make sure the Sticky option under Scrolling Effect is set to None in the Advanced settings of the Section container in your footer template.

Create a custom footer section scrolling
Section Scrolling effect option.

Assigning a Custom Footer to your Website

Now it’s time to assign our beloved footer template to the website.

1. From the menu on the left in WordPress, go to Jupiter X > Customize.

2. From the dashboard on the left in Customizer, click on Footer.

3. For the Footer Type, select Custom and assign your footer from Template.

Create a custom footer customizer
Choosing the footer template in the Footer Customizer

4. Click on Close and Publish the changes.

You’re done! Now, refresh your page and see how your new footer looks on your website. One thing to mention is that you can add as many footer templates as you want and assign them to different pages. Have a look at this tutorial to find more!.

Summary

Footers are like the summary of an entire website. Having a good summary that contains relevant links and content at the end of a page will send your viewers to the right place.

In this article, we learned how to get rid of the technical coding stuff when creating a footer and easily build customized or new footers using the Jupiter X theme. Now, you can channel your energy into creating amazing your content instead of worrying about how to build a footer because every tool you need is ready for you!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.