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 : 150x24px
The Mobile Application That’s Ahead Of The Rest : 376x750px
The Mobile Application That’s Ahead Of The Rest : 195x67px
App Description : 270x490px
App Features : 35x35px
Screenshots : 375x667px
Reviews : 100x100px

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/MyApp/page-templates/front-page.php
• Logo and Navigation Menu: /Themes/MyApp/header.php & /Themes/MyApp/partials/nav-offcanvas.php
• Main Introduction section: /Themes/MyApp/section/section-header.php
• “App Description” Section: /Themes/MyApp/section/section-welcome-box.php
• “App Features” Section: /Themes/MyApp/section/section-content-box.php
• “Screenshots” Section: /Themes/MyApp/section/section-portfolio.php
• “Reviews” Section: /Themes/MyApp/section/section-testimonial.php
• “Price Table” Section: /Themes/MyApp/section/section-price-table.php
• “Newsletter” Section: /Themes/MyApp/section/section-newsletter.php

How to add/remove blocks in to “App Features”?

Open the file “section-content-box.php” from “Themes/MyApp/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 make buttons open in new window in pricing tables?

• Open the file “section-price-table.php” from the folder “Themes/MyApp/Section/”.
• There will be < a > anchor tags like this three times in to the file:
• <a href=”#” data-editor=”true” class=”btn btn-primary editable_link”>Order Now</a>
• Add target=”_blank” in to a tag like this:
• <a href=”#” data-editor=”true” class=”btn btn-primary editable_link” target=”_blank”>Order Now</a>
• Note: href=”#” value can be different as per the link you saved while editing the theme.

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/MyApp/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/MyApp/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>