Copyright G5Theme 2016

ORION - A PROFESSIONAL MULTIPURPOSE WORDPRESS THEME

    WORDPRESS VERSION

    ORION is an new item from G5THEME that could brings a revolution for creating websites. ORION is a stylish and stunning, well-structured and easy to use, creative and professional, readily responsive WordPress multipurpose website theme. With features include the totally new, you will discover as you browse this manual. A website are been very easy to implement by ORION theme. Whoever you are, whatever business you are doing, ORION is the right one for you! Are you ready for the real quality? Let 's discover it now!

  • Created: 01/12/2016
  • Latest update: 10/12/2016
  • By: G5Theme
  • http://www.themeforest.net/user/G5Theme
  • Email: g5plus@outlook.com
  • HelpDesk: http://support.g5plus.net

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free to contact us via email. Thanks so much!

Files Included

  • The theme zip file g5plus-orion.zip (included Visual Composer and Revolution Slider plugins)
  • Child theme for easier customize in g5plus-orion-child.zip
  • Document in Documentation_Orion.zip

Struct look like:

dashboard

Code navigation

ORION includes 7 other folders. Please see explanation below for more details:

  • assets: Store less, js, resource default and another plugin for theme. Besides include file for demo data.
  • core: This folder store core file to add action for header, footer, woocommerce, function breadcrumb, filter for search.
  • inc: Store all functions
  • languages: Store .pot for translate to another language
  • templates: Store templates for header, footer, archive, comments, breadcrumb
  • vc_templates: Store template that override visual composer
  • woocommerce: Store template that override for woocommerce

System Requires

To use ORION, you must be running WordPress 3.9 or higher, PHP5.4 or higher, and MySQL 5 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.

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_input_vars = 3000
  • memory_limit = 128M
  • max_execution_time = 300
  • max_input_time = 300
  • upload_max_filesize = 64M
  • post_max_size = 64M

Download Orion Theme

Get the ORION Theme installation package from your account(after login on Themeforest.net) at downloads page and save it to your computer.

dashboard

Install ORION Theme

Installation via Wordpress

Video guide on How to install an G5Theme item via WordPress

Step 1 - Login to your Wordpress Dashboard

Step 2 - Go to Appearance > Themes . Click the Add New button or Add new theme link. (check screenshot below)

Step 3 - Click on the Upload Theme button. Locate g5plus-orion.zip and click Install Now.

Step 4 - Click on the Activate button to activate ORION. Congratulations, you have now activated ORION! You can now proceed with ORION's Plugin Installation.

dashboard

install

install

Installation via FTP

Step 1 - Log into your Hosting server using an FTP client (like FileZilla or WinSCP).

Step 2 - Locate g5plus-orion.zip that you found in your ThemeForest Package and unzip it somewhere on your hard drive. Once it is unzipped it will look like a folder named ORION with all theme files in it.

Step 3 - Locate your Wordpress installation and upload the theme directory ORION (you unzipped in the previous step) into ../wp-content/themes/ in your Wordpress installation.

Step 4 - Click on the Activate button to activate ORION. Congratulations, you have now activated ORION successfully! You can now proceed with ORION's Plugin Installation.

Install Orion Required Plugins

All plugins required have been zipped/already into your download package, so you only need to do is click on the "Begin installing plugins".

You should be navigated to the Install Required Plugin page, which shows a plugin list similar to this:

install plugins

Next, Click on the checkbox beside "Plugin" label to select all plugins in the list.

install check list

Then choose "Install" from the drop-down list at the top and then click "Apply".

install action

The installing process status will be shown in your browser. It may takes a few minutes, so please be patient. After sucessfull, your screen like that

install plugins

When the notice "All installations have been completed" appears, click on the Return to Required Plugins Installer link to turn back to the plugin list.

install plugins

Next, click on the box beside the Plugin label again to select all plugins and choose Activate this time as image below.

active all required plugins

One Click Install Demo Data

With ORION, you can build a fully functional website just by clicking a button and install our demo data or click 5.2.1 Create A New Page to step by step. Your ORION installation will be set up with what we have on our demo website, and you can use it as a template to develop your own website.

