documentation” - · pdf fileand custom layouts feature to your wordpress site....

1

“UPSIDE MEDICAL – RESPONSIVE WORDPRESS THEME

DOCUMENTATION”

Created: Sep 09/ 2015

Version: 1.0.+

WordPress Theme Developed by Kopatheme

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.

2

Table of Contents

A. Theme Installation…………………………………………………………………………………7

B. Using Plugins in Upside theme…………………………………………………………..……11

1. Kopa Framework plugin………………………………………………………………………….12

2. WPBakery Visual Composer plugin………………………………………………………….…12

3. Contact Form 7 plugin………………………………………………………………………....…22

4. Menu Icons……………………………………………………………………………………...….24

5. bbPress……………………………………………………………………………………….……...25

6. Envato WordPress Toolkit plugin………………………………………………………….……25

7. WooCommerce plugin……………………………………………………….……………….…..25

C. Demo Content…………………………………………………………………..………….……..…28

D. Theme Options Customization…………………………………………………………………30

1. Theme Options………………………………………………………………………………..……30

2. Sidebar Manager……………………………………………………………………………..……30

3. Layout Manager……………………………………………………………………………………32

1. Setup Home Page (Blog page) ………………………………………………………..……33

2. Setup Front Page………………………………………………………………………..……34

3. Setup Page…………………………………………………………………………………..…34

4. Setup Post…………………………………………………………………………………..…35

5. Setup Search Page……………………………………………………………………………35

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

7. Set up Product Archive Pages………………………………………………………………35

8. Set up Single Product Pages……………………………………………………………..…35

3

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

10. Set up Single Portfolio Single…………………………………………………………...…36

11. Set up Single Member…………………………………………………………………….…36

12. Set up Forum Pages……………………………………………………………………….…36

13. Set up Topic Pages……………………………………………………………………...……36

4. Backup………………………………………………………………………………………………36

E. Theme Customizer…………………………………………………………………………………39

F. Custom Widgets………………………………………………………………………………….…51

1. (Upside) Advertisement…………………………………………………………………….……51

2. (Upside) Grid Events………………………………………………………………………..……52

3. (Upside) Info………………………………………………………………………………….……53

4. (Upside) Newsletter Feedburner……………………………………………………….………54

5. (Upside) Recent Comments………………………………………………………………..……55

6. (Upside) Recent Posts……………………………………………………………………….……56

7. (Upside) Social Links…………………………………………………………………………..…57

8. (Upside) Social Statistics…………………………………………………………………………59

9. (Upside) Tagline………………………………………………………………………………...…61

10. (Upside) Testimonial Carousel…………………………………………………………….……62

11. List Post With More Link…………………………………………………………………………63

12. List Post With Title………………………………………………………………………..…...…65

13. Slide One…………………………………………………………………………………………..…70

14. Featured Post……………………………………………………………………………………..…72

15. Featured Quote………………………………………………………………………………………73

4

16. List Posts With Title And Description……………………………………………….…………74

17. Featured Content…………………………………………………………………………..………77

18. Testimonial Grid………………………………………………………………………………..…79

19. Testimonial Carousel………………………………………………………………………..……80

20. Brand Grid…………………………………………………………………………………………..81

21. Brand Carousel………………………………………………………………………………..……82

22. Tagline……………………………………………………………………………………………….83

23. Open Time………………………………………………………………………………………..…84

24. Service Grid………………………………………………………………………………….……..85

25. Contact Form………………………………………………………………………………….……86

26. Member Carousel……………………………………………………………………………..……87

27. Member List………………………………………………………………………………………...87

28. Member Grid……………………………………………………………………………………….89

29. List Document…………………………………………………………………………………..….90

30. Demo Grid……………………………………………………………………………………………91

31. Portfolios Grid……………………………………………………………………………….………93

32. FAQ List………………………………………………………………………………………………95

33. Header………………………………………………………………………………………………..96

G. Custom Shortcode Generator……………………………………………………………………97

H. Create Categories - Posts - Toolkit plugin - Custom Menu……………………………114

1. Create Category…………………………………………………………………………………..…114

2. Create Posts………………………………………………………………………………………….118

3. Brands Post Type……………………………………………………………………………………119

5

4. Services Post Type…………………………………………………………………………………121

5. Testimonials Post Type……………………………………………………………………………122

6. Members Post Type……………………………………………………………………………..…123

7. Events Post Type……………………………………………………………………………………124

8. Document Post Type……………………………………………………………………………….127

9. Portfolios Post Type……………………………………………………………………………..…128

10. Slide Post Type………………………………………………………………………………………129

11. Forum Post Type……………………………………………………………………………………130

12. Topic Post Type……………………………………………………………………………………..131

13. Replies Post Type…………………………………………………………………………………..132

14. FAQs Post Type……………………………………………………………………………………..133

15. Create Custom Menu………………………………………………………………………………134

I. Create pages……………………………………………………………………………………………138

1. Create Home page 1……………………………………………………………………………..…138

2. Create Home page 2……………………………………………………………………………..…143

3. Create About Page………………………………………………………………………………….149

4. Create Contact page……………………………………………………………………………..…153

5. Create Document page………………………………………………………………………….…153

6. Create Portfolio Page 1………………………………………………………………………….…154

7. Create Portfolio Page 2…………………………………………………………………………….155

8. Create Portfolio Page 3…………………………………………………………………………….156

9. Create Doctor Page…………………………………………………………………………………157

10. Create Single Post……………………………………………………………………………….…158

6

11. Create FAQ page…………………………………………………………………………….……..159

J. How to setup the demo site………………………………………………………………...……161

K. Translation……………………………………………………………………………………….……166

L. Updating The Theme………………………………………………………………………….……167

M. Sources and Credits………………………………………………………………………..………168

7

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 Upside

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

install Upside theme:

- Step 1: Download the Upside theme files from your download page with the file "upside-1.0.0-

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

data, document, etc.

- Step 2: Unzip the file "upside-1.0.0-downloaded-package.zip".

Once the file has been unzipped you will notice a file named upside.zip. 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.

8

Click “Upload Theme”

9

- Step 5: Click Choose File to find the file Admag.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 there is a

message appearing on the panel that requests to install WPBakery Visual Composer, Kopa

Framework, Contact form 7, Upside toolkit, Upside toolkit plus, Envato WordPress

toolkit plugin and WooCommerce plugins to run this theme.

Upside theme also requires to install some plugins as follows:

Kopa Framework plugin: is an easy way to get theme options, sidebar manager, layout manager

and custom layouts feature to your WordPress site.

WPBakery Visual Composer plugin: Add columns/elements with a single click, then use your

mouse to drag elements around to re-arrange them.

10

Contact Form 7 plugin: Contact Form 7 can manage multiple contact forms, plus you can customize

the form and the mail contents flexibly with simple markup. The form supports Ajax-powered

