Test documentation

Before using Test, please meet the following requirements:

• essentials to run WordPress – here you can find more information – in case any doubts regarding the server, contact your host provider,
• latest version of WordPress, which you can download here,
• create secure FTP and Database.

When purchasing our theme from Themeforest, you need to download the Test files from your Themeforest account. Navigate to downloads tab on Themeforest and find Test. Below you’ll find a full list of what is included the .zip file, along with a brief description of each item.
Test Folder contains:

• {theme}.zip – main installation folder
• {PSD_included}

All of our items come with free support. For some help you can reach to our dedicated support forum. Free support is limited to questions regarding the themes features or problems. We provide premium support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, feel free to contact us on premium@createit.pl.

For free support, follow the steps below

• Step 1 – Click Here to create a free forum account. You’ll need your Themeforest purchase code, which can only be received when purchasing the theme from Themeforest.net.
• Step 2 – Enter your Themeforest Purchase Code, an e-mail and a password.
• Step 3 – Once you have an account, sign in to the forum and get started.
• Step 4 – Find your theme on a forum home page.
• Step 5 – Create new issue by clicking on a button at the right.

Before You Post On a Forum

We urge you to follow the steps below, before you post a new topic on the forum, to speed up your request. It’s in everyones interest and will benefit in making the entire forum more efficient:

• Step 1 – Always check the Documentation and the Knowledgebase Section. Most questions are already answered in those areas.
• Step 2 – Always use our Forum Search before you post, it’s possible that your issue has already been brought up and answered.
• Step 3 – If your question hasn’t been brought up, please post a new topic. Always be as specific as possible. Creating a topic requires entering the live URL to your home page or page that shows the issue in question. It also has bars for WP and FTP login info, which aren’t required, however, providing us with your login information can save a lot of time for both of us. Login credentials are securely stored and accessible only by our support staff.
• Step 4 – We usually answer questions in 24 hours on working days. However if you don’t get any answer in 72 hours bump up your question or send us an e-mail.

Our support hours: 10:00 AM – 6:00 PM UTC +1 on Monday to Friday.

Premium Support

We can create your website from scratch, redesign it or just extend the current ones. For more information, please take a look at our website.

Typical issues covered by Premium Support:

• Custom CSS
• Support for third party software and plug-ins
• WordPress Installation with Theme configuration
• Server configuration
• Site structure modifications
• Graphic adjustments, etc.
• WordPress general howto’s

If Test files are downloaded from your Themeforest account, you can start an installation by using WordPress administration panel.

Once you’ve logged in to your administration panel go to Appearance > Themes. Depending on your version of WordPress you’ll see Add New or two other tabs: Manage Themes and Install Themes.

Themes section

Here you’ll find instructions how to proceed with 3.9.0 and lower versions of WordPress.

If you’re using newer version, follow steps below to install the theme:

• Step 1 – click on Install Themes tab
  

  Install Themes tab

• Step 2 – choose Upload option to upload .zip file
  

  Upload theme

• Step 3 – choose {theme}.zip from you computer.
• Step 4 – once the file is chosen click Install Now
  

  Install theme

Common Install Error: Are You Sure You Want To Do This?

If you get the following question message when installing Test.zip file via WordPress, it means, that you have an upload file size limit. Install the theme via FTP or call your hosting company and ask them to increase the limit.

To install Test via FTP, follow steps below:

• Step 1 – Unarchive {theme}.zip file
• Step 2 – Access your host web server using FTP client
• Step 3 – Find directory wp-content > themes
• Step 4 – Put folder Test in directory wp-content > themes

Installation directory

Learn more:

WordPress codex – FTP clients

The fastest and easiest way to import our demo content is to use Theme Options 1-click Demo Importer. It will import all pages and posts, several sample sliders, widgets, theme options, assigned pages, and more. We recommend this approach on a newly installed WordPress. It will not replace content such as posts, pages, portfolio, etc. and delete current menus, but configure them and replace theme options. By that, if you have created some posts, pages or portfolio content before an import, you won’t loose them.

To import our demo content, please follow the steps below:

• Step 1 – install and activate plugins listed in Recommended Plugins message {warning}
  

  Recommended plugins

  and WooCoomerce plugin, if you’d like to use shop functionalities.

• Step 2 – setup Media thumbnails sizes in Settings > Media to recommended values:
  • Thumbnail size: {thumbnail_size}
  • Medium size: {medium_size}
  • Large size: {large_size}

If you’re using WooCommerce product images sizes in WooCoomerce > Settings > Products

• Step 3 – navigate to Appearance > Theme Options > General – 1-click Demo Import
• Step 4 – click the Import demo content button with multipage or onepager version.
  (WARNING:The image below is only an example of how the 1-Click Demo section might look like. Depending on the theme, the amount of images and/or tabs of the import demo contents, this option might look different.)

   

  

  1 click to import demo content

• Step 5 – importing can take a few minutes. Please be patient and wait for it to complete. Once it will be loading, you will see message with indicating progress.

Learn more:

Common errors with “1-Click Demo Import”

To create a new Page follow the steps below:

