This is a quick guide to help you make your website looks like one of our demo site. All steps are in this documentation, please follow this to build demo:

1. Read on Install=>Install Theme and Install=>Install Plugins

2. Read on Create Content=>Sample Content & Create Content=>Widgets

3. Read on Configure Theme, Configure Plugins

4. Read on Create Content=>Menus; Slider; Banner Slider; Pages

To install this theme, you have to install WordPress first, you can what this Video to know how to install WordPress. Make sure you install WordPress version 3.9 or higher. The minimum version of PHP is 5.2.4 is required (we recommend PHP 5.3+) and MySQL 5.0 to ensure all functions working properly.

You can install this theme like other WordPress themes. Follow these steps below to install this theme.

1. Install Theme from Dashboard

Login to your WordPress back end (Dashboard) and follow this video to install this theme.

2. Upload Theme by FTP

Using a FTP software like File Zilla or CuteFTP to upload the theme files to your WordPress site.

The first, extract the theme file "rubbez.zip",  you will have a folder "rubbez" include all theme files and folders (css, images, fonts...).

Upload "rubbez" folder to your WordPress folder in this relative path: /wp-content/themes/

After all files are uploaded, Login to Dashboard then go to Appearence - Theme, click on "Active" button of "Rubbez" theme to active it.

3. Install Plugins

To install plugins, go to WordPress dashboard and follow this video.

In this section, we will explain how to configure all features of the Rubbez theme in your wordpress store, step by step.

Login to your WordPress dashboard and go to Theme Options, follow these steps below:

1. Logo & Icon

In General tab, we can upload logo image and favicon icon for the website. We recommend logo image in .PNG file format.

For the favicion, use an image in .ICO file format, the image size is 16x16 pixels.

Click on Upload button to upload your image then click on Save Changes. You can do like in this video:

2. Background

In this tab, we can change the background for website. There are 31 images in folder "sample-data/background" can be used as body background. Please watch this video below:

3. Colors

In this tab, we can change color for theme, watch the video below and select colors like you want:

4. Header

In this tab, we can select header layout, there are 4 layouts of header. We can also change the mobile menu label, welcome message and enter slider alias to make slider appears on home page.

To get the slider alias, import sliders for Revolution Slider then copy slider alias.

5. Footer

In this tab, we can select footer layout, enter copyright information, payment icons and title for tags widget.

Click on Newsletter to enter form ID

Click on Social Icons to enter your social links

Click on About Us to enter your information

Click on Contact Us to enter your information, you can use this sample code:

<ul>
<li><i class="fa fa-map-marker"></i>34 Parer Place via Musk Avenue Kelvin Grove, QLD, 4059</li>
<li><i class="fa fa-phone"></i>Call : 07 3337 7801</li>
<li><i class="fa fa-envelope"></i><a href="mailto:support@roadthemes.com">support@roadthemes.com</a></li>
</ul>
    

Click on Menus to select menus for footer

Click on Payment Methods to enter payment icons in grey

6. Fonts

Click on "Typography" tab to change font for text, heading, menu. There are some options to select for each font like font family, back up font family, font weight and style, font size, line height, color. We can use default options or change any font like you need.

If we want to restore default options, click on "Reset Section" button. Watch the video below, we change some options then restore default.

7. Layout

Click on "Layout" tab, in this tab, we can select page layout is full width or box. Change columns of portfolio page, projects per page.

Preset: There are 4 presets to select, if we select a presets (Preset 2, 3, 4, 5) then the theme uses pre-defined fonts and colors in the preset. If we select "Use Options" then the theme uses fonts and colors from "Colors" and "Typography" tab.

8. Testimonials

In this tab we can change options for testimonials carousel.

 

9. Sidebars

Click on "Sidebar" tab to change position for each sidebar. Just select "Left" or "Right" position for sidebars.

Click on "Save Changes" button to save the changes.

10. Product

In this tab, we can change number of products per page, limit number products display by shortcode [products] and add enter social sharing code.

For social sharing code, go to http://www.sharethis.com or http://www.addthis.com/ then follow guide on website to create sharing button and get code.

Click "Save Changes" button to save the changes.

11. Blog

In this tab, we can change readmore text and change options for posts carousel.

Click "Save Changes" button to save the changes.

12. Contact map

Click on "Contact Map" tab to change options like shop description on map, upload marker image, enter address or coordinate. Please watch the video below:

