Introduction

This documentation will give you an understanding of how WebGatha is structured and guide you in performing the most common functions. If you require further assistance, related to topics not covered in this documentation, then please contact us via our support forum.

NOTE: We will not respond to any support questions on the item comment section or through e-mail. If this document doesn’t answer your questions feel free to open up a private ticket in our support forum

If you want to customize this theme as per your requirement, please contact us here: Support Forum.

Requirements

Apart from the necessary WordPress requirements, here are listed recommended server configuration requirements to make the theme’s functions work correctly.

PHP version: 5.6 (minimum) 7.2, or higher (recommended)
memory_limit – 128M, or higher
max_execution_time – 180, or higher
upload_max_filesize – 64M, or higher

Most problems, such as white screen, out of memory error, sample data import failure, etc., usually arrive due to server settings and excessively low PHP configuration limits. You can change the necessary configurations, either by yourself (if your hosting provider allows you to do so) or contact your hosting provider to increase the limits.

So, make sure your server configuration is all set up, and the theme and plugins are working correctly. Enough server configuration will also ensure fast speed and increased performance.

Note Please check the theme requirements before you start with the theme. You can check PHP configuration and limits in Admin Panel > Tools > Site Health > Info [tab]. Site Health tool is built-in in WordPress v5.2 or greater. If you are using WordPress v5.1.x or lower, use Health Check & Troubleshooting plugin.

WordPress Installation

WordPress is one of the most accepted and popular CMS in the world that makes it the best choice for your website.
You can download and install WordPress from the official website using WordPress’ very setup steps called “Famous 5-minute install”.

For more information on WordPress, please, visit the WordPress Codex page.

Theme Installation

We assume that your WordPress website is already set (if not, refer to WordPress Documentation to setup WordPress); the next step is to install the theme.

To get started with theme installation (we assume that you’ve purchased theme at ThemeForest),  you’ll need to download the theme file. To download the theme file, go to ThemeForest Downloads and locate the theme. Click on the download button and select the “Installable WordPress file only.” It will download the WordPress theme zip file for your theme.

Once the download completed, you can proceed with the theme installation. Here are the steps to install the theme:

Option 2: with FTP Client

If you prefer to install your theme via FTP / SFTP, you can. It is a straightforward process. There are some necessary steps which cannot be miss.

For this, first, you need to install an FTP (file transfer protocol) client application. You can use the FileZilla or any other FTP Client, as per your choice and system environments.

Once the FTP client installed, open it and connect to your server (we are using FileZilla for demonstration). For more information on the FTP server, refer to this link.

Now, extract the theme from downloaded zip (Please make sure you’ve downloaded it with “Installable WordPress file only”). Then, navigate to the “themes” folder on your server, it should be at “Your_Website_Root_Folder/wp-content/themes”. Now, upload the extracted “theme” folder in the themes folder on the server.

Option 3: Through WordPress

For this installation method, follow the below steps:

  1. Log in to the WordPress Admin Panel and go to Appearance > Themes.
  2. Click on Add New button on top of the screen.
  3. Click on the Upload Theme button on the top, to upload a zipped copy of the theme (Make sure you’ve downloaded it with “Installable WordPress file only”).
  4. Now, select the zipped copy of the theme and click on the Install Now button.

Note: This method not recommended on the large size of the theme.

Child Theme

WebGatha fully supports child theme. A child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files.

So, child-theme is the safest, most comfortable, and best way to make minor or extensive changes to any theme, while preserving the look and functionality of the original theme.

Using a child theme lets you upgrade the parent theme without affecting and losing the customizations you’ve made to your site.

Theme package contains the “WebGatha Child” child theme. To use the child theme, upload the child theme, from the theme package, in the /wp-content/themes/ folder.

For more information about child theme’s, please refer below links:

https://codex.wordpress.org/Child_Themes

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Sample Data

You can import the sample data by running the setup wizard, or you also can use the theme options for import the sample data. For that first, activate the “WebGatha” theme and run the setup wizard.

Then activate the theme using the purchase code and install the required plugins. After the theme and plugins installations, the next step is to create a child theme if you want to customize it, then you can proceed with sample-data to install sample data. It will help you to understand the content/layout and customize the site quickly. If you want to continue from scratch, you can skip this step. The theme bundled with the sample data. It will create similar to the instance of our demo site ( It is not exactly the same because of the contents/layout of the demo site change time-to-time as per new changes).

To proceed to sample data installation using theme options, go to Theme Options > Sample Data and click on the “Install” button (and Keep Calm). And, the import will run and processed in the background.

You can import additional pages using an Additional pages importer, which contains the additional home pages.

Note: You have to activate the theme first. Without activation of the theme, you can’t import the sample data.

Theme Settings

The theme comes with Theme Options, from where users can control and customize the various portion of the site.

Layout Settings

From this section, you can control the layout of the site, such as Full Width, Boxed, Framed, and Rounded. And also, you can manage the site background. This section contains the below fields:

Name Description
Site Layout As field name suggests, with this, you can select the layout of the site.
Body Background This field depends on the Site Layout field value. This field will appear and is applicable when any site layouts selected except Full Width. This field contains options such as an image and color to be set as background.
Body Background Image This field depends on body background if set as image. You can upload/manage an image to set as background.
Body Background Color This field depends on body background if set as color. You can select a color to set as background.
Enable One Page Layout You can set your site as a one-page site using a single click.

Site Preloader Option

In this section, you can manage the site preloader. This section contains fields to enable/disable preloader, select preloader source, and select preloader image.

This section contains the below fields:

Name Description
Preloader Enable/Disable the preloader on your site.
Preloader Background Color* You can set the background color for the preloader.
Preloader Source You can manage the preloader.
Default – Set default preloader
Predefined Preloader – Select preloader from the predefined preloader list
Custom – Upload your custom preloader

Back to Top

This section provides settings to enable/disable “Back to Top” in desktop and mobile.

This section contains the below fields:

Name Description
Back to Top Enable/Disable back to top button for desktop.
Back to Top For Mobile Enable/Disable back to top button for mobile.

Topbar

In this section, you can enable/disable topbar and manage elements/content in the topbar. This section contains some pre-defined topbar elements, i.e., Language, Currency, Phone Number, Topbar Menu, Email, and Social Profiles.

Some elements are dependent on other plugins or settings in different sections. So, they will appear on front only if the criteria fulfilled.

This section contains the below fields:

Name Description
Topbar
Topbar Enable/Disable topbar for desktop.
Topbar Mobile Enable/Disable topbar for mobile.
Topbar Colors
Color Type You can manage topbar header color schema like background color, text color, link color, and link hover color.
Background Color This field depends on Color Type if set as custom. You can manage the topbar header background color.
Text Color This field depends on Color Type if set as custom. You can manage the topbar header content text color.
Link Color This field depends on Color Type if set as custom. You can manage topbar header content link color and link hover color.
Topbar Elements
Elements You can manage topbar elements. Add/Remove Email, Phone Number, Social Profiles Links, Language Switcher, Currency Switcher, and Topbar Menu.
Note

  1. Language: This content is WPML dependant, and it will be available only if WPML is installed.
  2. Currency: This content is WooCommerce Currency Switcher dependant, and it will be available only if WooCommerce Currency Switcher is installed.
  3. Phone Number/Email: You can manage phone number and email in Theme options > Site Info > Site Contacts tab in WebGatha Theme Options.
  4. Topbar Menu: You can manage the topbar menu from Appearance > Menus.
  5. Social Profiles: You can manage social profiles from Theme options > Site Info > Social Profiles.

Page Settings

In this section, you manage sidebar layout as Full Width, Left Sidebar, or Right Sidebar, for default and search page. You can also set a sidebar for default and search pages.

This section contains the below fields:

Name Description
Default Page Sidebar You can select page layout for pages as full width, left sidebar or right sidebar.
Page Sidebar Widget This field depends on default page sidebar if set as left sidebar or right sidebar. You can select sidebar for page.
Search Page Sidebar You can select search page layout for pages as full width, left sidebar or right sidebar.
Search Page Sidebar Widget This field depends on default search page sidebar if set as left sidebar or right sidebar. You can select sidebar for search page.

Blog Settings

In this section, you can manage the blog page sidebar and blog layout. You can set the layout as Classic, Grid, Grid Large, List, List Large, Masonry, and Timeline.

It also provides the ‘Read word per minute’ settings, based on that it will calculate and provide how much time will take to read the content.

It also provides the option to display select post meta like Categories, Read Time, Date, Author, Tags, Like, View, Comments, and Share.

This section contains the below fields:

Name Description
Blog Sidebar You can set blog page sidebar aligment as full width, left sidebar or right sidebar.
Blog Sidebar Widget This field depends on blog sidebar if set as left sidebar or right sidebar. You can select sidebar for blog page.
Blog Layout You can select blog page layout as Classic, Grid, Grid Large, List, List Large, Masonry, and Timeline.
Content Words Enter the number of the word for display in blog short description.

Read word per minute Enter read word per minute. Based on that it will calculate and provide how much time will take to read the post.
Grid Column Size This field depends on blog sidebar and blog layout if blog sidebar set as full sidebar and blog layout set as grid or masonry. You can set 2 or 3 column layout in blog page
Display Meta Items You can manage post meta for blog page like Categories, Read Time, Date, Author, Tags, Like, View, Comments and Share.

Archive Settings

