Copyright G5Theme 2017

BEYOT - REAL ESTATE WORDPRESS THEME

WORDPRESS VERSION

BEYOT is a premium WordPress theme with features include the totally new specially designed to suit the needs of any REAL ESTATE website.

You are real estate agents, brokers, realtors or property firms. Are you looking for a suitable Real Estate theme to install in your property website? BEYOT is an ideal solution for you to set up a professional estate website where intuitive, flexible are combined with powerful features, advanced functions and so many shortcodes and templates helping you to build a real estate website fastly in some minutes.

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free to contact us via email. Thanks so much!

Files Included

  • The theme zip file BEYOT.zip(included Visual Composer and Revolution Slider plugins)
  • Child theme for easier customize in BEYOT-child.zip
  • Document in Documentation.zip

Struct look like:

dashboard

Code navigation

BEYOT includes 8 other folders. Please see explanation below for more details:

  • assets: Store less, js, resource default and another plugin for theme. Besides include file for demo data.
  • core: This folder store core file to add action for header, footer, woocommerce, function breadcrumb, filter for search.
  • inc: Store all functions
  • languages: Store .pot file for translate to another language
  • templates: Store templates for header, footer, archive, comments, breadcrumb.
  • theme-plugins: Store plugins that use on theme
  • vc-templates: Store template that override visual composer plugin

System Requires

To use BEYOT, you must be running WordPress 3.9 or higher, PHP5.4 or higher, and MySQL 5 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

Recommended PHP Configuration Limits

Many issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_input_vars = 3000
  • memory_limit = 128M
  • max_execution_time = 300
  • max_input_time = 300
  • upload_max_filesize = 64M
  • post_max_size = 64M

Download BEYOT Theme

Get the BEYOT Theme installation package from your account (after login on Themeforest.net) at downloads page and save it to your computer.

dashboard

Install BEYOT Theme

Installation via Wordpress

You could consult our video guide on How to install BEYOT via WordPress

Step 1 - Login to your Wordpress Dashboard

Step 2 - Go to Appearance → Themes. Click the Add New button or Add new theme link. (check screenshot below)

dashboard

Step 3 - Click on the Upload Theme button. Locate BEYOT.zip and click Install Now.

install

install

Step 4 - Click on the Activate button to activate BEYOT.

install

Congratulations, you have now activated BEYOT! You can now proceed with BEYOT's Plugin Installation.

Installation via FTP

You could consult our video guide on How to install an G5Theme item via FTP

Step 1 - Log into your Hosting server using an FTP client (like FileZilla or WinSCP).

Step 2 - Locate "BEYOT.zip" that you found in your ThemeForest Package and unzip it somewhere on your hard drive. Once it is unzipped it will look like a folder named BEYOT with all theme files in it.

Step 3 - Locate your Wordpress installation and upload the theme directory BEYOT (you unzipped in the previous step) into ../wp-content/themes/ in your Wordpress installation.

Step 4 - Click on the Activate button to activate BEYOT. Congratulations, you have now activated BEYOT! You can now proceed with BEYOT's Plugin Installation.

Essential Real Estate

dashboard BEYOT has been integrated Essential Real Estate plugin with features include the totally new specially designed to suit the needs of any REAL ESTATE website. Its management system which allows you to own and maintain a real estate marketplace, intro website. You can consult the documentation of Essential Real Estate for more details on How to use this powerful plugin to build your website: http://document.g5plus.net/essential-real-estate/

Install BEYOT Required Plugins

All plugins required have been into your download package, so you only need to do is click on the "Begin installing plugins".

install plugins

You should be navigated to the Install Required Plugin page, which shows a plugin list similar to this:

install plugins

Next, Click on the checkbox beside "Plugin" label to select all plugins in the list.

Then choose "Install" from the drop-down list at the top and then click "Apply".

install plugins

The installing process status will be shown in your browser. It may takes a few minutes, so please be patient. After sucessfull, your screen like that

When the notice "All installations have been completed" appears, click on the "Return to Required Plugins Installer" link to turn back to the plugin list.

install plugins

Next, click on the box beside the Plugin label again to select all plugins and choose Activate this time as image below.

active all required plugins

One Click Install Demo

With BEYOT, you can build a fully functional website just by clicking a button and install our demo data or click 5.2.1 Create A New Page to step by step. Your BEYOT installation will be set up with what we have on our demo website, and you can use it as a template to develop your own website.

Go to Beyot Theme → Install Demo


Then choose option button to install demo as you want:

  • Only Setting: Click this button to install only Demo settings
  • Install: Click this button to install all settings with demo data of BEYOT

Import Demo Content in One Click03


The process would be displayed on import status bars so you will know when it is finished and your data is ready.

Import Status Bars

You should ensure that a non-default permalink setting is selected, e.g. Month and name in Settings → Permalinks .

DONE. Now, you can visit your website to view demo.

Import Demo Content

If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the BEYOT. The following actions will import some dummy posts and pages from the live preview:

  • Go to menu Tools → Import
  • Select WordPress from the list

    • demo



  • If you haven't installed the WordPress import plugin, a popup window will appears and ask you to install it. Just click Install Now. When the installation progress is completed, click Activate Plugin & Run Importer. If you have installed this plugin, skip to next step.

    • demo


  • Click Browse and select demo-data.xml file from the download package

    Example: In REALY theme, file demo-data located in this path: g5plus-beyot\inc\plugins\beyot-framework\assests\data-demo\main - Don't forget to extra realy-framework.zip file to access to this folder.

    • demo

    Click Choose File


    demo

    Select the file demo-data.xml


  • Click Upload file and import

    • demo


  • When you are asked to import author, you can create new author or import to existing author. You also should check the Download checkbox and import file attachments.

Display asked to import author, selected and continue

demo

After completing all above steps, open frontend link (Home 1) to see your result

demo

If you don't want to use the demo content pack, you can read the instructions on how to work with our theme built-in Page Builder below to make your own pages.

Creat a new page

