badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Superior Pro

Table of Contents

  1. Installation
  2. Custom Menu
  3. Social Profiles Menu
  4. Custom Header
  5. Custom Background
  6. Specific Post/Page Layout Setting
  7. Custom CSS
  8. Setting Up Templates
  9. How to Disable Page Comments
  10. Layout Options
  11. Header Options
  12. Excerpt Options
  13. Home Page Blog Category Setting
  14. Post Meta Display Options
  15. Featured Slider Options
  16. Color Skin
  17. Color Options
  18. Font Options
  19. Footer Options

“Superior Pro” WordPress ThemeTheme Instruction

Thank you for using our theme. If you have any questions that are beyond the scope of this following instructions, please feel free to post your queries via our support forum. Thank you so much!

Installation

a) Through Dashboard

  • Log in to the WordPress dashboard.
  • Go to Appearance > Themes.
  • Click on Add New and then Upload Theme button at the top.
  • Choose the zip file of Superior Pro.
  • Then click on Install Now and activate it.

b) Manual Installation using FTP

  • Download the Superior Pro from your account.
  • Unzip superior-pro.zip to your desktop.
  • Using an FTP client to access your host web server. Go to /wp-content/themes/.
  • Upload Superior Pro theme to /wp-content/themes/.
  • Go to Appearance > Themes and activate Superior Pro theme from Dashboard.

Custom Menus

This theme supports Custom Menu. You can set it through the following steps.

  • Go to Appearance > Menus.
  • Give your menu a name and build it up using little widgets on the right.
  • You can add Pages, Posts, Custom Links, Categories and Format.
  • Now simply select the Display Location to Primary Navigation for your newly created menus using a widget on the left. Afterwards, click Save.

See Menu Help for more information.

Social Profiles Menu

This theme supports Social Profiles menu. You can set it through the following steps.

  • Go to Appearance > Menus.
  • Create a new menu with any name you like and add your social profiles URL’s as Custom links shown in below screenshot.

    screenshot

  • Now simply select the Display Location to Social Navigation and click on Save Menu button as shown in above screenshot.

Custom Header Back to Top

This theme supports Custom Header Feature. From this option you can set image in the header.

  • Go to Appearance > Customize > Header Image.
  • Click on Add New Image button to select the image.
  • Click on Select and Crop button.
  • Crop the image according to your wish and click on Crop Image button.
  • Click on Crop and Publish button then click on Save & Publish button.

Custom Background Back to Top

This theme supports Custom Background Feature. From this option you can set image for your background.

  • Go to Appearance > Customize > Background Image.
  • Click on Select Image button.
  • After that select the image from your media library and click on Choose button.
  • Then click on Save & Publish button.
  • You can see the preview on the same setting page as well.
  • Click on Save & Publish button.

Note: The background effect will only seen if you set the Layout Options > Site Layout option to Narrow Layout instead of Wide Layout.

Specific Post/Page Layout Setting Back to Top

This theme allows you to choose the specific layout for every post and every page display. To set the layout for Post/Page follow the steps give below.

  • Go to Posts/Pages > All Posts/All Pages.
  • Click on any Post/Page.
  • You will see a box named Select layout for this specific Post only. in belower part of the text editor box. If you don’t find it, click on the Screen Options in the right top part and check on the Select layout for this specific Post only to show its option.
  • If you select Default Layout Set in Customizer option, the layout set in Layout Options > Content Layout, will be the layout for this post as well.
  • You can select from No Sidebar, No Sidebar, Full Width, Left Sidebar and Right Sidebar to be this post’s specific layout and click on Update button.

Custom CSS Back to Top

If you want to add/edit some CSS, you can follow the instructions below, your custom CSS will overwrite the theme’s CSS.

  • Go to Appearance > Customize > Additional CSS.
  • Write your Custom CSS there and click on Save & Publish button.

Setting Up Templates Back to Top

First create a page with any name or you can set your any existing page to different Templates. Follow the instruction below to set the Templates for your page.

  • To set the page to Templates go to page editor and you will see the Page Attributes box at the right side.
  • Choose any template i.e. (Business, Services, Team and Testimonial Template) from the dropdown as a Template as shown in below shreenshot. We have choose Business Template in below screenshot.
    screenshot
  • After setting up the page to any Templates go to Appearance > Widgets.
  • Drag and Drop any custom widgets i.e. (TH: Blog, TH: Featured Page, TH: Our Team, TH: Products/ Clients/ Testimonial, TH: Recent Works and TH: Services) to the specific template section as your page template is set to and set up all the data/content accordingly to all the widgets that you have droped.
  • Click on Save button.

Setting up Business Template as your homepage