Show map: Turn this option to show Google map on contact page

Map height: Enter the height of map in pixels in this text box. The width of map is responsive (100%).

Locate by: This option is used to locate the marker on map by address or by coordinate. If select address, enter your address in "Address" text box. If select coordinate, enter latitude & longtitude values.

Map description: This is the text on marker. You can use this sample code to put address, email and phone:

<strong><i class="fa fa-home"></i>RoadThemes</strong>
<i class="fa fa-map-marker"></i>1234 Pall Mall, London, England
<i class="fa fa-envelope"></i>support@roadthemes.com
<i class="fa fa-phone"></i>(012) 3456 789

Latitude & Longtitude: These are values for coordinate of marker.

Address: This is map address.

Zoom level: This is map zoom level, higher value will make the items in map bigger.

 

13. Less Compiler

This theme use Less technology to compile all theme options with .less files into CSS files

Enable Less Compiler: Turn this option on to make sure all theme options are effected. Only turn it off when you do not change any theme options. When this option is turned off, the theme does not compile .less files, that make server run abit faster.

14. Import / Export

Use this tab to save theme options or load from previous save

To export theme options, click on "Download" button and save to your local computer.

To import theme options, click on "Import from file" or "Import from URL" buttons. Paste the file content of exported file or URL of file in the box. If you import from a URL, you have to upload exported file to a server and get it URL.

Login to your WordPress dashboard and configure these plugins for the theme

1. Contact Form

Use this plugin to make the contact form on contact page. Navigate to Contact - Contact Forms, there is a form named "Contact form 1", if you want to create a new form, click on "Add New" button.

Click on the form title to edit form, copy this code and paste into "Form" box:

<div class="contact-input">[text* your-name placeholder "Name (required)"][email* your-email placeholder "Email (required)"][text your-subject placeholder "Subject"]
</div>
<div class="contact-message">
[textarea your-message placeholder "Message"]
</div>
<div class="contact-submit">
[submit class:button "Submit Form"]
</div>

Click on "Save" button to save the form.

2. Newsletter Plugin (MailPoet)

Use this plugin to make the newsletter sign up form on footer. Navigate to MailPoet. Click on "Thanks! Now take me to MailPoet." to start using this plugin. Click on "settings"link

On "Basics" tab, enter your email in "Email notifications" and choose other options.

Click on "Forms" tab, there is a form named "Subscribe to our Newsletter", move mouse over it and click on  "Edit" link to edit this newsletter sign up form

Move mouse over "Email *" and click on "Edit display" button

Select "Yes" on "Display label within input" then click on "Done" button

Click "Save" button to save changes.

3. WooCommerce

Navigate to Woocommerce - Settings to configure WooCommerce plugin.

We will se a notification to install Woocommerce Pages. Click on "Install WooCommerce pages" button. Now go back to WooCommerce settings.

In "General" tab, you can choose options like you want, no specific option is required for the theme.

In "Product" tab, select a page to display shop page in "Product Archive / Shop Page" dropdown. Set the image sizes like this

Click on "Save Changes" button to save options.

If you see the problem with the product image size on the front end, this because WooCommerce use the old image size. To make WooCommerce display product image in new size, you can use "Regenerate Thumbnails" plugin. Click on "regenerate your thumbnails" link to download this plugin

Download this plugin and save to your local computer. Go back to WordPress dashboard, navigate to Plugins - Add new, click on "Upload" link then click on "Browse..." button to select plugin file (.zip file). Click on "Install Now" button then click on "Active Plugin" link to active the plugin.

Navigate to Tools - Regen. Thumbnails and click on "Regenerate All Thumbnails" button

Go to front end and see product image

4. Products Compare (YITH Product WooCommerce Compare)

In WooCommerce settings, click on "Products Compare" tab

Link or Button: Select this option is "Link"

Link/Button text: Enter the text like "Add to Compare" or "Compare".

Other options is optional.

Click on "Save Changes" button to save options.

5. Wishlist (YITH Product WooCommerce Wishlist)

In WooCommerce settings, click on "Wishlist" tab

Check on "Enable YITH Wishlist" checkbox.

Select "Position" is After "Add to cart".

Click on "Save Changes" button to save options.

6. Magnifier (YITH Product WooCommerce Zoom Magnifier)

In WooCommerce settings, click on "Magnifier" tab

Select options like this

lick on "Save Changes" button to save options.

7. Projects

