“DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

120
1 “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION” Created: December 22, 2014 Version: 2.0.+ WordPress Theme Developed by: Kopatheme.com Email: [email protected] After activating the theme please ensure that all required settings mentioned herein are also configured properly. Preview the theme on a browser to confirm that the changes to the settings have taken effect. The look and feel of the theme will not appear perfectly unless the required settings have been configured properly, as per the details mentioned on this documentation.

Transcript of “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

Page 1: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

1

“DIVINE – RESPONSIVE WORDPRESS THEME

DOCUMENTATION”

Created: December 22, 2014

Version: 2.0.+

WordPress Theme Developed by: Kopatheme.com

Email: [email protected]

After activating the theme please ensure that all required settings mentioned herein are

also configured properly. Preview the theme on a browser to confirm that the changes to

the settings have taken effect. The look and feel of the theme will not appear perfectly

unless the required settings have been configured properly, as per the details mentioned on

this documentation.

Page 2: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

2

Table of Contents

A. Theme Installation……..………………………………………………………………………..………......4

B. Using Plugins in Divine theme……..……………………………………………………………….……..7

1. Page Builder plugin……..………………………………………………………………………..……….....9

2. Divine Toolkit plugin……..………………………………………………………………………..………..12

3. Revolution Slider plugin……..………………………………………………………………………..…….12

4. WooCommerce plugin……..………………………………………………………………………..……….12

C. Demo Content……..………………………………………………………………………..……….............16

D. Theme Options Customization……..……………………………………………………………………..18

1. Theme Options……..………………………………………………………………………..………..........18

2. Sidebar Manager……..………………………………………………………………………..………........23

3. Layout Manager……..………………………………………………………………………..……….........25

1. Setup Home Page……..………………………………………………………………………….…....27

2. Setup Front Page……..…………………………………………………………………………...…...27

3. Setup Page……..………………………………………………………………………..…………......28

4. Setup Post……..………………………………………………………………………..……….........28

5. Setup Search Page……..……………………………………………………………………....………28

6. Set up Error 404 Pages……..…………………………………………………………………………28

7. Set up Portfolio Archive Pages……..…………………………………………………………………28

8. Set up Single Portfolio Pages……..………………………………………………………………..…28

9. Set up Portfolio Archive Pages……..…………………………………………………………………28

10. Set up Single Portfolio Pages……..………………………………………………………………..…28

4. Backup……..………………………………………………………………………..………......................29

E. Custom Widgets……..………………………………………………………………………..………..….......31

1. Kopa Widget Dynamic sidebar………………………………………………………………..……….......31

2. Kopa Event……..………………………………………………………………………..………………………33

3. Kopa Event Timeline……..………………………………………………………………………..……….…34

4. Kopa Portfolios……..………………………………………………………………………..………...........36

5. Kopa Portfolios Filter by Author………………………………………..………..............................38

6. Kopa Post – Masonry……………………………………………………..………..…………..……........40

7. Kopa Post – Horizontal………………………………………………………………..……………….......42

8. Kopa Post – Small Thumb…………………………………………………………………..……..….......44

9. Kopa Section……..………………………………………………………………………..………..............46

10. Kopa Services……..………………………………………………………………………..……….............47

11. Kopa Services B……..………………………………………………………………………..…………......48

12. Kopa Slider ……..………………………………………………………………………..………...............49

13. Kopa Slider B……..………………………………………………………………………..……………….....50

14. Kopa Slider without Title……………………………………………………..……….........................51

15. Kopa Staff……..………………………………………………………………………..………..................54

16. Kopa Tagline……..………………………………………………………………………..………..............56

17. Kopa Testimonials ……..………………………………………………………………………..………......57

18. Kopa Testimonials B……..………………………………………………………………………..………....58

19. Kopa Twitter……..………………………………………………………………………..………..............59

20. Kopa Video……..………………………………………………………………………..………................64

Page 3: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

3

21. Kopa Text……..………………………………………………………………………..………................65

F. Custom Shortcode Generator……..……………………………………………………………….…….66

G. Create Categories - Posts - Toolkit plugin - Custom Menu……..………………………………73

1. Create Category……..………………………………………………………………………..………........73

2. Create Posts……..………………………………………………………………………..……….............77

3. Event Plugin……..………………………………………………………………………..………............82

4. Portfolios plugin……..………………………………………………………………………..……….......83

5. Slides plugin……..………………………………………………………………………..………............85

6. Service plugin……..………………………………………………………………………..………..........86

7. Staffs plugin……..………………………………………………………………………..………............88

8. Testimonials plugin……..………………………………………………………………………..……….. 89

9. Create Custom Menu……..…………………………………………………………………………..…….90

H. Create pages……..………………………………………………………………………..………...............92

1. Create Home page 1……..………………………………………………………………………..…..…....92

2. Create Home page 2……..………………………………………………………………………..…..…....96

3. Create Home page 3……..………………………………………………………………………..…..…....99

4. Create About page……..……………………………………………………………………....……........106

5. Create Single Post……..……………………………………………………………………….…..….......110

I. How to setup the demo site……..…………………………………………………………………………113

J. Video Tutorial……..………………………………………………………………………..………............118

K. Translation……..………………………………………………………………………..………................118

L. Updating the Theme……..………………………………………………………………………….……....119

M. Sources and Credits……..………………………………………………………………………..……......119

Page 4: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

4

A. Theme Installation

Note: As a pre-requisite you will need a copy of WordPress version 4.0 installed and running on your server.

After you have successfully installed WordPress on your server, you are now ready to install Divine theme.

The process of installation is very easy. Here are the simple steps to upload and install Divine theme:

- Step 1: Download the Divine theme files from your download page with name file "Divine-

downloaded-package.zip ". The downloaded file consists of not only theme file but also demo data,

document, etc.

- Step 2: Unzip the file "Divine-downloaded-package.zip ". Once the file has been unzipped you will

notice a file named Divine. This is the theme file.

- Step 3: Login to the WordPress control panel of your website.

- Step 4: From your Dashboard, go to Appearance Themes.

Click "Add New" in either way.

Page 5: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

5

Click “Upload Theme”

Page 6: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

6

- Step 5: Click Choose File to find the file Divine.zip on your computer and click Install Now.

- Step 6: Finally, click Activate to activate it.

After activation, preview this theme you will see the theme looks quite empty, you will see your website

appear a message "Missing core plugin for theme Divine. Please install plugin Kopa Page Builder to run

theme" that request to install and active plugin to use this theme.

Besides, Divine theme also require to install some plugin as follows:

Divine Toolkit plugin - A specific plugin use in Divine Theme to help you register post types and widgets

Revolution Slider plugin

WooCommerce plugin if you want to create online shop on your website.

Page 7: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

7

B. Using Plugins in Divine theme

With our Divine theme, you must install and activate Page Builder plugin to use the theme. Besides, you

must install Divine toolkit plugin to activate shortcodes, event plugin, portfolios plugin, staff plugin, services

plugin, slides plugin, testimonials plugin. Moreover, Divine theme also support WooCommerce plugin to

create ecommerce website, Revolution Slider plugin to create sliders.

From your Dashboard, there will be a message appearing on the panel that requests to install and

