“UPSIDE EDUCATION – RESPONSIVE WORDPRESS THEME …€¦ · 1 “UPSIDE EDUCATION – RESPONSIVE WORDPRESS THEME DOCUMENTATION” Created: Sep 09/ 2015 Version: 1.0.+ WordPress

1

“UPSIDE EDUCATION – 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………………………………………………………………………………8

B. Using Plugin in Upside theme………………………………………………………………12

1. Kopa Framework plugin………………………………………………………………………13

2. WPBakery Visual Composer plugin…………………………………………………………13

3. Contact Form 7 plugin…………………………………………………………………………23

4. Menu Icons………………………………………………………………………………………25

5. BbPress……………………………………………………………………………………….….26

6. Envato WordPress Toolkit plugin……………………………………………………………26

7. WooCommerce plugin……………………………………………………….………………..26

C. Demo Content…………………………………………………………………..………….….…29

D. Theme Options Customization……………………………………………………………..31

1. Theme Options……………………………………………………………………………….…31

2. Sidebar Manager………………………………………………………………………………..31

3. Layout Manager…………………………………………………………………………….….33

1. Setup Home Page………………………………………………………………………....34

2. Setup Front Page……………………………………………………………………….….35

3. Setup Page……………………………………………………………………………........35

4. Setup Post……………………………………………………………………………........36

5. Setup Search Page…………………………………………………………………..…….36

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

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

8. Set up Single Portfolio……………………………………………………………….……36

3

9. Set up Course Archive Pages………………………………………………………….…36

10. Set up Single Course………………………………………………………………………37

11. Set up Member Archive Pages…………………………………………………………..37

12. Set up Single Member…………………………………………………………………….37

13. Set up Event Archive Pages…………………………………………………………......37

14. Set up Single Event……………………………………………………………………....37

15. Set up Product Archive Pages……………………………………………………………37

16. Set up Single Product………………………………………………………………..……38

4. Backup…………………………………………………………………………….................38

E. Theme Customizer………………………………………………………………………........40

F. Custom Widgets - Elements………………………………………………………………...45

1. (Upside) Advertisement………………………………………………………………………45

2. Contact Info………………………………………………………………………...............45

3. (Upside) Course Tad Grid 2 Cols……………………………………………………………46

4. (Upside) Course Tad Grid 3 Cols……………………………………………………………48

5. (Upside) Course List Tab………………………………………………………………..……50

6. Google Map……………………………………………………………………......................51

7. (Upside) Newsletter Feedburner…………………………………………………….………53

8. (Upside) Recent Comment……………………………………………………………....……54

9. (Upside) Recent Posts……………………………………………………………......…..……55

10. (Upside) Search Course……………………………………………………………...…..……56

11. (Upside) Social Links………………………………………………………………........……58

12. (Upside) Social Statistic………………………………………………………………...….…59

4

13. (Upside) Tagline…………………………………………………………………................…61

14. Tagline………………………………………………………………..............................…..…61

15. (Upside) Testimonial Carousel…………………………………………..………………..…65

16. Testimonial Grid……………………………………………………………….............…...…65

17. List Post With More Link………………………………………………………………..……68

18. List Post With Title……………………………………………………………….........…...…72

19. Single Content…………………………………………………………………....................…78

20. Slide One……………………………………………………………………............................80

21. Slide Two…………………………………………………………………………………......…82

22. Featured Post……………………………………………………………………………………83

23. Featured Quote……………………………………………………………………………….…84

24. List Posts With Title And Description……………………………………………….………87

25. Posts Carousel……………………………………………………………………………………89

26. Featured Content………………………………………………………………………………..92

27. Featured Content Simple……………………………………………………………....………95

28. Featured Content Video………………………………………………………………......……98

29. Introduce…………………………………………………………………………………….……99

30. Other Info……………………………………………………………………………………….101

31. Upside Accordion……………………………………………………………………..............105

32. Upcoming Event Detail………………………………………………………………….....…107

33. Upcoming Event Grid………………………………………………………………….......…109

34. Latest Events……………………………………………………………………………………110

35. Brand Grid………………………………………………………………………………………113

5

36. Brand Carousel…………………………………………………………………………………114

37. Services Grid……………………………………………………………………………………115

38. Course Search………………………………………………………………………………….120

39. Recent Course………………………………………………………………………………….123

40. Course Tabs…………………………………………………………………………………….126

41. Hot Courses…………………………………………………………………………………….128

42. Featured Courses………………………………………………………………………………129

43. Member Carousel………………………………………………………………………………132

44. Member List…………………………………………………………………………………….133

45. List Document………………………………………………………………………………….135

46. Demo Grid………………………………………………………………………………………136

47. FAQ List…………………………………………………………………………………………138

