G5 Core is heartbeat of site and it decides all activities although you may not want to install demo (you can build the content yourself). It makes up the appearance and functionality of the site platform
G5 Core contains neccessary options make sure you can use a basic website such as setting up menu, theme option, content block, mega menu
In this documentation, you will find information about installing the plugin, the features of the plugin includes and how to use theme easily.
G5 CORE PLUGIN
NOTE: In this documentation, we have used our theme that developed by our technicals so in some examples below you could see exclusive designs with logo and images of our theme.
We have prepared detailed user manual in order to ensure smooth and the plugin easy works with our theme. However, If you have any question that are beyond the scope of this documentation or difficulties with our theme – we will be there for you! Please feel free to contact us via our helpdesk or email and we will get back to you as soon as possible!
Thank you so much!!
After you active the theme, you need install & active G5 Core plugin
Our themes are tightly coupled with required plugins to work best. Once you have activated the theme you will be prompted to install and activate the required plugin. Simply click Begin installing the plugin and the process will begin.
System Status help you get important information of Server and WordPress environment without having to check the system status on your server. Please check this page before contacting customer services and asking your server to change the status of the server as we recommended.
From admin dashboard, go to Theme name → System
You could please consult our guide on How to increase the PHP limits here:http://support.g5plus.net/knowledge-base/system-required
Our Theme includes over 800+ Google Fonts, Standard Fonts and Custom Fonts (upload by yourself) to make the web more beautiful, fast, and open through great typography.
You can consult our video guide on How to use Fonts Management for more details.
Navigate Theme name >> Fonts Management.
Note: Your custom font must be Webfont and upload file zip contains stylesheet.css and font files (accept: .woff, .eot, .svg, .ttf)
Setting 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 general setting.
You can view this video to take a general look about Setting
| General Settings | Description | 1. Back To Top | Two options: on,off for Back To Top button |
|---|---|
| 2.Google Map API Key | After you bought API key, you should copy & paste here to display Map |
| 3. Enable Default Thumbnail Placeholder | You can set to dispay thumnail placeholder if you don't upload feature images |
| 4. First Image as Post Thumbnail | You can set first content image as post thumbnail if you don't upload feature images |
| 5. Search Post Types | You can select the types in search form |
| 6. Search Ajax Enable | You can set for seach ajax (Results are shown as you type, results narrow as you continue typing. If results become too narrow, remove characters to see a broader result) |
| 7. Maintenance | You can set the WordPress site administrator to close the website for maintenance |
| 8. Page Loading | You can a page loading affect such as: Circle, Wave etc |
| 9. 404 Page | You can select a page for 404 Page |
G5 Core allows you to display your Social account in the theme
| Connection Settings | Description | 1. Title | You can enter the title for social network |
|---|---|
| 2.Social Network Icon | You can set the icon for social network |
| 3.Social Network Link | You enter the link of that social network |
| 4.Social Network Color | Finally, you select the color for social network as you want |
Navigate to Theme Options > CSS &JavaScript . In this section, you can add custom CSS or Javascript code to your website.
| Connection Settings | Description | 1. Custom Css | You can enter the CSS code here |
|---|---|
| 2.Custom Javascript | This is section which can you add Js code |
The header is probably one of the first things you will want to set up on your website. The header consists of a series of elements such as logo, navigation menu, social icons and contact information. The theme is provided with several options to customize the header and its content. All these elements, such as colors, fonts, images, etc. can be customized without touching any code
You can view this video to take a general look about Header:
In this section, you can customize all options related to the header such as turn on/ turn off header, header style etc.
| General Settings | Description | 1. Header Enable | Two options: on,off so that you can display header or not If you select "on", you have bellow options |
|---|---|
| 2. Header Responsive Breakpoint | Controls when the desktop header changes to the mobile header. Accepts a numeric value in pixels (px). For example: Larget devices < 1200px. |
| 3. Header Style | You can change header styles |
| 4. Header Layout | You can change the boxed content layout or stretched content layout |
| 5. Header Sticky | You can select sticky header or not or show on scroll up |
| 6. Header Float Enable? | You can select float header or not |
| 7. Header Border Enable? | You can select border for header if you want. |
| 8. Css Classes | You can enter your CSS classes for the header. |
3. How select the Header Style
Step 1: Navigate to Theme option >> Header >> General >> Header Style
Step 2: Select to Header Style: choose from Header 1 to Header 26
Header 1
Below is an example of how you can setup the Header 1
Header 2
Below is an example of how you can setup the Header 2
Header 3
Below is an example of how you can setup the Header 3
Header 4
Below is an example of how you can setup the Header 4
Header 5
Below is an example of how you can setup the Header 5
Header 6
Below is an example of how you can setup the Header 6
Header 7
Below is an example of how you can setup the Header 7
Header 8
Below is an example of how you can setup the Header 8
Header 9
Below is an example of how you can setup the Header 9
Header 10
Below is an example of how you can setup the Header 10
Header 11
Below is an example of how you can setup the Header 11
Header 12
Below is an example of how you can setup the Header 12
Header 13
Below is an example of how you can setup the Header 13
Header 14
Below is an example of how you can setup the Header 14
Header 15
Below is an example of how you can setup the Header 15
Header 16
Below is an example of how you can setup the Header 16
Header 17
Below is an example of how you can setup the Header 17
Header 18
Below is an example of how you can setup the Header 18
Header 19
Below is an example of how you can setup the Header 19
Header 20
Below is an example of how you can setup the Header 20
Header 21
Below is an example of how you can setup the Header 21
Header 22
Below is an example of how you can setup the Header 22
Header 23
Below is an example of how you can setup the Header 23
Header 24
Below is an example of how you can setup the Header 24
Header 25
Below is an example of how you can setup the Header 25
Header 26
Below is an example of how you can setup the Header 26
4. How select the Header Layout
Step 1: Navigate to Theme option >> Header >> General >> Header Layout
Step 2: Select Layout and choose from:
1. Boxed Content: boxed designs consist of setting clearly defined boundaries for the header of the page
2. Stretched Content: differs from a boxed one because you can use the entire screen to showcase the elements of your header
Boxed Content Layout
Below is an example of how you can setup the Boxed Content layout
Stretched Content Layout
Below is an example of how you can setup the Stretched Content layout
5. How set the Header Sticky
To enable the Sticky Header navigate to Theme option >> Header >> General >> Header Sticky
G5 Core allows you to display an extra bar on top of the header where you can display the navigation menus, the social icons, the custom HTML etc. The top bar is divided in two areas left and right. To enable the Top Bar navigate to Theme option >> Header >> Top bar locate the switch button to enable it as you see in the image below:
| Top bar Settings | Description | Top Bar Enable | Two options: on,off so that you can display header or not If you select "on", you have bellow options |
|---|---|
| Top Bar Items | You select 3 option: Left, right and disable If you drag and drop the item in left position or right position or disable the items |
| Border Bottom Enable? | You can turn on/off border bottom |
You can upload your logo in image file version in any size. G5 Core has several areas where you can upload your default logo, the sticky logo. Please read below for more information on the logos and style options available.
- Logo: Upload your custom logo site that will be displayed on all pages for desktop and laptop devices.
- Sticky Logo: Upload the logo for sticky header (The sticky logo dislays after you scroll page).
You can upload your logo in image file version in any height: G5 Core provides you setting to adjust your logo size on desktops, sticky logo.
The items before logo and after logo consists of a series of elements such as search button, search box, social networks, login and canvas sidebar.
The G5 Core is provided with several options to customize the header and its content. Navigate to Theme option >> Header >> Before logo and After logo locate the switch button to enable it as you see in the image below:
Before you set in this section, you go to Theme option >> Header >> General >> Before Menu & After Menu to view the postion of logo.
(1) The blue box is logo position
(2) The white lines are items of menu position
(3) The pink line is item which you can add as you want
You can determine the position of the item relative to the logo, if the logo is center of the header, you can add items Before logo and After logo
Before logo and After logo options available:
Search Button: After you enable the search button. You can click in the search button to open popup form for searching
Search Box: You can enter the key word in the box search
Social Networks: G5 Core allows you to display your Social account in the header. The header social icons are available
Login: You can have login/logout button for customers
Canvas Sidebar:is the part of navigation strategy. The sidebar is initially moved out off the screen and out of view as well.
Custom HTML: You can add HTML code for button, href etc.
The navigation section provided along with the theme allow you to customize your navigation elements. You can choose for each customizable area border, menu items spacing and submenu transition. Please follow the information below to know more about navigation settings.
Navigate to Theme option >> Header >> Navigation to set the navigaton
Navigation options available:
Navigation Border Enable: You can enable the border for the navigation
Menu Item Spacing: You can enter the spcing for menu items
Submenu Transition: You can choose the transition for sub-menu
Navigate to Theme option >> Header >> Before Menu and After Menu locate the switch button to enable it as you see in the image below. You can add items the same as before logo and after logo
The typography module provided along with the theme allow you to customize your header. You can choose for each customizable area font family, weight and style, subsets, text transform, size and letter spacing. Please follow the information below to know more about menu typography settings.
To customize the Logo, Top Bar, Menu and Sub Menu typography navigate to Theme option >> Header >> Typograpy and use the font options available in the image below.
Navigate to Theme option >> Header >> Color to customize the header colors.
This section is used to customize colors the Header Desktop, Header Mobile: Header Sticky, Top Bar, Navigation, Menu.
The mobile menu is available on top corner of your page when you navigate the website with a tablet or a smartphone.
Navigate to Theme option >> Header >> Mobile to customize all elements in the menu mobile.
1. How select the Header Style in Mobile :
Step 1: Navigate to Theme option >> Header >> Mobile >> Header Style
Step 2: Select to Header Style: choose from Header 1 to Header 3
Header 1
Below is an example of how you can setup the Header 1
Header 2
Below is an example of how you can setup the Header 2
Header 3
Below is an example of how you can setup the Header 3
2. How set the Logo in Mobile :
Mobile Logo: Upload your custom logo site that will be displayed on all pages for mobile devices.
Sticky Logo Mobile : Upload the logo sticky header (Sticky logo displays after you scroll page).
Logo Max Height: You can upload max height for the logo in mobile
Logo Sticky Max Height: You can upload max height for the logo in the sticky header
3. How set the Top bar in Mobile :
The top bar is divided in two areas left and right. You can drag & drop the items to the left top bar, right menu or you drag & drop to Disable column to disable the items
If you must alter the main header for a specific page or post you can do that via the Meta box located in the page editor screen. Have a look below:
This is Header preset setting:
The Footer allows you to list information, social icons, copyright text, and much more at the bottom of each web page. Navigate to Theme option >> Footer
With the Footer, you can use Content Block to display as Footer
You can view this video to take a general look about Footer
| Footer Settings | Description | Footer Enable | Two options: on,off so that you can display footer or not If you select "on", you have bellow options |
|---|---|
| Content Block | You select content block to use for footer |
| Footer Fixed | To make a footer fixed at the bottom of the webpage |
If you must alter the footer for a specific page or post you can do that via the Meta box located in the page editor screen. Have a look below:
Layout contains all options for setting Layout such as Layout, Style.. and customize Sidebar Area (pls read carefully infomation below each option for more details). Navigate to Theme option >> Layout
You can view this video to take a general look about Layout
| General Settings | Description | 1. Site style | Two options: on,off so that you can display header or not If you select "on", you have bellow options |
|---|---|
| 2. Side layout | You can select the side layout: wide, boxed or bordered |
| 4. Content padding | Content padding includes padding top and padding bottom for the content. |
| 5. Stretched Content | You can on/off for Stretched Content in the site |
1. How select the Site Style
Below is a quick explanation of each layout type included with Total to give you a better idea of how they look
Step 1: Navigate to Theme option >> Layout >> Site Style
Step 2: Select to Site Style: choose from Boxed layout, Wide layout to Bordered layout
Wide layout
The wide layout is the default layout for the theme and it displays your content centered of course but with a white background through-out. This layout doesn’t have any padding around the main wrapper.
Below is an example of how you can setup the Wide layout:
Boxed layout
The boxed layout has a padding around the main wrapper as well as a background applied to it so that you can apply a custom background to your body and all your content will be centered with the background flowing around it.
Below is an example of how you can setup the Boxed layout:
Bordered layout
The bordered layout is same with the boxed layout because it has a padding around the main wrapper and you can change the the border width and the border color
Below is an example of how you can setup the Boxed layout:
2. How select the Site Layout
Total includes 3 different layouts for your pages/posts – right sidebar, left sidebar and full-screen. Below is an explanation, example of each layout style as well as how to alter your layouts globally
Full width layout
Below is an example of how you can setup the Full-width:
Left sidebar layout
Below is an example of how you can setup the Left sidebar:
Right sidebar layout
Below is an example of how you can setup the Right sidebar:
If you must alter the main layout for a specific page or post you can do that via the Meta box located in the page editor screen. Have a look below:
With the Total theme you can easily customize the title of any given page or post to have a background image. All you need to do is use the built-in settings to define your image and if you want an overlay.
Page title contains all options for setting how Page title display on page (pls read carefully infomation below each option for more details).
Navigate to Theme option >> Page title.
You can view this video to take a general look about Page title
With the Page title, you can use Content Block to display as the Page title
Breadcrumb Enable: You can enable/disable the breadcrumb.
Show Post Categories in Breadcrumb : You can show the breadcrumb in the post categoties page
Show Post Type Archives in Breadcrumb: Total uses a page builder the custom post types (portfolio, staff and service etc) have the breadcrumb or not
If you must alter the Page title for a specific page or post you can do that via the Meta box located in the page editor screen. Have a look below:
Color has options for setting Color of website You can select the Site color, General color, Other color to displays colors you want.
Navigate to Theme option >> Color.
You can view this video to take a general look about Color
If you must alter The Color for a specific page or post you can do that via the Meta box located in the page editor screen. Have a look below:
Preset are Option that were set beforehand to facilitate use, all Options of Preset are same options of Theme option, it will override settings in Theme option on all pages/posts applyed it.
This is Color preset setting:
Total includes a custom Typography class built exclusively for Total that provides you with Fonts Management so you can see font and typography changes right the font you want.
Typography allows users to specify font properties to display as body font, primary font, menu font... All fonts are managed in Fonts Management custom/upload fonts on website.
Navigate to Theme option >> Typography.
You can view this video to take a general look about Typography
.
Simply go to the Theme option and click on the “Typography” panel. Here you can select the part of your site to edit, modify accordingly then save your changes. So easy!
If you must alter The Typography for a specific page or post you can do that via the Meta box located in the page editor screen. Have a look below:
Preset are Option that were set beforehand to facilitate use, all Options of Preset are same options of Theme option, it will override settings in Theme option on all pages/posts applyed it.
This is Typography preset setting:
Content Block — is specific layout of content that will be saved, then you will be able to reuse it to display in Page Title area, Top Bar area, 404 page, Top Drawer or Footer area (configure in Theme Options or Preset, and the Page Title setting in Page Options). By using Content Block you will be able to save tons of time in case you need to create specific layout on and apply it to be Top Bar/Top Drawer or Page Title/Footer, you can also use Content Block for 404 Page.
You can consult our video guide on How to use Content Block in theme for more details (In this video we used Thallo theme for example)
The screenshot below is all content blocks. You can manage all your content block here by edit/delete/view.
Page Title Option
Footer Option
Mega Menu is one of the coolest features, mega menu is a type of expandable menu in which many choices are displayed in a two-dimensional. You can use WPBakery Page Builder elements/templates and shortcodes of theme to create new layout and save it as Mega Menu.
From WP dashboard, goto Mega Menu → You can manage all Mega Menus by clicking to edit/view/delete button. You can also add new a mega menu item.
From WP dashboard, goto Apperance → Menus
We have prepared detailed user manual in order to ensure smooth and easy work with our theme. However, 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: https://sp.g5plus.net
Thanks so much for purchasing the theme!