Go to Pages - Add New to create a new page for portfolio/projects, only enter page title and click "Publish" button.

Go to Projects - Settings, select "Projects Page" in dropdown and click "Save Changes" button. Click on "Images" tab to set image size like this

Click on "Save Changes" button to save settings.

In this section, we will explain how to create content for your store, step by step.

To create products and categories for WooCommerce, please go to these links and read documentation:

http://docs.woothemes.com/document/managing-products/

http://docs.woothemes.com/document/managing-product-taxonomies/

1. Menus

Login to your WordPress dashboard, navigate to Appearance - Menus, create menus for this theme. If you are a WordPress beginer, you can read this document to know how to work with Menu.

Before creating a new menu, you can create some pages for portfolio, contact, blog, shop... this will help you create menu quickly.

Primary Menu

Click on "create a new menu", enter menu name is "Primary Menu" and click on "Create Menu" button.

The Primary menu has a complex structure, with many levels of sub-menu. Create your own menu structure by drag and drop to make sub menus.

Please watch the video below and create menus

Top Menu

Create a new menu with name is Top Menu, 1 level. We can create menu items are "My Account, My Wishlist, Checkout, Login".

Click on "Manage Locations" tab to select "Top Menu" in dropdown of "Top Menu". Click on "Save Changes" to save the Top Menu.

The Top Menu has a different thing with other menus - the icons.

Now we need active Mega Main Menu for Primary Menu and Top Menu

Click on Mega Main Menu link

Check on primary and topmenu then click on "Save All Changes" button.

Click to open Layout Options for primary, topmenu and

Uncheck on "Company Logo" and "Searchbox"

Uncheck on "Sticky"

 

Now go back to edit Primary Menu

To make a menu item has sub menus in multiple columns, click on menu item to open menu item settings and select "Submenu Type" is "Multicolumns Dropdown", select "Side of Dropdown Elements" and "Submenu Columns".

To make a menu item has sub menus in multiple columns and widget, click on it and select "Submenu Type" is "Widget area 1", select "Side of Dropdown Elements" and "Submenu Columns".

 

Note: If you want to put categories, products into mega menu, click on "Screen Options" on left top of page, check on Product Categories. Click to open tab (Products or Product Categories) on left panel. Check on products or categories then click on "Add to Menu" button.

We need to create some other menus like Information, Service... do the same primary menu but with different name and menu items

2. Sliders

This theme include "Revolution Slider" plugin. Please watch this video to know how to import sample sliders.

After import sliders, you can go to edit slides, change the image, text, animation ... Please read Slider Revolution document before you working on Revolution Slider.

3. Brand Logos Carousel

Go to Theme Options - Brand Logos to make "Our Brands" carousel slider.

Click on "Add Slide" button to add a new logo then click on "Upload" button upload brand logo image. We recommend the logo image size is 185x105 pixels. We can add Title and Link to a logo.

 

Click on "Save Changes" button to save the slider.

4. Testimonials

Navigate to Testimonials - Categories to create a new category for testomonials. After that, click on Add New link to create new testimonials.

Enter user name, content, check on a category, upload an avatar image in "Featured Images" box.

Click "Publish" to publish testimonial.

5. Sample Content

We can import content block for some banners

Login to your WordPress dashboard, navigate to Tools - Import. Click on WordPress link on the table then click "Install Now" button on popup window to install WordPress Importer.

Click on "Activate Plugin & Run Importer" link to begin

Click "Browse..." button and select XML files in "sample-data/exported_files" folder:

- contact-form.xml: This is exported file of Contact Form 7 plugin.

- content-blocks.xml: This is exported file of Content Blocks plugin

- projects.xml: This is exported file of Projects plugin.

- team-members.xml: This is exported file of Team Members plugin.

- testimonials.xml: This is exported file of Testimonials plugin.

- all-content.xml: This is exported of many content, includes posts, pages, products, contact form, testimonials, brand logo sliders, content blocks. You can ignore this file if you website has already content.

Click on "Upload file and import" button

On the next interface, select existing user on dropdown, check on "Download and import file attachments" to download sample images.

Click on "Submit" button to import.

All the content blocks are for sample, after importing finished, you have to edit them. Go to Content Blocks menu to see all, click on each block to edit.

6. Widgets

To create widgets for this theme quickly, we use a tool to import all widgets from exported files in "sample-data/exported_files" folder.

