Kerge v3+

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find kerge.zip file which is the WordPress theme.

You can install the theme in two ways:

1. Upload theme using WordPress admin panel

• Navigate to Appearance -> Add New Themes -> Upload page.
• Select kerge.zip file.
• Press the Install Now button to upload and install the theme.
• After uploading the theme, you need to activate it. Navigate to Appearance -> Themes page to activate the theme.
• Also, navigate to Appearance -> Theme Options page and click Save changes button to activate theme options settings.

2. Upload theme via FTP

• Extract kerge.zip file
• Upload the extracted folder to /wp-content/themes/ folder on your server.
• After uploading the theme, you need to activate it. Navigate to Appearance -> Themes page to activate the theme.
• Also, navigate to Appearance -> Theme Options page and click Save changes button to activate theme options settings.

Once the theme is activated you will be asked to install the following plugins. Please install and activate all of them:

1. Unyson
2. Kerge Contact Form
3. Kerge Portfolio
4. Kerge Share Buttons
5. Kerge Shortcodes
6. Kerge Tracking, External CSS and JS
7. Envato Market

Click on the "Begin installing plugins" link.

Click on the "Install" link of all plugins.

Click on the "Return to Required Plugins Installer" link of all plugins.

Click on the "Activate" link of all plugins.

Click on the "Return to the Dashboard" link.

Activating Unyson Extensions

Once you install and activate all the plugins required go to Dashboard->Unyson and you will be asked to activate the following Unyson Extensions:

1. Page Builder
2. Portfolio
3. Mega Menu
4. Backup & Demo Content

Please activate all the above four.

This is built on Unyson framework, so implementing demo contents is a little different and way easier than usual WordPress demo content import.

The demo content file is already inside the theme file you downloaded. All you have to do is follow the below steps to make your website look like our demo.

1. Go to Dashboard->Tools->Demo Content Install
2. Install the Kerge Theme Demo. This will take a few minutes and once the import is complete you will be redirected to the home page
3. Refresh permalinks. Go to Settings->Permalinks, and simply click on Save Changes button.

Animated Demos:

1. Kerge Theme Demo - Animated (Main Demo)
2. Kerge Theme Demo 2 - Animated
3. Kerge Theme Demo - Animated Dark
4. Kerge Theme Demo 2 - Animated Dark

Multi-page Demos:

1. Kerge Theme Demo - Multi-page
2. Kerge Theme Demo 2 - Multi-page
3. Kerge Theme Demo - Multi-page Dark
4. Kerge Theme Demo 2 - Multi-page Dark

One-page Demos:

1. Kerge Theme Demo - One-page
2. Kerge Theme Demo 2 - One-page
3. Kerge Theme Demo - One-page Dark
4. Kerge Theme Demo 2 - One-page Dark

PS: Please note that all the images in our theme preview will be replaced by dummy images in your demo to avoid any possible copyright violations.

There are 3 methods to update WordPress themes to newer version. These new updates are essential if you want to have a bug free website as we give new features and improvements to the theme over time. Some of these updates might be needed in order to make the theme compatible with wordpress newer versions. There is no risk on losing your settings and pages. However if you had done modifications in parent theme files, then they will be lost.

Please note that before updating a theme, we recommend you to make backup of your modified files.

Before beginning the upgrade, please do not forget to backup the database. To do this, go to Admin Dashboard --> Tools --> Backup and click on the Create Full Backup Now button.

1. Via the admin panel

1. Please open Appearance -> Themes
2. Choose another theme (not Kerge or Kerge Child)
3. Delete Kerge theme
4. Install updated theme Kerge version X.X.X (Appearance -> Themes -> Install Themes -> Upload)

2. Using ftp

1. Use ftp-client to open folder with installed theme (../wp-content/themes/);
2. Delete folder Kerge
3. Copy unzipped and updated folder with Kerge theme

3. Using Envato Market Plugin.

More info - Envato Market Plugin.

Do not forget to update the Kerge Theme Plugins. You can find the list of updated Kerge Theme Plugins in Documentation folder (updates.txt).