activate Divine Toolkit, Envato WordPress Toolkit, Kopa Page Builder, Revolution

Slider and WooCommerce.

- Step 1: Click "Begin installing plugin"

- Step 2: Click “Install”

After Plugin installed successfully when you preview the theme it will show here:

Page 8: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

8

Page 9: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

9

1. Page Builder plugin

After installing and activating the theme, you cannot use it immediately, you will see a message displayed at the

top of the page that request Page Builder installation. This plugin has been integrated when you buy our theme.

Using Page Builder plugin makes you easy to create and custom pages without having to create sidebars.

Especially, when you purchase our Divine theme, if you want to build a demo version which is the same as our

demo, Page Builder will help you carry out this task. You only need install theme, install required plugin and

import our demo data.

Create pages using Page Builder

- Step 1: At a new page, scroll down to Page Builder to custom page where you can customize page

including choosing rows, adding widgets to use for your page it will appearance same image below. If

you do not see the Page Builder module, check that you have it enabled in your Screen Options

- Step 2: Our pages are built based on this structure: Outer Container Parallax Inner, but not all

of rows have the same structure. To create each page properly structured, you should consider our

guiders in the “Create pages” part.

Click on the customize icon to custom row according to the above structure

With Outer tag: click Yes to active if row have this class, if rows do not have this class, choose No.

When you choose Yes button, you can create style for this tag such as set background, custom CSS for outer tag

Click Save button to save.

Page 10: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

10

With Container tag: You can choose layout style Boxes or Wide and you can custom CSS code for this tag

With Parallax tag: Click Yes to use parallax, you can upload background image, select overlay color and

overlay opacity for image, you also custom CSS for it, then you click Save. You can remove uploaded image by

Reset button.

Page 11: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

11

With Inner tag: Choose Yes in case you want one row is located knob in other row and customize margin,

padding, CSS it will appear like this picture

Page 12: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

12

- Step 3: Add widget, You can follow Custom widget items to properly configure the widget

2. Divine Toolkit plugin

Install and active to use shortcodes, Event plugin, portfolio plugin, slider plugin, staff plugin, services plugin,

testimonials plugin which are integrated in Divine Toolkit plugin

3. Revolution plugin

You can follow this guide to installing and using the plugin WordPress Installation Guide and Importing

Example Slider

4. WooCommerce plugin

Setting WooCommerce

To create WooCommerce plugin, do the following steps:

- Step 1: Go to Dashboard Plugins: Install Plugin

- Step 2: Search with WooCommerce key, the result will display list of related plugin, you

choose WooCommerce - excelling eCommerce then click Install Now.

- Step 3: Waiting about 5s to WordPress auto download and Install Plugin WooCommerce.

- Step 4: Click to Active Plugin.

WooCommerce is a WordPress eCommerce plugin. It offers the features that are necessary for the purpose of

setting up an eCommerce web store. Once you have successfully installed Divine theme, you will be notified to

activate WooCommerce plugin, which is included as a part of the theme. You need to activate the plugin and

complete the setting up process. Follow the below steps for a quick and free setup. Click WooCommerce

Settings.

1. General Settings: Enter your company details here

2. Product: Allows you to select a weight unit, i.e., kilograms or pounds and change inventory options if

you want.

3. Tax: Enter the tax rate, country and the tax percentage to setup.

4. Checkout: This option lets you choose the coupon values. For bank transfer, fill out bank info. For

PayPal, fill out your PayPal info.

Page 13: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

13

5. Shipping: Enter the various shipping charges applicable for your products.

6. Accounts: Enable registration on the "Checkout" page, "my account" page...

7. Emails: Enter your company details here.

Using shop page in Divine

1. Creating new categories: Product Categories

2. Adding some new Products: On the WordPress dashboard Click on Products Add New. Enter the

title of the product, content, select product categories, excerpt and click Save.

Page 14: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

14

3. In Product Data, select Product type

4. In General Tab, you can select pages where this product will be displayed. Checking on the Featured

box to Enable this option to feature this product will make this a featured product.

Page 15: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

15

5. Enter the Regular Price and Sale Price.

6. To disable default WooCommerce stylesheets, go to WooCommerce Settings General Check

Disable frontend styles box

7. In Inventory Tab, you can manage stock details. If you check ‘Manage Stock’ box, it will display the

stock quantity box. Enter the stock quantity. You can also choose the backorders attribute.

8. In Shipping: You can add weight, dimension, shipping class as you want.

9. In Linked Product: You can search for a product up-sells, cross-sells.

10. In Attributes: You can add extra attributes as you choose.

11. In Advanced Tab, you can add information about purchase note, menu order in the boxes. The

Advanced tab allows you to personalize the information. Check "Enable review" to view your personal

information as you want it to appear on the product on the front-end.

Page 16: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

16

C. Demo Content

Demo content includes demo posts, pages, comments, categories, tags and so on. It is necessary to help you

learn how the theme works; you can use them to setup a demo page.

Especially, when you import our file demo content, you will have pages such as index, about which we installed

on demo site.

To import demo content, you can follow these steps:

- Go to Tools Import and select the WordPress option. If you are prompted to install the WordPress

Importer plugin you should do this.

Page 17: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

17

- Click the Choose file button and locate the demo-data.xml file that is inside the folder and double click

the file to select it and then click the Upload file and import button.

- A new screen will appear like that, check the Download and import file attachments option and

click Submit.

Page 18: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

18

D. Theme Options Customization

1. Theme Options

Go to Appearance Theme Options. You will find all the options that the Divine Theme offers right here.

Here they are:

Page 19: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

19

1. Logo and Favicon

- Main Logo: You can upload main logo in header and adjust margin

- Favicon: You can upload your site's favicon that display in tab bar of browsers

- Apple icon: You can upload your Apple icons for apple device (152x152)

2. Header

When you check on checkboxes Social Link, Search Form and Sticky Menu bar to show them on front

end. You also add information for header in Header Information.

3. Breadcrumb

You can choose show or hide breadcrumb. If you choose show, you will set background for Breadcrumb.

4. Footer

- Footer information: You can enter the content you want to display in your footer

- Social & Newsletter:

- You can choose option display Newsletter and Social are alternate location or located on the one line.

- Check on checkboxes Social link and Newsletter form if you want to show them.

- Enter Feedburner URI or Mailchimp for Newsletter if you want to show it.

- Footer appearance effect:

- Create effect for your footer with dropdown list of effects.

- Choose time duration of effect.

- Choose time of delay effect.

Page 20: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

20

5. Blog Post

- The content: You can select to display according to Excerpt or Full content or Limit the number of

characters.

- Metadata: Check on checkboxes to show Author, Category, Created date and Comment counts.

6. Single Post

- Metadata: You can Show or not "Featured content", " Category", " Tags", " Created Date", " The

number of comment", "Share Button" and " Author Information" in single post.

- Related posts: You can select related posts from Tags or category and limit the number of posts you

want to display.

7. Socials Link

Enter the Facebook link, Twitter link, Google Plus link, LinkedIn link, Youtube link, etc. if necessary

8. Contact Page

- Contact Information Enter information to contact such as Caption, Description, Phone number,