In this section, you can handle to display archive page descriptions, i.e., Author Info on Author Archive page, Category Description on Category Archive page, and Tags Description on Tag Archive page.

This section contains the below fields:

Name Description
Display Archive Header
  1. Author Info => Display author info in the author archive page.
  2. Category Description => Display category descriptions in category archive page.
  3. Tag Description => Display tag descriptions in tag archive page.

Single Post

In this section, you can set the sidebar layout as Full Width, Left Sidebar, or Right Sidebar for a single post page. You can also set sidebar for the Single post page. You can control meta fields (Categories, Read Time, Date, Author, Tags, Like, View, Comments, and Share) visibility. And, can show/hide Related Posts, Author Details, and Post Navigation.

This section contains the below fields:

Name Description
Single Post Sidebar You can set post detail page sidebar alignment as full width, left sidebar or right sidebar.
Single Post Page Sidebar Widget This field depends on single post sidebar if set as a left sidebar or right sidebar. You can select the sidebar for a single post page.
Display Meta Items You can manage post meta visibility for single post pages like Categories, Read Time, Date, Author, Tags, Like, View, Comments, and Share.
Related Posts You can hide/show related post section in a single post page.
Author Details You can hide/show the author info section in a single post page.
Post Navigation You can hide/show next/previous post navigation in a single post page.

Portfolio

In this section, you can manage portfolio archive and details pages like layouts, columns, style, thumbnail size, etc.

This section contains the below fields:

Name Description
Portfolio Listing
Portfolio Sidebar You can set portfolio archive page sidebar alignment as full width, left sidebar, or right sidebar.
Portfolio Sidebar Widget You can select the sidebar for the portfolio archive page.
This field is available if “Portfolio Sidebar” is set to “Left Sidebar” or “Right Sidebar”.
Portfolio Layout You can manage portfolio layout as a grid or masonry.
Column Size You can set column size as two, three, or four columns.
This field is available if “Portfolio Sidebar” is set to “Full Width”.
Portfolio Style you can manage portfolio style. There are 15 styles for the portfolio.
Show Categories Filters You can manage portfolio filter options.
Portfolio Order By Sort retrieved portfolio by parameters like Title, Date, Modified Date, or ID.
Portfolio Order Designates the ascending or descending order of the portfolio.
Portfolio Fullscreen This option is used to set the portfolio listing page on a widescreen. You can enable/disable full width for the portfolio page.
Portfolio Thumbnail Size You can select a portfolio thumbnail size from the list.
Portfolio Details
Display Portfolio Navigation You can hide/show next/previous portfolio navigation in the portfolio detail page.
Display Related Portfolio You can hide/show related portfolios in the portfolio detail page. The related portfolio depends on the portfolio category.
Related Portfolio Title You can set the related portfolio section title.
This field is available if “Related Portfolio” is set to “Show”.
Portfolio Thumbnail Size You can set the thumbnail size of portfolio section.
Number of Related Portfolio You can set the number of portfolios you want to display in the related portfolio section.
This field is available if “Related Portfolio” is set to “Show”.

Team

In this section, you can manage team archive and details pages like layouts, column, style etc.

This section contains the below fields:

Name Description
Team Listing
Team Sidebar You can set team archive page sidebar alignment as full width, left sidebar or right sidebar.
Team Sidebar Widget You can select the sidebar for the team archive page.
This field is available if “Team Sidebar” is set to “Left Sidebar” or “Right Sidebar”.
Team Content Words Enter number of the word for display in team short description.

Team Layout You can manage team layout as grid or masonry.
Team Column Size You can set column size as two, three or four columns.
This field is available if “Team Sidebar” is set to “Full Width”.
Team Style you can manage team style. There are 15 styles for team.
Show Categories Filters You can manage team filter options.
Team Order By Sort retrieved team by parameter like Title, Date, Modified Date or ID.
Team Order Designates the ascending or descending order of the team.
Team Fullscreen This option is used to set the team listing page on a wide screen. You can enable/disable full width for the team page.
Team Details
Display Team Navigation You can hide/show next/previous team navigation on the team detail page.
Display Related Team You can hide/show related teams on the team detail page. Related team depends on the team category.
Related Team Title You can set a related team section title.
This field is available if “Related Team” is set to “Show”.
Number of Related Team You can set the number team wants to display in the related team section.
This field is available if “Related Team” is set to “Show”.

Product Settings

This section provided settings to product settings like hiver style, catalog mode, label, etc.

This section contains the below fields:

Name Description
After Add to Cart Select action after a click on Add to Cart button as Show popup, Open as a sidebar, or No action.
Product Hover Style Settings
Product Hover Style Select product hover style. There are four styles of product.
Swape Image On Hover You can enable/disable change image on product hover. Swape image comes from the product gallery. If the product gallery image not set then the swape image not working.
Product Title Length You can display product title as full or in a single line.
Display Available Stock Show/Hide available stock count label.
Display Out Of Stock Show/Hide out of the stock label.
Just Catalog Enable/Disable catalog mode. Show/Hide ADD TO CART button from your site.
Hide Price Hide product price on Product pages.
Hide Price for Guest User Hide Price and Add to cart for guest user.
Countdown Timer Show countdown timer for the scheduled date for on sale products.
“Hot” Label
Show “Hot” Label Show/Hide “Hot” label for the featured products.
“Hot” Text You can set the “Hot” label text.
This field is available if “Hot Label” is set to “Show”.
“Sale” Label
Show “Sale” Label Show/Hide “Sale” label for sale product.
Label Type You can set the “Sale” label type as text or percent. If you set as text, then display sale label on sale product and if set as a percent than display discount percent on sale product.
This field is available if “Sale” is set to “Show”.
“Sale” Text This field depends on label type if set as text. You can set the “Sale” label text.

Products Listing

This section provided settings to product listing page like Column, Sidebar, Page Width, Shop Page Banner, etc.

This section contains the below fields:

Name Description
Product Listing Column Select the number of columns for desktop.
Products Columns On Mobile Select the number of columns for the mobile screen.
Product Listing Sidebar You can set product listing page sidebar alignment as full width, left sidebar or right sidebar.
Off Canvas sidebar You can enable the off-canvas sidebar on the shop page.
This field is available if “Product Listing Sidebar” is set to “Left Sidebar” or “Right Sidebar”.
Page Width You can set product listing page width as fixed or wide.
Show Sidebar on Mobile Devices You can enable the off-canvas sidebar on the shop page.
This field is available if “Product Listing Sidebar” is set to “Left Sidebar” or “Right Sidebar”.
Number of Products per Page You can set a display number of products per page. You can set 2 to 40 products per page.
Product Pagination You can set product page pagination style as pagination, Load More button or Infinite Scroll.
Shop Page Banner
Shop Page Banner Display You can manage the shop page banner. Show/Hide banner at top of the product listing.
Shop Page Banner You can change the shop header banner.
This field is available if “Shop Page Banner” is set to “Show”.

Products Filters

This section provided settings to manage product filter options like category, rating, price, etc.

This section contains the below fields:

Name Description
Show Filter Show/Hide product filter option on the shop page.
Filter Type You can set filter type as default or widget.
This field is available if “Shop Filter” is set to “Show”.
Filter Title You can set the filter section title.
This field is available if “Filter Type” is set to “Default”.
Filter Title You can set the filter section title.
This field is available if “Filter Type” is set to “Default”.
Product Filters Select filter attribute from the list like category, rating, price, etc.
This field is available if “Filter Type” is set to “Default”.

Single Product

In this section, you can manage the product detail page look and feel.

This section contains the below fields:

Name Description
Sidebar You can set product detail page sidebar alignment as full width, left sidebar or right sidebar.
Page Width You can set product detail page width as fixed or wide.
Tab Layout You can set tab layout style as default, left side or accordion.
Countdown Timer Show countdown timer for the scheduled date for on sale products.
Countdown Title Enter the Countdown Title.
Sticky Add to Cart Show/Hide sticky add to cart section at the bottom in desktop.
Wishlist in Sticky Add to Cart You can show/hide the wishlist icon in sticky add to cart section.
This field is available if “Sticky Add to Cart” is set to “Show”.
Compare in Sticky Add to Cart You can show/hide the compare icon in sticky add to cart section.
This field is available if “Sticky Add to Cart” is set to “Show”.
Product Rating in Sticky Add to Cart You can show/hide the Product Rating in sticky add to cart section.
This field is available if “Sticky Add to Cart” is set to “Show”.
Countdown Timer in Sticky Add to Cart You can show/hide countdown timer in sticky add to cart section for sale product.
This field is available if “Sticky Add to Cart” is set to “Show”.
Show Share Buttons You can show/hide product share buttons on the product detail page.
Show Short Description You can show/hide product short description in the product detail page.
Related Products
Show Related Products Show/Hide related products section in product detail page.
Number of Related Products per Page You can manage the number of products you want to display in related product section.
This field is available if “Related Products” is set to “Show”.
Up Sells
Show UP Sells Show/Hide up sells products section in the product detail page.
Number of UP Sells Products per Page You can manage the number of products you want to display in up sells section.
This field is available if “Up Products” is set to “Show”.

Quick View

In this section, you can manage a quick view popup look and feel.

This section contains the below fields:

Name Description
Quick View Enable/Disable quick view button. It will display a popup with product details.
Product Name Show/Hide product title in quick view popup.
Product link Enable/Disable single product link on product title in quick view popup.
Product Categories Show/Hide product category in quick view popup.
Product Price Show/Hide product price in quick view popup.
Product Star Rating Show/Hide product rating in quick view popup.
Product Short Description Show/Hide product short description in quick view popup.
Product Add to Cart Show/Hide add to cart button in quick view popup.
Product Share Icon Show/Hide add to cart button in quick view popup.

My Account

In this section, you can manage my account page text.

This section contains the below fields:

Name Description
Display Registration Text Enable/Disable registration information text on my account page when registration enables in your site.
Registration Text This field depends on registration information text if set as enable. Display some information about registration on your site

FAQ Settings

In this section, you can manage FAQ page template layout.

This section contains the below fields:

Name Description
FAQ Layout You can set FAQ template page layout style. There are two layout style for FAQ page template.
Category Source You can manage FAQ category source as all or selected. If you set as all category than display all categories FAQ.
Categories You can manage categories list which categories want to display in FAQ page template.

Color Scheme

In this section, you can control the color of various portion/sections of the site.

This section contains the below fields:

Name Description
Primary Color You can manage theme main color. Primary color apply as link color, button color etc
Primary Gradient Color You can manage theme gradient main color. Primary gradient color apply as gradient color on background color.
Secondary Color You can manage theme secondary color. Secondary color apply as section title, button color etc.
Tertiary Color You can manage theme tertiary color. Tertiary Color apply as contents, border etc.

Social Profiles

In this section, you can control social profiles. Social Profiles is a repeater field which allows adding multiple social profiles. Click the “Add” button to add additional fields. It provides the ability to add predefined and custom social profiles. Below is the list of predefined social profiles. If you want to add a custom social profile, then select “Custom” in Social Profile field.

  • Facebook
  • Twitter
  • Dribbble
  • Vimeo
  • Pinterest
  • LinkedIn
  • Youtube
  • Instagram
  • Behance

This section contains the below fields:

Name Description
Social Profile Select social profile from list. If you want to add a custom social profile, then select “Custom.”
Link (URL) Enter social profile URL.
Title This field depends on social profile if set as custom. You can set custom social title here.
Font Awesome Icon Class This field depends on social profile if set as custom. You can set custom social profile icon class. i.e.fab fa-500px. For list of Font Awesome classes click here.

Site Contacts

In this section, you can manage contacts information. This section contains the Email and Phone Number.

This section contains the below fields:

Name Description
Email Enter email address.
Phone Number Enter mobile number.

Opening Hours

In this section, you can manage opening hours. You can set opening hours as times per day. Time ranges are specified using a hyphen -.

Social Sharing

In this section, you can control social sharing services. Currently, the section contains total of twelve services:

  • Facebook
  • Twitter
  • Linkedin
  • Pinterest
  • Google Bookmarks
  • Reddit
  • Tumblr
  • StumbleUpon
  • Digg
  • VK
  • XING
  • Skype

You can enable/disable any social sharing service as per your choice. Social sharing icons will appear on the blog page, blog post, WooCommerce product detail page, and product Quick View.

Note that social sharing icons on the WooCommerce product detail page and product Quick View will appear only when social sharing is enabled in Theme Options » WooCommerce » Single Product and Theme Options » WooCommerce » Quick View.

Typography

In this section, you can manage site-wide typography. This section contains an option to manage typography for body element and header elements (h1 to h6). You can set font family, font size, font weight & styles, line height, letter spacing, etc.

Typekit Fonts

Name Description
Enable Typekit Fonts Enable\Disable Typekit Fonts.
Typekit ID Enter typekit id here.
Headings Typography Add the Typekit font family name here.
Body Typography Add the Typekit font family name here.

Additional Fonts

In this section, You can enqueue extra google fonts. You don’t have to do code custom code to enqueue Google fonts, select the fonts with related subsets, and save the settings. And you can use custom font using custom CSS.

For example, you select the Roboto font family so that you can use selected font family following CSS. To add the following style you can use a child theme or custom CSS in theme options.

.selector {
  font-family: 'Roboto', sans-serif;
}

Custom Fonts

In this section, you can set the custom fonts by uploading the font-related files ex. .woff, .woff2, .ttf etc.

For example, if you select Bank Nue font family, so you can use the uploaded font family as following CSS. To add the following CSS you can use the child-theme or custom CSS in theme options.

.selector {
  font-family: 'Bank Nue';
}

WordPress allows you to upload the most common image files, audio/ video, PDF, Microsoft Office and OpenOffice documents. WordPress codex has a full list of allowed file types and extensions.

Security is the main reason behind the limitation on file types that users can upload. However, this does not mean that users cannot change this. Using a tiny bit of code, you can add a new file type and extension to WordPress.

For example, add this code in your child theme’s functions.php file or a site-specific plugin to allow font files type to be uploaded:

function webgatha_child_mimes_types( $mime_types ) {
  $mime_types['otf'] = 'application/x-font-otf';
	$mime_types['woff'] = 'application/x-font-woff';
	$mime_types['woff2'] = 'application/x-font-woff2';
	$mime_types['ttf'] = 'application/x-font-ttf';
	$mime_types['svg'] = 'image/svg+xml';  
	
	return $mime_types;
}
add_filter( 'upload_mimes', 'webgatha_child_mimes_types' );

404 Page

In this section, you can control the 404 error page. You can manage 404-page contents or select from the page list.

This section contains the below fields:

Name Description
Page Title
Page Title Source You can manage the 404-page title source as default or custom. If you select
Page Title You can set the 404-page title.
This field is available if “Page Title Source” is set to “Custom”.
Page Content
Page Content Type You can set a 404-page content type as a default or custom page.
Content Title You can manage content titles.
This field is available if “Page Content Type” is set to “Default”.
Content Subtitle You can manage content subtitles.
This field is available if “Page Content Type” is set to “Default”.
Content Description You can manage content descriptions.
This field is available if “Page Content Type” is set to “Default”.
Page You can select the page from the list.
This field is available if “Page Content Type” is set to “Custom”.
Back to Home Show/Hide “Back to Home” button on the 404 pages.
Back to Previous Page Show/Hide “Back to Previous Page” button on the 404 pages.
Content Padding You can manage content padding.
This field is available if “Page Content Type” is set to “Default”.
Content Margin You can manage the content margin.
This field is available if “Page Content Type” is set to “Default”.

Maintenance

In this section, you can control “Maintenance” and “Coming Soon” pages. You can manage maintenance and coming soon pages contents or select from the page list.

This section contains the below fields:

Name Description
Enable Maintenance? Enable/Disable maintenace page on your site.
Maintenance Page Type You can manage the maintenance page type as default or custom.
Maintenance Mode You can manage maintenance mode as “Maintenance” or “Coming Soon”.
This field is available if “Maintenance Page Type” is set to “Default”.
Maintenance Title You can set the maintenance page title.
This field is available if “Maintenance Page Type” is set to “Default”.
Maintenance Subtitle You can set the maintenance page subtitle.
This field is available if “Maintenance Page Type” is set to “Default”.
Coming Soon Title You can set a coming soon Title.
This field is available if “Maintenance Mode” is set to “Coming Soon”.
Coming Soon Subtitle You can set a coming soon Subtitle.
This field is available if “Maintenance Mode” is set to “Coming Soon”.
Coming Soon Date You can set a coming soon date countdown.
This field is available if “Maintenance Mode” is set to “Coming Soon”.
Social Icons Show/Hide social icons on your maintenance/coming soon page.
This field is available if “Maintenance Page Type” is set to “Default”.
Display Newsletter Show/Hide newsletter on your maintenance/coming soon page.
This field is available if “Maintenance Page Type” is set to “Default”.

Maintenance Page Select page from the list for “Maintenance” or “Coming Soon”.
This field is available if “Maintenance Page Type” is set to “Custom”.

MailChimp Settings

In this section, you have to provide “MailChimp API Key” and “MailChimp List ID” for newsletter shortcode.

This section contains the below fields:

Name Description
MailChimp API Key Enter MailChimp API Key here.
MailChimp List ID Enter MailChimp List ID here.

Instagram

In this section, you have to provide “Client ID”. Here you can generate the Instagram Access Token by using the Instagram client ID for authentication. Using the access token, you can get the Instagram images from the related account for Instagram shortcode and widgets.

Google

In this section, you have to provide Google Maps API Keys to display the map on your site. Click here to generate Google Maps API Keys.

Custom CSS/JS

In this section, you can add custom CSS and JavaScript. It can be useful if you want to do any custom formatting with CSS or functionality with JavaScript.

This section contains the below fields:

Name Description
Custom CSS Enter your custom CSS here.
Custom JS Enter your JavaScript/jQuery code here.

Sample Data

You can import pre-defined sample data, as shown on our demo site, from here. You can also import additional pages after import sample data.

Import/Export

You can import file or through URL to set all these theme options. This will overwrite all existing option values.
You can also Export data through copying data, download the file, and copy the export URL.

VC Elements/Shortcodes

WebGatha comes with bundled WPBakery Page Builder (formerly Visual Composer) with lot of shortcodes.

Along with that, WebGatha contains various customized shortcodes for different needs. Here below you can find settings and details for them.

Blockquote Settings

This element allows inserting the blockquote in content