Go to G5Theme => Install Demo

Import Demo Content in One Click

Then choose Install demo data you want:

Import Demo Content in One Click02

Import Demo Content in One Click03

Import Demo Content in One Click04

The process would be displayed on import status bars so you will know when it finish and your data is ready.

Import Status Bars

DONE. Now, you can visit your website to view demo.

Creat a new page

You can create countless pages with content. Our theme includes several page templates to choose from, and you will need to choose the page template that suits your needs. All of this is done in the pages section of your WordPress admin.

If you DID NOT One Click Install Demo Data, you will need to MANUALLY CREATE your Home and other pages. Here’s how to build it:

Video guide on How to create page using Visual Composer

Step 1 – Navigate to Pages in your admin sidebar and click Add New option.

Step 2 – Input a new name for your page, and click BACKEND EDITOR to build page by Visual Composer (make sure that you have installed Visual Composer plugin).

Step 2.1 – Don't click BACKEND EDITOR: it means that you could input content to Classic Mode Area, then go to Step 3

Step 2.2 – Click BACKEND EDITOR: your screen could be like this

Step 3 – Set values for Page Settings which will affect to this page only and override options set in the Preset (if this page apply any Preset) or Theme Options.

You could consult our guide on How to use Preset for more details on How to apply Preset to a Page/Post

Any option that was set to be Default or Customize Off means that it will use the value of equivalence option you have set in Preset (if this page apply any Preset) or Theme Options. Insert a different value to override the Preset/ Theme Option value.

Step 4 – Set your Parent page (It’s usually set to No Parent).

Step 5 – Set your page template from the Template dropdown list.

Step 6 – Content for your page goes in the editing field, use the Visual or Text editor. Page content is mainly built using Shortcodes. See the Shortcodes section for how to use them. You can also use our demo content, see the corresponding section of this document for the demo code of each page.

Next, you can publish this page and set it as your frontpage (8.1. Settings a static page as Home) in the Wordpress Settings panel.

Building Hompage

Now you can start fiddling with Visual Composer to build your home page with any design that you like.

In case you don't have time for experience with it, you can switch to Classic Mode and use one of the shortcode sets provided below to build your frontshop based on one of the pre-made home page we offer.

To create a page similar to Homepage in our the demo, choose the Classic Mode and switch to the Text tab, then paste this code into the content of your page:

Home Creative Agency 01

Home Creative Agency 02

Home Creative Agency 03

Home Creative Business 01

Home Creative Business 02

Home Creative Design 01 - Home One Page

Home Creative Design 02 - Home One-Page Float

Home Creative Freelancer

Home Minimal Agency 01

Home Minimal Agency 02

Home Minimal Photo 01

Home Minimal Photo 02

Home Minimal Photo 03

Home Minimal Photo 04

Home Minimal Shop 01

Home Minimal Shop 02

And updating

Paste one of these content into your Homepage to create your own Homepage that has the same design with us, choose Template "Home Pages", then publish this page and set it as your frontpage (Settings a static page as Home) in the Wordpress Settings panel.

For a further understanding on these shortcodes and what they do, please visit ORION DEMO

Building OnePage

Home OnePage aims to focus the user's attention to the content that they want. When you choose an item on Main Menu of OnePage, it immediately navigates to the section that you've chosen

OnePage sites have became a trend recently, and ORION can help you do it easily with 2 styles of OnePage: OnePage and OnePage Float

If you want to build your Home OnePage please consult our guide below:

Step 1 - You just have to create a Menu with Links as items.

Step 2 - Go to your homepage, anywhere you want the menu item to navigate to section, please edit row by Visual Composer and type id on field: Row ID

You could consult our video guide on How to build OnePage.(We use ORSON theme for example but this process is similar to the process of building OnePage Float on ORION theme. Please do not confuse about this)

Step 3 - After building content to your Homepage, scroll down to Page Settings area to choose style of OnePage and add custom CSS:

Custom CSS for OnePage Float: pd-left-30 pd-right-30 xs-pd-left-15 xs-pd-right-15

Custom CSS for OnePage Float: pd-left-30 pd-right-30

