“upside education – responsive wordpress theme …€¦ · 1 “upside education – responsive...
TRANSCRIPT
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.
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
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.
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:
- Step 1: Click Appearance Theme option Sidebar Manager
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 Appearance Theme option Sidebar Manager
- Step 1: Click on sidebar name you want to delete
- Step 2: Click Delete on the below of the sidebar name you want to delete.
Finally, Click Save Options button to save.
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
- Footer 2: You can add a widget for Footer 2
- Footer 3: You can add a widget for Footer 3
- Footer 4: You can add a widget for Footer 4
- 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:
+> Check on options metadata to show them or not
+> 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
+> Check on options metadata to show them or not
- Course Single:
+> Check on options metadata to show them or not
+> Enter number of related course
+> Enter number works of excerpt for related course
- Member archive:
+> Enter number of member per page
+> Check on options metadata to show them or not
- Member Single:
+> Check on options metadata to show them or not
- Event archive:
+> Enter number of Event per page
+> Enter number words of excerpt to show
+> Check on options metadata to show them or not
- Event Single:
+> Check on options metadata to show them or not
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 of post to show
+> 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.
+> Enter description
+> Select one category or choose all categories
+> Select one tag or choose all tags
+> Enter number of post to show
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:
+> Enter title for widget.
+> Enter description
+> Select one category or choose all categories
+> Select one tag or choose all tags
+> Enter number of post to show
(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 title for widget.
+> Enter description
+> Enter button label
+> Enter button link
+> Upload your image
(2) Layout tab:
+>You can choose element layout: (Position absolute image or Default image)
+>You can choose button style: (Pink Button or Blue Button)
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 title for widget.
+> Enter description
+> Enter button label
+> Enter button link
+> 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 title for widget.
+> Enter description
+> 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
element into row/ column where you want to display it and configure parameters it.
121
Configure parameters:
+> Enter Title
+> Enter short description
+> Enter 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
row/ column where you want to display it and configure parameters it. Enter title, description,
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
element into row/ column where you want to display it and configure parameters it.
(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
row/ column where you want to display it and configure parameters it. Enter title, description,
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
element into row/ column where you want to display it and configure parameters it.
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 title="Tab title 2"]Tab content 2[/upside_tabs]
[upside_tabs title="Tab title 3"]Tab content 3[/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_tab title="Tab 2"]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_tab title="Tab 3"]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_accordion title="Accordion title 2"]Accordion content 2[/upside_accordion]
[upside_accordion title="Accordion title 3"]Accordion content 3[/upside_accordion]
[/upside_accordions]
Example:
[upside_accordions icon_pos="right"]
[upside_accordion title="The quality of our services"]Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent eget ligula mollis, aliquam ligula non,Pellentesque feugiat in urna id
varius. Curabitur lobortis eleifend viverra. Nulla aliquam magna quis magna. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Praesent eget ligula mollis, aliquam ligula
non[/upside_accordion]
[upside_accordion title="Our promise to our clients"]Lorem ipsum dolor sit amet, consectetur
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="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
non[/upside_accordion]
[/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_toggle title="Toggle title 2"]Toggle content 2[/upside_toggle]
[upside_toggle title="Toggle title 3"]Toggle content 3[/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_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_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_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]
[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]
[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]
[upside_check_table title="Column title"
features="check|check|uncheck|uncheck|Description" btn_title="Buy now" btn_link_to="#"
156
btn_link_target="_blank" btn_show="1"][/upside_check_table]
[/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"
btn_show="0"][/upside_check_table]
[upside_check_table title="title" features="check|check|check|uncheck|Description"
btn_title="Buy now" btn_link_to="#" btn_link_target="_blank"
btn_show="1"][/upside_check_table]
[upside_check_table title="title" features="check|check|uncheck|uncheck|Description"
btn_title="Buy now" btn_link_to="#" btn_link_target="_blank"
btn_show="1"][/upside_check_table]
[upside_check_table title="title" features="check|check|uncheck|uncheck|Description"
btn_title="Buy now" btn_link_to="#" btn_link_target="_blank"
btn_show="1"][/upside_check_table]
[upside_check_table title="title" features="check|check|uncheck|uncheck|Description"
btn_title="Buy now" btn_link_to="#" btn_link_target="_blank"
btn_show="1"][/upside_check_table]
[/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"
link="#" target=""][/upside_button]
Large: [upside_button class="kopa-button pink-button large-button kopa-button-icon"
link="#" target=""][/upside_button]
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
6. Click Update button to finish
You can see the following illustration:
After clicking to "select icon for service", the list of icon picker will be displayed on the screen, select
the icon you want.
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
6. Click Update button to finish
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
6. Click Update button to finish
You can see the following illustration.
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
7. Click Update button to finish
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
You can see the following illustration.
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
6. Click Update button to finish
You can see the following illustration.
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
5. Click Update button to finish
You can see the following illustration.
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
6. Click Update button to finish
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
You can see the following illustration.
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
6. Click Update button to finish
You can see the following illustration.
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
5. Click Update button to finish
184
You can see the following illustration.
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)
4. Click Update button to finish
You can see the following illustration.
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
5. Click Update button to finish
You can see the following illustration.
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)
4. Click Update button to finish
You can see the following illustration.
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
4. Click Update button to finish
You can see the following illustration.
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
+> Layout setting: 12 columns -1/1
+> Column setting: Default
+> 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
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin bottom: 0 px
Padding top: 50px
Padding bottom: 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
+> Column setting: Default
+> Row setting:
195
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
Background color: #f2f4f5
+> Click Add Element button to select Course Search element then configure parameters
for it, following part Course Search
Row 5
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 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
+> Layout setting: 1/3+ 2/3
196
+> Column setting: Column 2/3:
Padding top: 60px
Padding bottom: 60px
Padding Left: 15px
Padding right: 15px
Background color: #ffffff
+> Row setting:
Row stretch: Stretch row
Margin bottom: 0 px
Background color: #f2f4f5
+> 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
+> 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
+> Layout setting: 2/3+ 1/3
+> Column setting: Column 1/3:
Padding right: 0px
+> Row setting:
Row stretch: Stretch row
Parallax: select Simple and upload your image
Margin top: 0 px
197
Margin bottom: 0 px
Overlay color: rgba(23,55,110,0.7)
Overlay color before: rgba(19,16,47,0.4)
+> Click Add Element button to select List Post With More Link element at column 2/3
then configure parameters for it, following part List Post With More Link
+> Click Add Element button to select Featured Quote element at column 1/3 then
configure parameters for it, following part Featured Quote
Row 8
+> Layout setting: 1/1
+> 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
+> Layout setting: 1/1
+> Column setting: default
+> Row setting:
Row stretch: default
198
Padding top: 50 px
Padding bottom: 50 px
+> Click Add Element button to select Testimonial Grid element then configure parameters
for it, following part Testimonial Grid
Row 10
+> Layout setting: 1/1
+> Column setting: default
+> Row setting:
Row stretch: Stretch row
Padding top: 30 px
Padding bottom: 30 px
Margin bottom: 0 px
Background color: #f2f4f5
+> 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:
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
199
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 2
Row 1
+> Layout setting: 12 columns -1/1
+> Column setting: Default
+> 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
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
Background color: #f2f4f5
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
+> Click Add Element button to select List Post With Title element at column 2/3 then
configure parameters for it, following part List Post With Title
Row 3
+> Layout setting: 2/3+ 1/3
+> Column setting: Column 2/3:
Padding top: 50px
Padding bottom: 50px
+> Row setting:
Row stretch: Stretch row
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
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
201
Padding top: 80px
Padding bottom: 80px
Background color: #f2f4f5
+> Click Add Element button to select Course Search element then configure parameters
for it, following part Course Search
Row 5
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 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
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
202
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
Background color: #f2f4f5
+> Click Add Element button to select Recent Course element then configure parameters
for it, following part Recent Course
Row 7
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Parallax: select Simple and upload your image
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
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 8
+> Layout setting: 1/2+1/2
+> Column setting: default
+> Row setting:
203
Row stretch: Stretch row
Margin top: 0px
Margin bottom: 0px
Padding top: 80 px
Padding bottom: 80 px
Background color: #f2f4f5
+> Click Add Element button to select Course Tabs element at 1/2 column then configure
parameters for it, following part Course Tabs
+> Click Add Element button to select List Post With Title element at column 1/2 then
configure parameters for it, following part List Post With Title
Row 9
+> Layout setting: 1/1
+> Column setting: default
+> Row setting:
Row stretch: stretch row
Padding top: 0 px
Padding bottom: 80 px
Margin bottom: 0 px
Background color: #f2f4f5
+> 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:
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 3
Row 1
+> Layout setting: 12 columns -1/1
+> Column setting: Default
+> 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
+> Layout setting: 1/3+2/3
+> Column setting: Default
205
+> Row setting:
Row stretch: Stretch row
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
+> Click Add Element button to select List Post With Title element at column 2/3 then
configure parameters for it, following part List Post With Title
+> 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
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
Background color: #f2f4f5
+> Click Add Element button to select Course Search element then configure parameters
for it, following part Course Search
Row 4
206
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 50px
+> 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
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
+> Click Add Element button to select Services Grid element then configure parameters for
it, following part Services Grid
Row 6
+> Layout setting: 1/1
+> Column setting: Default
207
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 75px
Padding bottom: 60px
Overlay color: rgba(6,26,53,0.7)
+> Click Add Element button to select Tagline element then configure parameters for it,
following part Tagline
Row 7
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
Background color: #f2f4f5
+> Click Add Element button to select Recent Course element then configure parameters
for it, following part Recent Course
Row 8
+> Layout setting: 1/1
+> Column setting: Default
208
+> Row setting:
Row stretch: Stretch row
Parallax: select Simple and upload your image
Margin top: 0 px
Margin bottom: 0 px
Padding top: 75px
Padding bottom: 75 px
Overlay color: rgba(6,26,53,0.7)
+> Click Add Element button to select Tagline element then configure parameters for it,
following part Tagline
Row 9
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
+> Click Add Element button to select Featured Course element then configure parameters
for it, following part Featured Course
Row 10
+> Layout setting: 1/1
+> Column setting: default
209
+> Row setting:
Row stretch: stretch row
Parallax: select simple and upload your image
Padding top: 0 px
Padding bottom: 80 px
Margin top: 0 px
Margin bottom: 0 px
Overlay color: rgba(23,55,110,0.7)
Overlay color before: rgba(19,16,47,0.4)
+> Click Add Element button to select Featured Content element then configure
parameters for it, following part Featured Content
Row 11
+> Layout setting: 1/2+1/2
+> Column setting: default
+> Row setting:
Row stretch: Stretch row
Margin top: 0px
Margin bottom: 0px
Padding top: 80 px
Padding bottom: 80 px
+> Click Add Element button to select Upside Accordion element at 1/2 column then
configure parameters for it, following part Upside Accordion
+> Click Add Element button to select List Post With Title element at column 1/2 then
configure parameters for it, following part List Post With Title
210
Row 12
+> Layout setting: 1/1
+> Column setting: default
+> Row setting:
Row stretch: Stretch row
Margin top: 0px
Margin bottom: 0px
Padding bottom: 80 px
+> 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:
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
211
Configure parameters for Elements, Layouts, Rows, and Columns of Landing Page
Row 1
+> Layout setting: 12 columns -1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Parallax: select Simple and upload your image
Margin top: 0 px
Margin bottom: 150 px
Padding top: 90 px
Padding bottom: 0 px
+> Click Add Element button to select Introduce element then configure parameters for it,
following part Introduce
Row 2
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
+> Click Add Element button to select Services Grid element then configure parameters for
it, following part Services Grid
212
+> Click Add Element button to select Demo Grid element then configure parameters for it,
following part Demo Grid
Row 3
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 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
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
213
+> Click Add Element button to select Services Grid element then configure parameters for
it, following part Services Grid
Row 5
+> Layout setting: 1/2+1/2
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Margin left: 0 px
Margin right: 0 px
Padding top: 135 px
Padding bottom: 135 px
Padding left: 135 px
Padding right: 135 px
Background color: #f6f4f4
+> 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
+> Layout setting: 1/1
+> Column setting: Default
+> 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
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 90px
Padding bottom: 90 px
Overlay color: #262c56
+> Click Add Element button to select Tagline element then configure parameters for it,
following part Tagline
5. Creating Contact page
To create Contact page, you can follow steps as follows:
Go to Dashboard Pages Add New
1. Enter page's name
215
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 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:
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 About 1 page
Row 1
+> Layout setting: 12 columns -1/1
+> Column setting: Default
+> Row setting: default
+> Click Add Element button to select Services Grid element then configure parameters for
it, following part Services Grid
Row 2
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
217
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
Background color: #f2f4f5
+> Click Add Element button to select Member Carousel element then configure
parameters for it, following part Member Carousel
Row 3
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
Background color: #ed145b
+> Click Add Element button to select Tagline element then configure parameters for it,
following part Tagline
Row 4
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
218
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 80px
+> Click Add Element button to select Brand Carousel element then configure parameters
for it, following part Brand Carousel
Row 5
+> Layout setting: 1/2+1/2
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 75 px
Padding bottom: 60 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:
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 About 2 page
Row 1
+> Layout setting: 1/4+ 3/4
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 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
configure parameters for it, following part Featured Quote
+> 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
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 30px
Padding bottom: 30px
Background color: #f2f4f5
+> 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:
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 Faculty page
Row 1
+> Layout setting: 3/4+ 1/4
+> Column setting: Default
+> Row setting:
Row stretch: default
Margin bottom: 0 px
Padding top: 80px
Padding bottom: 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
configure parameters for it, following part Featured Quote
+> 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
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 70px
Padding bottom: 65px
Background color: rgba(6,26,53,0.7)
223
Background image: upload your background image
Overlay color: rgba(6,26,53,0.7)
+> Click Add Element button to select Tagline element then configure parameters for it,
following part Tagline
9. Create FAQ Page
To create FAQ page, you can follow steps as below:
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 FAQ page
Row 1
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: default
Padding top: 80px
224
Padding bottom: 80px
+> 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:
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 Portfolio page
Row 1
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: default
Margin top: 0px
Margin bottom: 0px
225
Padding top: 80px
Padding bottom: 80px
+> Click Add Element button to select Portfolios Grid element then configure parameters for it,
following part Portfolios Grid
Row 2
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 70px
Padding bottom: 65px
Background color: rgba(6,26,53,0.7)
Background image: upload your background image
Overlay color: rgba(6,26,53,0.7)
+> Click Add Element button to select Tagline element then configure parameters for it,
following part Tagline
11. Create Document Page
To create Document page, you can follow steps as below:
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”)
226
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 Document page
Row 1
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: default
Margin top: 0px
Margin bottom: 0px
Padding top: 80px
Padding bottom: 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
+> Layout setting: 1/1
+> Column setting: Default
227
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 75px
Padding bottom: 75px
+> Click Add Element button to select Tagline element then configure parameters for it,
following part Tagline
12. Create Course Categories Page
To create Course Categories page, you can follow steps as below:
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 Course Categories
page
Row 1
228
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: default
Margin top: 0px
Margin bottom: 0px
Padding top: 80px
Padding bottom: 80px
+> Click Add Element button to select Single Content element then configure parameters
for it, following part Single Content
Row 2
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
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
Padding bottom: 80px
+> Click Add Element button to select Servives Grid element then configure parameters for
it, following part Servives Grid
229
Row 3
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin bottom: 0px
Padding top: 80px
+> Click Add Element button to select WP Text element then configure parameters for it.
Row 4
+> Layout setting: 1/1
+> Column setting: Default
+> Row setting:
Row stretch: Stretch row
Margin top: 0 px
Margin bottom: 0 px
Padding top: 70px
Padding bottom: 65px
Background color: rgba(6,26,53,0.7)
Background image: upload your background image
Overlay color: rgba(6,26,53,0.7)
+> Click Add Element button to select Tagline element then configure parameters for it,
following part Tagline
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
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
240
flickrfeed
Image demo get from Pexels, Pixabay, Photodune with CC0 License
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