Installing a fresh copy

1. Open the Templatic member area and download the theme.
2. Navigate to wp-admin ⇨ Appearance ⇨ Themes ⇨ Add New ⇨ Upload.
3. Upload the zip file you downloaded from the member area.
4. Enter the license key. You can get it from the member area, under “My Downloads” inside Download pop up. Screenshot.
5. Click on the blue “Insert sample data” button. You must load dummy data to complete the installation process.

To start editing your homepage just visit the front-end while logged in as the admin. The theme will display the editing functionality to any admin currently logged in to the site. Regular visitors won’t see the editor.

Adding and editing text

To edit a text headline or paragraph simply click into the area you want to change, delete the existing content and start typing your own. Styling the text with HTML is not possible.

To change the font click on the Fonts section in the top left corner of the page and choose the font you want to use.

Adding images (logo, icons, etc)

To replace a sample image with one of your own just click onto the image and choose a substitute from your hard drive. The theme will automatically crop and resize/stretch the image to fit the frame.

Recommended image sizes for each block

logo : 194x36px
Delightfully delicious food served in great ambience : 1920x1080px
Great food served with style : 570x380px
Today’s Specials : 108x81px
Weekend Lunch Special : 1903x1399px
Our Specials Menu : 108x81px
Latest news : 150x150px
What Our Diners Say : 1920x1080px
The Restaurant Gallery : 380x285px
Our Team : 330x248px

Content blocks

Blocks are predefined elements containing sample content. They make up most of what you see on your homepage.

Adding a new blocks

To add a new block to your homepage expand the “Blocks” dropdown at the top of the page and drag the block you want to use onto the page. Each block contains dummy content which will allow you to see how the final result should look like.

General block options

Each blocks contains option that allow you to manipulate or modify the block.

Move
To move a block hover over it (with your mouse) and then click and hold the move icon. Now simply drag the block into it’s new location.

Copy
Creates a carbon copy of your block and places is directly below the original block.

Delete
Deletes the block from the page.

Reset
Undo’s all your changes and loads back the original (dummy) content. You can achieve the same thing by deleting the block and dragging a new one (of the same type) from the Blocks dropdown.

Change image
This option shows up inside blocks that have background images. It allows you to upload a new background image from your hard drive. I recommend using Full HD images (1920x1080px).

Setting up the latest news block

The Latest News block is designed to display blog posts created in the wp-admin ⇨ Posts section. The block is designed to display all posts from all categories so try to avoid having too many blog posts published at the same time as they can start taking too much space on the homepage.

How to assign a featured image to a post?
Do it by uploading a new image specifically to that blog post. Details on how to accomplish this are provided in the following article
https://templatic.com/docs/how-to-create-thumbnails-and-featured-images/

How to create a regular page with front-end controls?

Follow these steps to create a page that looks similar to the homepage, i.e. one that allows you to use the front-end building blocks…

1. Navigate to your WordPress dashboard ⇨ Pages ⇨ Add New.
2. Set the title to whatever you want and then under Page Attributes ⇨ Template choose the “Home Page” option.
3. Hit publish and then open the page in front-end.
4. Use the front-end editing controls to style the page however you like.

Which file is used for which section on home page?

Home page on the site has different section. Each of them has a different file. Following list gives details of each of that section with file and its location:

• Home page main file: /Themes/myrestaurant/page-templates/front-page.php
• Logo and Navigation Menu: /Themes/MyRestaurant/header.php & /Themes/MyRestaurant/partials/nav-offcanvas.php
• Big banner image section: /Themes/MyRestaurant/section/section-header.php
• Main Introduction section: /Themes/MyRestaurant/section/section-welcome-box.php
• “Today’s Special” Section: /Themes/MyRestaurant/section/section-content-box.php
• “Weekend Lunch Special” Section: /Themes/MyRestaurant/section/section-paralax.php
• “Flexible Payment Plans” Section: /Themes/MyRestaurant/section/section-paralax.php
• “Our Specials Menu” Section: /Themes/MyRestaurant/section/section-content-column-box.php
• “Reserve your table” Section: /Themes/MyRestaurant/section/section-call-to-action.php
• “Latest News” Section: /Themes/MyRestaurant/section/section-blog.php
• “What Our Diners Say” Section: /Themes/MyRestaurant/section/section-testimonial.php
• “The Restaurant Gallery” Section: /Themes/MyRestaurant/section/section-portfolio.php
• “Our Team” Section: /Themes/MyRestaurant/section/section-team.php
• “Find us on the map” Section: /Themes/MyRestaurant/section/section-contact.php

How to remove buttons/description from main header section on Homepage?

Open the file “section-header.php” from “Themes/MyRestaurant/Section” folder. Find the below div tag and remove the whole < a > tag of the button that you want to remove.

<div class=”button-block”>

<a class=”btn btn-primary editable_link“ contenteditable=”true“ data-editor=”true“ href=”#“>View Menu</a>

</div>
Note: If you have renamed the button then there will be different text instead of “View Menu”.

How to add more team members in single team member section?

Open the file “section-team.php” from “Themes/MyRestaurant/Section/” folder.

Find these section of code and just duplicate it the number of times you want to increase one service block and paste at the same place: http://snippi.com/s/coul7qq

How to add/remove services blocks in to “Today’s Special”?

Open the file “section-content-box.php” from “Themes/MyRestaurant/Section/” folder.

Find these section of code and just duplicate it the number of times you want to increase one service block: http://snippi.com/s/wvf1nrh

How to change the “Contact Us” icons in footer?

We have used font-awesome icons in contact us section. Such as for phone icon, this code is used: <i class=”fa fa-phone”></i>. You can use any one of the icon listed here: http://fortawesome.github.io/Font-Awesome/icons/

Go to Wp-admin > Appearance > Widgets > Footer column4 and change the icons that you want to change in to the Text widget.

How to create your own new section?

All the sections of home page are being defined in to the file called “front-page.php“. It is placed in to the folder “Themes/MyRestaurant/page-templates” folder.

There are different sections code are placed in to file, Such as:

<section class=”section-newsletter section-layer”>

<?php include(get_template_directory().’/section/section-newsletter.php’); ?>

</section>

After these sections, you can also add your own new section by adding these code:

<section class=”section-newsectionname section-layer”>

<?php include(get_template_directory().’/section/section-newsectionname.php’); ?>

</section>

Here, newsectionname is the name of the div that you want to display on the home page. Name must have “section-” as it’s prefix.

section-newsectionname.php is the file that you will have to create in “Themes/MyRestaurant/Section” folder. This file will contain HTML/PHP code that you want to display in your new section.

How to duplicate/drag your custom created section?

Different classes are used to make the section duplicated/draggable. The classes are drag”, duplicate,remove-div, reload -div class and for tooltip use “tooltip” class.

For example:

<div class=”action-ui”>

<span class=”actions drag“><i class=”fa fa-arrows”></i><span class=”tooltip“>Move</span></span>

<span class=”actions”><a class=”duplicate” href=”#”><i class=”fa fa-copy”></i><span class=”tooltip“>Copy</span></a></span>

<span class=”actions”><a class=”remove-div” href=”javascript:void(0);”><i class=”fa fa-remove”></i><span class=”tooltip“>Delete</span></a></span>

<span class=”actions”><a class=”reaload-div” href=”javascript:void(0);”><i class=”fa fa-refresh”></i><span class=”tooltip“>Reset</span></a></span>

</div>