Prodigy Documentation

Get Support

Prodigy Introduction

Prodigy is a multinational theme, very flexible and layout based.

The prodigy design (frontend) is based on Visual Composer Elements which gives you the ability to create any kind of layouts and mix them just the way you need them.

So all you have to do is to start creating pages, choose your layout and place the Elements however and wherever you need them.

Here on this URL you can check out the Visual Composer Documentation.

Installation

There’s no big deal with this one.

Just go ahead and extract “prodigy.zip” from the package you got from Themeforest (do not install the complete package) than go to Appearance Themes – Add New – Upload Theme.

From the file picker there “Choose File” pick up “prodigy.zip” and click “Install Now“.

Your server should allow uploading files up to 20MB, prodigy has ~15MB so when you get the message “Are your sure ?” this means your server is not allowing you to upload a file that large.

2014-08-08_1746

Getting Started

Well after you installed Prodigy there’s 2 things you can go on.

1 ) Built the layouts you need

2 ) Configure Prodigy using Customizer

We will start explaining the layouts from the next Section, and after you got everything on pages set-up we’ll explain the Customizer Options.

Building Layouts

Every page on our demo beside : Blog and Portfolio pages are made using the Layout Builder. Each page is independent from each other which means you can choose between 6 headers and op to 100 Elements. To create a layout page go to Pages – Add New, than choose from the Template drop-down any of :

  1. Layout Page Header 1
  2. Layout Page Header 2
  3. Layout Page Header 3
  4. Layout Page Header 4
  5. Layout Page Header 5
  6. Layout Page Header 6 Vertical Menu

2014-08-08_1757 After you did that, click on “Backend Editor” and you’ll see the Visual Composer UI which is very intuitive and using that you can start creating Layouts. To add a new row, click Add row and you’ll see immediately the row UI there, using that you can tell the current row number of columns and start placing elements there. 2014-08-08_1800 There are elements which are shipped with Visual Composer and some extra elements we placed there, you’ll note that extra elements has the Umbrella Logo. Elements which are native, you can find their documentation at Prodigy Package Documentation folder, just look there for Visual Composer Documentation. And those extra elements will get explained here bellow.

Main Element : Row

This is the element which holds all other elements and you can add if from Visual Composer by clicking “Add Row”.

2014-08-11_1951

Each row can be configured independently with some extra options.

1 ) Enable Fullwidth – this keeps the row content on the grid but makes the row background fullwidth where you can choose a color if you need from “Design Options” tab

2 ) Enable Element Fullwidth – this will make the row fullwidth which means everything within the row will be fullwidth as well, ideally used when you create fullwidth sliders

3 ) Remove Element Container Padding – each row applies some padding on each element, so if you want you can use this option to remove it

4 ) Row ID – used to create one pages which we will explain later

5 ) Parallax Background – If you upload a background image from Design Options you can make the parallax effect using this option

 

Element : Full Screen Slider

On the previous section you can see how the Visual Composer works, now on we will explain every element one by one and it’s purpose.

This one is used to create a full screen slider and it is a complex element, which means after you placed that on a Column, which lives within a Row you can add another Element called Umbrella Full Screen slide.

To add a slide on the slider you have to click the “Plus” button within the slider :

2014-08-08_1804

A full screen slide element contains it’s custom fields which you have to configure them, here below we will explain each field and it’s purpose.

1 ) Image – Upload the image for that slide

2 ) Big Label – The text which will appear on the big label

3 ) Big Label Animation – Choose the in-animation of this label

4 ) Small Label – The text which will appear on the small label

5 ) Small Label Animation – Choose the in-animation for the small label

6 ) Button Text – The text within the button, you can leave it blank and the button wont appear there

7 ) Button URL

8 ) Button Animation

9 ) Select Overlay – Choose between 4 overlay styles which we prepared or use a custom one.

 

Element : Service Type 1

This is a service element used to create services.

2014-08-08_1810

 

Element custom fields explanation :

1 ) Animate on scroll – Enabled this to hide services, until it comes on screen and than animate it to display

2 ) Service Title