Creating pages is the foundation of creating your site. You can create any number of pages with content. Our theme includes several page templates to choose from, and you will need to choose the page template that suits your needs. All of this is done in the pages section of your WordPress admin. Continue reading below to learn how to create a new page.

If you DID NOT One Click Install Demo, you will need to MANUALLY CREATE your Home and other pages. Here’s how to build a new page:

You could consult our video guide on How to create page using WPBakery Page Builder

Step 1 – Navigate to Pages in your admin sidebar and click Add New option.


Step 2 – Input a new name for your page, and click WPBakery Page Builder to build page by WPBakery Page Builder (make sure that you have installed and activated WPBakery Page Builder plugin).


Content for your page goes in the editing field, use the Visual or Text editor.

Page content is mainly built using Elements & Shortcodes. See the Page Shortcodes/Elements section for how to use them. You can also use our demo content, see the corresponding section of this document for the demo code of each page.

  • Don't click BACKEND EDITOR: It means that you could input content to Classic Mode Area, then go to Step 3
  • Click "BACKEND EDITOR": your screen could be like this


Step 3 – Setup values for Page Settingswhich will affect to this page only and override options set in the Preset (if this page applies any Preset) or Theme Options. With each page, Page Settings is the first priority, next is Preset, then is Theme Options, any change in Page Settings just affect to this page, not the entire website.

→ General Settings

General Settings

You could consult our guide on Preset Options section and How to use Preset article for more details on How to apply Preset to a Page


→ Page Layout

Page Layout options in Page Settings

Any option that was set to be Default or was not customized means that it will use the value of equivalence option you have set in Preset (if this page apply any Preset) or Theme Options. Insert a different value to override the Preset/ Theme Option value.

→ Page Title

Page Title Options

Any option that was set to be Default or was not customized means that it will use the value of equivalence option you have set in Preset (if this page apply any Preset) or Theme Options. Insert a different value to override the Preset/ Theme Option value.

Step 4 – Set your Parent page (It’s usually set to No Parent).

Step 5 – Set featured image for your page (optional)

Step 6 - You can save draft/preview or publish this page and set it as your frontpage. You could consult Settings a static page as Home section.

Building Hompage

Now you can start fiddling with Visual Composer to build your home page with any design that you like.

In case you don't have time for experience with it, you can switch to Classic Mode and use one of the shortcode sets provided below to build your frontshop based on one of the pre-made home page we offer.

To create a page similar to Homepage in our the demo, choose the Classic Mode and switch to the Text tab, then paste this code into the content of your page:

Home One

Home Two

Home Three

Home Four

Home Five

Home Map

Building OnePage

Home OnePage aims to focus the user's attention to the content that they want. When you choose an item on Main Menu of OnePage, it immediately navigates to the section that you've chosen

If you want to build your Home OnePage please consult our guide below:

Step 1 - You just have to create a Menu with Links as items.

Step 2 - Go to your homepage, anywhere you want the menu item to navigate to section, please edit row by Visual Composer and type id on field: Row ID (make sure that the Row ID is the same as menu item URL)

You could please consult our video guide on How to build OnePage (We use ORSON theme for example but this process is similar to the process of building OnePage on Beyot theme).

BUILD AN EXAMPLE

THIS IS STEP BY STEP GUIDE ON HOW TO BUILD HOMEPAGE MANUALLY FOR HOME ONE

Note: You need Wordpress, BEYOT & plugins are already. Building other homepages process are similar.

I. Overview elements area on page

BUILDING HEADER AREA

You can consult this video guide on How to build Header Area. This process is similar to building Header Area on BEYOT theme.


Go to ThemeOptions → Header tab, then setup options for Header Area as your liking