• Step 1 – select Pages > Add New
• Step 2 – add Title
• Step 3 – add content – we recommend you to create page content using shortcode generator or by modifying demo content
• Step 4 – choose page attributes:
  • Parent – if you want to create subpage
  • Template – you can choose one of defined page templates: {templates}
  • Page order
• Step 5 – choose template settings
• Step 6 – click Publish to make your page public.

Page attributes

Template settings

Learn more:

WordPress Pages

Test has the ability to make one page site with a scrolling to sections menu. Most sites are traditionally setup with individual pages, each page with its own content. One page site allows you to put all the content on one page, and the menu items will link to each different section of the page. Think of it as a full site but all on one page. Please read below for information on how to set this up.

Create A New Page With Your Content And Anchor Points

• Step 1 – Navigate to the Pages section of your admin and click Add New.
• Step 2 – Create page with all sections. Each section should begin with [chapter] shortcode or any other html element with unique id, for example :
  
  CSS

  [chapter id="work"] (...) content (...) [chapter id="services"] (...) content (...) [chapter id="about"] (...) content (...)

  1 2 3 4 5 6

  [chapter id="work"] (...) content (...) [chapter id="services"] (...) content (...) [chapter id="about"] (...) content (...)

• Step 3 – 2. In Appearance > Menus create new main menu (using Custom Links option), where URL will be section id with “/#” sign, for example : /#services or /#about.

Add new menu item

Item details

And your onepager menu is ready. Remember to choose Theme Location Primary Navigation to your menu.

If you have added some pages via Pages > Add new you can choose one and set it up as a homepage. Use {homepage_setup} and choose from the list your homepage. Remember to click Save changes at the end of editing.
{homepage-screenshot}

To create a standardized template for each page some of the settings you can set globally. You need to go to Appearance > Theme Options > Pages and choose from several options:

Pages Theme Options

You can change the following settings:

• show title on pages
• show breadcrumbs on pages
• show comments
• show comment form

No matter which method you use to display your blog posts, first thing you need to do is create them.

Test offers several blog post types:

• Standard
• Aside
• Image
• Video
• Audio
• Quote
• Link
• Gallery

Post formats

Follow the steps below to create a blog post

• Step 1 – navigate to Posts in your WordPress admin.
• Step 2 – click on Add New to make a new post. Create a title and insert your post content in the editing field. You can use any of our VisualComposer elements inside the post.
  

  Add new post

  If you want to use some additional fields, choose them from screen options at the top of the screen.

  

  Screen options

• Step 3 – add Categories from the right side. To assign it to the post, check the box next to the Category name.
• Step 4 – add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.
• Step 5 – for a single image, click the Featured Image box, select an image and click Set Featured Image.
• Step 6 – for a Gallery, insert more than one Featured Image, each image will be a slide in the gallery slideshow. Slides will be order by the date when the images was added to Media
• Step 7 – for a video post, paste the iFrame embed into the Video Embed Code field, file url to M4V file url or OGV File URL or Direct video url from Youtube, Vimeo or Dailymotion
• Step 8 – create an excerpt – Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts
  

  Excerpt

• Step 9 – once you finished, click Publish to save the post.

The most popular way of displaying blog posts is to setup blog index page. There all of your posts will be displayed and ordered by publish date.
To set the page as your post page, navigate to {blog_setup} and choose Blog index page from the ones you created.

{blog-screenshot}

Notice:
On Blog index page you will see only your posts, so don’t add any other content to it.

When using the assigned blog page as described above, all the options you can select are located in Appearance > Theme Options on the Posts tab. There are dozens of options to choose from such as layout, categories, dates, etc. There are general blog options and single post page options. Each one has a title and descriptions to help you understand what they do. Any type of blog options you need to set will be set here in theme options when using the assigned blog page.

• Index – these are mainly for the assigned blog page, you change here:
  

  Blog index theme options

• Single – these options all apply to the single post page, not the main archive page.
  

  Single Post Theme Options

The second blog method that we cover is our custom recent post shortcode. This shortcode is unique because it offers more compact design options that can work more efficently on pages with other content. This short code is a fantastic method because it allows you to place your blog posts on any page, assign custom categories to display, and so much more. You can use the short code as many times as you want, and on any page or post.

Below you can see how Recent Post shortcode will be displayed on your page:
{recent-posts}

Test is loaded with several options for displaying portfolio items. It offers many different options for you to present your portfolio. In addition there are numerous theme options and shortcodes options that allow you to customize how portfolio is displayed.

But first, you need to create your portfolio items. To do that, please follow the steps below:

• Step 1 – navigate to Portfolio items and click Add New
• Step 2 – create Portfolio Item title and content – you can use Test shortcodes to build content
• Step 3 – add Tags from the right side.
• Step 4 – add Categories from the right side. To assign it to the post, check the box next to the Category name.
• Step 5 – set portfolio item an order number if you want to display your portfolio item in a specific order
• Step 6 – choose featured image in Featured Image box
• Step 7 – set as many Portfolio settings as you want
• Step 8 – click Publish to save portfolio item