3 ) Service Icon – http://www.elegantthemes.com/blog/resources/elegant-icon-font You can see the icons preview on this URL

4 ) Service Content

5 ) Service URL

6 ) Service Button Text – The text on the button on bottom of each service

Element : Service Type 2

This is a service element used to create services. This one has an image instead of an icon which differs from the Service Type 1.

2014-08-08_1815

Element custom fields explanation :

1 ) Animate on scroll – Enabled this to hide services, until it comes on screen and than animate it to display

2 ) Service Title

3 ) Service Image

4 ) Service Content

5 ) Service URL

6 ) Service Button Text – The text on the button on bottom of each service

Element : Service Type 3

This is a service element used to create services. This one hasn’t an image neither an icon.

On our demo we associated it with an image element on the right.

2014-08-08_1820

Element custom fields explanation :

1 ) Animate on scroll – Enabled this to hide services, until it comes on screen and than animate it to display

2 ) Service Title

3 ) Service Content

4 ) Service URL

5 ) Service Button Text – The text on the button on bottom of each service

 

Element : Boxed Service

Another service element with an Icon.

2014-08-08_1859

Element custom fields explanation :

1 ) Animate on scroll – Enabled this to hide services, until it comes on screen and than animate it to display

2 ) Service Title

3 ) Service Icon – http://www.elegantthemes.com/blog/resources/elegant-icon-font You can see the icons preview on this URL

4 ) Service Content

5 ) Service URL

6 ) Service Button Text – The text on the button on bottom of each service

7 ) Element Height – if you need a specific element height

 

Element : Social Medias

Create social medias using this element.

2014-08-08_1901

Element custom fields explanation :

1 ) Sociual Media – Click add new social media to add a new network, than from the drop-down choose the Media and place the URL there, don’t forget to place http:// prefix

 

Element : Testimonials

Just like the fullscreen slider, this is a complex element as well which can have Single Testimonial element within it self.

2014-08-08_1904

To add a testimonial on the container you have to click the “Plus” button within the container.

Element custom fields explanation :

1 ) Image – Person avatar

2 ) Testimonial Content

3 ) Testimonial Author Name

4 ) Testimonial Author Name

5 ) In Animation – When you move through testimonials choose the animation

Element : Portfolio Posts Grid

This is used to display Portfolio posts which you have created, you can check out how to Create Portfolio Posts down on this page.

2014-08-08_1926

Element custom fields explanation :

1 ) Title

2 ) Subtitle

3 ) Exclude Posts – Place post id’s which you want to exclude from this element, use a comma separated list eg : 1,2,3,4

4 ) Exclude Categories – Exclude posts on those categories, place category id’s as a comma separated list eg : 1,2,3,4

5 ) Quote – The black quote within the grid

6 ) Quote Order – Where do you want to place the quote on grid

7 ) Layout – Choose the grid layout

 

Element : Team member

This element is used to construct team members.

2014-08-08_1931

Element custom fields explanation :

1 ) Member Title

2 ) Member Position

3 ) Member Content

4 ) Member Image – Member avatar

 

Element : Counter (Countdown)

This element displays a counter down to a date or time.

2014-08-08_1933

Element custom fields explanation :

1 ) Counter Date – The date to countdown at.

 

 

Element : Promotion Banner

Display a banner which has some text and a button ideally used to promote sales on a shop.

2014-08-08_1938

Element custom fields explanation :

1 ) Promotion Text – The text on banner

2 ) Button URL

3 ) Banner style – choose between 2 styles of the banner

 

Element : Blog Feed Horizontal

This elements displays a feed of posts from a specific category.

2014-08-08_1953

Element custom fields explanation :

1 ) Select Category – Choose the category that you want to display feed at

2 ) Number of posts

3 ) Include Only These Posts – Enter post id’s that you want to show only them and don’t list latest, use a comma separated list eg : 1,2,3

4 ) Button URL – The read more button URL

5 ) Overlay – Choose between 4 overlay styles

 

 

 

Element : Blog Feed Vertical

This is the same as blog feed horizontal with a different design.

2014-08-08_1955

Element custom fields explanation :

1 ) Select Category – Choose the category that you want to display feed at

