Vidio Document
Version: 1.2.4
Created by: HaruTheme
1. Introduction

Thank you for purchasing Vidio – Multipurpose Video Manager WordPress theme. If you are looking for a beautiful WordPress theme for manage your video website about news, fashion, game, technology,… Vidio is right choose for you! This theme is also suitable for you to showcase what you do, allow you manage your customer and their videos, to present your products,… and much more. With special functions from Haru Vidi – Video WordPress plugin you can build your attractive video websites as you want. And with super clean, elegant and unique design your site will more attractive with customer and perfect to promote yourself, your own work.

Before getting started, please be sure to always check out documentation files. We outline all kinds of good information, and provide you with all the details you need know to use Vidio theme.

If you are unable to find your answer in the documentation, please contact our Support section on HaruTheme Forum or directly to our ThemeForest account via message.

In this user guide you will find all required information to get your site up and running: starting from theme installation and setup, to usage of different post types, page templates and shortcodes.

Most JavaScript enabled Browsers will make them work with no issues. They are designed and optimized for desktops, tablets and smartphones.

Disclaimer

Please note that we do not give support or any questions related on how to install and maintain WordPress. For any faulty installation that may cause your website or our theme malfunction you should refer to WordPress support forum. Alternatively you can get help from your web hosting.

If you are satisfied with our Vidio WordPress theme, please take a moment to rate 5 stars and leave some sentences for review, it means a lot to us.

Thank you!

HaruTheme

2. Getting Started

Have a special notice before you read other sections of document. Our theme use Haru Vidi – Video Manager WordPress plugin video functions. So all shortcode video you need go to Admin Dashboard Menu -> Shortcode to manage. ( To help administrator of  Video WordPress site easy show what they want. We created Shortcode Generate posttype for easy setup with step to step of options  – Vidi document)

More detail you can read Vidi – Video Manager WordPress plugin document here: Vidi Document

Step 1: Go to Shortcode -> Add New to add new shortcode

Step 2:  After set options of Shortcode you need click Save to Generate the code of Shortcode. You can copy this code and use at anywhere.

Please note with some shortcode use at Position have small width. You can add Extra class is style-sidebar

Here is current list of shortcodes have this style:

haru_video_top

haru_channel_top

After Create shortcode you will have a list of shortcode like this:

Step 3: Example use Text Block Shortcode in WP Bakery Page Builder

2.1. Welcome

Hi,

It’s awesome to know that you decided to purchase VidioNo doubts, you will join our happy customers community in seconds!
Won’t make any mistake here, because our detailed documentation will guide you. Please be sure to check it out before getting started. We have outlined all kinds of necessary information and keep them easy-to-read-and-follow. Our themes are dedicated to WordPress platform, so we assume that you have already WordPress installed and ready to go.

2.1.2. Wordpress Knowledge Base

To install Vidio – your powerful Video Manager WordPress theme, you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information:

2.1.3. Theme Requirements

To use Vidio, you must be running WordPress 5.0 or higher, PHP 5.6 or higher, and MySQL 5.6 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

  • Check to ensure that your web host has the minimum requirements to run WordPress.
  • Always make sure they are running the latest version of WordPress.
  • You can download the latest release of WordPress from official WordPress website.
  • Always create secure passwords for FTP and Database.

Hosting is more secure when PHP applications, like WordPress, are running using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using PHP. Just ask your potential host if they run PHP or something similar.

Recommended PHP Configuration Limits

Many issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time: 360
  • max_input_time: 360
  • max_input_vars: 4000
  • memory_limit: 256M
  • post_max_size: 128M
  • upload_max_filesize: 128M
  • output_buffering: 4096

Here is topic tutorial to help you change PHP Limits: http://harutheme.com/forums/topic/how-to-change-php-settings-of-wordpress/

3. Installation

After purchasing Vidio, please download the package from ThemeForest. In the package, you can find things like documentation, licensezipped file with theme files and folder with theme files. Please unpack the whole package after downloading it from ThemeForest.