48. Portfolio Grid………………………………………………………………………………..…140

49. (Upside) Custom Menu…………………………………………………………………....…144

50. (Upside) Grid Events……………………………………………………………………........145

51. (Upside) Custom bbPress Login………………………………………………………….…146

G. Custom Shortcode Generator………………………………………………………………148

H. Create Categories - Posts - Post Type - Custom Menu……………………………..165

1. Create Category……………………………………………………………………………......165

2. Create Posts……………………………………………………………………………………..169

3. Brands Plugin……………………………………………………………………………………170

4. Services Plugin…………………………………………………………………………………..172

5. Testimonials Plugin……………………………………………………………………………173

6

6. Members Plugin……………………………………………………………………………......174

7. Events Plugin……………………………………………………………………………………175

8. Document Plugin…………………………………………………………………………….....178

9. Demo Plugin……………………………………………………………………………………..179

10. Course Plugin……………………………………………………………………………………179

11. Portfolios Plugin……………………………………………………………………………......182

12. Slide Plugin……………………………………………………………………………………....183

13. Forum Plugin…………………………………………………………………………………….184

14. Topic Plugin……………………………………………………………………………………...185

15. Reply Plugin………………………………………………………………………………………186

16. FAQs Plugin……………………………………………………………………………………….187

17. Create Custom Menu……………………………………………………………………………188

I. Create pages

1. Create Home page 1…………………………………………………………………………..…193

2. Create Home page 2……………………………………………………………………….……198

3. Create Home page 3…………………………………………………………………....………204

4. Create Landing Page……………………………………………………………………...……210

5. Create Contact page……………………………………………………………………………214

6. Create About 1 page……………………………………………………………………………216

7. Create About 2 page……………………………………………………………………………219

8. Create Faculty page………………………………………………………………….…………221

9. Create FAQ page…………………………………………………………………….....………223

10. Create Document page…………………………………………………………………...……224

7

11. Create Portfolio page……………………………………………………………………..……225

12. Create Course Categories page………………………………………………………….……227

13. Create Single Post…………………………………………………………………………....…230

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

K. Translation…………………………………………………………………………….................237

L. Updating The Theme……………………………………………………………………………238

M. Sources and Credits………………………………………………………………….…………239

8

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.

9

Click “Upload Theme”

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

Now.

10

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

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.

11

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

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

12

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”

13

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.

14

15

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

16

17

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

18

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

19

- 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

20

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

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

21

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

22

- 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

- Upside Additions tab:

+> Overlay color: Select color for background color

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

23

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

24

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

25

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

26

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/

27

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/

28

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.

29

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

30

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

31

D. Theme Options Customization

1. Theme Options

Go to Appearance Theme Options. You will find all the options that the Upside Theme offers

right here. Upside theme consists of two themes: Education theme and Medical theme. If you

choose Education, it will display as demo Education theme link or if you choose Medical, it will

show 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:


http://www.upsidethemes.com/

32

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

33

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.

34

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.

35

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.

36

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

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 Portfolio Archive

Click Appearance Layout Manager Portfolio Archive. Setup Portfolio archive page

layout for Portfolio archive page on the site.

8. Set up Portfolio Single

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

for Single Portfolio page on the site

9. Set up Course Archive

Click Appearance Layout Manager Course Archive. Setup Course archive page layout

for Course archive page on the site.

37

10. Set up Course Single

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

Course Product page on the site

11. Set up Member Archive

Click Appearance Layout Manager Member Archive. Setup Member archive page

layout for Member archive page on the site.

12. Set up Member Single

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

for Single Member page on the site

13. Set up Event Archive

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

Event archive page on the site.

14. Set up Event Single

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

Single Event page on the site

15. Set up Product Archive

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

for Product archive page on the site.

38

16. Set up Product Single

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

Single Product 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

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

39

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

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.

40

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.

41

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

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

42

5. Theme Options:

- Logo:

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

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

end. Also, you can upload background for page title

- Post archive:

+> Enter the number of words of excerpt to show into textbox

+> Check on options metadata to show them or not

- Single Post:


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

excerpt to show

- Shop archive:

+> Check on options to display share via social for single shop

- 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

43

- Course archive:

+> Enter number of course per page


- Course Single:


+> Enter number of related course

+> Enter number works of excerpt for related course

- Member archive:

+> Enter number of member per page


- Member Single:


- Event archive:

+> Enter number of Event per page

+> Enter number words of excerpt to show


- Event Single:


44

+> Enter number of related event

+> Enter number works of excerpt for related event

- Font:

+> Check on checkbox to enable custom font for Body, you can select Font family, Font Weight,

Fonts Size for body

+> Check on checkbox to enable custom font for Main menu, you can select Font family, Font