submitting, CAPTCHA, Akismet spam filtering and so on.

Envato WordPress Toolkit plugin- WordPress toolkit for Envato Marketplace hosted items.

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

11

B. Using Plugins in Upside theme

With our Upside theme, you must install and activate Kopa Framework plugin, WPBakery

Visual Composer plugin to use the theme. Besides, you must install the Upside toolkit plugin,

Upside toolkit plus plugin to activate shortcodes, widgets..., Contact form 7 to create multi

contact forms and customize the theme. Moreover, Upside theme also supports WooCommerce

plugin to create an Ecommerce website.

From your Dashboard, there is a warning that requests to install Kopa Framework, WPBakery

Visual Composer, Envato WordPress Toolkit and WooCommerce.

- Step 1: Click "Begin installing plugin"

- Step 2: Click “Install”

12

1. Kopa Framework plugin

The Kopa Framework plugin is an easy way to get theme options, sidebar manager, layout manager

and custom layouts feature to your WordPress site. You must install this plugin to use the theme.

To install this plugin, click Appearance Install Plugin: hover in text Kopa Framework plugin

to see Install button, Click to install.

2. WPBakery Visual Composer plugin

WPBakery Visual Composer plugin allows you to create complex layouts in minutes without

touching a single line of code! Add columns/elements with single click, then use your mouse to drag

elements around to re-arrange them.

Create page using WPBakery Visual Composer

- Step 1: To create a new page, scroll down to Visual Composer where you can

customize Backend Editor and Frontend Editor including choosing your layout, adding elements,

textbox to use your page. If you do not see the Visual Composer module, check whether it is

enabled in your Screen Options.

13

- Step 2: To start creating new layouts, click “BACKEND EDITOR” button. You can also edit

layouts in front-end using the “FRONTEND EDITOR”. But please note that front-end editing

tool is still just a bit sloppy (though it improves constantly) and we still recommend using back-

end editor over it.

15

- Step 3: Add Elements for areas, their interface is built on the same principles as standard Visual

Composer shortcodes. Therefore if you’re familiar with Visual Composer, working with our

shortcodes will be a breeze for you!

Besides, you can use our own elements of Upside theme:

Note that you can use the search filed and filter to easily find required elements.

16

How to edit rows and columns

Very simple, just click the “pen” icon on corresponding row or column (see below image for details):

After clicking Edit this Column, which appears in Column Settings including:

- General tab: You can enter Extra class name (Style particular content element differently - add a

class name and refer to it in custom CSS).

17

- Design Options tab:

+> You can enter margin, border, padding (top, bottom, left, right) at CSS box;

+> Select color for border;

+> Select color for background and upload background image

18

- Responsive Options tab:

+> Width: you can select column width as 12 columns-1/1 or 1 column- 1/12...

+> Responsiveness: Adjust column for different screen sizes. Control width, offset and visibility

settings. You can select options (offset, width, hide/ show) for each devices mobile, tablet.

After clicking Edit this Row, which appears in Row Settings including:

- General tab:

19

+> Row stretch: Select stretching options (Default or Stretch row or stretch row and content or

Stretch row and content (no paddings) for row and content.

+> Full height row: if you select Yes row will be set to full height

+> Use video background: If checked, video will be used as row background.

+> Parallax: You can use the default None or add parallax type background (Simple or With Face) and

upload image from library media

+> Row ID: Enter Row ID

+> Extra class name: Style particular content element differently - add a class name and refer to it in

custom CSS.

20

- Design Options tab:

+> You can enter margin, border, padding (top, bottom, left, right) at CSS box;

+> Select color for border;

21

+> Select color for background and upload background image

- Upside Additions tab:

+> Overlay color: Select color for background color

+> Overlay color before: Select color for background color before.

22

3. Contact Form 7 plugin

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail

contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA,

Akismet spam filtering and so on.

- Step 1: Go to Dashboard Contact Contact Form to the default copy shortcode

23

- Step 2: Go to your page (Contact page), after adding Text widget in your page, then you paste

shortcode contact form in to content of text widget

It will be displayed in your contact page as follows:

24

Besides, you can add new contact form with many languages, fields (Generate tag) at Dashboard

Contact Add New

4. Menu Icons

This plugin gives you the ability to add icons to your menu items, similar to the look of the latest

dashboard menu.

Usage:

1. After the plugin is activated, go to Appearance Menus to edit your menus

2. Enable/Disable icon types in "Menu Icons Settings" meta box

3. Set default settings for current nav menu; these settings will be inherited by the newly added

menu items

4. Select icon by clicking on the "Select icon" link

5. Save the menu

25

5. bbPpress

BbPress is forum software with a twist from the creators of WordPress. It can be installed like any

other plugin of WordPress and it will add a fully functional forum, integrated with both frontend and

backend of WordPress. bbPress is focused on ease of integration, ease of use, web standards, and

speed. bbPress is lean, mean, and ready to take on any job you throw at it.

To install BbPress plugin, do the following steps:

- Step 1: Go to Dashboard Plugins: Install Plugin then click Add New

- Step 2: Search with bbPress key, the result will display a list of related plugins,

choose BbPress then click Install Now.

- Step 3: Wait 5s to download and click Install Plugin.

- Step 4: Click to Activate Plugin. Activate bbPress from your Plugins page. (You'll be greeted

with a Welcome page.)

Follow the below steps for a quick and free setup and you can create forums, topics, replies easily.

6. Envato WordPress Toolkit plugin

You can follow this guide to installing and using the plugin envato-WordPress-toolkit

7. 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 a list of related plugins,

choose WooCommerce - excelling eCommerce then click Install Now.

- Step 3: Wait about 5s to download and click Install Plugin WooCommerce.

- Step 4: Click to Activate Plugin.

https://github.com/envato/envato-wordpress-toolkit/

26

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 Upside 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.

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.

For further details please click here

Using shop page in Upside

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.

3. In Product Data, select Product type

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

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

5. Enter the Regular Price and Sale Price.

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

Check Disable frontend styles box

http://www.woothemes.com/woocommerce/

27

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 frontend.

28

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 demo content file, you will have pages such as index, about which we

installed on demo site .

To import this file, 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.

http://kopasoft.net/demo/yosaga

29

- Click the Browse 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.

30

D. Theme Options Customization

1. Theme Options

Choose Medical theme to display your site as demo Medical theme link.

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 Widgets

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 2: Click on sidebar name you want to rename

http://www.upsidethemes.com/

31

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

To delete default/ existing sidebar, follow the steps:


- 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.

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

32

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

developers.

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 Widgets page to drag-drop widgets to each sidebar.

33

1. 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.

34

2. Setup Front Page

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

from Home page display.

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.

3. 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.

35

4. Setup Posts

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.

5. Set up Search

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

layout for Search page on the site.

6. 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.

7. Set up Product Archive

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

Product archive page on the site.

8. Set up Product Single

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

Product page on the site.

9. Set up Portfolio Archive

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

Portfolio archive page on the site.

36

10. Set up Portfolio Single

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

Portfolio page on the site

11. Set up Member Single

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

Member page on the site

12. Set up Forum Pages

Click Appearance Layout Manager Forum Pages. Setup Forum page layout for Forum page on

the site

13. Set up Topic Pages

Click Appearance Layout Manager Topic Pages. Setup Topic page layout for Topic page on the

site

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

37

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

Import/Export Settings:

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).

