Installation of TopClass WordPress Theme and necessary plugins is finished.
Now it’s time to configure the other necessary settings 🙂 TopClass has a fantastic pwoerfull Admin Panel
Go to the Top Class Settings and start configure TopClass WordPress Theme !
TopClass comes with a fantastic powerful Admin Panel in where you can update almost every part of the Theme. Just go to your WordPress admin panel and click on Top Class Settings.
From the Global Management sections, you can manage/sort Section orders and overall color settings. Also you have options to put Custom CSS, Google Analytics Code and a big library of Google Fonts
Go to TopClass Settings > Customizable Section. In Customizable Section you can change your website Logo, Favicon, Admin Logo. Just upload your images and click save. Also you option to show or hide logo, favicon.
It looks like as follows.
Go to TopClass Settings > Slider Section. You have ability to control your website slider at Slider Section.
To Show Slide on your website, you have to Create Slide First what will be shown here below of this part.
But in this section you can,
- Turn off or on the slider to display
- Show Slider menu on menubar and also choose the text for menu bar.
- Change or remove the Background parallax image
Add New Slider
You have to Create Slider Content to Show Slider. To create New Content for Slider Section,
Go to Slider Menu > New Slider on the admin panel’s left side bar which will be as follows
Let us explain a little about the above part. There are 3 part/heading of text in each slider. If any one of this part is empty, that part/heading will not be desolated,
We are <span>Top</span> Class
You may add a span tan inside the heading text as above what will display the theme color for the embed text.
And in each Heading, you have option to add Animation which is integrated with animation.css!
There is a Button option on each slide, if you want to show it, put some text like Get Started and add the buttons URL but if you don’t what to show it, just make it empty!
The Slider will looks like as follows
About Us Section
Go to TopClass Settings > About Us Section.
There are three part on this section
- About Us Section
- Display Counter Section
- Video Parallax Section
which will be described below.
About Us Section
In this section, you have options to
- show or hide this section in Front Page
- display or hide in Menu bar
- Title in Menu bar
- Section Image Update or Remove
- Section Title
- Section Sub-Title
- Post Title and post text.
Put the Section Title as .
The span is used to display the theme color in the embed text on Section Title.
Display Counter Section
By default Display Counter Section is off, Turn it on and then put the Counter & Text as bellow.
There is a little format to set the Counter and text which is as below
This will create a circle with the number 4 and text Members! what is looks like as below
Display Video Section
In this section, you have options to
- Turn off or on this section
- Video Button Title
- Video URL
- Parallax image update or remove
- Video Button image update or remove
Here you can set Video and also play button image. Video will be taken form YouTube or Vimeo. Just upload a video on Vimeo and put the URL of that video here to play!
It will looks like on your site as below.
Don’t forget to Save Change 🙂
Go to TopClass Setting > Team Section .Team Section is also a big section like About Us section which is as follows.
In this section, there are three part as follows
- Team Part
- Team Skills Part
- Parallax Part
The first part of Team section is Team Part from where you can turn off or on team section. you can add section title, section subtitle.
Add New Team Member
To add the Team member you have to go to Teams on the left side bar of admin panel and then choose, New Team Member . Put all necessary fields and then choose the Team member Image as a Featured Image See on the right bottom part for Fearuted Image.
Now Publish, You can add many team member accordingly as your requirements.
Team Skills Part
You can add Team skills part from here on the Team Section of the theme management part. You can either turn off or turn on accordingly.
Give a Skills Title, Now time to add skills! It has a format as follows
Clidk to Add More button and then follow the following format to add skills
Text, percentage, animation name, animation delay
This is the Product quality section with parallax option. you have option or turn off or on it. Put data on this section accordingly as your requirements And then update.
Go to TopClass Settins > Service Section. This section looks like other section but you have to Add Service from the left sidebar which will be show after this part.
Go to the Services from the left side bar and then click Add New Service and then add the necessary datas and icon. Then publish it. You can add more Service from here.
Go to TopClass Settins > Pricing Section. This section looks like other section but you have to Add Pricing tables from the left sidebar. See below of this image.
Add Pricing tables
Go to the Pricing Tables from the left side bar and then click New Pricing Table and then add the necessary data like
- Currency symbol
- Fraction Price
- Table Elements
- Buttons Text
- Button link
- background Color/Table Style
- Animation style
Keep in mind that the Table Elements will be each in one line to display in a new line like following
< span>5</span> Domain Uses
14+ <span>WordPress</span> Theme
32+ <span>HTML</span> Template
Then publish it. You can add more Pricing tables from here. In the Pricing Duration, If you don’t want to show the Duration in Hour/Day/Month etc…Choose Don’t Show.
You can control Portfolio Section from TopClass Settins > Portfolio Section.
There are tow part as follows
- Portfolio Part
- Our Client Part
- Parallax Part
The portfolio section looks like as following image. the all necessay step of this part are shown below of this iamge.
Add New Portfolios
Go to the Portfoliose from the left side bar and then click New Portfolio and then add the necessary data. Keep in mind that you have to add Featured Image as Portfolio Image and then publish.
Now, give a post name, write about the portfolio item. Than give a category of the post and also add a featured image. Then on the bottom of the text editor, Upload Portfolio Image, give Client name, Project end date and also Project URL
After putting all necessary data, publish it and add more following same way.
On the home page, only the featured image and project title will be displayed but on the portfolio details page everything will be shown.
Client Logo Gallery
To show Clients Logo Gallery you have to on it rom TopClass Settins > Portfolio Section and then Add/Edit Gallery Buttons and then Upload and select necessary logos. and then Add to Gallery.
You can give here some text and change parallax background image.
Go to TopClass Settins > Blog Section. There are two part as follows
- Blog Section
- Blog Parallax Banner
Blog Section is for Front Page and Blog Parallax Banner is for Blog / Single page top Parallax Background banner.
This Parallax Banner is also for home page if you don’t change the default home page into Front Page from Reading of Settings.
Twitter & Subscribe
Go to TopClass Settins > Twitter & Subscribe, there are two part of this section as follows
- Twitter Part
- Subscribe Part
To Display this part you need a Twitter account, API Key, API Secret, Access token and Auth Access Token Secret of that Twitter account. Create a twitter app on the twitter developer site fromDeveloper Site and put the necessary data into the following part.
We have used MailChimp for WordPress Plugin for Email Subscribe. Please make sure that the pluing is isntalled. (See at Plugins > Installed Plugins, If not installed, install it from Appearance > Install Plugins, the list of required plugins )
Now go to MailChimp for WP > MailChimp Settings, Put your API Key for MailChimp (If you don’t have, you will get a link to Get your API of MailChimp) and save it.
Then go to MailChimp for WP > forms and then put the following html markup on the
<input type=“email” id=“mc4wp_email” class=“form-control” name=“EMAIL” placeholder=“Your email address” required />
<input type=“submit” class=“subscribe-btn btn” value=“Subscribe Now” />
You do not neet load any Style Sheet, we have styled for the above form code, juse use this, and seve changes.
See there is a shotcode like [mc4wp_form], copy this and now create a new WordPress Page with this shotcode ( Page > New Page ) and give the name of this page as subscribe (or as you wish). And then Publish
Now go back to opClass Settins > Twitter & Subscribe and then select subscribe from Select Subscriber Page
Do’t forget to save 🙂
Go to TopClass Settins > Testimonila Section. We have used a paid plugins known as All Around Content Slider which has been included with this Theme.
Add Testimonila Page
To add Testimonial you have to create a page using a plugins called All Around Content Slider, if you don’t install the plugin yet, install it from Appearance > Install Plugins. and then the go to Installed Plugins from Plugins of left sidebar and Activete
First go to All Around Content Slider and create a new slider and then go to all around slider where you will get a shot code of the slider like [all_around id=”1″] . See hole documentation of All Around Content Slider at
Now crate a new page with the given shot code of the slider.
Now come to the Testimonial control section TopClass Settins > Testimonila Section and Select Testimonial page for the dropdown option. Select the page created for testimonial
Go to TopClass Settins > Contact Section. There are two section inside Contact Section.
- Contact Form Section
- Contact Info Section
Contact Form Section
We have used a plugins known as Contact form 7 for contact form. If you don’t install this plugin, please install it, it’s free and you will get download details at Appearance > Install Plugins.
Now go to Contact > Add New and then click to Add New .
Now put the following html on the Form box
- <div class=“col-md-6”>
- [text* your-name placeholder “Your name here”]
- [email* your-email placeholder “Your email here”]
- [text your-subject placeholder “Your subject here”]
- <div class=“col-md-6”>
- [textarea* your-message placeholder “Your message here”]
- <div class=“col-md-12”>
- <p class=“contact-form-elements”> [submit “Send”] </p>
and then Save. After Saving you will get a shot code like
- [contact-form-7 id=”18″ title=”Untitled”]
Copy that shotcode and create a New Page with that shotcode and give name of that page as contact-form like subscribe. And the again come to TopClass Settins > Contact Section. Then add contact-form from Select contact page.
Contact Info Section
Here you can add contact info like location, thelephone number, fax, email etc… you have option to choose icon for each part but there is a format you have to follow for this.
- icon, title, text
- li_location, Address, Hamburg <br> Germany
Here, Fist come is separate the icon, second comma separate the title/heading and the rest is as details.
have a look on the icon list and use the class/icon at first shown as above and give the other details and save 🙂
Go to TopClass Settins > Footer Section. Here you will find the Google Map configuration option and footer Social Buttons and also the copyright info.
Go to TopClass Settins > 404 Settings, set parallax image, 404 error title and sub title then save change.