Weight, Fonts Size for Main menu

+> Check on checkbox to enable custom font for Footer menu, you can select Font family, Font

Weight, Fonts Size for Footer menu

+> Check on checkbox to enable custom font for Widget title, you can select Font family, Font

Weight, Fonts Size for Widget title

+> Check on checkbox to enable custom font for Post title, you can select Font family, Font Weight,

Fonts Size for Post title

+> Check on checkbox to enable custom font for Post content, you can select Font family, Font

Weight, Fonts Size for Post content

+> Check on checkbox to enable custom font for Heading (H1, H2, H3, H4, H5, H6), you can select

Font family, Font Weight, Fonts Size for Heading (H1, H2, H3, H4, H5, H6).

- Custom CSS:

+> Enter the your custom CSS code

- Step 5: Save & Public: Click the Save & Publish button to ensure any changes you have made

to your Options are saved to your database. Once you click the button, the button text changes to

"Saved" telling you your settings have been saved.

45

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.

2. Contact Info: Display your contact information. This element used in Visual Composer -

Contact page. Then you can enter title, address, email, telephone and Save to Save Changes.

46

3. (Upside) Course Tad Grid 2 Cols: Display courses by category using grid layout 2 columns.

Just drag a widget to the area or sidebars you want to display. Then you can enter title for

widget, Select Course Categories which created in Dashboard Courses, Enter number of

course in each category and check on checkboxes if you want to show thumbnail, teacher,

readmore, and rate then click Save to Save Changes.

47

It shows in Course List 6 page as follow:

48

4. (Upside) Course Tad Grid 3 Cols: Display courses by category using grid layout 3 columns.

Just drag a widget to the area or sidebars you want to display. Then you can enter title for

widget, Select Course Categories which created in Dashboard Courses , Enter number of

course in each category and check on checkboxes if you want to show thumbnail, teacher,

readmore then click Save to Save Changes.

49

It shows in Course List 5 page follow:

50

5. (Upside) Course List Tab: Display courses by category using list layout. Just drag a widget to

the area or sidebars you want to display. You can enter title for widget, Select Course Categories

which created in Dashboard Courses, Enter number of course in each category then click

Save to Save Changes.

It shows in Course List 4 page as bellow:

51

6. Google Map: Display Google maps, this element used in Visual Composer - Contact page. Add

the element to the row, column you want to display.

Enter widget title, Latitude, Longitude, Height will be displayed in front end. Click Save button,

it will display as contact page

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

longitude

52

53

7. (Upside) Newsletter Feedburner: Display a newsletter form with feedburner service.

Dragging and dropping Upside Newsletter Feedburner widget to the sidebar or the area you

want to display.

Enter Title widget, description text, Feedburner URL then Save. It will display as Footer below:

54

8. (Upside) Recent Comment: Display recent comments. Dragging and dropping (Upside)

Recent Comment widget to the sidebar or the area you want to display.

Enter Title widget, enter number of comments to show, and if checked, it will be shown post

title, then Save. It will display as Right sidebar below:

55

9. (Upside) Recent Posts: Display recent posts. Drag and drop this widget to the sidebar or the

area you want to display.

56

Enter Title widget, Select categories Or/ And tags, select Order, orderby, and enter number of

post to show then Save. It will display as Right sidebar below:

10. (Upside) Search Course: Display Search courses form. Dragging and dropping (Upside)

Search Course widget to the sidebar or the area you want to display.

57

Enter Title widget then Save. It will display as Right sidebar below:

58

11. (Upside) Social Links: Display your social links. Drag and drop Upside Social Links widget to

the sidebar or the area you want to display. You can enter title for widget, number of social links,

then select icon, link text, link URL for social link and Save.

59

It will display as Footer style: White background following:

And Footer style: Dark background below:

12. (Upside) Social Statistic: Show socials (Facebook, Google plus, Twitter) counter. Drag and

drop (Upside) Social Statistic widget to the sidebar or the area you want to display. Enter title

for widget, Enter Facebook page, Facebook App Token, Twitter Consumer Key (API Key),

Twitter Consumer Secret (API Secret), Twitter Access token, Twitter Access Token Secret,

Twitter Screenname, Google Plus Page ID, Google Plus API Key then click Save to Save Changes.

60

It displays as below:

61

13. (Upside) Tagline: Display some text and button. Dragging and dropping the widget to the

sidebar or the area you want to display. Enter text 1, text 2, Button text, Button link, upload

banner if you want then click Save to Save Changes.

It shows as Blog page below:

14. Tagline: Display some text and button. Used Visual composer to add Tagline element into row/

column where you want to display it and configure it.

Tagline setting:

+> Button Style: you can select styles: Pink button, Solid button, Solid button with pink border