Param Name Description
Layout Choose the layout style. There are four layouts.
Author Title Add author title.
Author Subtitle Add author subtitle.
Author Content Add author content.
Content Alignment Select content alignment.
Enable Quotes Select this checkbox to enable quote.
Text Color Select text.
Border Color Select the border color scheme.
Background Color Select a background color scheme.
Typography
Font Size Enter Font Size.
Use google fonts Select this checkbox to use google fonts.
Use google fonts(Checked)
Font Family Select the font family.
Font style Select font styling.
Google Fonts Enqueue Source Choose the source of Google Fonts CSS.

Blog Posts

This element allows inserting Blog Posts in content.

Param Name Description
Style Select blog posts style.
Layout Select layout to display blog posts.
Blog Layout Color Choose the Blog layout color.
Animation Style Choose an animation style.
Post Settings
Count Post Enter the number of posts to display.
Content Words Enter the number of words to display from the content.
Order Select the post display order.
Orderby Select the order parameter to sort retrieved posts.
Categories Select categories to limit result from. To display result from all categories leave all categories unselected.
Thumbnail Size You can select the thumbnail size, which registers with the theme and plugins.
Grid Settings (This section only visible if blog post layout selected as the grid.)
Number of columns (Extra large ≥1200px) Select the number of columns per view in extra-large devices ≥1200px.
Number of columns (Large ≥992px) Select number of columns per view in large devices ≥992px.
Number of columns (Medium ≥768px) Select number of columns per view in medium devices ≥768px.
Number of columns (Small ≥576px) Select number of columns per view in small devices ≥576px.
Slider Settings (This section only visible if blog post layout selected as the slider.)
Speed Enter the duration of transition between slides (in ms).
Space Between Enter space, in pixels (px), between each posts.
Enable Slider Loop? Select this checkbox to enable the slider loop.
Enable Slider Autoplay? Select this checkbox to enable slider autoplay.
Number of slides (Extra large ≥992px) Select number of slides per view in extra-large devices ≥992px.
Number of slides (Large ≤992px) Select the number of slides per view in large devices ≤992px.
Number of slides (Medium ≤768px) Select number of slides per view in medium devices ≤768px.
Number of slides (Small ≤576px) Select the number of slides per view in small devices ≤576px.
Arrow/Navigation Settings (This section only visible if blog post layout selected as the slider.)
Show Pagination Control Check this checkbox to display pagination controls.
Select Arrows Select the arrow icon from the list.
Show Arrows on Hover Show/Hide arrow on mouse hover.
Show Prev/Next Buttons Check this checkbox to display the prev/next buttons.
Bullet Color You can manage the bullet color.
Bullet Active Color You can manage the active bullet color.

Button

This element allows inserting the button.

Param Name Description
Button Type Select a type of a button among Default,Border, and Link.
Button Title Enter the title for button.
Enable lightbox Select this checkbox to enable lightbox popup.
Enable lightbox( Unchecked )
Title & Link Set the link and title for button.
Enable lightbox( Checked )
Static block Select Static blocks for lightbox.
Button Size Select Button Size .
Button Shape Select Button Shape.
Button Shape on Hover Select Button Shape on hover.
Border Style Select Button Border Style.
Border Style on Hover Select Button Style on hover.
Animation Style Choose your animation style
Color
Text Color Select Button Text color.
Text Hover Color Select Button Text Hover color.
Border Color Select Button Border color.
Border Hover Color Select Button Border Hover color.
Background Color Select Background Color.
Background Color (Secondary) Select secondary background color, will create gradient effect.
Background Hover Color Select Background Hover Color.
Background Hover Color (Secondary) Select secondary background hover color, will create gradient effect.
Button Hover Background Effect Select Hover Background Effect.
Icon
Enable Icon Select this checkbox to enable icon on button.
Icon Type Select icon type among Default, Flat, and Border.
Flat Icon Style Select flat icon style.
Icon Library Select icon library.
Icon Select icon from library.
Icon Size Select icon size.
Icon Position Create creative buttons.
Icon Color Select Icon Color.
Icon Color on Hover Select Icon Color on Hover.
Icon Background Color Select Icon background color.
Icon Background Color on Hover Select Icon Background Color on Hover.
Icon Border Color Select Icon border color.
Icon Border Color on Hover Select Icon Border Color on Hover.
Shadow
Button Type(Default, Border)
Enable Shadow Effect Select this checkbox to enable shadow effect on button.
Enable Shadow Effect(Checked)
Enable 3D Effect Select this checkbox to enable 3D effect on button.
Enable 3D Effect(Checked)
Button Shadow Select shadow effect.
Shadow Color Select Shadow Color.
Shadow Color on Hover Select Shadow Color on Hover.
Typography
Use google fonts Select this checkbox to use google fonts.
Use google fonts(Checked)
Font Family Select font family.
Font style Select font styling.
Google Fonts Enqueue Source Choose the source of Google Fonts CSS.

Callout

Element allows inserting the callout in content.

Param Name Description
Callout Type Select callout style.
Color Scheme Select color scheme.
Callout Title Enter Callout Title.
Title Element Tag Select Title Element Tag.
Description Enter Description.
Animation Style Choose your animation style
Button
Button Title Enter Button Title.
Link Select title and URL.
Button Type Select Button Type.
Button Shape Select Button Shape.
Text Color Select Text Color.
Text Hover Color Select Text Hover Color.
Button Type (Default)
Button Background Color Select Button Background Color.
Background Hover Color Select Background Hover Color.
Button Type (Border)
Border Color Select Border Color.
Border Hover Color Select Border Hover Color.
Icon
Show Icon? The icon will show under a button. So, it will show when you set button.
Show Icon? (Checked)
Icon Library Select icon library.
Icon Select icon from library.
Icon Position Select Icon Position.

Contact Form

This element allows inserting the contact form in content.

Param Name Description
Style Select form style from list. There are seven style for contact form.
Layout Color Select form color scheme as Dark or Light.
Shape Select input box shape as square, round or rounded.
Select Contact Form Select contact form source from list. It’s depend on which plugin are activated in your site. Compatible plugins are Contact Form 7, Formidable Form and Ninja Form plugins.
Select Contact Form Select contact form from list. It is depend selected contact form source.

Countdown

This element allows inserting the countdown in content.

Param Name Description
Countdown Type Select a countdown style.
Countdown Date & Time Select the countdown Date and Time.
After Expire Countdown Select one of the options from expiry message and static block after expire countdown.
After Expire Countdown(Expire Message)
Expire Message Enter a message to display, instead of date counter, when the deal is expired.
After Expire Countdown(Static block)
Static block Select the static block.
Countdown Color Select countdown color as light or dark.
Animation Style Choose your animation style.

Counter

This element allows inserting the counter in content.

Param Name Description
Counter Type Select the counter style.
Counter Alignment Select Alignment.
Animation Style Choose your animation style.
Content
Counter Number Enter the counter number.
Counter Color Select counter color.
Counter Color (Secondary) Select secondary counter color, will create gradient effect.
Counter Title Enter Counter title.
Title Color Select Title color.
Title Color (Secondary) Select secondary title color will create a gradient effect.
Icon
Enable Icon Select this checkbox to enable icon on the button.
Enable Icon (Checked)
Icon Source Select icon source among Font or Image.
Icon Source(Font)
Icon Position Select icon position as Top, Left, or Right.
Icon Library Select icon library.
Icon Select icon from the library.
Icon Size Select icon size.
Icon Shape Select Icon Shape.
Icon Color Select the Icon color.
Background Color Select Background Color.
Background Color (Secondary) Select secondary background color will create a gradient effect.
Icon Source(Image)
Icon Image Upload/select icon image.
Typography
Counter Font Size Enter responsive font size for counter in pixel.
Title Font Size Enter responsive font size for title in pixel.
Use google fonts Select this checkbox to use google fonts.
Use google fonts(Checked)
Font Family Select the font family.
Font style Select font styling.
Google Fonts Enqueue Source Choose the source of Google Fonts CSS.

DropCap

This element allows to insert DropCap.

Param Name Description
Contents Enter description.
Contents Color Select contents color.
Animation Style Choose your animation style.
Dropcap
Dropcap Style Select dropcap style.
Color Select dropcap color.
Font Size Enter responsive font size in pixel.
Dropcap Style (Flat, Border)
Background Color Select dropcap background color.
Shape Select dropcap shape.
Dropcap Style (Border)
Border Color Select dropcap border color.
Border Style Select dropcap border style.

Image Comparison

This element allows inserting image comparison in content.

Param Name Description
Image Source Choose image source as Media Library or External Link.
Image Source (Media Library)
Before Image Upload/select Before image.
After Image Upload/select Before image.
Image Source (External Link)
Before Image Link Enter the external link for image.
After Image Link Enter the external link for an image.
Orientation Type Select image comparison orientation type.
Thumbnail Size Choose thumbnail size.
Icon
Icon Library Select icon library.
Icon Select an icon from the library.

Image Parallax

This element allows parallax image on section.

Param Name Description
Image 01 Upload image.
Image 02 Upload image.
Image Aligment Choose image aligment.

InfoBox

This element allows inserting InfoBox in content.