Learn more:

How to add multiple images to portfolio gallery?

One of the many ways of displaying portfolio items is to setup portfolio page. All of your portfolio items will be displayed there, ordered by publish date.
To set the page as your portfolio index page, navigate to Appearance > Theme Options – Portfolio and choose Portfolio index page from pages that you created.

Test includes a highly advanced theme options panel organized into sections that allows users to customize many different aspects of the theme. There is a Portfolio section of theme options that allows you to personalize different forms of the portfolio items; the date formats, single post page settings, and so much more. The posts tab is organized into 2 sections; General Portfolio Options, Single Portfolio Options. See the information below for the description and screenshot of each section.

• General portfolio options – these are mainly for the assigned portfolio index page because the portfolio shortcode has many of them built in. However some do apply.
• Portfolio item options – these options all apply to the single portfolio page, not the main index page. They apply to both assigned portfolio page, and the portfolio shortcode.

If you want to display your portfolio items in more places than portfolio index page – you can do it in several ways by Portfolio shortcodes.

Portfolio shortcodes

Every shortcode goes with several parameters, that allows you to sort or filter items in a few ways. On the following screenshots you can find part of available options.

Full of possibilities you can find on our demo page – you can preview parameters that we used after importing demo content. You can also use shortcode generator and use as many Advanced filter options as you want.

Advanced filter options

Test is loaded with several options for displaying jobs items and offers many different options for you to present it. In addition there are numerous theme options and shortcode options that allow you to customize how jobs are displayed.

To create jobs item, follow the steps below:
• Step 1 – navigate to Jobs and click Add New
• Step 2 – create Job Item title and content – you can use shortcodes to build content
• Step 3 – add Tags from the right side.
• Step 4 – add Categories from the right side. To assign it to the post, check the box next to the Category name.
• Step 5 – set job item an order number if you want to display your jobs items in a specific order
• Step 6 – choose featured image in Featured Image box
• Step 7 – set as many Job settings as you want
• Step 8 – click Publish to save job item

One of the ways of displaying jobs items is to setup Career page. All of your jobs items will be displayed there, ordered by publish date.
To set the page as your jobs index page, navigate to Appearance > Theme Options – Job and choose Jobs index page from pages, that you created.

Test includes a theme options panel organized into sections that allows users to customize many different aspects of the theme. There is a Job section of theme options that allows you to customize different aspects of the jobs items; date formats, single post page settings, and so much more. The job tab is organized into 2 sections; General Options and Single Item Options. See the information below for a description and screenshot of each section.

1. General jobs options – these are mainly for the assigned jobs index page.
   
   

   Jobs – general options

2. Jobs item options – these options all apply to the single job page, not the main index page. They apply for both assigned jobs index page, or the jobs shortcode.
   
   

   Single Job options

Surely you can not wait to start working on your new website. And reading documentation is probably the last thing you want at the moment. Guess what? We prepared a little shortcut for you! If you feel intimidated by the number of features that this theme offers, you can use this simple screenshot-description to easily customize your website. Check out this link {general-overview-link}.

Test can be easily customized with Visual Composer.

Simply drag and drop elements to build your page content. We prepared components which will help you determine main structure of the webpage – easily set up backgrounds, colors and styles for whole sections as well as lots of various smaller components which you can freely put wherever you want.

How to start?

We recommend you to use row as essential element of page structure.

Row

You can edit following row attributes:

Click pen to open edition tools

1. Header text
2. Level of header
3. Header alignment
4. Header font style
5. Section type – determines section background, you can choose from predefined color styles: white, grey, dark grey, dark blue, motive or effects: pattern, parallax, kenburns, video
6. Padding – top, bottom or both
7. Padding size – if you don’t want to have padding, choose None
8. Section height
9. Type of section layout – boxed or wide
10. Onepager element and ID – if you want to use section for scroll-to-section navigation
11. Custom class – if you want add custom CSS styles for element

You can also check additional options in tabs: General, Design Options and Animations

Row parameters

Once your section row is created you can choose number of columns in section, their width and optionally offset value.

Section grid

If you want to create full_width element you need to choose 1 column greed in section and set it as full_width element.

Click pen to edit column.

Full width column

Once you set up your section – you can put inside it as many components as you want.

Learn more:

For more information about Visual Composer, please check articles below:
How to install Visual Composer
Visual Composer demo
Visual Documentation

Installation

1. Activate plugin “WooCommerce”
   After activation you will see notification about installing WooCommerce pages:
   
   

   WooCommerce pages

   Click on Install to import following WooCommerce pages:
   • My Account
   • Checkout
   • Cart
   • Shop
2. Configure WooCommerce settings
3. Learn more about WooCommerce
   • Step 1 – add products
   • Step 2 – setup your products
   • Step 3 – sell what you’ve got
   • Step 4 – setup shipping options
   • Step 5 – manage your orders

Translation

WooCommerce plugin can be translated to any language. Here you can find instructions how to do that.

Test navigation menu is built with Uber Menu plugin, which allows you to create expanded Mega Menu.