38

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.

39

E. Theme Customizer

The theme customizer allows users to change certain Theme features such as color and layout in a live

preview format. Using it is simple:

- Step 1: On the “Themes” page, search for and activate the Upside Theme.

- Step 2: On the same page, click on the “Customize” link under the current theme’s description.

- Step 3: This brings up the Theme Customizer in the left column, along with a preview of your

website on the right.

- Step 4: To make changes, all you have to do is select each of the available options and edit their

settings. The options are:

1. Site Identity: Edit the title and tagline of the website without having to go to the “Settings” page.

Select file for site icon

- Site Title: Text box for site title

- Tag Line: Text box for tag line

- Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square, and

at least 512px wide and tall.

2. Menus: Select which menu you want to use for the primary navigation of your website. Your

theme contains 3 menu locations. Select which menu appears in each location. You can edit your

menu content on the Menus screen in the Appearance section.

You can also place menus in widget areas with the Custom Menu widget.

- Icon Menu: select either a post or page from the drop downs (Icon Menu)

- Main Menu: select either a post or page from the drop downs (Main Menu)

- Mobile Menu: select either a post or page from the drop downs (Mobile Menu)

3. Widgets: Widgets are independent sections of content that can be placed into widgetized areas

provided by your theme (commonly called sidebars).

40

- Blog bottom: You can add a widget for Blog bottom

- Blog right: You can add a widget for Blog right

- Footer 1: You can add a widget for Footer 1




- Copyright: You can add a widget for Copyright

4. Static Front Page: Specify whether the front page of the website should be a list of your latest

posts, or a static page of your choosing. You site's home page can either contain your latest posts or

display a static page or post.

- Your Latest Posts: display all latest post as blog page

- A static page: select either a post or page from the drop downs.

5. Theme Options:

- Logo:

+> You can upload Logo from library media or your computer.

41

- Header Option: You check on checkboxes Search Form and Breadcrumb to show them on front

end. Also, you can upload background for page title

42

- Post archive:

+> Enter number words of excerpt to show into textbox

+> Check on options metadata to show them or not

- Post single:


+> Related Post: You can get by category or tag, limit the number of posts and Number words of

excerpt to show

44

- Shop:

+> Check on "Enable share via socials" option to show them or not

- Portfolio archive:

+> Enter number of Portfolio per page

+> Check on options metadata to show them or not (Icon link, Icon like, Icon popup, Category)

- Portfolio Single:

+> Check on options metadata to show them or not (Share via socials, Portfolio gallery)

+> Enter number of related Portfolio

- Member archive:

+> Enter number of member per page


45

- Member Single:


46

- Event archive:

+> Enter number of Event per page

+> Enter number words of excerpt to show


48

- Event Single:


+> Enter number of related event

+> Enter number works of excerpt for related event

50

- Custom CSS:

+> Enter CSS code in text area

- Contact info:

- Error page:

+> Upload background image for error page in here:

51

F. Custom Widgets

WordPress Widgets add content and features to your Sidebars. Examples are 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 & drop it onto the sidebar or the area and refresh the

appropriate page to display its content.

1. (Upside) Advertisement: Display a banner with custom link. Just drag a widget to the area or

sidebars then upload image from library media or your computer and enter link if you want.

52

2. (Upside) Grid Events: Enter title, choose event tags in select box, and enter number of items

to show. Then click Save button to save.

It displays on the frontend as below:

53

3. (Upside) Info: Enter title, address, email, and phone. Then click Save to save changes.

It shows as this:

54

4. (Upside) Newsletter Feedburner: Enter title, description, Feedburner URL in textboxes.

Then click Save button to save changes.

It shows as this:

55

5. (Upside) Recent Comments: Enter title, number of comments in textboxes. Then

click Save button to save changes.

It shows as this:

56

6. (Upside) Recent Posts: Enter title, then choose categories, relation, tags, order, and order by in

the select boxes. Then, enter number of post in last textbox. Then click Save button to save

changes.

It shows as this:

57

7. (Upside) Social Links: Enter title, and number of social links. Then select icon, enter the social

name. Then click Save button to save changes.

59

It shows as this:

8. (Upside) Social Statistics: Enter title, Facebook page, Facebook app token to show number of

like Facebook page. Enter twitter consumer key (API Key), twitter consumer secret (API Secret),

twitter access token, twitter access token secret, twitter screen name to show number follows in

twitter. Enter google plus page ID, google plus API Key to show number follows in google plus.

Then click Save button to save changes.

61

It shows as this:

9. (Upside) Tagline: Click + button to select image, enter link your image. Then marked in

checkbox if you want to open link in new tab. Then enter text in text field. Then click Save button

to save changes.

62

It shows as this:

10. (Upside) Testimonial Carousel: Enter title, number of testimonials, choose tags in select box.

Marked in checkbox slide auto, and enter slide speed value if you want to auto slider. Then

click Save button to save changes.

It shows as this:

63

11. List Post With More Link: Display list post with more link. Use Visual Composer to add List

Post with More Link element into row/ column where you want to display it and configure it.

64

(1) General tab:

+> Enter Title for widget.

+> Select one category or all categories list

+> Select one tag or all tags list

+> Enter number of post to show

65

+> Enter number word of excerpt length

+> Enter More text

+> Enter More Link

(2) Layout tab: You can choose layout:

+> Grid two items per row, no thumbnail

+> Grid post format gallery three items per row

+> Grid posts format gallery two items per row

With layout Grid two items per row, no thumbnail, it shows as below:

With layout Grid post format gallery three items per row, it shows below:

66

With layout Grid posts format gallery two items per row, it shows below:

12. List Post With Title: Display list post with title. Use Visual Composer to add List Post with

More Link element into row/ column where you want to display it and configure it.

67

(1) General tab:

+> Enter Title for widget.

+> Select one category or all categories list

+> Select one tag or all tags list


+> Enter number word of excerpt length

(2) Layout tab: Show title icon:

Select Yes/ or No to show title icon

With Yes, it shows as below:

69

With No, it shows as below:

70

13. Slide One: Display slide by carousel effect. Use Visual Composer to add Slide One element into

row/ column where you want to display it and configure it. Enter number of slide, select tag's slide

which created in Using Plugin in Upside theme, enter slide speed, select Yes/ no to auto run

slide then click Save Change button.

If choose metadata align is "Metadata align in center", it shows as below:

71

If choose metadata align is "Metadata align in left".

It shows:

72

14. Featured Post: Display post details. Use Visual Composer to add Featured Post element into

row/ column where you want to display it and configure it. Enter ID of post to show and enter

number words of excerpt to show, then click Save Change button.

It shows as:

73

15. Featured Quote: Show quote content. Use Visual Composer to add Featured Quote element into

row/ column where you want to display it and configure it. Enter widget title, upload your image,

enter description, enter quote title and quote position then click Save Change button.

74

It shows as:

16. List Posts With Title And Description: Show list posts with title and description. Use Visual

Composer to add List Posts With Title And Description element into row/ column where you want

to display it and configure it.

(1) General tab:

+> Enter title for widget.

+> Enter description

+> Select one category or choose all categories

75

+> Select one tag or choose all tags


(2) Layout tab: You can choose element layout (Grid four items per row, medium thumbnail)

If layout choose "Grid three items per row". It shows as below:

76

If layout choose "Grid four items per row", and header style choose "Icon left title". It shows as

below:

If layout choose "Grid four items per row", and header style choose "Icon before title". It will

show:

77

17. Featured Content: Show content block. Use Visual Composer to add Featured Content element

into row/ column where you want to display it and configure it.

(1) General tab:



+> Enter button label

+> Enter button link

+> Upload your image

(2) Layout tab:

+>You can choose element layout: (Position absolute image or Default image)

+>You can choose button style: (Pink Button or Blue Button)

78

With layout Position absolute image, it displays as:

With layout Default image, it displays as:

79

18. Testimonial Grid: Display grid testimonials. Use Visual Composer to add Testimonial Grid

element into row/ column where you want to display it and configure its parameters. Enter title,

description, tag slugs, and number of total items to show.

80

Click Save Change button to save change, it displays as Home 1 page here:

19. Testimonial Carousel: Choose pagination style in select box, enter tag slugs, total items, slide

speed. Marked in Yes checkbox if you want to auto slide.

It displays as:

81

20. Brand Grid: Display grid brands. Use Visual Composer to add Brand Grid element into row/

column where you want to display it and configure parameters it. Enter tag slugs, enter number of

total item to show.

Click Save Change button to save change, with Brands created in Using Plugin in Upside

Theme, they will be displayed as below:

82

21. Brand Carousel: Display a list of brands with carousel effect. Use Visual Composer to add

Brand Carousel element into row/ column where you want to display it and configure parameters

it. Enter title, description, tag slugs, and enter number of total item to show.

Click Save Change button to save change, with Brands created in Using Plugins in Upside

Theme, they will be displayed as below:

83

22. Tagline: Display some text and 1 button. Use Visual Composer to add Tagline element into row/

column where you want to display it and configure parameters it. Enter title, description, tag

slugs, and enter number of total item to show.

Click Save Change button to save change, they will be displayed as below:

84

23. Open Time: Display open time data. Use Visual Composer to add Open time element into row/

column where you want to display it and configure parameters it. Enter title, description, enter

number of open title, open text, year, intro title, intro detail and data in date when open time.

Click Save Change button to save change, they will be displayed as below:

85

24. Service Grid: Display some services. Use Visual Composer to add Services Grid element into

row/ column where you want to display it and configure parameters it.

General tab:



+> Enter tag slugs

+> Enter total items

+> Enter grid elements per row

Click Save Change button to save change, it displays as About page below:

86

25. Contact Form: Display contact form. Use Visual Composer to add contact form into row/

column where you want to display it and configure parameters it. Enter title, description, select

category, enter total of item then click Save Change.

It displays as below:

87

26. Member Carousel: Display member by carousel effect. Use Visual Composer to add Member

carousel element into row/ column where you want to display it and configure parameters it.

Enter title, description, departments, and number of items to show then click Save Change.

It displays as About 1 page here:

27. Member List: Display member list. Use Visual Composer to add Member list element into row/

column where you want to display it and configure parameters it. Enter title, departments,

number of items to show then click Save Change.

88

If you choose "Grid 3 items per row" as display type, it shows:

89

If you choose "Grid 4 items per row" as display type, it shows:

28. Member Grid: Display member list. Use Visual Composer to add Member list element into row/

column where you want to display it and configure parameters it. Enter title, number of items,

department slug. Then click Save Change.

It displays as:

90

29. List Document: Display list document. Use Visual Composer to add List Document element into

row/ column where you want to display it and configure parameters it. Select Yes to show all

document tags or enter tag slugs (separate tags with commas), and the number of document in

each tag then click Save Change.

With Document created in Using Plugins in Upside Theme, it displays as Document page:

91

30. Demo Grid: Display some demo pages. Use Visual Composer to add Demo Grid element into

row/ column where you want to display it and configure parameters it. Enter title, description,

tags slug, total item, and the number of page per row then click Save Change.

93

With Demo created in Using Plugin in Upside Theme, It displays as Landing page here:

31. Portfolios Grid: Display some demo pages. Use Visual Composer to add Demo Grid element

into row/ column where you want to display it and configure parameters it. Enter title,

description, tags slug, total item, and the number of page per row then click Save Change.

95

With Demo created in Using Plugin in Upside Theme, It displays as Landing page here:

32. FAQ List: Display some FAQ. Use Visual Composer to add FAQ List element into row/ column

where you want to display it and configure parameters it. Enter tags slug, total item then click

Save Change.

96

With FAQs created in Using Plugin in Upside Theme, It displays as FAQs page here:

33. Header: Display a form to send to admin. Add the widget to the area that you want to display

then configure the necessary parameters for it.

Enter title, select categories and/or tags, order, order by, number of post then Click Save button

to save change. It displays as bellow:

97

G. Custom Shortcode Generator

Shortcodes available with this theme

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.

Example: column 1/2-1/2

98

[row]

[col col=6]

1/2 columns

Duis nec purus tellus, quis pulvinar tortor, consectetur adipiscing elit.[/col]

[col col=6]

1/2 columns

Duis nec purus tellus, quis pulvinar tortor, consectetur adipiscing elit.[/col]

[/row]

2. Container: Include options: Unorder List, Tabs, Accordion, Toggle, Price Table.

+> Unorder List ( Unorder List include: Round icon, Square icon, Plus icon, Custom icon)

[upside_ulists]

[upside_ulist]List item[/upside_ulist]

[upside_ulist]List item[/upside_ulist]

[/upside_ulists]

Example:

[upside_ulists]

[upside_ulist]Amazing bonus parallax sections[/upside_ulist]

[upside_ulist]Ultra responsive & Retina ready[/upside_ulist]

[upside_ulist]Computers & Accessories[/upside_ulist]

[upside_ulist]Rocknrolla helpdesk system of help[/upside_ulist]

[upside_ulist]Endless possibilities in custom backend[/upside_ulist]

[/upside_ulists]

99

The same with other style (Plus icon, Custom icon), the image will illustrate for above shortcode:

+>Tabs

[upside_tabs]

[upside_tabs title="Tab title 1"]Tab content 1[/upside_tabs]



[/upside_tabs]

Example:

[upside_tabs]

[upside_tab title="Tab 1"]Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs

condmentum leo massa mollis estiegittis miristum nulla sed fringilla Donec vitae orci dignissim,

faucibus tellus volutpat, rhoncus leo.[/upside_tab]







[/upside_tabs]

100

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

+>Accordions: Click Container, select Accordion, add title and content for Accordion:

[upside_accordions icon_pos="right or left"]

[upside_accordion title="Accordion title 1"]Accordion content 1[/upside_accordion]



[/upside_accordions]

Example:

[upside_accordions icon_pos="right"]

[upside_accordion title="The quality of our services"]Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Praesent eget ligula mollis, aliquam ligula non,Pellentesque feugiat in urna id

varius. Curabitur lobortis eleifend viverra. Nulla aliquam magna quis magna. Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Praesent eget ligula mollis, aliquam ligula

non[/upside_accordion]

[upside_accordion title="Our promise to our clients"]Lorem ipsum dolor sit amet, consectetur





[upside_accordion title="Standards, awards and goals"]Lorem ipsum dolor sit amet, consectetur


101




[/upside_accordions]

The same with other style of Accordion, It is illustrated with the image below:

+>Toggles: Click Container, select Toggles, add title and content for Toggles:

[upside_toggles]

[upside_toggle title="Toggle title 1"]Toggle content 1[/upside_toggle]



102

[/upside_toggles]

Example:

[upside_toggles]

[upside_toggle title="MAT 125 – Introductory Calculus for Business"]Ut cursus massa at

urnaaculis estie. Sed aliquamellus vitae ultrs condmen tum leo massa mollis estiegittis miristum

nulla.[/upside_toggle]

[upside_toggle title="hary 301 – Operations Management"]Ut cursus massa at urnaaculis estie.

Sed aliquamellus vitae ultrs condmen tum leo massa mollis estiegittis miristum


[upside_toggle title="rkt 301 – Principles of Management"]Ut cursus massa at urnaaculis estie.

Sed aliquamellus vitae ultrs condmen tum leo massa mollis estiegittis miristum


[/upside_toggles]

Enter title and content for toggles, it is illustrated with the image below:

+>Table: include Pricing table and Check table

Pricing table:

[upside_price_tables column_per_row="4"]

[upside_price_table title="Price title" price_value="09" price_currency="$" price_per="Month"

special_text="" features="Feature 1|Feature 2|Feature 3|Feature 4" btn_title="Sign-up"

btn_link_to="#" btn_link_target="_blank"][/upside_price_table]





103






[/upside_price_tables]

Example:

[upside_price_tables column_per_row="4"]

[upside_price_table title="Starter" price_value="09" price_currency="$" price_per="Months"

special_text="" features="Lorem ipsum dolor sit amet, consect etur adipiscing.|10GB Space

amount|30GB Bandwidth|Unlimited data transfer" btn_title="Sign-up-" btn_link_to="#"

btn_link_target="_blank"][/upside_price_table]