Param Name Description
Infobox Type Select the infobox style. There are seventeen styles.
Infobox Layout Color Choose the infobox layout color.
Icon Position Left in Mobile Set icon position left in mobile screen.
Highlight Enable/Disable highlight on the infobox.
Content
Infobox Title Enter the Infobox Title.
Infobox Title Tag Select the Infobox Title Tag.
Infobox Content Enter Infobox Content.
Space Between Title and Content Enter space between title and content in pixel.
Background Image Upload/select Background image.
Background Color Select Background color.
Infobox Content Alignment Select infobox alignment.
Thumbnail Size Choose thumbnail size.
Infobox Hover Effect Select the Infobox Hover Effect. Note: This effect will only work for style-15, style-17
Read More? Select this checkbox to enable read more.
Read More? (Checked)
Infobox Read More type Select Infobox Read More type.their are two types as Button and Link.
Read More Title Enter Read More Title.
Read More Title & Link Enter read more titles and links.
Icon
Infobox Icon Select the Infobox Icon.
Infobox Icon (Font)
Icon Library Select icon library.
Icon Select an icon from the library.
Icon Color Select Icon Color.
Infobox Icon (Image)
Icon Image Upload/select icon image.

Flipbox

This element allows inserting Flipbox in content.

Param Name Description
Flip Type Select flip style. There are four styles.
Front Content
Title on Front Enter content title.
Flipbox Title Tag Select the title tag from the list.
Description on Front Enter description contents.
Content Alignment Select content alignment as left, center or right.
Enable Icon Enable/Disable icon.
Enable Icon (Enable)
Icon Select icon source as font/image.
Icon Library Select icon library.
Icon Select an icon from the library.
Icon Type Select icon type as default, flat or border.
Icon Size Select icon size as small, medium, large or extra large.
Icon Background Type Select icon shape as round, rounded or square. Note: This option will only work for icon type as “flat”
Icon (Image)
Icon Image Upload/select icon image.
Front Design
Background Source Select the background source as color or image.
Background Source (Color)
Background Color Select the background color.
Background Source (Image)
Background Image Select the background image.
Background Overlay Color Select the background overlay color.
Icon Color Select icon color.
Icon Background Color Select icon background color.
Icon Border Color Select icon border color.
Title Color Select icon title color.
Description Color Select icon description color.
Enable Border Enable/Disabled border on flipbox.
Enable Border (Enable)
Border Style Select border style from list.
Border Color Select border color.
Border Width Set border width.
Back Content
Title on Back Enter the content title.
Flipbox Title Tag Select the title tag from the list.
Description on Back Enter description contents.
Content Alignment Select content alignment as left, center or right.
Enable Icon Enable/Disable icon.
Enable Icon (Enable)
Icon Select icon source as font/image.
Icon Library Select icon library.
Icon Select an icon from the library.
Icon Type Select icon type as default, flat or border.
Icon Size Select icon size as small, medium, large or extra large.
Icon Background Type Select icon shape as round, rounded or square. Note: This option will only work for icon type as “flat”
Icon (Image)
Icon Image Upload/select icon image.
Read More? Enable/Disable read more button.
Read More (Enable)
Read More type Select button type as default, border or link.
Read More Title Enter read more button text.
Read More Title & Link Enter the button title and link.
Button Shape Select button shape from the list as square, round or rounded.
Button Text Color Select button text color.
Button Background Color Select the button background color.
Button Border Color Select the button border color.
Button Text Hover Color Select button hover text color.
Button Background Hover Color Select the button hover background color.
Button Border Hover Color Select button hover border color.
Front Design
Background Source Select the background source as color or image.
Background Source (Color)
Background Color Select the background color.
Background Source (Image)
Background Image Select the background image.
Background Overlay Color Select the background overlay color.
Icon Color Select icon color.
Icon Background Color Select icon background color.
Icon Border Color Select icon border color.
Title Color Select icon title color.
Description Color Select icon description color.
Enable Border Enable/Disabled border on flipbox.
Enable Border (Enable)
Border Style Select border style from list.
Border Color Select border color.
Border Width Set border width.

Hotspot Image

This element allows inserting hotspots in content.

Param Name Description
Image source Select image source.
Image source( Media Library )
Hotspot Image Set the hotspot image.
Image source( External Link )
Hotspot Image Enter the image link.
Pointer Style Select pointer style.
Trigger Select the trigger style.
Color Scheme Select the color scheme.
List Items (It is a repeater field where you can add multiple items. It contains fields as below.)
Position Set a hotspot point position.
Image Set the hotspot point image.
Title Enter hotspot point title.
Content Enter hotspot point content.
Link Set a hotspot point link.
Direction Set a hotspot point direction.
Hide Desktop Hide on desktop.
Hide Mobile Hide on mobile.

Instagram

This element allows inserting the Instagram images in the content.

Param Name Description
Instagram Layout Select the Instagram layout.

– Grid
– Slider
– Masonry

Instagram Style Select the Instagram style. Important: Style 3 will not work for Grid layout.
Animation Style Choose your animation style
Follow Us Text Enter follow us link text
Items Settings
Instagram Column Choose the portfolio column.
Instagram Space Space between the Instagram items.
Item Count Enter a value between 1 to 20.
Show Likes Select this checkbox to show likes count.
Show Comments Select this checkbox to show comments count.
Image Size Select image size among Thumbnail, Low Resolution, and Standard Resolution.
Arrow/Navigation Settings (This section only visible if blog post layout selected as the slider.)
Select Arrows Select the arrow icon from the list.
Show Arrows on Hover Show/Hide arrow on mouse hover.
Show Prev/Next Buttons Check this checkbox to display the prev/next buttons.
Bullet Color You can manage the bullet color.
Bullet Active Color You can manage the active bullet color.

List

This element allows inserting list items with icons instead of bullets.

Param Name Description
Title Tag Select Title Tag.
Title Text Transform Select Title Text Transform.
Title Color Select Title color.
Title Hover Color Select Title Hover Color, Working, if you have add list item content link.
Icon
Add Icon? Select this check box to add the icon to list items.
Add Icon (Checked)
Icon style type Select Icon style Type from Default, Border, and Flat.
Icon Library Select icon library. With Visual Composer you can add icons from following libraries:
– Font Awesome
– Open Iconic
– Typicons
– Entypo
– Linecons
– Pixel
– Mono Social
Icon Select icon from the selected library.
Icon Color Select Icon Color.
Icon style type (Border, Flat)
Icon shape Select Icon Shape.
Icon Background Color Select Icon Background Color ( Note : It will only work for “Flate” Icon style type ).
List Items It is repeater field where you can add multiple list item. It contains fields as below.
Title Enter Title.
Title Link Enter/select Title link.

Map

This element allows inserting map in content.

Param Name Description
Map Type Select map style.Their are eight styles.
Content
Address Latitude Enter the address latitude. For example 40.674
Address Longitude Enter the address latitude. For example -73.945
Map Height Enter map height.
Map Pin Style Select map pin style as Default, pin-02, or pin-03.
Map Type Select map type.
Map Zoom Enter map zoom.

Newsletter

This element allows inserting newsletter in content.

Param Name Description
Style Select the newsletter style. There are seven styles.
Shape Select newsletter shape. Note: This section only visible for style-1 to style-5.
Button Position Select the newsletter button position. Note: This section only visible for style-4 and style-5.
Title Enter the title.
Description Enter description. Please ensure to add short content.
Color Settings
Newsletter Color Layout Select the button color type.
Button Color Select the button color type. There are three color types as Theme, Dark, and Custom.
Button Color (Custom)
Text Color Select Button Text color.
Button Background Color Select the Button background color.
Button Background Color (Secondary) Select the secondary background color will create a gradient effect.
Text Hover Color Select Button Text hover color.
Button Background Hover Color Select Button background hover color.
Button Background Hover Color (Secondary) Select the secondary background hover color will create a gradient effect.
Icon Note: This section only visible for the style-4, style-6 and style-7
Icon Library Select icon library.
Icon Select an icon from the library.

Price Menu

This element allows inserting a price menu in content.

Param Name Description
Layout selection Select layout selection.
Menu Color Select the menu color.
Menu Settings
Title Element Tag Select title element Tag.
Price color Select price color.
Select Currency Sign Select the currency sign.
It is a repeater field where you can add multiple items. It contains fields as below.
Menu Image Select the menu data image. All image sizes should be the same.
Thumbnail Size Choose thumbnail size.
Menu Data Title Enter the menu data title.
Menu Data Description Enter menu data description.
Menu Data Price Enter the menu data price.

Portfolio

This element allows inserting the portfolio in content

Param Name Description
Portfolio Style Select the portfolio style. There are fifteen styles.
Portfolio Layout Color Choose the portfolio layout color.
– Light
– Dark
Animation Style Choose your animation style
Portfolio Layout Select portfolio type. There are three types.
– Grid
– Masonry
– Slider
Portfolio Space Choose portfolio space.
– No Space
– With Space
Portfolio Column Choose the portfolio column.
Count Post Enter a value between 0 to 50. If you enter 0 then it will show you all posts from the portfolio.
Portfolio OrderBy Choose portfolio orderby.
– Id
– Title
– Date
– Last Modified Date
– Random
Portfolio Order Choose portfolio order as ascending or descending.
Categories Select categories to limit results from. To display the result from all categories leave all categories unselected.
Thumbnail Size Choose thumbnail size.
Show Categories?
(This section only visible if Portfolio Layout selected as the masonary.)
Show Categories? Select this checkbox to enable slider autoplay.
Filter Style Choose filter style.
Slider Settings
(This section only visible if Portfolio Layout selected as the Slider.)
Slider Title Enter slider title.
Title Element Tag Select title element tag.
Slider Sub Title Enter slider sub title.
Enable Slider Autoplay? Select this checkbox to show categories.
Enable Slider Loop? Select this checkbox to enable the slider loop.
Arrow/Navigation
Enable Arrow? Select this checkbox to enable an arrow.
Enable Arrow? (Checked)
Select Arrows Select the arrows icon.
Show Arrows on Hover Select this checkbox to show an arrow on hover.
Enable Navigation? Select this checkbox to enable navigation.
Enable Navigation? (Checked)
Bullet Active color Select bullet active color.
Bullet color Select bullet color color.

