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.
Getting Started
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 1: Via “Envato Market” plugin (Recommended)
In this method, you can install the theme directly from Themeforest with the Envato Market plugin. It is a free plugin. Using it, you can access all of your Themeforest and CodeCanyon item purchases from your WordPress dashboard. It becomes easy to install the new ThemeForest item and as well as keep them up to date. In this way, you will always have the latest feature additions, bundled plugin updates, and any theme security patches.
How to install?
The plugin can be installed from a ZIP file via the WordPress Dashboard.
- Download the ZIP file from here.
- Login to your WordPress Dashboard.
- Go to Plugins > Add New.
- Click “Upload Plugin” at the top.
- Upload the envato-market.zip file.
- Once installed, click “Activate Plugin”.
- Visit the new “Envato Market” menu item.
Once plugin is installed and activated, you will need to link it to your Envato account to get access to all of your WordPress theme and plugin purchases. To do this, click on the “Generate A Personal Token” link on the Envato Market plugin page. It will redirect you to the Envato API page. You can generate an authorization token here.
To generate your token, log in to your Envato account (if you are not logged in), check the terms and conditions checkbox (but don’t uncheck any of the select options – the Envato Market plugin needs access to this info to work correctly) and click the green button for “Create Token.”
You should get a green success screen next.
Copy your token code and paste into the Token field on the Envato Market plugin page then Save Changes.
Once token saved, you will able to see all of your purchases. Just click the Install button to install your theme, and that’s it.
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:
- Log in to the WordPress Admin Panel and go to Appearance > Themes.
- Click on Add New button on top of the screen.
- 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”).
- 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 Logo
This section provides options to upload/set the site logo. You can set a logo as either text or image.
If you chose “Logo as Image,” it will provide options to set Site Logo, Sticky Logo, and Mobile Logo, with Max Height setting for each logo. You can enable/disable Site Description, and you can set Favicon too.
This section contains the below fields:
Name | Description | |
---|---|---|
Site Logo Setting | ||
Logo Type | Specify the type of Logo; it can be text or image. | |
Logo Text | You can manage the logo-text displayed in place of the logo-image. This field is available if “Logo Type” is set to “Logo as Text”. |
|
Logo Font | You can manage typography settings for “Logo Text”. This will be applied to “Logo Text” only. This field is available if “Logo Type” is set to “Logo as Text”. |
|
Site Logo | You can choose an image as a site logo. This field is available if “Logo Type” is set to “Logo as Image”. |
|
Logo Max Height | You can set a max-height to “Site Logo” image. This field is available if “Logo Type” is set to “Logo as Image”. |
|
Sticky Logo Setting | ||
Sticky Logo Font | You can manage typography settings for logo text. This will be applied to logo text only for the sticky header. This field is available if “Logo Type” is set to “Logo as Text”. |
|
Sticky Logo | You can choose an image as a site logo for the sticky header. This field is available if “Logo Type” is set to “Logo as Image”. |
|
Sticky Logo Max Height | You can set a max-height to “Site Logo” image for the sticky header. This field is available if “Logo Type” is set to “Logo as Image”. |
|
Mobile Logo Setting | ||
Mobile Logo Font | You can manage typography settings for logo text. This will be applied to logo text only for the mobile header. This field is available if “Logo Type” is set to “Logo as Text”. |
|
Mobile Logo | You can choose an image as a site logo for the mobile header. This field is available if “Logo Type” is set to “Logo as Image”. |
|
Mobile Logo Max Height | You can set a max-height to “Site Logo” image for the mobile header. This field is available if “Logo Type” is set to “Logo as Image”. |
|
Site Description Setting | ||
Site Description | Show/Hide site description. | |
Favicon icon Setting | ||
Favicon icon | You can choose an image as a favicon. Image must be square, and at least 512 pixels wide and tall. |
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. |
Header
Site Header
This section provides settings to manage various portions and elements of the site header, like header type, header colors, etc.
This section contains the below fields:
Name | Description | |
---|---|---|
Site Header | ||
Select header type | You can select header type in this field, either “Default” or “Header Builder”. If you choose “Header Type” as “Header Builder”, then you will have to select a custom header created with Header Builder. | |
Select Custom Header | Select a custom header created with “Header Builder”. This field is available if “Header Type” is set as “Header Builder”. |
|
Header Width | You can manage the header width as full width or fixed width. | |
Header above content | This will display the header above the page content. This is useful when displaying the contents or slider section below the header. | |
Menu Fonts | ||
Menu Fonts Style | You can manage the menu font style. This will enable the custom font style for the menu. | |
Menu Fonts | This field depends on the menu font style if set as custom. You can manage menu typography. | |
Sub Menu Fonts | This field depends on the menu font style if set as custom. You can manage sub-menu typography. | |
Header Tools | ||
Show Cart Icon | This field depends on site header and WooCommerce plugin if set site header as default and WooCommerce plugin activate. You can Show/Hide the cart icon. | |
Show Compare Icon | This field depends on site header and YITH WooCommerce Compare plugin if set site header as default and YITH WooCommerce Compare plugin activate. You can Show/Hide the compare icon. | |
Show Wishlist Icon | This field depends on site header and YITH WooCommerce Wishlist plugin if set site header as default and YITH WooCommerce Wishlist plugin activate. You can Show/Hide the wishlist icon. | |
Show Search Icon | This field depends on site header if set as default. You can Show/Hide the search icon. | |
Header (Main) Colors | ||
Color Type | This field depends on site header if set as default. You can manage 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 header background color. | |
Text Color | This field depends on Color Type if set as custom. You can manage the header content text color. | |
Link Color | This field depends on Color Type if set as custom. You can manage the header content link color and link hover color. | |
Sticky Header Setting | ||
Sticky Header | This field depends on site header if set as default. You can enable/disable sticky header for desktop. | |
Sticky Mobile Header Setting | ||
Mobile Sticky | This field depends on site header if set as default. You can enable/disable sticky header for the responsive screen. |
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
|
Copyright Section
In this section, you can enable/disable to show copyright text. In the Copyright Section, you can set the background color, text color, link color, and footer text.
In footer contents, you can use some predefined shortcodes, like [webgathacore-year]
, [webgathacore-site-title]
, [webgathacore-footer-menu]
, [webgathacore-footer-social-profile]
etc.
This section contains the below fields:
Name | Description | |
---|---|---|
Show Copyright Text | Show/Hide the copyright section on your site. | |
Copyright Background Color | You can manage the copyright section background color. | |
Text Color | You can manage content color in the copyright section. | |
Link Color | You can manage link color in the copyright section. | |
Footer Text Left | You can manage the copyright section left side contents. | |
Footer Text Right | You can manage the copyright section right side contents. |
Shortcode List | ||
---|---|---|
[webgathacore-year] |
Display current year | |
[webgathacore-site-title] |
Display site title | |
[webgathacore-footer-menu] |
Display footer menu | |
[webgathacore-footer-social-profile] |
Display social profile icons |
Page Header
In this section, you can manage (default) page header settings. This section contains fields to manage page header, background, and breadcrumb settings. You can set page header height, enable full width and set color scheme as light or dark. You can choose color, image or video as a page header background.
Also, you can customize page header settings individually from each page.
This section contains the below fields:
Background Opacity Color (Custom)This field depends on background opacity color if set as custom. You can set custom colors as page header background opacity color.
Name | Description | |
---|---|---|
Page Header | ||
Page Header Layout | You can select the page header layout from the list. There are 5 different layouts. | |
Page Header Height | You can set page header minimum height for desktop. | |
Mobile Page Header Height | You can set page header minimum height for the mobile screen. | |
Enable Full Width | You can set the page header width. There are an option to enable/disable for set page header as full width. | |
Color Scheme | You can set the page header color scheme as light or dark. | |
Page Header – Background Settings | ||
Background Type | You can set page header background like color, image or video. | |
Background Color | This field depends on page header background type if set as color. You can set a page header background color. | |
Background Image | This field depends on page header background type if set as image. You can manage page header background image. | |
Video Source | This field depends on page header background type if set as video. You can select page header background video source as YouTube or Vimeo. | |
Video Link | This field depends on page header background type if set as video. You can set video as background in the page header. | |
Background Opacity Color | This field depends on page header background type if set as image or video. You can manage page header background opacity color. You can set opacity colors like black or custom also. | |
Breadcrumb Settings | ||
Display Breadcrumb | Enable/Disable breadcrumb for desktop. | |
Display Breadcrumb on Mobile | Enable/Disable breadcrumb for mobile screen. | |
Breadcrumb Style | You can manage breadcrumb layout. There are three layout for breadcrumb. |
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/Post Settings
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.
Blog contents come from the excerpt. If the excerpt does not have any contents then it will come from the content. If the content has shortcode, it will be not displayed.
|
|
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 |
|
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.
Contents come from the excerpt. If the excerpt does not have any contents then it will come from the content. If the content has shortcode, it will be not displayed.
|
|
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”. |
WooCommerce
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.
Other Color SettingsApart from these colors, there are some specific section, whose colors can be managed from there only
Details are as below :
Header : For header color settings, go to Theme Options > Site Header.
Footer : For footer color settings, go to Theme Options > Footer.
Revolution Slider : For color setting in Revolution Slider go to Slider Revolution.
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. |
Site Info
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 | |
---|---|---|
Enter email address. | ||
Phone Number | Enter mobile number. |
Cookie Law Info
In this section, you can manage Privacy Policy related settings.
This section contains the below fields:
Name | Description | |
---|---|---|
Show Cookies Info | Enable/Disable cookie low information notice. | |
Cookies Text | You can manage cookie notice text. | |
Page with Details | You can select privacy policy page. That will contain detailed information about your Privacy Policy | |
Cookie Layout | You can select cookie low information box layout. There are three option as bottom, Left bottom, Right bottom. |
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:
- Google Bookmarks
- Tumblr
- StumbleUpon
- Digg
- VK
- 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
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”. The newsletter Form is dependent on the “MailChimp for WP” plugin. This field will display dropdown only if the form is plugin is activated, linked with MailChimp and form created.
|
|
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. |
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.
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.
Banner