Email, Address and Google map code (latitude, longitude).

- Contact Form: Enter Cation, Mail Reply Template (Variable: [contact_name], [contact_email],

[contact_url], [contact_message].

Note: At Google Map, you can see image following to enter your google map code: latitude, longitude.

Page 21: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

21

9. Custom Color

When you check on Enable custom color, you can customize multi-color for primary and secondary color.

10. Custom Font

Custom font manager: You can upload your font from your computer then click Save Options, font

uploaded shown in select box Body font, Menu Font, Heading font, Post font, Main navigation font and

Widget title font.

You can change Body, Main menu - Footer menu, Widget title Main- footer, Post title, Post content and

Heading and custom font weight, font size, font color for them.

Page 22: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

22

11. Custom CSS

You can add additional CSS to your code. This CSS code is saved in Database and it isn't lost when we

update new theme

12. Portfolio

Enter title and description for breabcrumb of Portfolio, you can also enter number of project per page to

display portfolio on the frond-end.

13. Single Portfolio

This option help you custom parameters like show or hide Featured content, Tag, Created date, Number

of comments, Share button, Author information and custom related item display in single portfolio.

14. Product

Enter title and description for breabcrumb of product, you can also enter number of Products per row and

Rows per page to display

15. Page builder

You can checkbox to use sticky toolbar.

Page 23: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

23

2. Sidebar Manager

Sidebar manager is an advanced feature of the Kopatheme framework which allows you to create sidebars for

each page you want, rename Sidebars as wanted, so it is easy for you to remember and control position of

Widgets in Appearance Widget

To create a new sidebar, follow these steps:

- Step 1: Click Appearance Theme option Sidebar Manager

- Step 2: Enter sidebar name, click Add sidebar button.

- Step 3: You can enter description for created sidebars.

To rename default/ existing sidebar, follow the steps:

- Step 1: Click Appearance Theme option Sidebar Manager

- Step 2: Click on sidebar name you want to rename

- Step 3: Click on sidebar name, description you want to rename.

To delete default/ existing sidebar, follow the steps:

- Step 1: Click Appearance Theme option Sidebar Manager

- Step 1: Click on sidebar name you want to delete

- Step 2: Click Delete on the below of the sidebar name you want to delete.

Finally, Click Save Options button to save.

Page 24: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

24

1. Enter new sidebar name 3. Rename sidebar name 5. Click if you want to delete

sidebar

2. Click to add new sidebar 4. Enter or edit description for sidebar

Note: Advanced Setting described on this page includes advanced options are used for professional

developers.

Page 25: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

25

3. Layout Manager

We can customize layout of all pages in the website with Layout Manager. In Layout Manager, we can see the

illustration for layouts which that page can apply. The illustration shows you the widget areas of the layout.

Based on the illustration, you can feel easy to select the sidebar for widget areas.

Sidebars of Kopatheme framework are dynamic, so you can create a sidebar, delete or edit the flexibly in

Sidebar Manager.

The way to set up the pages layout is summarized as 3 following steps:

- Step 1: Select layout you like for the page.

- Step 2: Choose sidebar for each widget area.

- Step 3: Come to Appearance Widget page to drag-drop widgets to each sidebar.

Page 26: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

26

Page 27: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

27

Setup Home Page (Blog page)

Click Appearance Layout Manager Home. By default, the WordPress template hierarchy

reserves the home.php page for the homepage, but if you set a front page post, it will be displayed instead of

home.php. You can change layout of home page by Select the Layout: Blog Page. Next select the sidebars

into the appropriate Widget Areas (as shown in the image) to be displayed.

Setup Front Page

The first, Click Settings Reading. Select the page which you intend to show as your front page from

Home page display.

Page 28: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

28

Click Appearance Layout Manager Front Page If you want to change layout of front page,

Click Select the layout: Static Page. Next, select the sidebars into the appropriate Widget Areas (as shown

in the image) to be displayed.

Setup Pages

Click Appearance Layout Manager Static Page. Setup Static page controls the layout for the

static pages on the site. You can change layout of the pages by Select the layout. Next, select sidebars into

the Widget Areas to display.

Setup Post

Click Appearance Layout Manager Single Post. A Single post displays a detail post from

categories. You can change layout of the single pages by Select the layout. Next, you need to select

sidebars into the Widget Areas to display.

Set up Search

Click Appearance Layout Manager Search. Search page shows search results. Setup Blog page

layout for Search page on the site.

Set up Error 404 Page

Click Appearance Layout Manager Error 404. 404 page is displayed when a requested URL is

not found on the site. Setup Error 404 page layout for Error 404 page on the site.

Set up Product Archive

Click Appearance Layout Manager Product Archive. Setup Product archive page layout for

Product archive page on the site.

Set up Product Single

Click Appearance Layout Manager Product Single. Setup Single Product page layout for Single

Product page on the site.

Page 29: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

29

4. Backup

When you want to remove completely the customizing and configuration to start over without customizing each

option, Backup allows you to return to the initial state of the theme. Note: this feature only allows the theme to

return the default in theme options, layout manager, and sidebar manager.

To implement the backup Appearance Theme Options Backup tab

Restore Default Settings

Select one of the following options:

- All Setting: Come back the default for 2 tabs: Sidebar Manager, Layout Manager

- Sidebars & Layouts: Come back the default for 2 tabs: Sidebar Manager and Layout manager

Click Restore Defaults to finish the backup

Page 30: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

30

Import/Export Setting

Besides Restore function, you also can import/export setting; you can export and import settings if your host

has problem forcing to reinstall the website.

- Export Setting: Kopa Framework will create a file with .json format to backup all configurations of theme

options includes Layout manager, Sidebar manager, General settings. This file can be used to restore your

settings if someday your web has problem forcing to reinstall, or you can easily setup another website with

the same settings.

Go to Appearance Theme Options Backup Tab Import/ Export tab to perform the

backup, you can select one of following options:

All Setting (This will contain all of the option listed below): It will make the backup for all setting (contain

Theme Option, Sidebars & Layout).

Sidebars & Layouts: It will make the backup for 2 tabs: Sidebar Manager & Layout manager

Click Download Export File button to export .json file

- Import Setting: If you have settings in a backup file on your computer, the Kopa Framework can import

those to this site.

Page 31: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

31

E. Custom Widget

WordPress Widgets add content and features to your Sidebars. Here we give you some examples of the default

widgets that come preloaded with a clean installation of WordPress, such as post categories, tag clouds,

navigation, search, etc. Beside these default widgets, a lot of other widgets are created by our developers to

display content on the website. Available Widgets lists all the current widgets that are installed with your copy

of theme. To use a widget, simply drag and drop it to the Sidebar and refresh the appropriate page to display its

content.

1. Kopa Widget Dynamic sidebar

Display dynamic sidebar with custom layouts. You can control many sidebars, widgets with Kopa Widget

Dynamic Sidebar. Drag and drop Kopa Widget Dynamic sidebar into the sidebar you want to display. Enter the

title or not, after adding some of new the desired sidebar, select cols per row, then you can select added the

desired sidebar for selected cols per row on Col. You can set overlay background image, color, opacity for

Parallax Effect. In Wrapper, you can customize margin top, bottom and set background color. In “Widget”,

enter values according to pixel for margin top, bottom then click Save.

Page 32: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

32

Page 33: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

33

2. Kopa Event

Display event list. Just drag a widget to the desired sidebar then enter the title, the number of events, select

tags. Check on Widget Title, select the style and the icon for the title. You can also select Widget Effect to

create effect and select displaying time for widgets, then click Save.

Page 34: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

34

3. Kopa Event Timeline

Display event lists with timeline layout and Load more Button. Just drag a widget to the sidebar you want

then enter the title, the number of event, select tags. Check Widget Title, select the style for title (in demo,

select style: Title with sub title) and you can select icon for the title. You can also select Widget Effect to

create effect and select displaying time for widgets, then click Save.

Page 35: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

35

Page 36: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

36

With events created in Using Plugin on Divine Theme, The image will show Event Time line as About Page

as bellow:

4. Kopa Portfolios

Display list of Portfolios with filter effect. Just drag a widget to the desired sidebar then enter the title, the

number of portfolio. Check on Widget Title, select the style for title (in the demo, select style: Title with sub

title) and you can select icon for the title. You can also select Widget Effect to create effect and select

displaying time for widgets, then click Save.

Page 37: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

37

Page 38: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

38

With Portfolios created in Using Plugin on Divine Theme, they will be displayed as Home Style 1 Page as

below:

5. Kopa Portfolios Filter by Author

Display list of Portfolios with filter effect by Author. Just drag a widget to the desired sidebar then enter the

title, the number of portfolio, choose Author (or User). Check on Widget Title, select style for title (in

thedemo, select style: Title with bottom border (3px)) and select icon for the title. You can also select Widget

Effect to create effect and select displaying time for widgets, then click Save.

Page 39: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

39

Page 40: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

40

With Portfolios created in Using Plugin on Divine Theme, The image shows Portfolio By Author as Home

Style 2 Page as below:

6. Kopa Post – Masonry

Display post list with masonry effect. Just drag a widget to the desired sidebar then enter the title, check on

checkbox Is hide readmore or not. Select category, tags, post format or combine them, select timestamps ago.

Check on Widget Title, select styles for title (in demo, select style: Title with position: absolute), then you can

customize margin Top, bottom, Left, Right and icon for the title. You can also select Widget Effect to create

effect and select displaying time for widgets, then click Save.

Page 41: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

41

Page 42: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

42

With setting up effects in Parallax Effect (such as: Overlay background image, Overlay background color,

Overlay opacity) of Widget Kopa Dynamic Sidebar, the image displays Kopa Post – Masonry as below

Home Style 1 Page:

7. Kopa Post – Horizontal

Display post list with medium thumbnail by horizontal layout. Just drag a widget to the sidebar you want then

enter the title, check on checkbox Is hide readmore, Is hide created date or not. Select category, tags, post

format or combine them, select timestamp ago. Check on Widget Title, select styles for title ()in demo, select

style: Default ‘H3 size 1′) and you can select icon for the title. You can also select Widget Effect to create