Uber Menu plugin is not bundled with Test files and therefore it needs to be bought separately here. Detailed information regarding plugin installation can be found on Uber Menu online documentation.

Once plugin is activated, please create your menu just like any other WordPress menu and select theme location to apply UberMenu to. We recommend you to choose automatic integration to Primary Navigation

UberMenu settings

Now you can create your Menu in Appearance > Menus > Create a New Menu. Additional tab with advanced UberMenu elements, like: row, columns, tabs, dividers, etc. will help you to create expanded menu structure.

Advanced UberMenu elements

Additionally you can edit every menu item individually, by clicking Uber after hovering over an element.

Advanced UberMenu options

Notice:
If you want to use navigation menu imported with 1 click demo import and you are not using UberMenu plugin remember to select Standard Menu as Primary Navigation.

Learn more:

Plugin documentation

Follow the steps below to create a Menu Product items

• Step 1 – navigate to Menu in your WordPress admin.
  

  Add new menu product

• Step 2 – click on Add New to make a new product. Create a title and insert your description.
• Step 3 – add image via Featured Image
• Step 4 – set product price, currency and postscript in Menu item setting
  

  Menu item settings

• Step 5 – add menu categories, tags and order (optional) – on the right hand side of Menu edition page.
• Step 6 – click Publish to save you settings

For every menu item you can define:

1. Product Tags
2. Product Categories
3. Price
4. Currency
5. Postscript – a small text below product description (e.g. *contains nuts)
6. Featured image
7. Product thumbnail image – Multiple Featured Images plugin must be activated

Menu item options

Learn more:

Menu currency can be also edited globally for all Menu items via

Appearance > Theme Options > Menu

.

Once your menu items are created you can display them in your page using Menu shortcodes.

Menu shortcodes

Make it easy

Add some products and then try to paste code below on any page. It will display your newly added items.

• by [products tag=”recommended” limit=”3″] – 3 product items with tag “recommended” will be displayed.
  Products will have custom appearance for every active theme. Please note that products need to be tagged as
  “recommended’
• by [cat_name=”starters”] display every item with assigned category “starters”.

EXAMPLES:

Burger Lover items with tag “recommended”:

Burger Lover Recommended products

Seabreeze items with tag “recommended”:

Seabreeze recommended items

Seabreeze items with category “starters”:

Seabreeze starters

Cupcake items with category “Salty Cakes”:

Salty cakes

Setting Product order in the menu

Creating your menu you are able to set the order in which the products will show up on the list. Just check this few easy steps!

• Creating Menu with the use of the Menu shortocde choose yes for Custom order, like on the image below.
  

  Using custom order

• Now you are able to set the order of every single product by:
  1. Going from the WordPress dashboard to the 
  2. Creating new product or or choosing from the ones arleady created
  3. Setting in the Attributes order of the product:
     

     Order of the product

Or check our advanced filter options

in shortcodes > Menu > Products > Advanced filter option

Advanced filter options

EXAMPLE:

Display all product with “cake” in title or description. Start from the latest one.

 

 

 

 

 

 

 

 

 

 

Notice:

If you were using Food Truck version 2.8 or lower – you will notice some structure changes due to WooCommerce products. You will find your products under the Menu tab on the sidebar menu in admin panel as well as in shortcodes.
All of your previously created products will be saved with their settings, but under new tab – Menu.

Products are now only WooCommerce products.

WooCommerce Products

You can add WooCommerce Product via Products > Add Product

Add New Product

You can use Simple Product option and add only basic information:

1. Product Name
2. Description
3. Category
4. Tag
5. Stock keeping unit
6. Regular Price
7. Sale Price
8. Product short description
9. Product gallery
10. Product feature image

Product general settings

Variable Product

You can also use more advanced product settings, and show available product variables. To use that option, first create a product Attributes.

Product attributes

To every attribute are assigned terms, which you will use to create product variations.

Attributes terms

Once you have attributes and terms, you can go to product item edition to create product variations.

1. Choose from product data Variable Product
   

   Variable product

2. Go to Attributes tab and select your attributes
   

   Product attributes

3. Add product variations and click Link all variations once you’re finished
   

   Setup variations

4. Customize your product alternative by expanding variation tab – you can add here different image, dimensions, weight, price, status and shipping class
   
5. Remember to save changes once you have finished product edition – now you can see how your product looks:
   

   Variable product

Add products to Shop page

Once your products are created you can add them to your website. Setup your products index page via WooCommerce > Settings > Products

Shop page

Or add your product elsewhere on the website using Shop Shortcodes:

Shop Shortcodes

Products Listing Widgets

WooCommerce comes with several widgets dedicated to filter your products. You can easily set them in Products Listing Sidebar, which is by default displayed on Shop page:

Shop Widgets

Thanks to widgets your customers will be able to filter and sort products:

Shop Widgets

WooCommerce Theme Options

You can edit some of WooCommerce settings via Appearance > Theme Options. In WooCommerce tab you will find Global and Cart settings.

Global Theme Options

Cart Theme Options

How to disable WooCommerce?

