Introduction

Promogear is a fully responsive multipurpose wordpress template built on Bootstrap 3 Framework, that can be used by a creative agency or as a personal portfolio for a freelancer. It was programmed using the latest HTML and uses the latest CSS to achieve a stunning effect. We tried to make it as simple as possible, but keep it modern, user friendly and pleasurable to work with. Template owes unique features and is fully customizable. Just pick it up and make it yours.

Please do not forget to rate Promogear on Themeforest. This can be done in Downloads area. Just select Promogear in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.


Getting Started

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the Installing WordPress. Also, you can find useful WordPress Codex documentation.


Upload via FTP

Extract theme file to a directory on your computer. It contains a file named promogear.zip. Open this archive and upload the promogear directory to your server via FTP to the WP_ROOT/wp-content/themes directory, where the WP_ROOT is the path to the root directory of your Wordpress installation.


Upload via WordPress admin

Go to your Wordpress admin, and in the Appearance panel, choose Add New Themes. Click Add new. Upload the promogear.zip file. If you have got a “missing stylesheet” issue then you have uploaded the wrong file.


Activation

Once you have uploaded the theme, activate your theme in Appearance → Themes. On how to use themes please see the Using Themes Article.


Uploading Demo Data

You'll need to import a promogear_demoX_content.xml file using 'WordPress Importer plugin', where X - is a required variation of our demo site:
Tools → Import → WordPress → Choose file → promogear_demoX_content.xml → Upload file and import → Activate 'Download and import file attachments' → Submit

After importing the data you need to follow these steps:

  1. Settings → Reading → Set 'Homepage' value in 'Front page' field and 'Blog' value for 'Posts Page' field.
  2. Appearance → Menus → Activate 'Primary menu' → Set 'Section' value for 'Item type' filed for every menu item.
  3. Pages → All Pages → Home → Set 'Homepage' value in 'Template' fiels.
  4. Promogear Options → Import / Export → Import Options → Import from File → Insert content of required promogear_demoX_options.json file, where X - is a required variation of our demo site.

Features

  1. The ability to create additional pages with an external link
  2. Customization of the blocks (pages). Background Image, Background Pattern, Text Color, Background Color.
  3. WPML Support.
  4. The order of slides, team members, works, stories, FAQ, price etc.


WPML

Theme is compatible with WPML plugin.

WPML (WordPress MultiLanguage) is a plugin for WordPress that lets authors write content in different languages and translate content.

Documentation for this plugin could be found here


Header styles

There are three types of the header:

  • Language/follow us switchers - Logo - Open menu button
  • Logo - Open menu button - Language/follow us switchers
  • Open menu button - Logo - Language/follow us switchers
Header type 1 Header type 2 Header type 3

Each of the styles enables in the tab Promogear Options → General → Header.

Theme options

This section describes the basic configuration of the theme. To open a page with these settings go to the section Promogear options in the admin panel of your site.


General

Main

  • Favicon: choose or upload the favicon.
  • Enable preloader: enables or disables the preloader (on, off).
  • Preloader type: you can choose the type of the preloader (Dark, Light, White).
  • Navigation position: the navigation between sections can be located on the left or right (on the right by default).
  • Retina Support: If you want to display high-quality images on Retina displays, then:
    • Activate this option in your WordPress Dashboard (Admin panel): PromoGear Options > General > Retina support > On
    • Upload required images. They will be displayed with original size on Retina displays and will be displayed half-sized on all other displays.

Header

  • Header type: choose the type of header.
  • Enable logo: enables or disables the logo (on, off).
  • Logo URL: upload your custom logo.
  • Enable language switcher: enables or disables the language switcher (WPML plugin must be installed).
  • Enable follow us: enables "Follow us" button (social icons in the header).
  • Header background color: .
  • Header background opacity: .
  • Open menu button color: background color for menu button.
  • Open menu button opacity: the opacity of the menu background color.
  • Menu style: menu style (Default or Black).
  • Menu background color: .
  • Menu background opacity: .

Footer

  • Footer background color:.
  • Footer text color: .
  • Copyright:.
  • Go top button enable: enables or disables the "Go to the top" button.

Homepage

Slider

  • Slider enable: enables the slider on the Home page (on, off).
  • Slider nav title: the title, which will be displayed in the sidebar navigation.
  • Slider background color:.
  • Slider navigation color:.
  • Slider navigation text color:.
  • Slider text color:.
  • Slider title color: the color of the titles in the slider (with the usage of the shortcode [section_title]).

Contacts