effect and select displaying time for widgets, then click Save.

Page 43: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

43

Page 44: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

44

Kopa Post – Horizontal will be displayed as on Home Style 2 Page as below:

8. Kopa Post – Small Thumb

Display post list with small thumbnail. Just drag a widget to the sidebar you want then enter the title, check on

checkbox Is hide created date or not. Select category, tags, post format or combine them, select timestamp ago.

You can Check on checkboxWidget Title and Widget Effect.

Page 45: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

45

Page 46: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

46

The following image shows Kopa Post – Small Thumb:

9. Kopa Section

Display a section as placeholder for other the desired sidebar. Just drag a widget to the desired sidebar then

enter the title, after add new a sidebar, you can select this sidebar on Select a sidebar, choose background color

for added sidebar then click Save. Next, you drag widgets and drop into sidebar created.

Page 47: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

47

10. Kopa Services

Display list of Services. Just drag a widget to the sidebar you want then enter the title, the number of services,

Choose tags. You can check on checkbox Widget Title, Widget Effect to customize them.

With services created in Using Plugin on Divine Theme, the image displays Services like in Home Style 3

Page bellow:

Page 48: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

48

11. Kopa Services B

Display list of Services with big icon. Just drag a widget to the desired sidebar then enter the title, the number

of services, Choose tags. You can check on checkbox Widget Title, Widget Effect to customize them.

Page 49: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

49

With services created in Using Plugin on Divine Theme, the image displays Services B like in the Home

Style 1 Page bellow:

12. Kopa Slider

Display simple slider with a title per slide. Just drag a widget to the sidebar you want then enter the number of

slide and choose tags and Save.

Page 50: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

50

With Sliders created in Using Plugin on Divine Theme, the image displays Slider like in the following

Home Style 2 Page:

13. Kopa Slider B

Display simple slider with a title and summary per slide. Just drag a widget to the desired sidebar then enter

the number of slider and choose tags and Save.

Page 51: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

51

With Sliders created in Using Plugin on Divine Theme, Sliders will be displayed like in the below Home

Style 1 Page:

14. Kopa Slider without Title

Display simple slider without title. Just drag a widget to the desired sidebar then enter title or not, the number

of slider and choose tags. You can check on checkbox Widget Title, Widget Effect and customize them.

Page 52: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

52

Page 53: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

53

With Sliders created in Using Plugin on Divine Theme, Sliders will be displayed as in the below About

Page:

Page 54: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

54

15. Kopa Staff

Display list of staff filter by author. Just drag a widget to the desired sidebar then enter title, the number of

Staffs. Check on checkbox of Widget Title then select Style (Using style: Title with sub title like Demo) and

insert icon for title. You can check on checkbox Widget Effect and customize it.

Page 55: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

55

With Staffs created in Using Plugin on Divine Theme, Staffs will be shown like in the below About Page:

Page 56: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

56

16. Kopa Tagline

Display a tagline with caption, description and button. Drag a widget to the desired sidebar then enter caption,

description, Button Text and Link URL of button then click Save.

The Tagline will be shown as the image below.

Page 57: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

57

17. Kopa Testimonials

Display list of testimonial. Drag a widget to the desired sidebar then enter title, the number of testimonials.

Check on checkbox of Widget Title then you can choose style and icon for title of widget.

Page 58: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

58

18. Kopa Testimonials B

Display list of testimonial by carousel widget. Drag a widget to the desired sidebar then enter title, the

number of testimonials. You can check on Widget Title, Widget Effect and customize them.

The image will display Testimonials like in the following Home Style 1 Page:

Page 59: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

59

19. Kopa Twitter:

It displays list tweets from twitter.com. Drag and drop this widget into the sidebar you want to display.

Enter the title, Twitter Username, API key, API secret, Access Token, Access Token secret and choose the

number of tweets. Check on checkbox Is use carousel effect if you want to display twitter by carousel

effect and enter the minimum for the number of twitter by displaying carousel effect is 3. Check on

checkbox Widget Title with style: Title with background color like the Demo then select icon for title.

It displays same as here:

Page 60: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

60

If you check on checkbox Is use carousel effect, the images will display same as below:

Note: Create Generate API Key, API Token, Access Key for Twitter OAuth