If you have any problems or questions with the update, then write to us and we will be happy to help you as soon as possible. How to contact us is indicated in the Support section of this documentation.

You can find the list of updated Kerge Theme Plugins in Documentation folder (updates.txt).

Before beginning the upgrade, please do not forget to backup the database. To do this, go to Admin Dashboard --> Tools --> Backup and click on the Create Full Backup Now button.

There are 4 methods to update Kerge theme plugins.

1. Automatic update via the admin panel

After updating the theme, the following message will appear at the top part of the Admin panel:

2. Via the admin panel

1. Please open Plugins
2. Deactivate the updatable plugin
3. Uninstall the updatable plugin
4. Install new version of updated plugin (Plugins -> Add New -> Upload Plugin)

3. Using ftp

1. Use ftp-client to open folder with installed theme (../wp-content/themes/);
2. Delete folder Kerge
3. Copy unzipped and updated folder with Kerge theme

4. By replacing / adding files

You can find the list of updated plugin files in Documentation folder (updates.txt).

If you have any problems or questions with the update, then write to us and we will be happy to help you as soon as possible. How to contact us is indicated in the Support section of this documentation.

In order for your main page with subpages to be displayed first when the site is loaded, you need to do the following:

1. Go to Dashboard -> Appearance -> Customize -> Static Front Page.
2. Front page displays set A static page
3. Front page set Main
4. Posts page set Blog

To create and edit menus go here: Appearance -> Menus

To create a new menu, click on this link:

Menu settings

In the menu settings, you need to select this Display location: "Classic Menu NEW (Recommended)"

In the animated and single-page versions, all pages are combined into one page and displayed as subpages.

How to create an Animated or One-Page website:

1. Create a new page named "Main" or "Home". (Admin Panel -> Pages -> Add New). IMPORTANT: this page does not need to be added to the main menu.

2. Select a template in the page settings. For the Animated version: "Kerge vCard Animated NEW". For One-Page version: "Kerge vCard One Page NEW".

   

3. Select the page named "Main" created in the first paragraph of this instruction as the Front page of WordPress. How to do this is described here.

4. Add the pages you want to the main menu, they will automatically become animated (Appearance -> Menus).

   

   If you want to add a page and it opened as a separate page, without animation, then use the Custom Link for this:

   

In this version, the pages are displayed separately, not in the form of subpages, without animation effects when navigating.

For the Home page you need to select the Kerge Start Page template:

Unyson frameworks supports the shortcodes and page builder used in Kerge Theme. Using Unyson page builder is pretty easy and self-explanatory.

Setting up a visual page builder:

1. Go to Dashboard -> Unyson.

2. Click the Settings link of the Page Builder extension.

   

3. Activate Page Builder for:

   • Blog Posts
   • Pages
   • Projects

   

Create pages using the Visual Page Builder. Shortcodes.

There are 4 main types of design elements as follows:

Layout elements – They help you create columns.

1. 1/1, ½, 1/3, ¼, 1/6, 2/3 and ¾ elements – Create columns with widths as indicated by their names. For example a ½ element creates a column 50% the width of the page.
2. Section – It creates a full width area where you can add contents and images. You can add a background color or image for this area. It has lots of options which are given in detail there.

Content Elements – It consists of a number of design elements.

1. Calendar – Will help create a calendar of busy days.
2. Divider – Horizontal divider and white space.
3. Icon – Icon.
4. Icon Box – Icon + Titile + Text.
5. Special Heading – Add a Special Hedding.
6. Team Member – Team member.
7. Text Block – Text.
8. Widget Area – Add a widget area.

Kerge Elements – These are shortcodes we created specially for Kerge WordPress theme.

