When you purchase a theme from our website, the standard license allows you to use the theme in a single end product. One theme license for one domain ( one theme installation in a single domain )

FAQ:

Can I use the theme on a test site, then move it to a live site when finished?

Yes, you can use the theme on a test site to build it, then move it to the live site once you're finished. You'll have to remove the theme files from the test site.

If you are new to WordPress here's what you have to do:

In order to install the current version of WordPress Theme, please go to http://wordpress.org and download the current version of WordPress. For information on how to install WordPress, please see the WordPress codex page http://codex.wordpress.org/Installing_WordPress .

You can do it in 2 ways:

1. a. Via WordPress Admin: Go to Appearance > Install Themes > Upload and choose ravier.zip file ((make sure you are not uploading the whole zip file that you've downloaded (including dummy content, documentation) but only the ravier.zip file). Click Install Now.
2. b. Via FTP: Upload ravier folder into wp-content/themes folder.
3. After you've installed the theme make sure to activate it.

If you want your website to look like the live demo, then customize it as you want, follow these steps:

1. After the theme is activated make sure to install and activate the required and recommended plugins: MT Ravier, Elementor, Contact Form 7 plugins . The plugins are necessary for having the features presented in the demo.

   

2. Install and activate One Click Demo Import plugin.

3. Go to Appearance > Import Demo Data and click the Import Demo Data button.

   

4. A new page will open. Click "Continue & Import" button. Wait until the demo content is imported to your website.
5. If the menu in the header doesn't appear, go to Appearance > Menus, select "Primary Menu" at the bottom of the page and click Save.

   

6. In case the blog posts appear in the main page, instead of the home page, go to Settings > Reading > Your homepage displays, select > A static page and for the Homepage option select the Home page.

   

7. To configure the homepage slider / video go to Appearance > Customize > General Options > Home - Slider Items.

   The default slider text is this:

   <h1 class="display-3">Ravier</h1>
   <p>Delicate and contemporary dishes, created by the finest cooks.</p>
   <a href="#" class="read-more white">Find More</a>
   	

   The slider images size from the demo is 1920x1080 px. You can experiment with other sizes too.

8. To use the Colors and Typography options from Appearance > Customize , go to Elementor > Settings and check Disable Default Colors and Disable Default Fonts options.

   

9. For the footer Instagram feed, you can install any Instagram plugin you like. The demo uses the following Instagram plugin: https://wordpress.org/plugins/instagram-feed/ . After the installation you need to configure it with your Instagram user. Then go to Appearance > Widgets and add the Instagram widget in the Footer Instagram area.

Note: Before creating the menu items make sure you've created some pages / posts.

1. Go to Appearance - > Menus tab
2. Add new menu, enter Menu Name
3. Add Menu Items. Select the pages you've just created and add them to the menu
4. Drag & drop the menu items as you like. Check the image below. Than save the menu
5. !IMPORTANT: make sure the Theme Locations option is set to Primary Menu.

First go to Settings > Permalinks. Select from Common Settings > Post name option. This is for better SEO permalinks.

The theme comes with the following custom Page Templates:

• Default Template - The default page
• Home Slider/Video Template
• Full Screen Template
• Full Width Template

How to use a template:

• Click Pages > Add New.
• Look for Page Attributes on the right side and click on the "Template" drop-down menu.
• Choose a page template.
• Click the Publish button above.
• Now you can add your new page to your Menu.

The theme uses the Elementor page builder plugin. The majority of pages are created with it. To learn more about Elementor and how to use it please check this page: Elementor Docs

1. After the Elementor plugin is installed, go to Elementor > Settings and check Disable Default Colors and Disable Default Fonts option. By doing so you can use the Colors and Typography options from Appearance > Customize

2. If you haven't import the theme demo data and you want to use just the Ravier Elementor page templates, go to Templates and import the ravier-elementor-page-templates.zip file from the main archive.

1. Click Pages > Add New
2. Optional add the Featured Image and modify the Page Customization options ( right under the text editor) . Click the Publish button.
3. Click the Edit with Elementor button

   

4. Click Add Template ( the folder icon ) and select from My Templates one of the Ravier page templates.

   

5. OR click Add New Section and start building your page as you want.

1. Click Pages > Add New.
2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Home Slider/Video" template.
3. Click Publish.

4. To configure the homepage slider go to Appearance > Customize > General Options > Home - Slider Items ( Note: The recommended size for the slider images is 1920x1080 px. You can experiment with other sizes too. )

   You can select slider or video from Home - Slider or Video option.

   You can select full screen or split 50% from Slider Option.

   The default slider text:

   <h1 class="display-3">Ravier</h1>
   <p>Delicate and contemporary dishes, created by the finest cooks.</p>
   <a href="#" class="read-more white">Find More</a>

5. Add home content by clicking the Edit with Elementor button
6. ! IMPORTANT : Click Settings > Reading and select Front page displays a static page. Select the page you just created as your Front page and click Save Changes.

1. Click Pages > Add New.
2. Click the Edit with Elementor button
3. Click Add Template and select from My Templates one of the Menu page templates.
4. Click Publish.
5. Now you can add the new page to your menu

How to add menu items:

Let say you are editing the Menu 2 Cols page. In the category tab, change the Content text editor from Visual to Text. Then copy a list item and paste it at the bottom of the list. If you want to change the number of columns, edit the ul css class. Use one of the following: menu-1cols, menu-2cols, menu-3cols.

Here's an example of the menu list code:

<ul class="food-menu food-menu-v1 menu-2cols">
 	<li>
<div class="menu-content">
<h4 class="menu-title">Tomato Bruschetta</h4>
<div class="menu-text">Tomatoes, Olive Oil, Cheese</div>
</div>
<div class="menu-price">$4.00</div></li>
 	<li>
<div class="menu-content">
<h4 class="menu-title">Avocado &amp; Mango Salsa</h4>
<div class="menu-text">Avocado, Mango, Tomatoes</div>
</div>
<div class="menu-price">$5.00</div></li>
 	<li>
<div class="menu-content">
<h4 class="menu-title">Marinated Grilled Shrimp</h4>
<div class="menu-text">Fresh Shrimp, Olive Oil, Tomato Sauce</div>
</div>
<div class="menu-price">$7.00</div></li>
 	<li>
<div class="menu-content">
<h4 class="menu-title">Baked Potato Skins</h4>
<div class="menu-text">Potatoes, Oil, Garlic</div>
</div>
<div class="menu-price">$9.00</div></li>
</ul>

1. Click Galleries > Add New Gallery.
2. Below the text editor you'll find the Gallery Options.
3. Add your gallery images, select a gallery template.
4. Click Publish.

1. Click Pages > Add New
2. Click the Edit with Elementor button
3. Click Add Template and select from My Templates one of the Contact page templates.
4. Click Publish
5. Install and activate the contact 7 plugin ( https://wordpress.org/plugins/contact-form-7/)

6. Go to Contact > Add New and create a new contact form

   

7. Add the following code in the Form option to look like in online demo

   <div class="row">
       
   <div class="col-md-4">	[text* your-name class:comm-field class:margin-b24 placeholder "Name"] </div>
   
   <div class="col-md-4"> [email* your-email class:comm-field class:margin-b24 placeholder "Email"] </div>
   
   <div class="col-md-4"> [tel* your-phone minlength:10 maxlength:12 class:comm-field class:margin-b24 placeholder "Phone"] </div>
   
   </div>
   
   <p>[textarea* your-message id:msg-contact x5 placeholder "Message"]</p>
   
   <p class="contact-btn">[submit id:submit-contact "Send Message"]</p>

8. Click the Save button. Copy the shortcode and paste it in the contact page.

1. Click Pages > Add New
2. Click the Edit with Elementor button
3. Click Add Template and select from My Templates a Reservation page template.
4. Click Publish
5. Install and activate the contact 7 plugin ( https://wordpress.org/plugins/contact-form-7/)

6. Go to Contact > Add New and create a new contact form

   

7. Add the following code in the Form option to look like in my demo

   <div class="row reserve-holder">
   
   <div class="col-md-6">    
   <label> Name*</label>[text* your-name class:comm-field] 
   </div>
   <div class="col-md-6"> 
   <label> Email* </label> [email* your-email class:comm-field]
   </div>
   <div class="col-md-6"> 
   <label> Phone*</label> [tel* your-phone minlength:10 maxlength:12 class:comm-field] 
   </div>
   
   <div class="col-md-6">
   <label> Date*</label> [date* your-date min:today id:datemonday class:datepicker class:comm-field]
   </div>
   
   <div class="col-md-6">
   <label> Time*</label> [select* your-time class:comm-field "09:00" "10:00" "11:00" "12:00" "13:00" "14:00" "15:00" "16:00" "17:00" "18:00" "19:00" "20:00" "21:00" "22:00"] 
   </div>
   
   <div class="col-md-6"> 
   <label> Seats*</label> [text* your-seats class:comm-field] 
   </div>
   
   </div>
   
   <label>Special Requests</label> [textarea your-message id:msg-contact x4 ]
   
   <p class="alignc">[submit "Book Now"]</p>

8. Click the Save button. Copy the shortcode and paste it in the reservation page.

1. Click Pages > Add New.
2. Click Publish.
3. Now you can add the new page to your menu
4. Now click Settings > Reading and select Front page displays a static page. Select the blog page you just created as your Posts page and click Save Changes.
5. To select a blog layout go to Appearance > Customize > General Options > Blog - Articles Layout option
6. Click Posts > Add New to create a news post. Make sure when you add a Featured Image for a post to have at least 1920x750px. You can play with other size too.

There are 6 widget areas for this theme. Go to Appearance > Widgets to use them.

ravier is using the WordPress Live Customizer feature. Go to Appearance > Customize and change site title, colors, upload your logo and more. You'll see real time preview of changes you made to your site.

Here's the list of available shortcodes:

1. OpenTable shortcode: [match_opentable id="" btn_txt="" people_txt="" date_txt="" time_txt=""]

   The id attribute is required. Find your OpenTable ID into your account.

   The other attributes are optional.

2. Gallery: [match_gallery post_id="" cols="4"]

   The cols can be 3 or 4.

   The post_id attribute is required. You'll find the post ID by clicking its title in the Galleries section. The post will open in post editor and you'll see the post ID in your browser's address bar. Check the image below:

   

3. Testimonials: [testimonials count="5"]

   The count attribute is optional.

4. Blog Articles: [blog_3cols count="3"]

   The count attribute is optional.

After you install and activate Font Awesome plugin, go to Settings > Font Awesome and select the following options ( check the image below ). Click Save Changes button.

Ravier theme comes with a child theme in the main download package.

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.

Child themes are recommended if you modify the theme files code and don't want to lose your customization when updating the theme to a new version.