Canvas - Interior & Furniture Portfolio WP Theme

# Canvas Interior Portfolio WordPress Theme

- By: Mad_Dog
- themeforest.net/user/mad_dog
- Support Forum: http://forums.gt3themes.com

Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to submit your request to my support forum. Also you can find a lot of useful information right there. Thanks so much!

### Theme Installation

There are several ways to install wp themes, we do prefer using FTP but you can choose other ways. Please read more about theme installation on the official website at http://codex.wordpress.org/Using_Themes

If you choose to use ftp, please do the following:

- please unzip the installable zip file that you downloaded from ThemeForest (gt3-wp-canvas.zip);
- upload "Canvas" theme folder to the theme directory of your WordPress via ftp;
- log into your WordPress admin dashboard and activate "Canvas" theme in the Appearance => Themes section;
- after succesfull theme activation you will be automatocally redirected to the Canvas WordPress theme settings;
- at the top of the page you will see the message 'This theme requires the following plugin: GT3 Page Builder (For This Theme Only). Begin installing plugin'=> click the the link and follow the steps.

### Step 1

### Step 2

### Step 3

Note, Canvas theme contains built-in GT3 Page Builder plugin. You don't need to install any other plugin versions. It will be activated automatically on the pages and portfolio posts sections after installation, if you followed the steps above.

##### If you want to install the theme on your local server please follow the instructions:

- transfer "Canvas" theme folder to the theme directory of your WordPress;
- open \wp-content\themes\Canvas\core\tgm\plugins\gt3-pagebuilder-custom.zip;
- unzip the package and add the plugin to the WordPress plugins folder \wp-content\plugins\

#####

### Theme Update

To upgrade your theme to the latest version, you need to download the latest theme ZIP file in your ThemeForest account, the Downloads section. Here are step-by-step instructions what you need to do:

- please unzip the installable zip file that you downloaded from ThemeForest (gt3-wp-canvas.zip);
- copy all theme files into the "themes" folder on your WordPress server. The files will be automatically overwritten. We recommend to use FileZilla ftp client;
- once it is done, please go to the Plugins section in WordPress and delete GT3 Page Builder pluing using the standard WordPress delete option;
- when the plugin is deleted, you will get a notification to install the latest GT3 plugin version, please do the installation and its activation;
- that's all.

### Theme Options Panel Overview

This theme comes with its own theme options panel. You can manage general theme settings panel. Let's review it:

- General: right there you can upload your own logos, put custom css, import sample data, put your google analytics code etc;
- Sidebars: create unlimited custom sidebars;
- Fonts: the themes uses google web fonts. Please choose the desired font from the drop down menu for content fonts, typograpy H1, H2, H3, H4, H5,H6;
- Socials: the full list of available social link;
- Contacts: your contact info details;
- View Options: adjust theme view options (site width, responsive, theme layout etc);
- Color Options: adjust theme color options (header background color, header text color, menu, footer colors etc).
- Woocommerce: choose the layout for your shop, put the number of the items to display on the page and in related products section.

### Import Demo Content

To import the demo content, please use the standard integrated import tool. You can find it Canvas Theme Settings-> General. There is a button "import demo content". Important: Please make sure that you created "uploads" folder and set the right file permissions to it. It is required by WordPress. Once it is done, please click import demo content button and wait up to 2-4 minutes. There are a lot of images to download to your server. The import is ready when you see the created blog posts.

### Theme Layout Settings

The theme has the options which allow you to change it.

The theme color. To change the color, please go to Theme Options Panel => Color Options section. Use "Theme color" field to change the parameter.

The Default Background and Header images. To do that, please go to Theme Options Panel => View Options section. To add your own images, please use upload button and choose the desired image.

Please note that if you want to have a custom layout for the certain page, you can do that using the custom layout option on the page you are working on.

### Theme Menu Activation and Front Page Settings

1. To activate main menu: Please go to Appearance => Menus => Manage Locations and choose from the drop down list "Main" menu from the proposed menu items, click save changes.
After that, you can edit your menu items in the "Edit Menus" tab.

2. Set the page for the front page: Please go to Settings => Reading => Front page displays -> A static page (select below) set the page for the front page and save changes.

### Custom Logo Setup