You can show your homepage as Business Template format as in our demo.

  • First set the page to Business Template as described above.
  • After setting the page to Business Template now go to Settings > Reading Settings.
  • Choose A static page (select below) option as your Front Page Displays and choose your page that you have set template to Business Template from the dropdown in Front Page as shown in the below screenshot
    screenshot
  • After setting up the Business Template page (Your Page Name) as a Front Page Displays go to Appearance > Widgets.
  • Drag and Drop any custom widgets i.e. (TH: Blog, TH: Featured Page, TH: Our Team, TH: Products/ Clients/ Testimonial, TH: Recent Works and TH: Services) to Business Template Section and set up all the data/content accordingly to all the widgets that you have droped.
  • Click on Save button.

How to Disable Page Comments Back to Top

  • Go to the specific page on which you want to turn off the comments from dashboard.
  • Look for the Discussion box somewhere below the editor box.
  • If you don’t find it, click on the Screen Options in the right top part and check on the Discussion box and then discussion box will appear below the page editor.
  • Uncheck the Allow Comments box in the Discussion box and click on Update button.

Layout Options Back to Top

From this options you can set Site Layout, Content Layout, Blog Layout and Resposive Layout.
To set it go to Appearance > Customize > Superior Pro Theme Options > Layout Options you will see the below options.

screenshot
a) Site Layout

From this option you can set Wide or Narrow Layout for your site.

b) Content Layout

Every Page/Post that don’t have their specific layout will follow this default layout. Archives (i.e. category pages) will also follow this default layout.
You can select any of this layout Right Sidebar, Left Sidebar, No Sidebar and No Sidebar Full Width for your Page/Post as a default layout.

c) Blog Layout

Select Alternate Style for side by side view for your posts or select List Style for list view for your Blog Layout.

d) Responsive Layout

Select ON to show the responsive view for small devices and for OFF to show the desktop view for all devices.

Header Options Back to Top

From this options you can set Post/Page Title Background Image, Display Site Title and Contact Info Bar.
To set it go to Appearance > Customize > Superior Pro Theme Options > Header Options you will see the below options.

screenshot
a) Post/Page Title Background Image
To set the Post/Page Title Background Image.

  • Click on Select Image button.
  • After that select the image from your media library and click on Choose button.
  • Then click on Save & Publish button.
  • To disable it check on Check to Disable box and click on Save & Publish button.

b) Display Site Title

  • To show the site title only select Header Text Only option.
  • To show the site logo only select Header Logo Only option.
  • And to disable both site title and logo select Disable Both optiion and click on Save & Publish button after selecting any option.

c) Contact Info Bar
To set Top Contact Info Bar.

  • Enter the Phone Number, Email Address, Location/Location Url and Skype ID.
  • To disable the bar check on Check to Disable box and click on Save & Publish button.

Excerpt Options Back to Top

From this options you can set the Excerpt Length.
To set it go to Appearance > Customize > Superior Pro Theme Options > Excerpt Options you will see the below options.

screenshot

  • To set the Excerpt Length type the digit value in Excerpt Length field.
  • To set the button text type the text in Post Excerpt Button Text field and click on Save & Publish button.

Home Page Blog Category Setting Back to Top

From this options you can show the specific categories post only in Home Blog/Front Page.
To set it go to Appearance > Customize > Superior Pro Theme Options > Home Page Blog Category Setting you will see the below options.

screenshot

  • Select your post categories from Select Post Categories option to show it on Home/ Front Page. You can also select multiple categories by holding down the Ctrl/Command key.
  • To disable it check on Check to default settings box and click on Save & Publish button.

Post Meta Display Options Back to Top

From this options you can disable post meta data from your post.
To disable it go to Appearance > Customize > Superior Pro Theme Options > Post Meta Display Options you will see the below options.

screenshot

To disable Post Meta data just check on Disable Categories, Disable Author, Disable Date, Disable Comment Link and Disable Tags box and click on Save & Publish button.

Featured Slider Options Back to Top

From this options you can set Featured Post/Page Slider, Image Slider and Revolution Slider.

a) Featured Post/Page Slider

  • To set the it go to Appearance > Customize > Superior Pro Theme Options > Featured Slider Options.
  • Select slider type to Featured Post/Page Slider as shown in below screenshot.
    screenshot
  • Select Slider Status to Enable on Homepage/Frontpage or Enable on All Page as shown in the below screenshot.
    screenshot
  • Select ON/OFF to show the Slider Content display for Small devices as shown in the below screenshot.
    screenshot
  • Enter the Number of Slides, Select Transition Effect and Enter Transition Delay/Length as shown in the below screenshot.
    screenshot
  • Enter the Post/ Page ID accordingly as shown in the below screenshot.
    screenshot
    and click on Save & Publish button.
  • To disable the slider check on Disable Slider box and to exclude slider post from homepage posts check on Check to Exclude box and click on Save & Publish button.

