USER GUIDE

This guide provides instructions for installation, help on getting started and extensive documentation of features.

Getting Started

To install this theme you must have a working version of WordPress already installed.

If you need help installing WordPress, below are all the useful links for WordPress information.

Installation

First, download the Overlap files from your ThemeForest account. Navigate to your Downloads tab on ThemeForest and find "Overlap - High Performance WordPress Theme". Click the download button to see the download options.

Download All Files  

Alternatively you can simply download the installable WordPress file.

Download Theme Only  

Package Content

If you download "All files & documentation", you will receive the main package zip file.

Zip package contains the following files and folders:

1. WordPress Theme
2. Demo Content
3. Documentation

Documentation\index.html

4. Plugins

 

Theme Installation

You can install the theme in 3 ways as follows:

Install via WordPress

1. Navigate to Appearance > Themes.

2. Click "Add New" button and hit the "Upload Theme" button.

3. Click on "Choose File" and find the “overlap.zip” file on your computer and click “Install Now” button.

4. The theme will be uploaded and installed.

5. Go to Appearance > Themes and activate it.  

Install via cPanel

1. In cPanel File Manager, navigate to "/wp-content/themes/". If your WordPress is installed in the document root folder of your web server you would navigate to "public_html/wp-content/themes/".

2. Click on Upload button to upload overlap.zip from "WordPress Theme\overlap.zip", see Package Content.

3. Once the file is uploaded, select this file. Then click on Extract button to extract it.

4. Go to Appearance > Themes on your WordPress admin page to activate it.

Install via FTP

1. Unzip the overlap.zip file and only use the extracted overlap theme folder.

2. Upload the extracted overlap theme folder into "/wp-content/themes/" folder.

3. Go to Appearance > Themes on your WordPress admin page to activate it.

Plug-ins Installation

After theme activation, you will see a notification message to install the required & recommended plugins.

  1. Wyde Core
  2. WPBakery Page Builder
  3. Slider Revolution
  4. Contact Form 7

The required plugins is Wyde Core and the bundled plugins are WPBakery Page Builder, Slider Revolution and Contact Form 7.

Click on Begin installing plugins, you will see the Install Bundled Plugins page.

Select all plugins and install them.

Then activate the plugins with Bulk Actions.

Update

You can update your theme by downloading a fresh copy from ThemeForest, deleting the current version you have on your server and uploading the new.  

Automatic Update

Using Envato Market Plugin

The Envato Market plugin can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.

 

Download and Install

Unlike most other free WordPress plugins, this plugin isn’t available in the WordPress Plugin Repository. You’ll need to go to Envato Market Github page to download the Envato Market Plugin zip file.

You can install the Envato WordPress Toolkit just like any other plugin. Navigate to the plugins section. Click Add New, then click on Upload Plugin. Browse for the plugin zip file (envato-market.zip) you downloaded from Github. Click Install Now, then Activate the plugin.

Setting Up The Envato Market Plugin

1. Navigate to the Envato Market menu.

2. Click on "generate a personal token" link to generate a Global OAuth Personal Token as follows:

Just click the Create Token button to generate your API key.

3. Copy that key, go to your Envato Market Settings page and enter the key into the Token field, then click on Save Changes.

4. Once you have your list of purchased themes displayed in the Themes tab.

Update Your Themes

When there is an update available for the theme, you will see a notification link to update it.

Lastly, update the included plugins. See Update the plugins.

Manual Update

Update via cPanel

1. In cPanel File Manager, navigate to "/wp-content/themes". If your WordPress is installed in the document root folder of your web server you would navigate to "public_html/wp-content/themes".

2. Click on Upload button to upload overlap.zip from "WordPress Theme\overlap.zip" in the main download package, see Package Content.

3. Once the overlap.zip file is uploaded, click on this file, then click on Extract button to extract it to replace the old "overlap" folder. You can delete the old "overlap" folder before extracting the zip file if you'd like.