Login site https://apps.twitter.com/

To make things straight, you have to create a Twitter application to generate Twitter API Keys, Access

Token and secret keys and so on.

Creating a Twitter Application

Page 61: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

61

To use Twitter counter widget and other Twitter related widgets, you need OAuth access keys. To get

Twitter Access keys, you need to create Twitter Application which is mandatory to access Twitter.

– Go to https://dev.twitter.com/apps/new and log in, if necessary

Page 62: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

62

– Enter your Application Name, Description and your website address. You can leave the callback URL

bpty.

– Accept the TOS, and solve the CAPTCHA.

– Submit the form by clicking the Create your Twitter Application

– Copy the consumer key (API key) and consumer secret from the screen into your application

Create Your Access Token for Oauth

After creating your Twitter Application, you have to give the access to your Twitter Account to use this

Application. To do this, click the Create my Access Token.

Get the API Key, API Secret, Access token, Access Token Secret

Page 63: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

63

In order to access the Twitter, that is to get recent tweets and twitter followers count, you need the four

keys such like API Key, API Secret, Access token, Access Token Secret.

Page 64: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

64

20. Kopa Video

Display a video with thumbnail and summary. Drag a widget to the desired sidebar then enter title, select

a video on list available videos, Check on checkbox Widget Title with style: Title with background

color like Demo then select icon for title.

Page 65: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

65

21. Kopa Text

Display Arbitrary text, HTML or shortcodes. Drag and drop Kopa Text widget into the sidebar where you want

to display. Enter the title and arbitrary text, HTML or shortcodes into the content.

Page 66: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

66

F. Custom Shortcode Generator

It would be imposible to remember the syntax of every shortcodes available options associated with it. Our

shorcodes generator is an easy way for you to place a shortcode in theme to display the content. Within

the "Page" or "Post", you can see the Visual Shortcode. Just click on the shortcode you need then it will be

added to the content

Shortcodes available with this theme

This theme comes with following shortcodes to display the content:

1. Column shortcode (Grid icon): 1/1, 1/2-1/2, 1/3-1/3-1/3, 1/3-2/3, 1/4-1/2-1/4, 1/4-1/4-1/4-1/4,

1/4-3/4, 1/6-4/6-1/6, 1/6-1/6-1/6-1/2, 1/6-1/6-1/6-1/6-1/6-1/6, 2/3-1/3, 5/6-1/6.

2. Container: Include options: Horizontal Tabs, Vertical Tabs, Accordion, and Toggle.

Horizontal Tabs: Click Container, select Horizental Tabs, you will see like below:

[tabs cllikes="kopa-tab-widget"]

[tab title="Tab title"]Tab content[/tab]

Page 67: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

67

[tab title="Tab title"]Tab content[/tab]

[tab title="Tab title"]Tab content[/tab]

[/tab]

Enter Tab title and Tab content for tab, the image will illustrate for above shortcode:

Vertical Tabs:

Similar to Horizontal tabs, the following image shows Vertical tabs:

Accordion: Click Container, select Accordion, add title and content for Accordion:

[accordions]

[accordion title="Accordion title"]Accordion content[/accordion]

[accordion title="Accordion title"]Accordion content[/accordion]

[accordion title="Accordion title"]Accordion content[/accordion]

[/accordions]

It is illustrated with the images below:

Page 68: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

68

Similar to Accordion, Add shortcode for Toggle, Toggle will display like below:

3. Video Includes Vimeo và Youtube

Vimeo shortcode: Click on Video then choose Vimeo symbol, display the code below. You just have to

replace default ID by your vimeo ID

[vimeo id="YOUR_ID"]

Youtube shortcode: Click on Video then choose youtube symbol, display the code below. You just

have to replace default ID by your youtube ID

[youtube id="YOUR_ID"]

Page 69: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

69

4. Dropcap Includes styles: Square, circle and Solid

Select style and add content to your dropcap in code below:

[dropcap cllikes="kopa-dropcap dc1"][/dropcap]

The following image will illustrate for above shortcode with 3 styles:

5. Alert box shortcode: Click on Alert symbol, select options (Warning, Success, Danger, Info), it

displays code below:

[alert cllikes="kopa-alert alert-info alert-dismissable"][/alert]

Enter content for style of alert, it is illustrated by the image below:

6. Block Quote: Click blockquote symbol, there are 2 options: Default and Without border. Enter author

name and content for Blockquote in code below:

[blockquote cllikes="kopa-blockquote" title="The author name"][/blockquote]

The following image will illustrate for above shortcode with 2 options:

Page 70: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

70

7. Button shortcodes: Click on Button symbol, displaying 3 styles (style 1, style 2, style 3), in each style,

there are some options (small, medium, large), it displays code like below:

[button cllikes="kopa-button small-button color-button" link="#" target=""][/button]

Enter link, target, content for button, the following image will illustrate for above shortcode:

8. Pricing table( Options: Default and Special), the code below:

[pricing_table cllikes=""]

[pt_caption]YOUR_CAPTION[/pt_caption]

[pt_price prefix="YOUR_PRICE_PREFIX"]YOUR_PRICE[/pt_price]

[pt_featured]YOUR_FEATURED_1[/pt_featured]

[pt_featured]YOUR_FEATURED_2[/pt_featured]

[pt_featured]YOUR_FEATURED_3[/pt_featured]

[pt_featured]YOUR_FEATURED_4[/pt_featured]

[pt_button url="YOUR_BUTTON_URL" target=""]YOUR_BUTTON_TEXT[/pt_button]

[/pricing_table]

Page 71: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

71

When you select option Special for pricing table, value in your cllikes is cllikes="active"

Enter contents in pricing table such like the caption, price, features, link Button or Button text. The

following image will illustrate for above shortcode with 2 Default and Special options:

9. List: Click on List symbol, it display code blow:

[list]

[item cllikes="fa fa-check"]YOUR CONTENT[/item]

[item cllikes="fa fa-check"]YOUR CONTENT[/item]

[item cllikes="fa fa-check"]YOUR CONTENT[/item]

[item cllikes="fa fa-check"]YOUR CONTENT[/item]

[item cllikes="fa fa-check"]YOUR CONTENT[/item]

[/list]

Change icon List and text List. The image will display here:

Page 72: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

72

You can checkout available icons here

10. Contact: Click on List symbol, it display code blow: [contact]

It will be display on front-end with content created in Appearance Theme Option

Contact part.

Page 73: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

73

G. Create Categories - Posts - Toolkit plugin - Custom Menu

As you can imagine, most of the site content will be posts and images associated with such posts. Categories

allow for a broad grouping of such post topics. Now we will start creating categories and publish a few posts.

1. Create Category

- Go to Posts Categories

- Enter new Category name.

- Scroll down and click on "Add Category". A newly created category will appear. You can then repeat the

steps to create more categories.

Page 74: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

74

Page 75: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

75

With our Kopatheme Framework, you can customize the layout for each category. Follow the procedures listed

below:

1. Click on Category name or Edit hyperlink to edit category

2. Scroll down to the bottom of the page, like shown in the image. Check the check box to enable

customization for this category. If this is unchecked, this category will use the default settings for all

