Synta

Theme Requirements

To run WordPress Theme we recommend using a host that supports:

• PHP version 7.4 or greater.
• MySQL version 5 or greater OR MariaDB version 10.0 or greater.

We recommend you make sure that your server PHP configuration limits are as follows:

• max_execution_time 600
• max_input_time 600
• memory_limit 256M
• post_max_size 128M
• upload_max_filesize 128M
• max_input_vars 3000

Theme Installation

Step by step instructions for install WordPress Theme:

1. Login to WordPress admin panel
2. Go to: Appearance > Themes
3. Click on the Add New button, then click on the Upload New
4. Upload theme zip file
5. Click on the Activate button

If you have some problem with this method please try another instalation way.

Supplementary link with description of theme installing via FTP or CPanel:

• WordPress Codex: Using Themes

Plug-ins Installation

After uploading the theme, you'll be redirected to the step-by-step installation wizard. Here the list of required and recommended plugins is vsible.

List of required plugins:

• Synta Core - theme core plugin (is required for using all custom modules, post-types, theme options and more other);
• WGL Extensions - theme plugin (includes all authors' extensions, functionality, features);
• Elementor Page Builder

List of recommended plugin:

• Contact Form 7 - practical free tool for creating the the contact forms
• Revolution Slider -  an easy-to-use design tool for creating sliders on WordPress
• WooCommerce - free plugin to create an online store on WordPress
• Advanced AJAX Product Filters - unlimited AJAX products filters to make your shop perfect
• WPC Smart Compare for WooCommerce - smart products compare for WooCommerce
• WPC Smart Wishlist for WooCommerce - powerful tool that can help your customer save products for buy later

List of required plugins for Real Estate feature:

• WGL Real Estate - use this plugin to have the Real Estate functinality
• MB Rest Api - adds Meta Box custom fields to WordPress Rest API (required for proper work of Real Estate functionality).

Child Theme

A WordPress child theme allows you to apply custom code changes to your site and dont lose it with update of main theme.
After theme installation, you can install child-theme. Please find it in the downloaded folder. You can same way install child theme as like parent theme.

Demo Content

Our Theme have One Click Demo Import
Please follow a few steps to make it:

1. Go to WebGeniusLab > Demo Import
2. Choose the required Demo version
3. Select the Import Option
4. Click on the Import Demo button

Import option:

• Entire demo data - import the entire demo content with all demo pages
• Partial - import only the required elements of the theme (certain pages, the demo settings of Theme Options, widgets)

Theme Options

To manage theme settings in our product, we use the Redux Framework.

In this panel you can customize the following fields:

• Use minify css/js
• Preloader (on/off, colors)
• Back to Top (on/of, colors, border)
• Custom JS
• Header
  • Logo
  • Header Builder with header preset and settings
  • Sticky builder with settings
  • Mobile builder with settings
• Page title
  • Main layout settings for page title
  • Typography page title
• Footer Settings
• Copyright
• Blog (single, archive)
• Portfolio (single, archive)
• Team (slug, title background)
• Page 404 (title background)
• Sidebars (Register sidebar, layout for page)
• Color Options (main theme color, body background)
• Typography
  • Main content (content typography, headings main setting)
  • Menu typography
  • Heading typography (h1-h6)
• Shop
  • Catalog (layout, page title, columns, product per page)
  • Single (layout, page title)
  • Related product (columns, count of items)
  • Cart
  • Checkout
• Demo Importer
• Import Export Theme Options config

Header Builder

In our product for easy customize header is used own developed Drag&Drop Header Builder Powered by Elementor. With Header Builder could be created "Header Templates", select one of these templates to apply globally or locally on the page.

There are presented next modules for usage in the Header Templates: Logo, Menu, Current Date, Delimiter, Icon + Text, Search, Side Panel Button, Mobile Menu Button

The Responsive layouts could be selected and managed for mobile devices:

Some items could be hidden or displayed for different devices with Responsive visibility of the modue:

Follow a few main rules for edit and apply Header Templates:

1. Select Header Template from the list or create a new one to get it active in Selector of Header Templates. This setting allows you to apply the Header Template for the whole site.

2. Go to the Header Templates for editing or creating a new one

3. There is the possibility to select different Header Templates for each page at the Page Settings.

Mobile Header Builder

In order to manage the Mobile header, is available the functionality for Custom Mobile Header creation.

First of all, go to Theme Options > Header > Header Mobile and enable the Custom Mobile Header.

Inside the Mobile Header Tool are available two options:

• Header Templates (recommended) - select your custom Mobile Header built with Elementor.



​We recommend using this type of creation for the Mobile header. It provides a great amount of functionality and makes your work easier with a visual page builder.




• WGL Header (deprecated builder)

Mobile Drawer Content

In Theme Options > Header > Mobile Header > Mobile Drawer Tool could be selected the custom template for the Mobile Drawer Content.

To create custom Drawer template you need to create template inside the Saved Templates > select the Mobile Drawer type.

Inside the tempalte could be added any tools like WGL Menu with Vertical Layout, Search, Cart and etc.

In WGL Mobile Drawer Settings are available a large amount of settngs for this area like Width, animation, the color of the CLose icon etc.

Page Builder and custom modules

A lot of flexible modules are included in our theme. They can be used with one of the best page builders, Elementor. A variety of options is provided for every module, including size, color, alignment, and style types. This flexibility allows the theme to be customized to meet specific needs.
An icon is assigned to every module as a small visual representation of it.

"WGL Extended" is a group of very customizable modules developed by our team. Strongly recommended for use in our themes.

Every module has extended settings of colors, typography, alignment and queries:

List of content modules:

• Counter - display counter with title and description
• Carousel - use this module and rotate any modules
• Testimonials - module for display feedback from a client
• Info Box - can be used for presentation beautiful info with icon, title, text and button which is linked to something
• Flip Box - similar to an Info Box module but animated with flip effect
• Image Layers - provides you the ability to create animated layered images
• Pricing Table - display your price policy with price table
• Button - one of the main content element with flexible style settings
• Double Headings - custom style of heading
• WGL Text Module - set your own styles and font-family on the text
• Countdown Timer - use this module as a countdown timer before your events occur
• Video Popup - display video within the popup in sace of user's click on the special button
• Clients - display logo of your clients with link and animation
• Social Icons - style social icons as you wish
• Time Line Vertical - display timeline of main events
• Progress Bar - display your skill with the percentage bar
• Portfolio List - show a grid of items with animation from Portfolio post-type
• Team List - show grid of items with animation from Team Members
• Accordion Service - present the info in stylish tabs with beautiful animation
• Blog - show a list of existing Blog posts
• Circuit Service - one more way to show the info in a sircle with hover animation
• Demo Item - display the demo of a certain item with Coming Soon option
• WGL Gallery - use this module to show your photos
• Image Animate - group the images and create beautiful animation by yourself
• Image Comparison - let you to display images in comparison like before\after
• Image HotSpots - highlight the important items putting the hot spots
• Pie Chart - display the circular statistical graphic
• Products Grid - display all available products in one of existing styles: grid, list, carousel
• Satellite Service - display the info with icon and astonishing animation around it
• Service - strict stylish way to present the information with icon, title, image and links
• Tabs - show the tabs in a stylish layout
• Toggle/Accordion - create the list with the toggle function
• Working Hours - display your working hours
• WGL Login - add the button with a login option
• WGL Contact Form 7 - provides the ability to style the form without CSS
• Instagram - immitates the Intagram carousel, displays the posts
• Rotated Text - allows to put rotated text along the left side
• Showcase - showcase the elements before redirecting to the page
• Link Overlay - attach the link to the entire row\column or elements which don't contain the link option
• Background Clip Text - adds the transparent text with the image on background
• Button Physics - create the bubble-button and play with its position the front end
• Cases - can be used for stylish presentation of the information with icon, carousel or chess layout
• Dynamic Title - intended for displaying the custom or dynamic title on the Archive page
• Product Categories - display the Product categories on any page
• Showcase 2 - showcase the elements before redirecting to the page
• Steps - the Timeline analogue it chess order
• Zoom - ​the module consists of pre-made templates. Intended for a smooth transition into the next module with a zoom effect
• Woo Wishlist - display the products that were added to the Wishlist
• Mobile Menu Button - add the button for quick access to the mobile menu
• WGL Text Editor - style your text with modern animation tools
• Scroll Animation - stylish zoom animation on scroll

Extended Animation and Features

These options are intended to create a stylish background animation and to add some specific features.

All Extended Row Animation and Features are available in the "Style" area of the editing Elementor section.

Every tool has its specific features:

List of extended row animation and features

Background animation and features

Button animation

List of extra features

There are some extra features available on the theme:

• WGL Text path module - intended to create animated text line. Contains a few layouts. Could be animated with scrolling through the page or in an infinite loop.



• Cursor Tooltip feature - provides the ability to set a custom Cursor Tooltip. Could be set for a certain element separately as an additional option (WGL Button, WGL Doule Heading, WGL Portfolio, WGL Team, WGL Info Box, WGL Service, WGL Showcase) or for an entire section at once.
  
  ​As a tooltip, you can set a custom image, custom text, or default text.

Mega Menu

​Mega Menu is a drop-down panel of the content, which is displayed below a header. It makes all the required information\options visible at once.

In this theme, Mega Menu could be created with the help of Elementor Templates. It provides the ability to add any content, like it could be done on simple pages.

1. Go to your dashboard > Templates > Saved Templates > WGL Mega Menu. There could be managed the existing templates or created a new one.

2. After the successful creation of the templates for the Mega Menu, the Mega Menu option sgould be enaled.
Go to Appearance > Menus > select the required Parent menu page and enable the menu option with Elementor Builder

3. Select the required template below, among pre-made templates.

4. Don't forget to set the position of the menu under the Menu elements and the width of the Mega Menu content box.
Don't make the content box very small, it will break the structure!

*If after making changes in the templates, the Mega Menu style is broken, you need to synchronize the library in Elementor > Tools:

Archive Pages

​Archive pages are intended to organize a list of posts under a certain post type, category, or tag. ​You may want to create a custom Archive page and customize it to your needs if the default Archives don't meet your requirements.

​Start off with a simple creation of a new template inside Saved Templates. In the New Template box select the required type of template you want to work with:

​In Elementor editor should be selected the module of the required post type:

​To display the custom title, with the required text, the Dynamic Title module could be used. ​If the Term Title & Name field is selected, the custom text will be visible.

The Post fieled is intended to display the information for the main Archive page. The Term field is intended for displaying the information for the Category pages.

WGL Real Estate (Properties)

​ ​The Properties tool provides the ability to display spaces for rent/sale, with all required equipment. WGL Real Estate plugin is responsible for these features. The plugin comes bundled with the theme.

The Properties have three types of layouts that will fit any requirements. There are three types of layouts powered with ReactJS:

• Properties Grid
• List of Properties
• Dynamic Map with popups

The Prorepties tool could be managed in the same way as other post-types: in Theme Options - default settings for all items, and in Property details - for individual configuration of every item.

​General properties settings in the Theme Options:

• General - price and measurement settings.
• Google Settings - area for Google API Key (generate your personal API key to manage the map) and the Map styles.
• Page Title - manage Page Title settings (image, breadcrumbs, height, alignment) for the Desktop.
• Responsive Page Title - manage Page Title settings (paddings, height, font-size) for the responsive.
• Archive - appearance settings. Also, it contains the ability to manage the filters (select for which values it will be filtered).
• Single - basic appearance settings (BG image, paddings, on\off meta).
• Related - related posts options.

Archive + ReactJS Filter

In Theme Options > Properties > Archive you can manage the layout of the Properties Archive page (storage of all posts). There are available options for managing filters, sorting and appearance settings.

• Filter Settings - here you can find the filter based on ReactJS:






The Filters have some main values like: type, categories, location, status. If you don't want to filter by some value, you just need to move it to the next disabled column. Also, here you can manage the column width.

• Sorting Settings- select sorting and type of view.
• Appearance - manage the layout: amount of columns, number of values,visibility of content and etc.

Single Property

In order to create a new Property item you need to go to your dashboard > Properties > Add New Property:

The global settings for the Single Properties could be found inside the Theme Options > Property > Single. Inside the Property details there are a bulk of individual options for every property item.

• Property Details - provides the ability to manage the property values (number of rooms, floor, etc).
• Property Price - set price and individual values for the currency.
• Property Gallery - add additional images of the property.
• Property Location - manage individual location.
• Property Sidebar - set sidebar with individual information for a certain post.
• Property Appearance - manage post-meta information.
• Related property - manage the related posts for individual algorithms.
• General - body styles.
• Page Colors - manage the colors for every page separately.
• Page Header - set individual Header.
• Page Title - disable Page Title or set idividual image for a certain post.

All items for filtering by certain requirements, should be added inside your dashboard > Properties > Categories/Types/Status/Amenities/Locations > Add New.

​Every Single property contains the ​Amenities​ section.​ It collects child elements into groups of parent elements.

The Amenities could be added inside your dashboard > Properties > Amenities. To create a similar group with sub-elements you need to create some kind of hierarchy.

In order to get a"title" you need to create the parent element:

For creating "sub-elements" should be created the child elements by selecting the parent Amenity:

To display an Agent's personal information in the SideBar, add the WGL Agent Property widget under Appearance > Widgets:

and this Sidebar should be select in Theme Options > Property > Single:

Properties modules for Elementor

The WGL Properties Search provides the ability to filter the Property posts.

• Top Filter - add the values for filtering by: status, type, category, location;
• Advanced Fields - enable advanced button to get the additional field for filtering;

The WGL Property - module for displaying all existing properties in Grid layout.

Agent (realtor) dashboard

The WGL Real Estate plugin offers the ability to register the agents (realtors) and publish the Properties without accessing the dashboard.

Firstly, the main site admin should prepare the dashboard for agents work.

1. Create a new empty page and then go to Theme Options > Property > Agent Dashboard and select there newly created page for the Agent Dashboard

In the same area, could be managed the Agent's Permissions:

• Review Property Before Publishing or publish the Property post immediately;
• Review Property After Editing or publish the changes without verification.