4. Lastly, go to your WordPress admin page to update the bundled plugins. See Update the plugins.

Update via FTP

1. Go to "/wp-content/themes" location and backup your “overlap” theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.

2. Download a fresh copy from ThemeForest, Unzip the "overlap.zip" file.

3. Upload the extracted "overlap" theme folder into "/wp-content/themes/" in your wordpress installation.

4. Lastly, go to your WordPress admin page to update the bundled plugins. See Update the plugins.

Update via WordPress

1. You need to deactivate the current “Overlap” theme in the “Appearance > Themes” section by simply activating a different theme. Once you activate a different theme, you can delete the Overlap theme. Don't worry, your content will not be lost.

2. Then simply upload the “overlap.zip” file in the “Appearance > Themes” section. Once it finishes uploading, choose to activate the theme.

3. Lastly, update the included plugins. See Update the plugins.

Update Bundled Plugins

After you update the theme, if there is an update available for the bundled plugins, you will see a notification message letting you know the plugins have a new version and need to be updated. If the notification message was dismissed, navigate to Appearance > Install Plugins to see the bundled plugins list.

Click on Begin updating plugins, you will see the bundled plugins list.

Select all plugins, choose Update action and click on Apply to update all plugins.

Import Demo Content

Our importer will give you pages, posts, portfolios, sliders, widgets, theme options, assigned pages and more. This is recommended to do on fresh installs. It will not replace content but append posts, pages, portfolios and sliders. It will replace theme options, reading settings and widget settings.

Import demo content requires "Overlap Demo Content" plugin, please make sure you've installed and activated it.

To install Overlap Demo Content plugin

1. Navigate to Plugins on your WordPress admin page.

2. Click on "Add New".

3. Click on "Upload Plugin".

4. Choose "overlap-demo-content.zip" form your Demo Content folder (see Package Content), then click on "Install Now".

5. Click on "Activate Plugin" to activate it.

To import the demo content, please see the below steps.

1. Install and activate these plugins before you proceed: Wyde Core, WPBakery Page Builder, Slider Revolution and Overlap Demo Content.

2. Navigate to Theme Options > Home, select the content types to import.

3. Click on a demo icon to import.

4. It can take several minutes to import everything. Please be patient and wait for it to complete.

Import Issue

Demo Import Fails or Times Out

If it keeps getting stuck while importing or get an error icon and other similar issues are all related to low PHP configuration limits.

You can do this on your own by editing the file php.ini on your host, or contact your web host and ask them to increase those limits to the minimum as follows:

max_execution_time = 300

memory_limit = 128M

post_max_size = 32M

upload_max_filesize = 32M

max_input_vars = 5000

Demo Content Duplicated

There are two ways to get rid of duplicate content.

1. WP Reset Plugin – This plugin is the fastest way to get rid of content. It will remove all content from your database and leave the default theme activated. Only do this if you are able to start over. Click Here To Download.

2. Manual Removal – This method will take longer and simply involves manual removing of duplicate items. For example, go to the pages and delete items. Same thing for posts, portfolio, sliders, etc. 

Theme Options

Overlap comes with a User Friendly Theme Options panel. Each option has a description of what it will do on the front-end.

Go to "Theme Options" on your WordPress admin to access the theme options panel. You can also import and export your theme options in the Import/Export tab. That is a great way to move your custom options from site to site.

Primary Navigation

Setting Up The Menu

Menu Locations

Primary Navigation – the main menu in the header area and side menu.

Footer Navigation – the menu that can be assigned to the footer menu.  

To Setup A New Menu, Follow The Steps Below

1. Navigate to Appearance > Menus section of your admin.

2. Click the “Create A New Menu” link to make a new menu. Enter the name then hit the “Create Menu” button.

3. To add a menu item, select one of your created pages on the left hand side and click “Add to Menu”. You can also add all kinds of different posts from the left side.

   

4. To add a custom menu item, enter a custom name and link into the “Links” box.

5. Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section.