[upside_price_table title="Basic" price_value="29" price_currency="$" price_per="Month"

special_text="Best theme" features="Lorem ipsum dolor sit amet, btn_title="Sign-up"


[upside_price_table title="Classic" price_value="49" price_currency="$" price_per="Month"

special_text="" features="Lorem ipsum dolor sit amet, consect etur adipiscing|10GB Space

amount|30GB Bandwidth|Unlimited data transfer" consect etur adipiscing|10GB Space

amount|30GB Bandwidth|Unlimited data transfer" btn_title="Sign-up" btn_link_to="#"


[upside_price_table title="Premium" price_value="99" price_currency="$" price_per="Month"

special_text="" features="Lorem ipsum dolor sit amet, consect etur adipiscing|10GB Space

amount|30GB Bandwidth|Unlimited data transfer" btn_title="Sign-up" btn_link_to="#"


[/upside_price_tables]

104

It is illustrated with the image below:

Check table:

[upside_check_tables]

[upside_check_table title="Column title" features="Feature 1|Feature 2|Feature 3|Feature

4|Feature 5" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank"

btn_show="0"][/upside_check_table]

[upside_check_table title="Column title" features="check|check|uncheck|uncheck|Description"

btn_title="Buy now" btn_link_to="#" btn_link_target="_blank"










106

3. Dropcap Includes styles: Transparent and Circle

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

+>Style: Transparent [upside_dropcap class="kp-dropcap-1" f_char=""][/upside_dropcap]

+>Style: Circle [upside_dropcap class="kp-dropcap-2" f_char=""][/upside_dropcap]

Example:

[upside_dropcap class="kp-dropcap-1" f_char="S"]orem ipsum dolor sit amet, scelerata nunc

intuens munus oblitus ait regem orem ipsum dolor sit amet, scelerata nunc intuens munus

oblitus ait regem orem ipsum dolor sit amet, nihil docta mare non coepit. Scitote si Ave de

memor cresceret nomina petitus. Lavabat quo sanctis oravit ecce sit in rei finibus veteres hoc.

Suam ut diem finito servis nomine adventu nihil docta mare non coepit. Scitote si Ave de memor

cresceret nomina petitus.[/upside_dropcap]

107

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

4. Alert box shortcode: Click on Alert symbol, select options (Blue, Yellow, Green, Pink, Sky), it

displays code blow:

+>Blue: [upside_alert class="alert alert-dark-blue alert-dismissable" font_awesome_icon="fa

fa-check"][/upside_alert]

+>Yellow: [upside_alert class="alert alert-yellow alert-dismissable" font_awesome_icon="fa fa-

gavel"][/upside_alert]

+>Green: [upside_alert class="alert alert-green alert-dismissable" font_awesome_icon="fa fa-

pencil"][/upside_alert]

+>Pink: [upside_alert class="alert alert-pink alert-dismissable" font_awesome_icon="fa fa-

bolt"][/upside_alert]

+>Sky: [upside_alert class="alert alert-sky alert-dismissable" font_awesome_icon="fa fa-

umbrella"][/upside_alert]

Example:

[upside_alert class="alert alert-dark-blue alert-dismissable" font_awesome_icon="fa fa-

check"][/upside_alert]

108

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

14. Button shortcodes: Click on Button symbol, displaying 5 styles: Pink (Small, Medium, Large,

Small with border, Medium with border, Large with border), Blue (Small, Medium, Large, Small

with border, Medium with border, Large with border), Navy (Small, Medium, Large, Small with

border, Medium with border, Large with border), Green(Small, Medium, Large, Small with

border, Medium with border, Large with border), and Red( Small, Medium, Large, Small with

border, Medium with border, Large with border), it displays code like below:

+>Pink:

Small: [upside_button class="kopa-button pink-button small-button kopa-button-icon" link="#"

target=""][/upside_button]

Medium: [upside_button class="kopa-button pink-button medium-button kopa-button-icon"

link="#" target=""][/upside_button]

109

Large: [upside_button class="kopa-button pink-button large-button kopa-button-icon" link="#"

target=""][/upside_button]

Small with border: [upside_button class="kopa-button kopa-line-button pink-button small-

button kopa-button-icon" link="#" target=""][/upside_button]

Medium with border: [upside_button class="kopa-button kopa-line-button pink-button

medium-button kopa-button-icon" link="#" target=""][/upside_button]

Large with border: [upside_button class="kopa-button kopa-line-button pink-button large-

button kopa-button-icon" link="#" target=""][/upside_button]

Example:

upside_button class=kopa-button pink-button small-button kopa-button-icon"

link="http://kopatheme.net/demo/upside" target="_blank"]Small Button[/upside_button]

110

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

styles:

111

5. Caption Click on Caption symbol, it displays code as blow:

[upside_caption title='Title']Description[/upside_caption]

Example: [upside_caption title='Button']See our features courses or see all courses to see

all.[/upside_caption]

Enter title and description, the following image will illustrate for above shortcode:

6. Blockquote Click on Blockquote symbol, it is displayed as the bellow code:

[upside_blockquote][/upside_blockquote]

Example: [upside_blockquote]Originally a web designer, Kai launched the first Offscreen

magazine in early 2012 after wanting to create something more physical and lasting. Offscreen

explores the lives of people in our industry outside of work, and is still a one-man operation, now

on it’s tenth issue. Kai also publishes a weekly newsletter The Modern

Desk.[/upside_blockquote]

112

The following image will illustrate for above shortcode:

7. Progress Click on Progress symbol, displaying 2 styles: Small and Medium, it is displayed as the

following code:

[upside_progress class="pro-bar-wrapper pro-blue" icon_text="" font_awesome_icon="fa fa-

code" bar_percent="85" bar_delay="400"][/upside_progress]

Example: [upside_progress class="pro-bar-wrapper pro-blue" icon_text="Ps"

font_awesome_icon="fa fa-code" bar_percent="85"

bar_delay="400"]Photoshop[/upside_progress][upside_progress class="pro-bar-wrapper pro-

blue" icon_text="Ai" font_awesome_icon="fa fa-code" bar_percent="75"

bar_delay="400"]Illutrator[/upside_progress][upside_progress class="pro-bar-wrapper pro-

blue" icon_text="" font_awesome_icon="fa fa-code" bar_percent="65"

bar_delay="400"]Html/css[/upside_progress][upside_progress class="pro-bar-wrapper pro-

blue" icon_text="" font_awesome_icon="fa fa-comment" bar_percent="55"

bar_delay="400"]Communication[/upside_progress]

113

The same with Medium style and pink color, the following image will illustrate for above

shortcode:

114

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

As you can imagine, most of the site content are 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.

115

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

procedures listed below:

116

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.

117

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

118

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 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, URL link on the single post with

formats of video (vimeo, youtube), gallery, audio (soundcloud), quote instead of displaying

featured image upload in part 7, it will use featured image using shortdode which are installed

in this part How to make your gallery, video, audio, and other post types pop by

using post formats.

10. Custom featured image size: in this part, you can upload featured image by sizes for each meta

box (example: upload featured image size for Blog featured, Blog featured full). When you use

to custom featured image size, the more priority use to upload featured image

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

119

12. 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.

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

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, Video, or Quote.

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 add gallery ID ( same as [gallery ids="226,225,224"] ) or

Vimeo URL (https://vimeo.com/ondemand/shortterm12) 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

3. Brands Post -Type

To create a New Brand, follow the steps:

Go to Dashboard Brands Add New

120

1. Enter Brand's name

2. Enter Brand's content

3. Add new tags or assign exited tags

4. Add featured image for your brands

5. Enter your website/Blog for brand

6. Click Update button to finish

You can see the following illustration

121

4. Services Post -Type

To create Service Post -Type, follow steps:

Go to Dashboard Services Add New

1. Enter Service's name

2. Enter Service's excerpt (Excerpts are optional hand-crafted summaries of your content that

can be used in your theme)

3. Select an icon awesome or upload your icon, enter link for icon

4. Add new service tag or assign existed service tags

5. Upload your featured image for your services


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.

122

5. Testimonials Post -Type

To create Testimonials Post -Type, do the following steps:

Go to Dashboard Testimonials Add New

1. Enter testimonial's name

2. Enter testimonial's content

123

3. Enter more information (Job, company, website)

4. Add new testimonial tag or assign existed testimonial tags

5. Upload featured image of testimonials


You can see the following illustration.

6. Members Post -Type

To create Members Post -Type, do the following steps:

Go to Dashboard Members Add New

1. Enter member's name

2. Enter member's content

3. Enter member detail( Position, Facebook, Twitter, Google plus, Instagram)

124

4. Add new member department or assign existed member department

5. Upload featured image of member



7. Events Post -Type

To create Events Post -Type, do the following steps:

Go to Dashboard Events Add New

1. Enter event's name

2. Enter event's content

3. Enter excerpt length (Excerpts are optional hand-crafted summaries of your content that can

be used in your theme)

125

4. Enter some information for your event into option part (start date, end date, price, location,

contact phone, contact image, speaker (some members are created in Member plugin), link to

WooCommerce product,...)

5. Add new event tag or assign existed event tags

6. Upload featured image of event


Note: In case you enter ID of product, your single event will display price of WooComerce product is

created in Product, if not, it will display string price


127

8. Document Post-Type

To create Documents Post -Type, do the following steps:

Go to Dashboard Documents Add New

1. Enter document's name

2. Enter document's content

3. Select icon for document

4. Add new document tag or assign existed document tags

5. Upload featured image of document



128

9. Portfolios Post-Type

To create Portfolio Post -Type, do the following steps:

Go to Dashboard Portfolios Add New

1. Enter Portfolio's name

2. Enter Portfolio's content

3. Enter project details (date string, address, more link, gallery upload list image from library

media)

4. Add new Portfolio category or assign existed Portfolio categories

5. Upload featured image of Portfolio



129

10. Slide Post-Type

To create Slide Post -Type, do the following steps:

Go to Dashboard Slide Add New

1. Enter slide's name

2. Enter options (summary, button text, select button style ( Pink button or Blue Button), button

link)

3. Add new slide tag or assign existed slide tags

4. Upload featured image of Slide



130

11. Forum Post -Type

To create Forum Post -Type, do the following steps:

Go to Dashboard Forum Add New

1. Enter forum's name

2. Enter forum's content

3. Forum Attributes (select options: Type (Forum or Category), Status (Open or Close), Visibility,

Parent, Oder)



131

12. Topic Post-Type

To create Topic Post -Type, do the following steps:

Go to Dashboard Topic Add New

1. Enter topic's name

2. Enter topic's content

3. Topic Attributes (select options: Type( Normal, Sticky or Supper Sticky), Status ( Open, Close,

Spam, Trash, or Pending), Forum (select one forum or no parent))

4. Add new topic tag or assign existed topic tags



132

13. Reply Post-Type

To create Reply Post-Type, do the following steps:

Go to Dashboard Reply Add New

1. Enter reply title

2. Enter content for reply

3. Reply Attributes (select options: Forum (select one forum or no parent), topic, reply to)



133

14. FAQs Post -Type

To create FAQs Post -Type, do the following steps:

Go to Dashboard Reply Add New

1. Enter FAQs title

2. Enter content for FAQS

3. Add new FAQs tag or assign existed FAQs tags



134

15. 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

135

- 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 (Icon Menu, Main Menu and Mobile 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.

Create Mega Menu

- Step 1: Go to Appearance Theme Options Sidebar Manager tab: create three sidebars for

Mega Menu ( ex: Mega menu 1, Mega menu 2, Mega menu 3)

- Step 2: Go to Appearance Widgets:

+> Drag and drop (Upside) Custom Menu widget into the Mega menu 1 sidebar and configure

it (See Custom Widget - (Upside) Custom Menu)

+> Drag and drop Custom Menu widget into the Mega menu 2 sidebar and configure it

136

+> Drag and drop (Upside) Grid Events widget into the Mega menu 3 sidebar and configure it

(See Custom Widget - (Upside) Grid Events)

- Step 3: At Setting part of Edit Mega menu: Select each sidebar name for sidebar 1 (25%), sidebar

2 ( 25%), sidebar 3 ( 50%) as the following image:

- Step 4: Go to Appearance Mega Menus All Mega Menus: Copy shortcode of mega

menu

- Step 5: Go to Appearance Menus: Click Select Main menu, then check on checkbox '

Description' at Screen Option, at mega menu part paste shortcode of mega menu created then

click Save Menu to save.

138

I. Create pages

1. Creating Home Page 1

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

Go to Dashboard Pages Add New

1. Enter page's name

2. Click BACKEND EDITOR section to add some content or use predefined layouts (You can

also edit layouts on the frontend using the “FRONTEND EDITOR”)

3. Add Elements( or add text block)

4. Configure for Rows, Columns

5. Click Customize button to customize CSS for page

6. Select options at Page Setting part

7. Custom page title and description for current page

8. Click Publish button to save

Configure parameters for Elements, Layouts, Rows, and Columns of Home page 1

Row 1

+> Layout setting: 12 columns -1/1

+> Column setting: Default

+> Row setting: Default

+> Click Add Element button to select Slide One element then configure parameters for it,

following the part Slide One

Row 2



+> Row setting:

139

Row stretch: Stretch row

Margin top: -35px

Margin bottom: 0 px

Padding top: 80px

Padding bottom: 80px

+> Click Add Element button to select Upcoming Event Detail element then configure

parameters for it, following the part Upcoming Event Detail

Row 3

+> Layout setting: 2/3+ 1/3


+> Row setting:


Margin bottom: 0 px

Padding top: 50px


Background color: #191d3d

+> Click Add Element button to select List Post With More Link element then configure

parameters for it, following the part List Post With More Link

+> Click Add Element button to select Featured Post element then configure parameters for

it, following the part Featured Post

Row 4

+> Layout setting: 1/1


+> Row setting:

140


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


Background color: #f2f4f5

+> Click Add Element button to select Course Search element then configure parameters for

it, following the part Course Search

Row 5



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


Upload your background image

Overlay color: rgba(23,55,110,0.7)

Overlay color before: rgba(19,16,47,0.4)

+> Click Add Element button to select Featured Content element then configure parameters

for it, following the part Featured Content

Row 6

141


+> Column setting: Column 2/3:

Padding top: 60px


Padding Left: 15px

Padding right: 15px

Background color: #ffffff

+> Row setting:


Margin bottom: 0 px


+> Click Add Element button to select List Post With Title element at column 1/3 then

configure parameters for it, following the part List Post With Title

+> Click Add Element button to select List Post With More Link element at column 2/3 then

configure parameters for it, following the part List Post With More Link



Row 7



Padding right: 0px

+> Row setting:


Parallax: select Simple and upload your image

142

Margin top: 0 px

Margin bottom: 0 px

Overlay color: rgba (23,55,110,0.7)

Overlay color before: rgba (19,16,47,0.4)



+> Click Add Element button to select Featured Quote element at column 1/3 then configure

parameters for it, following the part Featured Quote

Row 8


+> Column setting: default

+> Row setting:

Row stretch: default

Margin bottom: 0px

Padding top: 80 px

Padding bottom: 80 px

Padding left: 0 px

Padding right: 0 px

+> Click Add Element button to select List Posts With Title And Description element then

configure parameters for it, following the part List Posts With Title And Description

Row 9



+> Row setting:

143

Row stretch: default

Padding top: 50 px


+> Click Add Element button to select Testimonial Grid element then configure parameters

for it, following the part Testimonial Grid

Row 10



+> Row setting:


Padding top: 30 px


Margin bottom: 0 px


+> Click Add Element button to select Brand Grid element then configure parameters for it,

following the part Brand Grid

2. Create Home page 2

To create Homepage 2, you can follow steps as below:






144






Configure parameters for Elements, Layouts, Rows, and Columns of Home page 2

Row 1



+> Row setting:

Row stretch: Stretch row and content (no padding)

Margin bottom: 0 px

+> Click Add Element button to select Slide One element then configure parameters for it,

following the part Slide One

Row 2

+> Layout setting: 1/3+2/3


+> Row setting:


Margin bottom: 0 px

Padding top: 80px



145

+> Click Add Element button to select Featured Content Simple element at column 1/3 then

configure parameters for it, following the part Featured Content Simple



Row 3



Padding top: 50px


+> Row setting:


Margin bottom: 0 px

Background color: #191d3d

+> Click Add Element button to select List Post With More Link element then configure

parameters for it, following the part List Post With More Link

+> Click Add Element button to select Featured Post element then configure parameters for

it, following the part Featured Post

Row 4



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

146

Padding top: 80px



+> Click Add Element button to select Course Search element then configure parameters for

it, following the part Course Search

Row 5



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


Upload your background image

Overlay color: rgba(23,55,110,0.7)

Overlay color before: rgba(19,16,47,0.4)



Row 6



+> Row setting:

147


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px



+> Click Add Element button to select Recent Course element then configure parameters for

it, following the part Recent Course

Row 7



+> Row setting:



Margin bottom: 0 px

Padding top: 80px


Overlay color: rgba (23,55,110,0.7)

Overlay color before: rgba (19,16,47,0.4)



Row 8


148


+> Row setting:


Margin top: 0px

Margin bottom: 0px

Padding top: 80 px



+> Click Add Element button to select Course Tabs element at 1/2 column then configure

parameters for it, following the part Course Tabs



Row 9



+> Row setting:

Row stretch: stretch row

Padding top: 0 px


Margin bottom: 0 px


+> Click Add Element button to select Hot Courses element then configure parameters for it,

following the part Hot Courses

149

3. Create About Page

To Create About Page, you can follow steps as below:










Configure parameters for Elements, Layouts, Rows, and Columns of Landing Page

Row 1



+> Row setting:



Margin top: 0 px

Margin bottom: 150 px

Padding top: 90 px


150

+> Click Add Element button to select Introduce element then configure parameters for it,

following the part Introduce

Row 2



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select Services Grid element then configure parameters for it,

following the part Services Grid

+> Click Add Element button to select Demo Grid element then configure parameters for it,

following the part Demo Grid

Row 3



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


151

Background color: rgba(25,29,61,0.2)

+> Click Add Element button to select Other Info element then configure parameters for it,

following the part Other Info

Row 4



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select Services Grid element then configure parameters for it,

following the part Services Grid

Row 5



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Margin left: 0 px

Margin right: 0 px

152

Padding top: 135 px


Padding left: 135 px

Padding right: 135 px


+> Click Add Element button to select Other Info element at 1/2 column then configure

parameters for it, following the part Other Info

+> Click Add Element button to select Single Image element at 1/2 column then configure

parameters for it.

Row 6



+> Row setting:

Row stretch: Stretch row and content (no paddings)

Margin top: 0 px

Margin bottom: 0 px

Padding top: 120px

Padding bottom: 0px

+> Click Add Element button to select Other Info element then configure parameters for it,

following the part Other Info

Row 7



+> Row setting:

153


Margin top: 0 px

Margin bottom: 0 px

Padding top: 90px


Overlay color: #262c56

+> Click Add Element button to select Tagline element then configure parameters for it,

following the part Tagline

4. Create Contact page

To create Contact page, you can follow steps as follows:



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

3. Configure parameters for Rows, Areas

4. Click Publish button or Save button to save.

Configure parameters for Elements, Layouts, Rows, and Columns of Landing Page

Add Contact Form widget then configure parameters for it, following the part Contact Form 7

5. Create Document Page

To create Document page, you can follow the steps as below:


154



3. Add Elements (or add text block)






Configure parameters for Elements, Layouts, Rows, Columns of Document page

Row 1



+> Row setting: default

+> Click Add Element button to select List Document element then configure parameters for

it, following the part List Document

6. Create Portfolio Page 1

To create Portfolio Page 1, you can follow steps as below:




3. Add Elements (or add text block)


155





Configure parameters for Elements, Layouts, Rows, Columns of Portfolio 1 page

Row 1



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select Portfolio Grid element then configure parameters

"Number of items in each row" is 2, following the part Portfolio Grid


To create Portfolio Page 2, you can follow the steps as below:





156







Row 1



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px



"Number of items in each row" is 3 items, following the part Portfolio Grid


To create Portfolio Page 3, you can follow steps as below:





157







Row 1



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px



"Number of items in each row" is 4 items, following the part Portfolio Grid

9. Create Doctor Page

To create Doctor Page, you can follow steps as below:




158







Configure parameters for Elements, Layouts, Rows, Columns of Doctor page

Row 1



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select Member Grid element then configure parameters for it,

following the part Member Grid

10. Create Single Post

To create Single Post, you can follow steps as below:


159









Configure parameters for Elements, Layouts, Rows, Columns of Doctor page

Row 1



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select Member Grid element then configure parameters for it,

following the part Member Grid

11. Creating FAQs Page

To create FAQs Page, you can follow steps as below:

160









8. Click Publish button to save.

Configure parameters for Elements, Layouts, Rows, Columns of FAQs page

Row 1



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select FAQ list element then configure parameters for it,

following the part FAQ list

161

J. How to setup the demo site

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

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

- Step 2: Install Kopa Framwork plugin, WPBakery Visual

Composer plugin, BbPress plugin, Contact Form 7 plugin, WooCommerce plugin (if you

want to create online shop)

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

- 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.

162

- Step 6: Import demo backup all setting file.

We offer you a demo backup all setting file with name kopatheme.net -demo-upside-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

instraction below

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

163

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

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

click the Import button.

- Step 7: Import demo widgets file

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

import this file, it will automatically Dragging and dropping 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

164

Click "Install Now" to install plugin

Click "Activate Plugin"

165

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.

166

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

http://www.poedit.net/

http://urbangiraffe.com/articles/translating-wordpress-Themes-and-plugins/3/

http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Manually_Installing_Language_Files

167

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.

168

M. Sources and Credits

jQuery Form Plugins

Bootstrap

gmaps

classie

hoverIntent

jquery.backgroundvideo

bxslider

jquery.carouFredSel-6.2.1

imgLiquid

jquery.form

Magnific Popupd

jquery.matchHeight

jQuery Navgoco Menus Plugin

jQuery Validation Plugin

jQuery Wookmark plugin

Modernizr

jQuery OwlCarousel v1.27

Probars

sticky-kit

Superclick

uisearch.js

FitVids 1.0.3

http://malsup.com/jquery/form/

http://getbootstrap.com/

http://hpneo.github.com/gmaps/

https://github.com/ded/bonzo

http://cherne.net/brian/resources/jquery.hoverIntent.html

http://victorcoulon.fr/

http://bxslider.com/

https://github.com/karacas/imgLiquid

http://malsup.com/jquery/form/

http://brm.io/jquery-match-height/

https://github.com/tefra/navgoco

http://docs.jquery.com/Plugins/Validation

http://www.owlgraphic.com/owlcarousel/

https://github.com/joemottershaw/

https://github.com/emn178/jquery-stickit

http://www.opensource.org/licenses/mit-license.php

http://www.codrops.com/

http://fitvidsjs.com/

169

flickrfeed

Image demo get from Pexels, Pixabay, Photodune with CC0 License

http://www.newmediacampaigns.com/page/jquery-flickr-plugin

http://www.pexels.com/

http://pixabay.com/

https://www.google.com.vn/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CB0QFjAA&url=http%3A%2F%2Fphotodune.net%2F&ei=6tbVVLzZConMoATr7ICQAg&usg=AFQjCNFhl_e16CwEkOEBwWx2arXxJ7O2vw&sig2=Ln8irImvkgPFhMapsGm9dw&bvm=bv.85464276,d.cGU

170

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

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

http://kopatheme.com/forum

mailto:[email protected]

http://kopatheme.com/