Kedavra Documentation by Themes Awesome v1.0


Kedavra - Clean Multi-Concept Elegant Theme

Created: June 2015
By: Themes Awesome
Support: Ask support access HERE

Thank you for purchasing Kedavra. If you have any questions that aren't covered in the documentation, then please send me a PM and I'll be happy to help. Thanks again!


Table of Contents

  1. Installation
  2. Basic Tutorial
  3. Theme Features
  4. Page Builder
  5. Live Edit
  6. Included Files




A) Installation - top

WordPress Installation

This theme requires a working version of WordPress to already be installed on your server. If you need to install WordPress then please visit: http://wordpress.org/download/. If you need any help with the installation, please refer to this guide: http://codex.wordpress.org/Installing_WordPress.

Here is a brief step by step on how to install WordPress:

  1. Download and unzip the WordPress package if you haven't already.
  2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
  3. Upload the WordPress files in the desired location on your web server:
    • If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.
    • If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), create the blog directory on your server and upload WordPress to the directory via FTP.
    Note: If your FTP client has an option to convert file names to lower case, make sure it's disabled.
  4. Run the WordPress installation script by accessing wp-admin/install.php in a web browser.
    • If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php
    • If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php

Theme Installation & Setting Up

1) Uploading Kedavra

The theme files need to be uploaded before you can activate the theme for use. There are two ways you can do this, FTP upload or WordPress upload.

If you are uploading via FTP upload, then you need to upload the unzipped folder “Kedavra” to the /wp-content/themes folder of your WordPress installation.

If you are uploading via WordPress upload, then navigate within the WordPress admin area to Appearance > Add New Themes > Upload. Select the zipped file “Kedavra.zip” and then hit Install Now.

2) Activating Kedavra

Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate “Kedavra”.

3) Install Plugins

Now that you have activated Kedavra, you will see a notice at the top of the screen. This notice is to let you know about the plugins that we recommend you install for use with the theme. Click 'Begin installing plugins' and install/activate the plugins one by one. You can also access this page by going to Appearance > Install Plugins.

You must install Jetpack plugin separate from require plugin. Install it by yourself.

4) One Click Demo Content

NOTE: before importing the demo content, make sure you have installed & activated all required plugins from within Appearance > Install Plugins.

This theme support one click import demo content. You can make your site as same as our demo site. You need to install Required Plugins before importing demo content.

Then go to option > demo importer.
You will find this box:

All you need is just click "Import Demo" button and wait till demo imported.

It may take a several minutes. The import is around 5-10 minutes.


B) Basic Tutorial - top

Posts

The Posts menu option on the left is where you add blog posts. To add a new blog post, select the Posts > Add New option from the left hand WordPress menu.

You will be able to set a title for the blog post, add the body content, and also provide all the meta information such as extra details in "Categories" and "Tags" also media in "Featured Image". In the blog meta "Featured Image" you can set the image for the thumbnail.

Widget Areas

Kedavra have 1 sidebar widget, IT JUST WILL SET IF YOU USE PAGE TEMPATE BLOG WITH SIDEBAR. You can add your own widget for that area in "Appearance > widgets". You can see at the "Primary Sidebar". Up to 4 footer widget and 1 special sidebar called "Causes widget" that only show in single cause portfolio page.

Kedavra have 3 custom widgets:

Kedavra Latest Post (blog with sidebar)

This widget will display your latest post with thumb in your widget area.

result
Kedavra Latest Portfolio (footer)

This widget will display your latest portfolio with thumb in your widget area.

result
Kedavra Related Portfolio (causes sidebar)

This widget will display your related portfolio with thumb in your causes widget area.

result

Child Theme

We have provided a child theme package ready for you to use if you wish to make changes to files, while keeping them through updates. The child theme is included within the main download folder, and it is named "Kedavra-child". All you need to do is upload this as well as the standard "Kedavra" folder, and then activate the child theme in Appearance > Themes from the WordPress menu.


C) Theme Features - top

Theme Options

You should take the time to go through all of these options to ensure that you are getting the most out of the theme.

You can add a body background image at that option.

Header Type Choices



Kedavra have 3 different header type. Each of header have can have different style that you can set in post page editor. You will find page options.

You can access the header style with go to Pages > add new / edit page. At the bottom of page editor you will find "Page Option" that contain header background choice. We will give an example with image below:

Default Header
Transparent Header
Light Template Header

Font Options



Kedavra allows you to use either Web Standard or Google Fonts - separately for both Body & Headings text. If you are using Web Standard, or Google Fonts, then all you need to do is select the type from the button set, and then select the font family from the provided dropdowns.

Kedavra have 5 custom font that included with the theme. There are:

You can activate those font as your heading or content font by activate Jetpack for wordpress.com plugin then activate the custom css feature. Or you can add that by accessing theme editor > style.css file.
Then activate the font with call the font-family via css.
example:

h1, h2, h3, h4, h5, h6 {
font-family: "HansKendrick";
}

Live Customizer

Kedavra will help you to customize your site instantly one by one with Extensive Live Customizer.



Page Template

Kedavra allow you to choose your page template type.

There are 8 templates for a page as you can see in page editor.

You will find Page Options in every page template that allow you to hide or show title, select header background style, hide footer ( just in default page template ), also choice an option to add margin or not to your page content.

Default Template

Is like ordinary page, use for blog or anything you want without formatting type.

You can add or make a page with full page builder block with this template.

sample used for blog without formatting type.


Blog Masonry Template

Create a page with this template. It will display your post blog item as a 3 column masonry page.

result


Blog Sidebar Template

Create a page with this template. It will display your post blog item with right sidebar widget.

result


Contact Template

Contact template will let you add google maps, in the demo we use contact form ID in the text editor. You can copy the template in admin panel > contact > contact form.



Full Width Portfolio Template

This page will display your portofolio post as a full width page portfolio masonry.

result


Gallery Template

With this template you will be able to add a lot of image in gallery box. Then the image will displayed in gallery page like image result.

result


Portfolio Grid Template

This page will display your portofolio post as 4 grid portfolio page.

result


Portfolio Masonry Template

This page will display your portofolio post as 4 masonry portfolio page.

result


Post Type

In the picture, post type using "pin" icon. Every post type have their function.

Post

You will be able to set a title for the blog post, add the body content, also provide all the meta information such as extra details (Categories and Tags) and media (Featured Image). In that meta blog you can set the image for the thumbnail.

Step by step :
1. Enter a title in the column that has been provided.
2. Fill the text editor with your content.
3. Add image here and the image will display as featured image.
4. Publish it!
result


Testimonial

Testimonial post type allow you to make a client satisfied words or anything related.

Step by step :
1. Fill the title with a name. Because title will show as a name in the testimonial page template.
2. Text editor is a content for the testimonial.
3. Featured image will display as testimonial author avatar.
4. And job form is from custom meta box. This form will display author job beside the author name.
result


Team

Team post type allows you to make a Team member with description about him/her, link to their social media and also their job. After you make your team post, display it with "Team Template" or you can just call the team with "Team Block" in "Page Builder" template.

Step by step :
1. Fill the title with a name. This title will show as a name in the Team page template.
Example:
2. Text editor is a content for the Personal Team description.
Example:
3. Featured image will display as the Personal Team author avatar.
Example:
4. Fill the job and social media link at the bottom of post editor.
Example:
result


Portfolio

Portfolio post will display your work detail or project. Fill portfolio content is same like post.

Kedavra have 4 custom single portfolio layout


D) Page Builder - top


OVERVIEW

The Page Builder (PB) allows you to create unique and amazing pages, exactly the way you want them! You can build(found) it on the :

1. Pages


2. Add new pages


3. after you select the page builder template, will appear a page layout that you need to fill.


BLOCK AND FUNCTION

The Row

Row have same function like section. Row will give you a separate wrapper for a content block inside.



Row can be made for full width or with container (standard). You can edit your row like yourself for how many column you want. You just need to click edit row after you create a row.

you can also add a margin or padding into your main row (section) at the right side panel of the row option.

If you add a background and want it to be a cover of your content you should choice the "background image display" as cover and add the row class "parallax". It automatically will change as parallax image background.

Add a Widget Block

You need to click add widget beside the add widget button. You will find some block that we are providing, Default block from Page Builder and WordPress. Some custom page builder we have created are grouped in SMAZE BUILDER categories.

You can drag and drop some builder block in a row to another row in the same page.

after you click that button will appear a box "widget block". You can choose your content there.

then we will describe to you about the block widget:



About Block


You can describe your work or your site or even yourself with this block. Allow you to add image at the left side and text content at right side with custol link. You also can choice button type for your button link.

About Two Side Block


Is a repeater block that allow you to create more than 1 item per block. Odd item will display with image on left side and Even item will display with image on right side.

Author Block

This block have 2 section option. One for left content and other for right content.

Left Content Option

In this part you be able to add your name, job, and image.

Right Content Option

In this part you can add short description about yourself, also add your sign image.

result :
Button Block

You can add custom link button with this block. You can select custom font or google font for the text. This block have 2 different style.

Button block with background
Button block with border
Clear Block

With this block you can add with space between content. You also can add a boder color as a separate.

Counter Block

Counter is a repeater block, so you can add more than 1 item per block. You also can choice how much item display in one row.

Result:
Feature Block

Counter is a repeater block, so you can add more than 1 item per block. You also can choice how much item display in one row.

Image / Icon Above
Image / Icon Side
Full Portfolio Block