6. Choose an icon to add menu icon, and choose a number of columns for the Mega Menu to create Mega Menu.

   

7. After setting up your menu, scroll down to the bottom of the page to assign the menu location in the Menu Settings -> Theme Locations.

8. Once its all done, make sure you click the “Save” button.  

1. Navigate to Theme Options > Navigation

2. Choose a navigation layout, you will see additional options for each layout at the bottom of the page.

3. Select any options to customize the navigation styles. 

Header Transparency

1. Edit the page with Back-end Editor.

2. In the Overlap Options box, select the Header tab.

3. Change the Transparent Header option to Enable.

Header Foreground Style

If the Transparent Header option is enabled, you can choose the header text style for each page. This option can also change the header logo style as well as the menu text style.

1. Edit the page with Back-end Editor.

2. In the Overlap Options box, select the Header tab.

3. If the Transparent Header option is enabled, you will see the Foreground Style option, choose Dark or Light or choose Default for auto-adjust (Light for Dark Background Header, Dark for Light Background).

Header Background Style

If you are using the 1st and 2nd option of the navigation layout (Top Navigation) so you can choose the header style between dark and light in Top Navigation section.

1. Navigate to Theme Options > Navigation

2. In the Top Navigation section, choose Dark or Light for the Header Background option.

Pages 

Create a New Page

1. Navigate to Pages and click Add New.

 

2. Enter a page title.

 

3. Select a page Layout from dropdown list in the Page tab.

Select Wide for creating a Full Width page with the WPBakery Page Builder Page Builder.

 

Or select Boxed to create a regular WordPress page with sidebar or comments box.

 

Show or hide the Discussion box in Screen Options.

 

You will see the Discussion box at the bottom of the page.

 

Check or Uncheck the Allow comments option to show or hide the comments box on the page. You can disable the comments box for all pages in Theme Options.

4. You can select any number of Options in the Page Options box.

5. Use the Visual Composer or HTML editor to build your page content. You can also use our demo content, see Import Demo Content.  

Page Options

Overlap's Options make it easy to customize your content for each page. There are several different sections included in the Overlap Options box, each with its own title and purpose.

You can set sidebar position, apply slider, customize page title area, create a video background or parallax image background, etc. Each option has a description of what it will do.  

Layout Options

Choose the page layout, page comments and sidebar options.

 

 

Header Options

Choose the page header options.

 

Title Area Options

Customize the page title area. Choose to display or hide Page Title, select background type: Background Color, Background Image, Background Video or choose None for apply no background.

 

Background Options

Customize the page background. Choose to display or hide page background, select background type: Background Color, Background Image or choose None for apply no background.

 

Choose to display or hide footer.

 

Create A One Page

Our One Page option allows you to create a one page site from existing pages.

First, you need to create your pages like Home, About Us, Our Services, Contact Us, etc. See also Create a New Page.

Next, setting up a one page website. Please see below for steps on how to do this.

Setting Up One Page Site

1. Navigate to Theme Options and click "Page" tab.

2. Turn on "One Page Website" option

3. Click "Save changes" button.  

Please Note: Your "Home" page will automatically retreive page content from all pages at the first level in the primary menu, please see below for steps on how to set up your home page. To create the primary menu, see Setting up the Menu.

Setting Up Home Page

1. Navigate to Settings > Reading.

2. Select “A Static Page” option.

 

3. Select your home page for the Front Page.

Blog

Create A Blog Page

See also Create a New Page.

1. Go to Pages and click Add New for create your blog page.

2. Input a new name for your blog page.

3. Select the Boxed layout.

4. You can change a Sidebar Position and any options in the Page Options box.

5. Click "Publish" button to save the page.

6. Navigate to Settings > Reading.

7. Select “A Static Page” option.

 

8. Select your Blog page for the Posts page. 

9. Select a Blog Layout and Blog Options for the Posts page in Theme Options.

Create A Blog Post

1. Navigate to Posts in your WordPress admin.

2. Click on "Add New" button to make a new post.

3. Enter a post title.