when hover, Pink and Solid button, White and Solid button, Pink button with icon after title, or

Solid button with icon after title

62

+> Enter title

+> Enter description

+> Enter button text

+> Enter button link

With Button style: Pink Button, it shows as Faculty page follow:

63

With Button style: Solid button, it shows as About 1 page follow:

With Button style: White and Solid button, it shows as Landing page as follow:

With Button style: Pink button with icon after title, it shows as About 1 page follow:

64

With Button style: Solid button with icon after title, it shows as About 1 page follow:

With Button style: Solid button with pink border when hover, it shows as Home 3 page follow:

With Button style: Pink and solid button, it shows as Home 3 page follow:

65

15. (Upside) Testimonial Carousel: Display a list of testimonial with carousel effect. Dragging

and dropping the widget to the sidebar or Used Visual composer to add Testimonial Carousel

element into row/ column where you want to display it. Enter title for widget, number of

testimonial to show, select testimonial's tag, check to auto play slide, enter slide speed and

Save.

16. Testimonial Grid: Display grid testimonials. Used Visual composer to add Testimonial Grid

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.

66

67

Click Save Changes button to Save Changes, it displays as Home 1 page here:

68

17. List Post With More Link: Display list post with more link. Used Visual composer to add List

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

69

(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

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

+> Grid posts with three items per row, small thumbnail

+> Grid two items per row, small thumbnail

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

70

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

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

71

With layout Grid posts with three items per row, small thumbnail, it shows below:

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

72

18. List Post With Title: Display list post with title. Used Visual composer to add List Post with

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

(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

73

(2) Layout tab: You can choose layout:

+> List posts no thumbnail

+> Grid two posts per page, small thumbnail

+> List posts small thumbnail

+> Grid two posts per page, medium thumbnail

+> List posts no thumbnail, top title

Select Yes/ or No to show title icon

With layout List posts no thumbnail, it shows below:

74

With layout Grid two posts per page, small thumbnail, it shows below:

75

With layout List posts small thumbnail, it shows below:

76

With layout Grid two posts per page, medium thumbnail, it shows below:

77

With layout List posts no thumbnail, top title, it shows below:

78

19. Single Content: Display some text with image. Used Visual composer to add Single Content

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

upload your image and enter content then click Save Changes button.

79

It shows as Course Categories page here:

80

20. Slide One: Display slide by carousel effect. Used 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 Plugins in Upside Theme, Select button style (Blue

Button or Pink Button), enter slide speed, select Yes/ no to auto run slide then click Save

Changes button.

81

It shows as Home 1, Home 2 page with Blue button style or Pink button style here:

82

21. Slide Two: Display Slides. Used Visual composer to add Slide Two 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 Plugins in Upside Theme, Select button style (Blue Button or Pink Button),

enter slide speed, select Yes/ no to auto run slide then click Save Changes button.

83

It shows as Home 3 page here:

22. Featured Post: Display detail of post. Used 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 Changes button.

84

It shows as Home 2 page here:

23. Featured Quote: Show quote content. Used 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 Changes button.

85

86

It shows as About 2 page below:

87

24. List Posts With Title And Description: Show list posts with title and description. Used

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.


+> Select one category or choose all categories

+> Select one tag or choose all tags


88

89

It displays as home 3 follow:

25. Posts Carousel: Show list posts with carousel effect. Used Visual composer to add Posts

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

(1) General tab:



+> Select one category or choose all categories

+> Select one tag or choose all tags


(2) Layout tab: You can choose element layout (Show excerpt and Hide excerpt)

90

91

With layout style Show Excerpt, It displays as home 3 follow:

92

With layout style Hide Excerpt, It displays as Faculty page follow:

26. Featured Content: Show content block. Used 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


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

93

94

With layout Position absolute image and select Blue Button style, it displays as home 2 follow:

With layout Default image and select Pink Button style, it displays as home 3 follow:

95

27. Featured Content Simple: Display simple content block. Used Visual composer to add

Featured Content Simple element into row/ column where you want to display it and configure

it. Enter title for widget, enter description, button label and button link then click Save

Changes button.

96

97

It displays as Home 2 as bellow:

98

28. Featured Content Video: Display video content block. Used Visual composer to add

Featured Content Video element into row/ column where you want to display it and configure

parameters it. Enter number of slide, select tags, enter speed, select Yes/ No to auto run slide.

Click Save Changes button to Save Changes. It displays as About 2 page bellow:

99

29. Introduce: Show introduction at landing page. Used Visual composer to add Introduce

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

(1) - Enter title

(2) - Enter description

(3) - Enter Button 1 label

(4) - Enter Button 1 link

(5) - Enter Button 2 label

(6) - Enter Button 2 link

(7) - Enter Scroll down label

100

101

Click Save Changes button to Save Changes. It displays as Landing page as bellow:

30. Other Info: Show other info. Used Visual composer to add Other Info element into row/

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

102

103

(1) General tab:



+> Enter button label


+> Upload your image

+> Enter image margin top

(2) Layout tab: Select layout

+> Center align

+> Left align

(3) Custom color tab:

+> Title color: select color for title

+> Description color: select color for description

It will be displayed as Landing page as below:

104

105

31. Upside Accordion: Show accordion content. Used Visual composer to add Upside Accordion

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

Shortcode content (use shortcode Upside_accordion)

106

Click Save Changes button to Save Changes, it displays here:

107

32. Upcoming Event Detail: Display upcoming event detail. Used Visual composer to add

Upcoming Event Detail element into row/ column where you want to display it and configure

parameters it. Enter title, enter ID of upcoming event to show, button text, and button link.

Note: Enter Id of upcoming event must ensure 2 parameters: Event id exist and Start date of the

event with id greater than the current date.

108

Click Save Changes button to Save Changes, it displays as Home 1 page here:

109

33. Upcoming Event Grid: Display grid upcoming event. Used Visual composer to add Upcoming

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

Enter title, select tag's event and enter number of total items to show.

110

Click Save Changes button to Save Changes, it displays as About 2 page here:

34. Latest Events: Display latest event. Used Visual composer to add Latest Events element into

row/ column where you want to display it and configure parameters it. Select layout (Two items

in row, One items in row, or Grid with date icon in left), enter title, select tag's event, enter

number of total items, and number words of excerpt to show. Click Save Changes button to

Save Changes.

111

With layout Two items in row, it displays as Home 3 page here:

112

With layout One items in row, it displays as Home 3 page here:

113

With layout Grid with date icon in left, it displays as Faculty page here:

35. Brand Grid: Display grid brands. Used 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.

114

Click Save Changes button to Save Changes, with Brands created in Using Plugins in Upside

Theme, they will be displayed as Home 1 below:

36. Brand Carousel: Display list of brands with carousel effect. Used 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.

115

Click Save Changes button to Save Changes, with Brands created in Using Plugins in Upside

Theme, they will be displayed as Home 3 below:

37. Services Grid: Display some services. Used Visual composer to add Grid Services element into

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

enter number of service, tag slugs, and enter button text, button link.

116

117

(1) General tab:



+> Enter tag slugs

+> Enter total items

+> Enter grid elements per row

+> Select layout to display, you can select one of five types: Grid 3 items with thumbnail per

row, or Grid 6 items with thumbnail per row, or Grid 3 items with icon per row, gray

background, or Grid 3 items with icon per row, white background, or Grid 3 items with

icon per row, gray background and two buttons

(2) Custom tab: Select color for block title and description.

Click Save Changes button to Save Changes.

If you choose Grid 3 items with icon per row, gray background layout, they will display

as Services page below:

118

If you choose Grid 3 items with icon per row, White background layout, they will be

displayed as About 1 page below:

If you choose Grid 3 items with thumbnail per row layout, it will display as Landing page

below:

If you choose Grid 6 items with thumbnail per row layout, it will display as Landing page

below:

119

If you choose Grid 3 items with icon per row, gray background and two button layout,

it will display as Course Categories page below:

120

38. Course Search: Display form search course. Used Visual composer to add Course Search


121

Configure parameters:

+> Enter Title

+> Enter short description


+> Enter button text

+> Enter hide fields ( enter s to hide Course title; enter utp-course-id to hide Course ID; enter

course-category-slug to hide Course category; enter utp-course-speakers to hide Course

speakers)

+> Select field items per row (you can select 1 item, 2 items, 3 items, 4 items, or 6 items to

display)

+> Select Button style: Pink button or Blue button

+> Enter More Link

If you choose Blue button style, it displays as Home 2 page below:

122

If you choose Pink button style, it displays as Home 1 page below:

123

39. Recent Course: Display recent course. Used Visual composer to add Recent Course element

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

description, select category, enter total of item, select hot style (Blue style or Pink style) then

click Save Changes.

124

If you choose Blue style, it displays as Home 2 page below:

125

If you choose Pink style, it displays as here:

126

40. Course Tabs: Display list courses by tabs. Used Visual composer to add Course Tabs element

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

category slugs (separate category slugs with commas), enter number of courses in each category

then click Save Changes.

127

It displays as Home 2 page below:

128

41. Hot Courses: Display list hot courses. Used Visual composer to add Hot Courses element into


enter total items then click Save Changes.

With Courses are created in Using Plugins in Upside Theme, It displays as Home 2 page below:

129

42. Featured Courses: Display featured courses. Used Visual composer to add Featured Courses


(1) Enter title

(2) Enter description

(3) Upload your image

(4) Enter Course duration text

(5) Enter Course duration value

(6) Enter Course level text

(7) Enter Button label

(8) Enter Button link

(9) Choose Button style (Pink button or Blue button)

130

131

It displays as Home 3 page below:

132

43. Member Carousel: Display member by carousel effect. Used Visual composer to add Member

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

Enter title, event ID, button text, button link then click Save Changes.

133

It displays as About 1 page here:

44. Member List: Display member list. Used Visual composer to add Member list element into

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

button text, button link then click Save Changes.

134

It displays as Services page here:

135

45. List Document: Display list document. Used 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), enter number of document in

each tag then click Save Changes.

With Document created in Using Plugins in Upside Theme. It displays as Document page

here:

136

46. Demo Grid: Display some demo pages. Used Visual composer to add Demo Grid element into


tags slug, total item, and a number of pages per row then click Save Changes.

137

138

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

47. FAQ List: Display some FAQ. Used 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 Changes.

139

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

140

48. Portfolio Grid: Display all Portfolios as grid. Used Visual composer to add Portfolio Grid


141

With Portfolios are created in Using Plugins in Upside Theme, It displays as Portfolio page

here

If you choose style Show title and description and choose 2 item in each row, it will

display as bellow:

142

If you choose style Show title and description and choose 3 item in each row, it will dislay

as bellow:

143

If you choose style Hide title and description and choose 4 item in each row, it will

display as bellow:

144

49. (Upside) Custom Menu: Display custom nav menu for megamenu items, it used to

for megamenu, Add the widget to the area that you want to display then configure the necessary

parameters for it.

Enter title or not, select menu is created at Appearance Menu, then Click Save button to Save

Changes. It will display as bellow:

145

50. (Upside) Grid Events: Display some events for megamenu items, it used to for megamenu,

add the widget to the area that you want to display then configure the necessary parameters for

it.

Enter title or not, select event tags and enter number of items to show, then Click Save button to

Save Changes. It will display as bellow:

146

51. (Upside) Custom bbPress Login: Custom login form with optional links to sign-up and lost

password pages, it used to for bbPress Login, Add the widget to the area that you want to display

then configure the necessary parameters for it.

147

Enter title, register URL (Link to your custom signup page), Lost Password URL (Link to your lost-

password page), then Click Save button to Save Changes. It will display as bellow:

148

G. Custom Shortcode Generator

It would be impossible 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.

Example: column 1/2-1/2

[row]

[col col=6]

1/2 columns

149

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]

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

