The Canvas Documentation

Thank you for purchasing Canvas. This documentation contains all the necessary details to the theme get the up and running. If you need further help , please free to contact us for support using Contact page on our Profile Page.

Support is available 10 AM to 7 PM IST on Weekdays and off on weekends. Reply usually takes 24 hours, but in rare cases may take up to 48 hours max.

Theme Installation

This section covers on how to setup the theme. There are two ways to install a theme into WordPress, we will cover them both.

The Automatic Way.

1

  1. Download the zip package from Themeforest and unzip it.
  2. Inside that you will find a zip folder called Canvas.zip. Do not upload the zip you get from themeforest as it is, since it contains documentation and main theme zip.
  3. Go to Appearance -> Themes on WordPress Dashboard, Click on Add New button from top left.
  4. Once the page has been opened, click on upload theme from top left of the screen.
  5. Upload Canvas.zip file and hit install now.
  6. Sit tight, It take some time!
  7. After Installtion done, Click Activate.
  8. Now The most advanced WordPress themes in installed into your WordPress!

After Activation

Once the theme has been activated, there are certain plugins that are required to be activated to enjoy full benefits of Crossfit. The plugins are optional and Crossfit will work perfectly fine without them. Follow these steps –

The Automatic Way.

  • Click the button in the 1st window(plugins section) , it will take you to a page where it will show a list of plugins needed to be installed.
  • Click Install.
  • Once Installed , it will ask you to activate them and that’s it.
  • From here you can either go to 1 Click Installer located in Admin Panel -> on Top Menu Bar you will see installer menu item or set up site manually. In next section we have covered them.

Setting up Website

There are 2 ways for setting up website, you can either use our 1 Click installer or set up site manually. We have covered videos for both ways.

Manual Setup

  1. Create a Page, and name it as Home (or whatever you want)
  2. Go to Settings -> Readings
  3. Set your Home page in Front Page Displays => Front Page = The Created Page in Step 1

    in1

  4. Additionally you might want to add menu without touching header constructor. For that go to wp admin then to menu page. Create a menu and add menu items.
  5. By default main menu is set to show on front end, set this menu to Main menu theme location.

Using Concept Installer

With Canvas you get an amazing easy to use Concept installer. It allows you to import settings or demo from any of our online demos.

  1. Go to Concept Installer page ,available from bottom right menu.
  2. Once the page has been opened you can see concepts available , select your concept and hit SETUP DEMO , if you want to import settings only hit IMPORT SETTINGS
  3. Please wait until page until you get the confirmation message.
  4. Once done all pages , menus will be setup like demo and or settings will be imported.

Stock images are not included due to the copyrights. Dummy images are placed instead of those.

If you are not happy with the demo and want to change it to something else then you can delete all settings / menus and pages using the Delete Data button on top right in the concept installer panel.

Page Options

There are 3 options available on a page

  1. Switch to Page Builder, This switches to RAD Page Builder mode.
  2. Page Options – Here you Set Title settings, advanced parameters like hiding head or footer areas. Or selecting a color scheme or head layout for that page.
  3. Select Page Layout – Here you can set page layout, select page sidebar or sidebars. You can set left / right / double sidebars and sticky sidebar layout from here.

Page Options.

With these options you can modify settings of the particular page.

  1. Title settings – you can show or hide title area from here or add icon to it.
  2. Show or Hide sections- you can hide or show head area or footer areas from here.
  3. Custom Styling – Custom styling allows you to change page title or background for that particular page only.

Working with Portfolio

Creating a Single Portfolio Item

When you add content in WordPress editor , it will show the default portfolio layout that is Side Image with description, you can change the layout of the single portfolio by going to Live Options -> Portfolio section, then open Single Portfolio Section and change layout from there. When you use RAD builder, the layout switches to normal page layout.

  1. Create a Portfolio Item. By visiting Portfolio -> Add New
  2. All the options are exact like the pages described above, with one little extra options, thumbnail Management.
  3. To change portfolio post type name to ones you want, go to Portfolio section in live options panel as mentioned earlier, in Portfolio Post Type section enter you new portfolio name and slug ( one that appears in URL ex work/portfolio/item. )