Pricing Table

This element allows inserting the pricing table in the content

Param Name Description
Style Select the pricing table style.
Title Enter the pricing table title.
Description Select pricing table description.
Price Enter the pricing table price.
Interval Enter the pricing table interval.
Button Title Enter the pricing table button title.
Button Link Enter the pricing table button link.
Button Shape Choose the pricing table button shape.
Highlight this plan Mark this checkbox to highlight this plan.
Animation Style Choose your animation style.
Background Image Select the background image.
Icon Image Choose your icon image.
It is a repeater field where you can add multiple items. It contains fields as below.
Enable Mark Select this checkbox to enable mark..
Select Mark( Checked ) Select the Mark(True\false).
List Title Enter the list item title.
List Description Enter the list item description.
Icon Library Select icon library.
Icon Select an icon from the library.

Process

This element allows the inserting process in the content.

Param Name Description
Process Type Select process style.
Color Scheme Select Color Scheme
Enable Line? Select this checkbox to enable line.
Animation Style Choose your animation style
Items (Note: It is a repeater field where you can add multiple items. It contains fields as below.)
Title Enter the title.
Title Tag Enter the Title tag.
Contents Enter the Content description.
Icon Library Select icon library. If an icon is empty then an icon will count from one.
Icon Select an icon from the library.
Button Title Enter the button title.
Button Title & Link Enter the button title and link.

Product Category

This element allows inserting product categories.

Param Name Description
Style Select style. There are six styles.
Layout Select layout among grid, slider, and Masonry.
Thumbnail Size Choose thumbnail size. We recommended you to choose Medium Large thumbnail size.
Text Vertical Align Set the text vertical position.
Text Horizontal Align Set text horizontal position
Title Element Tag Select the category title tag.
Font Weight Select category font-weight.
Text Transform Select text-transform property for the title.
Text And Overlay Color Set text and overlay color.
Title Font Size Enter Category Title Font Size between 10 to 80.
Count Title Font Size Enter Category Count Title Font Size between 10 to 80.
Title-Counter Display Select the option to show the title and product counter of the product category.
Hover Effect Set the category title to hover effect.
Categories
Categories Select categories to display on the front. If no categories selected, it will show all the categories in front.
Show Empty Categories Check this checkbox to show categories that are not assigned to any products.
Hide Product Categories Count Check this checkbox to hide the category’s product counts.
Order By Select order by the field for the order to display product category. Order fields are Category Name, Date, Id, and Author
Display Order Select order as ascending or descending to display product category.
Layout (Grid & Masonary)
Columns – Extra large ≥1200px Select items per view.
Columns – Large ≥992px Select items per view.
Columns – Medium ≥768px Select items per view.
Columns – Small ≥576px Select items per view.
Layout (Slider)
Slider Navigations Select the slider navigations control type.
Extra large ≥1200px Select items per view.
Large ≥992px Select items per view.
Medium ≥768px Select items per view.
Small ≥576px Select items per view.
Margin Enter margin, in pixels (px), between each item.
Enable Arrow Select this checkbox to enable an arrow.
Enable Arrow ( Checked )
Select Arrows Select the arrows icon.
Arrows Color Select arrows color.
Show Arrows on Hover Select this checkbox to show arrows on hover.
Enable Navigation Select this checkbox to enable navigation.
Enable Navigation( Checked )
Navigation color Select navigation color.

Products

This element allows inserting Products in content.

Param Name Description
Layout Select layout to display blog posts.
Animation Style Choose the animation style.
Product Settings
Count Post Enter the number of posts to display.
Order Select the post display order.
Orderby Select the order parameter to sort retrieved posts.
Categories Select categories to limit results from. To display the result from all categories leave all categories unselected.
Layout (Grid)
Number of columns (Extra large ≥1200px) Select number of columns per view in extra-large devices ≥1200px.
Number of columns (Large ≥992px) Select number of columns per view in large devices ≥992px.
Number of columns (Medium ≥768px) Select number of columns per view in medium devices ≥768px.
Number of columns (Small ≥576px) Select the number of columns per view in small devices ≥576px.
Layout (Slider)
Speed Enter the duration of transition between slides (in ms).
Space Between Enter space, in pixels (px), between each post.
Show Pagination Control Check this checkbox to display pagination controls.
Show Prev/Next Buttons Check this checkbox to display the prev/next buttons.
Enable Slider Loop? Select this checkbox to enable the slider loop.
Enable Slider Autoplay? Select this checkbox to enable slider autoplay.
Number of slides (Extra large ≤1200px) Select number of slides per view in extra large devices ≤1200px.
Number of slides (Large ≤992px) Select the number of slides per view in large devices ≤992px.
Number of slides (Medium ≤768px) Select the number of slides per view in medium devices ≤768px.
Number of slides (Small ≤576px) Select the number of slides per view in small devices ≤576px.

Progressbar

This element allows inserting progressbar in content.

Param Name Description
Progressbar Style Select Progressbar style.
Progressbar Height Enter progressbar height in pixel.
Font Size Choose progressbar font size.
Background Color Select progressbar background color.
Progressbar Style (Style 1)
Shape Choose progressbar Shape.
Value Color Select progressbar Value color.
Progressbar Style (Style 2)
Shape Choose progressbar Shape.
Progressbar Style (Style 3)
Title Background Color Select Progressbar Title Background Color.
Progressbar Value Style Select progressbar value style.
Progressbar Style (Style 4)
Progressbar Size Select Progressbar Size.
Value Background Color Select progressbar value background color.
Shadow? Select this checkbox to enable Shadow.
Enable Border? Select this checkbox to enable the border.
Enable Border? (Checked)
Border Width Enter progressbar border width in pixel.
Border Color Select progressbar border color.
Highlight Values? Select this checkbox to enable highlight value.
Highlight Values? (Checked)
Highlight Text Color Select the highlight text color.
Highlight Background Color Select highlight Background color.
Enable Striped? Select this checkbox to enable striped.
Enable Striped? (Checked)
Enable Striped Animation? Select this checkbox to enable striped animation.
Title Background Color Select Progressbar Title Background Color.
Animation Style Choose your animation style
Content (Note: It is a repeater field where you can add multiple items. It contains fields as below.)
Title Enter the title for progressbar.
Sub Title Enter the subtitle for progressbar.
Note: Only visible for style 4
Value Enter a value between 1 to 100.
Title Text Color Select Progressbar Text Color.
Sub Title Text Color Select Progressbar Sub Text Color.
Progressbar Color Select Progressbar Color.

Section Title

This element allows inserting Section title in the content

Param Name Description
Alignment Select section alignment.
Enable Text Effect? Select this checkbox to enable text effect.
Enable Text Effect ( Checked )
Text Effect Color Select text effect color.
Animation Style Choose your animation style
Title
Enable Typewriter Effect? Select this checkbox to enable the typewriter effect.
Text Before Title Enter the text to display before title.
Text After Title Enter the text to display after title.
Text To Typewrit Enter the text to be shown with the typewrite effect. Note : Each string enter in new line.
Main Title Enter the main title.
Title Element Tag Select title element tag.
Font Size Enter font size for Title.
Title Element Tag Color Select Title Element Tag color.
Enable Title Divider? Select this checkbox to enable title divider.
Enable Title Divider ( Checked )
Title Divider Color Select title divider color.
Sub Title
Sub Title Enter the Sub title.
Sub Title Color Select Sub Title color.
Description Enter description.
Description Color Select description color.

Separator

This element allows inserting the separator in content.

Param Name Description
Separator Position Select separator position.
Separator Style Select the separator style.
Color Select separator color.
Background Color Select separator background color.

Team

This element allows the inserting team in content.

Param Name Description
Team Style Select the team style. If you select Style 12, Style 13, Style 14 and Style 15 please select Team Column 1 or 2. So, it will display properly. There are fifteen styles in all.
Content Words Enter the number of words to display from the content.
Team Layout Color Choose the team layout color.
Animation Style Choose your animation style
Team Settings
Team Layout Choose team layout as Grid, Masonry or Slider.
Show Categories Select this checkbox to show categories.
Note: This will not visible for the slider.
Team Space Choose team Space.
Team Column Choose the team column.
Count Post Enter a value between 0 to 50. If you enter 0 then it will show you all posts from teams.
Team Orderby Choose team orderby.
Team Order Choose the team order.
Categories Select categories to limit results from. To display the result from all categories leave all categories unselected.
Thumbnail Size Choose thumbnail size.
Team Layout (Slider)
Enable Slider Autoplay? Select this checkbox to enable slider autoplay.
Enable Slider Loop? Select this checkbox to enable the slider loop.
Enable Arrow? Select this checkbox to enable an arrow.
Enable Arrow? (Checked)
Select Arrows Select the arrows icon.
Show Arrows on Hover Select this checkbox to Show arrow on hover.
Enable Navigation? Select this checkbox to enable navigation.
Enable Navigation? (Checked)
Navigation color Select color for navigation.

Testimonials

This element allows inserting the testimonial slider in content.