categories that has been set in the Layout Manager.

Page 76: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

76

3. Now, you can select layout and sidebar for this category

Page 77: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

77

2. Create posts

Posts are usually stored under Categories and/or Tags so you can keep related topics together. Now, we will

create some posts for our category.

Go to Posts Add New then carry out following steps

1. Check to the Screen Option to showing the components used to configure

2. Enter title post

3. Enter post content, you can use shortcode to create post content

4. Check 1 format for post such as: standard, video, gallery, audio, quote in meta box

5. You can chose single category or multi categories which have been created before or create a new

category for post by clicking on hyperlink Add new category

6. You can assign single tag or multi tags existed before or create new tags by entering a tag and click Add

button to create

7. Scroll down and click on the "Set featured image" link on right-bottom side of your page. A small

box will appear. Click on "Upload File". Browse and select the file from your computer and upload.

Finally, set it like "Featured Image" to complete the process.

8. You can create rating option for your post, it will be displayed on the front-end by progress bar at the

overview position of single post

9. This part help you custom featured image using shortcode, on the blog page with formats of video

(vimeo, youtube), gallery, audio (soundcloud), quote insteal of displaying featured image upload in part

7, it will use featured image using shortcode which are installed in this part How to make your

gallery, video, audio, and other post types pop by using post formats.

10. Discussion: check in checkbox, if you want to be enable function comment in single post

11. Custom layout: you can custom layout for each post by click on checkbox to configure the layout for the

post. If you do not custom in this step, single post will take the default configuration layout which are

installed in Layout Manager general

Finally, likesign the post to an appropriate category and click "Publish" button to make the post live.

Page 78: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

78

With our very flexible Kopatheme Framework, you can customize the layout for each individual post. The

procedure is like same as to customize layout for category above

Page 79: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

79

1. Check to show options 2. Enter title post 3. Enter content, shortcode to create post

4. Check on box if you want to use custom setting

5. Enter information to display on the breadcrumb

6. Upload image ID and display custom content

7. Set featured images for post 8. Create new tags or assign the existing tags

9. Create new categories or assign the existing categories

10. Choose a post format 11. Click on Publish button

Page 80: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

80

How to make your gallery, video, audio, and other post types pop by using post formats.

That’s the same blog with the same content as default post format— the only difference is post formats!

To use post formats:

1. Click the New Post button.

2. Choose Gallery, Audio, or Video.

3. Add some content and publish! Depending on your theme, you’ll see some stylistic differences between

this post and your posts with the default Post format.

4. At Featured content, you can config list of gallery ID on library media or your computer (same

as 1572;1573;1574 ) or add Vimeo ID ( [vimeo id="YOUR_ID"] ) or Youtube ( [youtube

id="YOUR_ID"] ) or custom HTML to create posts with post format into text area.

If you do not see the Featured content module, check that you have it enabled in your Screen

Options

The following image will illustrate for described above.

Page 81: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

81

Page 82: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

82

3. Event Plugin

To create a New Event, follow the steps:

Go to Dashboard Event Add New

1. Enter Event's name

2. Enter Event's content

3. Enter position of event

4. Enter start-end of date, time

5. Add new tags or assign exited tags

6. Click Update button to finish

You can see the following illustration:

Page 83: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

83

You also see events created in "All Event"

4. Portfolios plugin

To create Portfolio plugin, do the following steps:

Go to Dashboard Portfolios Add New

1. Enter portfolio's title

2. Enter portfolio's content

3. At Breadcrumb tab: you can enter title, description and upload image to display in your breadcrumb

Page 84: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

84

4. At Featured content: you can upload gallery ID, enter custom content as video, YouTube, vimeo

shortcode or custom HTML…

5. Create new tag or assign existed tags for portfolio

6. Set featured image for portfolio

7. Click Update button to finish

You can see the following illustration:

You can see all Portfolios you have created in" All Portfolios".

Page 85: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

85

5. Slides plugin

To create Slider plugin, do the following steps:

Go to Dashboard Slider Add New

1. Enter slider's name

2. At option part: you can enter summary, content, link URL

3. Add new slides or assign existed slides

4. Upload featured image of slider

5. Click Update button to finish

It will be shown as the following image.

You can see all Slides created in All Slides

Page 86: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

86

6. Service plugin

To create Service plugin, follow these steps:

Go to Dashboard Services Add New

1. Enter Service's name

2. Enter Service's description, service's link (no required)

3. Select an icon awesome or upload your icon

4. Set featured image for Services

5. Click Update button to finish

You can see the following illustration

After clicking to "select icon for service", the list of icon picker will be displayed on the screen, select the icon

you want.

Page 87: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

87

You can see all services in All Service

Page 88: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

88

7. Staffs plugin

To create Staff plugin, do the following steps:

Go to Dashboard Staffs Add New

1. Enter staff's name

2. Enter staff's description

3. Enter position staff

4. Enter link staff's socials

5. Upload featured image of staff

6. Click Update button to finish

You can see the following illustration

You can see all staffs created in All Staff

Page 89: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

89

8. Testimonials plugin

To create Testimonials plugin, do the following steps:

Go to Dashboard Testimonials Add New

1. Enter testimonial's name

2. At Option part: you can enter job, link URL, message if you need

3. Add new testimonials or assign existed testimonials

4. Upload featured image of testimonials

5. Click Update button to finish

You can see the following illustration.

All Testimonials created are in Testimonials

Page 90: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

90

9. Create Custom Menu

To create a custom menu, go to Appearance Menus in your dashboard.

Creating a Menu

1. To create a custom navigation menu, in "Edit Menus" tab, click Create a New Menu. Then enter

menu name, click "Create Menu" button.

2. Adding Pages and Categories to Your Menu: Adding pages or Categories to your menu is as simple as

checking the proper boxes for the pages you want and then clicking Add to Menu.

3. Creating a custom menu allows you to do the following things:

- Change the order of pages in your menu, or delete them.

- Create nested sub-menus of links, also referred to like "drop-down" menus

- Create links to category pages allowing you to collect together posts blikeed on that category

Page 91: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

91

- Add custom links to other sites

4. Note: When we click on any menu, we can customize this menu

- Enter the Navigation Label to display in the menu.

- Enter the title attribute which display when you hover on the Label.

Manage Menus Location

This theme supports 3 menus location (Top Menu, Main Menu and Footer Menu). In "Manage Locations" tab,

you have to select menus to display for each location.

Be sure to click Save Menu each time you make changes to your custom menu.

Page 92: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

92

H. Create pages

1. Creating Home Page 1

To create Homepage 1, you can follow the steps as below:

Go to Dashboard Pages Add New

1. Enter page's name

2. Scroll down to Page Builder section, chose layout Front Page 1

3. Configure for Rows

4. Select the widgets using for Areas

5. Click Customize button to customize CSS for page

6. Click Publish button to save

Configure parameters for Rows, Areas of Home page 1

Row 1

+/ Customize:

Outer: No

Container: Select layout: Boxes

Parallax: No

Inner: No

Page 93: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

93

+/ Area 1:

Click Add widget button to select Slider (with excerpt) widget then configure parameters for it, following

part Slider (with excerpt)