BUILD AN EXAMPLE

THIS IS STEP BY STEP GUIDE ON HOW TO BUILD HOME PAGE MANUALLY FOR ORION CREATIVE AGENCY 03 DEMO

Need Wordpress, Orion & plugins are already

I. Overview elements area on page

II. BUILDING

1. Build & Setting Top Bar area

1.1 Build Top Bar Left

Add a "Text" widget to Top Bar Left Area

Go to Widget Manager and do follow

Add Text Widget

1.2. Build Top Bar Right

Add Two "Text" widgets and "G5Plus - Social Profile" widget to Top Bar Right Area

  • Add Text Widget 01

    • Code HTML

  • Add Text Widget 02

  • Add Social Profile Widget :

    • 2. Build & Setting header area

    You can consult this video guide on How to build Header Area

    2.1 Upload logo

    Go to ThemeOptions >> Logo Setting tab, and upload or choose an image from library to be Logo as you want:

    2.2 Create menu

    Go to Apperance >> Menus, do follow:

    2.3 Settings

    Go to ThemeOptions >> Header tab, then setup options for Header Area as your liking:

    3. Import slider & create home page

    3.1 Import slider simple

    You can consult how to import slider at IMPORT SLIDER HOME PAGE
    section. And locate zip file slider to import on path: orion\wp-content\plugins\orion-framework\core\install-demo\data\creative-agency\revslider

    3.2 Create A New Page

    Click classic mode, add code below:

    4. Choose Source Data Content For Portfolio,Our Team

    4.1 Choose data for Portfolio shortcode

    Follow below to create Portfolio item or Category

    4.2 Choose data for Our Team shortcode

    Follow below to create Our Team item or Category

    5. Setting Footer & Create Content Footer

    You could consult our video guide on How to build Footer Area

    5.1 Settings Footer
    Footer Area on the frontend

    Go to ThemeOptions >> Footer tab, then setting below

    5.2 Create Contact Form 7 for Footer

    Go to Contact >> Add New and do follow:

    Code for contact here

    5.3 Add widgets to Footer 1 area

    Go to Appearance >> Widget

    Add G5Plus: Logo widget:

    Add Text widget:

    Add G5Plus: Social Profile widget:

    5.4 Add widgets to Footer 2 area

    Add Text widget to Footer 2

    Code HTML

    5.5 Add widgets to Footer 3 area

    Add G5Plus - Post widget to Footer 2

    5.5 Add widgets to Bottom Bar Left area

    Add Custom Menu widget to Bottom Bar Left area

    Add Custom Menu widget to Bottom Bar Left area

    Import Slider Home Page

    After setting up the homepage, you need to setup the slider for homepage to make it display the same as in live preview.

    The download package contains the exported slider (Revolution Slider) that can be used as your slider template. Please follow the steps below to import it to your shop:

    • Go to "Revolution Slider"
    • Click "Import Slider" button
    • When a popup appear, click "Browse" and select one of zip sliders(these files include in main file downloaded) file.
    • Click "Import Slider" button to start import the selected slider
    • Repeat the steps to import all

    Video guide on How to Import Slider using Revolution Slider

    Please note that these steps are to set up slider for homepage the same as in live demo. If you want to make your own slider, please follow the official Slider Revolution document.

    Import Demo Content

    If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

    • Go to menu Tools > Import
    • Select WordPress from the list
    • If you haven't installed the WordPress import plugin, a popup window will appears and ask you to install it. Just click Install Now. When the installation progress is completed, click Activate Plugin & Run Importer. If you have installed this plugin, skip to next step.
    • Click Browse and select demo-data.xml file from the download package
      (Example: Creative Agency on path: g5plus-orion\assets\data-demo\creative-agency, so the same for others)
    • Click Upload file and import
    • When you are asked to import author, you can create new author or import to existing author. You also should check the Download checkbox and import file attachments.

    demo

    Select WordPress from the list

    demo

    Continue with steps in image

    demo

    You would be asked to assign author, please selected and continue

    demo

    After completing all above steps, open frontend screen to see your result.

    If you don't want to use the demo content pack, you can read the instructions on how to work with our theme built-in Page Builder below to make your own pages.

    Contact Form

    You can do step by step as image below to build contact form

    Add New Contact Form

    You can visit Contact Form 7 Plugin to further details.

    Or copy and paste content to Form field like this:

    Example: Value Content for Contact form

    You could consult a lot of our contact forms have been created here

    General Options

    You can adjust WordPress settings as follows:

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

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

    Step 3 – You can set Discussion settings in Settings > Discussion

    Step 4 – You can change Image sizes in Settings > Media

    We used the following sizes on our demo sites:
    Thumbnail size: 150 x 150
    Medium size: 300 x 300
    Large size: 1024 x 1024

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

    Theme Options/Orion Options

    Theme Options are applied globally but can be overwritten by setting options in Page Options (and Preset). Theme Options are logically organnized into tabs, each tab contains all the options for that specific area within your site.

    By clicking on the Theme Options menu, you'll be able to change all settings that affect to entire your website.

    With ORION, we integrated Preset to Theme Options, it means that you can select any Preset you want to apply to Theme Options, then press “Load Preset” button to get all values from the Preset settings to similar options in Theme Options.

    Apply a Preset to Theme Options does not only affect to an option but also all options in Theme Options.

    You could consult our guide on How to use Theme Options and How to use Preset for more detail about How to use Theme Options properly on your website.

    We highly encourage you to explore the theme options and experimentwith what all the available options can do.

    General Settings

    General Settings tab is divided into a few sections. Asides from the Install Demo Data section mentioned above, there are a few important sections for you to customize your layout.

    You can upload this Logo on your server, or just paste an URL into the Logo box

    On/Off Smooth Scroll and Bact To Top button on the frontend

    Maintenance Mode

    Maintenance Mode use for update/maintenance website. Can choose custom page or default(standard)

    Performance

    Performance use on/off js & css for faster loading page

    Page Transition

    Page Transition use to enable/disable and effects transition of page

    Custom Favicon

    Custom Favicon have many options for each devices/screen (pls read infomation below each option for more details).

    404 Setting

    You can input information, background for 404 page without install plugins.

    Frontend display

    Layout Options

    Layout Options has all options for setting layout of page/sidebar/widget ...(pls read infomation below each option for more details)

    Page Title

    Page Title has all options for setting Page Title (pls read carefully infomation below each option for more details)

    Blog Setting

    Blog Setting contains all options for setting blog and single blog page (pls read carefully infomation below each option for more details)

    Logo Setting

    Logo Setting contains all options for setting how logo display on page (pls read carefully infomation below each option for more details)

    Frontend display

    Top Drawer

    Top Drawer contains all options for setting Top Drawer area (pls read carefully infomation below each option for more details

    Top Bar

    Top Bar contains all options for setting Top Bar area (pls read carefully infomation below each option for more details)

    Header Customize

    Header Customize contains all options for customizing Header Area (pls read carefully infomation below each option for more details)

    Theme Colors

    Theme Colors allows users to custom and change color options for each area on page.

    Font Options

    Font Options allows users to specify font properties, custom/upload fonts on website.

    Social Profiles

    Social Profiles contains all options that allows user to share post/product on various social networks which automatically shows up under the content post, an important function that helps promoting your site. You can also check the options to decide which network are allowed to share the content of your website on. You can also turn off all options if you don't want your content to be shared at all.

    Frontend display

    Woocommerce

    Woocommerce contains all options to using woocomerce on webstie such as shop/category/cart page, single product...

    Frontend display

    Single Product Page on the Frontend

    Quick View Product on the Frontend

    Cart Page on the Frontend

    Custom Post Type

    Users can disable the custom post types used within the theme here, by checking the corresponding box. Settings many options for them, also.

    Portfolio Settings

    Portfolio Settings contains all options to custom Portfolio on pages.

    Resources Options

    Resources Options allows users to utilize boostrap elements to style your store quick and easily.

    Custom CSS & Script

    Custom CSS & Script contains text fields in case you want to add new CSS class or JS to your website. This will add/overwrite the theme CSS,JS, so please be careful!

    Preset Settings

    Preset Settings allows users to choose preset setting apply for each page type

    Import/Export

    You can back up the options you chose here and restore them later, in case you want to fiddle with it. You can even swap data between different installations by pasting the text in the box under Transfer Theme Options Data and click Import Options button.

    Preset

    Preset are Page Options that were set beforehand to facilitate use, it will override settings in Theme Options on all pages applyed it.

    You can consult our guide on How to use Preset

    add new preset

    Apply Preset setting to Page/Post

    apply preset to page

    Apply Preset setting to Theme Options

    apply preset to theme options

    You can set the following Options for the Preset you are currently editing:

    1. Page Layout

    This option is used for setting Page Layout in a Preset. It will overwrite Page Layout settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in Orion Theme Options

    Meta Options Page Layout

    You can set the following Page Layout Options for the Preset you are currently editing:

    Attribute Description
    Layout Style Overwrite the Default Layout Style (set in Theme Options) for page used this preset.
    Layout Overwrite the Default Layout of pages settings section in Theme Options for page used this preset.
    Sidebar Layout Set position for the page sidebar: none, left, right, both of left and right
    Sidebar Select the page sidebar
    Sidebar Width Set width for the page sidebar: Small (1/4) or Large (1/3)
    Sidebar Mobile On/Off for displaying the page sidebaron Mobile
    Content Padding Set content top/bottom padding. Do not include units (empty to set default)
    Content Padding Mobile Set content top/bottom padding mobile. Do not include units (empty to set default)
    Remove Content Padding If turn on this function. It will Remove Content Padding top/bottom padding, include value default

    2. Page Title

    This option is used for setting Page Title in a Preset. It will overwrite Page Title settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in ORION Theme Options

    Meta Options Page Title

    You can set the following Page Title Options for the Preset you are currently editing:

    Attribute Description
    Show/Hide Page Title? Set visible of header, if selected default will take value in Theme Options
    Page Title Layout Set Layout for Page Title: 'Default', 'Tile Left & Breadcrumb Right' , 'Center'
    Custom Page Title Set content of page title. If leave empty will take value title of page
    Custom Page Subtitle? Set custom for page subtitle, if selected Off will take value in Theme Options
    Padding Set padding top/bottom for page title. If leave empty will take value in Theme Options
    Custom Background Color? Set custom background color for page title. If selected Off will take value in Theme Options
    Page Title Parallax Set parallax mode for page title. If selected Default will take value in Theme Options
    Breadcrumbs Enable Set visible of breadcrumbs for page title. If selected Default will take value in Theme Options

    4. Top Drawer

    This option is used for setting Top Drawer in a Preset. It will overwrite Top Drawer settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in ORION Theme Options

    Meta Options Top Drawer

    You can set the following Top Drawer Options for the Page you are currently editing:

    Top drawer padding top. Do not include units (empty to set default)
    Attribute Description
    Top Drawer Type Set type of top drawer: 'Disable', 'Always Show', 'Toggle'. If selected default will take value in Theme Options
    Top Drawer Sidebar Set Sidebar for top drawer sidebar, if not selected will take value in Theme Options
    Top Drawer Wrapper Layout Set layout wrapper for top drawer: 'Full Width', 'Container', 'Container Fluid'. If selected default will take value in Theme Options
    Top Drawer hide on mobile Set visible for top drawer area on mobile. If selected default will take value in Theme Options
    Top Drawer PaddingSet Padding top/bottom for Drawer area. If you not choose it will set value default

    5. Top Bar

    This option is used for setting Top Bar in a Preset. It will overwrite Top Bar settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in ORION Theme Options

    Meta Options Top Bar

    You can set the following Top Bar Options for the Page you are currently editing:

    Attribute Description
    Desktop Settings
    Show/Hide Top Bar Set visible of top bar. If selected default will take value in Theme Options
    Top Bar Layout Set layout for top bar: '1/2-1/2', '2/3-1/3', '1/3-2/3', 'full', if not selected will take value in Theme Options
    Top Left Sidebar Set sidebar for left sidebar. If not selected will take value in Theme Options
    Top Right Sidebar Set sidebar for right sidebar. If not selected will take value in Theme Options
    Top Bar Border Set border for top bar area:'Default','None', 'Full Bordered', 'Container Border'. If selected default will take value in Theme Options
    Mobile Settings
    Show/Hide Top Bar Set visible of top bar. If selected default will take value in Theme Options
    Top Bar Layout Set layout for top bar: '1/2-1/2', '2/3-1/3', '1/3-2/3', 'full', if not selected will take value in Theme Options
    Top Left Sidebar Set sidebar for left sidebar. If not selected will take value in Theme Options
    Top Right Sidebar Set sidebar for right sidebar. If not selected will take value in Theme Options
    Top Bar Border Set border for top bar area:'Default','None', 'Full Bordered', 'Container Border'. If selected default will take value in Theme Options

    6. Header

    This option is used for setting Header in a Preset. It will overwrite Header settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in ORION Theme Options

    Meta Options Header

    You can set the following Header Options for the Page you are currently editing:

    Attribute Description
    Header On/Off? Set visible of header
    Desktop Settings
    Header Layout Set layout of header. If no selected will take value in Theme Options
    Header Container Layout Set container layout for header: 'Container', 'Container Full'. If not selected will take value in Theme Options
    Header Float Set float for header. If selected default will take value in Theme Options
    Show/Hide Header Sticky Set sticky mode for header. If selected default will take value in Theme Options
    Header padding Set Padding top/bottom for Header area. If selected default will take value in Theme Options
    Navigation Height Set header navigation height (px). Do not include unit. If selected default will take value in Theme Options
    Page Header Mobile
    Header Mobile Layout Set layout fot header mobile. If no selected default will take value in Theme Options
    Menu Drop Type Set drop type for menu mobile: 'Dropdown Menu', 'Fly Menu'. If not selected will take value in Theme Options
    Header mobile sticky Set sticky mode for mobile header. If selected default will take value in Theme Options
    Mobile Header Search Box Set visible for search box. If selected default will take value in Theme Options
    Mobile Header Shopping Cart Set visible for shopping cart. If selected default will take value in Theme Options
    Mobile header border bottom Set border bottom for mobile header: 'None', 'Bordered', 'Container Bordered'. If selected default will take value in Theme Options

    7. Header Customize

    This option is used for setting Header Customize in a Preset. It will overwrite Header Customize settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in ORION Theme Options

    Meta Options Header Customize

    You can set the following Header Customize Options for the Page you are currently editing:

    Attribute Description
    Header Customize Navigation
    Header Customize Navigation Set visible and order item for Header Navigation: 'Sidebar','Custom text content left', 'Navigation Item Spacing ','Custom CSS Class'

    8. Menu

    This option is used for setting Menu in a Preset. It will overwrite Menu settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in ORION Theme Options

    Meta Options Menu

    You can set the following Menu Options for the Page you are currently editing:

    Attribute Description
    Page menu Optionally you can choose to override the menu that is used on the page.
    Page menu mobile Optionally you can choose to override the menu mobile that is used on the page
    Is One Page Set page style is One Page

    10. Colors Setting

    This option is used for setting Colors in a Preset. It will overwrite Theme Colors setting in Theme Options. Any option is set to "Default" which means they will take on the global options set in ORION Theme Options

    Meta Options Colors Setting

    You can set color for each area on page :

    Attribute Description
    General Settings Customize color for text, bolder, shopping cart icon...
    Top Drawer Customize Customize color for Top Drawer Area
    Header Customize Customize color for Header Area
    Top Bar Customize Customize color for Top Bar
    Navigation Customize Customize color for Navigation Area
    Footer Customize Customize color for Footer Area
    Bottom Bar Customize Customize color for Bottom Bar Area

    Page Settings

    Page Settings is one of the ORION's features that located within each page and post. Page Settings will only affect the individual page you change them on and overrides options set in the Theme Options.

    You could consult our guide on How G5Them Options work for more details about the relationship between Theme Options, Preset and Page Settings

    Page Settings

    Preset and Page Options will use the Theme Options value if left empty or if the value is default. They will override Theme Options if any other value is entered. This setup gives users maximum flexibility for setting a global theme option, then being able to override it on a page/post/shortcode basis

    WooCommerce Settings

    Now we will show you How to configure product image like demo

    Go to Woocommerce >> Settings Click on Display tab. Then setup Product Images options as below

    Mega Custom Menu

    We use XMENU, please visit Document XMENU and video guide on How to Assign XMenu to an G5Theme item (ex: ZORKA) for further details.

    Setting a static page as Home

    If you installed ORION Demo Data, you don’t need to create a new Home Page, you just need to choose from the list Home Pages that were automatically created from the demo content, following these steps:

    • Go to Settings > Reading.
    • For Front page displays, select A static page (select below)
    • Choose any homepage as you want... from the dropdown for Front page
    • Click Save Changes

    Save all your changes!

    Configure row / column

    Content management is a breeze with Fortuna and it requires absolutely no coding skills. Using a highly customized version of the Visual Composer plugin the theme offers a user friendly Drag'n'Drop interface for easy page creation and editing. Follow these simple steps to create a Page with Orion:

    Step 1:Go to Pages > Add new in your Dashboard. Add a Title to your Page (top field).

    Step 2:Switch to Backend Editor if you are currently under Classic Mode (button below Title field).

    Step 3:Start adding page content by clicking on the Plus button or Add Element.

    Step 4:The Add Element Popup appears, click on the first element in order to add a new Row to your page. A Row is a main building block of a page, you can split your Rows into Columns, place various elements into your rows, set Row Backgrounds, effects etc.

    Step 5:Once you have the new Row added to your page you can split that Row into Columns in order to organize elements nicely in it. Once you split your Row into column you can start adding different Page Elements into your columns. If you want to edit your Row/Column Settings click on the small Pen icon (top right corner of the Row/Column). You can also Duplicate your Row with the Icon (duplicate icon) next to it or Remove the Row/Column with the icon to the right (trash bin icon).

    Row Settings (General)

    Click on the Edit Row button (Pen icon, top right of the Row). You will see the Row Settings Dialog popup.

    Layout

    Full Width (overflow hidden) - Row will full width (option default)

    Full Width (overflow visible) - Row will full width, visible content if overflow

    Container - Max width 1170px and center.

    Container Fluid - Full width, padding left and padding right 15px.

    Columns Gap

    In order to control gaps between columns navigate to row parameter window and change column gap option - the gap will be introduced between all columns within this row. Default value of gap is set to 0.

    Important: In case of mobile stacking gap will be introduced between stacked columns as well.

    Full Height Row and Video Background

    Equal height

    In order to set columns within row to be equal height you must navigate to row parameter window and check Equal height option to be active. All columns within this row will have equal height and align to the longest column.

    Content position

    In order to control vertical alignment of content within rows/columns navigate to row parameter window and select position of content - top, middle or bottom. By default value is set to "Default" meaning it will use Top or any other alternative if defined within your WP theme.

    Parallax

    Show background overlay (Overlay Color)

    Color - Click button to select color of background overlay

    Overlay Opacity - Set opacity for overlay (0 → 100)

    Show background overlay (Overlay Image)

    Image - Click button to select select image or set background image from Design Options

    Overlay Opacity - Set opacity for overlay (0 → 100)

    Row ID

    Set ID of row (Note: make sure it is unique and valid according to w3c specification)

    Row Settings (Design Options)

    Row Settings (Animation Settings)

    CSS Animation - Select type of animation if you want this element to be animated when it enters into the browsers viewport.

    Animation Duration - Duration in seconds. You can use decimal points in the value. Use this field to specify the amount of time the animation plays. The default value depends on the animation, leave blank to use the default.

    Animation Delay - Delay in seconds. You can use decimal points in the value. Use this field to delay the animation for a few seconds, this is helpful if you want to chain different effects one after another above the fold.

    Managing Columns

    Once you have the desired number of columns in a Row you can manage each Column's individual settings by clicking on the Toolbar icons of that specific Column. The Plus Icon adds an element to the top of the Column, the bottom Plus Icon adds an elemnt to the bottom of the Column. The Trash Bin icon removes the Column. Access the Column Settings by clicking on the Pen Icon.

    Column Settings (General)

    Access the Column Settings by clicking on the Pen Icon. The General tab provides with the option to add CSS classes to your Column if you wish to access it via CSS (can pass more than one divided by a space).

    Column Settings (Design Options)

    Column Settings (Responsive Options)

    Add / Edit Page Elements

    Adding Page Elements to your Page is pretty straightforward. First you need to have created a new page, added a Row to it and defined your Row Columns (read more in the previous section).

    Step 1:Click on one of the Plus Icons within the column you want to add a new element to.

    Step 2:The Page Elements dialog will appear, click on the element you want to add to your Column/Row.

    Step 3:The Element Settings Dialog of the Element you are adding appears. Customize your element anyway you want, then click Save.

    Step 4:Your element is now in the Column you added it to. Once you hover your newly added element you will see a small popup that let's you manage it. You can do the following with your elements:

    Move - Drag your element via the Direction Icon to move it around within the Column,Row or Page.

    Edit - Click on the Pen Icon to edit your Element's properties.

    Clone - Click on the Copy Icon to duplicate your Element.

    Delete - Click on the Trash Bin Icon to remove your Element.

    Custom post type

    ORION includes 2 custom post types:

    • Our Team: Our Team is the custom post type to introduce the staff in your organization to the customer.
    • Portfolio: Orion provide post type Portfolio to create 1 or more portfolio for your website

    CREATE PORTFOLIO ITEMS

    ORION provide a Portfolio custom post type that lets you feature your work in style. To create your Portfolio items follow the steps below:

    Step 1: Go to Portfolio > Add New in your Dashboard.

    Step 2: Click on Add New to make a new post. Create a title and insert your post content in the editing field. You can use any of our short code builder elements inside the post.

    Step 3: Add Categories from the right side. To assign it to the post, check the box next to the Category name. These Categories are the filters that will sit above your portfolio images and allow you to filter the different types of projects.

    Step 4: Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.

    Step 5: To Select Feature Image click the first Featured Image Box, select an image and click Set Featured Image. This is image that display on shortcode portfolio

    Step 6: Add portfolio custom information by input to Custom Field section. You can add multiple file by click Add custom field

    Step 7: Add portfolio extra information by input to Portfolio Extra section. In case you want link portfolio to another page out site or in site when click portfolio you need input link to Link to detail

    Step 8: Select detail layout. Orion provide 7 layouts : Horizonal slide, Vertical slide, Small slide, Big slide, Center gallery small, Right gallery small, Full content

    Step 9: Once you are finished, click Publish to save the portfolio post

    Here Is A Screenshot That Shows The Various Areas Of The Portfolio Post Page Described Above

    Setting Our Team

    Each custom post type has each page setting to change slug, display name. To change settings OurTeam follow the steps below:

    Step 1: Go to an Our Team > Settings in your Dashboard.

    Step 2: Input value to New slug post type and New name post type

    Step 3: Input value to New slug category and New name category .

    Step 4: Once you are finished, click Save Changes to save the settings

    Here Is A Screenshot That Shows Setting Custom Post Type Described Above

    Contact Forms Settings

    Settings For Send Mail

    You can visit WP Mail SMTP Plugin to further details.

    Mail Chimp Settings

    Step 1 Go to MailChimp for WP >> MailChimp Settings

    Step 2

    Step 3

    Step 4

    Step 5

    Step 6

    Update theme to latest version

    Please consult and follow the step-by-step guide here to update theme to latest version: http://support.g5plus.net/knowledge-base/how-to-update-to-latest-version/.

    Update shortcode/framework plugins to latest version

    Please consult and follow the step-by-step guide here to update shortcode/framework plugins to latest version: http://support.g5plus.net/knowledge-base/how-to-update-shortcodeframework-plugins-to-latest-version/.

    Thank you for purchasing our theme

    If you have any questions that are beyond the scope of this documentation or have any troubles configuring your website applications with the above settings you can contact the G5Theme Support Team by signing up and submit a new topic. G5Them Support Team will be glad to assist you.

    Please create topic here: http://support.g5plus.net. Thanks so much for purchasing ORION!