- The theme zip file benaa-v1.0.zip(included WPBakery Page Builder and Revolution Slider plugins)
- Child theme for easier customize in benaa-child.zip
- Document in Documentation.zip
Struct look like:
BENAA - REAL ESTATE WORDPRESS THEME
WORDPRESS VERSION
BENAA is a professional WordPress theme designed for real estate agency or residential agents/brokerages with friendly front-end that makes properties managements a breeze. This theme is a Wordpress-based property management system which allows you to own and maintain a real estate marketplace, coordinate your agents, accept submissions properties for free, for a fee or based on a subscription.
BENAA does not only come with frontend and backend features focused on usability you’ll engage more users, but also many WPBakery Page Builder shortcodes, custom widgets, header options and different listings property templates.
Are you looking for a complete solution for your real estate business? Let 's discover BENAA now!
- Created: 1/21/2018
- Latest update: 2/15/2018
- By: G5Theme
- http://www.themeforest.net/user/G5Theme
- Email: g5plus@outlook.com
- HelpDesk: http://support.g5plus.net
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
Code navigation
BENAA 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.
- ere-templates: Store templates in Essential Real Estate plugin
- inc: Store all functions
- languages: Store .pot file for translate to another language
- templates: Store templates for header, footer, archive, comments, breadcrumb.
- vc-templates: Store template that override WPBakery Page Builder plugin
System Requires
To use BENAA, 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 BENAA Theme
Get the BENAA Theme installation package from your account (after login on Themeforest.net) at downloads page and save it to your computer.
Install BENAA Theme
Installation via Wordpress
You could consult our video guide on How to install BENAA 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)
Step 3 - Click on the Upload Theme button. Locate benaa-v1.0.zip and click Install Now.
Step 4 - Click on the Activate button to activate BENAA.
Congratulations, you have now activated BENAA! You can now proceed with BENAA's Plugin Installation.
Installation via FTP
Step 1 - Log into your Hosting server using an FTP client (like FileZilla or WinSCP).
Step 2 - Locate "benaa-v1.0.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 BENAA with all theme files in it.
Step 3 - Locate your Wordpress installation and upload the theme directory BENAA (you unzipped in the previous step) into ../wp-content/themes/ in your Wordpress installation.
Step 4 - Click on the Activate button to activate BENAA. Congratulations, you have now activated BENAA! You can now proceed with BENAA's Plugin Installation.
Essential Real Estate
BENAA 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/ or take a look on official ERE online website: http://plugins.g5plus.net/ere/
Install BENAA Required Plugins
All plugins required have been into your download package, so you only need to do is click on the "Begin installing plugins".
You should be navigated to the Install Required Plugin page, which shows reqquired plugins list, all you need is clicking 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".
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.
Next, click on the box beside the Plugin label again to select all plugins and choose Activate this time as image below.
One Click Install Demo
With BENAA, 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 BENAA 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 BENAA 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 BENAA
The process would be displayed on import status bars so you will know when it is finished and your data is ready.
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 BENAA. The following actions will import some dummy posts and pages from the live preview:
- Go to menu Tools > Import
- Select WordPress from the list
- 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.
- Click Browse and select demo-data.xml file from the download package
Example: In BENAA theme, if you would like to install DEMO MAIN, please go to this path: \wp-content\plugins\benaa-framework\core\install-demo\data\main\demo-data.xml If you would like to install DEMO 2, file demo-data located in this path: \wp-content\plugins\benaa-framework\core\install-demo\data\demo2\demo-data.xml - Don't forget to extra benaa-framework.zip file to access to this folder.
- Click Upload file and import
- 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
After completing all above steps, open frontend link (Home 1) to see your result
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
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.
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:
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 BACKEND EDITOR to build page by WPBakery Page Builder or click FRONTEND EDITOR to build page by WPBakery Page Builder on the frontend (make sure that you have installed WPBakery Page Builder plugin).
Step 3: Content for your page goes in the editing field, use the Visual or Text editor. With WPBakery Page Builder, page content is mainly built using Shortcodes, Template. See the Shortcodes and Templates 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 4
- Click BACKEND EDITOR: your screen could be like this
Step 4 – Setup values for Page Settings which will affect to this page only and override options set in the Preset (if this page apply any Preset) or Theme Options. With each page, Page Settings is first priority, next is Preset, then is Theme Options, any change in Page Settings just affect to this page, not entire website.
→ General Settings
You could consult our guide on How to use Preset for more details on How to apply Preset to a Page/Post
→ Page Layout
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
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.
→ Menu
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 5 – Set your Parent page (It’s usually set to No Parent).
Step 6 – Set featured image for your page (optional)
Step 7 - 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.
Sidebars and Widgets
WordPress comes with built-in default widgets for your themes. Apart from these default widgets, BENAA comes with 13 custom widgets. In order to use these widgets, from WP dashboard, navigate to Appearance → Widgets.
These screenshots below are list of pre-defined sidebars as well as their locations on a page, so that you will find it easier when pulling out widgets to set up your site.
| Widget Name | Description |
|---|---|
| ERE Featured Properties | A widget to display featured properties. |
| ERE Listing Property Taxonomy. | A widget to display the listing property taxonomy. |
| ERE Login Menu | A widget to display Login and Logout menu for users. |
| ERE My Package | A widget to display the user's package in the sidebar. |
| ERE Mortgage Calculator | A widget to display mortgage calculator. |
| ERE Recent Properties | A widget to display recent properties and add "view more" link as well |
| ERE Search Form | A widget to display Search Form that you can config which tabs to display such as property status/type/price/size etc., |
| ERE Top Agents | A widget to display top agents. |
| G5Plus: Logo | A widget to display your logo. |
| G5Plus: Info | A widget to display information about: Address, Phone, Email |
| G5Plus: Posts | A widget to display posts in 4 custom layout (carousel, mix, small image, list) and 6 post sources: popular, random, recent, oldest, trending, video post |
| G5Plus: Social Profile | A widget to display social profile. |
| G5Plus: Recent Properties | A widget to display recent properties by 2 type: default or slider |
| G5Plus: Video | A widget to display video |
You can add widgets to widget areas simply by hover the widget then drag-drop to widget area as your liking
Notice: You can create a new widget simply like this:
Widgetised Sidebar in WPBakery Page Builder : You can use Widgetised Sidebar element in WPBakery Page Builder to build Custom Footer
Main Sidebar Widget Area on frontend
Demo Hompages
WPBakery Page Builder is the most powerful and used WP pagebuilder and there is more than 1 million sites that are using that to create homepage. This plugin is included in APRIL theme by free to create advanced and complex homepage in simplest way ever has seen!
Now you can start fiddling with WPBakery Page Builder to build your home page with any design that you like and also you can read the WPBakery Page Builder documentation to learn how to use it HERE
In case you don't have time for experience with it, you can use Classic Mode and switch to the Text tab, then paste this code into the content of your page. It help you build your frontpage based on one of the pre-made home page we offer and create a new page similar to our demo Homepage.
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 WPBakery Page Builder and type id on field: Row ID (make sure that the Row ID is the same as menu item URL)
Step 3 - After building content to your Homepage, scroll down to Page Settings area to choose style of page is OnePage
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 BENAA theme).
BUILD AN EXAMPLE
THIS IS STEP BY STEP GUIDE ON HOW TO BUILD HOMEPAGE MANUALLY FOR HOME 01
Note: You need Wordpress, BENAA & all required 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 BENAA theme.
1.1 Setting header
If you want apply this header to all your pages, setup by going to Theme Options → Header tab, In case you only want to apply this header for some pages/post, please create a new Preset then setup options for Header Area as your liking as below. (You can consult Preset Options sections for more details in use Preset).
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 Setting Header Navigation
Header Customize panel in Theme Options help you setup Header Navigation area. In Header Customize Navigation, we add "Search" then setup Navigation Item spacing and add custom CSS class (optionally)
1.3 Add widgets to Top Bar Left area
Go to Apperance → Widget
Then add 2 widgets: ERE Login Menu and Custom HTML to the Top Bar Left widget area:
Code HTML for Custom HTML Widget in Top Bar Left:
1.4 Add widgets to Top Bar Right area
Add 2 widgets Custom HTML and G5Plus: Social Profileto Top Bar Right area.
and then add HTML to Content field as below:
Code HTML for Custom HTML Widget in Top Bar Right:
and then add HTML to Content field as below:
Code HTML for Custom HTML Widget in Top Bar Right:
1.5 Upload logo
Go to Theme Options → Logo tab (or Home 1 preset → Footer tab), then change logo (please read detailed description below each item before upload):
1.6 Create menu
The menu is one of the most important elements of the site. It provides your visitors with the information about site structure. If your menu has well-thought and conveniently grouped elements, you visitors will be able to find the needed section easily. You can also consult Mega Menu section to build an attractive menu by your own.
Navigate to Appearance → Menus section to manage all menus on your site and do follow as below screenshot:
In the Menu Settings section, click to Primary Menu to setup this menu to be the main site menu and is used almost in all header styles and menu locations.
If you want to extra more fields to add to your menu, you can click on Screen Options and select:
Finally, don't forget to Save Menu after everything is set properly and check it on the site.
BUILDING FOOTER AREA
This screenshot below is the Footer Area on the frontend
Footer area in BENAA theme is built completely by WPBakery Page Builder elements by using Custom Footer. Please following these steps as below to build footer area like our demo.
1. Add widgets to sidebars
1.1 Add widgets to FOOTER LOGO 1 sidebar
Go to Widget Manager
Add G5Plus: Logo widget to Footer 1 Logo sidebar (you can create a new widget area as your liking).
1.2 Add widgets to Social Profile sidebar
Add G5Plus - Social Profile widget to Social Profile widget area
1.3 Add Widgets to FOOTER 2 area
Add Custom HTML widget to Footer 2 area:
Custom HTML
1.4 Add widgets to FOOTER 3 sidebar
Add ERE Listing Property Taxonomy widget to FOOTER 3 widget area
1.5 Add widgets to FOOTER 4 sidebar
Add Navigation Menu widget to FOOTER 4 widget area
1.6 Add Widgets to BOTTOM BAR LEFT area
Add Custom HTML widget to Bottom Bar Left area
Custom HTML
1.7 Add Widget to BOTTOM BAR RIGHT area
Add Navigation Menu widget to Bottom Bar Right area:
2. Build the Custom Footer to display as Footer area
Go to G5 BENAA → Custom Footer tab, then click Add New to create a new Custom Footer by WPBakery Page Builder elements.
3. Settings Footer
Go to Theme Options → Footer tab, then setup general options for Footer area and Bottom Bar area.
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
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:
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 BENAA 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 BENAA 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 BENAA 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 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/.
Page Settings
Page Settings is one of the BENAA'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 Options work for more details about the relationship between Theme Options, Preset and Page Settings
General Option
Page Layout Option
Page Title Option
Menu Option
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. Penates 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
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
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)
Apply Preset to Page
From a page that has been applied a Preset on the frontend, you can edit the Preset by clicking to 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 BENAA Theme Options
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 BENAA Theme Options
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 |
Logo
This option is used for setting Logo in a Preset. It will overwrite Logo settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BENAA Theme Options
You can set the following Logo Options for the Page you are currently editing:
| Attribute | Description |
|---|---|
| Logo Desktop | |
| Custom Logo | Turn on this option if you want to enable custom logo. |
| Logo max height | Setting Logo max height (px). Do not include units (empty to set default) |
| Logo padding | Setting Logo padding top, bottom. Do not include units (empty to set default) |
| Logo Mobile | |
| Custom Mobile Logo | Upload logo if you want custom logo mobile for page used this preset. |
| Mobile Logo Max Height | Set max height for logo mobile, if leave empty will take value in Theme Options |
| Mobile Logo Padding | Set padding top/bottom for logo, if leave empty will take value in Theme Options |
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 BENAA Theme Options
You can set the following Top Drawer Options for the Page you are currently editing:
| 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 Padding | Top drawer padding top. Do not include units (empty to set default)Set 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 BENAA Theme Options
You can set the following Header Options for the Page you are currently editing:
| 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 BENAA Theme Options
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 BENAA Theme Options
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 BENAA Theme Options
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 |
Footer
This option is used for setting Footer in a Preset. It will overwrite Footer settings in Theme Options. Any option is set to "Default" which means they will take on the global options set in BENAA Theme Options
You can set the following Footer Options for the Page you are currently editing:
| Attribute | Description |
|---|---|
| Footer Custom | Select one to apply to the page footer |
| General Settings | |
| Footer Container Layout | Set Footer Container Layout: Full Width, Container Fluid or Container |
| Footer Parallax | You can On/Off Footer Parallax, if selected default will take value in Theme Options |
| Custom Background Image | Set background image for footer. If leave empty will take value in Theme Options |
| Footer Image apply for | Select region apply for footer image, Footer Image apply for: Footer Wrapper or Main Footer. |
| CSS Class | Insert CSS Class (optional) |
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 BENAA Theme Options
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/BENAA 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.
Theme Options are logically organnized into tabs, each tab contains all the options for that specific area within your site.
In Theme Options, there are 4 buttons namely - 'Save Options', 'Import/Export', 'Reset Section' and 'Reset Options'. After making all the changes in Theme Options, you can save everything by clicking on 'Save Options' button. In theme options, all options are in the form of tabs, viz; 'General', 'Header' etc. You can click on 'General' (or any other tab) and make changes therein. Now, if want to get back all default data of specific section i.e: 'General' (or any other section), then you should click on 'Reset Section'. Now, if you want to get back to default data/setting for all the Theme Options, then you need to click on 'Reset Options'.
With Penates, we integrated Preset section 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 Type | Set Search Popup type: Standard or Ajax |
| Back to Top | Set Back to Top status: on, off |
| Enable 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 Setting
You can input information, background for 404 page with out install plugins.
Frontend display
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 |
Logo Setting
Logo Setting contains all options for setting how logo display on page (pls read carefully infomation below each option for more details)
Frontend display
| Attribute | Description |
|---|---|
| Logo Desktop | |
| Logo | Upload header logo if you want custom header logo for page used this preset. |
| Logo Retina | Upload Header Logo Retina for retina if you want custom Header Logo Retina for page used this preset |
| Sticky Logo | Upload logo sticky if you want custom logo for page used preset. |
| Sticky Logo Retina | Upload logo sticky for retina if you want custom logo retina for page used this preset |
| Logo max height | Set max height for logo, if leave empty will take value in Theme Options |
| Logo padding | Set padding for logo, if leave empty will take value in Theme Options |
| Logo Mobile | |
| Mobile Logo | Upload logo if you want custom logo mobile for page used this preset. |
| Mobile Logo Retina | Upload logo mobile for retina if you want custom logo retina for page used this preset |
| Mobile Logo Max Height | Set max height for logo mobile, if leave empty will take value in Theme Options |
| Mobile Logo Padding | Set padding top/bottom for logo, if leave empty will take value in Theme Options |
Top Drawer
Top Drawer contains all options for setting Top Drawer area. In BENAA 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
Header contains all options for setting Header Area such as Layout, Header Top/Bottom Padding, height...
| Attribute | Description |
|---|---|
| Header responsive breakpoint | You can response with 2 screens of devide that: Medium Devices or Tablet Portrait |
| Desktop Settings | |
| Header Layout | Set layout of header in Desktop from 3 layout styles |
| Header container layout | Set container layout for header: 'Container', 'Container Full' |
| Header Float | Set enable float for header |
| Show/Hide Header Sticky | Set sticky mode for header:on, off |
| Header Border bottom | Select Header border bottom, include: None, Full Border, Container Border |
| Header Top/Bottom 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 . |
| Mobile Settings< /b> | |
| Header Mobile Layout | Set layout fot header mobile. |
| Menu Drop Type | Set drop type for menu mobile: 'Dropdown Menu', 'Fly Menu'. |
| Search Box | Set visible for search box. |
| Header mobile sticky | Set sticky mode for mobile header. |
| Search Box | Enable/Disable the Search Box on the header. |
| Login & Register | Enable/Disable the Login & Register on the header |
| Mobile header border bottom/td> | Set header border bottom on mobile that: None/Full Bolder/Container |
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 |
Footer
Footer contains all options for setting Footer Area (pls read infomation below each option for more details)
Frontend display
| Attribute | Description |
|---|---|
| Footer Custom | Select one 'Custom Footer' to apply to the page footer |
| Show/Hide Footer | Select show/hide Footer |
| General Settings | |
| Footer Container Layout | Set Footer Container Layout: Full Width, Container Fluid or Container |
| Footer Parallax | You can On/Off Footer Parallax. |
| Background Image | Set background image for footer. |
| Footer Image apply for | Select region apply for footer image, Footer Image apply for: Footer Wrapper or Main Footer. |
| CSS Class | Insert CSS Class (optional) | Above Footer Settings |
| Above Footer | Select 'Custom Footer' to display on Above Footer Area. | Main Footer Settings |
| Layout | Select the footer column layout. |
| Sidebar 1 | Choose the default footer sidebar 1 |
| Sidebar 2 | Choose the default footer sidebar 2 |
| Sidebar 3 | Choose the default footer sidebar 3 |
| Collapse footer on mobile device | Set collapse mode for footer on mobile device. |
| Footer padding | Set padding top/bottom for main footer. |
| Footer border top | Set border top for main footer that: None/Full Border/Container Border. | Bottom Bar Settings |
| Show/Hide Bottom Bar | Set visible of Bottom Bar |
| Bottom Bar Layout | Set layout sidebar of footer bottom area |
| Bottom Bar Left Sidebar | Set sidebar for footer bottom left. |
| Bottom Bar Right Sidebar | Set sidebar for footer bottom right. |
| Bottom Bar Border Top | Set Border Top for Bottom Bar: 'None', 'Full Border' , 'Container Border' |
| Bottom bar padding | Set padding top/bottom for footer bottom area. |
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) |
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 BENAA 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.
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 BENAA 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.
ERE Shortcode in WPBakery Page Builder
Config row / column
Content management is a breeze with Fortuna and it requires absolutely no coding skills. Using a highly customized version of the WPBakery Page Builder 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 BENAA:
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 BENAA 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
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 → Email to setup:
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/.
MailChimp Settings
Step 1After 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:
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.
Step 3 - Once the API key is added and the changes saved, your list information will populate in the "MailChimp Data" area.
Step 4 - Forms 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.
Step 6 - Adjust messages shown when a form submission is complete as well as any error messaging.
Update theme to latest version
There are two ways to update BENAA theme. The first method is to use Envato WordPress Toolkit plugin which was included in BENAA. 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.
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 benaa-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 BENAA Files From ThemeForestStep 1 – Login to your ThemeForest account, navigate to your ‘Downloads’ tab and locate your BENAA 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 BENAA 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 BENAA 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\[benaa_folder].
Step 2 – Backup [benaa_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 [benaa_folder].
Step 4 – Once extracted you can drag and drop the new BENAA folder into [your_website]\wp-content\themes\ … location.
Step 5 – Don’t forget to update the benaa-Framework
How To Update BENAA 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 ‘benaa-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 benaa-Framework
After Updating
After you are done updating your theme please also perform the following steps:
- Clear your Site & Browser Cache
- Updating WPBakery Page Builder
Troubleshooting (related topics in customers support)
Update shortcode/framework plugins to latest version
On BENAA theme, we have some required plugins and a special plugin name: benaa-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 BENAA
Step 1 – Deactived current plugin and delete it on your website (delete it and all files current)
– 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. If you update the theme and not the WPBakery Page Builder you may run into issues.
Video guide on How to update 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 BENAA!
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