2 ) Number of posts

3 ) Include Only These Posts – Enter post id’s that you want to show only them and don’t list latest, use a comma separated list eg : 1,2,3

4 ) Button URL – The read more button URL

5 ) Overlay – Choose between 4 overlay styles

 

Element : Clients

This is also a complex element (with inner elements) which is used to display a list of your clients.

2014-08-08_1957

 

Click on the plus button and add a single client or more of them.

The single client element custom field explanation :

1 ) Image – The client logo

2 ) Client Website

3 ) In Animation – When you navigate through client choose the animation

Element : Caption with image

Use this element to place a note with an image behind.

2014-08-08_2000

Element custom fields explanation :

1 ) Caption text

2 ) Caption URL – The url to navigate user when caption is clicked

3 ) Caption Image – Caption background image

4 ) Overlay

 

 

Element - Caption

Just like the caption with image, but it has a solid background where you can also choose a background color.

2014-08-08_2004

Element custom fields explanation :

1 ) Caption Text

2 ) Caption Small Text

3 ) Text Align

4 ) Caption URL – The url to navigate user when caption is clicked

5 ) Caption Button Text

6 ) Text Color – If you have a light solid background color you can change text color as well

 

Element : Umbrella Slider

This is a complex element with Slide elements within, when you add this at Visual Composer you’ll see a dialog where you can place the Slider Height and Autoslide delay, you can leave it 0 to disable the delay at all.

2014-08-08_2015

After you saved it’s settings click on the big “plus” icon to add slider, slides.

Element custom fields explanation :

1 ) Image – this slide image

2 ) Video URL – place a URL from Vimeo or Youtube, if this field contains a URL than the image will be ignored

3 ) Video Initial Sound – if you want to change the default video player sound level

4 ) Big Label

5 ) Big Label Animation

6 ) Small Label

7 ) Small Label Animation

8 ) Button Text

9 ) Button URL

10 ) Button Animation

11 ) Text Align

WooCommerce Elements

WooCommerce Cart – shows the cart page

WooCommerce Checkout – shows the checkout page

WooCommerce Order Tracking – shows the order tracking form

WooCommerce My Account :

Shows the ‘my account’ section where the customer can view past orders and update their information. You can specify the number or order to show, it’s set by default to 15 (use -1 to display all orders.)

WooCommerce  Recent products :

Lists recent products – useful on the homepage. The ‘per_page’ shortcode determines how many products to show on the page and the columns attribute controls how many columns wide the products should be before wrapping.

WooCommerce  Featured Products :

Works exactly the same as recent products but displays products which have been set as “featured”. In this example, the shortcode is saying show 12 featured products in 4 columns.

WooCommerce  Product :

Show a single product by ID or SKU.

WooCommerce  Products :

Show multiple products by ID or SKU. Make note of the plural ‘products’.

WooCommerce   Add to cart :

Show the price and add to cart button of a single product by ID.

WooCommerce   Add to cart URL :

Echo the URL on the add to cart button of a single product by ID.

WooCommerce   Product page :

Show a full single product page by ID or SKU.

WooCommerce   Product category :

Show multiple products in a category by slug.

WooCommerce  Product Categories :

Display product categories loop

WooCommerce  Sale Products :

List all products on sale

WooCommerce  Best Selling Products :

List best selling products on sale

WooCommerce  Top Rated Products :

List top rated products on sale

WooCommerce  Product Attribute :

List products with an attribute shortcode

WooCommerce  Related Products :

List related products

For everything about WooCommerce elements please check out this page : http://docs.woothemes.com/document/woocommerce-shortcodes/

Element : Portfolio masonry grid

This element displays portfolio posts on a masonry grid format.

2014-08-08_2103

Element custom fields explanation :

1 ) Title

2 ) Subtitle

3 ) Exclude Posts – Place post id’s which you want to exclude from this element, use a comma separated list eg : 1,2,3,4

4 ) Exclude Categories – Exclude posts on those categories, place category id’s as a comma separated list eg : 1,2,3,4

5 ) Number of posts

Element : Variation Search Form