NOTE: These options are distributed on pages Coming soon and Under Consctruction.

  • Contact background image: choose the background image.
  • Contact background color: the background color.
  • Contact background opacity: and its opacity.
  • Show shadow: enables/diables shadow.
  • Shadow opacity:.
  • Form position: the position of the form (Left or Right).
  • Contact title color: .
  • Contact text color: .
  • Contact second text color: additional color text.
  • Form fields background color: .
  • Form fields background opacity: .
  • Form fields text color: .
  • Phone: .
  • E-mail: .
  • Address: .
  • Send to: E-mail on which the form will send letters.
  • Message subject: .
  • Map enable: enables/disables Google map.
  • Latitude: latitude (Ex: 40.748441).
  • Longitude: longitude (Ex: -73.985664).
  • Map zoom (1-17): map zoom from 1 to 17 (Default: 6).
  • Marker: upload the marker, which will be displayed on the map.
  • Marker title: title, which will be displayed while hover on it.
  • Marker description: text, which will be displayed while hover on it.

Blog

Big header

  • Big header enable: enables/disables the big header in the Blog (on, off).
  • Blog title: .
  • Blog title color: .
  • Blog description: text in the header.
  • Blog description color: its color.
  • Background color:.
  • Social buttons color:.

Sidebar

  • Sidebar position: (Without sidebar, Left sidebar, Right sidebar).

Social

In this tab you can configure the social icons.


Page 404

  • Background image:.
  • Background color:.
  • Background opacity: .
  • Text:.
  • Button link:.
  • Button label: text on the button.

Maintenance

  • Maintenance enable: enables/disables the Maintenance mode (on, off).
  • Maintenance mode: type of the maintenance (Coming soon or Under construction).
  • Maintenance logo: upload your logo for the maintenance mode.
  • Maintenance logo size: the size of the logo.
  • Maintenance background image:.
  • Maintenance background color:.
  • Maintenance background opacity:.
  • Countdown date: (only for Coming soon).
  • Text: the text in the maintenance page.
  • Button text: text in the button.
  • Select page: select the page that will be displayed in the second section mode Coming soon.

Custom css

In this tab you can add your own CSS styles.

For example:
  1. #mystyle {
  2. margin: 0 auto;
  3. }

Custom js

In this tab you can add your own JavaScript code.

For example:
  1. (function($){
  2. $(document).ready(function(){
  3. /* here is your code */
  4. });
  5. })(jQuery);

Heads up!: It is recommended to use the format as in the example.


Import / Export

image

In this tab you can import or export all settings threads.

WARNING! This will overwrite all existing option values, please proceed with caution!


Page settings

General

  • CSS classes: you can specify the css classes (separating with space button).
  • Title in navigation:.
  • Show this section as contacts: If this page must have "Contact us" elements, turn on this option.
  • Show footer in the section: If on, the footer is shown.
  • Vertical align: (Top, Middle, Bottom).
  • Inner scrolling: enables/disables inner scrolling (on, off).
  • Inverse style: .
  • Padding top: .
  • Padding bottom: .

Background

  • Video background: enables the video background.
  • Video muted: enables/disables the sound of the video (on, off).
  • Video autoplay: (on, off).
  • Video loop: enables/disables the iterance (on, off).
  • Video (.mp4): upload the video with the format .mp4
  • Video (.ogg): upload the video with the format .ogg
  • Video (.webm): upload the video with the format .webm
  • Background image: background image for tablets/phones.
  • Background color:.
  • Background opacity:.
  • Show shadow: enables/disables the shadow (on, off).
  • Shadow opacity:.

Color

  • Navigation color: sidebar navigation color.
  • Navigation text color: sidebar navigation color of the text.
  • Section text color: color of the section text.
  • Section title color: (with the usage of the shortcode [section_title]).

Portfolio

Before adding portfolio, it is necessary rto create portfolio categories. To do this go to Portfolio → Portfolio Categories and add the category in the left form.

To add portfolio, go to Portfolio → Add New Item. Here you must enter the name, description, feature image, choose the category, and also specify these fields: Client and add images to the gallery.

After that click on Publish.


Pricing

TO add a new pricing, go to Pricings → Add Pricing. Here you have to enter the name and specify such options: Color, Icon (More...), Features, Price, Price label, Button text, Button link, Button label, choose Animation and set Animation delay. To add additional feature click on Add feature.

Than click on Publish.


Slides

To add slide, go to Slides → Add Slide. Here you must enter the name, create structure using shortcodes and also specify other fields.

After that click on Publish.


Services

To add new Service element go to Services → Add Service. Here you must specify the name, description and set these fields: Position, Color, Percent. Then click on Publish

image

Testimonials