b) Image Slider

  • To set the it go to Appearance > Customize > Superior Pro Theme Options > Featured Slider Options.
  • Select slider type to Image Slider as shown in the below screenshot.
    screenshot
  • Select Slider Status to Enable on Homepage/Frontpage or Enable on All Page as shown in the below screenshot.
    screenshot
  • Select ON/OFF to show the Slider Content display for Small devices as shown in the below screenshot.
    screenshot
  • Enter the Number of Slides, Select Transition Effect and Enter Transition Delay/Length as shown in the below screenshot.
    screenshot
  • After setting up the Image Slider go one step back to Superior Pro Theme Options (Appearance > Customize > Superior Pro Theme Options) and click on Image Slider Options panel.
  • You will see the below options. First select Slide Image, Add Redirect Link, Enter Title and Short Description accordingly to all of the slides that you have.
    screenshot
  • To disable the slider go to Appearance > Customize > Superior Pro Theme Options > Featured Slider Options check on Disable Slider box and click on Save & Publish button.

c) Revoultion Slider

Before selecting Revoultion Slider first purchase a single copy license of it and activate it into your site where this theme is activated and create a slider via Revolution Slider plugin and follow the instruction below:

  • Go to Appearance > Customize > Superior Pro Theme Options > Featured Slider Options.
  • Select slider type to Revoultion Slider as shown in the below screenshot.
    screenshot
  • After selecting the Revoultion Slider go one step back to Superior Pro Theme Options (Appearance > Customize > Superior Pro Theme Options) and click on Revoultion Slider Options panel.
  • Choose the slider that you have created from the dropdown option as shown in the below screenshot.
    screenshot
  • Check on Check to display on homepage box to show the slider on home page.
  • If you want to show the slider in different pages enter the page ID number of the pages in Enter Pages ID option and click on Save & Publish button.

Color Skin Back to Top

From this options you can set the color skin of the theme.
To set the color skin go to Appearance > Customize > Superior Pro Theme Options > Color Skin then you will see the below options.

screenshot

  • Select the color option from the Color Skin dropdown.
  • To set the different color individually for Links, Navigation, Buttons and Page Title Background section just click on Select Color button and you will see the color palette where you can select any color you like and click on Save & Publish button.
  • To set the color to default color just click on the Default button right to the Current Color button.

Color Options Back to Top

From this options you can set the color for Top Bar, Social Profiles, Site Title/ Main Navigation, Featured Slider, Main Content, Pagination, Widget Featured Page, Widget Service, Widget Blog, Widget Recent Work, Widget Our Team, Widget Products/Clients/Testimonial and Footer Widget Section.

To set it go to Appearance > Customize > Superior Pro Theme Options > Color Options you will see the below list of options.

screenshot

  • Click on Select Color button and you will see the color palette where you can select any color you like and then click on Save & Publish button.
  • To set the color to default color just click on the Default button right to the Current Color button.

Font Options Back to Top

You can set Font Family, Font Size and Font Color from below options.

a) Font Family

From this option you can set font family for Content, Site Title and Headings/ Blockquote/ Category/ Our Team Name.
To set it go to Appearance > Customize > Superior Pro Theme Options > Font Family you will see the below list of options.

screenshot

Click on dropdown option to select between 600+ Google Fonts for different sections.

b) Font Size

From this option you can set font size for Content, Buttons, Site Title, Top Bar/ Site Description/ Breadcrumb/ Main Navigation, Template Widgets Title/ Slider Title/ Blog Post Title/ Blockquote, Post Category, Recent Work Title/ Team Name/ WooCommerce Product Title, Page Title, Sidebar/Footer Widget Title, Footer Content and Site Info.

To set it go to Appearance > Customize > Superior Pro Theme Options > Font Size you will see the below list of options.

screenshot

Click on dropdown option to select font size for different sections.

c) Font Color

From this option you can set font color for Content, Top Bar, Site Title, Navigation, Page Title and Breadcrumb, All Headings/ Titles/ Blockquote, Sidebar Widget Titles, Sidebar Content, Footer Widget Titles, Footer Content, Site Info and Site Info Links.

To set it go to Appearance > Customize > Superior Pro Theme Options > Font Color you will see the below list of options.

screenshot

  • Click on Select Color button and you will see the color palette where you can select any color you like and then click on Save & Publish button.
  • To set the color to default color just click on the Default button right to the Current Color button.

Footer Options Back to Top

From this options you can select the Footer Widget Columns and edit the Footer Info.
To set it go to Appearance > Customize > Superior Pro Theme Options > Footer Options you will see the below list of options.

screenshot
a) Select Footer Widget Column

Select the column Two, Three or Four to set the column for the footer widgets.

a) Edit Footer Info

To set your own content/links in the footer just type/edit the content in the textarea and click on Save & Publish button.