Firstly we would love to send our great thanks to you for purchasing Motor. This documentation covers
almost everything to guide you step by step from the start to have your site on air. We encourage you to
read thoroughly all section before you go on.
Thanks again and enjoy building your website with Motor.
WordPress Information
Before installing this theme, please make sure you have a working WordPress version already installed. For
further guide to install WordPress, please find in below useful links:
WordPress
Codex: General info about WordPress and how to install your server.
When purchasing successfully our theme from Themeforest, you will need to download theme package for your
use. To download the package, please login to your Themeforest account, navigate
to “Downloads”, click the “Download” button in the
left of the theme, choose “All files & documentation” to download our theme
package to your computer. The theme package includes:
Yolo_Theme: Includes yolo-motor.zip and yolo-motor-child.zip file that consists of everything you
need to install the theme.
Document Folder: Includes Motor Documentation file that helps
you get to know about Motor and guides you to build your site with our theme.
Release_logs file: Includes the licensing files of Themeforest purchase.
Demo Content Folder: Includes the .xml file and revolution slider sample data which you will need to import our demo
data.
Requirement for Motor
To use Motor theme, you must be running WordPress 3.6 or higher, PHP5 or
higher, and MySQL 5 or higher. Follow below checklist to ensure your host can work
well with Motor theme:
Your web host has the minimum requirements to run WordPress.
They are running the latest version of WordPress.
You can download the latest release of WordPress from official WordPress website.
You did create best secure passwords FTP and Database.
INSTALLATION
There are two ways to install the theme. It is up to you choose your preference.
Install Theme via WordPress
Step 1: Login to your WordPress Admin Panel, navigate to
Appearance > Themes
Step 2: Click Install Themes on the top > hit
Upload button.
Step 3: Find yolo-motor.zip file on your computer and click Install
Now”.
Step 4: Once uploaded, activate the theme. Go to
Appearance > Themes and activate it.
Step 5: Then you will see a notification message to activate the required &
recommended plugins: Contact Form 7, Revolution Slider, WPBakery Visual Composer, etc.
Follow the steps to install and activate each plugin.
Note: If you see this message “Are You Sure You Want To Do This”
when installing yolo-motor.zip file via WordPress, it means that you have an upload max file size limit. Try to install
the theme via FTP instead, or contact your host to increase the limit.
Install Theme via FTP
Step 2: Unzip the yolo-motor.zip file and ONLY use the extracted
yolo-motor theme folder.
Step 1: Login into your hosting space via an FTP software.
Step 3: Upload the extracted Motor Theme folder into
wp-content/ themes folder.
Step 4: Activate the newly installed theme by going to
Appearance > Themes and clicking the Activate
button.
Step 5: Then you will see a notification message to activate the required &
recommended plugins Contact Form 7, Revolution Slider, WPBakery Visual Compose, etc.
Follow the steps to install and activate each plugin.
Follow this video tutorial learn more about how to install Motor theme & plugins:
Plugin Installation
Here is the list of plugins that will come together with our theme when you activated it. You are
recommended to install and activate these plugins base on your own need:
Contact Form 7: Motor is fully compatible with Contact Form 7, the free form plugin
recommended to create a nice form for your site.
Visual Composer: The popular drag and drop page builder with an intuitive interface to
build your content at ease.
Revolution Slider: Create a responsive or Full-width slider with must-see-effects.
WP Instagram Widget: A WordPress widget for showing your latest Instagram photos.
WP Modal Login: A highly configurable and versatile modal (pop-up) login form.
Yolo Motor Framework: The Yolo Motor Framework plugin.
Redux Framework: Redux is a simple, truly extensible options framework for WordPress themes and plugins.
WooCommerce: An e-commerce toolkit that helps you sell anything. Beautifully.
YITH WooCommerce Compare: YITH WooCommerce Compare allows you to compare more products with WooCommerce plugin, through product attributes.
YITH WooCommerce Wishlist: YITH WooCommerce Wishlist allows you to add Wishlist functionality to your e-commerce.
Import Demo Content
The easiest way to import our demo content is to use our Demo Content Importer. Our importer will give you all pages and posts, several sample sliders, widgets, and more.
Import Slider
You should import all our sliders before importing Sample Demo Data, please follow these steps:
Step 1: Go to Dashboard > Revolution Slider > Click > Import Slider.
Step 2: There is one pop-up which appears > Click Choose File button to select slider.zip file from your computer (all sample slider is contained on demo_content file which you downloaded from ThemeForest market.)
Step 3: Click Import Slider to import a slider on your site.
Import All Content Demo
Step 1: Make sure you have installed and activated our theme & all plugins before importing.
Step 2: Navigate to Yolo Settings > Click Install Demo to import all sample data of Motor theme. You absolutely select the elements which you want to import by checking on Import Post, Import Nav Menu or Import Content.
Step 3: It can take a few minutes to import everything. Please be patient and wait to complete. Once it loads, you will see a Success message below the tabs.
Step 4: All done, you will have a website that look like our demo site.
Follow this video tutorial learn more about how to import Motor sample content:
Update Theme
Auto Update
Please follow these steps to update automatically this theme:
Step 1: Navigate to Plugins > Add News > Upload, find and install
envato-wordpress-toolkit.zip file. You can go to this LINK to download the
plugin.
Step 2: To establish an Envato Marketplace API connection navigate to the Envato
Toolkit page and insert your Marketplace username and secret API key in the designated input fields. To
obtain your API Key, visit your "My Settings" page on any of the Envato
Marketplaces.
Step 3: Once the API connection has been established you will see a list of themes that
can be auto installed. If you don't see any themes and are certain you've done everything
correct, there is a good chance the theme author has not updated their theme to be available for auto
install and update. If that's the case, please contact the theme author and ask them to update their
theme's information.
Manual Update
You can also update the new version in traditional way:
Step 1:Backup all custom files (files which you have edited some
codes). Or you can use Child
Theme to save all custom files
Step 2:Deactivate current theme by going to
Appearance > Themes and activate any other themes such as the
Default WordPress 4.x Twenty Fourteen.
Step 3:Update and re-install new version.
Basic Setting
If you’re new to WordPress, you’ll probably see that your site after importing data is completely different from our demo
It’s because some basic setting is needed on WordPress site. If you know the problem is and how to fix it, please skip this section.
Setup Home Page & Blog Page
To assign Homepage and Blog page, please follow these steps:
Step 1: Navigate to Settings > Reading
Step 2: Select Front page displays: A static page then chooses
Front page and Posts page from dropdown list
Step 3: In addition, you can choose the number of post on Blog pages show
at most option.
Step 4: Click Save to save configuration.
Assign Menu
Please go to Appearance > Menus then find Menu Settings > Theme Locations at the bottom.
Check the Primary Menu then save it. This action will assign the menu “Main Menu” to the location Primary (the main menu) on our theme.
Please go to Permalinks setting: Settings >Permalinks then change the Common settings to Post name.
You can see more detail at:http://codex.wordpress.org/Using_Permalinks After doing these steps, your site will look like our demo, you can move on to process to build your content.
THEME OPTION
Based on Redux Framework, Motor theme provides Theme Options helping users easily to control WordPress theme. There are many
options in Theme Options, each option has a mission making your website nicer and more eye-catching.
You absolutely go to Appearance > Theme Options to see all options. And do not forget to follow this section to see description each option in Theme Options.
General Setting
General Setting section allows you to configure general pages such as select page preloader or configure enhancement or 404 page.
General Setting
Page Preloader: Select Page Preloader from drop down list for your website. Leave empty if you don't want to use.
Preloader background color: Set Preload background color from color table.
Preloader spinner color: Pick a preloader spinner color for the Top Bar.
Switch Selector: Turn On/Off switch selector at front-end.
Back To Top: Turn On/Off back to top button for website.
Layout Style: Select layout style for your website including Boxed, Wide and Float style.
Enhancement
Enhancement section will help you enable the coming soon/ maintenance mode and enable JS, CSS file for your website.
Coming Soon/Maintenance Mode: Enable/Disable your site coming soon/maintenance mode.
404 section allows to configure 404 page by adding title, background image for 404 page.
Page Title: Enter the page title for 404 page.
Sub Page Title: Enter sub page title for 404 page.
Background 404 page: Upload your background image for 404 page.
Title 404 : Enter the title 404 for your page. This title appears same as a notification for error page.
Go back label: Enter the name of button to go back page you want.
Go back link: Enter the link URL which will be redirect if user click on "go back label".
Page Setting
Page Setting section will help you to configure main page on your WordPress site. There are 3 section you need to configure on Page Setting including Archive page, Search Page and Single Blog section.
Pages Setting
Pages Setting
Layout: Select page layout for your page including FullWidth, Container and Container Fluid.
Page Background Color: Select background color for your page by choosing color from color table.
Sidebar: Select sidebar style for your page including Left, Right, No-Sidebar, Left and Right sidebar.
Pages Title Setting
Show Page Title: Turn On/Off page title.
Page Title Layout: Select page title layout for your page. There are 3 layout styles: FullWidth, Container and Container Fluid.
Page Title Margin: Enter margin-top and margin-bottom for your page title.
Page Title Text Align: Set Page Title Text Align including Left, Center and Right.
Page Title Parallax: Turn On/Off page title parallax for your page.
Page Title Height: Enter the number of height for your page title.
Page Title Background: Select a background image for page title section.
Breadcrumbs: Turn On/Off breadcrumbs here.
Page Comment: STurn On/Off page comment here.
Archive Page
Archive page section provides many options which will help you configure archive page for your WordPress Website.
Archive Page
Layout: Select page layout for your archive page including FullWidth, Container and Container Fluid.
Sidebar: Select sidebar style for archive page including Left, Right, No-Sidebar, Left and Right sidebar.
Sidebar Width: Select the width of sidebar for archive page. You can choose Small(1/4) or Large(1/3) for your archive page.
Right Sidebar: Choose the default of right sidebar from drop down sidebar list.
Paging Style: Select archive paging style including Default, Load More and Infinity Scroll style.
Paging Align: Select archive paging align including Left, Center and Right style.
Archive Display Type: Choose Archive Display Type for your archive page including Large Image, Medium Image, Grid and Masonry.
Archive Title Setting
Show Archive Title: Turn On/Off archive title.
Archive Title Layout: Select page title layout for archive page. There are 3 layout styles: FullWidth, Container and Container Fluid.
Archive Title Margin: Enter margin-top and margin-bottom for archive page.
Archive Title Text Align: Set Archive Title Text Align including Left,Center and Right.
Archive Title Parallax: Turn On/Off page title parallax for archive page.
Archive Title Height: Enter the number of height for archive page title.
Archive Title Background: Select a background image for archive title section.
Breadcrumbs: Turn On/Off breadcrumbs here.
Search Page
Search Page section allows you to configure all options of Search Page.
Layout: Select page layout for search page including FullWidth, Container and Container Fluid.
Sidebar: Select sidebar style for search page including Left, Right, No-Sidebar, Left and Right sidebar.
Sidebar Width: Select the width of sidebar for search page. You can choose Small(1/4) or Large(1/3) for your search page.
Left Sidebar: Choose the default of left sidebar from drop down sidebar list.
Paging Style: Select search paging style including Default, Load More and Infinity Scroll style.
Paging Align: Select search paging align including Left, Center and Right style.
Archive Display Type: Choose Archive Display Type for your search page including Large Image, Medium Image, Grid and Masonry.
Single Blog
Single Blog section allows you to configure single blog page, for example layout, sidebar, etc.
Single Blog
Layout: Select page layout for single blog including FullWidth, Container and Container Fluid.
Sidebar: Select sidebar style for single blog page including Left, Right, No-Sidebar, Left and Right sidebar.
Sidebar Width: Select the width of sidebar for single blog page. You can choose Small(1/4) or Large(1/3) for your single blog page.
Right Sidebar: Choose the default of right sidebar from drop down sidebar list.
Show Post Navigation: Turn On/Off post navigation for your single blog post.
Show Author Info: Turn On/Off author for single blog page.
Single Blog Title Setting
Show Single Blog Title: Turn On/Off single blog title.
Single Blog Title Layout: Select single blog title title layout for single blog page. There are 3 layout styles: FullWidth, Container and Container Fluid.
Single Blog Title Margin: Enter margin-top and margin-bottom for single blog title.
Single Blog Title Align: Set Single Blog Title Align including Left,Center and Right.
Single Blog Title Parallax: Turn On/Off page title parallax for single blog title.
Single Blog Title Height: Enter the number of height for single blog title.
Logo & Favico
In this section, you can upload your logo, sticky logo and custom favico for your WordPress website.
Logo:Upload your logo from your computer or select on Media Library.
Logo Height: You can set a height for logo here.
Logo Max Height: You can set max-height for logo here.
Logo Top/Bottom Padding: Enter the number of padding-top and padding-bottom for your logo.
Sticky Logo: Upload sticky logo on this option.
Custom Favico:Upload custom favico for your website.
Header
There are many options on Header section helping you to configure Header for your WordPress website. Follow these descriptions learn more about them:
Show/Hide Top bar:Turn On/Off Top bar for Header.
Top bar layout width: Select Top bar layout width including Container and FullWidth.
Top bar Layout: Select top bar layout for Header. There are 4 layout styles to choose.
Top Left Sidebar: Choose default top left sidebar from drop down list sidebar.
Top Right Sidebar: Choose default top right sidebar from drop down list sidebar .
Top Center Sidebar:Choose default top center sidebar from drop down list sidebar.
Header Layout:Select header layout for your website.
Header Schema
Header Scheme: Select header scheme for your website including Default or Customize. If you choose Customize, you need to configure header background, header background color opacity, header border color and header text color for your header.
Header Navigation
Header navigation scheme: Select header scheme for your website including Default or Customize. If choosing Customize, you need to configure Header navigation background color and Header navigation text color for your website.
Header navigation Layout: Select layout style for Header navigation including Container and FullWidth. If FullWidth is selected, you need to configure padding-left/right for your header navigation.
Header navigation hover: You can choose Primary Color or Base Primary Color for header navigation
Header navigation distance: You can set distance between navigation items. Leave blank for default.
Header Float: Turn On/Off header float.
Show/Hide Header Sticky: Turn On/Offheader sticky for your header.
Header Sticky Scheme: Select header sticky scheme for your header including Inherit, Gray, Light, Dark.
Search Box Style: Select Search Box style including Standard and Ajax Search.
Header Customize
Header Customize section will help you to configure megamenu, select search button style, shopping cart style, etc.
Mega menu Animation: Select animation for mega menu from drop down list.
Add register/login popup link to menu: Select menu to add register/login popup link.
Header Customize Navigation
Header Customize Navigation: Organize how you want the layout to appear on the header navigation.
Search Button Style: Select style for search button including Default, Round and Bordered.
Shopping cart Style: Select style for shopping cart including Default, Round and Bordered.
Custom Social Profiles: Select custom social profile for custom text.
Custom Text Content: Add content for custom text. You can use HTML code on this option.
Header Customize Separate: Turn On/Off Header Customize Separate
Header Customize Left
Header Customize Left: Organize how you want the layout to appear on the header left.
Search Button Style: Select style for search button including Default, Round and Bordered.
Shopping cart Style: Select style for shopping cart including Default, Round and Bordered.
Custom Social Profiles: Select custom social profile for custom text.
Custom Text Content: Add content for custom text. You can use HTML code on this option.
Header Customize Separate: Turn On/Off Header Customize Separate
Header Customize Right
Header Customize Left: Organize how you want the layout to appear on the header left.
Search Button Style: Select style for search button including Default, Round and Bordered.
Shopping cart Style: Select style for shopping cart including Default, Round and Bordered.
Custom Social Profiles: Select custom social profile for custom text.
Custom Text Content: Add content for custom text. You can use HTML code on this option.
Header Layout: Select header mobile layout for your website.
Menu Drop Type:Select menu drop type for your website including Dropdown Menu and Fly Menu.
Mobile Logo: Upload small logo which will be displayed on mobile device.
Logo Height: Enter the height for logo here.
Logo Mobile Max Height: Enter the number of max-height for your mobile logo.
Top Bar: Turn On/Offf top bar.
Sticky Mobile Header: Turn On/Offf sticky mobile menu.
Search Box: Turn On/Offf search box for menu.
Shopping cart: Turn On/Offf shopping cart for menu.
Footer
In this section, you can select Footer Block for your main page..
Styling Option
Styling option allows you to configure Primary color, text color, submenu color and page title color for your website.
Primary Color: Select Primary color from color table.
Secondary Color: Select Secondary color from color table.
Text Color: Select text color from color table.
Link Color: Select Heading color from color table.
Top bar background Color: Select top bar background color from color table.
Top bar text Color: Select top bar text color from color table.
Sub-menu Scheme
Sub Menu Scheme: Select Submenu scheme for your website including Default or Customize.
Sub Menu Background Color: Select Secondary color from color table.
Sub Menu Text Color: Select submenu text color from table color.
Page Title Background Color
Page Title Background Color: Select page title background color from table color.
Page Title Background Overlay Color: Select page title background overlay color from color table.
Page Title Background Overlay opacity: Set opacity level for page title background .
Typography
In this section, you can select Fonts for body, menu, page title, page sub title from dropdown list font.
Social Profile
Social Profile section allows you turn on social media and add the link your account on your website.
Promo Popup
Promo Popup allows you create a Newsletter form which will be displayed when visitor begin accessing your website
Show Popup: Turn On/Off popup.
Popup Width: You can set the width of popup.
Popup Height: You can set the height of popup.
Popup Effect: Choose popup effect for popup.
Popup Delay: Set the delay of popup(caculate by miliseconds).
Popup Content: Enter the content for popup.
Popup Background: Select background image for popup.
WooCommerce
WooCommerce section provide many options which help you to configure shop page, archive product page and single product page.
Show Rating: Turn On/Off rating for product page.
Sale Badge Mode: Select Sale Badge Mode tyle including Text and Percent.
Button Tooltip: Turn On/Off button tooltip.
Quick View Button: Turn On/Off quick view button for product.
Add to cart button: Turn On/Off add to cart button for product.
Add to Wishlist Button: Turn On/Off add to wishlist button.
Add to Compare Button: Turn On/Off add to compare button.
Archive Product
Product Per Page Select product per page for archive page.
Product Display Columns: Choose number of columns to display on shop/categories pages.
Layout Options
Archive Page Product layout: Select Archive page layout including FullWidth, Container and Container Fluid.
Style: Choose style for archive page.
Show Categories: Turn On/Off categories for archive page.
Show Filters: Turn On/Off filters for archive page.
Show Search: Turn On/Off search for archive page.
Ajax Filter: Turn On/Off ajax filter for archive page.
Page Title Options
Show Archive Title: Turn On/Off archive title for archive page
Archive Product Layout: Choose layout style for archive product.
Archive Product Title Margin: Enter the number of margin-top and margin-bottom for archive product title.
Archive Product Title Align: Set Archive Product Title Align including Left, Center and Right.
Archive Product Title Parallax: Turn On/Offarchive product title parallax.
Archive Product Title Height: Enter the number of archive product title height here.
Archive Product Title Background: Upload a background image for archive product title.
Breadcrumbs in Archive Product: TurnOn/Off breadcrumbs in archive product.
Show Page Shop Content: Enable/ Disable Shop page content.
Single Product
Show Image Thumb: Turn On/Off Image Thumb product.
Layout Options
Single Product layout: Select Single product layout including FullWidth, Container and Container Fluid.
Single Product Sidebar: Set single product sidebar for single product page.
Page Title Options
Show Single Title: Turn On/Off single title for single product page.
Single Product title Layout: Select single product title layout including Full Width, Container and Container Fluid.
Single Product Title Margin: Enter the number of margin-top and margin-bottom for single product title.
Single Product Title Text Align: Set Single Product Title Align including Left, Center and Right.
Single Product Title Parallax: Turn On/Offsingle product title parallax.
Single Product Title Height: Enter the number of single product title height here.
Single Product Title Background: Upload a background image for single product title.
Breadcrumbs in Single Product: TurnOn/Off breadcrumbs in single product.
Product Related Options
Related Product Total Record: Enter the number of related product for your single product page.
Related Product Display Columns:Choose the number of columns to display on related product.
Related Product Condition: Check to enable related product condition.
Custom CSS & Script
In this section, you absolutely add your Custom CSS and Custom JS segment for your website.
Import /Export
In this section, you can import or export date from your website.
MENU
Menu Location
Motor supports 2 menu location:
Primary Menu: This is main navigation which located in the header.
Mobile Menu: This is main navigation which will be displayed on mobile device.
Create A New Menu
This theme has built-in multi-column menu system. Menus are created using the core WordPress menu
manager. Following the guide below to learn how to create a new menu on Motor theme.
Step 1: Navigate to Appearance > Menus from
Admin panel.
Step 2: Click the Create A New Menu link to make a new menu. Enter the
name then click Create Menu button.
Step 3: To add menu item, select pages and posts on the left-hand side and click
Add to Menu button. You also can add custom links or post categories into the menu.
Step 4: To create a dropdown menu, simply drag a menu item below of another menu item
and slide to the right, and it will lock into place and create a dropdown section.
Step 6: After setting up your menu, scroll down to the bottom of the page to assign the
menu on the Theme Location box.
Step 7: Once it’s all done, make sure you click the Save Menu
button.
Megamenu
Motor supports to create Megamenu for your website. Megamenu contains 2 sub-menu styles:Column and Tab. To easily enable megamenu, you only open Menu Item
level 0 > Check Enable megamenu to activate mengamenu.
Column Style
Column Style is a multi-column style menu to display menu items (such as posts, pages, categories, shop).
Column Style requires your menu which must have Level 0, Level 1 and Level 2 menu item.
Click on a Level 0 menu item and select Megamenu style: Column and select Megamenu columns for your website.
In addition, you can select Background Image for your menu or check on Sub menu fullwidth to turn on sub menu fullwidth.
Check on Hide Mega menu heading to hide megamenu heading
Tab Style
Tab Style allows to add many different content types on your menu.
On Tab Style, menu only has 2 levels (Level 0, Level 1). On menu level 0, select Megamenu style: Tab and select Megamenu Columns for your menu.
On menu level 1, you need to select Mega Menu widget area(Mega Menu widget area will be defined on Appearance > Widgets).
In addition, remember to select Tab Columns from drop down list columns.
In addition, you can select Background Image for your menu, check on Hide Mega menu heading to hide megamenu heading
PAGE
Create New Page
Step 1:From Admin Panel navigate to Pages > Add New to create a new page.
Step 2: Enter the title, slug and content for your page.You can choose to add your content using Visual Composer shortcode or Text editor.
Step 3: In Page Attributes box, choose Page Template in dropdown list. See below Page Template list for more detail.
Step 4: After adding your content, scroll down your mouse you will see Page Options. You can configure each tab on
Page Options which helps you page to display nicer and more eye-catching.
Step 5: All done, click Publish to save your configuration.
Page Options
We have created some specifics Motor page settings which will help you to build splendid pages for your
website. Following the list of options below to see how they work:
Page Layout
Layout Style: Choose layout style for your page including Default, Boxed, Wide and Float. If choose Default, your page will get the configuration on Theme Options.
Page Layout: Choose page layout (this section doesn't include header) including Default, Full Width, Container and Container Fluid.
Page background color: Set background color for your page from color table.
Page Sidebar: Choose sidebar position for page.
Left Sidebar:Choose left sidebar for page. This option will appear if you select Page Sidebar: Left Sidebar or Page Sidebar: Left & Right Sidebar.
Right Sidebar: Choose right sidebar for page. This option will appear if you select Page Sidebar: Right Sidebar or Page Sidebar: Left & Right Sidebar.
Logo Sticky: Select the logo sticky image for your page.
Sidebar Width: Choose the width of sidebar.
Page Class Extra: Enter page class here.
Page Color
Page Color section allows you change the Primary Color, Link Color, Top Bar Text Color, etc. If you turn off Customize Page Color option.
Your page will inherit color from Theme Options.
Page Top
Show/Hide Top Bar: Turn On/Off top bar for you page. If choose Default, the configuration of top bar will be inherited on Theme Options.
Top bar layout width: Choose the width for your top bar including Default, Container and Full width. If choose Default, the configuration
of top bar layout width will be inherited on Theme Options.
Top Bar Layout: Choose top bar layout for your page.
Top Left Sidebar: Select sidebar for Top Left Sidebar from dropdown list sidebar.
Top Right Sidebar: Select sidebar for Top Right Sidebar from dropdown list sidebar.
Top Center SidebarSelect sidebar for Top Center Sidebar from dropdown list sidebar
Page Header
Page Header will allows to turn On/Off Header for your page. In addition, you absolutely customize Header Customize option, if turn On
Header Customize option you can configure many options for your page such as Header Layout, Header Scheme, Header sticky, etc.
Page Header Customize
Set Header Customize Navigation: Turn On/Off Header Customize Navigation. If turn On this option, you absolutely configuer header customize navigation same as you want.
Header Customize Navigation: Click to turn on element for header customize navigation. There are 9 elements you can choose. Drag to change element order.
Search Button Style: You can choose Default to inherit configuration of Theme Options or choose Round or Bordered.
Shopping cart Style: Choose Default, Round or Bordered.
Custom Social profiles: Add your custom social profiles on this option.
Custom text content: Enter Custom text here
Header customize separate: Turn On/Off this option.
Set Header Custom Left/Right: Same as Set Header Custom Navigation option, you absolutely turn on Header Custom Left/Right to configure options
which appropriate for your page.
Logo
Custom Logo:Upload your custom logo on header of your page.
Logo Height: Enter the height of logo here.
Logo max height: Enter the logo max height for your page.
Logo padding top/ padding bottom:Enter the logo padding-top and padding-bottom for your logo.
Sticky Logo:Upload an image for sticky logo.
Menu
Menu section will help you to choose separated menu for page. You can select Page Menu and Page menu mobile.
Page Title
On this section, you can customize your page title with many options such as turn on/off page title, select color for page title or sub title from table color.
Page Footer
Page Footer allows to select footer to override footer selected on Theme Options
Header Mobile
Header Mobile Layout: Choose layout style for header on mobile device..
Menu Drop Tyle:Choose Default to inherit on Theme Options and choose Dropdown Menu, Fly Menu style if you want to custom your page.
Header Mobile sticky: Turn On/Off header mobile sticky for page.
Custom Logo:Upload custom logo here.
Mobile Header Search Box:Turn On/Off mobile header search box.
Mobile Header Shopping Cart:Turn On/Offshopping cart on mobile device.
POST
Create New Post
Follow below steps to create blog posts assign blog page:
Step 1: In your Admin Panel, go to Post and navigate to Add New.
Step 2:Enter your title and choose Post Format from Format box on the right side which shows different post format options: Standard, Image, Gallery and Video.
Step 3:Add your post content in editing field. You can use our shortcode to build your content where needed. .
Step 4:Add Categories for the post from the Categories box on the right side.
You can add new category or choose from existing categories. Check the box to select Categories for your post. Add relevant Tags for your post in the Tags box,
set Featured image on the right side and other setting from the sections below Editing field.
If you need detailed guide about post settings in WordPress, please find in WordPress Codex.
Step 5:After adding your content, scroll down your mouse you will see Page Options section which allows you to have more configurations for your post.
Step 6:All done, click Publish to publish your post.
Post Format
Motor supports 7 post formats. Follow below steps to see the description of Post Formats and Global setting
of Post.
Standard Settings: This is the standard post, on this post format you can choose Featured Image and set the content for it.
Gallery Settings: When selecting Gallery Format, you will have Gallery Setting meta-box
to add as many images as you want into your gallery and manage your preview content as Featured Image,
First Image on Gallery or Image Slideshow.
Image Settings: When you selecting Image Format for you post, you will have Image
Settings a meta-box to choose a main image of the post. Set Feature Image as the main image for preview
content or Choose Your Image if you want to set another image as the main image for preview content.
Video Settings: When selecting Video Format, you will have Video Setting meta-box where
you can add video URL, and embedded video code, aspect ratio, and preview content as Featured Image,
Video or Featured Image as Video Thumbnail.
Audio Settings: When selecting Audio Format, you will have Audio Setting meta-box where
you can add embedded audio code, aspect ratio and preview content as Featured Image, Video or Featured
Image as Video Thumbnail.
Quote Settings: When selecting Quote Format, you will have Quote Setting meta-box where
you can add the quote and citation and manage your preview content as Featured Image.
Link Settings: When selecting Link Format, you will have Link Setting meta-box where
you can add the URL, Text and manage your preview content as Featured Image.
Page Options
Same as Page Options section of Page, you absolutely configure more options on Page Options of Post.
To learn more about description of each option, please visit Page section.
MOTOR CUSTOM POST TYPE
Testimonial
Create New Testimonial
Step 1: From admin panel, navigate to Testimonial > Add New to add new testimonial
Step 2: Enter title and description for testimonial
Step 3: Choose Testimonial Categories and Featured Image of new testimonial on the right side.
Step4: Scroll down your mouse you will see Testimonial information, please fill out
information for Testimonial information.
Step 5: All done, click Publish to save your information.
Testimonial Setting
Email: Enter email for testimonial item here.
Position: Enter position for testimonial.
URL: Enter the URL for testimonial
Special: Enter the special name or position here.
Rating: Choose rating from dropdown list rating.
Background Image: Upload a background image for testimonial.
Team Member
Create New Team Member
Step 1: From admin panel, navigate to Team Member > Add
New to add new team member
Step 2 In the right side, select Team Categories and Featured Image for team member.
Step 3: Fill out all information of Team Member Information, Social Profiles, Specialty and Certificates for your Team Member.
Step 4: All done, click “Publish” to save the
configuration.
Team Member Setting
Team Member Information: Enter all information of Team Member as Image, name, position,
phone, email and experience.
Social Profiles Enter your link social here. Leave blank if you don’t show
Social for your Team Member.
Specialty: Enter the description for your Team member specialty.
Certificates: Enter the description for your Team member certificates.
Footer Blocks
Footer Blocks custom post type will help you create particular footer style by using Visual Composer shortcode.
On Motor, we provides 11 sample footer blocks. You can install our sample data learn more about this.
Create New Footer Blocks
Step 1: From Admin Panel, navigate to Footer Blocks > Add New
Step 2: Adding the content by using Visual Composer shortcode.
Step 3: All done, click Publish to save your configuration.
WOOCOMMERCE PLUGIN
When WooCommerce plugin is installed in your WordPress website, you are able to create online shop or product list page.
Below is the guide to create Product or shop page using WooCommerce.
Create New Product
To create a new product, please follow these steps:
Step 1: Navigate to Products in your WordPress admin sidebar.
Step 2: Click Add New to make a new product. Create a title, and insert your product content in the editing field. You can use any of our shortcode builder elements inside the product.
Step 3: Add Categories from the right side. To assign it to the product, 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
Step 5: Select featured image for product by hitting button “Set featured images”. You can then select product images to add into Product Gallery
Step 6: Scroll down your mouse, you will see Product Data option. Remember to choose Product Data: Simple product.
Step 7: Once you have finished, click “Publish” to save your product.
Shop Page
To set up a page as Shop page to show all products, create a new page. From admin panel, navigate to Woo Commerce > Settings
In Products tab, navigate to Display sub-tab on the top, here you can find your page from dropdown list to set as Shop page.
Product List Page
To set up a page as Product List page to show all product such as product list 2 columns, 3 columns, you can create a new page.
Then use add Yolo Product shortcode and configure options on this shortcode. This shortcode will help you to create Product list page.
MOTOR SHORTCODE
Instead of writing lines of code to build elements, we built Motor with number of premade shortcodes that enable you to create many elements you see in our demo in fingertips.
By installing Visual Composer (the page builder plugin integrated in the theme package), you will have the Visual Backend Editor where every shortcodes are displayed visually before your eyes and easily generated in several clicks.
In addition to Default Visual Composer shortcodes, Motor comes with 13 specific shortcodes. To generate the shortcodes, go to Backend Editor, click the “+” icon to add shortcode.
Navigate to Motor Shortcodes to find a shortcode you want to use. You can add those shortcode to any pages or posts for your own use.
There are 16 Motor Shortcodes on Motor. Below are list 13 shortcodes and their artributes:
Yolo Single Product
Use this shortcode to show single product on your page. This shortcode is used on Homepage.
Detail option:
Layout Style:- select - Choose layout style for single product shortcode including Style 1, Style 2, Style 3, Style 4.
If you choose Layout Style: Style 2, you need to select Image Style (left/right) for single product.
Style 1
Style 2
Action Button Tooltip: - yes/no - Turn On/Off action button tooltip for single product shortcode.
Disable Action Button: - select - Choose action buttons which you don't want to display. Check Select All box to disable all action button.
Input product ID or product SKU or product title to see suggestions: - select - Choose single product which will be display on single product shortcode.
Extra Class Name: - string - Enter the class name if you want to customize this shortcode.
CSS Animation: - Select - Choose type of animation when viewing on browsers.
Yolo Product
Use this shorcode to display products as Grid or Masonry style.
Product Ordering: - select - Choose product ordering for product page including Publish Date, Random, Alphabetic, Popularity, Rate and Price.
Sorting: - select - Choose product sorting for product page including Ascending or Descending
Extra Class name: - string - Enter class name if you want to custom this shortcode.
CSS Animation: - select - Select type of animation when viewing on browsers.
Yolo Product Slider
Use this shortcode to show product items as slider on your site.
Detail option:
Source: - select - Choose the source to display product items on Yolo Product Slider shortcode.
You can choose product items form Category or Product IDs.
Number: -number - Enter the number to count.
Product Per slide: - select - Chooser the number of products which will be displayed on per slider.
AutoPlay: - select - Turn On/Off auto play feature for product.
Slide Duration: - number - Enter the time duration for your slider.
Single Product Style: - select - Choose layout style for single product item. There are 5 styles for your choice.
Disable Action Button: - number - Enter the number of products to display on product slider.
Number of Products: - select - Choose action button to disable. Check Select All to disable all action buttons.
Product Ordering: - select - You can arrange your products following different order criteria including Publish Date, Random, Alphabetic, Popularity, Rate and Price.
Sorting: - select - Choose product sorting for product slider.
Extra Class name: - string - Enter class name to customize this shortcode.
CSS Animation: - select - Choose type of animation when viewing browsers.
Animation Duration: - number - Enter the animation duration for your slider. Leave blank to use the default.
Animation Delay: - number - Enter the animation delay for your slider. Leave blank to use the default.
Yolo Product List
Use this shortcode to show list products on your page.
Detail option:
Source: - select - Choose the source which product items will be displayed on Product List.
If you choose Source: From Category, you need select categories from Select Category option.
If choose Source:From Product IDs, you need enter your product IDs on Select Product option.
Single Product Style - select - Select style for product item including Style 1 and Style 2
Disable Action Button: -select - Select action button which you want to disable on product item. Check Select All to disable all buttons.
Pagination: - select - Choose pagination type including Load More Button, Page Number and Infinite Scrolling.
Pagination alignment: - select - Choose pagination alignment including Center, Left and Right.
Products Per Page: -number - the number of products allow how many products to show on one page.
Products Ordering: -select - Choose product ordering which will help you arrange your products following different order criteria
including Publish Date, Random, Alphabetic, Popularity, Rate and Price.
Sorting: -select - Choose the sorting for product list.
Extra Class Name: -number - the number of products allow how many products to show on one page.
Yolo Blog
Yolo Blog shortcode will help you to show the list blog post on your page.
Detail option:
Blog Style: - select - Choose layout style for blog page including List (Lage Image),List(Medium Image), Grid and Masonry.
If you choose Blog Style: Grid/ Masonry Columns option will be appeared, you can choose the number of columns for post.
List (Large Image)
List(Medium Image)
Grid
Masonry
Narrow Category: - select - Select categories of which post items are displayed on blog page.
Total items: - Enter the number of posts which will be displayed on blog page.
Pagination Style :- Select - Choose pagitation style including Shơ all (posts), Default, Load More and Infinity Scroll.
Post per page: - number - You can choose number of posts that will be displayed per page.
Hide Author/Date/ Category/ Comment/ Read More: - check - Check yes to hide author, date, category, comment and read more of post.
Excerpt Length:The number of characters displayed on post section.
Extra class name:Enter class name if you want to customize this shortcode.
Yolo Testimonial
Use this shortcode to show testimonial on About Us page.
Detail option:
Layout Style: - select - Select style layout for Testimonial shortcode. There are 4 layout styles which you can choose.
Carousel
Carousel 2
Slider Pro
Slider Pro 2
Source: - select - Select the source that testimonial items will be displayed. You can choose to get from categories or testimonial IDs.
Order Post Date By: - select - Choose the sorting for testimonial items including Descending and Ascending.
Excerpt length: - number - The number of characters displayed on testimonial item.
Auto Play - Yes/No - Turn On/Off auto next for testimonial.
Slider Duration: - number - Enter the slider duration here.
Extra Class Name: Enter extra class name if you want to custom this shortcode.
CSS Animation: - select- Select types of animation when viewing on browsers.
Yolo Recent News
Use this shortcode to display recent post on your page.
Detail option:
Choose Layout: - select - Select layout style for Yolo Recent News shortcode including Home V1, Home V2, Home V3, Home V4, Home V6.
Home V1
Home V2
Home V3
Home V4
Home V6
Select Categories: - select - Select categories to display posts on your page.
Posts Per Page: - number - Select the number of posts per page.
Excerpt Length: - number - The number of characters displays on post description.
Extra class name: - string - Enter extra class to customize this shortcode.
Yolo CountDown
Use this shortcode if you want to show count down on your website.
Detail option:
Select Datetime: - select - Select Date time from the calender.
Choose layout: - select - Select layout style for countdown including Circle and Number.
Circle
Number
Extra class name: - string - Enter extra class to customize this shortcode.
CSS Animation: - select - Select type of animation when viewing on browsers.
Yolo Banner
Use this shortcode to display banner on front page.
Detail option:
Layout Style: - select - Select layout style for banner shortcode. There are 8 layout styles which you can choose.
Title - string - Enter the title for banner
Title Style: - select - Select title style including for banner including Top and Bottom.
Link: - select - the URL is redirected when visitors click on the banner.
Step 2: Open PoEdit and open the .po file of your preferred language in PoEdit and
search your line you want to change. To do this, select the Edit button > Find
option.
Step 3: In the Search Window, type the text string you are looking for. Once it is
selected, replace the text in the Translation text area in the lower part of the window with your
preferred translation.
Step 4: If you’d like to edit another text string, just repeat Steps 1 to 2.
Step 5: Click “Save” to save configuration. The .mo
file will be auto created.
Step 6: The final step, you need to rename of .mo file with Code
Name of your language. Please see the language code list HERE
For example de_DE.mo for German – Deutsche
Step 7: Navigate to Settings > General > Site
Language to select your language.
EXTRA
Come together with Motor, these plugins are recommended to install and activate for flexible use. Below are
the source for documentation and support of each plugins.
When you come to this section, we hope that you found all the information provided in this documentation helpful and you have finished installing and polishing your site as what you have imagined of.
After reading carefully this guide, if you still need help, don’t hesitate to contact us at Yolo Support Center You will be asked to create an account if you are new to us and enter purchase code to post a topic for support.
To get your purchase code, please login to your Themeforest account, navigate to “Downloads”, click the “Download” button on the left of our theme, choose “License Certificate” to download the license file where you can find the purchase code.
Please be noted to post a topic with your issues be clearly clarified. It is recommended you send us together with link of your site and your admin account.
These will help to save time for both of us. Finally, please be patient.
It will take us some time to check all the topics and we will solve topics from older to newest.
Hope you enjoy using Motor! Thank you for choosing our theme.