To change the current existing logo, please go to Theme Options Panel => General section. Use the "upload image" option to upload your own logo. Once the logo is uploaded, please put its height and width to the required fields.
Taking into consideration the fact that this theme is retina ready, you have to upload your logo in 2 sizes bigger to look great on tablet and mobile devices. For example, if your site logo is 200x100, the retina version will be 400x200.

### GT3 Page Builder Modules

This WordPress theme comes with the built-in GT3 Page Builder section, which allows you to create custom page layouts with ease.

You don't need to install GT3Page Builder plugin. Here is the brief overview of all available page builder modules.

Here is the full list of available modules:

- Accordion - add simple accordion style with collapsible components;
- Before & After - add an image with before/after effect;
- Blog - display standard style blog to the page;
- Blog Posts - display blog posts from different categories;
- Content - display entire content available in the visual editor;
- Divider - add divider to separate module blocks;
- Gallery - display gallery from existing gallery list;
- Google Map - add simple google map;
- HTML - add any HTML code or shortcode to display on the page;
- Heading - add simple heading;
- Icon Box - add content block with the icon;
- Icon List - add icon list with the text link option;
- Javascript - add javascript code to run on the page;
- Message Box - add different message box types;
- Partners - display the partners logos from existing list;
- Portfolio - add non-ajax portfolio to the page;
- Portfolio Posts - display portfolio posts from different categories;
- Price Table - add simple and advanced price table;
- Progress Bar - add advanced and flexible progress bar;
- Promo Text - add special promo text with call to action button;
- Sitemap - add simple sitemap;
- Slider - add any slider plugin that uses shortcodes;
- Tabs - add tabbed content area;
- Team - display selected team members from existing list;
- Testimonials - display the selected testimonials from existing list;
- Text Area - add simple text area;
- Toggle - add simple toggle style with collapsible components;
- Video - add vimeo or youtube video.

### Custom Page Templates

The theme has pre-built custom page templates to create an awesome and non-standard pages. You can see the full list of the available templates on the screenshot below. Each template has its own layout and setting. To active the template:

- Please go to Pages => click create a new Page or edit the required one=> on the right you can see "Page Attributes" section, just select the template and click publish. Once the page is refreshed, you are ready to work with this template. We will explain in details on how to work with the templates below.

### Home Page Setup

Please create a new page and select "Slider Portfolio Grid Ajax" template. Once the page is created, it will display 12 portfolio items on the page. On the demo page, you can see a fullwidth slider above the portfolio items, it is Revolution Slider. The slider plugin is included in the pack. Please install, setup it and add its shortcode ID into the required field on the page. Please note that the slider demo content is included in the pack. You can always do the import using the import option.

### Fullscreen Slider Setup

1. The first thing you have to do is to install the Revolution Slider plugin. Once it is done, please import the slider demo content. It is available in the slider plugin folder, Demo folder -> home2.zip.
2. The next step is to create a new page and select Fullscreen Slider page template.

### Gallery Albums Setup

1. To create a page with the Gallery Albums, you have to add the galleries first. Please go to the Gallery section in your WordPress and add new gallery, you can choose any name for the gallery, but please note that its name will be displaying as an album title. You have the option to add photos and videos.

2. When you are done with the Galleries, its time to create Album page. Please go to Pages -> Add new -> select Gallery Albums template and save the page settings. That's all. All the galleries will load on the page as albums.

### Portfolio Post Setup

It is very easy to create different types of portfolios, at the moment we offer the standard and fullscreen layouts. Both options are available for all the portfolio items. Let's see how to create Fullscreen Post.

- Please go to Portfolio section;
- Add new portfolio item;
- Select Image post format;
- In the "Advanced Options", please select Fullscreen;
- Save the post and add images to the Fullscreen slider;
- See the screenshot of our portfolio page settings below.

### Grid Portfolio Listing Page Setup

Let's create a page where we will display all our portfolio items in the Grid layout with the portfolio item titles using ajax "load more" button. Follow the steps below:

- Please go to Pages section;
- Add new page;
- Select "Portfolio Grid Title Ajax" template, and publish the page;
- Done, now you can choose what category items to display on that page.

### Fullscreen Blog Page Setup

It is very easy to create a fullscreen blog page layout. Follow the steps below:

- Please go to Pages section;
- Add new page;
- Select "Fullscreen Blog" template, and publish the page;
- Done, now you can choose what category items to display on that page;
- Please note that only the published posts will load on the page.

### WooCommerce Shop Setup

The theme is compatible with WooCommerce plugin, here we will explain you on how to setup it:

- Please download WooCommerce plugin from official site http://www.woothemes.com/woocommerce/;
- Install the plugin to your WordPress site;
- When the plugin is installed, WooCommerce section becomes active in the Theme Options Panel. You can choose either Fullscreen or Boxed layout;
- Before adding the product, please set the image sizes in WooCommerce plugin settings WooCommerce -> Products -> Display, see screenshot below;
- Please note that only the published posts will load on the page.

## WooCommerce Image Setting

## Adding Categories and Filter to Fullscreen Layout

To add categories and filter to fullscreen layout, please go to Widgets section. There is a custom "WooCommerce Fullscreen Widget". Please add the following widgets:

- WooCommerce Product Categories
- WooCommerce Price Filter

Please see their parameters below.

### Custom Sidebars Setup

The theme has the option to create unlimited number of custom sidebars, let's have a look how to create a custom sidebar and add it to the page.

1. Please go to Pages => click edit the page you need=> on the right you can see "Custom Layout" module.

2. The next step is to add widgets to this custom sidebar. Please go to Appearance => Widgets. You will see a custom widget on the right. Please drag and drop the widgets you want to display in the sidebar.

3. The last step is to add the custom sidebar to the page. Please open the page where you want to display the custom sidebar. On the right you can see "Custom Sidebar" module.
Please choose the desired layout and sidebar from drop down menu. Save page settings and preview the page. That's all.

Note, Custom sidebars available only for Default Pages. If you are going to use custom templates they will not be available for the pages.

### Contact Form 7 Plugin Installation

There are several ways to install WordPress plugin, we do prefer using FTP but you can choose other ways. Please read more about plugin installation on the official website at http://codex.wordpress.org/Managing_Plugins
If you choose to use ftp, please do the following:

- please download the plugin at http://wordpress.org/plugins/contact-form-7/
- please unzip the plugin zip file that you downloaded and upload to Plugin folder to the wp-content/plugins folder in your WordPress directory online via FTP.;
- log into your WordPress admin dashboard and activate "Contact Form 7" plugin in the Plugins => Installed Plugins section;
- once the plugin is activated, you can start creating contact form.
- do not forget to read the Contact Form 7 documentation for obtatining information.

### Contact Form 7 Plugin Usage

The first thing you have to do is to create a contact form . Please go to the Contact plugin section. You can see it in the main WordPress menu.

If you want to get the form titles appear inside the contact form fields follow the instructions:

- please open the created contact form in the plugin section;
- add special code to the Form area.
- save changes.

Once the form is created, please follow these steps to add the contact form to the page

- please copy the contact form shortcode, please see screenshot above;
- then open the page where you want to add the contact form to;
- add "HTML" module to the page, click edit and put the contact form shortcode into the text area (see screenshot below);
- that's all, please preview the page.

### Footer Editing

To change the copyright, please open the General section in your Theme Options Panel and find the Copyright field (© 2020 Business Theme. All Rights Reserved).

Please replace the text with your own one, save the changes. The changes will be reflected on your site.

There is also the social icons list in the footer. All those icons can be managed in the Theme Options Panel => Socials.

### Translation Support

This theme comes with .po, .mo files, they are located in \Canvas\core\languages\ and \wp-content\plugins\gt3-pagebuilder-custom\core\languages folders.

Please follow these steps to translate your theme text:

- please download this software and install it http://www.poedit.net/download.php;
- please open .po files located in \Canvas\core\languages\en_US.po and \wp-content\plugins\gt3-pagebuilder-custom\core\languages\gt3_builder-en_US.po using poedit tool and translate the existing text to your own;
- when you save the file, you must name it according to your language;
- upload the file to the required folder on your server, that's all.

Please note that you can also use the special plugins like WPML to do the translation.

### Source Files Included

The theme comes with 23 PSD files. Some PSD files can include different pages inside, and can have hidden layers. Please note that the images are not included in the package.