1. Accordion – Add a Accordion.
2. Block Title – Add a Block title.
3. Blog Posts – Add a Blog posts grid.
4. Button – Add Button.
5. Client – Add a Client block.
6. Clients Slider – Add a slider with logos.
7. Contact Form – Add a Contact form.
8. Contact Form 2 – Add a Contact form with the ability to edit and add fields.
9. Info Block – Add a Info block (for example: Contact info).
10. Infol List – Add the information list: title + description.
11. Infol List 2 – Add the information list: icon + description.
12. Map – Add Google map.
13. Page Title – Add a Title for the page.
14. Portfolio – Add a Grid with your projects.
15. Quote – Add a Quote.
16. Service – Add a block with information about the service.
17. Skills – Add a block with skills.
18. Social Links – Add Social icons.
19. Table – Add a Table. Two options: a regular table and a table with prices.
20. Tabs – Add tabs.
21. Testimonials Slider – Add a slider with reviews.
22. Timeline – Add a Timeline. For example work experience and education.

Kerge Media Elements.

1. Image – Add responsive images.
2. Video – Add YouTube or Vimeo responsive video.

Kerge Theme comes with a very powerful Theme Settings panel based on Unyson Framework. After the theme and Unyson plugin are installed you can access this panel by logging into the WordPress dashboard and clicking on Appearance -> Theme Settings.

General Settings

This tab contains the main theme settings:

1. Header Title
2. Header Subtitle
3. Image Logo
4. Logo Image Height
5. Logo Image Width
6. Social Icons
7. Copyrights

Start Page Settings

This tab contains the settings for the start page. There are two styles of the start page in the Kerge theme: First style and Second style.

First Style Settings

1. Start Page Style: First Style
2. Main Title
3. Subtitles Carousel
4. Start Page Background
5. Start Page Overlay

Second Style Settings

1. Start Page Style: Second Style
2. Start Page Background
3. Main Title
4. Subtitles Carousel
5. Text
6. Buttons

Theme Design

This tab contains the theme design settings such as fonts, background color, main color, etc.

Theme Design

1. Content Area Max Width
2. Main Theme Color
3. Body Background Color
4. Blog Sidebar Background Color
5. Start Page Title Color
6. Start Page Subtitle Color
7. Links Color
8. Links Hover Color
9. Show Blog Sidebar
10. Display the Search Field in the Header
11. Random Animation of Subpages
12. Display Arrow Navigation for Subpage Animations

Site Header Design and Design of the Main Menu

1. Site Header Width
2. Site Header Background Color
3. Header Title Font
4. Header Subtitle Font
5. Main Menu Font
6. Main Menu Borders Color
7. Main Menu Hover Background Color

Page Titles

1. Page Titles Style
2. Background Color
3. Title Font

Background Color of the Area with the Content of the Page

1. Background Color

Typography

In this tab you can customize the typography.

1. Body Text
2. Headings Font
3. H1 Size
4. H2 Size
5. H3 Size
6. H4 Size
7. H5 Size
8. H6 Size

Contact Form Settings

This tab contains the basic settings for shortcodes Contact Form and Contact Form 2. The remaining settings are contained in the shortcodes (in the Unyson Visual Page Builder).

1. Your Email Address
2. Hosting Admin Email Address
3. Message Subject
4. Start of Message that will be Sent
5. Successful Message
6. Error Message
7. Google reCaptcha v2: On
8. Google reCaptcha v2 Site Key
9. Google reCaptcha v2 Secret Site Key
10. Please click on the reCAPTCHA box Message
11. Robot Verification Failed Message

Custom CSS and JS

In this tab, you can add custom styles, connect external files with custom styles, add custom JavaScript code, connect external files with JavaScript code.

1. Custom CSS
2. External CSS
3. External JS

SEO

In this tab, you can paste the Google Analytics code, or the code of another analytics system.

1. Tracking Code (head)
2. Tracking Code (head)

Portfolio Settings

This tab contains the main settings for the portfolio.

1. Custom Portfolio Titles
2. Description Title
3. Technology Title
4. Share Title
5. Display a Sidebar with a Description, Tags and Share Links
6. Display Fields and Blocks in the Description Block
7. Display Sidebar on the Left or Right Side
8. Load More Feature
9. Number of Projects Displayed by Default
10. Load More Button Text
11. Load More Button Text on Loading

In version 2.0 of the theme, we added the ability to change the color scheme from light to dark. All demo content options are available for installation.

In order to change the color scheme from light to dark, you need to do the following:

For Demo Content Version 1 (Animated and Multi-page)