Thumbnail Management

Thumbnail Management gives you more control of your portfolio column thumbnail. To use this, scroll down in edit single portfolio page, until you see Portfolio Thumbnail Management. From Here you can set alternate thumbnail that you want to show on portfolio template other than featured image. You can also set sliders or add video in lightbox on thumbnails.

Setting up Portfolio Page

Go to new page or edit the page you want to make as portfolio template, Switch to Page Builder mode. Now add the Post Column Widget , this will allow you to create any portfolio column layout with any settings possible. The Settings are discussed in the Page Builder documentation. Be sure to select post type to portfolio in settings.

Even easier way is switch to page builder, open Page library . There all possible portfolio templates are available. Click and that’s it. You can edit them to your needs.

All Portfolio Templates require Featured Image from Single Portfolio Item to show as thumbnail.

Working with Portfolio

Creating a Single Portfolio Item

When you add content in WordPress editor , it will show the default portfolio layout that is Side Image with description, you can change the layout of the single portfolio by going to Live Options -> Portfolio section, then open Single Portfolio Section and change layout from there. When you use RAD builder, the layout switches to normal page layout.

  1. Create a Portfolio Item. By visiting Portfolio -> Add New
  2. All the options are exact like the pages described above, with one little extra options, thumbnail Management.
  3. To change portfolio post type name to ones you want, go to Portfolio section in live options panel as mentioned earlier, in Portfolio Post Type section enter you new portfolio name and slug ( one that appears in URL ex work/portfolio/item. )

Thumbnail Management

Thumbnail Management gives you more control of your portfolio column thumbnail. To use this, scroll down in edit single portfolio page, until you see Portfolio Thumbnail Management. From Here you can set alternate thumbnail that you want to show on portfolio template other than featured image. You can also set sliders or add video in lightbox on thumbnails.

Setting up Portfolio Page

Go to new page or edit the page you want to make as portfolio template, Switch to Page Builder mode. Now add the Post Column Widget , this will allow you to create any portfolio column layout with any settings possible. The Settings are discussed in the Page Builder documentation. Be sure to select post type to portfolio in settings.

Even easier way is switch to page builder, open Page library . There all possible portfolio templates are available. Click and that’s it. You can edit them to your needs.

All Portfolio Templates require Featured Image from Single Portfolio Item to show as thumbnail.

Working with Blog

Setting up Blog Page

Go to new page or edit the page you want to make as blog template, Switch to Page Builder mode. Now add the Post Column Widget , this will allow you to create any blog column layout with any settings possible. The Settings are discussed in the Page Builder documentation. Be sure to select post type to blog in settings.

Even easier way is switch to page builder, open Page library . There all possible blog templates are available. Click and that’s it. You can edit them to your needs.

All Blog Templates require Featured Image from Single Post Item to show as thumbnail.

Live Options Panel

Getting Started

Getting started is really easy, to access the live options panel either go to dashboard and click on Customize Your site or on top bar Admin bar , click Live Options Panel.