4. Select a post format from the right side.

5. Insert your post content in the HTML editor field. You can also use WPBakery Page Builder to build your post content.

6. Choose any options in the Overlap Options -> Single Post tab.

  • For the Video and Audio post format, paste the URL into Media URL field in the Media Embed Options box.
  • For the Gallery post format, in Gallery Options box click "Add or Upload File" button to upload new images or select from Media Library.
  • For the Link post format, paste the URL into Post URL field in the Link Options box.
  • For the Quote post format, enter the Quote and Author in Quote Options box.

7. You can set the sidebar position for this post in Sidebar Options box.

8. Add Categories from the right side. To assign it to the post, check the box next to the Category name.

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

10. To set the post featured image, click “Set Featured Image” and upload a new image or select your existing image from Media Library.

11. Once you are finished, click Publish to save the post. 

Blog Post Options

Overlap includes several post options for you to use for each blog post. These options allow you to set different settings for each individual post.

Below are screenshots of each different section included in the Post Options box for each blog post. 

Post Options

 

Post Gallery Options

 

Post Media Embed Options

 

Post Link Options

 

Post Quote Options

 

Post Sidebar Options

 

Portfolio

Overlap includes portfolio template and options. Each portfolio page you create can have a different set of categories, options, layouts and more.

Create A Portfolio Page

See also Create a New Page.

1. Navigate to Pages and click Add New.

2. Input a page title.

3. Add a Portfolio Grid to your page by using the WPBakery Page Builder. Choose any options in Settings window.

4. You can select any number of page options in the Page Options box to customize your portfolio page.

5. Click "Publish" button. 

Create A Portfolio Post

1. Navigate to Portfolio in your WordPress admin.

2. Click on "Add New" button. Input a title.

 

3. Insert your post content in the HTML Editor field. You can use WPBakery Page Builder to build your content.

4. You can select any number of portfolio options in the Portfolio Options box to customize your portfolio post.

5. Add Skills from the right side. Click Add New, type in your skill text and hit enter. To assign it to the post, check the box next to the Skill name.

6. Add Categories from the right side. To assign it to the post, check the box next to the Category name.

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

8. Once you are finished, click Publish to save the post.

Portfolio Options

 

Child Theme

If you would like to modify the theme. The Child Theme is the recommended way of modifying an existing theme.

This theme comes with a child theme called "Overlap Child", see Package Content.

Why use a Child Theme?

To install the Child Theme, please follow the below steps:

  1. Navigate to Appearance > Themes.
  2. Click "Add New" button and hit the "Upload Theme" button.
  3. Click on "Choose File" and find the “overlap-child-theme.zip” file from your computer and click “Install Now” button.
  4. The theme will be uploaded and installed.
  5. And then activate it.
  6. Like any themes, you can also install the child theme via cPanel File Manager and FTP. See Theme Installation.

See more details about Child Theme here: Child Themes

Modification

Please Note: The theme customization and modification are not included in the item support as stated on the Item Support Policy

You will need to do it on your own and here's the guide on how to customize and modify the theme via a child theme.

Please make sure you have a child theme installed and activated. See Child Theme.

To modify the functionality and styling of the theme.

  1. Navigate to Appearance > Editor.
  2. Select the Overlap Child theme to edit.
  3. Add custom CSS into Stylesheet (style.css) to override the styling of the theme.
  4. Add custom functions and WordPress filters into Theme Functions (functions.php) to override the functionality of WordPress and the theme.

To modify the template files of the theme.

  1. Open FTP or cPanel File Manager.
  2. Copy the template file from the theme folder "wp-content/themes/overlap/".
  3. Paste it in your child theme folder "wp-content/themes/overlap-child-theme/". For instance, if you copy the template file from "wp-content/themes/overlap/templates/post/single.php". You have to paste it inside "wp-content/themes/overlap-child-theme/templates/post/single.php".
  4. Edit this file in your child theme so it will override the template from the theme.

See default WordPress template files here: Template Files List