1. Go to Admin Panel --> Appearance --> Theme Settings --> Theme Design
2. Set values for the following settings:

   Theme Design:
   "Body Background Color" : #000000
   "Blog Sidebar Background Color" : #333333
   "Start Page Title Color" : #333333
   "Start Page Subtitle Color" : #888888
   "Theme Style" : "Dark"
   
   Site Header  Design and Design of the Main Menu:
   "Site Header Background Color" : "#222222" or "rgba(34, 34, 34, 1)"
   "Header Title Font" : #f5f5f5
   "Header Subtitle Font" : #eeeeee
   "Main Menu Font" : #f5f5f5
   "Main Menu Borders Color" : #333333
   "Main Menu Hover Background Color" : #333333
   
   Page Titles:
   "Background Color" : #666666
   "Title Font" : #f5f5f5
   
   Background Color of the Area with the Content of the Page
   "Background Color" : "#222222" or "rgba(34, 34, 34, 1)"

3. Save changes
4. Go to Admin Panel --> Appearance --> Theme Settings --> Typography
5. Change the following settings:

   "Body Text" : #d5d5d5
   "Headings Font" : #f5f5f5

6. Save changes. If the changes have not been applied, then clear your browser’s cache.

For Demo Content Version 2 (Animated and Multi-page)

1. Go to Admin Panel --> Appearance --> Theme Settings --> Theme Design
2. Set values for the following settings:

   Theme Design:
   "Body Background Color" : #000000
   "Blog Sidebar Background Color" : #333333
   "Start Page Title Color" : #333333
   "Start Page Subtitle Color" : #888888
   "Theme Style" : "Dark"
   
   Site Header  Design and Design of the Main Menu:
   "Site Header Background Color" : "#222222" or "rgba(34, 34, 34, 1)"
   "Header Title Font" : #f5f5f5
   "Header Subtitle Font" : #eeeeee
   "Main Menu Font" : #f5f5f5
   "Main Menu Borders Color" : #333333
   "Main Menu Hover Background Color" : #333333
   
   Background Color of the Area with the Content of the Page
   "Background Color" : "#222222" or "rgba(34, 34, 34, 1)"

3. Save changes
4. Go to Admin Panel --> Appearance --> Theme Settings --> Typography
5. Change the following settings:

   "Body Text" : #d5d5d5
   "Headings Font" : #f5f5f5

6. Save changes. If the changes have not been applied, then clear your browser’s cache.

In order to change the color scheme from dark to light, you need to do the following:

For Demo Content Version 1 (Animated and Multi-page)

1. Go to Admin Panel --> Appearance --> Theme Settings --> Theme Design
2. Set values for the following settings:

   Theme Design:
   "Body Background Color" : #f5f5f5
   "Blog Sidebar Background Color" : #ffffff
   "Start Page Title Color" : #ffffff
   "Start Page Subtitle Color" : #ffffff
   "Theme Style" : "Light"
   
   Site Header  Design and Design of the Main Menu:
   "Site Header Background Color" : "#ffffff" or "rgba(255, 255, 255, 1)"
   "Header Title Font" : #333333
   "Header Subtitle Font" : #9c9c9c
   "Main Menu Font" : #333333
   "Main Menu Borders Color" : #f5f5f5
   "Main Menu Hover Background Color" : #fcfcfc
   
   Page Titles:
   "Background Color" : #eeeeee
   "Title Font" : #333333
   
   Background Color of the Area with the Content of the Page
   "Background Color" : "#ffffff" or "rgba(255, 255, 255, 1)"

3. Save changes
4. Go to Admin Panel --> Appearance --> Theme Settings --> Typography
5. Change the following settings:

   "Body Text" : #666666
   "Headings Font" : #333333

6. Save changes. If the changes have not been applied, then clear your browser’s cache.

For Demo Content Version 2 (Animated and Multi-page)