If you don’t want to use WooCommerce Shop and you are interested only in displaying your product in catalog mode just deactivate the plugin in Plugins section:

Deactivate WooCommerce

Notice:
If you deactivate WooCommerce plugin – Shop shortcodes will no longer work.

Depending on which version of content arrangement you choose, you can create onepager or multipage navigation menu.

To create navigation menu dedicated to multipage websites, please follow the steps below:

• Step 1 – Navigate to Appearance > Menus
  

  Manage your menus

• Step 2 – Click on create a new menu, enter menu Name and click on Create Menu button
  

  Add new menu

• Step 3 – From the right side choose pages that you want to add to your menu and click on Add to Menu. Once menu items are added, you can reorder or nest them via drag and drop tool. Remember to click Save Menu when you finish to keep your changes saved.
  

  Add pages to menu

• Step 4 – You can easily rename every menu item in item details.
  

  Rename your menu items

• Step 5 – Optionally you can add to menu other items, like Links or Categories
• Step 6 – Check your menu as Primary Navigation to set it up as main menu.
  

  Primary navigation

• Step 7 – Always click Save Menu after providing any changes.

Test is build with shortcodes. Shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects in just one line, that would normally require lots of complicated and ugly code. Shortcode = shortcut.

You don’t have to know Shortcodes list, syntax or available parameters, if you decide to create your website content using shortcode generator, which you can find in your window toolbar. Generator allows you to simply put your images, text and other content to input fields and choose display options from self-explanatory boxes.

In shortcode generator you will find shortcodes for any page content element that you can see on the demo page.

Below you will find description for a few basic shortcodes types, which should give you an idea of ​​the shortcodes possibilities.

Structure

Page structure elements: columns, rows, spacers are shortcodes – check Structure section with shortcodes, which help you to create your page grid. Layout generator can be very useful here.

Layout generator

Typography

Do you want to add to your page sections headers, blockquotes, a list or simply a link? In section Typography you will find all options available in Test to format text elements.

Contact

If you want to put any element to let your users contact or follow you or your profile inside your page content, you will find that in Contact shortcode section. You can easily configure elements like: Google Map, Contact form, Newsletter Form, Social buttons and put them anywhere on your page.

Sliders

Our themes come with several types of sliders. You can see preview for them on demo page. All available sliders are always in Sliders the section of shortcode generator.

In the shortcode generator you can find also several types for buttons, boxes, portfolio items, bars and other elements. We encourage you to experiment with all available options.

Widgets are small blocks of content, which you can find in theme footer or sidebar. They were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel.

Just drag and drop the widgets you want, into the right hand side where your sidebars and footer widgets are listed. Simply drag your widgets over to the sidebar or footer column, and then populate the content.
There are various fields and settings you can choose for each individual widget and all are self explanatory. You can also use multiple widgets per footer column, just drag and drop them into place. And you can put as many widgets as you want inside sidebar. Once you have finished populating the widgets, always make sure to hit the Save button to save the settings.

Just drag widget from the left hand side and drop it on the right

Installation via Administration Panel

When {Plugin} files are downloaded from your CodeCanyon account. You can start installation using WordPress administration panel.

Once you’ve logged into your administration panel go to Plugins > Add New

Then:

Chose Upload (1), click Select a file (2), {plugin} from your hard drive and click Install Now (3)

Installation via FTP

To install {Plugin} via FTP follow step below:

• Step 1 – Unarchive {plugin} file
• Step 2 – Access your host web server using FTP client
• Step 3 – Find directory wp-content > plugins
• Step 4 – Put folder {plugin} in directory wp-content > plugins

Please note that upon plugin activation there are two sample size guides created, for a quick start you can just edit them!

To create a new size guide:

Go to Size guides > Add new in your WordPress Admin Panel

Create a new size guide

Insert a title and content

Fill size guide content

Title will be the name of the size guide. In the content, you can for example describe how a customer can measure its sizes properly.

Fill the size guide

Fill the size guide table content

In the sections 1 and 3 you can specify a table header and a caption.

To add/remove columns and rows just use the plus/minus buttons (inside red squares on the screenshot). Right, it’s as simple as that!

Fill table cells by just clicking on them and inputing the text.

Everytime you create a size guide there is a basic 4×4 table attached to make your work easier.

If you wish to add or remove added extra table use the Add Table or the Remove Table button (2)

Publish it and go to the next section

Publish the size guide

There are two ways to get the size guide displayed:

You can assign a size guide to one category or a few, by selecting a category on the size guide editing screen

Assign a size guide to a category

 
Once size guide is assigned to the whole product category or categories you can still disable it for single products by checking option Hide size guide from this product

Or you can assign a size guide to a particular product by using the “Choose size guide” box on the product editing screen:

Assign a size guide to a product

If you select a size guide for a particular product, it will be attached to that product even if the products category has its own size guide assigned.

On every created Size Guide you can either use the global settings or adjust them separately.

Go to WooCommerce > Settings > Size guide tab

WooCommerce > Settings > Size guide tab

Options to choose from:

Style

You can choose one of the existing styles or create a new one (details in Creating a style section):