Param Name Description
Testimonials Style Select Testimonials Layout Type.
Testimonial Layout Choose Layout.
Testimonial Avtar Position Choose avtar position.
Testimonial Layout Background Type Choose layout background type.
Animation Style Choose your animation style
Post settings
Count Enter the number of testimonials items to display.
Categories Select categories to limit results. To display the result from all categories leave all categories unselected.
Thumbnail Size You can select the thumbnail size, which registers with the theme and plugins.
Testimonial Content Alignment Select testimonial alignment.
Typography
Use google fonts Select this checkbox to use google fonts.
Use google fonts(Checked)
Font Family Select the font family.
Font style Select font styling.
Google Fonts Enqueue Source Choose the source of Google Fonts CSS.
Slider Settings
Show Pagination Control Check this checkbox to display pagination controls.
Show Pagination Control( Checked )
Bullet color Chose bullet color.
Show Prev/Next Buttons Check this checkbox to display the prev/next buttons.
Slider 3D Effects Choose the slider effect.
Responsive Settings
Note : This section is enable for style-4, style-5 and style-9.
Columns – Extra large ≥992px Select columns in extra large devices width ≥992px.
Columns – Large ≤992px Select columns in extra large devices width ≤992px.
Columns – Medium ≤768px Select columns in extra large devices width ≤768px.
Columns – Small ≤576px Select columns in extra large devices width ≤576px.

Timeline

This element allows inserting the timeline in content

Param Name Description
Timeline Style Select timeline style.
Color Scheme Select the color scheme.
Timeline (Note: It is a repeater field where you can add multiple items. It contains fields as below.)
Timeline Date Enter the timeline date.
Timeline Title Enter the timeline title.
Title Element Tag Select title element tag.
Timeline Description Enter timeline description.

Video

This element allows inserting Video in content.

Param Name Description
Only Icon Select this checkbox to show only icons without content and image.
Video URL Enter the link to the video.
Image Source Select Image Source as Image or External Link.
Image Source (Image)
Video Image Kindly upload your required size image, as the same image will display which you upload here.
Thumbnail Size You can select the thumbnail size, which registers with the theme and plugins.
Image Source (External Link)
Image Link Please enter image external link
Opacity Select this checkbox to enable the opacity.
Opacity (Checked)
Opacity Color Add opacity color.
Button / Icon Type Select any one Button / Icon Type from the given dropdown.
Button / Icon Type (Icon)
Icon Background Select the icon background.
Icon Style Select icon style.
Icon Title Add Icon Text.
Icon Title Position Select icon title position.
Icon Title Color Select icon title color scheme.
Icon Size Select any one Button Style from given dropdown.
Icon type Select any one Button Style from the given dropdown.
Button / Icon Type (Button)
Button Text Add Button Text.
Button type Select any one Button Style from the given dropdown.
Button Shape Select any one Button Style from the given dropdown.
Button / Icon Position Select any one Button / Icon position from the given dropdown.
Content
Show Content? Check this checkbox to Show Content.
Show Content? (Checked)
Title Enter title.
Content type Select any one Button Style from the given dropdown.
Title Element Tag Select title element tag.
Description Enter description.

Accordion

This element allows inserting accordion on the page, and This is a nested shortcode. This shortcode contains the subsection in which you can add another shortcode.

Param Name Description
Accordion Style Choose accordion block styles among twelve styles.
Enable Counter Select this checkbox to use the counter.
Shape Select the accordion shape.
Layout Color Choose layout color.
Animation Style Choose one of the styles for animation.
Color
Text Color Select accordion text color.
Active Tab Text Color Select accordion active tab text color.
Border Color Select accordion border color.
Tab Background color Select the accordion tab background color.
Active Tab Background Color Select accordion active tab background color.
Icon Color Select icon color.
Active Tab Icon Color Select active tab icon color.
Icon
Icon Select accordion navigation icon.
Position Select accordion navigation icon position.

WebGatha Section

Param Name Description
Title Enter section title ( Note: you can leave it empty ).
Extra class name If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in your css file.
Icon
Icon Library Select icon library.
Icon Select an icon from the library.

Slider

This element allows inserting Slider in content.

Param Name Description
Height Select height for the slider as Full Height or Custom Height.
Height (Custom Height)
Custom Height Value Enter responsive slider height.
Unit Select unit for slider height
Background Image Source Select background image source as Image or External Link.
Background Image Source (Image)
Background Image Upload background image.
Background Image Source (External Link)
Background Image Link Please enter image external link
Background Color Apply for slider and loader background colors
Background Secondary Color Apply for slider and loader background colors for a gradient
Slider Setting
Enable Slider Autoplay? Select this checkbox to enable slider autoplay.
Enable Slider Autoplay? (Checked)
Interval The interval between slides. In milliseconds. Default: 5000
Enable Slider Loop? Select this checkbox to enable the slider loop.
Arrow/Navigation
Enable Arrow? Select this checkbox to enable an arrow.
Enable Arrow? (Checked)
Select Arrows Select the arrows icon.
Arrows Color Select arrows color.
Show Arrows on Hover Select this checkbox to show arrows on hover.
Enable Navigation? Select this checkbox to enable navigation.
Enable Navigation? (Checked)
Navigation Color Select navigation color.
Show navigation on Hover Select this checkbox to show navigation on hover.

Slider Item.

Param Name Description
Content Width Set content width. If set ZERO than content width will be set fit content.
Horizontal Align Enter responsive slider height.
Vertical Align Select vertical align for slider.
Text Align Select the text-align.
Overflow Hidden Select this checkbox for hidden overflow contents.
Title
Title Enter Title.
Title Font Size Enter responsive font size in pixel.
Title Color Select the title color.
Use Google fonts Select this checkbox to use Google fonts for title.
Font Family Select the Google font family for the title.
Font style Select Google font style for title.
Note: These fields are only visible if “Use Google fonts” is checked.
Animation Style for Title Select animation style for title.
Animation Duration Default 500ms. Write the number in ms.
Animation Delay Write the number in ms.
Subtitle
Subtitle Enter subtitle.
Show Subtitle Above Title Select this checkbox to show the subtitle above the title.
Subtitle Font Size Enter responsive font size in pixel.
Subtitle Color Select subtitle color.
Use Google fonts Select this checkbox to use Google fonts for subtitles.
Font Family Select the Google font family for subtitles.
Font style Select Google font style for subtitles.
Note: These fields are only visible if “Use Google fonts” is checked.
Animation Style for Subtitle Select the animation style for subtitles.
Animation Duration Enter animation duration for subtitle. Default 500ms. Write number in ms.
Animation Delay Enter animation delay for subtitles. Write the number in ms.
Description
Description Enter description.
Description Color Select description color.
Animation Style for Description Select the animation style for description.
Animation Duration Enter animation duration for description. Default 500ms. Write the number in ms.
Animation Delay Enter animation delay for description. Write the number in ms.
Button 1
Button Type Select the button type.
Button Title Enter the button title.
Title & Link Enter the button title and link.
Button Size Select button size.
Button Shape Enter the button shape.
Text Color Select the button text color.
Text Hover Color Select the button text hovers color.
Background Color Enter the background color.
Background Hover Color Select background hover color.
Animation Style Select the animation style for the button.
Animation Duration Enter the animation duration for the button. Default 500ms. Write a number in ms.
Animation Delay Enter the animation-delay for the button. Write a number in ms.
Button 2
Button Type Select the button type.
Button Title Enter the button title.
Title & Link Enter the button title and link.
Button Size Select button size.
Button Shape Enter the button shape.
Text Color Select the button text color.
Text Hover Color Select the button text hovers color.
Background Color Enter the background color.
Background Hover Color Select background hover color.
Animation Style Select the animation style for the button.
Animation Duration Enter the animation duration for the button. Default 500ms. Write the number in ms.
Animation Delay Enter the animation-delay for the button. Write a number in ms.
Background
Image Source Select image source.
Image source( Image )
Background Image Set background image.
Image source( External Link )
Background Image Link Enter the image link.
Background Position Select background-position.
Background Size Select the background size.
Background Repeat Select background-repeat.
Background Color Apply for slider and loader background colors.
Background Secondary Color Apply for slider and loader background colors for gradient.

Tabs

This element allows inserting Tabs in content. This is nested shortcode, this shortcode contains the subsection in which you can add another shortcode.

Param Name Description
Tabs Style Select the Tabs style. There are ten tabs style
Tabs Position Select the tabs navigation position.
Tabs Alignment Select tabs alignment. The tabs alignment Center will not work if “Tab Position” is set to “Left.
Shape Select tabs shape.
Layout Color Choose layout color.
Animation Style Choose your animation style
Enable Counter Select this checkbox to use the counter.
Enable Shadow Select this checkbox to use shadow.
Color
Text Color Select the tab text color.
Background Color Select the tab background color.
Active Tab Text Color Select the tab text color.
Active Tab Background Color Select the tab background color.

WebGatha Section

Param Name Description
Title Enter the section title.
Section ID Enter section ID (Note: make sure it is unique and valid according to w3c specification ).
Extra class name If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in your css file.
Icon
Icon position Select icon position.
Icon Library Select icon library.
Icon Select an icon from the library.

Header Builder

WebGatha comes with six predefined header styles with different settings and options, by using them in combination, you can create a customized header.

Header Builder allows you to create a custom header, which you can use as header.
You can set which header to use for all pages using theme settings in Theme Options. The header builder is an intuitive drag and drop header editor. With the help of a header builder, you can create customized, eye-catching and impressive unlimited headers with an infinite number of styles by just drag and drop.