Login to your WordPress dashboard, navigate to Tools - Widget Importer & Exporter

Click on "Browse..." or "Choose File" button then select "rubbez-widgets.wie", click on "Import Widgets" to finish.

After importing widgets, we need go to update some widgets like menu, slider. Go to Apperances - Widgets

You can change title and options but with text widgets, keep the html code, just change text. To change Content Blocks widgets, go to click on Content Blocks item on left menu of WordPress admin, click on each block to edit.

7. Create Pages

In this guide, we will create some pages for your store like home page, blog page, shop page, contact page...

7.1 Home Page

The default home page is blog, to create a home page with layouts of this theme, we have to create a new page and set it as front page.

Go to Pages - Add New, enter page title and select template is "Front Page Template"

For the page content, open "sample-date/pages" folder in this package, open a "home-[page name].txt" and copy content. Click on "CLASSIC MODE" and click on "Text" tab to switch to HTML mode, paste content there and click Publish to save page.

Go to Settings - Reading, select "A static page" in "front page displays" then select your page in dropdown.

Click "Save Changes" to save.

7.2 Blog Page

This theme includes 3 layouts for blog page (Blog Large Image, Blog Grid, Blog Grid Fullwidth). Login to your Dashboard and create a new blank page.

For the grid blog layout, select page templage is Blog Grid or Blog Grid Full Width.

For Large Image blog layout, select page template is Default Template. Go to Settings - Reading, select your page in "Post page" dropdown.

7.3 WooCommerce Pages

We have to create pages for WooCommerce (shop, cart, checkout,wishlist). When you installed WooCommerce plugin, you will see this button in Dashboard.

Click on "Install WooCommerce Pages" button to install.

7.4 Contact Page

We use the Contact Form 7 to make contact form on the contact page. To get contact form shortcode, navigate to Contact - Contact Forms you will see the form shortcode, copy it to paste into contact page.

This theme includes 2 layouts for contact page (a page with sidebar and a full-width page). Login to your Dashboard and create a new page, select template in "Template" dropdown.

Contact with sidebar: When editing page, click on "Text" to switch to HTML mode, paste this code into content, before contact form shortcode:

<h3><i class="fa fa-envelope-o"></i>Leave a Message</h3>

Contact Full Width: When editing page, we can put a heading text before the contact form shortcode, like this:

<h2>We provide 24/7 support services, please contact us if you have any questions</h2>

And after contact form shortcode, we put content like this:

<ul>

<li><i class="fa  fa-envelope-o"></i><strong>Email</strong>info@roadthemes.com</li>

<li><i class="fa  fa-phone"></i><strong>Phone</strong>+98 (765) 1234</li>

<li><i class="fa  fa-skype"></i><strong>Skype</strong>your_skype_id</li>

</ul>

7.5 About Us Page

To create About Us page, navigate to Pages - Add New, enter the page title and select page template is Full Width. In this page, we can use shortcode to make content like skills, team members, brand logos.

Skills shortcode:

[skill title="Web Design" percent="95"]

with the title is your skill and percent from 0 to 100

Team member shortcode:

[woothemes_our_team limit="10" size="250"]

Our brands shortcode:

[ourbrands]

For quickly, open "sample-date/pages" folder in this package, open a "about-us.txt" and copy content. Click on "CLASSIC MODE" and click on "Text" tab to switch to HTML mode, paste content there and click Publish to save page.

7.6 FAQ Page

To create a FAQ page, navigate to Pages - Add New, enter the page title and select page template is Sidebar.

We use accordion from Visual Composer to make questions.

For quickly, open "sample-date/pages" folder in this package, open a "faqs.txt" and copy content. Click on "CLASSIC MODE" and click on "Text" tab to switch to HTML mode, paste content there and click Publish to save page.

7.7 Services Page

To create a Services page, navigate to Pages - Add New, enter the page title and select page template is Full Width.

For quickly, open "sample-date/pages" folder in this package, open a "services.txt" and copy content. Click on "CLASSIC MODE" and click on "Text" tab to switch to HTML mode, paste content there and click Publish to save page.

7.8 Content Page

To create a new content page, navigate to Pages - Add New, enter the page title and select page template is Default Template. We can upload an image in "Feature Image box. Write content and insert some images.

9. Shortcodes

In this theme, we use Shortcodes Ultimate plugin to make shortcodes. You can go to this page http://gndev.info/kb/ and read the documentation to create your own shortcodes.