The Live Options Panel is divided 3 Important areas –

  1. Page Settings – This is the first section visible on post or pages. You can change current post’s settings and layout from here. This is automatically hidden on category etc pages. This is same as page options.
  2. Second option we have discussed in Page Builder documentation. It enables use of RAD Live Builder for pages
  3. Third option we have discussed in Site Design documentation
  4. Remaining options we will discuss them
  • General Settings – This section contains settings common to the site , following options are available here
    1. Basic Settings – Use retina image / scrolling type /loading image and favicon. You can add google analytics here.
    2. Misc – Set page / post and portfolio comments from here.
    3. Twitting Settings – Add twitter API keys here to enable use of twitter tweets.
    4. hover settings – you can set hover style and icon from here.
  • Head Area contains options to set logo , menu effects and breadcrumbs . You can also enable Head Area Builder , it has been discussed in detail in Head Area Builder documentation.
  • Layout Settings – You can set common layout settings from here, if you want change width go to site design -> Layout Tab.
    1. Sidebar Settings – you can add widget areas from here.
    2. General Layout – You can set global layout for posts and pages , set mobile width , set title position from here.
    3. Misc Sidebars – Set sidebars for pages such as archives , category, tags etc.
  • Footer Settings – This contains all settings related to footer widget area and bottom footer area.
  • Class Settings – This contains all the settings related to Class
    1. Class General – You can set Class template link here for breadcrumbs, so when you visit a single Class then it appears just before Class item.
    2. Single Class – You can set single Class layout , show or hide different sections. Also you can change extra fields from here.
    3. Class Post Type – If you want to change your Class post type something else like gallery or project you can do it here. Slug field should have post type name in lower case , it will appear in url like www.example.com/class/item . Then you can add class label and category field.
  • Blog Settings – This contains all the settings related to Blog
    1. Blog General – You can set blog template link here for breadcrumbs, so when you visit a single post then it appears just before post item.
    2. Single Post Settings – You can show hide or change settings related to single post.
  • Contact Settings – You can change settings for sticky contact from here.
  • Advanced settings – This contains advanced settings like setting admin menu , auto updates and setting 404 and under construction page.
  • Fontface & Fontdeck – You can add fontface and fontdeck fonts from here. To set these fonts , go to site design -> typography tab. To add a fontface font, add all font web formats like otf, ttf, woff and svg into a folder. Zip it, now go to the fontface section. Click upload and add the zip file. Once uploaded it will be available under fonts section.
  • Woo Commerce – You can set sidebars for shop and set product height from here .

Creating Custom Posts

Here you can create you own content types (Own Post Types, no need of a plugin)

  1. Go to Theme Admin -> Content Types
  2. Enter the Post Names and Click “Create Custom Post”
  3. Click the Pen Icon in the left side of the Custom Post name you just create.
  4. Enter all the necessary texts.
  5. You can also Add Meta Boxes in the Meta Box Tab.
  6. Click Meta Boxes -> Add Meta Box -> Click the Pen Icon -> Enter the Details -> Choose a Input type (Text field, textarea or a Upload field). You can also give a default value for text and text area fields.
  7. For Example: If I create a Movie Post type.
  8. I can create meta boxes like Movie Length, Movie Rating (PG, PG-13 etc.,) in the Meta Boxes with a Input type of text field and some default value
  9. Save Changes.
  10. Back to Dashboard.
  11. All Set to go for the newly created Post Types! :)

As soon as the custom post type is created, it becomes available to all the widgets, Rad components and shortcode which supports showing posts in any manner.

Working with WPML

This section requires the basic know ledge of how WPML plugin works. It won’t be covered here. Please note that you will need to buy this plugin from wpml.org‎. We have added compatibility for this plugin.

Installing and Activating the plugin.

  1. Once purchased you will need to activate WPML Multilingual plugin. It may take sometime to activate as WPML setups database and settings.
  2. Once plugin is activated you will get a message on top of page with options of reading a getting started guide if you are using it for the first time or to start configuring WPML. Click on the Button “No Thanks, I will configure myself”.
  3. In first window select the contents the written it , it will be your main language.
  4. In next window select the languages you want to show in the language selectors.
  5. Last option is the place you want to place the language selector. You can change these options any time you time.

Adding switcher in Head Area

To add the wpml switch in head area go to Head Area Builder. Drag and drop the wpml widget to area you want to show.

To add same RAD Builder template in different language posts, Save the template in the original language, then you can access that template under library in other languages. Import it and change the parts to your needs.

For in depth documentation please refer to this http://wpml.org/documentation/getting-started-guide/

Working with Woocommerce

Setting Up Basic Shop

This section requires the basic knowledge of how woocommerce works. It won’t be covered here.

Adding a Product

  1. Adding the product is same as any other theme. Just add title , content , image and set attributes
  2. Page options work here also , you can set title or page settings here.
  3. You can select product presentation type , by default woo gallery shows , you can select video / image or zoomable images also.
  4. To add the thumbnail which shows on product hover in shop , scroll down and in bottom right you can see 2nd thumb option. From here you can set it. It is completely optional, if you leave it empty that effect will not be activated.
  5. You can set also use post columns from page builder to make shop templates. They are fully supported.