Translation

Translating The Theme

All static words in the theme are available in the POT file that’s ready for translation.

After you extract the Overlap theme file "overlap.zip" you will see the file "overlap.pot" in "overlap/languages/".

Translate the theme by using POEdit

  1. Please make sure you have a child theme installed and activated. See Child Theme.
  2. Open POEdit, then choose File -> New from POT/PO files.
  3. Choose "overlap.pot" from "overlap/languages/overlap.pot".
  4. Find the word, then edit/translate it.
  5. Save it in your current language code such as "de_DE.po", then you will also automatically get "de_DE.mo".
  6. Upload both PO and MO files to your child theme folder "wp-content/themes/overlap-child-theme/languages/" on your web server.

See more on how to translate WordPress theme on WordPress Theme Handbook

Translate the theme by using Loco Translate plugin

You can translate the theme from your WordPress admin page by using the Loco Translate plugin.

  1. Go to Plugins -> Add New to install new plugin.
  2. Find the plugin by typing the plugin name (Loco Translate), then click on "Install Now" to install it.
  3. Click on the Activate Plugin link to activate the plugin.

You can find more details on how to setup and use this plugin on the plugin's Official Page.

WPBakery Page Builder

Overlap includes a license of WPBakery Page Builder by WPBakery.

You can normally use this plugin without registering a purchase code.

Also, if there is a notification message for activating/registering a purchased product, you can ignore it.

With the most popular Drag & Drop Page Builder and custom add-ons content elements. You can build any responsive pages without coding!  

Build Page & Content

1. Click on "Backend Editor" button to build your content in WordPress dashboard page.

2. You will see the WPBakery Page Builder blank page.

3. Click "Add element" button to add new content element.

Select a content element you want to insert into your page or post.

4. Select any Page Options or Post Options for your page or post.

Section Options

Overlap includes several section options for decorate your page layout. Edit row settings to customize the page section.

Row

Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks.

Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows.

To change row's position, click and drag row's drag handler (top left row's corner) and drag row around (vertical axis).

To edit the row settings:

Click on a pencil icon on the top right corner of the row, see the picture below:

 

Then, you will see a Row Settings window:

 

Full Width Section

To create a Full Width section. Select the "Full Width" for Content Width option in General tab.

 

Overlap Options

This theme comes with Overlap feature that allows you to create an overlap content. This feature is included in both Section and Column.

Create an Overlap Section

1. Edit the row, select an Overlap direction so this element will overlap with another element in the selected direction.

2. Set the distance you want an object to be offset from the current position.

3. Choose the stack order.

Create an Overlap Column

Edit the column, choose the Overlap direction and any options of Overlap feature like the Overlap Section above.

However, the column is in the row. If you'd like to create the overlap content between columns in the different rows, you must also enable Overlap feature for the row container and set the Stack Order to ensure the row and its columns will be in front of another row.

Follow the step below to enable Overlap feature for the row container:

1. Edit the row container of this column.

2. Choose the overlap direction.

3. Set the Overlap Distance to 0.

4. Set the Stack Order to 100 or greater.

 

Background Options

 

Parallax Background

1. Add a Background Image.

2. Select a Parallax option.

Background Overlay Color

 

1. Select Color Overlay for Background Overlay option.

2. Select background color and overlay opacity. Default value: 0.8.

WPBakery Page Builder Settings

You can find WPBakery Page Builder settings in WordPress dashboard, Settings > WPBakery Page Builder.

You can enable WPBakery Page Builder to build your post and portfolio post by editing Post types in Role Manager tab as below

 

For more information about WPBakery Page Builder. See the link below.

 

Slider Revolution

Overlap includes a license of Slider Revolution by ThemePunch.

You can normally use this plugin without registering a purchase code.

Also, if there is a notification message for activating/registering a purchased product, you can ignore it.

Revolution Slider Online Documentation.

You can see an Offline Documentation in Package Content.

For more information about Slider Revolution. See the links below.