EduPro Setup Guide

How to set up EduPro theme to look like the demo

First, you need to install the theme.Please follow below steps to install the theme.

1. Please go to Appearance–>theme and click on “Add New” button

Install theme_1

2. Now, click on “Upload Theme” button

Install theme_2

3. click “Browse” button to upload the theme zip file and click “Install Now” button

Install theme_3

4. Your theme will be installed

 

A : How to create Header

If you refer to the demo of EduPro theme, Header includes

a. Menu

b. Search box and

c. Logo with description

So, first, we will create a menu for our site. To do so, we should have some pages. Please follow below steps to add Pages:

1. Go to “Menu” and select “Pages–>Add New” option. This will open form to add pages.

1_add_page_link

2. For Now, Add Title and click “Publish” button.

2_add_page

3. Create 5 pages with title Home, Our Courses, About Us, Contact Us and News

3_added_5-pages

 

Create Menu.

1. Go to Appearance–>Menu. This will open a menu details page.

2. Click on “create a new menu ” link.

3. Add “Menu name” ex. Main Menu and click on “Create Menu” button.

4. Check the pages you want to add to the menu and click “Add to Menu” button.

5. Drag each menu item up and down to make it in proper order like the demo.

6. Select the “Primary Menu” option from Menu setting and Save Menu.

4_create_menu

Set up the Header.

1. Go to Appearance–>Theme option–>Header and drag and drop “Logo + Description ” element in Active element.

2. Go to “Header option” and turn on “Custom Logo” option and upload a logo here.

3. In the same “Header option” section, turn on the “Search Bar” option and click on “Save Option” button to save the changes.

4. Now go to Design–>Layout option and turn “On” the “Responsive Design” and “Gallary Lightbox” option.

5. Add width “1230” in “Max Width” Textbox.

6. Move to “Typography Option” and select font size to 14. Select the font to “Ubuntu” for Typography option.

7. Select “Open Sans” for “Font Family for headings” option.

7. Save the changes. (Refer to images given below)

5_create_header

6_set_header_design

B : How to create Home Page

Change Reading Setting:

1. First of all, go to Setting–>Reading. Select a static page option to “Front page display”.

2. Select “Front Page” as ‘Home” page and “Post page” as “News” page

7_reading_setting

Home Page Setting:

1. Go to “Pages–>All pages” option and select your “Home” page.

2. Select “Page Layout” option to full width.

3. Drag and drop below elements in “Active Elements” panel in the below order.

-Cyberchimps Slider

-Boxes

-Product

-Recent Post

-Widgets

-Portfolio

8_home_page_layout

Cyberchimps Slider Setting:

1. First, you will have to create a slider category. To do so, please go to Slides–>Slide category.

2. Add category ex: Home-slider and click “Add New Slide Category” option to save the category.

9_add_slide_category_link

10_slide_category

3. Go to Slides–>Add new. This will create a form to add Slides. Add Title, Image, Slider caption and Slider Text.

4. Turn “On” the “Title” and “Caption” Option. Select a slide category for ex: “Home-slider ” which we have created earlier (option available under publish/update button).

4. Click update/publish button to save changes.

5. Click on “Add new” option again and add another slide. Add as many slides you require.

6. Save your slides.

11_add_slides

7. Now go to “Page–>All pages” and select your “Home” page. Move down and select “Cyberchimps Slider option”

8. Select “Home-slider ” (the category which you have created) for “Custom Category” option.

9. Select “Slider Type” to “Full” and “Slider height” to 600.

10. Save the changes.

12_slider_setting_hp

Boxes Setting:

1. First, you will have to create a Boxes category. To do so, please go to Boxes–>Boxes category.

2. Add category ex: “Home-page-boxes” here and click “Add New Boxes Category” option to save the category.

13_add_box_category

3. Go to Boxes–>Add new. This will create a form to add Boxes. Add Title, Box Text and Image here. Select a box category for ex: “Home-page-boxes” category which we have created earlier (option available under publish/update button). (size of image on demo : 71 × 64)

4. Click update/publish button to save changes.

5. Click on “Add new” option again and add another box. Add at least 4 boxes.

6. Save your changes.

14_add_boxes

7. Now go to “Page–>All pages” and select your “Home” page. Move down and select “Boxes Option”

8. Please select the category for ex. “Home-page-boxes” category for “Boxes Category” option.

9. select “Number of boxes” to 4, and add Title and Description.

10. Save the changes.

15_boxes_setting_hp

Product setting:

1. Now go to “Page–>All pages” and select your “Home” page. Move down and select “Product Option”

2. Select “Product Layout” text to “Left”. Further, add Product Title, Product Text, and Product Background Image.

3. select “Product button type” to “button”

4. Save the changes.

16_product_setting_hp

Recent Post Setting.

To set Recent Post, you first need to create post category and add this category to the post. (Similar to boxes section which you have created.)

1. First, you will have to create a Post category. To do so, please go to Post–>Category.

2. Add category ex: “latest-courses” here and click “Add New Category” option to save the category.

17_add_post_category

3. Now go to “Post–>Add New” This will create a form to add Posts. Add Title, Description and turn “On” the title option on this page.

4. Add featured image to this post (option available under ‘Tags’ section). Select a category for this post for ex: “latest-courses” which we have created. (size of image on demo : 372 × 271)

5. Click update/publish button to save changes.

6. Click on “Add new” option again and add another Post. Add at least 6 posts and don’t forget to add featured image and category to each post .

18_add_post

7. Now go to “Page–>All pages” and select your “Home” page. Move down and select “Recent Post Option”

8. Turn “On” the “Title”, add Title to “Recent Post Title” option, select post category as “latest-courses” which we have created.

9. Turn on the “Images” option, set “Number of Recent Post To Show” to 3, and add some Text.

10. save the changes

19_recent_post_hp

Widget Setting:

1. You will not find the setting for this section on home page. You need to go to Appearance–>Widgets.

2. Here you will find two containers (Box left and Box right) at the right-hand side.

3. Drag and drop “EduPro Category Post” widget from the left-hand side in “Box Left”. Add “Title” and select a category for the widget in it. Save the changes.

4. Drag and drop “Text” widget in “Box right” from the left-hand side in “Box Right”. Add Title and any form Html code or shortcode here. You can add below shortcode in the content area and save the changes

Shortcode:

[contact-form-7 id=”35″ title=”Student Form”]

*Note. You can add any widgets to any of the box based on your need.

20_widget_area

21_box_left-right_widget

22_box_left-right_widget_added

Portfolio Setting:

1. First, you will have to create a Portfolio category. To do so, please go to Portfolio–> Portfolio category.

2. Add category ex: “Home-portfolio” here and click “Add New Portfolio Category” option to save the category.

23_portolio_category_added

3. Go to Portfolio–>Add new. This will create a form to add Portfolio. Add Title, Caption (description) and Image here. Turn “On” the “Lightbox” option.

4. Select a Portfolio category for ex: “Home-portfolio” which we have created earlier (option available under publish/update button).(size of image on demo : 81 × 81)

5. Click update/publish button to save changes.

6. Click on “Add new” option again and add another Portfolio. Add at least 2 portfolios.

7. Save your changes.

24_added_portfolio

8. Now go to “Page–>All pages” and select your “Home” page. Move down and select “ Portfolio Option”

9. Please select the category for ex. “Home-portfolio” in “Select a Categories” dropdown option. Select “Three” images per row, and Turn “On” the “Portfolio Title”

10. Add “Title” and “Background Image” for this section. You can keep the default image as it is.

11. Save the changes.

25_portfolio_setting_hp

C : Create Footer

The footer is mostly created by adding widgets in the footer area.

1. Please go to Appearance–>Widgets. Here you will see footer widgets container.

2. Drag and drop “Pages” and “Text” widget in it.

3. Add “Title” to “Pages” widget, select “Page Title” for “sort by” dropdown option and set “Exclude” option to 2,3.

4. You will have to add a Newsletter plugin to add a newsletter widget. The Newsletter plugin creates a Newsletter widget, so you can drag and drop it in the footer section. You will find the plugin on below links

Newsletter

5. Save the details.

26_footer_widget

5. To add Social icons in the footer, go to Appearance–>Theme option–>Header–>Social Icons.

6. Select the “Icon Style” and turn “On” Facebook, Twitter, Google, and Youtube option. Add link in the each Textbox and save the changes.

7. Check on the site for the result. If you are unable to see footer widgets,

Please go to Appearance–>Customize–>Footer and check footer widget. Save the changes and check for the result.

OR

Please go to Appearance–>Theme Option–>Footer–>Footer widgets and Turn “On” the footer widgets option. Save the changes.

27_social_icon_footer

28_footer_theme_option_setting

29_footer_customizer_setting

That’s all on the Home page. Now you can check for the result on the site.

D : Create Sidebar

Theme support both left and right sidebar. You can use any one of them or both on a single page. You can create sidebar in Appearance–>Widgets. Please follow below steps to create sidebars

1. Go to Appearance–>Widgets. Here you will find two containers “Sidebar Left” and “Sidebar Right”.

2. Drag and drop “Search” and “EduPro Category Post” widget in “Sidebar Left”.

3. Add a title to “Search” and “EduPro category post” widget and select category for “Post” widgets.

4. Drag and drop “Search” and “Calendar” widget in “Sidebar Right”.

5. Add “Title” to both the widgets.

6. Save the setting.

30_create_sidebar

E : Create About Us page.

Setting for this page are available on the “About Us” page which we have created. You can find it here : “Page–>All pages” and select “About Us” page.

Please follow below steps to set up About-us page.

1. Please go to “Page–>All pages” and select your “About Us” page.

2. Select a “content with right sidebar” option to “Select Page Layout” option.

3. Turn “On” the page title and add “HTML Box” into the Active element panel in Page Elements option. This will create a “Html Boxes” option below it.

4. Add “Custom Html” text and “Set Size” to 100%.

5. Add title and description in “Teacher section Details”

6. Select template as “About Page”. (option available in “Page Attribute” section below “Update” button)

7. Add a “Featured Image” to this page. The image of banner size will be a good one. (size of image on demo : 1600 × 262)

8. Click Update button to save the changes.

9. Now check About Us page on your site.

31_about-us_page

32_about-us_page

 

F : Create Our courses page.

Setting for this page is available on the “Our Courses” page which we have created. You can find it here : “Page–>All pages” and select “Our Courses” page. Please follow below steps to set up this page.

1. Please go to “Page–>All pages” and select your “Our Courses” page.

2. Select a “content with left sidebar” option to “Select Page Layout” option.

3. Turn “On” the “Page Title” and add “Blank Space”, “Magazine” and “Video” element in Active element panel.

4. Move to “video” section below “Page Option” section. Add “Video Title” and “Video Link” here.

5. Move to “Magazine Option” section and turn “On” the “Sidebar” and “Featured Image” option.

6. Select category as “latest-courses” which we have created earlier.

7. Set “Number of Columns” to 2, “Number of Rows” to 4 and “Number of Wide Post” to 1.

8. open “Blank space” section and set blank space height as 50.

9. Select template as “About Page”. (option available in “Page Attribute” section below “Update” button)

10. Add a “Feature Image” to this page. The image of banner size will be a good one. (size of image on demo : 1600 × 262)

11. Click Update button to save the changes.

12. Now check About Us page on your site.

33_our-courses_page

34_our_courses_magazin_setting

35_our_courses_video-blnkpage_setting

G : Create Contact Us page.

Setting for this page are available on the “Contact Us” page which we have created. You can find it here : “Page–>All pages” and select “Contact Us” page. Please follow below steps to set up this page.

1. Please go to “Page–>All pages” and select “Contact Us” page.

2. Select a “content with right sidebar” option to “Select Page Layout” option.

3. Turn “On” the “Page Title” and add “Google Map” and “Html Box” element in Active element panel.

4. Move to “Html Box Options” and add “Custom Html” in it. You can add below code in “text” tab of the “Custom Html” editor, to look similar to demo content.

Code:

<h1 style=”text-align: center;”><strong>Contact Us</strong></h1>

<p style=”text-align: center;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>

<p style=”text-align: center;”> tempor incididunt ut labore et dolore magna aliqua.</p>

<hr />

<p style=”margin-left: 344px;”>[contact-form-7 id=”107″ title=”Contact Us”]</p>

5. Set Size to 100%.

6. Now open “Google Maps” Setting section. Add Title to this section

7. Add iframe code in “Text” section of “Map Embed iframe” option. Below is the code of the demo site. You can add it in “Text” tab of editor

Code:

<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387145.86645180546!2d-74.25820099260999!3d40.70531102328323!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b:0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sin!4v1449467194352″ width=”1400″ height=”350″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

8. Select template as “Default Template”. (option available in “Page Attribute” section below “Update” button)

9. Click Update button to save the changes.

10. Now check About Us page on your site.

36_contact-us_page

37_contact-us_page_box_option

38_contact-us_page_map_option

VII: How to create News page.

The News page is a blog post page which we have created. We have set the “Post page” as “News” in the setting –> Reading –> Front page displays option.

The main setting for this page will be available in Appearance–>Theme option–>Blog.

But before that

1. Go to Pages–>All pages and select “News” page. Here, Select “Page Layout” as content with right sidebar. Turn “On” the “Page Title” and Drag and drop the “Page” element in active element section.

2. Save the changes.

3. Now, go to Appearance–>Theme option–>Blog. Here, Drag and drop “Post Page” element in active element section.

4. Now select “Blog Option” under the “Blog Section”. Select a page layout as “content with left sidebar”

5. Turn on the following options

– Featured Images

– Post Byline Author

– Post Byline categories

– Post Byline date

– Post Byline Comment

– Post Byline Tags

6. Click save option to save the changes.

39_new_page

All pages are Set.

H : Create Single Post Page Template.

1. Go to Appearance–>Theme option–>Templates–>Single Post.

2. Select a page layout as “content with right sidebar”

3. Turn on the following options

– Post Title

– Featured Images

– Post Byline Author

– Post Byline categories

– Post Byline date

– Post Byline Comment

– Post Byline Tags

4. Click save option to save the changes.

40_single_post_page

Categories: