UPSIDE EDUCATION RESPONSIVE WORDPRESS THEME DOCUMENTATION

Transcription

1 1 UPSIDE EDUCATION RESPONSIVE WORDPRESS THEME DOCUMENTATION Created: Sep 09/ 2015 Version: WordPress Theme Developed by Kopatheme 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 2 Table of Contents A. Theme Installation 8 B. Using Plugin in Upside theme Kopa Framework plugin WPBakery Visual Composer plugin Contact Form 7 plugin Menu Icons BbPress Envato WordPress Toolkit plugin WooCommerce plugin...26 C. Demo Content D. Theme Options Customization Theme Options Sidebar Manager Layout Manager Setup Home Page Setup Front Page Setup Page Setup Post Setup Search Page Set up Error 404 Pages Set up Portfolio Archive Pages Set up Single Portfolio. 36

3 3 9. Set up Course Archive Pages Set up Single Course Set up Member Archive Pages Set up Single Member Set up Event Archive Pages Set up Single Event Set up Product Archive Pages Set up Single Product Backup...38 E. Theme Customizer...40 F. Custom Widgets - Elements (Upside) Advertisement Contact Info (Upside) Course Tad Grid 2 Cols (Upside) Course Tad Grid 3 Cols (Upside) Course List Tab Google Map (Upside) Newsletter Feedburner (Upside) Recent Comment (Upside) Recent Posts (Upside) Search Course (Upside) Social Links (Upside) Social Statistic

4 4 13. (Upside) Tagline Tagline (Upside) Testimonial Carousel Testimonial Grid List Post With More Link List Post With Title Single Content Slide One Slide Two Featured Post Featured Quote List Posts With Title And Description Posts Carousel Featured Content Featured Content Simple Featured Content Video Introduce Other Info Upside Accordion Upcoming Event Detail Upcoming Event Grid Latest Events Brand Grid 113

5 5 36. Brand Carousel Services Grid Course Search Recent Course Course Tabs Hot Courses Featured Courses Member Carousel Member List List Document Demo Grid FAQ List Portfolio Grid (Upside) Custom Menu (Upside) Grid Events (Upside) Custom bbpress Login. 146 G. Custom Shortcode Generator 148 H. Create Categories - Posts - Post Type - Custom Menu Create Category Create Posts Brands Plugin Services Plugin Testimonials Plugin 173

6 6 6. Members Plugin Events Plugin Document Plugin Demo Plugin Course Plugin Portfolios Plugin Slide Plugin Forum Plugin Topic Plugin Reply Plugin FAQs Plugin Create Custom Menu 188 I. Create pages 1. Create Home page Create Home page Create Home page Create Landing Page Create Contact page Create About 1 page Create About 2 page Create Faculty page Create FAQ page Create Document page

7 7 11. Create Portfolio page Create Course Categories page Create Single Post J. How to setup the demo site K. Translation L. Updating The Theme 238 M. Sources and Credits. 239

8 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 downloaded-package.zip". The downloaded file consists of not only theme file but also demo data, document, etc. - Step 2: Unzip the file "upside 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 9 Click Upload Theme - Step 5: Click Choose File to find the file Admag.zip on your computer and click Install Now.

10 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 Ajaxpowered submitting, CAPTCHA, Akismet spam filtering and so on.

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

15 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 backend editor over it.

16 16

17 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 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 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 20 - Responsive Options tab: +> Width: you can select column width as 12 columns-1/1 or 1 column- 1/ > 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 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 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 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 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 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 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 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 s: 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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, , telephone and Save to Save Changes.

46 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 47 It shows in Course List 6 page as follow:

48 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 49 It shows in Course List 5 page follow:

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

53 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 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 55 9. (Upside) Recent Posts: Display recent posts. Drag and drop this widget to the sidebar or the area you want to display.

56 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 57 Enter Title widget then Save. It will display as Right sidebar below:

58 (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 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 60 It displays as below:

61 (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 62 +> Enter title +> Enter description +> Enter button text +> Enter button link With Button style: Pink Button, it shows as Faculty page follow:

63 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 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 (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 66

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

68 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 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 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 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 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 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 74 With layout Grid two posts per page, small thumbnail, it shows below:

75 75 With layout List posts small thumbnail, it shows below:

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

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

78 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 79 It shows as Course Categories page here:

80 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 81 It shows as Home 1, Home 2 page with Blue button style or Pink button style here:

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

86 86 It shows as About 2 page below:

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

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

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

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

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

97 97 It displays as Home 2 as bellow:

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

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

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

105 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 106 Click Save Changes button to Save Changes, it displays here:

107 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 108 Click Save Changes button to Save Changes, it displays as Home 1 page here:

109 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 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 111 With layout Two items in row, it displays as Home 3 page here:

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

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

117 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 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 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 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 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 122 If you choose Pink button style, it displays as Home 1 page below:

123 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 124 If you choose Blue style, it displays as Home 2 page below:

125 125 If you choose Pink style, it displays as here:

126 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 127 It displays as Home 2 page below:

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

131 131 It displays as Home 3 page below:

132 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 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 134 It displays as Services page here:

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

138 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 139 With FAQs created in Using Plugins in Upside Theme, It displays as FAQs page here:

140 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 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 142 If you choose style Show title and description and choose 3 item in each row, it will dislay as bellow:

143 143 If you choose style Hide title and description and choose 4 item in each row, it will display as bellow:

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