Here maybe is common error with package: Theme is missing the style.css stylesheet error

3.1. Install Theme via WordPress

  • Step 1: Navigate to Appearance >> Themes
  • Step 2: Click Add New, then click Upload Theme >> Choose File
  • Step 3: Navigate the .zip file on your computer and click “Install Now”
  • Step 4: Activate the newly installed theme by going to Appearance >> Themes and clicking the Activate button.
  • Step 5: IMPORTANT! After theme installation, at the top, you have a box with information about required and optional plugins. To install them and activate, please navigate to Appearance >> Install Plugins section.

Note: If you have any problem when installing vidio.zip file via WordPress upload please note our Theme Requirements section above.

3.2. Install Theme via FTP Upload

SKIP THIS STEP if you have already successfully uploaded Vidio theme via WordPress

  • Step 1: BACKUP YOUR FILES! Should do it before set up anything, this is always the safest.
  • Step 2: Unzip the vidio.zip file (usually is Extract Here if you use WinZip or 7Zip).
  • Step 3:  Login into your hosting server via an FTP client tool (We recommended to use FileZilla).
  • Step 4: Upload Vidio Theme folder into wp-content/ themes folder on your server.
  • Step 5: Go to Appearance >> Themes and choose new theme has just installed and clicking the Activate button to active.
  • Step 6: Once your theme is installed and active you will get a prompt at the top of your Dashboard that will ask you to install Vidio‘s plugins..

(More details you can see it in topic update theme manual: https://harutheme.com/forums/topic/manual-update-wordpress-theme-via-ftp/)

3.3. Install Required Plugins

After install and active theme you need install some required plugins to make Vidio working best:

 

  • Contact Form 7: Vidio is fully compatible with Contact Form 7, the free form plugin recommended to create a nice form for your site.
  • Haru Vidi: Video WordPress plugin with many functions to help you create any video website as you want .
  • Paid Memberships Pro: the best free Paid Membership WordPress plugin
  • BuddyPress: the community WordPress plugin
  • Youzer: Buddypress Community & WordPress User Profile Plugin
  • myCred: Points, Rewards, Gamification, Ranks, Badges & Loyalty Plugin
  • WP Bakery Page Builder: The popular drag and drop page builder with an intuitive interface to build your content at ease.
  • Less & SCSS PHP Compilers: A plugin to help function build SCSS to CSS in our themes works.
  • Meta Box: Create custom meta boxes and custom fields for any post type in WordPress.
  • Haru Vidio Core: The Haru Vidio Core plugin.
  • Redux Framework: Redux is a simple, truly extensible options framework for WordPress themes and plugins.

 

3.4. One Click Install Demo Data

With Vidio, you can build a functioning website just by clicking a button and install our demo data.

  • Step 1: Go to Theme Options >> Demo Importer section
  • Step 2: Choose what demo you want to import then click Import Demo button

 

If you can’t install Demo Data please read more about section Theme Requirement above.

Or you can follow one of these topics below:

https://harutheme.com/forums/topic/how-to-import-demo-data-automatic-in-harutheme/

or

https://harutheme.com/forums/topic/import-demo-manual-wordpress-theme/

In Special case if your site using HTTPS, it can cause some images missing when import. You can follow this to turn off HTTPS: https://harutheme.com/forums/topic/how-to-turn-off-https-in-wordpress/

Here is video tutorial to help you Demo data manual: https://www.youtube.com/watch?v=M08vHyzXMOM

3.5. Update using Envato Toolkit

This is Auto Update method

Some important notices before updating:

We recommend you have a current backup of your site including wp-content folder, wp-config.php file and .htaccess file and a copy of  WordPress database. If you don’t know how to take action, you can use several plugins such as UpDraft Plus and WordPress Backup Buddy or Duplicator (recommended). Moreover, you should backup HaruTheme’s theme options in Theme Options >> Import/Export.

Please follow these steps to update automatically this theme:

  • Step 1 – You need to generate an API key to link your WordPress site to your ThemeForest account. Login to ThemeForest, go to your dashboard and click on “Settings.” The API Keys screen allows you to generate a free API key.
  • Step 2 Download Envato ToolKit, install and activate this plugin. A new menu item, “Envato Toolkit”, will appear in the admin sidebar. Click on the sidebar link and enter your marketplace username and secret API key. Click “Save Settings.” All of your theme purchases will now appear on this page after it refreshes.
  • Step 3 – The plugin will now alert you to theme updates – so long as you check the toolkit settings regularly. Click on “install automatically” beside each of your themes to automatically update them. The toolkit settings page also allows you to install themes that you haven’t already uploaded to your site, delete ones you don’t use and view version details. You can also set up theme backups.
  • Important! Always Use a Child Theme Updating your themes shouldn’t affect any customization to your website as long as you’re using a child theme.

Also you can use a plugin from Envato to Update theme:

https://envato.com/market-plugin/

More detail you can see in this topic tutorial: https://harutheme.com/forums/topic/how-to-update-wordpress-theme/

3.6. Manual Update

Following these steps to update your theme:

  • Step 1 – Log into your ThemeForest account and navigate to your downloads tab. Find the “Vidio” theme purchase.
  • Step 2 – Click the Download button next to it and choose to download the Installable WordPress file only which is just the WordPress file, or choose the All files & documentation which is the entire package that contains everything.
  • Step 3: Update theme via WordPress upload method above or via FTP Client tool.

Here is topic to help you update theme manual via FTP: https://harutheme.com/forums/topic/manual-update-wordpress-theme-via-ftp/

3.7. WordPress Configuration

You need to configure WordPress. You can adjust WordPress settings as follows:

Step 1 – You can set Site Title, Tagline in Settings >> General.

Step 2 – You can set Blog pages show at most and Front Page displays  in Settings >> Reading.

Step 3 – You can set Discussion settings in Settings >> Discussion. You can set comment options from here.

Step 4 – You can change Image sizes in Settings >> Media. You can set image size for blog archive, single blog post and image for widget sidebar.

Step 5 – You should ensure that a non-default permalink setting is selected, e.g. Day and name in Settings >> Permalinks.

 

4. Theme Options

By clicking on the “Theme Options” menu, you’ll be able to change all template specific settings. To Understand how Options in our theme work please follow this topic tutorial: https://harutheme.com/forums/topic/why-theme-options-doesnt-apply-changes/

4.1. General Setting

General Settings” tab is divided into a few sections which allows you to configure general settings for pages as Layout Style, Page Preloader…

General Setting
  • Layout Style: Set layout style for your website with 3 options Boxed, Wide and Float.
  • Page Preloader: Select Page Preloader from drop down list. Leave empty if you don’t want to use this feature.
  • Back To Top: Turn On/Off back to top button.
  • Custom CSS (From WordPress version 4.7+ you can add Custom CSS in Themes » Customize » Additional CSS)
  • Custom JS

4.2. Header Options

Configure Header Tab is the most important in Theme Options. Please read carefully description below:

For easy customize Header you can see video tutorial from here: https://www.youtube.com/watch?v=4Zi2MwXSm98

Header Layout

  • You can choose one from pre-made header.

Note: If you use header sidebar style please follow this topic tutorial: http://harutheme.com/forums/topic/how-to-set-header-sidebar-on-all-pages-in-harutheme/

Top Header

  • Top Header: Turn Top header On/Off.
  • Top Header layout width: Set Top bar layout width with 2 options Container or Full Width.
  • Top Header Layout: Set top header layout with 2 options 1 Colum or 2 Columns.
  • Top Left Sidebar: Set sidebar for Top Left Sidebar.
  • Top Right Sidebar: Set sidebar for Top Right Sidebar.

For easy customize Top header you can see video tutorial here: https://www.youtube.com/watch?v=S98sbmibziE

Header Navigation

  • Mega menu Animation: Set animation for Mega Menu. We build our Mega Menu animation base on Animate.css
  • Header navigation Layout: Set layout style for Header navigation with 2 options Container or Full Width.
  • Header On Slideshow: Turn header on Slideshow On/Off.
  • Header Under Slideshow: Turn header under Slideshow On/Off.
  • Header Sticky: Enable/Disable header sticky.
  • Header Sticky Skin: Set header sticky skin with 2 options Dark or Light.

Header Elements

Header Elements tab allows you to configure header options… You can easy change what you want to show on Header by turn ON Head Customize X (X is Left, Right or Navigation). Please note: Left is left of the Logo and Right is right of the Logo. 

Choose what you want to show by drag and drop from Disable list to Enable list.

Header Elements Navigation

  • Header Elements Navigation: Change what you want to show after Navigation.
  • Custom Social Profiles: Set custom social profile network. You can choose many as you want.
  • Custom Text Content: You can use HTML for custom text.

HeaderElements Left

  • Header Elements Left: Change what you want to show at the left of Logo.
  • Custom Social Profiles: Set custom social profile network. You can choose many as you want.
  • Custom Text Content: You can use HTML for custom text.

Header Elements Right

  • Header Elements Right: Change what you want to show at the right of Logo.
  • Custom Social Profiles: Set custom social profile network. You can choose many as you want.
  • Custom Text Content: You can use HTML for custom text.

Mobile Header

For easy customize Mobile Header and Mobile Menu you can see video tutorial here: https://www.youtube.com/watch?v=yQH9ksCRJmU

  • Header Layout: Set mobile header layout with 3 pre-made options.
  • Menu Drop Type: Set mobile menu style with 2 options Dropdown Menu or Fly Menu.
  • Mobile Logo: Set logo image for Mobile devices.
  • Top Bar: Turn top bar On/Off.
  • Sticky Mobile Header: Turn sticky mobile menu On/Off.

 

In this tab, you can set Footer for your page. Please create Footer Post type first then use Visual Composer to build footer. If you can’t use Visual Composer for Footer post type please change Roles in WP Bakery settings.

For easy customize Footer you can see video tutorial from here: https://www.youtube.com/watch?v=LtQ0dd0h3L0

You also can add Widget to Footer Block as this video tutorial: https://www.youtube.com/watch?v=WpaCMqY-kuY

Here is topic tutorial to help yo Manage Footer: http://harutheme.com/forums/topic/how-to-manage-footer-in-harutheme/

  • Layout: Set footer layout with 2 options Full width or Container.
  • Footer Block: Set footer block has created by Footer Block Post type.

 

 

4.4. Logo & Favicon

For easy customize Logo you can see video tutorial from here: https://www.youtube.com/watch?v=o9xolzwKPfE

In Logo & Favicon tab, you can change website logo, sticky logo and custom favicon very easy.

  • Logo: Set logo image.
  • Retina Logo: Set logo for Retina screen
  • Sticky Logo: Set logo sticky image. If you not set this option, sticky logo with use “Default” Logo image
  • Custom Favicon: Set custom favicon image. The best is use an image have size 16 x 16 (pixel).

Please note when you change Logo in Theme Options but it doesn’t change on Homepage please see in this topic: https://harutheme.com/forums/topic/why-theme-options-doesnt-apply-changes/

4.5. Color Scheme

Color Scheme Tab allows you to configure Primary color, Secondary color, Text color, Heading color and Link color for your website. Please note to make this option working fine, may be you need change some settings in php.ini of your hosting server.

Please note our theme use Haru Vidi – Video Manager WordPress plugin so you also need go to Vidi Settings -> Appearance to change Color:

For easy customize Color Scheme you can see video tutorial from here: https://www.youtube.com/watch?v=dfTemCtm0N4

  • Primary Color: Set Primary color.
  • Secondary Color: Set Secondary color.
  • Text Color: Set text color.
  • Link Color: Set Link color.
  • Heading Color: Set color for heading.

SCSS Compiler

If you want to custom color or CSS you must enable this option. To make this option work you need install plugin Less & scss PHP Compilers.

Please note if you changed Color Scheme but it still doesn’t change you need to turn On SCSS Compiler option above or clear cache of your site.

4.6. Typography

Typography tab allows you set Fonts for body, menu, page title, page sub title and Heading from Google Fonts. Have about 600 fonts. If you want to use Custom Fonts upload please follow this topic: https://harutheme.com/forums/topic/how-to-use-custom-fonts-in-harutheme/

Please note if you changed Typography but at some section it still doesn’t change you need to turn On SCSS Compiler option above or clear cache of your site.

4.7. WordPress Setting

Page Setting tab allow you to configure settings for your Pages.

  • Layout: Set page layout with 2 options Full Width or Container.
  • Sidebar: Set sidebar style with 3 options Left sidebar, Right sidebar or No Sidebar.

Pages Title Setting

  • Show Page Title: Set page title On/Off.
  • Page Title Layout: Set page title layout with 2 options: Full Width or Container.
  • Page Title Parallax: Set page title parallax On/Off .
  • Page Title Background: Select a background image for page title.
  • Breadcrumbs: Turn breadcrumbs of Page On/Off .

 

Archive Setting tab allow you configure archive blog page which display all your posts.

Archive Blog

  • Layout: Set page layout for archive blog page with 2 options Full Width or Container or.
  • Sidebar: Set sidebar style for archive page with 3 options Left, Right, No-Sidebar, Left or Right sidebar.
  • Right Sidebar or Left Sidebar: Set sidebar for Right sidebar or Left sidebar.
  • Archive Display Type: Set Archive Display Type for archive page with 4 options Large Image, Medium Image, Grid or Masonry.
  • Paging Style: Set archive paging style with 3 options Default, Load More or Infinity Scroll.
  • Length Of Excerpt: Set length of the Excerpt.

Archive Title Setting

  • Show Archive Title: Turn On/Off archive blog title.
  • Archive Title Layout: Set page title layout for archive page with 2 options: Full Width or Container.
  • Archive Title Parallax: Turn On/Off page title parallax for archive page.
  • Archive Title Background: Set a background image for archive blog title.
  • Breadcrumbs: Turn breadcrumbs  On/Off.

 

Single Setting tab allows you to configure single blog page (single post).

Single Blog

  • Layout: Set page layout for single blog with 2 options Full Width or Container.
  • Sidebar: Set sidebar style with 3 options No Sidebar, Left or Right sidebar.
  • Left or Right Sidebar: Set sidebar for Right sidebar or Left sidebar.
  • Show Post Navigation: Turn post navigation On/Off  (Go to next or preview post).
  • Show Author Info: Turn author information On/Off.

Single Blog Title Setting

  • Show Single Blog Title: Turn On/Off single blog title.
  • Single Blog Title Layout: Set page title layout for single post with 2 options: Full Width or Container.
  • Single Blog Title Background: Set a background image for single blog title.
  • Single Blog Title Parallax: Turn On/Off page title parallax for single blog.
  • Breadcrumbs: Turn breadcrumbs  On/Off.

4.8. Social Settings

Social Settings tab allows you to show media social network to make connect your website with your social network. You should insert link to your social network.

4.9. Newsletter Popup

Newsletter Popup tab allows you create a Newsletter promo Popup if you want to show something special to customer as Sale Off,…

  • Show Popup: Set popup On/Off.
  • Popup Width: Set the width of popup.
  • Popup Height: Set the height of popup.
  • Popup Effect: Set popup effect.
  • Popup Delay: Set delay time of popup (caculate by miliseconds).
  • Popup Content: Set the content for popup. You can insert shortcode here. Please not you should change Editor mode to Text before Save.
  • Popup Background: Set background image for popup.

4.10. Woocommerce

From here you can set some base functions of Woocommerce. Woocommerce tab have some sub sections allows you to set Product display, archive product page (Shop page) and single product page.

  • Sale Badge Mode: you can choose display as SALE text or percent.
  • Quick View Button: Enable/Disable Quick View button
  • Add To Wishlist Button: Enable/Disable Wishlist button
  • Add To Compare Button: Enable/DisableAdd To Compare button

 

Archive Product (Shop)

Archive Product tab allow you change settings for Shop page.

  • Product Per Page: Set products per page for archive page.
  • Product Display Columns: Choose number of columns to display on shop/categories pages.

Layout Options

  • Archive Product layout: Set Archive page layout with 2 options Full Width or Container.
  • Archive Product Style: Set style for archive product page. Default is standard shop page of Woocommerce and Ajax is our custom shop page with ajax filter.
  • Archive Product Sidebar: Set archive product sidebar None, Left or Right.
  • Archive Product Left or Right Sidebar: Set left or right sidebar for archive product page.
  • Show Categories, Show Filters, Show Search: these options are used when Archive Product Style is Ajax

Page Title Options

  • Archive Title: Turn archive title for shop page On/Off.
  • Archive Product Layout: Set layout style for archive product.
  • Archive Product Title Parallax: Turn archive product title parallax On/Off.
  • Archive Product Title Background: Set background image for archive product title.
  • Breadcrumbs in Archive Product: Turn breadcrumbs in archive product On/Off.

 

Single Product

Single Product tab allow you change settings for Single product page.

Layout Options

  • Single Product Layout: Set Single product layout with 2 optiosn Full Width or Container.
  • Single Product Sidebar: Set sidebar for single product page.

Page Title Options

  • Single Title: Turn title for single product page On/Off.
  • Single Product Title Layout: Set single product title layout with 2 options Full Width or Container.
  • Single Product Title Parallax: Turn single product title parallax On/Off.
  • Single Product Title Background: Set background image for single product title.
  • Breadcrumbs in Single Product: Turn breadcrumbs in single product On/Off.

Related Product Options

  • Related Product Number: Set number of related product you want to show on single product page.
  • Related Product Display Columns: Set number of columns to display related product.

4.11. Demo Importer

As describe above. You can get our demo by one-click demo install. Please read more on our forum to make any working fine.

4.12. Maintenance Mode

Maintenance Mode tab allows you close website for maintenance,…

  • Maintenance Mode: Set Maintenance mode On/Off.
  • Maintenance title: Set title of maintenance page.
  • Maintenance Background: Set background of maintenance page.
  • Online Time: Our site will auto open after this time.
  • Timezone: Set timezone of your site.
  • Maintenance social profiles: Set social profiles of maintenance page.

4.13. Import /Export

In this tab, you can import or export Theme Options data to backup or use on other website.

5. Menu

WordPress menu is very clean and easy to use. However you need to know some basic settings.

Assign Menu
  • Go to Appearance >> Menus then select menu you want to Edit or you can create new menu.
  • Find Menu Settings at the bottom of page the select location for menu.

Graneon supports 5+ menu location:

  • Primary Menu: the main menu use in the header.
  • Vertical Menu: the vertical menu use for Mega Shop.
  • Mobile Menu: the menu use to display on mobile device.
  • Left Menu: the menu use to display on left Logo of Header
  • Right Menu: the menu use to display on right Logo of Header

5.1. How to create Menu

Our theme has support mega menu system.  The first you need to know about create a new menu.

  • Step 1: Go to Appearance >> Menus.
  • Step 2: Click Create A New Menu link. Enter menu name then click Create Menu.
  • Step 3: To add menu item, select what you want to add to menu on left-side then click Add to Menu.
  • Step 4: To create a simple dropdown menu you can drag and drop menu item. With sub menu you can read more description below to know about menu item level.
  • Step 5: After setting menu, you go bottom of the page and assign menu Location then Save Menu.

5.2. Mega Menu Settings

Our theme supports  Mega Menu with 2 sub-menu styles: Column and Tab. To create Mega Menu, you click on menu item to open Menu Item level 0 >> Check Enable MegaMenu to use Mega Menu.

For easy manage Mega Menu you can see video tutorial from here: https://www.youtube.com/watch?v=Z7J8vmDPNFE

Column Style

Column Style display menu items with columns layout.

Column Style use 3 menu item levels. You also can set icon for menu item and sub label.

Step 1: Click on a Level 0 menu item and check on Enable MegaMenu.

Step 2: Set Megamenu style is Column and set MegaMenu columns for menu item.

We have some extra option as Background Image for menu item or Sub menu full width to use sub menu full width. Hide Mega menu heading to hide Mega Menu heading.

Tab Style

With Tab Style you can show many content from widget.

Tab style use 2 menu item levels. On menu level 0, select Mega Menu style: Tab and select MegaMenu Columns for your menu.

Step 1: Click on a Level 0 menu item and check on Enable MegaMenu.

Step 2: Set Megamenu style is Tab and set MegaMenu columns for menu item.

Step 3: Click on menu level 1 to open then select Mega Menu Widget Area. You can go to Appearance >> Widgets to create widget for menu. We added function add custom sidebar and you can create new sidebar very easy.

Similar above, we have some extra option as Background Image for menu item or Sub menu full width to use sub menu full width. Hide Mega menu heading to hide Mega Menu heading.

6. Page

6.1. How to create New Page

  • Step 1: Navigate to Pages in your admin sidebar and click Add New option.
  • Step 2: Input a new name for your page, then find the Page Attributes box on right side.
  • Step 3: In Page Attributes box, set Page Parent in dropdown list.
  • Step 4: Scroll down to Page Options to make the page you want then click Publish.

6.2. Page Options

Our theme have many page options to help you display almost what you want. Please note if you don’t set anything (Default option) in Page Options it will inherit from Theme Options.

Layout

  • Layout Style: Set layout style for page with 4 options Default, Boxed, Wide or Float.
  • Page Layout: Set page layout (with header you can set in header tab settings) with 3 options Default, Full Width or Container.
  • Page Sidebar: Set sidebar style for page.
  • Left Sidebar: Set left sidebar for page if sidebar style is Left Sidebar.
  • Right Sidebar: Set right sidebar for page if sidebar style is Right Sidebar.
  • Page Class Extra: Enter page class with special page.
Top Header

  • Show/Hide Top Header: Turn top bar of page On/Off .
  • Top bar layout width: Set width of page top bar with 3 options Default, Container or Full width.
  • Top Bar Layout: Set top bar layout of page.
  • Top Left Sidebar: Set sidebar for Top Left Sidebar.
  • Top Right Sidebar: Set sidebar for Top Right Sidebar.
Logo

  • Logo Image: Set logo of Page.
  • Logo Retina Image: Set logo Retina of Page.
  • Sticky Logo Image: set sticky logo of Page
Header

You can override page header customize for page that mean pages can have different header. Similar options in Theme Options you have the same page options.

Page Header Elements

You can override page header customize for page. Similar options in Theme Options you have the same page options.

Header Mobile

You can override page header mobile for page. Similar options in Theme Options you have the same page options.

 

7. Blog Post

7.1. How to create New Post

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

See below for information on how to create blog posts.:

  • Step 1: Navigate to Posts >> Add New in your WordPress admin sidebar.
  • Step 2: Create a title, and insert your post content in the editing field.
  • Step 3: Add Categories from the right side. To assign it to the post, check the box next to the Category name.
  • Step 4: Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.
  • Step 5: For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.
  • Step 6: Once you are finished, click Publish to save the post.

Here is the screenshot that shows the various areas of the blog post page.

 

7.2. Post Format

Our theme supports 7 post formats that allows you to choose the specific format for your blog. You can choose different types of post to make your blog be more interesting. Follow below steps to see the description of Post Formats and Global setting of Post.

7.3. Page Options

Same as Page Options box of Page, Post have similar Page Options. You can read Page Options section above.

8. Custom Post Type

Manage Custom Post Type  is also important to use our theme.

8.1. Team Members

Create New Team Member
  • Step 1: Navigate to Team members >> Add New in your WordPress admin sidebar
  • Step 2: Enter title and description for team member item.
  • Step 3: Choose TeamMember Categories and Featured Image of new team member on the right side.
  • Step 4: Go to Team member information box and fill out information.
  • Step 5: Once you are finished, click Publish to save team member item.
Team Member Setting

  • Name: Enter name of member.
  • Position: Enter position of member.
  • Social Profiles: Enter the social profile URLs of member

Footer Blocks custom post type allow you use Visual Composer to make footer. Please note may be you need go to Visual Composer >> Role Manager. Post type option you must select Custom and checked to haru_footer post type to get Footer can build by Visual Composer.

Create New Footer Blocks
  • Step 1: Navigate to Footer Blocks >> Add New in your WordPress admin sidebar
  • Step 2: Building footer blocks by using Visual Composer shortcode.
  • Step 3: Once you are finished, click Publish to save footer block item.

You can follow this video tutorial to help you manage Footer more easier: https://www.youtube.com/watch?v=LtQ0dd0h3L0

8.3. Testimonials

Testimonial

9. Shortcode

Our theme uses the most powerful’s page builder to help users create sites with ease.

Add content using Visual Composer. Choose Backend or FrontEnd editor.

We made more than 10+ shortcode to help you make your page:

9.1. Recent News

This shortcode will help you display latest post with multi layout.

9.2. Banner

This shortcode will help you display banner with many beautiful effects.

9.3. Testimonial

This shortcode will help you display Client testimonials

9.4. Countdown

This shortcode will help you display countdown timer.

9.5. Clients

This shortcode will help you display client logo showcase.

9.6. Single Product

This shortcode will help you display single product with special layout.

9.7. Products

This shortcode will help you display product with layout grid or masonry.

9.8. Products Slider

This shortcode will help you display product with layout Slider.

9.9. Products List

This shortcode will help you display products with list layout.

9.10. Products Recent Viewed

This shortcode will help you display recent viewed products.

9.11. Products Top Rated

This shortcode will help you display Top Rated Products.

9.12. Products Top Sale

This shortcode will help you display top Sale products.

9.13. Products top Seller

This shortcode will help you display Product top seller.

9.14. Products Creative

This shortcode will help you display products with creative layout.

9.15. Products Ajax Category

This shortcode will help you display product in each category with Ajax style

9.16. Google Maps

This shortcode will help you display your address on google map with multi style.

9.17. Widget

This shortcode will help you display widget easy at where you want as Footer,…

9.18. Counter

This shortcode will help you display statistic counter.

This shortcode will help you display images gallery with multi layout.

9.20. Teammember

This shortcode will help you display your team member.

9.21. Icon Box

This shortcode will help you display icon box with information.

This shortcode will help you display Footer contact information as address, phone number,…

This shortcode will help you display quick link in Footer.

This shortcode will help you display footer images gallery.

This shortcode will help you display Footer social networks.

10. WordPress Translation

Our theme is a WPML – compatible and multi language ready theme. We suggest 2 ways to translate our theme.

  1. Use Loco Translate plugin
  2. Manual translate using POEdit

Use Loco Translate you can follow this topic tutorial: https://harutheme.com/forums/topic/how-to-translate-wordpress-theme-or-plugin/

Step and step to translate we will have a post on forum asap.

11. Automatic Import Videos

12. Theme Support

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free to us via email harutheme@gmail.com or admin@harutheme.com. Or create topic here: https://harutheme.com. Thanks so much.

View more products from HaruTheme