To add new Testimonial go to Testimonials → Add Testimonial. Here you must specify the name and description. Then click on Publish


Team

To add a new Team Member go to Team → Add New Item. Here you must specify the name, description, photo and also such fields: Profession and Social buttons. If the field is blank it will not be displayed.

After that click on Publish.


Stories

To add Story, go to Stories → Add New Story. Here you need to enter the name of the person, its quote, featured image and company logo.

Than click on Publish.


Shortcode generator

For the structure organization of the page you can use shortcode generator. Just click on button Add shortcode, which is located above the visual editor, and choose the necessary shortcode from the list. Make the necessary settings in the form and click on "insert shortcode".

image


Row

Example:
  1. [row class="" center=""][col][/col][/row]
Shortcode attributes
  • class: html attribute
  • align: left, right or center

Col

Example:
  1. [row class="" center=""]
  2. [col id="" class="" type="1x2" align=""][/col]
  3. [col id="" class="col-md-12" type="" align=""][/col]
  4. [/row]
Shortcode attributes
  • id: html attribute
  • class: html attribute. You can use classes of Bootstrap
  • type: 1x1 (default), 1x2, 1x3, 1x4
  • align: left, right or center

Accordion

Example:
  1. [accordion id="" class=""]
  2. [accordion_item title="Element 1"] Element 1 content [/accordion_item]
  3. [accordion_item title="Element 2"] Element 2 content [/accordion_item]
  4. [accordion_item title="Element 3"] Element 3 content [/accordion_item]
  5. [/accordion]
Shortcode attributes
  • id: html attribute. If you specify ID, than only one accordion element can be active.
  • class: html attribute
For attachment element [accordion_item][/accordion_item]
  • title: Accordion element title
  • animation: Animation name
  • animation_delay: Animation delay

Skill

Example:
  1. [skill percent="80" title="Skill 1" color="#ff0000"]