Classic

Minimalistic

Modern

Hide Size Guide

Check this field to hide size guide when the product is out of stock.
Size guide will be displayed if you allow backorders in products settings.

Open guide with

Choose whether to display a simple link or a button to open the size guide.

Button/link position

You can display it either above the product summary tabs (Description, Reviews etc.), after the ‘add to cart’ button, as a tab or use the [ct_size_guide] shortcode on the Single Product page.

Button/link hook priority

Priority of the action that outputs the button/link. Priority is “Used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond to earlier execution, and functions with the same priority are executed in the order in which they were added to the action.”

If you choose to display the Size Guide above the product summary tabs or after the ‘add to cart’ button this might help you change the position. The final outcome might depend on other plugins and theme features that use the given hooks. ‘woocommerce_after_add_to_cart_button’ hook is not used often, but the ‘woocommerce_single_product_summary’ is commonly used. The basic actions hooked in (almost) every WooCommerce theme are:

woocommerce_template_single_title – 5
woocommerce_template_single_price – 10
woocommerce_template_single_excerpt – 20
woocommerce_template_single_add_to_cart – 30
woocommerce_template_single_meta – 40
woocommerce_template_single_sharing – 50

where the numbers mean the priority. The lower the digit is, the earlier the action will be executed. For example, if you display the Size Guide above the product summary tabs, you can display it right under the title by setting the priority to 7 (or anywhere between 5 and 10) or after the price by setting it to 15 and so on.

Button/link label

Enter the text to be displayed in the link/button. Default:  Size Guide.

Button/link align

Choose if the button should be aligned left or right.

Button/link clearing

Allow or disallow floating elements on the sides of the link/button.
More advanced users: if set to no, this option will add a ‘clearfix’ after the button/link.

Button class

You can add any custom class to the button.

Margins

Set the margins on the sides of the link/button.

Popup overlay color

Set the color of the background behind the Size Guide popup window.

Paddings

Set the paddings inside the Size Guide popup window.

Table hover

Option to enable hover effect on the Size Guide table.

Background for hover line

The BG color of the rows and columns of the cell you are hovering.

Background for hover active cell on hover

The BG color of the cell you are hovering.

Responsive tables

Option to enable/disable the responsive view of the table in the Size Guide.

Size Guide Sample with Hover

You can add your own stylesheet to the settings tab using ct_sizeguide_styles filter.

Example:

add_filter(‘ct_sizeguide_styles’ , ‘add_sizeguide_style’);

function add_sizeguide_style($current){
$StylesheetURL = ‘http://www.example.com/assets/sg_style.css’; //link to the stylesheet
$label = ‘My custom style’; //name of the style to be displayed in the settings
$current[$StylesheetURL] = $label;
return $current;
}

This code should go to your functions.php file (or anywhere else you wish).

If you are developing a theme and want your style to be selected upon the plugin activation, simply change the body of the function to:

$current = array($StylesheetURL => $label) + $current;
return $current;

Test comes with custom post types dedicated to create and publish on website Weekly Meal Plans. From previously created Menu items you can build meal plans for as many weeks as you want to. Every meal plan by default contains areas for every four meal on five days a week, but number of meals, days and their labels can be easily edited in Theme Options.
Just navigate to Appearance > Theme Options > Meal Plan and define you options.

On the image above you can check how to edit days and mealtimes in your meal plans. You can easily edit both here.

Examples

Example 1

Your Weekly Meal Plans should contain areas for the following mealtimes: Morning Snack, Lunch, Afternoon Snack, Fruit Snack, for every day since Monday till Friday. Options should look like the following:

How to define mealtimes and days?

Effect:

Meals for 5 days.

Example 2

If you want to add additional mealtime: Dinner, you need to edit Theme Options (new mealtime always has to be in separate line):

Theme Options configuration for additional mealtime

Effect:

Additional mealtime – Dinner

Example 3

If you want to add one more day with meals to Meal Plans. Navigate to Theme Options, and add new line in Days section.

Theme Options configuration for additional day.

Effect:

Six days meal plan

Theme Options

In Theme Options you can also choose, which created Menu Plan should be displayed strightaway and which one next week. Here you can choose two options:
Repeat current – to have the same Meal Plan displayed also next week, or Loop all menus – if you created more than one Menu Plan you can display all of them, one by one.

Test allows you to create menu items, which are components of Weekly Meal Plans. You can add here single products, for example: Oranges, Potatos, Chicken Breast. In that way every single menu item can be used in several meals of your meal plan, so it’s more universal. However your menu item base might be larger.

But single menu item can also exist as a whole meal – you can add a description what’s inside. That way, you can add a whole meal to your plan with a single click while creating the Weekly Meal plan.

To create Menu Item – navigate to Menu > Add New

How to add menu item?

Here you can define a Menu item Title and Description. You can also add featured image to the Menu item. It will be visible after hovering the product in Weekly Meal Plan.

After your menu item is created – remember to click “Publish” to save your changes. Also, after every modification you need to click “Update” to save changes.

To create new Testimonial, navigate to Testimonials > Add New

How to add new testimonial?

In every testimonial, you can define:

1. Title
2. Description
3. Author
4. Socials – add usernames/nicks to social, that you want to display wih this testimonial
5. Featured image

Remember to click Publish to save your testimonial or Update after every item modification.

Theme Options

In Appearance > Theme Options – Testimonials you can set global options for all Testimonials:

1. Show or hide Tweet button
2. Show or hide Facebook Share button
3. Show socials icons
4. Default tweet share message
5. Add post permalink to tweet message?

Theme Options for testimonials

Remember to always click Save Changes when you finish your changes in Theme Options.

To create new acitivity, navigate to Activities > Add New.

How to add new activity?

1. Title
2. Description
3. Activity Summary
4. Socials – add usernames/nicks to social, that you want to display wih this testimonial
5. Tags
6. Categories
7. Featured image

Remember to click Publish to save your testimonial or Update after every item modification.

Theme Options

In Appearance > Theme Options – Activities – Index you can set global options for all Activities index page:

1. Choose the index page
2. Define label for More button
3. Show or hide pagination
4. Define number of displayed activities
5. Define labels for meta options

Theme Options for Activities index page

In Appearance > Theme Options > Activities – Single you can set options for every Activity single page:

1. Page title
2. Show or hide breadcrumbs
3. Show Tweet button
4. Show Facebook Share button
5. Show socials icons?
6. Default tweet share message
7. Image displayed on the page top and its’ position

Theme Options for Activity single page

Remember to always click Save Changes when you finish your changes in Theme Options.

To create new Gallery, navigate to Galleries > Add New

How to add new gallery?

In every gallery, you can define:

1. Title
2. Description
3. Tags
4. Gallery Images:
   • Click on Set featured image
   • Click Upload files to upload images for the gallery

Remember to click Publish to save your Gallery or Update after every item modification.

Theme Options

In Appearance > Theme Options – Gallery you can set global options for all Galleries:

1. Galleries index page
2. Gallery index thumbs limit – Number of images displayed in single gallery section on gallery index page
3. Gallery single page title
4. Image displayed on the top of the page and it’s position

Remember to always click Save Changes when you finish your changes in Theme Options.

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

XHTML

<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div class="row">     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>   </div>   <div class="row">     <div class="col-md-8">.col-md-8</div>     <div class="col-md-4">.col-md-4</div>   </div>   <div class="row">     <div class="col-md-4">.col-md-4</div>     <div class="col-md-4">.col-md-4</div>     <div class="col-md-4">.col-md-4</div>   </div>   <div class="row">     <div class="col-md-6">.col-md-6</div>     <div class="col-md-6">.col-md-6</div>   </div>

Page structure

Below you will find default page structure :

Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

1. Responding to questions or problems regarding the item and its features
2. Fixing any discovered item’s bugs
3. Providing updates to ensure compatibility with new software versions

If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

In order to create mega menus read the documentation here:

Yamm 3 Documentation

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

Appearing with Animation when element in viewport

Animation can be turn off just be remove “withAnimation” class from body.
Usage:
– add “animated” class to element and data-fx=”animation-type”. That’s it.

Available animation : http://daneden.github.io/animate.css/

• data-fx=”hinge”
• data-fx=”bounce”
• data-fx=”flash”
• data-fx=”pulse”
• data-fx=”shake”
• data-fx=”swing”
• data-fx=”tada”
• data-fx=”wobble”
• data-fx=”bounceIn”
• data-fx=”bounceInDown”
• data-fx=”bounceInLeft”
• data-fx=”bounceInRight”
• data-fx=”bounceInUp”
• data-fx=”bounceOut”
• data-fx=”bounceOutDown”
• data-fx=”bounceOutLeft”
• data-fx=”bounceOutRight”
• data-fx=”bounceOutUp”
• data-fx=”fadeIn”
• data-fx=”fadeInDown”
• data-fx=”fadeInDownBig”
• data-fx=”fadeInLeft”
• data-fx=”fadeInLeftBig”
• data-fx=”fadeInRight”
• data-fx=”fadeInRightBig”
• data-fx=”fadeInUp”
• data-fx=”fadeInUpBig”
• data-fx=”fadeOut”
• data-fx=”fadeOutDown”
• data-fx=”fadeOutDownBig”
• data-fx=”fadeOutLeft”
• data-fx=”fadeOutLeftBig”
• data-fx=”fadeOutRight”
• data-fx=”fadeOutRightBig”
• data-fx=”fadeOutUp”
• data-fx=”fadeOutUpBig”
• data-fx=”flip”
• data-fx=”flipInX”
• data-fx=”flipInY”
• data-fx=”flipOutX”
• data-fx=”flipOutY”
• data-fx=”lightSpeedIn”
• data-fx=”lightSpeedOut”
• data-fx=”rotateIn”
• data-fx=”rotateInDownLeft”
• data-fx=”rotateInDownRight”
• data-fx=”rotateInUpLeft”
• data-fx=”rotateInUpRight”
• data-fx=”rotateOut”
• data-fx=”rotateOutDownLeft”
• data-fx=”rotateOutDownRight”
• data-fx=”rotateOutUpLeft”
• data-fx=”rotateOutUpRight”
• data-fx=”slideInDown”
• data-fx=”slideInLeft”
• data-fx=”slideInRight”
• data-fx=”slideOutLeft”
• data-fx=”slideOutRight”
• data-fx=”slideOutUp”
• data-fx=”rollIn”
• data-fx=”rollOut”

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

