How to – Page 2 – G5Theme Support

How To Import Slider

This video focuses on How to import slider properly on your website.

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

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.

How to Build Header Area

This video focus on How to build Hearder Area properly on your website.

Here we use Homepage 15 on ORSON for example:

You can refer our detail guide in the attached document package or this link: http://document.g5plus.net/orson

1. Build Top Bar Left

Add Three ” Text Widgets” to “Top Bar Left” Area

Go to Appearance -> Widget Manager

Add Text Widget 01:

Custom HTML

<div class="custom-dropdown-list fold-out hover">
	<span>USD <i class="fa fa-plus"></i></span>
	<ul class="fold-out-drop  drop-shadow">
	<li><a href="#">USD - US Dollar</a></li>
	<li><a href="#">EUR - Euro</a></li>
	<li><a href="#">GBP - British Pound</a></li>
	li><a href="#">INR - Indian Rupee</a></li>
	</ul>
</div>

Add Text Widget 02:

Custom HTML

<div class="custom-dropdown-list fold-out hover">
	<span>English <i class="fa fa-plus"></i></span>
	<ul class="fold-out-drop drop-shadow">
	<li><a href="#">EN - English</a></li>
	<li><a href="#">FR - French</a></li>
	<li><a href="#">DE - German</a></li>
	<li><a href="#">JA - Japanese</a></li>
	<li><a href="#">VN - Vietnam</a></li>
	</ul>
</div>

Add Text Widget 03:

2. Build Top Bar Right

Add Custom Menu and G5Plus – Social Profile Widget to “Top Bar Right” Area

Add Custom Menu Widget

For more information create menu: Cick here

Add G5Plus – Social Profile Widget :

3. Upload logo

Go to ThemeOptions >> Logo Setting tab, do follow:

Go to Apperance >> Menus, do follow:

5. Header Settings

Go to ThemeOptions >> Header tab, then setting below

————-

If you have any troubles configuring your website applications with the above settings you can contact the G5Plus Support team by signing up and submit a new topic. We will be glad to assist you.

Thank you very much for choosing G5Theme!

How To Use Custom Footer in MOWASALAT/ORGANIZ/BEYOT theme

This guide only uses for MOWASALAT, ORGANIZ and BEYOT theme!

Custom Footer function is extra Footer Area building options in some themes developed by G5Theme. It have not been included in these theme items: ORSON,PITHREE, PORTON, HEARTSTONE, ACADEMIA, MEGATRON, HANDMADE, WOLVERINE, DARNA, INNOVATION, GROVE, ZORKA, CUPID.

In this article we will show you How To Create and Use Custom Footer on MOWASALAT theme. It’s the same way with using Custom Footer in ORGANIZ and BEYOT theme. In these themes, you can build Custom Footer by Visual Composer elements, then set it to be Above Footer (remain Main Footer) or replace Main Footer in the Theme Options and in Preset as well.

To learn more about “How to build Main Footer” please refer to our article here: https://support.g5plus.net/knowledge-base/how-to-build-main-footer/

This video focuses on Custom Footer function in G5Theme Options. This video explains how the Custom Footer work and how to use them properly on your website.

Some instances you’d want a page/post have a different footer than the rest of your sight, you can use Custom Footer function in G5Them Options

1. Add New Custom Footer

custom-footer-add-new

Add new an Custom Footer item

2. Set Custom Footer in Theme Options (or Preset)

You use this function to create a new Custom Footer that:

You can set it to be Above Footer (remain Main Footer)
You can set it to replace Main Footer

in Theme Options or Preset Settings

Custom Footer in Theme Options

How To Build Main Footer

This guide use for these theme: ZORKA, DARNA, GROVE, MEGATRON, HANDMADE, ACADEMIA, PITHREE, ORSON, RICA, ARVO, MOWASALAT, MOVECO, ORION, BEYOT, ORGANIZ

The main portion of the Footer Area is a widgetized section that can display widgets in 1-6 columns. Widgets add various content or features to your site. They can be added, removed, and rearranged in the Appearance > Widgets tab on your WordPress admin panel.

Add Widgets To The Footer

Step 1 – Navigate to Appearance > Widgets to access the widgets and footer widget sections.

Step 2 – You will see a ‘Footer Widget X’ (Footer 1/Footer 2..) section on the right hand side for each footer column you selected to have in Theme Options.

Step 3 – On the left hand side are your widgets, simply drag and drop the widgets you want from the left side into the ‘Footer Widget’ sections on the right side. See the screenshot below.

Add widget

Footer Settings

Navigate to the Appearance > Theme Options > Footer panel and switch the ‘Main Footer’ option to On to Enabled Main Footer . Set how many columns you’d like to display by customizing the Layout option.

NOTICE: Recently, we use Content Block (Content Block is specific layout of Visual Composer elements saved) to display in Footer area. Please consult this guide: https://support.g5plus.net/knowledge-base/how-to-use-content-block/ for further details.

———

If you have any troubles configuring your website applications with the above settings you can contact the Support Center by signing up and submit a new topic. G5Theme Support Team will be glad to assist you.
Thankyou for choosing G5Theme!

How to Build One-page

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 G5Theme can help you do it easily with below instruction:

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 below video guide, we used ORSON theme for example but this process is similar to the process of building OnePage on other G5Theme item.

———

Specially, on ORION Theme, we have 2 styles of OnePage: OnePage and OnePage Float

OnePage Float style was used for Home Creative Designer Dark Demo
OnePage style was used for Home Creative Designer Demo

In ORION, after 2 steps building content to your Homepage as above, 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

How To Change Language in G5Theme Using LOCO Translate Plugin

Themes that support multi-language is not an automatically translate content function, it is the feature that allows us to write more than one language on the website. It means that you have to translate the phrase in theme and plugins into many different languages by yourself.