Setting Up Wish List

Creating wish list is really easy , first create a new page name it whatever you like . Then add shortcode

. Now go to Live Options Panel -> Woo Commerce section, Open General Settings sub section, in WISH CART PAGE LINK text field the url of the wish list page you have created. That’s it.

Slider Manager

Slider manager

To Access Slider Manager, Click Slider Manager menu in the dashboard.

Let us explain the home screen of the slider manager.

Lets Get Started!

    1. Enter the name of the slider and click Create slider, the slider will create with the helpful shortcode ( you can use that anywhere. )
    2. After create it, click the edit pencil icon to add slides.
    1. You have an option to add image or Multiple Images. ( You can add multiple images by holding the Control or Command key to choose the individual images in the popup or using shift key to select the whole column or row, just like the computer. )
    2. After adding the background images for the slides, you can edit the slide just click hover over the image and click it, let me explain the options after clicking Edit.
    • Slide Image or Video
      1. Upload Image – You can edit the first image you upload here, it is used as a main background image for the slide.
      2. Image Position – Background Image Position for the image,
      3. Use Video Background – You can also use Video for the background. Add all the formats, MP4 supports only in IE9+, Chrome and Safari Browsers ( Webkit ), Webm is for Firefox, ogg for older browsers.
      4. Use Overlay on slide image or video – If Yes, the overlay color you choose below will fill the slide.
      5. Overlay Color – You can choose a color for the overlay, also adjust the opacity by drag the slider.
    • Slider Description
      1. Title – Title for the slide, also you can adjust the color, Font size, Font weight, Letter Spacing, border settings, and paddings for the title.
      2. Sub Title – Enter the sub title for the slide, also you can adjust the color, Font size, Font weight, Letter Spacing, border settings, and paddings for the title.
      3. Button – Also add buttons for the slide, it will display after the subtitle
    • Caption Settings & Position
      1. Use Caption Background – If you want to add a background for caption choose “Yes”
      2. Caption Background Color – Choose the caption background color, you can also adjust the opacity for the colors.
      3. Caption Area Width – Choose the width for the Caption. It is in %, so if you choose 50%, it will take half of the width of the slide.
      4. Caption Text Alignment – Left, right or Center Choose the text alignment you want.
      5. Select Caption Position – Choose which position you want to display the caption.
      6. Use Custom Caption Position – If you choose “yes” means, you need to enter the Top, Right, Bottom, Left position below. So that you can custom positioned it like you want.
    • Tabbed Controls
      1. Set Tab Icon for Slide – Set an Image as an Icon for the slide.
      2. Set Tab Title for Slide – Title for the Tab.
      3. Add RAD Section ID to show when slide appears – Add a RAD Section ID you saved, and it will show below the Icon and title of the tab.

Options

There are plenty of options for the slider to choose from.

  1. Slider Type – Regular, Full Width, Full Screen. Regular means it takes the width of the column, Full Width means full width of the browser window, Full Screen means yes, full screen :)
  2. Width(in px) – You can also limit the width of the slider.
  3. Height(in px) – You can also limit the height of the slider.
  4. Exclude Height(in px) in Full Screen – When in full scren mode you can remove extra height by setting a value here. Leave it “0” for default.
  5. Wheel Scroll for Slider – If Yes, Wheel scroll for slider is activated.
  6. Parallex Effect while scrolling – If Yes, Parallax effect will take place while scrolling.
  7. Image Parallex Effect while scrolling – If you want the image inside the slide to take the parallax effect while scrolling choose yes, default is no.
  8. Slide Show Time(in secs) – Give the second between each transisition between the slides.
  9. Autoplay – If you want the slider to be autoplay, choose yes.
  10. Show Tab Icons – If you add tabs for the slides, and want to show them means choose Yes.
  11. Tab Tip Color – Tab tip color, choose the color from the color picker.
  12. Captions – If you want to display the caption, choose Yes.
  13. Arrow Controls – If you want arrow control to move between slides, you can choose yes.
  14. Bullets / Thumbnail – If you want bullets and a thumbnail while hover the bullet navigation, you can choose yes.