1.A. Google Fonts
1.B. Revolution Slider styles
1.C. Magnific popup styles
1.D. Font Awesome styles
1.E Yamm styles
1.F Flexslider styles
1.G Animate css styles
2. GENERAL STYLES
3. Typography
4. Buttons
5. Pagination
6. Alerts
7. Inputs
8. Pophover
9. Header styles
10. Navbar styles
11. Call to action
12. Sections
13. Media sections – video/parallax/kenburns
14. Process circles
15. Person box
16. Service box
17. Pre footer section
18. Footer
19. Articles
20. Counters
21. Blockquote
22. Tabs
23. Images widget
24. Project single
25. Project images
26. Lists
27. Pricing box
28. Accordion
29. Socials
30. Square icons
31. Charts
32. Progress bar
33. Twitter
34. Google map
35. Flexslider
36. Revslider
37. Time circle counter
38. Thumbnail scroller
39. Magnific popup
40. Isotope
41. Helpers
42. D3 swimmers
43. WordPress
44. Media queries, adjustments
45. Motive colors

Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

• Test uses utilities for the following categories:
• Typography
• Display Types
• Paddings
• Margins
• Colors
• Borders
• Background Colors
• Triangles
• Diagonals
• Shadows

Test supports media sections with Parallax, KenBurns effect and videos.

Parallax Section

We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section.
http://markdalgleish.com/projects/stellar.js/docs/

Our custom data-attributes for the parallax section are:

• data-height: Define the minimun height for the sections
• data-type: Type of Media Section (parallax/kenburns/video)
• data-image: Background image for the section.
• data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. This will help you with the bandwidth, you’re welcome! 🙂

Ken Burns Sections

KenBurns section supports one or more images that you should add inside .media-section-image-container

Our custom data-attributes for the kenburns section are:

• data-height: Define the minimun height for the sections
• data-type: Type of Media Section (parallax/kenburns/video)
• data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Kenburns it too much for ipads, iphones and so on, so we allow you to fallback to a normal image section. This way your browser won’t crash 🙂

Video Sections

We recommend you to use html5 video instead of vimeo, since in some specific browsers the sound won’t be muted.

Our custom data-attributes for the video section are:

• data-height: Define the minimun height for the sections
• data-type: Type of Media Section (parallax/kenburns/video)
• data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Phones don’t autoplay video, so we just replace it for an image

Progress Bars

This theme has 2 types of layout and all you have to do is change one class. Also, everything is done via data attribute.

• aria-valuenow: Percentage this bar should have
• aria-valuemax: Max value
• aria-valuemin: Min value

We use google font service to include fonts or font face sets.

Ligh Font used: Open Sans

Credits:
Open Sans

All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

• Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
• jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.)
• jQuery FlexSlider v2.2.0
• GMAP3 Plugin for JQuery v. 5.1.1
• jQuery.appear
• FitVids 1.0.3
• jQuery Stellar
• jQuery tweet
• Modernizr 2.0.6
• PageScroller
• final-countdown.js
• snap.js
• device.js 0.1.58
• chart.js

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

• data-location – address to show
• data-height – map height (if undefined height will be 220px)
• data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.

Flexslider

Content / Images Slider.
Each parameter can be defined as data attribute :

• data-namespace
• data-selector
• data-animation
• data-easing
• data-direction
• data-reverse
• data-animationloop
• data-smoothheight
• data-startat
• data-slideshow
• data-slideshowspeed
• data-animationspeed
• data-initdelay
• data-randomize
• data-thumbcaptions
• data-pauseonaction
• data-pauseonhover
• data-pauseinvisible
• data-usecss
• data-touch
• data-video
• data-controlnav
• data-directionnav
• data-prevtext
• data-nexttext
• data-keyboard
• data-multiplekeyboard
• data-mousewheel
• data-pauseplay
• data-pausetext
• data-playtext
• data-itemwidth
• data-itemmargin
• data-minitems
• data-maxitems
• data-move
• data-allowoneslide
• data-controlscontainer
• data-manualcontrols
• data-sync
• data-asnavfor

Read the documentation here:

Flexslider Documentation

And js initialization (js/main.js file), there you can change slider parameters:

jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/

fitVids

Just make video responsive.
Documentation: http://fitvidsjs.com/

HTML Markup:

and js:

Charts.js

This plugin is used to make graphics.
Documentation: http://www.chartjs.org/

Below you will find HTML markup for flexslider:

You can change number of flexslider parameters using javascript – learn more about parameters.

Template comes with ready to use:

• Contact Form
• Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :

That’s it!

Contact Form

HTML Markup:

Newsletter Form

HTML Markup: