Welcome!
Welcome to Education Center Pro theme’s documentation page!
This documentation talks about how you can install the theme on your WordPress site, how to customize the theme to suit your needs, and a couple of other things that you’ll need to know to get going.
Recommended Server Requirements
Although having WordPress installed in your server is enough to install the theme, we recommend that your server meets the following versions:
- PHP version 7.0 or greater.
- WordPress version 5.1 or greater
Installing The Theme
Installing the theme is quite straightforward.
Download and save the ZIP file containing all the theme files. We’ll be using it later on.
Step 1. Go to your WordPress dashboard and head over to Appearance > Themes.
Step 2. Inside Themes, click on Add New (plus icon).
Step 3. Click on Upload Theme located near the top right.
Step 4. It will then ask you to choose the ZIP file for the theme. Navigate to and select the ZIP file for Education Center Pro theme that you downloaded earlier. Once done, click on Install Now.
Step 5. Click on the Activate button after the theme installation finishes.
That’s pretty much it! Reload your website to see the gorgeous theme in action!
Installing Recommended Plugins
Education Center Pro Theme requires five essential plugins to be installed for some components to work: BlossomThemes Email Newsletter for the Newsletter Section, Contact Form 7 for contact forms, One Click Demo Import, Tutor LMS and WooCommerce.
To install the plugins, follow the following steps:
Step 1. Go to your WordPress Dashboard. Head over to Plugins > Installed Plugins.
Step 2. On the top it displays a notice, asking you to install the recommended plugins. Click on Begin Installing Plugins.
Step 3. Select all the plugins and choose Install from the dropdown menu. Hit Apply.
Step 4. Head over to the Installed Plugins page once again. Select all the plugins, choose ‘Activate’ in the dropdown, and click on Apply as shown below.
That’s it. The plugins are now installed, activated, and ready to use. You’re all set!
Configuring The Theme
Now that you have the theme successfully installed, time to tweak the customization settings to make it your own!
As with all the other themes from GLThemes, Education Center Pro theme comes with tons of customization features to truly give you full control over the look of your website.
We’ll be exploring various customization options available in the theme’s customizer in this section.
Site Identity Options
While inside the customizer, navigate to Site Identity to edit settings such as Header title and tagline, add a (optional) logo, and add site icon (optional).
Inside Site Identity, you can add a logo via the Select Logo option, change your site’s title in the Site Title option, change the tagline in the Tagline option, and add a site icon in the Select Site Icon option.
You’ll be able to see the live preview as you edit the options.
Change Basic Appearance Settings
You can change the basic appearance of your website through the Appearance Settings option inside the customizer as shown below.
While inside the Appearance Settings option, you can change the Colors and Background Image in their respective settings.
Change Website Colors
While inside Appearance Settings, go to Colors.
Available Color Options:
- Header Text Color: Color for the header title and subtitle.
- Background Color: The color of the hindmost background. Color changed for visibility. Default is #FFFFFF(white).
- Primary Color: The accent color used in Education Center Pro. Most used color site-wide. Default is #377ef9.
Example Usage:
- Secondary Color: The secondary accent color. The second most used color site-wide. Default is #FFC221.
Example Usage:
- FallBack SVG Color: This is the default color of the SVGs which are found missing in the pages.
Typography Settings
Here you can change the Font Family, Font Weight, Font Size, and Text Transform style for Primary, Secondary, H1, H2, H3, H4, H5, and H6 fonts.
Font Family is the typeface of the font used.
Font Weight is the width or the boldness of a font.
Font Size determines the size of the letters in the font.
Text Transform allows you to add special characters to the font, namely uppercase, lowercase, underline, and capitalize.
Change Background Image
You can add or change the background image of the whole website through Background Image settings inside Appearance Settings. By default, no background image is set.
Click on Select Image and upload the image file to the uploader. After uploading the image, you can choose various Preset to change how the background image displays.
Front Page Settings
The front page is what makes or breaks the first impression of a visitor to your website. In the Education Center Pro theme, you’ve given numerous options to tweak and customize various sections of the front page.
The Front Page includes the following sections: Banner Section, Banner Box Section, About Section, CTA Section, Counter Section, Courses Features Section, Featured Courses Section, Instructors Section, FAQ Section, Events Section, Testimonial Section, Video Block Section, Blog Posts Section, Franchise Section, Partner Section, and Sort Section.
To start customizing the front page, go to Front Page Settings while inside the customizer.
Inside the Banner Section, you can choose among the following banner types: Static/Video, Banner as Slider, and Disable Banner Section.
In the Pro version, you’re given two types of banner options — Static/Video CTA Banner and Banner as Slider. You can choose to disable the option in the Banner Options.
This banner type includes an image or a video as the background banner, banner heading, banner subheading, and Call-To-Action (CTA) buttons.
Customization Options:
- Header Video: You can upload a video to use as the background video for the banner. Alternatively, you can also enter a URL for a YouTube video in the given field.
- Header Image: This is the background image for the banner. Try to use the recommended image size of 1920×863 pixels for best results. Optimized, small-size images are highly suggested because of their impact on site performance.
- Title, Description, CTA Buttons: Title is the main heading of the banner while Description is the subheading. What’s more, you change the labels for the CTA buttons through here.
This banner type uses your posts and their content as a slider/carousel.
Customization Options:
- Slider Content Style: You can set the slider to use Latest posts, posts from a specific Category, or you can add your own custom pages to display.
If you select Latest Posts, you can set how many posts to cycle through by specifying the number in the Number of Slides slider menu.
If you select Category, you can choose what category of posts to choose from from the Slider Category dropdown menu.
If you choose Pages option, you can add your own pages to cycle through via the Add New Pages button.
- Button Label: Change the button label in the front of the banner.
- Slider Auto: Enable to automatically scroll through the available slider pages/posts. Disable to require user button press to change the slider page.
- Slider Loop: Enable to infinitely cycle through the slider pages via looping. Disable to stop the slider as soon as it hits the last slider page.
- Slider Animation: Choose among 29 different slider animations. Default is Slide.
- Slider Speed: Specify how often the slider changes automatically (in miliseconds). Only effective if Slide Auto option is enabled. Default value is 5000.
Completely removes the banner section.
This section is where you can add a banner with an image accompanied by a short description. Extremely useful to highlight new offers, courses, or just about anything that you want your visitors to know first and foremost.
Customization Options:
- Add New Icon Text: This option allows you to add an icon image and a text for the banner. Click on Add New Icon Text button and it should gain you access to the following sub-settings.
Here you can upload an icon image of your choice as well as the title and short description for the banner.
About Section
This section is where you can add a short description of your company with an image.
Customization Options:
- Section Title, Subtitle, Description and View Button Options: This is where you can change the title, subtitle and description and description for the About Us section, which will be reflected in the banner. Moreover, you can add a link and a text to the “View More” button to direct your visitors to a relevant link.
- Upload an Image: You can change the image that you want to show in the About Us section from here.
Via the Image Alignment option, you can align the image to the left or right side of the page in the About section.
CTA (Call-To-Action) Section
CTA section allows you to include important links and details for your visitors and prompt action from them. This, in turn, helps generate more leads.
Customization Options:
- Section Title, Subtitle, Background Image, and Button Options: Here you can change or set the section’s title and subtitle, upload a background image (the default blue background is used if you don’t upload one), and edit the CTA button’s label and link.
This is what a typical CTA Section looks like:
Counter Section
Counters allow you to display certain quantitative figures in a banner-like fashion. The counter will “count down” from 0 to the number you set.
Go to Front Page Settings >Counter Section to begin setting up and customizing this section.
Customization Options:
- Add New Counter: This is where you can add new counters that you wish to be displayed. Click on Add New Counter button.
It will then ask you to customize the counter you just added.
Enter Number is where you add the number you wish to display. If the number is large, it’s a good idea to enter just the first two digits of the number because you can add a suffix (such as “K” for thousand) in the Enter suffix field.
Enter the title for your counter in the Enter Title field. It will be displayed right below the number.
Enter suffix, as mentioned earlier, is where you can add the suffix for huge numbers. It can be numbers like “K” or “M” or symbols like “$”.
Here’s an example of the counter settings and how it looks in the actual section:
Course Features Section
As a theme for educational websites, we think having a section like “Course Features” really makes it convenient to include relevant information on the homepage for your visitors to see.
Customization Options:
- Section Title and Subtitle: Set or change the title and the subtitle of the course here.
- Add new feature: To add features for your course, click the “Add new feature” button and it should open up a new panel of options like the one below.
You can add an image for the feature, enter a title and a description of the feature you want to include. Here’s an example:
- Upload an Image: Upload or change the image for the whole banner.
Piece everything together, and the section should typically look like this:
Featured Courses Section
This section is where you can place information about the courses your institution provides.
Education Center Pro theme requires Tutor LMS Plugin for this section to work properly. If you’re unsure about how to install the necessary plugins, please refer to this part of the documentation.
How to set up Tutor LMS
Tutor LMS is one of the popular LMS (Learning Management System) WordPress plugins out there. This plugin makes it extremely trivial to manage courses, registrations, quizzes, QnA, and essentially anything an educational institution would need to provide to its visitors.
Follow the steps below to set up a custom course for your website using Tutor LMS plugin:
Step 1. Go to your WordPress Dashboard and to Tutor LMS tab on the left sidebar.
Step 2. Click on Add New button. On the very next page, you’ll be prompted to enter details about your course. Let’s go through each of the options.
- Course Title: The title for your course.
- Permalink: The actual URL that directs to the course page. You can modify it to your own custom permalink.
- Description: This is where you provide details about the course you’re offering. This will be visible inside the course page.
- General Settings: Here you can input the number of maximum studens who can enroll in the course, the difficulty level of the course, an excerpt which is a brief description of the course (visible inside the course page), and set the author/instructor(s) of the course. Refer to this section to learn how to add new authors/instructors.
- Course Builder: Click on Add New Topic to add topics to your course.
You’ll be asked to enter the title and summary of the topic.
After entering all the fields, click on the Add Topic button again to finalize adding the topic.
- Additional Details: Here you can add the course duration (in hours, minutes, seconds), the benefits that the enrolled students can expect after completing the course, the requirements and the target audience for your course. All of these details will be displayed on the course page.
- Course Intro Video: If your course has an intro video that you want to include, you can optionally do so via this option.
Over on to the right sidebar are some important options to customize.
You can add your course to predefined categories, add tags that are related to the nature of your course, tweak Tutor settings such as the audience of the course and whether to enable or disable QnA, and most importantly, you can add a Featured Image for your course which will act as a thumbnail.
Step 3. Once everything’s set up, click on the Publish button to publish your course to your website.
That’s pretty much it! You will now see your course enlisted on the homepage in the Featured Courses section.
For more information on how to use Tutor LMS Plugin to the fullest, you might want to refer to their official documentation.
There are other customization options for the Featured Courses section; let’s briefly explore them.
Section Title is, as the name suggests, the title of the section as can be seen in the image above.
Section Subtitle is the blue text right above the title.
Select Courses Categories is where you can set which Categories of courses to display in the section. This requires you to have category already created for the courses.
Button Label is the text for the button.
Instuctors Section
Instructors Section is a carousel showcasing the instructors of the courses offered.
How To Add A New Instructor:
To add a new instructor/author, kindly follow the steps below:
Step 1: Go to your WordPress Dashboard and then into the Users tab in the left sidebar.
Step 2. Click on the Add New button to add a new user (instructor).
Step 3. Fill in the required details in the fields.
Step 4. Click on Add New to finish creating and adding the user. An email about their account creation will automatically be sent to the email address.
Once the user logs in, they can change customize their profile through the Users > Profile tab.
Customization Options:
- Section Title and Subtitle: Change the section’s heading and subheading.
- Number of Instructors to show: Change to set the number of instructors to show on this section. If the number is set higher than the current numbers of instructions, it will repeat the existing instructors.
After everything is set up, here’s what the section looks like:
FAQ Section
This section is where you can place the Frequently Asked Questions from your visitors.
Customization Options:
- Section Subtitle: The subheading for the section
- Section Title: The heading for the section
- Add new FAQ: You can add new FAQs through this option. For demonstration purposes, let’s make add a FAQ for the section.
Add your question in the Frequently Asked Question field.
Input the answer to the question in the Answers field.
That’s pretty much it. Here’s what the section looks like now:
Events Section
This section displays all the events pages that you’ve created.
To make an Event page, follow the steps below:
Step 1. Go to your WordPress dashboard and go to the Events section.
Step 2. Click on the Add New button to begin creating a new Event page. Add the page’s title and description in the respective fields as shown:
Step 3. Add additional info such as Start and End time for the event in the Additional Info section.
Step 4. Hit the Publish button. And that’s it, we’ve successfully created an Event page and it will be listed on the Events section.
Customization Options:
- Section Title: The heading for the section
- Section Subtitle: The subheading for the section
- Button Label: The text displayed in the CTA button for individual event block.
Testimonials Section
This section displays the all the Pages categorized as “Testimonials”.
How To Add A Testimonial Page:
Step 1. Go to WordPress Dashboard and go to Testimonials.
Step 2. Click on Add New to begin creating a new testimonial page. On the next page, add the name of the reviewer in the Title section and the review in the description field below it.
Step 3. On the left sidebar, you can set the designation of the reviewer, the name of the course, and the rating. You can also set the image of the testimonial in the Set Featured Image option.
Hit Publish and there we have it, a testimonial page!
Customization Options:
- Section Subtitle: The subheading for the section
- Section Title: The heading for the section
- Number of Testimonials to show: The number of total testimonials to show in the section at once. If this number is higher than the total number of testimonials pages, it will repeat the testimonials.
- Slider Auto: Enable this to make the slider automatically slide to cycle through the testimonials. Disabling will require user input to slide through the testimonials.
- Slider Loop: Enable to infinitely loop through the testimonials.
- Slider Speed: If the automatic slider option is enabled, you can set for the interval for cycling through the testimonials here.
- Sort Testimonial Meta: You rearrange the order of the elements of a testimonial by dragging and dropping the tabs in this option.
Video Block Section
Customization Options:
- Section Title, Content and Video Link: Change the title, description and the video link for the video to use in this section. If you leave the Video Link blank, it will use the default placeholder image background (see the image above).
Moreover, through the Upload a Backgrond Image option you change the default background image to any image of your liking.
Blog Posts Section
A section where your blog posts are displayed.
Customization Settings:
- Section Title and Subtitle: You can change the heading and the subheading for the section in the respective options.
- Popular Posts Sort: Sort the posts by Latest, Category and Popularity.
- Read More text: Change the text for the Read More button.
And this is what the section looks like, after making all the necessary changes.
Franchise Section
This is where you can highlight the franchises that your visitors might be interested in.
How To Add A Franchise:
Step 1. Go to the WordPress Dashboard and go to Alliances in the left sidebar.
Step 2. Click on Add New.
Step 3. Fill in the required details about the franchise. In the title and description section, input the name and description of the franchise respectively. You can add contact details of the franchise and relevant social media links in the Details section. Also, don’t forget to add an image from the right sidebar.
Hit the Publish button to finalize adding the franchise page.
Customization Options:
- Section Title and Subtitle: Section’s heading and subheading respectively.
- Number of Franchise Posts To Show: You can define how many franchises to show at once in this section.
- ReadMore text: The text in the Read More button.
Partner Section
Customization Options:
- Section Title and Subtitle: The heading and subheading of the section.
- Add New Links: Allows you to add new partner links. Follow the steps below:
Add a logo in the Add Image option. You may also add the partner’s link in the Link field. Hit Publish and see the changes on the main page.
Sort Section
Allows you to rearrange the sections within the homepage.
General Settings
General Settings comprises settings that allow you to tweak several aspects of the Top Bar, Header, edit SEO Settings for your website, Post-Page settings, Performance tweaks alongside other Miscalleneous settings.
We’ll go through each setting and sub-settings inside the General Settings of the customizer and explain what the setting does, how it impacts your website, and where you can see the changes take place.
TopBar Settings
TopBar Settings is where you can change the settings of the topmost bar of your website, most commonly used for offer notifications. Most of the settings are mostly preferences and are localized, meaning they don’t majorly impact the whole website.
Available Sub-Settings:
- Enable TopBar: Toggle to enable or disable the topbar.
- Notification Text, Button Label and Button Link: Here you can change the text displayed on the topbar, and the button label and link.
As the button implies, the Enable to open link in a new tab makes it so that the link in this section, if clicked, opens up a new browser tab.
Header Settings
Header Settings is where you can change the settings of the header of your website. Most of the settings are mostly preferences and are localized, meaning they don’t majorly impact the whole website.
Available Sub-Settings:
- Sticky Header: Enable to make the header stick at the top of the page.
- Enable Search: Toggle to enable or disable the search button in the header.
Search button enabled:
- Transparent Header: Toggle to make the header 100% transparent or opaque.
- Contact Details and Button Settings: You can set or modify the contact details shown on the header through these settings. You can also change what text the buttons on the header hold and their links.
- Enable Social Links: Toggle to enable or disable the social link icons and links on the header.
- Social Links: This option is where you can add, remove and customize the social links present on the header. This option is only effective if you have Enable Social Links turned on.
To add a new link, click on the Add new links button.
For this demo, let’s set up 3 social media links for the header — Facebook Link, Twitter Link, and Instagram Link.
For the first link i.e, the Facebook link, choose “facebook” from the Social Media dropdown menu.
Add the link to your Facebook profile in the Link field.
The steps for the other two links are quite similar. Here’s the end result:
Click on Publish and you’ll be able to see the changes in the header.
Post-Page Settings
These settings apply to all the Single Posts on your website, which are generally blog posts.
Available Sub-Settings:
- Hide Prefix in Archive Page: Enable/disable to show or hide prefix in the archive page.
- Hide Author, Posted Date, Post Views: Enable these settings to hide Author name, Date of Publishing, and number of views on your Single Page Posts (blog posts).
This is what the blog post looks like before turning on these settings.
After turning on each of those settings, this is what the same page looks like:
- Related Posts Section Title: You change the Related Posts heading displayed at the end of each blog post by editing this setting.
By default, the text is set to “You might also like”:
SEO Settings
SEO Settings contain a few basic settings for the inner pages/blog posts, that have an effect on the SEO of the website.
Available Sub-Settings:
- Enable Last Update Post Date: Enable to show the “Last updated on” information in posts.
- Enable Breadcrumb: Toggle to enable or disable breacrumb/directory path inside single posts.
- Breadcrumb Home Text: Allows you to change the text for the “Home” link in the breadcrumb. Requires Breadcrumb to be toggled on.
Performance Settings
Performance settings include settings that impact the performance of your website, and in most cases, increases the overall performance of the website.
Do note that some of the settings come with a tradeoff, and you may not be able to use particular features if one or more of the settings are turned on.
Available Sub-Settings:
- Lazy Load: Lazy loading is a way of intentionally delaying the load or initialization of resources until the resources are actually needed. Enabling this option will lazy load the featured images, thereby improving load times and conserving bandwidth.
- Lazy Load Content Images and Gravatar: Toggling this option on will lazy load content images and gravatar icons, potentially improving site performance.
- Defer JavaScript: “Defer” is a boolean attribute in JavaScript.
If this option is enabled, the ‘defer’ attribute is set to TRUE for all JavaScript content on the website, if available. This causes the JavaScript file to be downloaded/loaded asynchronously or in parallel to parsing the page, thereby improving page speed.
- Remove ‘var’ parameters: By default, WordPress adds ‘ver’ (referring to version) parameter at the end of JS and CSS files in HTML tags. This specifies the browser to not cache those files. Enabling this option will remove ‘ver’ parameters, which tells your browser to cache the JS and CSS files next time you visit the webpage. This can drastically improve the load time and on-site performance due to caching being enabled.
Misc Settings
Misc Settings contains a few other miscellaneous settings that affect various parts of the website.
Available Sub-Settings:
- Admin Bar: Toggle to enable or disable the Admin Bar on the top of the screen when you’re logged in to your WordPress backend of the website. The Admin Bar allows you to easily edit pages and customize various parts of the website on-the-go.
- Scroll To Top: Toggle to enable or disable the scroll-to-top button at the lower right side of the page. Clicking on the button will automatically scroll to the top of the webpage.
- Excerpt Length: If you haven’t manually specified or written an excerpt for a Post, WordPress automatically uses the text from the first paragraph of the post as the excerpt to display it. This setting will allow you to specify how many words of the first paragraph to use as the excerpt, if the excerpt isn’t manually set.
- Read More button label: Change the button text for the “Read More” button
Configuring Layouts
Layouts are essentially how the components are displayed in a particular section or theme component — their positioning, colors. size, etc.
Consider them as themes or presets for theme sections. With different layouts, you can fully revamp and change the look of Headers, Footers, Single Posts, and so forth without having to add any code or use any plugin.
Education Center Pro comes with variety of layouts for the Header, Sidebars and Banner.
To start customizing layouts, head over to Layout Settings inside the customizer.
Header Layouts
There are a total of seven different header layout options in Education Center Pro.
We’ll label each layout from 1 to 7, top to down to make it easier to understand.
- Header Layout #1: Header with Top Bar above the navigation section.
- Header Layout #2: Top Bar disabled. Search bar enabled and in the center.
- Header Layout #3: Top Bar enabled (with #F7F7F7 color). Social Links at the right side of the Top Bar.
- Header Layout #4: Similar to Header Layout #1 but with Top Bar disabled.
- Header Layout #5: Top Bar disabled. Search bar at the rightmost side of the header. Menu items in the middle.
- Header Layout #6: Similar to Layout #4 but with a section to place ads.
- Header Layout #7: Site Logo in the middle. Menu items on the right and left side of the logo. TopBar enabled with social links on the right side.
You can easily customize the way the banner on the homepage looks by browsing through the four available banner layouts in this theme.
We’ll numerically label each layout from 1 to 4, top to down.
- Banner Layout #1: Buttons, title and subtitle on top of the image aligned on the left.
- Banner Layout #2: Solid colored background. Image aligned on the right; title, subtitle and buttons on the left.
- Banner Layout #3: Same as Layout #2 but with Search Bar instead of CTA buttons.
- Banner Layout #4: Similar to Layout #2 but with Contact form instead of CTA buttons.
There are 3 layouts for Pages in Education Center Pro theme. Pages include any page you create through the Admin Panel or the template pages created by us such as Contact Page, Testimonial Page, etc.
We’ll mark each layout numerically from top-right-down as you see on the screenshot above.
- Page Sidebar Layout #1: Sidebar completely disabled.
- Page Sidebar Layout #2: Sidebar on the left side of the page.
- Page Sidebar Layout #3: Sidebar on the right side of the page.
Note: The Page sample used here is the default Privacy Policy page. All of these layouts look the same on any Page.
There are 3 layouts for Posts in Education Center Pro theme. Posts include any Post you create through the Admin Panel which is generally a blog post.
We’ll mark each layout numerically from top-right-down as you see on the screenshot above.
- Post Sidebar Layout #1: Sidebar completely disabled.
- Post Sidebar Layout #2: Sidebar on the left side of the page.
- Post Sidebar Layout #3: Sidebar on the right side of the page.
How To Create A Page in WordPress
Creating pages in WordPress is a simple process. Pages can be fully custom or you can create a page with premade templates.
Follow the steps below to create a simple new page for your website:
Step 1. Log in to your WordPress Admin Panel. Go to the Pages option located in the left sidebar.
Step 2. Click on Add New at the top. You should have a screen that looks like this:
You can add titles, paragraphs, and many other blocks through the editor. For now, let’s create a basic page titled “My First Page” and a dummy text for the paragraph.
Step 3. Click on Publish button located on the righthand side bar.
That’s pretty much it. We’ve created a page titled “My First Page”.
Here’s what the page looks like:
You can add different blocks, headings, and media files via the + button in the editor.
Set Up and Configure Teams Page
Let’s create a Team page for your website from a ready-made template that comes with Education Center Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. Make sure to choose “Teams” in the page template as shown:
Here’s what our recently created team page will look like:
Now we need to add members to our team for them to be displayed on this page. Let’s do that next.
How To Add Members In Teams
Step 1. Go to your WordPress Dashboard and go to Teams in the left sidebar.
Step 2. Click on Add New and fill in the required details on the next page.
Hit Publish and see the changes.
Here’s what our new Team Page looks like now:
You can populate this page my adding more team members.
Set Up and Configure Testimonials Page
Let’s create a Testimonials page for your website from a ready-made template that comes with Education Center Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. Make sure to choose “Testimonial” in the page template (right side bar) as shown:
Step 3. Add Testimonials of your own. Follow the below steps to add one:
Go to your WordPress dashboard and on to the Testimonials section in the left sidebar.
Click on Add New button.
On the next page, enter the required details. You can add image of the reviewer in the Featured Image section in the right sidebar.
Finally, click Publish and it should be listed on your Testimonial page you just created.
Customization Options:
- Testimonial Section: You can conveniently change the number of testimonials to show in the testimonial page before the user has to “Load More” through the slider option inside this section.
- CTA Section: You can disable or enable the CTA Section and change other settings such as the title, subtitle, CTA Button labels and link, backgrond image, etc.
- FAQ Section: The Testimonial page has an FAQ section.
You can customize the title and subtitle of the FAQ section and add new FAQs through these options.
- Sort Testimonials Page: Lastly, you can rearrange the various sections of the Testimonial page by dragging the tiles in different positions.
Set Up and Configure Portfolio Page
Let’s create a Portfolio page for your website from a ready-made template that comes with Education Center Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. Make sure to choose “Portfolio” in the page template (right side bar) as shown:
Step 3. Add new items in your Portfolio. Follow the steps below to do so:
Go to your WordPress Dashboard and go to Portfolio in the left sidebar.
Click on Add New to add a new Portfolio. On the next page fill in all the required details. Here’s a sample of the page:
Hit Publish and you’ll be able to see the page on the Portfolio page.
You can also add Category for your Portfolio through the Portfolio Category button.
Customization Options:
- Portfolio Section: You can add title and sub-title for the Portfolio page and also configure the number of portfolio elements to show at once.
- CTA Section: Portfolio page has a CTA section which you can configure to your preferences.
You can change the section’s title, subtitles, CTA button label and links and configure the background image.
- FAQ Section: You can customize the FAQ section of the Portfolio page by chaging the title, sub titles, and adding/removing new FAQ elements through these options.
Set Up and Configure About Us Page
Let’s create an About Us page for your website from a ready-made template that comes with Education Center Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. Make sure to choose “About Us” in the page template as shown:
Hit Publish and you should have an About Us page ready to be customized!
Customization Options:
We’ll through customization each of the sections in the About Us Page.
- Featured Section: This section acts as a place to include an important description of what you company is and represents, since this is the first thing your visitors will see in this page.
Customizing this section is pretty straightforward.
Add title and subtitle in the Title and Subtitle field respectively. You can add description of the section in the Description field, and if you wish to include a “Learn More” button, you can change its label and link.
Lastly, you can change the image in this section from the Upload the Image option, and change its alignment in the Image Alignment option.
- Counter Section: A section where you can display quanitative figures in an animated, sleek manner.
To customize it, all you have to do is add a new counter through the Add new counter button. For more detailed description of the Counter section, refer to this part of the documentation.
- Second Featured Section: Another section like the Featured Section to highlight important information.
Customizing this section is exactly similar to the customization of Featured Section.
You can add title, subtitle, description and image for this section with preferred alignment.
- Instructors Section: This is where you can highlight your instructors/course teachers.
You change the Section’s title and subtitle and also set the number of instructors to display at once.
For more detailed description on how to customize the Instructors section, please refer to this section.
- CTA Section: The About Us page has a CTA section which you can configure to your preferences.
You can change the section’s title, subtitles, CTA button label and links and configure the background image.
- FAQ Section: You can customize the FAQ section of the About Us page by chaging the title, sub titles, and adding/removing new FAQ elements through these options.
- Testimonial Section: You can display testimonials on your About Us page.
And you can change the section’s title and subtitle along with how many testimonials to show at once.
For more info on the Testimomials section, please refer to this section.
- Parnter Section: As the name implies, partner section is where you can highlight all your assosciated partners. You can add their logo and upon clicking on it, you can redirect your viewers to the relevant link.
You can change the title and subtitle of the section.
To add a new Partner link, click on Add New Links.
Inside, you’ll be prompted to add a logo image and include a link.
- Sort Section: This option makes it super easy to disable and rearrange all the sections of the About Us Page.
Set Up and Configure Events Page
Let’s create a Event page for your website from a ready-made template that comes with Education Center Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. Make sure to choose “Event page” in the template dropdown as shown:
Hit Publish to finish creating your new Event page.
Now that we have the Event page, let’s get into how to populate and customize it.
The Event page displays all the Event pages that you’ve created. Not sure how to create one? Follow this section’s tutorial on “How to make an Event page”.
- CTA Section: The Event page comes with a CTA section which you can configure to your preferences.
You can change the section’s title, subtitles, CTA button label and links and configure the background image.
- FAQ Section: You can customize the FAQ section of the Events page by chaging the title, sub titles, and adding/removing new FAQ elements through these options.
Set Up and Configure Contact Page
Let’s create a Contact page for your website from a ready-made template that comes with Education Center Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Contact page.
Step 3. You can configure other settings such as adding an Excerpt or setting the Featured Image for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Time to configure the theme!
Go to your Customizer and head over to Contact Page Settings to begin customizing your newly created Contact page.
Customization Options:
- Contact Details Section: Here you can change the text for Section Title, Subtitle, Location Title, Description, Mail Title, your email address, Phone Us heading title, your phone number, and details about your hours of operation.
Ensure that the changes are reflected on the Contact Us page by publishing the changes and refreshing the page.
As expected, we can see the changes on the page.
- Google Map Section: You can embed Google Maps of your location via this section. You can always disable this section by toggling the Google Map Settings button off.
To add a new embed for your location, go to Google Maps and enter your location. For this demo, we’ll input the following address: Empire State Building, West 34th Street, New York, NY, USA
Click on the Share button.
And on the Share page, go to Embed a Map tab. Copy the link shown.
Go back to your Contact Page Settings, and enter the embed code you just copied in the Embedded Google Map field.
Refresh the page to see the changes.
- Contact Form Section: Contact forms are essential components of a Contact page. You can add a contact form to your page by creating and configuring a form in Contact Form 7, which is a plugin we’ll use. If you don’t have the plugin installed, please refer to Installing Recommended Plugins section to learn how to install it.
You can change the form title in the Contact Form Title field. For this demo, we’ll keep it as it is.
To get a shortcode for a form configured in Contact Form 7, follow the steps below:
Note: You must have the Contact Form 7 plugin installed.
Step 1. Go to your WordPress dashboard and go to Contact page from the sidebar.
Step 2. Click on Add New to add a new contact form. Enter your form title in the given field.
Step 3. You can configure the form as you please, but for now we’ll use the default template.
Step 4. Configure the Mail settings to make sure the contact form is fully functional and sends mail to the right email address.
You can configure other settings for the form as well. For now, this will do for us. Hit the Save button.
Step 5. Copy the shortcode shown on the top.
Go back to the Contact Us Form settings, and paste the code in the Contact Form Shortcode field as shown below.
Hit Publish and refresh the Contact Us page to see the changes in action.
Set Up and Configure Pricing Page
Let’s create a Contact page for your website from a ready-made template that comes with Education Center Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Pricing Page as shown:
Hit Publish to finalize creating the Pricing page.
On to the customization part!
- Pricing Section: Inside the pricing section, which is the main emphasis of this page, you’ll find the following options:
Here you change the title and subtitle of the section but most important, you can add new pricing plans through the Add new pricing button.
You’ll be prompted to provide details about the Pricing Plan. Here’s a demo sample of the Standard pricing plan:
- CTA Section: The Pricing page comes with a CTA section which you can configure to your preferences.
You can change the section’s title, subtitles, CTA button label and links and configure the background image.
- FAQ Section: You can customize the FAQ section of the Events page by chaging the title, sub titles, and adding/removing new FAQ elements through these options.
Set Up and Configure Franchise Page
Let’s create a Franchise page for your website from a ready-made template that comes with Education Center Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Franchise Page as shown:
Hit Publish to create the Franchise page. The newly created page is most likely blank in your case. Time to customize and populate it!
Franchise Page displays all the Franchise pages you’ve created. Refer to this section’s “How to Add A New Franchise” tutorial to know how.
After you’ve added Frachises (Alliances), you can set how many franchises to show at once from the slider. Moreover, you can edit the section’s title and content (description).
You can tweak the footer of your website through these settings.
You’re free to change the Footer Copyright text to your own by changing the content in the field.
Moreover, you can hide/show the Author and the WordPress link in the footer text.
WooCommerce Plugin
WooCommerce is a powerful WordPress plugin to easily create all the essentials an eCommerce store needs — product catalogs, checkout page, site-wide announcements, etc.
Education Center Pro seamlessly integrates with WooCommerce and makes it a breeze to sell courses and products online.
If you’ve never used WooCommerce before, you’ll first need to know how to set up WooCommerce for your WordPress website. Follow this official guide by the folks from WooCommerce to know how to set up WooCommerce and add products.
Adding Products To Your Store:
Although their official guide (link above) shows how to add products to your store, here’s a quick recap on how to do it:
Step 1. Login to your WordPress Dashboard and go to the Products section from the left sidebar.
Step 2. Click on the Add New button to add a new product. You’ll see a screen similar to the following:
Step 3. Give your product a name, and tweak the settings to your liking. For demonstration purposes, we’ll set up a product named “Product #2”.
Step 4. After everything’s done, hit the Publish button on the left to successfully publish the product to your store. ‘
Go to yourwebsite.com/shop (replace yourwebsite with your website’s URL) to see the store page in action. In our case, we’ve added a total of three products, and here’s what it looks like:
Customization Options for WooCommerce:
The theme has a couple of WooCommerce options that you can customize to your liking.
- Store Notice: A site-wide notice text for your visitors. Make sure the Enable store notice checkbox is ticked.
After enabling store notice, here’s what it looks like:
- Product Catalog: This section offers a host of options to sort the products at your shop page (accessible by default from yourwebsite.com/shop).
- Product Images: Here you can tweak settings related to the images of the product and the thumbnails. By default the values are set to 600×600 pixels.
- Checkout Page Settings: Make changes to the checkout page for your store (accessible from yourwebsite.com/checkout by default) from here.
Recommended Image Sizes
Image sizes can impact the performance of your website, which is why we suggest you use the following sizes for images on the website (in pixels):
- Featured Posts = 440px * 304px (Width * Height)
- Event Archive = 380px * 282px (Width * Height)
- Portfolio Archive = 610px * 458px (Width * Height)
- Event Single = 830px * 500px (Width * Height)
- Slider Image = 1920px * 853px (Width * Height)
Further Support
If you have any issues about how to install the theme, set up the pages, or customize the website elements, please submit an inquiry ticket at the Support page. You can also directly mail us at [email protected]
Theme Installation Service
If the theme installation process is a little too technical for you, we offer theme installation services at an extremely affordable price. Check out our Theme Installation service page for more info.
Theme Customization Service
If you want professionals to customize the theme for you, or make internal changes to the theme’s core elements to better suit your liking, our Theme Customization service might just be the right service for you.