This element allows inserting the banner in content.
TitleAdd banner text here. Use Google font to select this checkbox to use Google fonts. Font FamilySelect Google font family. Font style selects Google font style.
Note: These fields are only visible if “Use Google fonts” is checked.Font SizeEnter/select font size. This font-size will be in the ratio of the main font-size. Text ColorSelect text color.Background ColorSelect text background color.Font style select font style.
Note: This field only visible if “Use Google fonts” is unchecked.Font WeightSelect font-weight.
Note: These fields only visible if “Use Google fonts” is unchecked.Text TransformSelect text-transform.Letter SpacingEnter/select letter spacing.Line HeightEnter line-height. If you want to add value in decimal, then use a full decimal format like allowed units are px, em, and %.ResponsiveSelect checkbox(es) to show/hide text on specific device size.
Name | Description | |
---|---|---|
Banner Type | Choose a banner style. There are three styles, and each style contains specific parameters. | |
Vertical Align | Set banner text vertical position. | |
Horizontal Align | Set banner text horizontal position. | |
Effect | Select the banner effect type. | |
Banner Padding | You can set the banner padding here. | |
Font Size Responsive | Select this checkbox to enable responsive font size for different width. | |
Font Size | Enter the Font Size | |
Font Size Responsive (Yes) | ||
Extra Large Devices (≥1200px) | Enter the Font Size for extra-large devices. | |
Large Devices (≥992px) | Enter the Font Size for large devices. | |
Medium Devices (≥768px) | Enter the Font Size for medium devices. | |
Small Devices (≥576px) | Enter the Font Size for small devices. | |
Extra Small Devices (<576px) | Enter the Font Size for extra small devices. | |
Image source( Media Library ) | ||
Banner Image | Set banner image. | |
Image source( External Link ) | ||
Banner Image | Enter the image link. | |
Thumbnail Size | Select the banner image size. | |
Banner Link | Select this checkbox to add a link to the banner. | |
Banner URL | Set banner link URL here. | |
List Items (It is a repeater field where you can add multiple items. It contains fields as below.) | ||
Button (This tab only visible if “Banner Link” is unchecked.) | ||
Button Title | Enter the button title. | |
Button Style | Select the button style. There are three styles, and each style contains specific parameters.
– Link |
|
Button Text Color | Select the button text color. | |
Button Text Hover Color | Select the button text hovers color. | |
Button Style( Flat ) | ||
Button Size | Select button size. | |
Button Shape | Select the button shape. | |
Button Background Color | Select the button background color. | |
Button Hover Background Color | Select the button hovers background color. | |
Button Style( Border ) | ||
Button Size | Select button size. | |
Button Shape | Select the button shape. | |
Button Border Color | Select the button border color. | |
Button Border Width | Enter/select button border width. | |
Text Transform | Select the text transformation style. | |
Letter Spacing | Enter letter spacing. | |
Line Height | Enter line-height. If you want to add value in decimal, then use a complete decimal format like allowed units are px, em, and %. | |
URL | Set a button link here. | |
Badge (This tab only visible if style-1 is selected) | ||
Add Badge | Select this checkbox to add a badge. | |
Title | Enter the badge title. | |
Badge Type | Select the badge style. | |
Badge Text Color | Select badge Text Color. | |
Badge Type ( Border ) | ||
Badge Border Color | Select the badge border color. | |
Badge Type ( Flat ) | ||
Badge Background Color | Select badge background color. | |
Badge Vertical Align | Select badge vertical position. | |
Badge Horizontal Align | Select a badge horizontal position. | |
Badge Width | Enter badge width. | |
Badge Height | Enter badge height. | |
Badge Font Size | Enter a font size. | |
Badge Line Height | Enter line-height. | |
Badge Font Weight | Select font-weight. | |
Badge Text Transform | Select the text-transform. | |
Deal Details (This section only visible if deal-1 or deal-2 selected as banner style.) | ||
Deal Date | Select / Enter deal date. | |
Expire Message | Enter a message to display, instead of date counter, when the deal is expired. | |
Counter Style | Select the deal counter style. | |
Countdown Color | You can set the Color scheme. | |
Deal Padding | You can set the padding here. |
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. |
Clients Logo





This element allows inserting the clients logo in content..
Param Name | Description | |
---|---|---|
Layout selection | Choose clients list style. There are two styles, and each style contains specific parameters.
– Slider |
|
Enable Grayscale | Select this checkbox to enable grayscale. | |
Columns | Select number of columns. | |
Thumbnail Size | You can select the thumbnail size, which registers with the theme and plugins. | |
Slider Settings – Note : This section only visible if Layout set to slider. | ||
Enable Pagination | Select this checkbox to enable pagination | |
Bullet Color | Set slider bullet color. | |
Bullet Active Color | Set slider active bullet color. | |
Enable Arrow (Previous/Next) | Select this checkbox to enable previous/next arrow. | |
Enable Slider Loop | Select this checkbox to enable slider loop. | |
Enable Slider Autoplay | Select this checkbox to enable slider autoplay. | |
Grid Settings – Note : This section only visible if Layout set to grid. | ||
Enable Border | Select this checkbox to enable border. | |
Logo Images | ||
Image Source | Select Image Source as Image or External Link. | |
Image Source(Image) | ||
Client Logo | Upload/select Client Logo image. All image size should be same. | |
Image Source(External Link) | ||
Image Link | Please enter image external link. All image size should be same. | |
Logo Link | Please enter image external link. All image size should be same. |
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 Gallery






This element allows inserting the image gallery in content.
Param Name | Description | |
---|---|---|
Hide Icon Style? | Select the checkbox to hide icon style. | |
Hide Icon Style? (Unchecked) | ||
Icon Style | Select icon style. | |
Image Gallery Type | Select the Image gallery type. | |
Space Between Image | Select the Image gallery type. | |
Space Between Image | Select items per view. | |
Enable Image Caption? | Select the checkbox to enable the image caption. | |
Thumbnail Size | Choose thumbnail size. | |
Grid Settings (It will visible if “Image Gallery Type” set to “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 the number of columns per view in small devices ≥576px. | |
Slider Settings (It will visible if “Image Gallery Type” set to “Slider”.) | ||
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. | |
Enable Arrow? | Select this checkbox to enable an arrow. | |
Enable Navigation? | Select this checkbox to enable navigation. | |
Enable Slider Loop? | Select this checkbox to enable the slider loop. | |
Masonry Settings (It will visible if “Image Gallery Type” set to “Masonry”.) | ||
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 the number of columns per view in small devices ≥576px. | |
Images | ||
Slider Image Gallery | Select/Upload image for the gallery. | |
Image Overlay Color | Select overlay color. |
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. |



This element allows inserting the Instagram images in the content.
Param Name | Description | |
---|---|---|
Instagram Layout | Select the Instagram layout.
– Grid |
|
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. |
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. |
Social Links



This element allows inserting social icons in content.
Param Name | Description | |
---|---|---|
Layout Selection | Select layout Selection. There are three layouts as Simple, Border, and Flat. | |
Icon Color Style | Select the icon color style. | |
Hover Style | Select the hover style. | |
Social Links Icon Size | Select social links icon size. | |
Orientation | Select social links orientation. | |
Layout Selection (Border and Flat) | ||
Shape | Select social links shape. | |
Social Profiles | ||
Profile Link | Select title and Url. | |
Select Icon | Select icon. |
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. |
Additional
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:
- Account: Add a login and register links and form.
- Button: Create buttons with various styles and options.
- Cart: Add WooCommerce Cart icon.
- Compare: Add WooCommerce Compare icon.
- Currency: Add WooCommerce currency switcher dropdown.
- Divider: Add a separator to divide the header content.
- Email: Add email address.
- Static Block: Select and add a Static Block content.
- Language: Add language switcher/selector dropdown.
- Logo: Add a logo in the header. Settings to customize the logo options are available in the theme options.
- Menu: Add any existing WordPress menus to the header.
- Phone Number: Add a phone number to the header.
- Primary Menu: Add menu assigned in the Primary menu location.
- Search: Add a WordPress search form.
- Social Profile: Add social profile links to the header. Social profiles can be managed from Theme Options.
- Space: Add horizontal space between two elements.
- Text Block: Add text/HTML content with WYSIWYG editor.
- Wishlist: Add WooCommerce Wishlist icon.
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.
Widgets
WebGatha Contact Us


This widgets allows inserting the contact us details.
WebGatha Contact Us widget comes with the below options:
- Title : Enter title.
- Address : Enter address.
- Email : Enter email.
- Phone : Enter phone number.
WebGatha Facebook


This widgets allows inserting facebook page details.
WebGatha Facebook widget comes with the below options:
- Title : Enter title.
- Page Address : Enter facebook page address.
WebGatha Instagram


This widget allows inserting the Instagram image.
WebGatha Instagram widget comes with the below options:
- Title: Enter the title.
- Number of items: Enter the number of item to show.
- Display Likes Counts? : Checked this checkbox to display likes counts on images.
- 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:
- Title: Enter the title.
- Newsletter Style : Select newsletter style.
- Newsletter Color: Select newsletter color.
- 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:
- Title : Enter title.
WebGatha Recent Posts


This widgets allows inserting recent posts.
WebGatha Recent Posts widget comes with the below options:
- Title : Enter title.
- Display post date? : Checked this checkbox to show post date on posts.
- 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:
- Title : Enter title.
- Content : Enter content.
- Style : Select social widgets style.
- 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:
- Title: Enter the title.
- Number of to show: Enter number of testimonials to show.
- Display meta? : Checked this checkbox to show meta.
Extra
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:
- Open Poedit
- Choose “New from Po/POT file.”
- Select the pot file
wp-content/themes/webgatha/languages/webgatha.pot
. - 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.
- 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. - Place these files into Folder
wp-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.
- Open Poedit.
- Open the translated
.po
file of your desired language in POEdit. - Select Catalogue > “Update from POT file’ in top menu.
- In the opening file dialog, choose the
webgatha.pot
file from thewp-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. - 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.
- Install Loco Translate plugin.
- Go to Loco Translate > Themes and select “WebGatha.”
- Click on “New Language” link.
- Choose a language in “Choose a language” field, and choose “
languages/loco/themes/webgatha-<locale>.po
” in “Choose a location” field.
- 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.
- WPML String Translation
- WPML Translation Management
- 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.
- Install the Polylang plugin.
- Go to Language and select language you want to translate and click on “Add New Language”.
- 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
- jQuery
- Bootstrap
- Popper
- Tilt js
- Countdown js
- FontIconPicker js
- Shuffle js
- Js Cookie
- SlickNav
- Swiper js
- Magnific Popup
- jQuery ui touch punch
CSS & Fonts
- Bootstrap
- Swiper
- SlickNav
- Magnific Popup
- Font Awesome
- jQuery-ui
- FontIconPicker
- Themify Icon
- Google 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.
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.
This section contains the below fields:
fab fa-500px
. For list of Font Awesome classes click here.