150

+>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]

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]

151



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

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


[upside_accordion title="Standards, awards and goals"]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


[/upside_accordions]

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

152

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

[upside_toggles]

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



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

153

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

nulla.[/upside_toggle]

[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

nulla.[/upside_toggle]

[/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]










[/upside_price_tables]

154

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"

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

[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="#"

btn_link_target="_blank"][/upside_price_table]

[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="#" btn_link_target="_blank"][/upside_price_table]

[/upside_price_tables]

155

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" btn_show="1"][/upside_check_table]









156


[/upside_check_tables]

Example:

[upside_check_tables]

[upside_check_table title="List" features="Category 1|Category 2|Category 3|Category 4|All

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


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

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


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









[/upside_check_tables]

It is illustrated with image below:

157

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]

158

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]

159

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

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


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


160

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]

161

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

with styles:

162

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

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

163

The following image will illustrate for above shortcode:

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

164

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

shortcode:

165

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.

166

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

procedures listed below:

167

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.

168

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

169

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

170

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

1. Enter Brand's name

171

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

172

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.

173

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

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

4. Add new testimonial tag or assign existed testimonial tags

174

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)

4. Add new member department or assign existed member department

5. Upload featured image of member

175



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)

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

176

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


177

178

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



179

9. Landing page Post -Type