Translating using Poedit

First of all, you will need to download .PO/.pot file editor like Poedit or other. It is possible to use any text editor but it will be so much easier to use Poedit than regular text edit so I strongly recommend to download it. It’s free, works on Mac, Windows, and Linux and there is no reason not to use it.

I had an article on How to change languages via po/mo file which makes it easier to use Poedit to translate G5Theme into your own language.

Translating using LOCO Translate plugin

We hope you find out how to translate a WordPress theme and now can give back to the community by translation themes and plugins for others to use. G5Theme proudly provides Premium WordPress themes with over 5000 satisfied users every year and we hope you will do that with theme translations as well.

How to Fix Load Google Maps Correctly

1. Fix error google map doesn’t work

You might be see screen as the below screenshot when face to error google maps doesn’t work:

This is guide apply for HandMade Theme, other themes do the same
Step 1: Go to google-map.php file with path:
“your folder\wp-content\plugins\handmade-framework\includes\shortcodes\google-map\google-map.php”

Step 2: Edit google-map.php file:
Replace code ‘//maps.google.com/maps/api/js?v=3.15&sensor=false&libraries=places’ by ‘//maps.googleapis.com/maps/api/js’ (line 28) as here:

Step 3: Save and upload google-map.php file come back.
google-map.php file after edit:

– Back to frontend then Ctr+F5(or remove cache) to check.
Result:

2. Fix “This page didn’t load Google Maps correctly” error

Are you seeing “This page didn’t load Google Maps correctly” in place of maps on your website? This error has become a lot more common since Google Maps started requiring an API key on June 22, 2016 (after about 10 years of allowing keyless use). If you started using Google Maps on your website on or after that date then you will need to sign up for and implement a free API key (older users still do not need a key).

This guide will show you to know how to fix the “This page didn’t load Google Maps correctly” error on their website.

Step 1: Please go to domain below then create a project:

Step 2:

Step 3:

Step 4:

After have API key, enter it to shortcode Google Maps. In case you don’t see it, please update to latest version of shortcode, guide line here: https://support.g5plus.net/knowledge-base/how-to-update-shortcodeframework-plugins-to-latest-version/

If you 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. We will be glad to assist you.

Thank you very much for choosing G5Theme!!

How can I show on my-account page all the download items in the Downloads?

NOTE: This article apply for Academia theme.
To show all the download items in the Downloads on my-account page do follow step by step to show all the download items.

1. Check woocommerce version, if version lower 2.6.1 won’t have Downloads page, need update to 2.6.1 or higher.

2. Setting product to downloadable

3. Grant access for downloadable products
3.1 Automatically:
You need settings “Grant access to downloadable products after payment” as image:

3.2 Manual:
You need un-check step 3.1, then after customers have payment order, go to order and grant access

After done all steps above, go to my-account page -> tab Download will see products display look like
That’s all. Thanks for your watching.
If you’re still having trouble upgrading your theme after reading this post, let us help! G5Theme awesome support team can help you with any issue, so please create topic or send us an email to g5plus@outlook.com
G5Theme.

How To Install Demo Settings and Demo Data

This guide do NOT uses for these theme: ZORKA, DARNA, GROVE, MEGATRON, HANDMADE, ACADEMIA, PITHREE, ORSON, RICA, ARVO, MOVECO, ORION

After installation & activated process of G5Theme theme, you can build a fully functional website just by clicking one button to install demo settings as well as demo data and you can use these templates to develop your own website.

Go to G5Theme → Install Demo (To some themes such as April/Emo/Oars etc “G5Theme” section could be changed by “G5Plus-theme-name”)

install-demo-data-1

Then choose option button to install demo as you want:

Only Setting: Click this button to install only demo settings
Install: Click this button to install all settings with demo data of april

Import demo Content in One Click03

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

Import Status Bars

Note: Don’t forget to setup Permalinks

You can create a custom URL structure for your permalinks and archives. Custom URL structures can improve the aesthetics, usability, and forward-compatibility of your links. You should ensure that a non-default permalink setting is selected, e.g. Month and name in Settings → Permalinks .Then select Post name and click Save Change

Congratulations, you have now install G5Theme theme completely!

This video focuses on How to install Demo Settings as well as Demo Data properly on your website (the theme we used for example is MOWASALAT).

To these theme: ZORKA, DARNA, GROVE, MEGATRON, HANDMADE, ACADEMIA, PITHREE, ORSON, RICA, ARVO, MOVECO, ORION please consult this video guide on How to install an G5Theme item via WordPress and install all demo data (ex: ORSON)

——————–

If you 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.

How to Change Portfolio Fields Name Extra Attributes on BackEnd/FrontEnd?

This article will focus on show you How to change fields name Portfolio on backend and frontend (ex: Darna theme), it may be work similar to others G5Theme items.

Solutions:
1. Change via languages file(po/mo):
Please refer our guide on How to Change Language: https://support.g5plus.net/knowledge-base/how-to-change-languages-via-pomo-file/

2. Change via update/edit php files (it will lost when you update plugins to latest version, so you need backup carefully before):
2.1 Change on Backend Editor:

Edit file portfolio.php on path: \plugins\darna-framework\includes\shortcodes\portfolio then change as below:

2.2 Change on FrontEnd Editor:

Edit file small-slider.php on path: \plugins\darna-framework\includes\shortcodes\portfolio\templates\single then change like this:

Done.

Hopefully this guide can help you change Portfolio fields name extra attributes on BackEnd/FrontEnd fastest.
If you have any troubles configuring your website applications with the above settings you can contact the Support Center by signing up and submit a new topic. G5Theme Support Team will be glad to assist you.