Shortcode attributes
  • percent: (default 50)
  • title: text in the circle's center
  • color: border color in RGB format (default #9eb533)

Video

Example:
  1. [video url="http://player.vimeo.com/video/22439234" width="" height=""]
Shortcode attributes
  • url: video url vimeo.com
  • width: html attribute width for iframe
  • height: html attribute height for iframe

Last posts

Example:
  1. [lastposts ids="" limit="10" category_ids="" order="DESC" order_by="" inverse="false" type="slider"]
Shortcode attributes
  • ids: you can specify IDs (separating by comma), which you want to show in the slider
  • class: html attribute
  • limit: how many posts you want to show in the slider (default 10)
  • category_ids: you can specify the ID categories (separating by comma), from which you want to show posts
  • order: method of posts sorting, DESC and ASC (default DESC)
  • order_by: field, on which will be held sorting , possible parameters are here...
  • inverse: inverse style (true or false)
  • type: type of its representation (slider or grid)

Pricing

Example:
  1. [pricing ids="" limit="3" order="ASC"]
Shortcode attributes
  • ids: you can specify ID's pricing tables (separating by comma), which you want to show
  • limit: how many pricing tables to show (default 3)
  • order: method of pricing table sorting, DESC and ASC (default ASC). Sorting is held by the field Order in block Page Attributes in the editing page table

Team

Example:
  1. [team ids="" limit="10" inverse="false"]
Shortcode attributes
  • ids: you can specify the ids of persons (separating by comma), which you want to show
  • class: html attribute
  • limit: how many persons to show (default 4)
  • inverse: inverse style (true or false)

Portfolio

Example:
  1. [portfolio limit="10" title="Works"]
Shortcode attributes
  • limit: how many portfolio items to show (default 10)
  • title: title, which will be displayed to the left of the category

Services

Example:
  1. [services text="Our services" inverse="false"]
Shortcode attributes
  • text: text, that will be displayed in the center of the circle
  • inverse: inverse style (true or false)

Gap

Example:
  1. [gap size="50"]
Shortcode attributes
  • size: height padding in px. E.g.: 50

Divider

Example:
  1. [divider title="Divider 1" type="center"]
Shortcode attributes
  • title: title in the divider
  • type: the location of the title (left, right, center)

Alert

Example:
  1. [alert type="default"]
Shortcode attributes
  • type: default, success, black, warning, primary, info, danger (default 'default')

Button

Example:
  1. [button label="Click now" link="#" type="default" size=""]
Shortcode attributes
  • id: class: html attribute
  • class: html attribute
  • label: button text
  • link: button reference
  • type: button type (default, primary, success, info, warning, danger, link, black). Default: 'default'
  • size: button size (small, extra-small, large). Default: none

Feature

Example:
  1. [feature icon="fa-bolt" title="" text="" color="" icon_color="" bg_color="" type=""]
Shortcode attributes
  • icon: Font Awesome icon class. Ex: 'fa-bolt' (More...)
  • title:
  • text:
  • color: (Ex: '#00ff00')
  • icon_color:
  • bg_color: background color
  • type: type of the block (border, background or none)

Clear

Outputs the div block with class .clearfix

Example:
  1. [clear]
Shortcode attributes

Doesn't have attributes


Section title

Example:
  1. [section_title title="About" align="center" animation="" animation_delay="500"]
Shortcode attributes
  • title:
  • align: the alignment of the text (left, center, right, justify)
  • animation: name of the animation. Possible options
  • animation_delay: animation delay in msec

Animation

Example:
  1. [animation class="" type="fadeInUpBig" delay="300"]
  2. <img class="aligncenter size-full wp-image-216" src="IMG_URL" alt="" />
  3. [/animate]
Shortcode attributes
  • class: html attribute
  • type: (default fadeInUpBig). Possible options
  • delay: animation delay in msec

Animation box

Example:
  1. [animation_box height="340px"]
  2. [animation_img src="IMG_URL" type="fadeInUpBig" align="center" z_index="3"]
  3. [animation_img src="IMG_URL" type="fadeInUpBig" delay="300" align="center" z_index="2"]
  4. [animation_img src="IMG_URL" type="fadeInUpBig" delay="600" align="center"]
  5. [/animation_box]
Shortcode attributes
  • height: height of the block
For attachment element [animation_img][/animation_img]
  • src: link to the image (source)
  • width: width of the image
  • height: height of the image
  • alt: html attribute
  • type: name of the animation. Possible options
  • delay: animation delay
  • align: horizontal alignment (left, center, right)
  • z_index: css option More...
  • top: css option
  • bottom: css option
  • left: css option
  • right: css option

Text

Example:
  1. [text class="descriptions" align="center" font_size="" line_height="" color="" tag="p"]
  2. We make superior products with superior features. Innovation doesn't rest, neither do we. Entirely new tools and features give you more control than ever.
  3. [/text]
Shortcode attributes
  • class: html attribute
  • font_size: font size (in px, %, em)
  • line_height: line spacing size
  • color:
  • tag: wrapper for text (p or div)
  • align: horizontal alignment (left, center, right, justify)

Zoom img

Example:
  1. [zoom_img src="IMG_SRC" src_big="IMG_BIG_SRC" width="750" height="447"]
Shortcode attributes
  • class: html attribute
  • src: link to the image (source)
  • src_big: link to the big image
  • width: html attribute for img
  • height: html attribute for img
  • alt: html attribute for img

Facts

Example:
  1. [facts title="Some Funny Facts<br>About our works & life" inverse="true"]
  2. [facts_list]
  3. [fact title="Nice Reviews" color="#d73e4d" percent="75" icon="fa-briefcase"]
  4. [fact title="Happy Clients" color="#375099" percent="97" icon="fa-trophy"]
  5. [/facts_list]
  6. [facts_list]
  7. [fact title="Projects Created" color="#d6973d" type="counter" counter_val="908" icon="fa-heart"]
  8. [fact title="Lines of Code <br>Written" color="#179680" type="counter" counter_val="1059" icon="fa-comment"]
  9. [/facts_list]
  10. [/facts]
Shortcode attributes
  • class: html attribute
  • title: text in the big circle
  • inverse: inverse style
For attachment element [fact]
  • percent: html attribute
  • title:
  • color:
  • icon: Font Awesome icon class. Ex: 'fa-briefcase' (More...)
  • type: none or counter
  • animation_delay: in ms
  • counter_val: counter value (if type set 'counter')

Testimonials

Example:
  1. [testimonials ids="" limit="10" order="DESC" order_by="" inverse="false"]
Shortcode attributes
  • ids: you can specify IDs (separating by comma), which you want to show
  • class: html attribute
  • limit: how many posts you want to show in the slider (default 10)
  • order: method of posts sorting, DESC and ASC (default DESC)
  • order_by: field, on which will be held sorting , possible parameters are here...
  • inverse: inverse style (true or false)

Stories

Example:
  1. [stories ids="" limit="10" order="DESC" order_by="" inverse="false"]
Shortcode attributes
  • ids: you can specify IDs (separating by comma), which you want to show
  • class: html attribute
  • limit: how many posts you want to show in the slider (default 10)
  • order: method of posts sorting, DESC and ASC (default DESC)
  • order_by: field, on which will be held sorting , possible parameters are here...
  • inverse: inverse style (true or false)

Animation layers

Example:
  1. [animation_layers]
  2. [layer position="left-top" img_src="IMG_SRC_1" width="740" height="590" alt="" animation="fadeInDown" delay="300"]
  3. [layer position="right-top" img_src="IMG_SRC_2" width="740" height="362" alt="" animation="fadeInDown" delay="700"]
  4. [layer position="left-bottom" img_src="IMG_SRC_3" width="740" height="185" alt="" animation="fadeInUp" delay="500"]
  5. [layer position="right-bottom" img_src="IMG_SRC_4" width="740" height="234" alt="" animation="fadeInUp" delay="900"]
  6. [/animation_layers]
Shortcode attributes
  • class: html attribute
For attachment element [layer]
  • position: the position of the layer (left-top, left-bottom, right-top, right-bottom)
  • img_src: link to the image
  • width: html attribute
  • height: html attribute
  • alt: html attribute
  • animation: name of the animation. Possible options
  • delay: delay in ms

Sandwich animation

Example:
  1. [sandwich_animation]
Shortcode attributes

Doesn't have attributes


Logo box

Example:
  1. [logo_box src="IMG_SRC" width="" height=""]
Shortcode attributes
  • class: html attribute
  • width: html attribute for img
  • height: html attribute for img

Download btn

Example:
  1. [download_btn link="#" text=""]
Shortcode attributes
  • link: href link
  • text: text in the button

Features bullets

Example:
  1. [features_bullets img_src="http://wordpress.promo-gear.itembridge.com/1/wp-content/uploads/2015/07/feature-phone.png" width="551" height="702" inverse="true"]
  2. [bullet position="left" left="39%" top="15%" animation="fadeInLeft" animation_delay="400" number="1" title="Look" text="Gorilla Glass 3 display"]
  3. [bullet position="left" left="32%" top="27%" animation="fadeInLeft" animation_delay="600" number="2" title="Touch" text="Ultrapixel sensor technology"]
  4. [bullet left="69%" top="18%" animation="fadeInLeft" animation_delay="800" number="3" title="Watch" text="High resolution with wide viewing angles"]
  5. [bullet left="66%" top="49%" animation="fadeInLeft" animation_delay="1200" number="4" title="Live" text="Serious battery life"]
  6. [bullet position="left" left="37%" top="58%" animation="fadeInLeft" animation_delay="1400" number="5" title="Feel" text="Warp-speed performance"]
  7. [bullet left="65%" top="68%" animation="fadeInLeft" animation_delay="1600" number="6" title="Listen" text="Built-in amps for rich sound"]
  8. [/features_bullets]
Shortcode attributes
  • img_src: link to the image (source)
  • width: html attrubute
  • height: html attrubute
  • alt: html attrubute
  • inverse: inverse style (true or false)
For attachment element [bullet][/bullet]
  • position: (left or right). Default: right
  • left: css property
  • top: css property
  • title:
  • text:
  • number:
  • animation: name of the animation. Possible options
  • animation_delay: animation delay in ms

Career

Example:
  1. [career]
  2. [career_year year="2005" title="<strong>Web Developer</strong><br> Soul IT Solutions" text="Developed, managed, operated and promoted an Internet business."]
  3. [career_year year="2007" title="<strong>Web Developer</strong><br> Soul IT Solutions" text="Developed, managed, operated and promoted an Internet business."]
  4. [career_year year="2009" title="<strong>Web Developer</strong><br> Soul IT Solutions" text="Developed, managed, operated and promoted an Internet business."]
  5. [/career]
Shortcode attributes

Doesn't have attributes

For attachment element [career_year]
  • year:year of the career/li>
  • title: its title
  • text: and some text

In order to display the text when clicking on the year element, you need to insert this shortcode [career_tabs_content] in the needed place


Animation list:

  • flash
  • shake
  • bounce
  • tada
  • swing
  • swing
  • wobble
  • wiggle
  • pulse
  • fadeIn
  • fadeInUp
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig
  • bounceIn
  • bounceInUp
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • rotateIn
  • rotateInUpLeft
  • rotateInDownLeft
  • rotateInUpRight
  • rotateInDownRight

Menu

To set up your navigation menu you should navigate to Appearance → Menus. Create a new menu and add the desired items (pages). For each element you can set the type: default or section (will be displayed as a section on the one-page site).

Don't forget to set Theme locations: Primary menu

image

Configuration

To set up the amount of elements, displayed on the front page, go to Settings → Reading and in the field Blog pages show at most set the necessary amount

image

Code copied to clipboard