With background use in this widget, Go to Appearance Theme Options Header to upload

background image for Header Parallax.

Row 2

+/ Customize:

Outer: No

Container: Select layout: Boxes

Parallax: No

Inner: No

+/ Area 2.1

Click Add widget button to select Services (icon center) with type icon center then configure parameters,

following part Services

Page 94: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

94

+/ Area 2.2

Click Add widget button to select Services (icon center) with type icon center then configure parameters,

following part Services

+/ Area 2.3

Click Add widget button to select Services (icon center) with type icon center then configure parameters,

following part Services

+/ Area 2.4

Click Add widget button to select Services (icon center) with type icon center then configure parameters,

following part Services

Row 3

+/ Customize: configure parameters as follows:

Outer: No

Container: select layout boxes

Parallax: Yes and upload background image, select color for overlay color and choose overlay opacity

Inner: No

+/ Area 3

Add Text widget, you can enter title, content for text, use widget effect, enter padding Text

Row 4

+/ Customize: configure parameters as follows:

Outer: No

Container: select layout boxes

Parallax: No

Page 95: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

95

Inner: Yes with margin top: -110px (same as demo)

+/ Area 4

+/ Area 4.1

Click Add widget button to select Event List then configure parameters, following part Event List

+/ Area 4.2

Click Add widget button to select Featured Video then configure parameters, following part Featured Video

+/ Area 4.3

Click Add widget button to select Latest Tweets then configure parameters, following part Latest Tweet

Row 5

+/ Customize: configure parameters as follows

Outer: No

Container: select layout boxes

Parallax: Yes and upload background image, select color for overlay color and choose overlay opacity

Inner: No

+/ Area 5

Add Articles Masonry widget then configure parameters for it, following part Articles Masonry

Row 6

+/ Customize: configure the following parameters:

Outer: Yes

Container: select layout wide

Parallax: No

Page 96: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

96

Inner: No

+/ Area 6

Add Portfolio (filter bar) widget then configure parameters for it, following part Portfolio (filter bar)

Row 7

+/ Customize: configure parameters as follows

Outer: Yes

Container: select layout boxes

Parallax: No

Inner: No

+/ Area 7

Add Testimonials carousel widget then configure parameters; following part Testimonials carousel.

2. Create Home page 2

To create Home page 2, you can follow steps as below:

Go to Dashboard Pages Add New

1. Enter page's name

2. Scroll down to Page Builder item, chose layout Front Page 2

3. Configure parameters for Rows, Areas

4. Click Publish button to save.

Page 97: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

97

Configure parameters for Rows, Areas Home page 2

Row 1

+/ Customize: configure parameters as follows

Outer: No

Container: layout boxes

Parallax: No

Inner: No

+/ Area 1

Add Slider (with only title) widget then configure parameters; following part Slider

Row 2

+/ Customize: configure parameters as follows

Outer: No

Container: layout boxes

Parallax: No

Inner: No

+/ Area 2

Add Articles List (thumbnail left) widget then configure parameters for it, following part Articles List

(thumbnail left)

Row 3

+/ Customize: configure parameters as follows

Outer: No

Page 98: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

98

Container: layout boxes

Parallax: No

Inner: No

+/ Area 3.1.1: Add Tagline (arrow) widget then configure parameters for it, following part Tagline arrow

+/ Area 3.1.2: Add Services (icon left) widget then configure parameters for it, following part Services (icon

left)

+/ Area 3.1.3: Add Services (icon left) widget then configure parameters for it, following part Services (icon

left)

+/ Area 3.1.4: Add Services (icon left) widget then configure parameters for it, following part Services (icon

left)

+/ Area 3.2: Add Testimonials (with border) widget then configure parameters for it, following

part Testimonials (with border)

Row 4 You can add widget slider or other widgets if you want

Row 5

+/ Customize: configure parameters as follows

Outer: No

Container: layout boxes

Parallax: No

Inner: No

+/ Area 5.1

Add Author information widget then configure parameters for it, following part Author information

+/ Area 5.2

Page 99: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

99

Add Portfolios (of an author) widget then configure parameters for it, following part Portfolios (of an

author)

Row 6 You can add widget slider or other widgets if you want

3. Create Home page 3

To create Home page 3, you can follow steps as below:

Go to Dashboard Pages Add New

1. Enter page's name

2. Scroll down to Page Builder item, chose layout Front Page 3( parallax header)

3. Configure parameters for Rows, Areas

4. Click Customize button to upload parallax background image for header

5. Click Publish button to save

Page 100: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

100

Page 101: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

101

Configure parameters for Rows, Areas Home page 3

Row 1

+/ Customize: configure parameters as follows

Outer: No

Container: Layout Boxes

Parallax: No

Inner: No

+/ Area 1

Page 102: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

102

Add Revolution Slider widget (this widget is created when you install and activate to use plugin

Revolution Slider for your website)

Widget is used in here, you only need chose a slide after that click Save button to save (Slider is installed

before in Dashboard Revolution Slider)

Or you can use Text widget and copy shortcode of revolution slider [rev_slider demo-slider] then Save.

Row 2

+/ Customize: configure parameters as follows

Outer: Yes

Container: Layout Boxes

Parallax: No

Inner: No

+/ Area 2

Add Tagline (square) widget then configure parameters for it, following the part Tagline (square)

Page 103: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

103

Row 3

+/ Customize: configure parameters as follows

Outer: No

Container: Layout Boxes

Parallax: No

Inner: No

+/ Area 3.1: Add Services (icon center) widget then configureparameters for it, following part Services

(icon center)

+/ Area 3.2: Add Services (icon center) widget then configureparameters for it, following part Services

(icon center)

+/ Area 3.3: Add Services (icon center) widget then configureparameters for it, following part Services

(icon center)

+/ Area 3.4: Add Services (icon center) widget then configureparameters for it, following part Services

(icon center)

Row 4

+/ Customize: configure parameters as follows

Outer: No

Container: layout boxes

Parallax: yes and upload background image, select color for overlay color and choose overlay opacity

Inner: No

+/ Area 4

Add Text widget enter text and configuration parameters for it, following part Text

Page 104: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

104

Row 5

+/ Customize: configure parameters as follows

Outer: No

Container: Layout Boxes

Parallax: No

Inner: Yes, you can customize margin, padding, CSS (margin top: -110px (same as demo))

+/ Area 5

+/ Area 5.1

Click Add widget button to select Kopa Event then configure parameters, following part Kopa Event

+/ Area 5.2

Click Add widget button to select Featured Video then configure parameters, following part Featured

Video

+/ Area 5.3

Click Add widget button to select Latest Tweets then configure parameters, following part Latest Tweet

Row 5

+/ Customize: configure parameters as follows

Outer: Yes

Container: select layout boxes

Parallax: Yes and upload background image, select color for overlay color and choose overlay opacity

Inner: No

+/ Area 5

Add Articles Masonry widget then configure parameters for it, following part Articles Masonry

Page 105: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

105

Row 6

+/ Customize: configure the following parameters:

Outer: Yes

Container: select layout wide

Parallax: No

Inner: No

+/ Area 6

Add Portfolio (filter bar) widget then configure parameters for it, following part Portfolio (filter bar)