You can use a component at different locations, like Top Bar, Main Header or in the Header Bottom, and you can set individual properties for each. The header builder provides better and precise control over header elements. Header builder also provides the facility to create customized and responsive headers for mobile devices too, which gives a great user experience on all devices and platforms.

 

Enable Header Builder in Theme Options

By default, the theme will display predefined header styles. You can display custom header by enabling it by selecting “Header Builder” in Theme Options > Header > Site Header > “Select header type” field. Enabling custom header will enable another field, named “Select Custom Header”, next to the “Select header type” field, in which you can choose custom header built-in Header Builder section.

 

Header Builder Sections

A header consists of three sections:
1. Top Bar: As the name suggests, it’s the top area of the header.
2. Main Header: As the name suggests, it’s the main area of the header.
3. Header Bottom: As the name suggests, this row is located at the bottom of the header.

 

Header Builder Components

Header builder comes with the below components:

  1. Account: Add a login and register links and form.
  2. Button: Create buttons with various styles and options.
  3. Cart: Add WooCommerce Cart icon.
  4. Compare: Add WooCommerce Compare icon.
  5. Currency: Add WooCommerce currency switcher dropdown.
  6. Divider: Add a separator to divide the header content.
  7. Email: Add email address.
  8. Static Block: Select and add a Static Block content.
  9. Language: Add language switcher/selector dropdown.
  10. Logo: Add a logo in the header. Settings to customize the logo options are available in the theme options.
  11. Menu: Add any existing WordPress menus to the header.
  12. Phone Number: Add a phone number to the header.
  13. Primary Menu: Add menu assigned in the Primary menu location.
  14. Search: Add a WordPress search form.
  15. Social Profile: Add social profile links to the header. Social profiles can be managed from Theme Options.
  16. Space: Add horizontal space between two elements.
  17. Text Block: Add text/HTML content with WYSIWYG editor.
  18. Wishlist: Add WooCommerce Wishlist icon.

 

Mega Menu

WebGatha boosts the default functionality of the WordPress menu to adding mega menu in the theme, So it is more comfortable and smooth.

Create a menu from Appearance > Menus and drag and drop post, page, category or anything which you need in the menu. Mega menu is enabled only on the primary menu. Click on “Enable Mega Menu” from WebGatha Mega Menu.

If WebGatha Mega Menu does not appear then enable from Screen Options > WebGatha Mega Menu.


When you hover on the menu item, You will see the “Menu Setting” option.

Menu Setting comes with the below options:

  1. Link Anchor: Link where you want to navigate.
  2. Menu Color Scheme: Select color scheme Dark or Light.
  3. Design Type: Select Design type Dropdown or Mega menu.
  4. Open Submenu On Click: Open sub-menu.
  5. Enable Menu Link: Open menu link. It will appear when the “Open Submenu On Click” option selected.
  6. Select Icon: Select Icon for Menu.
  7. Label: Menu item label.
  8. Label Color: Menu item label color.
  9. Background Image: Select background image for the mega menu.
  10. Background Repeat: Select Background image repeat type.
  11. Background Size: Select Background image size.
  12. Background Position : Select Background image position.

Custom Sidebar Widget

This element allows you to create custom sidebar, Which you can use in any page. To add the sidebar in particular page go to Pages -> Custom Sidebar.

Custom Menu

You can use the custom menu anywhere in the theme using the following shortcode. Using this shortcode, you can display the menu list in a horizontal line.

[webgathacore-custom-menu]

For use custom menu, follow step:
– Create a Menu
– Assign menu as Custom Menu
– Use shortcode for display Menu – [webgathacore-custom-menu]

Topbar Menu

You can manage the Topbar menu from Header Builder. You can assign the topbar menu using the Menu element.

For use topbar menu, follow step
– Create a Menu
– Assign menu as Topbar Menu
– Select Menu from Menu element in Header Builder

WebGatha Contact Us

This widgets allows inserting the contact us details.

WebGatha Contact Us widget comes with the below options:

  1. Title : Enter title.
  2. Address : Enter address.
  3. Email : Enter email.
  4. Phone : Enter phone number.

WebGatha Facebook

This widgets allows inserting facebook page details.

WebGatha Facebook widget comes with the below options:

  1. Title : Enter title.
  2. Page Address : Enter facebook page address.

WebGatha Instagram

This widget allows inserting the Instagram image.

WebGatha Instagram widget comes with the below options:

  1. Title: Enter the title.
  2. Number of items: Enter the number of item to show.
  3. Display Likes Counts? : Checked this checkbox to display likes counts on images.
  4. Display Comments Counts? : Checked this checkbox to display comments counts on images.

WebGatha Newsletter

This widget allows the inserting newsletter.

WebGatha Newsletter widget comes with the below options:

  1. Title: Enter the title.
  2. Newsletter Style : Select newsletter style.
  3. Newsletter Color: Select newsletter color.
  4. Content: Checked this checkbox to display comments counts on images.

WebGatha Opening Hours

This widgets allows intersting opening hours.

WebGatha Opening Hours widget comes with the below options:

  1. Title : Enter title.

WebGatha Recent Posts

This widgets allows inserting recent posts.

WebGatha Recent Posts widget comes with the below options:

  1. Title : Enter title.
  2. Display post date? : Checked this checkbox to show post date on posts.
  3. Display post thumbnail? : Checked this checkbox to show post thumbnail image.

WebGatha Social

This widgets allows inserting social.

WebGatha Social widget comes with the below options:

  1. Title : Enter title.
  2. Content : Enter content.
  3. Style : Select social widgets style.
  4. Shape : Select social widgets shape. Note : Shape Option will not apply for the Default style.

WebGatha Testimonials

This widget allows inserting testimonials.

WebGatha Testimonials widget comes with the below options:

  1. Title: Enter the title.
  2. Number of to show: Enter number of testimonials to show.
  3. Display meta? : Checked this checkbox to show meta.

Browser Support

WebGatha supports the latest two versions of all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer 11 and Edge.

How to rate this item

If you like our theme and support, Please do not forget to rate it with five stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: http://themeforest.net/downloads and find “Rate this item” below the download button and rate out the theme.

Advance Thanks in Anticipation!

Theme Translation

WebGatha is entirely multi-language. It means you can translate the site into anyone or multiple languages.

There are various options to translate the site. You can do it by either editing .po file, or by using plugins.

Poedit

Translation with Poedit is a .po file editing translation method.

This app provides the easy method to create new translations for any language, edit existing translations, synchronize strings, and a,also generate the .mo file.

To edit catalog.po file, follow the below steps:

  1. Open Poedit
  2. Choose “New from Po/POT file.
  3. Select the pot file wp-content/themes/webgatha/languages/webgatha.pot.
  4. Select the new language you want to translate. Choose the country, (e.g., French) if you wish to the language in general, or if you want the more exact, select French (France) or French (Madagascar) to consider local dialects.
  5. Save the file with your language name, prefixed with the theme name, like “webgatha-fr_FR.po” for “French (France)” or “webgatha-fr_MG.po” for “French (Madagascar)“. It will generate both a .po and .mo files for your translation.
  6. Place these files into Folderwp-content/languages/themes/.

How to Update Translated Language File

When a theme is updated and text strings are updated in the language files, then you can update your language translation file to sync with the latest changes. For this, follow the below steps.

  1. Open Poedit.
  2. Open the translated .po file of your desired language in POEdit.
  3. Select Catalogue > “Update from POT file’ in top menu.
  4. In the opening file dialog, choose the webgatha.pot file from the wp-content/themes/webgatha/languages folder. The catalogue will then be auto-updated with all the new text strings, and your custom ones will be preserved.
  5. Save the file after updating and adding translations.

Loco Translate

Loco Translate is the in-browser translation file editing method.

To start translation, follow the below steps.

  1. Install Loco Translate plugin.
  2. Go to Loco Translate > Themes and select “WebGatha.”
  3. Click on “New Language” link.
  4. Choose a language in “Choose a language” field, and choose “languages/loco/themes/webgatha-<locale>.po” in “Choose a location” field.
  5. Translate strings and click on “Save” button to save the translations.

For more information check below links.
https://localise.biz/wordpress/plugin/manual
https://localise.biz/wordpress/plugin/beginners

WPML

WPML is an in-browser multi-lingual translation plugin. It provides facility to translate WordPress, Themes, and Plugins strings and add contents in multi-language.

WPML is a commercial plugin. So, you need to purchase a copy of WPML, with below modules, to start the translation.

  1. WPML String Translation
  2. WPML Translation Management
  3. Advanced Custom Fields Multilingual (ACFML)

Check below video for WPML setup.

For further settings, after WPML plugins installation, Check “Getting Started Guide.”
For more information and settings, see WPML Documentation.

Polylang

You can translate custom post types, custom taxonomies, widgets, navigation menus as well as URLs in Polylang.

To start translation, follow the below steps.

  1. Install the Polylang plugin.
  2. Go to Language and select language you want to translate and click on “Add New Language”.
  3. Go to Language > Strings translations and translate strings.

Source & Credits

All images and videos are for preview purposes only and not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

Scripts

CSS & Fonts

Note For questions on basic WordPress, HTML, Javascript or CSS editing – please give your question a quick Google or visit W3Schools as theme issues get top priority.

Suggest Edit