Note:

  • You could select a Preset to apply all its settings to Theme Options.
  • Once you choose a Preset and press Load Preset button, it will get all current values in this Preset and apply to options that corresponds in Theme Options (it means that if later you change any option in this Preset will not affect to Theme Options).

    • 1.2 Add widgets to Top Bar Left area

    Go to Apperance → Widget and do follow:

    Add 2 widget: ERE Login Menu and Text to the Top Bar Left widget area:

    and then add content to Text widget as below:

    Code HTML for Text Widget in Top Bar Left:

    1.3 Add widgets to Top Bar Right area

    Add widgets G5Plus - Social Profile to Top Bar Right area.

    1.4 Upload logo

    Go to Theme Options → Logo Setting tab, do follow:

    1.4 Create menu

    Go to Apperance → Menus, do follow:

    Contact Form

    Building your contact form is one of the most important things you can do to market your business and your site should be filled with opportunities for users to opt-in to your mailing list. The first thing you need to do is install and activate the Contact Form 7 plugin (You can consult a step by step guide on how to install a WordPress plugin here)

    You can do step by step as image below to build contact form by your own

    Add New Contact Form

    Add new contact form


    Configure Mail tab


    You can visit Contact Form 7 Plugin to further details. Or copy and paste content to Form field like this:

    Example Value Content for Contact Form

    You can also consult a lot of our contact forms have been created here:

    Demo Contact forms

    Translate Theme

    People all around the world use WordPress, around 44% of WordPress websites are written in a language other than English. We’re about to show you how to translate our themes. Using Make as an example, we’ll show you how to translate BEYOT theme to Vietnamese, to be precise!

    We will using Loco Translate plugin that provides in-browser editing of WordPress translation files.

    • 1. Install and activate LOCO Translate plugin.
    • 2. Create and update language files directly in your theme or plugin.
    • 3. Saving custom translations.

    Video guide on How to translate BEYOT Theme using LOCO Translate plugin

    WordPress Settings

    You can adjust WordPress settings as follows:

    Step 1 – You can set Site Title, Tagline in Settings → General

     

    Step 2 – You can set Blog pages show at most in Settings → Writing

     

    Step 3 

    If you installed BEYOT Demo Data, you don’t need to create a new Home Page, you just need to choose from the list Home Pages that were automatically created from the demo content. You can select Front Page displays in Settings → Reading

    Select A static page and Choose any homepage as you want from the dropdown for Front page

    Click Save Changes

     

    Step 4 – You can set Discussion settings in Settings → Discussion

     

    Step 5 – You can change Image sizes in Settings → Media

    We used the following sizes on our demo sites:
    Thumbnail size: 150 x 150
    Medium size: 300 x 300
    Large size: 1024 x 1024

     

    Step 6 – WordPress Social Login allows your website visitors and customers to register on using their existing social account ID, eliminating the need to fill out registration forms and remember usernames and passwords.You can setup WordPress Social Login in Settings → WP Social Login

     

    Step 7 – You can set Duplicate Post settings in Settings → Duplicate Post

     

    Step 8 – You can set Advanced Email settings in Settings → WP Mail SMTP

    Using WP Mail SMTP Plugin to reconfigures the wp_mail() function to use SMTP instead of mail() and creates an options page that allows you to specify various options.

     

    You can visit WP Mail SMTP Plugin to further details about this plugin and consult our guide to configure email: http://support.g5plus.net/knowledge-base/how-to-config-email-sent/.

    Video guide on How To Configure Your Mail Client To Use GMail for Outgoing Mail Server

    Page Settings

    Page Settings is one of the BEYOT's features that located within each page and post. Page Settings will only affect the individual page you change them on and overrides options set in the Theme Options.

    You could consult our guide on How G5Them Options work for more details about the relationship between Theme Options, Preset and Page Settings

    General Option

    Page Settings

    Page Layout Option

    Page Settings

    Page Title Option

    Page Settings

    Preset and Page Options will use the Theme Options value if left empty or if the value is default. They will override Theme Options if any other value is entered. This setup gives users maximum flexibility for setting a global theme option, then being able to override it on a page/post/shortcode basis

    Preset

    Preset are Page Options that were set beforehand to facilitate use, it will override settings in Theme Options on all pages applyed it. Beyot Demo Data also has presets which lets you create WordPress landing pages very easily.

    You can consult our guide on How to use Preset

    Add a new Preset

    add new preset

    Add New Preset button

    add new page

    Preset Settings

    Manage all presets

    add new preset

    Manage all presets

    Apply Preset to Theme Options

    1. Apply a preset settings to Theme Options: In the Theme Options, you can select a preset to apply all its settings to Theme Options

    Apply a Preset Settings to Theme Options

    2. Preset Setting: Preset Setting in Theme Options is a option that you can choose a Preset to apply for each page type (Blog/Property/Agent/Invoice/404 page)

    Preset Settings in Theme Options

    Apply Preset to Page

    Apply a Preset Settings to a page

    From a page that has been applied a Preset on the frontend, you can edit the Preset by clicking to Edit Preset button

    'Edit Preset' button

    NOTE: Preset and Page Settings will use the Theme Options value if left empty or if the value is default. They will override Theme Options if any other value is entered. This setup gives users maximum flexibility for setting a global theme option, then being able to override it on a page shortcode basis.

    You can set the following Options for the Preset you are currently editing:

    Page Layout

    This option is used for setting Page Layout in a Preset. It will overwrite Page Layout settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BEYOT Theme Options

    Meta Options Page Layout

    You can set the following Page Layout Options for the Preset you are currently editing:

    Attribute Description
    Layout Style Overwrite the Default Layout Style (set in Theme Options) for page used this preset.
    Layout Overwrite the Default Layout of pages settings section in Theme Options for page used this preset.
    Sidebar Layout Set position for the page sidebar: none, left, right, both of left and right
    Content Padding Set content top/bottom padding. Do not include units (empty to set default)
    Content Padding Mobile Set content top/bottom padding mobile. Do not include units (empty to set default)
    Page Slider Choose the type of slider you would like to display at the top of the page.

    Page Title

    This option is used for setting Page Title in a Preset. It will overwrite Page Title settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BEYOT Theme Options

    Meta Options Page Title

    You can set the following Page Title Options for the Preset you are currently editing:

    Attribute Description
    Show/Hide Page Title? Set visible of header, if selected default will take value in Theme Options
    Page Title Layout Set Layout for Page Title: 'Default', 'Tile Left & Breadcrumb Right' , 'Center'
    Page Title Set content of page title. If leave empty will take value title of page
    Padding Set padding top/bottom for page title. If leave empty will take value in Theme Options
    Custom Background Image? Set custom background image for page title. If selected Off will take value in Theme Options
    Page Title Parallax Set parallax mode for page title. If selected Default will take value in Theme Options
    Way To Show Choose Way To Show include: Show All, Only Above Page Title, sOnly Breadcrumb

    Top Drawer

    This option is used for setting Top Drawer in a Preset. It will overwrite Top Drawer settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BEYOT Theme Options

    You can set the following Top Drawer Options for the Page you are currently editing:

    Top drawer padding top. Do not include units (empty to set default)
    Attribute Description
    Top Drawer Type Set type of top drawer: 'Disable', 'Always Show', 'Toggle'. If selected default will take value in Theme Options
    Top Drawer Sidebar Set Sidebar for top drawer sidebar, if not selected will take value in Theme Options
    Top Drawer Wrapper Layout Set layout wrapper for top drawer: 'Full Width', 'Container', 'Container Fluid'. If selected default will take value in Theme Options
    Top Drawer hide on mobile Set visible for top drawer area on mobile. If selected default will take value in Theme Options
    Top Drawer PaddingSet Padding top/bottom for Drawer area. If you not choose it will set value default

    Header

    This option is used for setting Header in a Preset. It will overwrite Header settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BEYOT Theme Options

    Meta Options Header

    You can set the following Header Options for the Page you are currently editing:

    Container Layout
    Attribute Description
    Header On/Off? Set visible of header
    Desktop Settings
    Header Layout Set layout of header. If no selected will take value in Theme Options
    Set container layout for header: 'Container', 'Container Full'. If not selected will take value in Theme Options
    Header Float Set float for header. If selected default will take value in Theme Options
    Show/Hide Header Sticky Set sticky mode for header. If selected default will take value in Theme Options
    Header border bottom Select Header border bottom, include: None, Full Border, Container Border
    Header padding Set Padding top/bottom for Header area. If selected default will take value in Theme Options
    Navigation Height Set Navigation Height(px). Do not include unit.
    Navigation Spacing Set Navigation Spacing(px) by draging scroll bar .
    Page Header Mobile
    Header Mobile Layout Set layout fot header mobile.
    Menu Drop Type Set drop type for menu mobile: 'Dropdown Menu', 'Fly Menu'.
    Header mobile sticky Set sticky mode for mobile header.
    Mobile Header Search Box Set visible for search box.
    Mobile Header Login Set visible for Login.
    Mobile header border bottom Set border bottom for mobile header: 'None', 'Bordered'.

    Top Bar

    This option is used for setting Top Bar in a Preset. It will overwrite Top Bar settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BEYOT Theme Options

    Meta Options Top Bar

    You can set the following Top Bar Options for the Page you are currently editing:

    Attribute Description
    Desktop Settings
    Show/Hide Top Bar Set visible of top bar.
    Top Bar Wrapper Layout Set Top Bar Wrapper Layout: "Container" or "Container Fluid".
    Top Bar Layout Set layout for top bar: '1/2-1/2', '2/3-1/3', '1/3-2/3', 'full'.
    Top Left Sidebar Set sidebar for left sidebar. If not selected will take value in Theme Options
    Top Right Sidebar Set sidebar for right sidebar. If not selected will take value in Theme Options
    Top Bar Border Set border for top bar area:'Default','None', 'Full Bordered', 'Container Border'. If selected default will take value in Theme Options
    Top bar padding Set Top bar padding top, bottom. Do not include units (empty to set default)
    Mobile Settings
    Show/Hide Top Bar Set visible of top bar. If selected default will take value in Theme Options
    Top Bar Layout Set layout for top bar: '1/2-1/2', '2/3-1/3', '1/3-2/3', 'full', if not selected will take value in Theme Options
    Top Left Sidebar Set sidebar for left sidebar. If not selected will take value in Theme Options
    Top Right Sidebar Set sidebar for right sidebar. If not selected will take value in Theme Options
    Top Bar Border Set border for top bar area:'Default','None', 'Full Bordered', 'Container Border'. If selected default will take value in Theme Options

    Header Customize

    This option is used for setting Header Customize in a Preset. It will overwrite Header Customize settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BEYOT Theme Options

    Meta Options Header Customize

    You can set the following Header Customize Options for the Page you are currently editing:

    Attribute Description
    Header Customize Navigation
    Header Customize Navigation Set visible and order item for Header Navigation: 'Sidebar','Custom text content left', 'Navigation Item Spacing ','Custom CSS Class'
    Sidebar Select widget for Sidebar area
    Custom text content Insert Custom text content (html)
    Navigation Item Spacing (px) Set navigation item spacing
    Custom CSS Class Insert Custom CSS class

    Menu

    This option is used for setting Menu in a Preset. It will overwrite Menu settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BEYOT Theme Options

    Meta Options Menu

    You can set the following Menu Options for the Page you are currently editing:

    Attribute Description
    Page menu Optionally you can choose to override the menu that is used on the page.
    Page menu mobile Optionally you can choose to override the menu mobile that is used on the page
    Is One Page Set page style is One Page

    Colors Setting

    This option is used for setting Colors in a Preset. It will overwrite Theme Colors setting in Theme Options. Any option is set to "Default" which means they will take on the global options set in BEYOT Theme Options

    Meta Options Colors Setting

    You can set color for each area on page :

    Attribute Description
    General Settings
    Custom Color General On/Off Custom Color for your website
    Accent Color Customize Customize color for Accent Area
    Foreground Primary color Customize Foreground Primary color
    Text Color Select color for text
    Border Color Select color for border
    Heading Color Select color for Heading
    Top Drawer
    Custom Color Top drawer On/Off Custom Top drawer color
    Top drawer background color Customize Top drawer background color
    Top drawer Text color Customize Top drawer text color
    Header
    Custom Color Header On/Off Custom Top drawer color
    Header background color Custom header background color by select color
    Header Text color Select color for text in header
    Header Border color Select color for border
    Top Bar
    Custom Color Top Bar On/Off Custom Top Bar color
    Footer
    Custom Color Footer On/Off Custom color footer
    Footer background color Customize color for Footer background color
    Footer text color Customize color for Footer Text color
    Footer widget title color Select color for Footer widget title color
    Footer border color Select color for Footer border color
    Bottom Bar
    Custom Color Bottom Bar On/Off Custom color Bottom Bar
    Bottom Bar background color Customize color for Bottom Bar background color
    Footer text color Customize color for Bottom Bar Text color
    Bottom Bar border color Select color for Bottom Bar border color

    Theme Options/BEYOT Options

    Theme Options are applied globally but can be overwritten by setting options in Page Options (and Preset). Theme Options are logically organnized into tabs, each tab contains all the options for that specific area within your site.

    By clicking on the Theme Options menu, you'll be able to change all settings that affect to entire your website.

    With BEYOT, we integrated Preset to Theme Options, it means that you can select any Preset you want to apply to Theme Options, then press “Load Preset” button to get all values from the Preset settings to similar options in Theme Options.

    Apply a Preset to Theme Options does not only affect to an option but also all options in Theme Options.

    You could consult our guide on How to use Theme Options and How to use Preset for more detail about How to use Theme Options properly on your website.

    We highly encourage you to explore the theme options and experimentwith what all the available options can do.

    General Settings

    General Settings tab is divided into a few sections. Asides from the Install Demo Data section mentioned above, there are a few important sections for you to customize your layout.

    You can upload this Logo on your server, or just paste an URL into the Logo box

    General Settings:

    Attribute Description
    General
    Smooth scroll Set Smooth scroll status: on, off
    Custom Scroll Set Custom Scroll status: on, off
    Search Popup Set Search Popup type: Standard or
    Back to Top Set Back to Top status: on, off
    RTL Mode Set RTL Mode status: on, off. For languages that read from right-to-left unlike English which is left-to-right, switch RTL smode, as long as you it's in your language and uses the correct locale.
    Enable Social Meta tags Set Social Meta Tags status: on, off
    Menu Transition Select menu transition: None/Slide Up/Slide Down/Slide Left/Slide Right/Sign Flip
    Maintenance
    Maintenance Set Maintenance Mode: On(Custom Page), On(Standard), Off
    Performance
    Enable Mini File JS Turn On this option if you want to use mini file js
    Enable Mini File CSS Turn On this option if you want to use mini file css
    Page Transition
    Page Transition Set Page Transition status: on, off
    Loading Animation Select type of pre load animation
    Custom Favicon Set Custom Favicon with each screen size
    404 Page

    You can input information, background for 404 page with out install plugins.

    404 page display on the frontend

    Layout Options

    Layout Options has all options for setting layout of page/sidebar/widget ...(pls read infomation below each option for more details)

    Attribute Description
    General
    Layout Options You can select one of 2 layouts style: Wide or boxed. Set width for the page sidebar: small (1/4) or large (1/3) and turn On/Off Sidebar Sticky if you want to enable/disable Sidebar Sticky
    Main Content You can select one of 3 sidebar layouts: Wide/sidebar left/sidebar right. Then setup the content padding in the top/bottom
    Mobile You can setup the content padding in the top/bottom on mobile
    Blog
    Custom Layout Turn on this option if you want to enable custom layout on 'Blog' page. If turning off, the layout will get the default options in the 'General' section above. These below options are appeared once 'Custom Layout' turn On
    Layout Select Page Layout that expand the content area to full width/Container/Container Fluid
    Sidebar layout Select how sidebar displays: None/Sidebar Left/Sidebar Right
    Sidebar Select sidebar to display or add new a sidebar
    Sidebar Mobile Turn On this option if you want to enable sidebar on mobile
    Canvas Sidebar Mobile Turn On this option if you want to enable canvas sidebar on mobile
    Content Padding Setup the content padding in the top/bottom
    Content Padding Mobile Setup the content padding in the top/bottom on mobile. Do not include units (empty to set default)
    Single Blog
    Custom Layout Turn on this option if you want to enable custom layout on 'Single Blog' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    List Property
    Custom Layout Turn on this option if you want to enable custom layout on 'List Properties' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    Single Property
    Custom Layout Turn on this option if you want to enable custom layout on 'Single Property' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    List Agents
    Custom Layout Turn on this option if you want to enable custom layout on 'List Agents' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    Single Agent
    Custom Layout Turn on this option if you want to enable custom layout on 'Single Agent' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    Single Invoice
    Custom Layout Turn on this option if you want to enable custom layout on 'Invoice' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.

    Page Title

    Page Title has all options for setting Page Title (pls read carefully infomation below each option for more details)

    Description of Page Title Options

    Attribute Description
    General
    Page Title Enable Enable/Disable Page Title in general page
    Page Sub Title Insert content for Page Sub Title.
    Padding Set page title top/bottom padding.
    Background Image Upload page title background.
    Page Title Background Overlay Enable/Disable Background Overlay In Pages Title
    Page Title Parallax Enable/Disable Page Title Parallax
    Breadcrumbs Enable Enable/Disable Breadcrumbs In Pages Title
    Blog
    Custom Layout Turn on this option if you want to enable custom layout on 'Blog' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'General' section will have appeared.
    Single Blog
    Custom Layout Turn on this option if you want to enable custom layout on 'Single Blog' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    List Properties
    Custom Layout Turn on this option if you want to enable custom layout on 'List Properties' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    Single Property
    Custom Layout Turn on this option if you want to enable custom layout on 'Single Property' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    List Agents
    Custom Layout Turn on this option if you want to enable custom layout on 'List Agents' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    Single Agent
    Custom Layout Turn on this option if you want to enable custom layout on 'Single Agent' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.
    Invoice
    Custom Layout Turn on this option if you want to enable custom layout on 'Invoice' page. If turning off, the layout will get the default options in the 'General' section above. Once the 'Custom Layout' turn On, options that similar in the 'Blog' section will have appeared.

    Blog Setting

    Blog Setting contains all options for setting blog and single blog page (pls read carefully infomation below each option for more details)

    Attribute Description
    Blog Options
    Post Layout You can select select post layout
    Post Paging You can select post paging mode here
    Single Blog Options
    Tags if you want to hide share on single blog, you can click "off"
    Share Turn Off this option if you want to hide share on single blog
    Navigation Turn Off this option if you want to hide navigation on single blog
    Author Info Turn Off this option if you want to hide author info area on single blog
    Related Post Turn Off this option if you want to hide related post area on single blog
    Related Post Total Total record of Related Post. (Input Number Only)
    Related Post Columns Select number of related post columns (2 or 3 columns)
    Related Post Condition Select Related Posts that have same category or not

    Top Drawer

    Top Drawer contains all options for setting Top Drawer area. In BEYOT Demo Data, Top Drawer has been hiden by default. So if you want to enable Top Drawew pls read carefully infomation below each option for more details.

    Description of Top Drawer Options

    Attribute Description
    Top Drawer Mode Set type of top drawer: 'Hide', 'Show', 'Toggle'.
    Sidebar Set Sidebar for top drawer sidebar, if not selected will take value in Theme Options
    Top Drawer Wrapper Layout Select top drawer wrapper layout that: Full Width/ Container or Container Fluid
    Show/Hide Top Drawer on mobile Set mobile enable:on, off
    Logo Top/Bottom Padding Override the default top drawer top/bottom padding by adding the number of top/bottom padding here

    Top Bar

    Top Bar contains all options for setting Top Bar area (pls read carefully infomation below each option for more details)

    Descriptions of Top Bar Options:

    Desktop
    Top Bar Enable Enable/Disable Top Bar
    Layout Select the layout for Topbar from 4 layout styles
    Top Bar Left Specify the sidebar to display as the top bar left.
    Top Bar Right Specify the sidebar to display as the top bar right.
    Padding Override the default padding by adding the number of top/bottom padding here
    Border Bottom Specify the Border bottom of Topbar that: None/Full/Container
    Mobile
    Mobile enable Set mobile enable: on, off. Once the 'Top Bar Enable' turn On, options that similar in the 'Desktop' section will have appeared.

    Header Customize

    Header Customize contains all options for customizing Header Area (pls read carefully infomation below each option for more details)

    Attribute Description
    Header Customize Navigation
    Header Customize Navigation Set visible and order item for Header Navigation: 'Search Button', 'Sidebar','Custom Text'. You can arrange these items by dragging and dropping fields
    Sidebar Select widget for Sidebar area
    Custom text content Insert Custom text content (html)
    Navigation Item Spacing (px) Set navigation item spacing
    Custom CSS Class Insert Custom CSS class

    Theme Color

    Theme Colors allows users to custom and change color options for each area on page.

    User can custom and change many options color on website.

    Attribute Description
    General Settings
    Accent Color Customize Customize color for Accent Area
    Foreground Accent color Customize Foreground Primary color
    Text Color Select color for text
    Border Color Select color for border
    Heading Color Select color for Heading
    Top Drawer
    Top drawer background color Customize Top drawer background color
    Top drawer Text color Customize Top drawer text color
    Header
    Header background color Custom header background color by select color
    Header Text color Select color for text in header
    Header Border color Select color for border
    Header Sticky background color Select color for background color of Header Sticky
    Header Sticky text color Select color for text in Header Sticky
    Header Sticky border color Select color for border of Header Sticky
    Top Bar
    Top Bar background color Set background color by selecting color
    Top Bar Text color Select color for text in header
    Top Bar Border color Select color for border
    Navigation
    Navigation background color Set navigation background color by selecting color
    Navigation text color Select color for text in navigation
    Navigation text hover color Select color for text hover of navigation
    Header Mobile Color
    Top bar background color Select color for Top bar background
    Top bar text color Select color for text in top bar
    Top bar border bottom color Select color for Top bar border bottom
    Header background color Select color for background color of Header Sticky
    Header text color Select color for text in Header Sticky
    Header border bottom color Select color for border bottom of Header
    Footer
    Footer background color Customize color for Footer background color
    Footer text color Customize color for Footer Text color
    Footer widget title color Select color for Footer widget title color
    Footer border color Select color for Footer border color
    Bottom Bar
    Bottom Bar background color Customize color for Bottom Bar background color
    Footer text color Customize color for Bottom Bar Text color
    Bottom Bar border color Select color for Bottom Bar border color

    Font Options

    Font Options allows users to specify font properties, custom/upload fonts on website.

    User can choose from many font style.

    Attribute Description
    Body font Included: Font Family(name of font), Font Size, Font Weight.
    Secondary Font Included: Font Family(name of font)
    H1 Font Specify the H1 font (Font family, Font size, Font Weight & Style)
    H2 Font Specify the H2 font (Font family, Font size, Font Weight & Style)
    H3 Font Specify the H3 font (Font family, Font size, Font Weight & Style)

    Social Profiles

    Social Profiles contains all options that allows user to share post/product on various social networks which automatically shows up under the content post, an important function that helps promoting your site. You can also check the options to decide which network are allowed to share the content of your website on. You can also turn off all options if you don't want your content to be shared at all.

    Frontend display

    Attribute Description
    General
    Social Share You can add the social links
    Blog Share Option
    Social Share Check the checkboxs to show the social sharing in single blog

    Resources Options

    Resources Options allows users to utilize boostrap elements to style your store quick and easily.

    Custom CSS & Script

    Custom CSS & Script contains text fields in case you want to add new CSS class or JS to your website. This will add/overwrite the theme CSS,JS, so please be careful!

    Preset Settings

    Preset Settings allows users to choose preset setting apply for each page type

    Mega Custom Menu

    We use XMENU in Realy theme. To configure settings for individual menu items or submenus, visit Appearance → Menus, hover over the menu item you want to configure, and click the XMENU button that appears. The Menu Item Settings Panel will display from left.

    Appearance → Menus

    These settings control a specific menu item, with options including:

    • General link settings
    • Icon & position
    • Image (source, size, etc)
    • Item layout(width, content alignment, padding, etc)
    • Submenu (type, width, custom width, position, child item default width, sub menu animation, etc)

    Click the tabs on the right "Panel Setting 2"(3) to access the various panels of settings. Click the "Save Changes"(4) button at the top to save settings for this specific item. To configure a Submenu, click on the parent item for that submenu and then click the Submenu tab on the right.

    Please visit Document XMENU and video guide on How to Assign XMenu to your theme(ex: ZORKA) for further details.

    Setting a static page as Home

    If you installed BEYOT Demo Data, you don’t need to create a new Home Page, you just need to choose from the list Home Pages that were automatically created from the demo content, following these steps:

    • Go to Settings → Reading.
    • For Front page displays, select A static page (select below)
    • Choose any homepage as you want... from the dropdown for Front page
    • Click Save Changes

    Save all your changes!

    Shortcode in ESSENTIAL REAL ESTATE plugin

    A shortcode is a method for including special content in a Post or Page. For example, the ESSENTIAL REAL ESTATE plugin gives users a shortcode to add MY PROPERTY page to their site. Here’s what that shortcode looks like:

    [ere_profile]

    In this section, we will show you how to use ERE shortcode (make sure that you have installed and activated WPBakery Page Builder plugin)

    Video guide on How to use ERE Shortcode.

    Video guide on How to use ERE Shortcode

    ERE Shortcode in WPBakery Page Builder

    Click to WPBakery Page Builder

    Click on Backend Editor -> Add element

    ERE Shortcode

    Custom ERE Shortcode


    Config row / column

    Content management is a breeze with Fortuna and it requires absolutely no coding skills. Using a highly customized version of the Visual Composer plugin the theme offers a user friendly Drag'n'Drop interface for easy page creation and editing. Follow these simple steps to create a Page with BEYOT:

    Step 1:Go to Pages → Add new in your Dashboard. Add a Title to your Page (top field).

    Step 2:Switch to Backend Editor if you are currently under Classic Mode (button below Title field).

    Step 3:Start adding page content by clicking on the Plus button or Add Element.

    Step 4:The Add Element Popup appears, click on the first element in order to add a new Row to your page. A Row is a main building block of a page, you can split your Rows into Columns, place various elements into your rows, set Row Backgrounds, effects etc.

    Step 5:Once you have the new Row added to your page you can split that Row into Columns in order to organize elements nicely in it. Once you split your Row into column you can start adding different Page Elements into your columns. If you want to edit your Row/Column Settings click on the small Pen icon (top right corner of the Row/Column). You can also Duplicate your Row with the Icon (duplicate icon) next to it or Remove the Row/Column with the icon to the right (trash bin icon).

    Row Settings (General)

    Click on the Edit Row button (Pen icon, top right of the Row). You will see the Row Settings Dialog popup.

    Layout:

    Default - Row will full width (option default)

    Stretch row - Row will full width, visible content if overflow

    Stretch row and content - Max width 1170px and center.

    Stretch row and content (no paddings) - Full width, padding left and padding right 15px.

    Default(no paddings) - Full width, padding left and padding right 0px.

    Columns gap:

    In order to control gaps between columns navigate to row parameter window and change column gap option - the gap will be introduced between all columns within this row. Default value of gap is set to 0.

    Important: In case of mobile stacking gap will be introduced between stacked columns as well.

    Full Height Row and Video Background:

    Equal height:

    In order to set columns within row to be equal height you must navigate to row parameter window and check Equal height option to be active. All columns within this row will have equal height and align to the longest column.

    Content position:

    In order to control vertical alignment of content within rows/columns navigate to row parameter window and select position of content - top, middle or bottom. By default value is set to "Default" meaning it will use Top or any other alternative if defined within your WP theme.

    Parallax:

    Show background overlay (Overlay Color)

    Step 1: - Select Overlay Type

    Step 2: - Click button to select color of background overlay

    Step 3: - Set opacity for overlay (0 → 100)

    Show background overlay (Overlay Image)

    Step 1: - Select Overlay Type

    Step 2: - Click button to select image or set background image from Design Options

    Step 3: - Set opacity for overlay (0 → 100)

    Row ID

    Set ID of row (Note: make sure it is unique and valid according to w3c specification)

    Row Settings (Design Options)

    Managing Columns

    Once you have the desired number of columns in a Row you can manage each Column's individual settings by clicking on the Toolbar icons of that specific Column. The Plus Icon adds an element to the top of the Column, the bottom Plus Icon adds an elemnt to the bottom of the Column. The Trash Bin icon removes the Column. Access the Column Settings by clicking on the Pen Icon.

    Column Settings (General)

    Access the Column Settings by clicking on the Pen Icon. The General tab provides with the option to add CSS classes to your Column if you wish to access it via CSS (can pass more than one divided by a space).

    Column Settings (Design Options)

    Column Settings (Responsive Options)

    Add / Edit Page Elements/Shortcodes

    Adding Page Elements to your Page is pretty straightforward. First you need to have created a new page, added a Row to it and defined your Row Columns (read more in the previous section).

    Step 1:Click on one of the Plus Icons within the column you want to add a new element to.

    Step 2:The Page Elements dialog will appear, click on the element you want to add to your Column/Row.

    Step 3:The Element Settings Dialog of the Element you are adding appears. Customize your element anyway you want, then click Save.

    Step 4:Your element is now in the Column you added it to. Once you hover your newly added element you will see a small popup that let's you manage it. You can do the following with your elements:

    Move - Drag your element via the Direction Icon to move it around within the Column,Row or Page.

    Edit - Click on the Pen Icon to edit your Element's properties.

    Clone - Click on the Copy Icon to duplicate your Element.

    Delete - Click on the Trash Bin Icon to remove your Element.

    Email Settings

    WP Mail SMTP Settings

    Settings For Send Mail

    Using WP Mail SMTP Plugin to reconfigures the wp_mail() function to use SMTP instead of mail() and creates an options page that allows you to specify various options.

    Go to Settings → WP Mail SMTP to setup:

    Goto Settings → WP Mail SMTP

    You can visit WP Mail SMTP Plugin to further details about this plugin and consult our guide to configure email: http://support.g5plus.net/knowledge-base/how-to-config-email-sent/.

    Video guide on How To Configure Your Mail Client To Use GMail for Outgoing Mail Server

    MailChimp Settings

    Step 1:After install all required plugins, "MailChimp for WP" will be added into the navigation menu on the sidebar. Go to MailChimp for WP → MailChimp Settings to setup:

    Open MailChimp settings


    Step 2 - To connect your MailChimp account you will need to enter your API keys into the necessary field. The plugin provides a convenient link, below the field, which will direct you to the API key in your MailChimp account. You must be logged in to your MailChimp account for the link to work as expected.

    Add your API Key


    Step 3 - Once the API key is added and the changes saved, your list information will populate in the "MailChimp Data" area.

    Your MailChimp data


    Step 4 - Forms Settings

    Access to Form settings


    Step 5 - Click MailChimp for WP → Forms, you can create and customize the HTML for the signup form to place within your Wordpress site.

    Customize Signup form


    Checkbox Wrapp in paragraph tags


    Step 6 - Adjust messages shown when a form submission is complete as well as any error messaging.

    Insert status messenger

    Update theme to latest version

    There are two ways to update Beyot theme. The first method is to use Envato WordPress Toolkit plugin which was included in Beyot. The second is the upload the theme manually, either via FTP or WordPress. This is the traditional method and this method requires you to download the update-theme files from ThemeForest first.

    How To Update Via Envato WordPress Toolkit

    This is a quick and easy way to make sure that you keep all of your wordpress themes from ThemeForest up-to-date and without having to log into ThemeForest

    Note:  We highly recommend backing up your theme, files and entire database before updating.

    Video guide on How To Automatically Update Your Themeforest WordPress Theme - source WPExplorer

    Step 1 – Install and activate Envato Toolkit plugin

    Step 2 -  Navigate to the WordPress Dashboard => Envato Toolkit section of your installation.

    Step 3 – Register by your username on ThemeForest and ThemeForest API Key.

    Step 4 –If there is an update you’ll see that it will say ‘update automatically ‘, all you have to do is click OK.

    Step 5 – Wait for the update to complete. A success notification will be displayed once the theme is updated successfully.

    Step 6 – Don’t forget to update the Beyot-Framework

    Manual Update Method

    With the Manual Update Method, you can either choose to upload the theme files manually via FTP or WordPress. Before you can update manually, you have to download the theme files from ThemeForest. Continue reading below for instructions on how to download the theme files and how to upload them.

    Note:  We highly recommend backing up your theme, files and entire database before updating.

    Download The Beyot Files From ThemeForest

    Step 1 – Login to your ThemeForest account, navigate to your ‘Downloads’ tab and locate your Beyot purchase.

    Step 2 – Click the ‘Download’ button and choose to either download the ‘Installable WordPress file only’, which is just the WordPress installable file or choose to download ‘All Files & Documentation’ which is the full Beyot package.

    Download Beyot package


    Step 3 – After downloading the files, you need to decide if you want to upload the theme files via FTP or WordPress.  For instructions on both methods, please continue reading below.

    How To Update Beyot Via FTP

    Uploading the theme files via FTP requires you to delete your old theme folder entirely. This is to ensure that any deprecated theme files that could cause update issues are removed completely.

    Step 1 – Log into your server using FTP and navigate to the  [your_website]\wp-content\themes\[beyot_folder].

    Step 2 – Backup [beyot_folder] by saving it to your computer, or simply delete it. Your content such as pages, options, images and posts will not be lost or erased by doing this. However, any customizations to the theme’s core files, such as PHP files will be lost unless you’re using a child theme.

    Step 3 – Retrieve the theme files you’ve just downloaded. If you’ve downloaded the Installable WordPress file, then you only need to extract it once to get to the update version of [beyot_folder].

    Step 4 – Once extracted you can drag and drop the new Beyot folder into  [your_website]\wp-content\themes\ … location.

    Step 5 – Don’t forget to update the Beyot-Framework

    How To Update Beyot Via WordPress

    Step 1 – First you need to deactivate your current theme located in the WordPress Dashboard > Appearance > Themes section of your Installation. To deactivate, simply switch to a different theme.

    Step 2 – After deactivating you can go ahead and delete it. To do this, hover over the theme thumbnail then click ‘Theme Details’. In the bottom right corner of the window, click the ‘Delete’ button. Your content such as pages, options, images and posts will not be lost or erased by doing this. However, any customizations to the theme’s core files, such as PHP files will be lost unless you’re using a child theme.

    Step 3 – Retrieve the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you do not need to extract it. If you’ve downloaded the Full Theme Package, you have to extract it once to access the secondary ‘Beyot-ver1.1.zip’ file.

    Step 4 – Then install by uploading the new version (.zip file).

    Once uploaded, click ‘Install Now’

    Step 5 – When this has completed successfully, re-activate the theme by clicking the ‘Activate’ link.

    Step 6 – Don’t forget to update the Beyot-Framework

    After Updating

    After you are done updating your theme please also perform the following steps:

    1. Clear your Site & Browser Cache
    Whenever you update ANY plugin, theme or WordPress you must clear your browser and site cache to help avoid any potential cache related bugs.
    1. Updating WPBakery Page Builder
    AFTER you update your theme please make sure to update your WPBakery Page Builder as well following the guide for updating the theme’s recommended plugins. If you update the theme and not the WPBakery Page Builder you may run into issues.

    Troubleshooting  (related topics in customers support)

    Menus can’t update

    WPBakery Page Builder update

    Demo Data Not Loading

    After updation product pages are not working properly

    Update shortcode/framework plugins to latest version

    On Beyot theme, we have some required plugins and a special plugin name: g5plus-beyot-framework. Without these plugins, the theme won’t work properly. When update theme to version higher, you need to update this plugin to ensure that you don’t run into any compatibility issues with latest version of Beyot

    Step 1 – Deactived current plugin and delete it on your website (delete it and all files current)

    Step 2 – Download Beyot package (latest version from ThemeForest) and extract it. Find theme-plugins folder on path: g5plus-beyot\theme-plugins\ you will see g5plus-beyot-framework.zip file.

    Update Framework


    – Re-install plugins/framework by upload file.

    After you are done updating your theme and plugin please also perform the following steps:

    • Clear your Site & Browser Cache: Whenever you update ANY plugin, theme or WordPress you must clear your browser and site cache to help avoid any potential cache related bugs.
    • Updating WPBakery Page Builder: AFTER you update your theme please make sure to update your WPBakery Page Builder as well following the guide for updating the theme’s recommended plugins. Please sign-up and log-in to our support site to download the latest version of WPBakery Page Builder and Revolution Slider plugin throught this link: http://support.g5plus.net/knowledge-base/how-to-update-the-revolution-slider-plugin/ If you update the theme and not the WPBakery Page Builder you may run into issues.

      • Video guide on How to update plugin

      Video guide on How to update ERE plugin

    Thank you for purchasing our theme

    If you have any questions that are beyond the scope of this documentation or have any troubles configuring your website applications with the above settings you can contact the G5Theme Support Team by signing up and submit a new topic. G5Them Support Team will be glad to assist you.

    Please create topic here: http://support.g5plus.net. Thanks so much for purchasing BEYOT!