1. Go to Admin Panel --> Appearance --> Theme Settings --> Theme Design
2. Set values for the following settings:

   Theme Design:
   "Body Background Color" : #f5f5f5
   "Blog Sidebar Background Color" : #ffffff
   "Start Page Title Color" : #ffffff
   "Start Page Subtitle Color" : #ffffff
   "Theme Style" : "Light"
   
   Site Header  Design and Design of the Main Menu:
   "Site Header Background Color" : "#ffffff" or "rgba(255, 255, 255, 1)"
   "Header Title Font" : #333333
   "Header Subtitle Font" : #9c9c9c
   "Main Menu Font" : #333333
   "Main Menu Borders Color" : #f5f5f5
   "Main Menu Hover Background Color" : #fcfcfc
   
   Background Color of the Area with the Content of the Page
   "Background Color" : "#ffffff" or "rgba(255, 255, 255, 1)"

3. Save changes
4. Go to Admin Panel --> Appearance --> Theme Settings --> Typography
5. Change the following settings:

   "Body Text" : #666666
   "Headings Font" : #222222

6. Save changes. If the changes have not been applied, then clear your browser’s cache.

Shortcodes Contact Form and Contact Form 2 work with the help of our plugin Kerge Contact Form.

In order for the contact form to start functioning, you need to specify your email address: Admin Panel --> Appearance --> Theme Settings --> Contact Form tab --> Your Email Address field. Example: [email protected].

Some hosting providers forbid the sending of messages from their server without specifying the real address of the hosting administrator. In this case, you need to provide your email address: Admin Panel --> Appearance --> Theme Settings --> Contact Form tab --> Hosting Admin Email Address. Examples of such addresses are: [email protected], [email protected]. On the example of our demo: [email protected].

Important: when testing the contact form, letters can get into the spam folder, depending on the settings of your mailbox. So if you are having problems, do not forget to check this folder. If you have any questions, we will gladly help you - SUPPORT.

To add a new project, go to Portfolio -> Add New.

There are five types of projects available - Portfolio Type block (this is how it will be displayed when you click on a project in the projects grid - Kerge Portfolio Shortcode):

1. Standard - A detailed project page that opens with the help of Ajax.
2. Lightbox Featured Image - An enlarged image that opens when clicking on a project cover image in the projects grid.
3. Lightbox Video - A video that opens when clicking on a project cover image in the projects grid.
4. Lightbox Audio - SoundCloud audio that opens when clicking on a project cover image in the projects grid.
5. Direct URL - Link to a page or external resource.

Note: For each project must be selected at least one category.

More about the standard type of portfolio

In addition to the basic options for this type of portfolio, you can fill the block with the content of the page, for example here you can place such shortcodes as video, image or just additional textual information.

Project Cover Image

This is an image that will be displayed in the portfolio grid (in our demo this is the Portfolio page). This block is required.

About Shuffle js plugin: This JS plugin is responsible for displaying the projects (figure with an Project Cover Image) in the portfolio grid as it possible tightly to each other + it is responsible for sorting projects into categories (filters).

Project Gallery

This block is relevant only for the Standard Portfolio Type. The recommended images width is minimum 800 pixels. The height of the images in the gallery may differ, the height of the slider will be adjusted automatically to the height of the active image.

"Load More" Feature

With this feature, you can display a certain number of projects in the portfolio grid, in addition, the "Load more" button will be displayed, clicking on which additional projects will be loaded. To activate this feature, go to: Administrator Panel --> Appearance --> Theme Settings --> Portfolio tab --> Load More Feature --> On.

Portfolio Shortcode: Display projects from certain categories

In the version 1.1.0 we added the ability to display projects only from certain categories.

With this feature, you can display this shortcode on various pages, thereby dividing the types of projects. Shortcode Portfolio can be added only to pages, it can not be placed in projects (Standard Project Type).

Using this functionality:

1. Add a shortcode Portfolio to the page layout using the Visual Page Builder

2. In the Shortcode Portfolio settings, add the categories you want to display. If this field is empty, portfolio projects from all categories will be displayed.

   

Link format for embedding videos in the Media Video shrtcode and in the Portfolio project page:

YouTube: https://www.youtube.com/embed/id. Example: https://www.youtube.com/embed/w5tWYmIOWGk

Vimeo: https://player.vimeo.com/video/id. Example: https://player.vimeo.com/video/97102654