This element creates a search form with drop-downs which makes available to search for Variations or Tours.This field uses Product Attributes to search form them.

2014-08-11_1927

Element custom fields explanation :

1 ) Enter the shop URL if you want a custom one – Normally on search results is displayed the shop page, but if you have a custom one enter it

2 ) Search Button Text

3 ) Append Text – On each drop-down prefix some text

4 ) Enable Date Pickers – If you have tours with dates enabled than this field is usefull

5 ) Enable Text Search Field – Insert a text field to search for text, this plugin might be useful on this one https://wordpress.org/plugins/search-everything/

6 ) Exclude Variations – Exclude some variations which you created on WooCommerce Products

After you have configured the Variation Search form, go to Appearance – Customizer and on “Variation Search Form” choose the logic :

“And” – which means all products should have

“Or” – all product which have at least one of the attributes

Element : Pricing Table

You can use this element to create Pricing Tables for Services or Products you got.

2014-08-11_1935

Element custom fields explanation :

1 ) Heading Text

2 ) Heading Price

3 ) Sub Heading Text

4 ) Table Elements – Enter elements of this pricing table, and use “Enter” or “New Lines” to separate them

5 ) Button URL

6 ) Button Text

7 ) Table Style – Choose between 2 table styles

Element : Restaurant Menu

This is a complex element which we used to create menu’s for restaurants.

After you added that element on Visual Composer, click the big “Plus” icon to add Restaurant Menu Items.

2014-08-11_1939

Element custom fields explanation :

1 ) Image

2 ) TItle

3 ) Description

4 ) Price

5 ) URL – If you want to associate this item with a WooCommerce product, place the product URL or any kind of URL

 

Element : Skill Counter

Use this element to show different stats on a fashionable way eg : Skills

After you added that element on Visual Composer, click the big “Plus” icon to add Skill Counter Items.

2014-08-11_1944

Element custom fields explanation :

1 ) Icon – Chose the Iconmoon Icon http://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website

2 ) Number – The number to count at

3 ) Text – The text under number

4 ) Style – Choose a predefined style or create your background solid color using the color picker

5 ) Background Color – use this if you need a custom color which will cause to ignore option number 4

Element : Custom Google Map

Use this element to embed google maps on your site.

2014-08-11_1947

Element custom fields explanation :

1 ) Title

2 ) Google Maps Embedd Code – Visit this and choose your location, pin it and copy the Embed or the URL and paste it on this field

3 ) Zoom Level – Initial zoom level on map, the larger it is closer it get

4 ) Map Height – Choose the map height

5 ) Custom Picker – Upload a custom image if you want to place it on the map as the address marker

Creating Portfolio Posts

Portfolio posts are made to handle various multi media types and they can be used to showcase any of your works.

To create a portfolio post go to Portfolios – Add New

2014-08-11_2014

You have to place a Title, some content and a Featured Image first.

After you’ve done that you have to fill Portfolio Metas :

1 ) Layout – Choose between 3 Layouts

Default – The layout with multimedia items in a slider

Case Study – Multimedia items are listed separately like Behance

Fotorama – A fullscreen image gallery layout

2 ) Post Brief Label

3 ) Post Brief – Add some text items which explains briefly your work, click add row to add a new item

4,5 ) Button Text , Button URL – If you want a button on portfolio fill those 2 fields

6 ) Images and Embeds – Add images or URL from various services : http://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F , click add row to add a new item

2014-08-11_2018

For additional Portfolio Settings, which are global settings and take place for each Portfolio you create you have to go to Appearance – Customize and go to Portfolio Section.

Creating Project Pages

Now that you’ve created Portfolios you’ll need a Projects page to list them.To create a Projects page go to Pages – Add New and from page templates drop-down choose one of the Project Pages Layouts :

2014-08-11_2020

After you choose the page template you can use Projects Page Meta to configure number of projects per page and if you want to exclude projects from a certain category you can do that from there.

Creating Blog Posts

To create a blog post go to Posts – Add New and fill the post with content like : Title, Content and Featured Image.

2014-08-12_1455

After that you have to set-up the blog post meta which are :