If you use this block, your main row layout is must in full width stretched. Then this block will appear without filter. This block just contain option that allow you to set how much item displayed in page, and how portfolio item per row.

Result
HTML Block

Make your own html mark up to page builder with this block.

Hero Image Block

If you use this block, your main row layout is must in full width stretched and the background image is set in the row option, not in block option.

To get the block linked to another block, you might know what your targeted blocks ID. You can check it by inspect element and find the parent ID, or you can add your targeted block a custom class by accessing: Targeted block > Widget Style > Attributes > Widget Class. Then after fill it, back to hero image > Section to link and insert the class or id. Example: #pg-1808-1 for ID, and .about for class.

Hero Slider Block

If you use this block, your main row layout is must in full width stretched. The slider is a repeater, so you can upload more than one image for slider image. Like hero image block, you also can set your overlay color and opacity.

Image Block

You can upload a single image into your page.

Result:
Menu Block

Menu block is a repeater builder block. It's just contain text, but you can change every item color as you like.

Result:
Newsletter Block

You need to create a newsletter form in Mailchip > form before use this block. After that copy the shortcode and paste to the block form.

HTML markup for Newsletter demo

<h3 class="title wow fadeIn">Newsletter</h3>
<p class="text wow fadeIn">To continue to enjoy the most authentic clothes, and to discover our new products and interesting<br>initiative, Subscribe and join our newsletter.</p>
<div class="form-mail wow fadeIn">
<input type="email" name="email" class="email" id="email" placeholder="Your Email Address"><input type="submit" value="Subscribe">
</div>

result
Partner Block

This block will showcase your Partner image as a carousel slider. Just create a repeater called "partner item" as partner content. You can repeat it and make it as much as you want. But you also can set how much item appear per slide.

result
Portfolio Custom Block

If you fill a form "Custom Portfolio Link" in single portfolio post, it will work with this block. Your link will linked to the portfolio item.

result
Portfolio Grid Block

If you choose "With Causes Detail and Sidebar" in single portfolio post and fill the detail content, it will diplayed with this block. You can choice how much item to display and how much item per row. Also enable and disable portfolio filter.

result
Portfolio Masonry Block

If you choose "Light Box Single" in single portfolio post, it will diplayed this block as a light box photo, you can still choice another single portfolio type. You can choice how much item to display and how much item per row. Also enable and disable portfolio filter.

result
Program Block

You can tell your reviewer about your service, program or anything. This block is a repeater block.

result
Skill Block

You can tell your reviewer about your skill, project progress or another process. This block is a repeater block. You can set the skill bar color as you like.

result
Slogan Block

If you want to use overlay and background image with this block the main row layout must be full width stretched. This block will display a text with custom link button.

result
Team Block

This block will show your post team type as a box. You are allowed to set how much item appear in a page, also set how much service item appear in a page and set how much item appear in a line (column/row).

Testimonial Block

Testimonial block is a block that will call testimonial post type item and show it as a slider list. You can choose how much item to display in the slider.

result :
The Title Block

Will display a different style title for your content. As you can see in the option screenshot, Kedavra title block allow you to choice a custom font or google fonts for the title. Also configure title align, color and italic.


F) Included Files - top

CSS Files

bootstrap.min.css - Sleek, intuitive, and powerful front-end framework for faster and easier web development.. More info: Twitter Bootstrap.



styles.css - The main css for the theme, which includes the layout and styling for all aspects of the theme.

font.css - Font Awesome.

plugin.css - Themes Awesome Custom Plugin.

responsive.css - Themes Awesome responsive and media query css.

JavaScript Files

Main.js - This is where all the custom magic happens. Feel free to edit any of this code, but make sure to keep a backup in case anything goes wrong!

animsition.js - animsition v3.4.3

wow.js - WOW v1.0.3

owlCarousel.js

isotope.js - Isotope PACKAGED v2.1.1

flexslider.js - an awesome, fully responsive jQuery slider plugin.. You can find out more here: http://www.woothemes.com/flexslider/.

respond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). You can find out more here: https://github.com/scottjehl/Respond.

modernizr.js - http://modernizr.com/download/#

smoothscroll.js - SmoothScroll v0.9.9

Infinitescroll.js - Infinite Scroll

bootstap.min.js - Bootstrap v3.2.0

Packery layout mode PACKAGED - sub-classes Packery

jquery.counterup.js - Copyright 2013, Benjamin Intal

waypoints.js - jQuery Waypoint

Magnific Popup - Magnific Popup v1.0.0 by Dmitry Semenov


Now, you have read Our documentation. We’re only an email away if you ever need us!

Once again, thank you for purchasing this theme. Customer satisfaction is our #1 priority, which is why we always endeavour to provide the best service we can. Enjoy this theme!

Themes Awesome Team

Go To Table of Contents