Row 7

+/ Customize: configure parameters as follows

Outer: Yes

Container: select layout boxes

Parallax: No

Inner: No

+/ Area 7

Add Testimonials carousel widget then configure parameters; following part Testimonials carousel

Page 106: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

106

4. Creating About page

To create About page, you can follow the steps as follows:

Go to Dashboard Pages Add New

1. Enter page's name

2. Scroll down to part Page Builder, chose layout About page

3. Configure parameters for Rows, Areas

4. Click Publish button or Save button to save

Page 107: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

107

Page 108: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

108

Configure parameters for Rows, Areas

Row 1 You can add widget slider or other widgets if you want.

Row 2

+/ Customize: Configure parameters as follows

Outer: Yes, you can set background color, margin, padding for row

Container: layout Boxes

Parallax: No

Inner: No

+/ Area 2-1

Add Image (carousel) widget then configure parameters for it, following part Image carousel

+/ Area 2-2

Add Text widget then enter your text in text area then configure parameters for it, following the Text part.

Row 3

+/ Customize: configure parameters as follows:

Outer: No

Container: layout Boxes

Parallax: No

Inner: No

+/ Area 3

Add Staffs (Carousel) widget and configuration parameters for it, following part Staff Carousel

Page 109: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

109

Row 4

+/ Customize: configure parameters as follows

Outer: Yes, you can set background color, custom margin, padding, CSS for row

Container: layout Boxes

Parallax: No

Inner: No

+/ Area 4-1

Add Text widget enter your text in text area then configure parameters for it, following part Text

+/ Area 4-2

Add Latest Tweets (carousel) widget then configure parameters for it, following part Latest Tweet

Carousel

Row 5

+/ Customize: configure parameters as follows

Outer: Yes,

Container: layout Boxes

Parallax: No

Inner: No

+/ Area 5

Add Events Timeline widget then configure parameters for it, following part Kopa Event Timeline

Page 110: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

110

5. Creating Single Page - Single Portfolio - Single Product

1. Go to Appearance Layout Manager Post: Select the layout for your page: Single Post. Finally,

click Save Options

Page 111: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

111

Page 112: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

112

2. Go to Appearance Widget: Dragging and dropping widget in sidebars the same as follows

Right sidebar

Drag Kopa Post- Small Thumb into Right Sidebar.

Drag Archive into Right Sidebar.

Drag Tag Cloud into Right Sidebar.

Footer 1

Drag and drop Kopa Contact Information into Footer 1

Footer 2

Drag and drop Custom Menu 1 into Footer 2

Footer 3

Drag and drop Custom Menu 2 into Footer 3

Footer 4

Drag and drop Custom Menu 3 into Footer 4

Footer 5

Drag and drop Custom Menu 4 into Footer 5

You can see How to use each widget above. Finally, preview your post in frontend.

Page 113: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

113

I. How to setup the demo site

In order to set up the site like our demo, you can follow steps below:

- Step 1: Install Divine theme: following part A - Theme Installation

- Step 2: Install Kopa Page Builder plugin, Divine Toolkit plugin , WooCommerce plugin (if you

want to create online shop), Revolution Slider plugin

- Step 3: Import demo data: following part C - Demo Content

- Step 4: Import demo slider for Revolution Slider

- Go to Dashboard Revolution Slider: click Import Slider button to import our demo slider

- Step 4: Go to Appearance Menus: choose location for menus or create new menus: following part G -

Create Custom Menu

- Step 5: Choose a page to become front page and posts page. Go to Settings Reading. Select the page

which you intend to show as your front page and posts page from Front page display.

Page 114: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

114

- Step 6: Import demo backup all setting file.

We offer you a demo backup all setting file with name kopatheme.net -demo-trendmag-backup-all-

settings.json. When you import this file, it will automatically import all setting includes Layout manager,

Sidebar manager, General settings like we set up in demo site. You can following instruction below

Step 6.1: Go to Appearance Theme Options Backup Tab Import/Export

Page 115: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

115

Step 6.2: Click the Browse button and locate the kopatheme.net -demo-trendmag-backup-all-

settings.json file that is inside the folder and double click the file to select it and then click

the Import button.

Page 116: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

116

- Step 7: Import demo widgets file

We offer you a demo widget file with name kopatheme.net-demo-trendmag-widgets.wie. When you

import this file, it will automatically drag and drop all widgets to default sidebar like we use in demo site.

To import this file .wie you'd like install Widget Importer & Exporter plugin. You have to do

following

Step 7.1: Install and active Widget Importer & Exporter plugin

Go to Dashboard Plugin Add New Search by "Widget Importer & Exporter" keyword

Click "Install Now" to install plugin

Click "Activate Plugin"

Page 117: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

117

Step 7.2: Go to Tools Widget Importer & Exporter: browse demo widget file to import

After successfully import, all widgets be dragged into default sidebar and your task is to configure

parameters such as title, category, tag, title, excerpt length, number of post, etc. in the widgets because your

element can unlike ours.

Note: It is possible that when importing the demo widgets will be encountered some errors as the site does

not display data in some areas, you can go to Appearance Widgets to choose the categories / tags for

the widgets, then click the Save button to save.

Page 118: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

118

J. Video Tutorial

Setup Home 3 Revolution - Divine theme

K. Translation

If you are familiar with WordPress and the many plugins and Themes available for it, you've probably come

across some strangely named files like .mo, .po, and .pot. This discussion is aimed at explaining how to take a

.po file that is included with this Theme and translate it to your native language.

SUMMARIZED INSTRUCTIONS:

1. Download and install the translation poEdit program.

2. Open the Divine/languages/en_US.po file with Poedit. Translate the file to your languages with

Poedit. For more information, click here.

3. Define your language inside wordpress/wp-config.php file. Open wp-config.php file in any text editor

and look for the following code:

define ('WPLANG', '');

Enter a parameter for WPLANG . This is generally in a format like language_country . For

example, en_US , or de_DE . So, this line will change to:

define ('WPLANG', 'de_DE');

For more information. Click here.

Page 119: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

119

L. Updating The Theme

Once a new update becomes available for the theme, you will notice an update notification in the admin panel.

To apply the update the theme needs to be downloaded once again and then reinstalled following the steps 1 - 8

mentioned in section above.

M. Sources and Credits

I've used the following images, icons or other files as listed.

jquery-1.10.2.min.js

Bootstrap

Modernizr jQuery plugin

form validator

jquery.form.js

Magic layout jQuery plugin

Main menu jQuery plugin

Mobile menu jQuery plugin

Google map jQuery plugin

OwlCarousel jQuery plugin

Flex slider jQuery plugin

Fitvid jQuery plugin

Nicescroll jQuery plugin

Parallax jQuery plugin

Wow jQuery plugin

Colorbox jQuery plugin

Flickr jQuery plugin

pictures

Page 120: “DIVINE – RESPONSIVE WORDPRESS THEME DOCUMENTATION”

120

******************************************************************************************

Thank you so much for purchasing this theme. If you have any question relating to themes please don't hesitate

to ask your question at: kopatheme.com/forum

KOPATHEME

Email: [email protected]

Designed and developed by: kopatheme.com