1 ) Post Layout – Choose between 2 post layouts

2 ) Post Overlay – The overlay on single post page header

3 ) Post Formats – Tell what format this post is

4 ) Post Intro

5 ) Post Embed – Place the embed code from the famous services http://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F

6 ) Reviews – Create reviews for this post, click add row to add a new review and place review title and the note in number which affects the total percentage

7 ) Review Title – The review table heading

8 ) Review Description

Creating Blog Pages

To create a blog page go to Pages – Add New and create a new page, place only a title and if you want some content, the page template does not matter as you have to choose the blog layout from a different Option rather than the page template.

2014-08-12_1459

After you did that go to Settings – Reading and select “A static page (select below)” on “Front page displays” option, than choose on Front Page your home page and on Posts page drop-down select the page we created before.

2014-08-12_1500

Next step is to chose the blog Layout and you can do so by going to Appearance – Customize and locate Blog Section ->

Than on blog type choose the blog template that you need.

2014-08-12_1501

There are plenty other options which will help you configuring the blog page just the way you need it.

 

 

 

Dealing with menu

Prodigy contains 6 different headers and plenty of menu options like a simple nested drop-down menu, or a complex one where child items are separated on rows within the drop-down, or you can even place a sidebar on menu. (Creating Sidebars we will explain after this post).

You can also use the menu options to construct one page designs, as Prodigy works with Layout Blocks you can grab them and place them anywhere on the page.

So to create a simple menu go to Appearance – Menus and click “create a new menu”.

2014-08-12_1523

On the bottom of the menu you have to choose menu location, and this is because you can have different menus for Mobile, Main Menu and Sticky Menu.

After you created the menu, start adding menu items there like Pages, Posts etc.

On each menu item, which is top level and has no parent you can see 2 options.

1 ) Mega Menu – Make this menu a complex one where all it’s children are placed on a grid

2 ) Sidebar – Display widgets from a sidebar on this menu, this causes to ignore menu child items and leave place for widgets

2014-08-12_1526

 

Creating One Page

If you remember from the row section you could place a row id which should be only lowercase alphanumeric characters, so if you did so grab the row ID on on any Menu Item than you placed place that ID :

2014-08-12_1530

This will transform any kind of menu items on a one-page scroll.

Note than the menu item should have as URL the page URL where this row lives, and if user is on another page this will redirect user at the page where the row is and scroll down to the row, otherwise it will only perform an animated scroll down.

Dealing with Sidebars

If you go to Appearance – Widgets you will see some sidebars : Blog Sidebar, Footer Sidebar and if WooCommerce is enabled Shop Sidebar as well.

Those are static sidebars which are used on non-layout page templates like Blog Sidebar is used on Blog, Footer Sidebar on Footer and Shop Sidebar on Shop and Product pages.

But you can create as many sidebars as you want if you go to Appearance – Customize and choose Sidebar Section.

2014-08-12_1534

So to add a new sidebar simply click “Add Sidebar” and choose a unique name for it.

Why would I need unlimited sidebars ?

You will need them on 2 cases.

1 ) Using Visual Composer you can see a Visual Composer native element Widgetzed Area where you can choose a sidebar from the drop-down that element provides and place a sidebar anywhere you want

2 ) On complex menu’s if you want to make a Widgetzed drop-down menu you will need this feature as well.

Shop and Online Booking

The shop part on Prodigy is possible thanks to WooCommerce, and everything you need to know about it you can find it here.

Prodigy provides some extra functionality for WooCommerce which you can use for various needs, we used that for Online Booking.

Each product can have custom fields which will gather data from users and this way the booking part will be possible.

So to create a booking form go to Booking Form – Add New

2014-08-12_1606

Using the form builder there, create the form that suits your needs.Click Add Field and choose the field type between :

 

Text Area

Text input

Checkbox

Select

Radio

After you created your form, click publish and go to any Product and edit that product.

On product edit screen you can see Product Meta where the fields to configure online booking are located at, together with additional other fields.

2014-08-12_1608

Enable booking and from the drop-down at “Product Booking Form” choose the Booking Form you created previously.

Don’t forget to choose the start and end dates for that tour as well.

 

Parallax Builder (Needs CSS Knowledge)

Prodigy has a parallax multi layer builder, and it is separated on the Creation part and the Presentation part.

To create a Parallax Element you have to go to Parallax – Add New on your admin panel.

The next step is to configure the parallax first, where you have to choose the parallax height and the container background image.

2014-08-12_1626

 

Than you can add elements within the parallax container, elements which will get animated while user scroll into the parallax area.

Choose the element name, the element type and click “Add new element” to add a new one, you can add as many element as you want.

2014-08-12_1628

Than you have to add keypoints into the element, and you can do so if you click “Edit” button on the element which you want to add/modify keypoints.

First you have to place the text content of this element within the textarea and than you can add keypoints.

The logic of the parallax is to keep changing some CSS properties from a starting point – keep doing that – stop doing that on end points which means :

If I want to move the text from bottom to top I have to add a keypoint at scroll Position 0 which tells the element to make it’s CSS property : top : 0px and than I would add another keypoint on 200 scroll position (if your container is 200px height, it means this is the last scroll point) and tell the element to make it’s CSS property:top 200px; (let’s hope this made at least a point).

To get the Scroll Position where to add a keypoint simply scroll through “parallax preview” panel and when you are at the desired Scroll Position just click “Add new keypoint”.

2014-08-12_1634

When you’re done with Keypoints, go to any page that you want to add this Parallax, on Visual Composer add the Parallax Element and choose from the drop-down the post you just created.

Customizer

To configure additional Prodigy global options we used Customizer to make that possible.

To start configuring Prodigy go to Appearance – Customizer, which you could see in other sections as well.

Here bellow we will describe all Customizer Sections which are not yet described.

Footer Section :

Enabled Footer – Enable or disable footer

Footer URL – the url on footer

Footer Text

Footer Image

Enable Go To top – the button which appears when user scrolls to bottom

404

This section is used to configure the 404 page

404 Title

404 Sub Title

404 Button Text

404 Button URL

General Styling

Layout Type – Fullwidth or squared, if you choose squared than full width elements wont have the effect

Background Color – Choose the body background color

Background Image – Insert a background image if you want

Background Repeat

Background Sizing

Custom Font – Choose a google font and take advantage of the default font we used

Paragraph Custom Font

All heading font size – change default sizes for headings

Menu Font Size – Change the menu font-size

Menu Font Color – Change the menu font color

Brand Color – Change the default brand color

Hover Brand Color

Search Button – Display a search button on header

Header cart icon – display the cart icon on header

Site Loader – Display the loading animation until the site is loaded

Custom CSS and Custom JavaScript – insert there custom css or js but don’t include style or script tags and if you need to use jQuery use jQuery instead of $

Header

Site Logo – Choose the site logo

Logo Size – Change the default max-height logo constrain

Default Header Type – Choose the header type for non layout pages (Shop,Projects,Blog etc)

Header Position – If you choose header 5 than choose it’s position top or bottom

Vertical Header Position – If you choose vertical header than configure it’s position left or right

Remove Header Absolute Position – This indicates header 3 and header 2

Vertical Header Background Image – If you want to place a background image on vertical header

Vertical Header Skin

Header 2 Skin

Enable or Disable Sticky Menu

Set the offset on pixel when to display sticky menu – how much should user scroll on pixels to display sticky menu

 

Importing Content

Prodigy contains the dummy content which you can see on all Demos out there, and those files are located at Demo Content folder within the Prodigy Package.

To start the import process we suggest to clean out the WordPress completely by installing WordPress Reset Plugin, than go to Tools – Reset.

After you’ve done so, go to Tools – Import and choose WordPress :

2014-08-12_1713

Than on the file picker, point the XML file that you want to import content and click “Upload file and import” and on the next step there is an option “Import Attachments”, click “Download and import file attachments” in order to fetch images as well.

Click submit and that’s it, enjoy exploring Prodigy.

Installing Plugins

If for any reason you dismissed the message on your Dashboard which helps you installing plugins packed with Prodigy, than you can find them on framework/plugins directory within Prodigy Theme Directory.