To create Landing page Post -Type, do the following steps:

Go to Dashboard Landing page Add New

1. Enter landing page name

2. Enter landing page ID ( ID of page to show); enter landing page URL

3. Add new landing page tag or assign existed landing page tags

4. Upload featured image of landing page



10. Course Post -Type

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

Go to Dashboard Course Add New

180

1. Enter course's name

2. Enter course's content

3. Enter course details ( course ID, start date, end date, duration, regular price, sale price, Text

before price, select Yes to is hot course, address, Contact Phone, Contact email, Speakers,

Download Button Text, Download Button Link, Link to WooCommerce product( Enter ID of

product), Join Button Text, Join Button Link( Link of Join button incase not link to any

product))

4. Add new course category or assign existed course categories

5. Upload featured image of course


Note: In case you enter ID of product, your single course will display price of WooCommerce

product is created in Product, if not, it will display string of regular price and sale price


181

182

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



183

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


184


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



185

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



186

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



187

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



188

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

189

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

- 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

190

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

+> 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:

191

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

192

193

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 in front-end 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, 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 part Slide One

Row 2



+> Row setting:

194

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 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 part List Post With More Link

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

it, following part Featured Post

Row 4

+> Layout setting: 1/1


+> Row setting:

195


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 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 part Featured Content