You can add Instagram Feed to any page of your site, for this you need to do the following:

1. Install and activate this plugin - Instagram Feed. Instructions for installation.

2. Go to the settings page of this plugin. Admin Panel --> Instagram Feed.

3. Click on the button "Log in and get my Access Token and User ID":

   

4. After that, copy the received User ID in the field Show Photos From: User ID(s):

   

5. Save changes

6. Go to the page editing page, to which you want to add the Instagram Feed

7. Add Shortcode Text to page layout. Paste the following code [instagram-feed] into it:

   

8. Save changes.

We've used various types of fonts in this theme.

1. Oswald (Google fonts).
2. PT Sans (Google fonts).
3. Poppins (Google fonts).

• Unyson Framework - http://unyson.io/
• Bootstrap - Bootstrap JS.
• imagesloaded.pkgd.min.js - Detect when images have been loaded.
• jquery.shuffle.min.js - Categorize, sort, and filter a responsive grid of items.
• jquery.magnific-popup.min.js - Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
• masonry.pkgd.min.js - Cascading grid layout library
• modernizr.custom.js - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
• owl.carousel.min.js - Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
• page-animations.js - Page transitions and ajax loaded pages.
• validator.js - Contact form validator.

1. Q: I edit the menu, but the changes do not apply

   A: For the Main page with subpages (Resume, Services, Portfolio, etc.), the menu is created automatically using widgets. More about the Main Page and widgets you can read here and here. More about the Main Menu you can read here.

2. Q: How to Fix WordPress Posts Returning 404 Error.

   A: Go to Settings -> Permalinks, and simply click on Save Changes button. Read more - http://www.wpbeginner.com/wp-tutorials/how-to-fix-wordpress-posts-returning-404-error/

3. Q: The detailed portfolio page does not load

   A: Go to Settings -> Permalinks, and simply click on Save Changes button. Read more - http://www.wpbeginner.com/wp-tutorials/how-to-fix-wordpress-posts-returning-404-error/

4. Q: How can I change the default words?

   A: As example: Install and activate this plugin - https://wordpress.org/plugins/replace-default-words/, then go to the Admin Dashboard -> Tools -> RDW and in the "Enter the default word" for example enter Send message, and in the field "Enter the new word" your new words.

5. Q: How can I translate WP theme and plugins?

   A: As example: With the help of this plugin - https://wordpress.org/plugins/loco-translate/. Documentation/Instruction - https://localise.biz/wordpress/plugin/beginners .

6. Q: Design changes do not apply.

   A: 1. Clear your browser's cache. 2. Clear your server's cache (hosting). On an example of hosting from GoDaddy: Go to WordPress Admin Panel -> Top Panel -> GoDaddy -> Flush Cache. If this does not help, then most likely the problem is in the incorrect server settings, in this case it's best to contact your hosting support, but also we can help, for this we need access to the administrator's panel of your site and FTP access to the hosting.

7. Q: How can I use the Brizy Page Builder?

   A: At the moment, our theme is not support the Brizy Page Builder, instead of it in our theme is used Unyson Visual Page Builder.

8. Q: Google Maps do not work.

   A: June 11th, 2018 Google has changed the Google Maps API rules. You just need to create your key and replace our one, which we used in the demo data: Admin Panel -> Pages -> Contact -> Map Shortcode -> Google Maps API key.

   A link to the Google console is available in the same place, in the shortcode settings.

9. Q: What are the minimum requirements for the host?

   A: Recommended requirements for the host.

10. Q: Where can I customize my Home Page / Start Subpage (change title, subtitles, photo, etc.)?

    A: Admin Panel --> Appearance --> Theme Settings --> Start Page tab.

If you have any questions or need help don’t hesitate to contact us via Support Form (we respond to messages sent via this form as quickly as possible). We do not provide support through comments. All frequently asked questions will be added to the FAQ section of this documentation.

Our team will help you within one working day, usually we respond within one hour, some delays are possible on weekends (given the difference in time zones).

Once again, thank you so much for purchasing this theme. As We said at the beginning, We'd be glad to help you if you have any questions relating to this theme.

LMPixels Team