Normal install

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

The business that cares about you: 340x574px
The comprehensive range of services (icon size): 83x83px
Engineered with precision and for outstanding quality: 600x400px
Flexible payment plans: 1920x1080px
Meet the team: 267x320px
Features block with the iPhone: 380x758px
Our latest projects: 380x285px
Some of our clients: 204x114px
Photo stream: 103x103px

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/Charity/page-templates/front-page.php
• Logo and Navigation Menu: /Themes/Charity/header.php & /Themes/Charity/partials/nav-offcanvas.php
• Main Introduction section: /Themes/Charity/section/section-header.php
• The comprehensive range of services” Section: /Themes/Charity/section/section-content-box.php
• “Engineered with precision…” Section: /Themes/Charity/section/section-welcome-box.php
• “Flexible Payment Plans” Section: /Themes/Charity/section/section-paralax.php
• “Meet The Team”: Section: /Themes/Charity/section/section-team.php
• “Arrange an appointment…” Section: /Themes/Charity/section/section-call-to-action.php
• Section that shows features with Phone image: /Themes/Charity/section/section-content-column-box.php
• “Our Latest Projects” Section: /Themes/Charity/section/section-portfolio.php
• “What Our Clients Say” Section: /Themes/Charity/section/section-portfolio.php
• Price Table Section: /Themes/Charity/section/section-price-table.php
• Our clients Section: /Themes/Charity/section/section-content-column-box.php
• “Find us on the map” Section: /Themes/Charity/section/section-contact.php
• Newsletter Section: /Themes/Charity/section/section-newsletter.php

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

Open the file “section-header.php” from “Themes/Charity/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” href=”#” data-editor=”true”>Learn More</a>

<a class=”btn btn-secondary editable_link” href=”#” data-editor=”true”>View Collection</a>

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

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

Open the file “section-team.php” from “Themes/Charity/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 “The comprehensive range of services”?

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

• Open the file “section-price-table.php” from the folder “Themes/Charity/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/Charity/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/Charity/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>

The Latest News block is designed to display blog posts created in the wp-admin ⇨ Posts section. The block is designed to display the maximum of 10 blog posts. To change this number, please follow the steps below.

1- Open the file called ‘functions.php’ which it’s located on the following location: wp-content/themes/MyBook/functions.php

2- At around line 1004 in the code, find this line:
‘numberposts’ => 10,

Change the number 10 to any number of blog posts you wish to show on the homepage.