Row 6


196

+> 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 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 part List Post With More Link



Row 7



Padding right: 0px

+> Row setting:


Parallax: select Simple and upload your image

Margin top: 0 px

197

Margin bottom: 0 px





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

configure parameters for it, following 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 part List Posts With Title And Description

Row 9



+> Row setting:


198

Padding top: 50 px


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

for it, following 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 part Brand Grid

2. Create Home page 2

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



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

can also edit layouts in front-end using the “FRONTEND EDITOR”)



199






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 part Slide One

Row 2

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


+> Row setting:


Margin bottom: 0 px

Padding top: 80px



200

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

then configure parameters for it, following 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 part List Post With More Link

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

it, following part Featured Post

Row 4



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

201

Padding top: 80px





Row 5



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


Upload your background image





Row 6



+> Row setting:


202

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 part Recent Course

Row 7



+> Row setting:



Margin bottom: 0 px

Padding top: 80px






Row 8



+> Row setting:

203


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 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 part Hot Courses

204

3. Create Home page 3

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











Row 1



+> Row setting:

Row stretch: Stretch row and content ( no padding)

Margin bottom: 0 px

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

following part Slide Two

Row 2



205

+> Row setting:


Margin bottom: 0 px

Padding top: 80px




+> Click Add Element button to select Latest Events element at column 2/3 then configure

parameters for it, following part Latest Events

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

parameters for it, following part Posts Carousel

Row 3



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px





Row 4

206



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


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

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

Row 5



+> 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 part Services Grid

Row 6



207

+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 75px



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

following part Tagline

Row 7



+> Row setting:


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 part Recent Course

Row 8



208

+> Row setting:



Margin top: 0 px

Margin bottom: 0 px

Padding top: 75px





Row 9



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


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

for it, following part Featured Course

Row 10



209

+> Row setting:

Row stretch: stretch row

Parallax: select simple and upload your image

Padding top: 0 px


Margin top: 0 px

Margin bottom: 0 px





Row 11



+> Row setting:


Margin top: 0px

Margin bottom: 0px

Padding top: 80 px


+> Click Add Element button to select Upside Accordion element at 1/2 column then

configure parameters for it, following part Upside Accordion



210

Row 12



+> Row setting:


Margin top: 0px

Margin bottom: 0px


+> Click Add Element button to select Brand Carousel element then configure parameters

for it, following part Brand Carousel

4. Create Landing Page

To create Landing page, you can follow steps as below:










211

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


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

following part Introduce

Row 2



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px




212

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

following part Demo Grid

Row 3



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


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

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

following part Other Info

Row 4



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


213



Row 5



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Margin left: 0 px

Margin right: 0 px

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

214

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 part Other Info

Row 7



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 90px


Overlay color: #262c56



5. Creating Contact page

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



215









Configure customize contact page

You click Customize, at JavaScript tab, you check on checkbox Load Google-Maps API to load

google map

Configure parameters for Rows, Areas

Row 1

Area 1

+> Add Google Map widget then configure parameters for it, following part Google Map

Row 2

+/ Area 2.1

Add Contact Info widget then enter your text in text area then configure parameters for it,

following part Contact Info

+/ Area 2.2

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

part Text

216

6. Create About 1 Page

To create About 1 page, you can follow steps as below:










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

Row 1



+> Row setting: default



Row 2



+> Row setting:


217

Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px



+> Click Add Element button to select Member Carousel element then configure

parameters for it, following part Member Carousel

Row 3



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


Background color: #ed145b



Row 4



+> Row setting:


218

Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select Brand Carousel element then configure parameters

for it, following part Brand Carousel

Row 5



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 75 px


Background color: #2a3b6a

Background image: upload your image

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

parameters for it, following part Tagline

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

parameters for it, following part Tagline

219

7. Create About 2 Page

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










Configure parameters for Elements, Layouts, Rows, Columns of About 2 page

Row 1



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select WP Custom Menu element at 1/4 column then

configure parameters for it.

220

+> At 3/4 column, add Row element ( Place content elements inside the row) to use layout

2/3+ 1/3

+> Click Add Element button to select Featured Content Video element at 3/4 column

then configure parameters for it, following part Featured Content Video

+> Click Add Element button to select Text Block element at 2/3 column then configure

parameters for it, following part Featured Content Video

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


+> Click Add Element button to select Upcoming Event Grid element at 1/3 column then

configure parameters for it, following part Upcoming Event Grid

Row 2



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 30px



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

following part Brand Grid

221

8. Create Faculty Page

To create Faculty page, you can follow steps as below:










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

Row 1



+> Row setting:


Margin bottom: 0 px

Padding top: 80px


+> Click Add Element button to select Post Carousel element at 3/4 column then configure

parameters for it.

222

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

then configure parameters for it

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

parameters for it, following part List Post Title

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

parameters for it, following part List Post Title

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


+> Click Add Element button to select Latest Event element at 1/4 column then configure

parameters for it, following part Latest Event

+> Click Add Element button to select Social Statistics element at 1/4 column then

configure parameters for it, following part Social Statistics

+> Click Add Element button to select WP Categories element at 1/4 column then configure

parameters for it.

+> Click Add Element button to select Recent Coment element at 1/4 column then

configure parameters for it, following part Recent Coment

Row 2



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 70px



223

Background image: upload your background image




9. Create FAQ Page

To create FAQ page, you can follow steps as below:










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

Row 1



+> Row setting:


Padding top: 80px

224


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

following part FAQ List

10. Create Portfolio Page

To create Portfolio page, you can follow steps as below:




3. Add Elements (or add text block)






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

Row 1



+> Row setting:


Margin top: 0px

Margin bottom: 0px

225

Padding top: 80px


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

following part Portfolios Grid

Row 2



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 70px







11. Create Document Page

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




226







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

Row 1



+> Row setting:


Margin top: 0px

Margin bottom: 0px

Padding top: 80px


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

for it, following part List Document

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

for it, following part List Document

Row 2



227

+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 75px




12. Create Course Categories Page

To create Course Categories page, you can follow steps as below:










Configure parameters for Elements, Layouts, Rows, Columns of Course Categories

page

Row 1

228



+> Row setting:


Margin top: 0px

Margin bottom: 0px

Padding top: 80px


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

for it, following part Single Content

Row 2



+> Row setting:


Check on Full height row

Content position: Middle

Parallax: select simple type and upload your image frome library media

Margin top: 0px

Margin bottom: 0px

Padding top: 80px


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

it, following part Servives Grid

229

Row 3



+> Row setting:


Margin bottom: 0px

Padding top: 80px

+> Click Add Element button to select WP Text element then configure parameters for it.

Row 4



+> Row setting:


Margin top: 0 px

Margin bottom: 0 px

Padding top: 70px







230

13. Creating Single Post - Other pages

1. Go to Appearance Theme Option Layout Manager >> post: Select the layout for

your page: Single Post. Finally, click Save Options

2. Go to Appearance Theme Option Sidebar Manager, add new some sidebars

necessary

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

follows

Blog Bottom sidebar

Drag (Upside) tagline into Blog Bottom sidebar.

Blog Right sidebar

Drag (Upside) Search Course into Blog Right sidebar

Drag (Upside) Testimonial Carousel Simple into Blog Right sidebar

Drag (Upside) Recent Posts into Blog Right sidebar

Drag (Upside) Social Statistic into Blog Right sidebar

Drag Categories into Blog Right sidebar

Drag (Upside) Recents Comments into Blog Right sidebar

Course tab grid 3 columns sidebar

Drag (Upside) Grid tab grid 3 cols into Course tab grid 3 columns sidebar

Course tab grid 2 columns sidebar

Drag (Upside) Grid tab grid 2 cols into Course tab grid 2 columns sidebar

Forum sidebar

Drag (bbPress) Login Widget into Forum Sidebar.

Drag Tag Cloud into Forum Sidebar.

Drag (Upside) Socials Statistic into Forum Sidebar.

231

Drag Categories into Forum Sidebar.

Footer 1 Sidebar

Drag (Upside) Advertistment into Footer 1 Sidebar

Drag Text into Footer 1 Sidebar

Drag (Upside) Advertistment into Footer 1 Sidebar

Footer 2 Sidebar

Drag Custom Menu into Footer 2 Sidebar

Footer 3 Sidebar

Drag Custom Menu into Footer 3 Sidebar

Footer 4 Sidebar

Drag (Upside) Newsletter Feedburner into Footer 4 Sidebar

Drag (Upside) Social Link into Footer 4 Sidebar

Copyright Sidebar

Drag Text into Copyright Sidebar

Course Content sidebar

Drag (Upside) Course Tab List into Course Content sidebar

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

232

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

233

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

- 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

234

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

235

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

Click "Install Now" to install plugin

Click "Activate Plugin"

236

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.

237

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

238

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.

239

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/

240

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

241

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

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/