• The theme zip file g5plus-darna.zip (included WPBakery Page Builder and Revolution Slider plugins)
• Child theme for easier customize in g5-darna-child.zip
• Document in Documentation-darna.zip

Struct look like:

Darna includes 10 other folders. Please see explanation below for more details:

• admin: Store meta-box css, redux-admin css, template css and admin js.
• assets: Store less, js, resource default and another plugin for theme. Besides include file for demo data.
• g5plus-framework: This folder store core file to add action for header, footer, woocommerce, function breadcrumb, filter for search.
• html-template: Store html files of contact form, header area and top bar.
• includes: Store php files for theme functions
• languages: Store .pot file for translate to another language
• plugins: Store required plugin files
• templates: Store templates for header, footer, archive, header, single blog.
• vc_templates: Store php files for WPBakeBuilder templates
• woocommerce: Store template that override for woocommerce plugin

To use Darna, 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

You could please consult our guide on How to increase the PHP limits here:http://support.g5plus.net/knowledge-base/system-required

Please make sure your server is set up properly and the theme and content will be loaded correctly. Enough server configuration will also ensure fast speed and increase performance.

Navigate to Themeforest account and access at Downloads page in the profile. You’ll see the Download button in front of Darnatheme. After you click it, you’ll get the options to download all files in zip-archive, licenses and purchase code, or installable pack only (We would recommend you to install all files of the theme).

Please, unzip the archive on your computer. you’ll get the themeforest-17387412-darna-wp-theme folder. All the information you may need is located in it.

Install Darna theme via WordPress

You can consult our video guide on How to install DarnaTheme with all demo content via WordPress

If you don’t like the video or need more instructions, then let’s go through this step-by-step:

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 g5plus-darna.zip .

Now you just have to click Install Now and wait for your theme folder to be uploaded and unzipped. The process might take some minutes, so please be patient.

NOTE: Some webservers have a limitation for the maximum allowed size of files being uploaded to them and that value may be exceeded by the theme file. If that is the case you can receive an error that states: "The uploaded file exceeds the upload_max_filesize directive in php.ini. or Are you sure you want to do this? Please try again." If you get any of these errors please increase the values of upload_max_filesize and post_max_size directives in your php.ini file to 20M or follow the Installation via FTP section described below.

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

In cases where you uploaded the files with other FTP tools, open the Wordpress dashboard and navigate to Appearance → Themes. You can Activate darna from the theme choices there.

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

Installation via FTP

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

Step 2 - Locate "g5plus-darna.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 Darnawith all theme files in it.

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

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

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.

With Darna , you can build a fully functional website just by clicking a button and install our demo data or click Manually Setup section to build your website step by step. Your Darnainstallation 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 Appearance → Install Demo Data

Click to Install button to install all settings with demo data of Darna

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

You can create a custom URL structure for your permalinks and archives. Custom URL structures can improve the aesthetics, usability, and forward-compatibility of your links. You should ensure that a non-default permalink setting is selected, e.g. Month and name in Settings → Permalinks .Then select Post name and click Save Change

DONE. Now, you can visit your website to view demo (demo Home page 01)

Create 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 (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.

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 Meta Options which will affect to this page only and override options set in Theme Options. With each page, Meta Options (Page Settings) is first priority then is Theme Options, any change in Meta Options just affect to this page, not entire website.

10 components in Meta 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 Theme Options. Insert a different value to override the 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.

Create a new Post

Creating Posts with Darna is pretty straightforward. Follow the steps below to create your own Posts now.

Step 1 - Go to Posts → Add New in your Dashboard.

Step 2 - Enter your Post Title at the top of the Edit page.

Step 3 - Enter your Post content.

Step 4 - Select Post Format, Category, Tags and other meta data if you want it.

Step 5 - Upload a Featured Image for this Post.

Step 6- Click on Publish/Update button

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

Note: You need Wordpress, darna theme & all required plugins are already. Building other homepages process are similar.

I. OVERVIEW ELEMENTS AREA ON PAGE

You can setup options in Theme Options which will affect to entire website.

The screenshot below is an header area:

1.1 Add widgets to Top Drawer area

Go to Appearance → Widgets

Add G5Plus: Footer Logo widget to Top Drawer area

Add 2 Text widgets to Top Drawer area

1.2 Add widgets to Top Bar Left and Top Bar Right area

Add Text widget to Top Bar Left area

Add G5Plus: Social Profiles widget to Top Bar Right area

1.3 Setting header

Settings for Header Area in Theme Options

Header panel in Theme Options help you setup main settings in Header area. Go to Theme Options → Header tab, then setup options for Header Area as your liking.

1.4 Upload logo

Go to Theme Options → Logo tab, then change logo (please read detailed description below each item before upload):

Please consult this video guide on How to build Header Area. This process is similar to building Header Area on Darnatheme.

1.5 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.

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. You can also consult Menu Settings section to build an attractive menu by your own.

The screenshot below is demo Footer Area on the frontend

1.1 Add widget to sidebars in Footer Above area

Go to Widget Manager

Add G5Plus: Footer Logo widget to Footer Above sidebar

1.1 Add widget to sidebars in Main Footer area

1. Add widgets to FOOTER 1 area

Add Text widget to Footer 1 sidebar

2. Add widgets to FOOTER 2 area

Add Text widget to FOOTER 2 widget area

3. Add Widgets to FOOTER 3 area

We add G5Plus: Twitter widget to FOOTER 3 widget area:

Notice: You can create a new widget simply like this:

1.2 Add widget to sidebars in Bottom Bar

Add widget to sidebars in Bottom Bar Left

Add Navigation Menu widget to Bottom Bar Left area

Add widget to sidebars in Bottom Bar Right

Add Text widget to Bottom Bar Right area

1.3 Settings Footer

Go to Theme Options → Footer tab, then setup general options for Footer area and specify the Content Block to use as a footer content.

People all around the world use WordPress, around 44% of WordPress websites are written in a language other than English. We’REALY about to show you how to translate our themes.

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.

Please confsult our video guide on How to translate G5THEME Theme using LOCO Translate plugin, We have been use Mowasalat theme for example and the process of Darnatheme translation is similar to this.

G5Theme offers WordPress themes that all are compatible with multilingual plugins. If you want to build a site serve a diverse community that speaks multiple languages, please consult our guide on: How to create a multilingual WordPress website

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

Any option that was set to be Default or Customize Off means that it will use the value of equivalence option you have set in Theme Options. Insert a different value to override the Theme Option value. It 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

From WP-dashboard, navigate to Page → Add New or Post → Add New. Meta Options that located within each PAGE has 10 sections:

Meta Options will use the Theme Options value if left empty or if the value is default.

This option is used for setting Page Title in your page. 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 DarnaTheme Options

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

Attribute	Description
Show/Hide Page Title?	Set visible of header, if selected default will take value in Theme Options
Custom Page Title	Set content of page title. If leave empty will take value title of page
Page Title Text Color	Optionally set a text color for the page title.
Page Title Background Color	This option allows you to optionally set a background color for the page title.
Background Image	Set custom Background Image for page title.
Page Title Overlay Color	Set an overlay color for page title image.
Custom Overlay Opacity?	Set Custom Overlay Opacity
Page Title Height	Enter a page title height value (not include unit)
Breadcrumbs in Page Title	Set visible of breadcrumbs for page title. If selected Default will take value in Theme Options
Remove Margin Bottom	Click On/Off Removing Margin Bottom button

This option is used for setting Header Area in your pages such as Layout, padding, float... 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 DarnaTheme Options

You can set the following Header 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
Is One Page	Set page style is One Page
Show/Hide Top Bar	Select options to Show or Hide Top Bar.
Top Bar Layout	Set layout of Top Bar. If no selected will take value in Theme Options
Top Left Sidebar	Set the sidebar to display as Top Bar Left. If no selected will take value in Theme Options
Top Right Sidebar	Set the sidebar to display as Top Bar Left. If no selected will take value in Theme Options
Show/Hide Header	Set to show or Hide the Header
Header Layout	Set layout of header. If no selected will take value in Theme Options
Set header customize?	Enable/Disable the header customize
Mobile Header Search Box	Select to show or hide Mobile Header Search Box
Mobile Header Shopping Cart	Select to show or hide Mobile Header Shopping Cart
Header Sticky	Set sticky mode for header. If selected default will take value in Theme Options
Custom Logo	Select or upload the custom logo. If selected default, it will take value in Theme Options

This option is used for setting Footer Area in your page. 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 DarnaTheme Options

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

Attribute	Description
General Settings
Show/Hide Footer?	Set visible of footer, if selected default will take value in Theme Options
Footer Layout	Set layout sidebar for footer, if not selected will take value in Theme Options
Bottom Bar Settings
Show/Hide Bottom Bar	Set visible of footer bottom area, if selected default will take value in Theme Options
Bottom Bar Layout	Set layout sidebar of footer bottom area, if no selected will take value in Theme Options
Bottom Bar Left Sidebar	Set sidebar for footer bottom left, if no selected will take value in Theme Options
Bottom Bar Right Sidebar	Set sidebar for footer bottom right, if no selected will take value in Theme Options

This option is used for setting Page Layout in your pages. 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 DarnaTheme Options

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

Attribute	Description
Layout Style	Overwrite the Default Layout Style (set in Theme Options) for this page.
Page Layout	Overwrite the Default Layout of pages settings section in Theme Options for this page.
Page Sidebar	Set position for the page sidebar: none, left, right, both of left and right
Left Sidebar	Select the sidebar to display as the left sidebar
Right Sidebar	Select the sidebar to display as the right sidebar
Sidebar Width	Select the width of sidebar that be "Default" or "Small (1/4)" or "Large (1/3)
Page Class Extra	Add class extra in to body tag for this page

General 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.

General Options:

Attribute	Description
Smooth scroll	Set Smooth scroll status: on, off
Home Preloader	Set enable/disable Home Preloader
Preloader background Color	Set Preloader background Color
Preloader Spinner Color	Pick a Preloader Spinner Color for the Top Bar
Custom Scroll	Set Custom Scroll status: on, off
Panel Selector	Set enable/disable Panel Selector
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.
Layout Style	Select the layout style.
Enable Social Meta Tags	Set social meta head tag output with status: on, off
Search Popup	Set Search Popup status: on, off
Body Background Mode	Choose Background Mode with 2 options: Background and Pattern
Body Background	Body background (Apply for Boxed layout style).
Maintenance	Set Maintenance Mode: On(Custom Page), On(Status Page), Off
Page Transition	Set Page Transition status: on, off
Custom Favicon	Set Custom Favicon with each screen size
404 Page	Set Content Block and content for 404 page

1. On/Off smooth scroll

2. Panel Selector display

3.Back to top

Maintenance Mode

"Maintenance Mode" use for update/maintenance website. Can choose custom page or default(basic)

Performance

"Performance" use on/off js & css for faster loading page

Custom Favicon

Have many options for each devices/screen, view on image to further more details.

404 Setting

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

Frontend display

Page/Archive Setting has all options for setting site layout (pls read infomation below each option for more details)

The options in Page/Archive Setting section

Attribute	Description
Page Options
Layout	You can select one of 3 layouts: Full Width, Container, Container Fluid
Sidebar	Set Sidebar Style (choose one in 4 demo styles)
Sidebar Width	Set Sidebar Width that be Small (1/4) or Large 1/3
Right Sidebar	Choose the default right sidebar
Breadcrumbs	Enable/Disable Breadcrumbs In Archive
Show Page Title	Enable/Disable Page Title.
Page Title Text Align	Set Page Title Text Align
Page Title Parallax	Enable/Disable page Title Parallax.
Page Title Height	Set a height for the Page title
Page Title Background	Upload Page title background.
Page Title Comment	Enable/Disable page Title comment
Archive Options
Layout	You can select one of 3 layouts: Full Width, Container, Container Fluid
Sidebar	Set Sidebar Style (choose one in 4 demo styles)
Sidebar Width	Set Sidebar Width that be Small (1/4) or Large 1/3
Right Sidebar	Choose the default right sidebar
Paging Style	Select archive paging style
Breadcrumbs	Enable/Disable Breadcrumbs In Archive
Show Archive Title	Enable/Disable Page Title.
Archive Title Height	Set a height for the Archive title
Archive Title Background	Upload archive title background.
Single Blog Options
Layout	You can select one of 3 layouts: Full Width, Container, Container Fluid
Sidebar	Set Sidebar Style (choose one in 4 demo styles)
Show Single Blog Title	Enable/Disable Single Blog Title
Breadcrumbs	Enable/Disable Breadcrumbs in Single Blog Title
Single Blog Title Height	Set a height for the Archive title
Single Blog Title Background	Upload archive title background.

Logo contains all options for setting how logo display on page

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

Description of Logo Options

Attribute	Description
Logo	Upload header logo
Light Logo	Upload a light version of your logo here
Logo	Upload a dark version of your logo here
Logo Max Height	You can set a height/Max height for the logo here
Sticky Logo	Upload logo sticky if you want custom logo for page used preset.
Logo Top/Bottom Padding	Insert Logo Top/Bottom Padding. This must be numeric (no px). Leave balnk for default.

Header contains all options for setting Header Area such as Layout, Header Top/Bottom Padding.. and customize Header Area (pls read carefully infomation below each option for more details).

Description of Header Options

Attribute	Description
Top Drawer Type	Set top drawer type that be Disable or Always Show or Toggle
Show/Hide Top Bar	Select to Show/Hide Top Bar
Header Layout	Select a header layout option from the 9 demo layouts.
Header background	Set background for Header with image, color, etc.
Header background color	Set the opacity level of background color
Header navigation layout	Set Header navigation layout that be Container or Full Width
Header navigation separate	Set to enable/disable the header navigation separate
Header navigation hover	Select Header navigation hover that by Primary Color or Base Primary Color
Header navigation distance	Set distance between navigation items. Empty value to default
Header navigation scheme	Set navigation scheme for Header that be : Light/primary color/Transparent/Customize
Header navigation border bottom	Set navigation border bottom to be 'Solid' or 'Dashed' or 'Dotted' or 'None' and the color.
Header navigation border bottom opacity	Set the opacity level of the borer bottom
Header Float	Enable/Disable Header Float.
Show/Hide Header Sticky	Set to Show Hide header Sticky.
Header sticky scheme	Choose header sticky scheme
Header Customize	Organize how you want the layout to appear/disappear on the header
Custom social profiles	Select social profiles
Custom Text Content	Add Content for Custom Text
Search Box Type	Select search box type that be Standard or Ajax Search

Page Title has options for setting Page Title. You can select the Content Block to displays as a page title content.

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

Attribute	Description
Header Layout	Select header mobile layout from 5 demo layouts
Menu Drop Type	Set menu drop type for mobile header that be Dropdown Menu or Fly Menu
Mobile Logo	Upload your logo or paste the link URL logo
Logo Height/Max Height	Insert the Logo Height/Max height
Logo Top/Bottom Padding	Insert the padding to override the default logo top/bottom padding
Top Bar	Enable/Disable Top bar
Stick Mobile Header	Enable/Disable Stick Mobile Header.
Search Box	Enable/Disable Search Box
Shopping Cart	Enable/Disable Shopping Cart

Footer panel contains all options for setting Footer Area (pls read infomation below each option for more details).

Attribute	Description
Footer Layout	Select the footer column layout.
Footer background image	Upload footer background image here
Footer Parallax	Enable/Disable Footer Parallax
Footer above layout	Select footer above layout
Collapse footer on mobile device	Enable/Disable collapse footer
Bottom Bar	Set visible of bottom footer area that be On/Off
Bottom Bar Layout	Set layout sidebar of footer bottom area
Bottom Bar Left	Set sidebar for footer bottom left
Bottom Bar Right Sidebar	Set sidebar for footer bottom right

Styling Options allows users to custom and change many options color on website. If you change value in this section, you must click on "Save & Generate CSS"

Attribute	Description
Primary Color	Setup Primary Color by selecting color or transparent
Secondary Color	Setup Secondary Color by selecting color or transparent
Top drawer background color	Setup Top drawer background color by selecting color or transparent
Top drawer text color	Specify color and transparent for the Top drawer text
Top Bar background color	Setup Top Bar background colo
Top Bar text color	Setup Top Bar text color
Text Color	Set text color
Bolder Color	Set Bolder color
Heading Color	Setup Secondary Color by selecting color or transparent
Link Color	Setup Link Color with regular/hover/active color of the link
Circle countdown Color	Setup Circle countdown Color or transparent
Sub menu scheme	Set sub menu scheme that be 'Gray' or 'Light' or 'Dark' or Customize by your own
Page Title Background Color	Setup background color for Page Title
Page Title Background Overlay Color	Setup Page Title Background Overlay color
Page Title Background Overlay Opacity	Set the opacity level of the overlay.
Breadcrumbs Text Color	Setup the color for Breadcrumbs Text
Breadcrumbs background color	Set the background color for Breadcrumbs

Font Options contains all options to specify font properties to display as body font/H1/H2 etc,.

Font Options

Attribute	Description
Body font	Included: Font Family(name of font), Font Size, Font Weight.
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 contains all options that allows user to share on various social networks which automatically shows up under the content post, an important function that helps promoting your site. You can 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.

You can set connection for each area on page :

Attribute	Description
Social Share
Social Share	You can select Show/hide the social sharing in blog posts
Social Profile
Facebook	You can add title, icon, link ad color for icon
Twitter	You can add your facebook page/profile url
and other similar social networks

Users can disable the custom post types used within the theme here, by checking the corresponding box. Settings many options for them, also.

Portfolio Settings

Attribute	Description
Custom Post Type
Disable Custom Post Types	You can disable the custom post types used within the theme here, by checking the corresponding box.
Portfolio Settings
Show Portfolio Title	Enable/Disable Portfolio Title
Portfolio Title Height	This must be numeric (no px) or empty.
Breadcrumbs in Portfolio	Enable/Disable Breadcrumbs in Portfolio
Portfolio Title Background	Upload portfolio title background.
Portfolio Archive Link	Enable/Disable Portfolio Title Parallax
Portfolio Title Height	Insert Portfolio Archive Link as your liking (optionally)

Resources options help you utilize boostrap elements to style your store quick and easily.

Attribute	Description
Blog Listing
CDN Bootstrap Script	Insert Url CDN Bootstrap Script
CDN Bootstrap Stylesheet	Insert Url CDN Bootstrap Stylesheet
Post Per Page	Insert Url CDN Font Awesome

You can back up the options you chose here and restore them later, in case you want to fiddle with it. You can even swap data between different installations by pasting the text in the box under Transfer Theme Options Data and click Import Options button.

Attribute	Description
Import Options	You can import data from file or URL. This will overwrite all existing option values, please proceed with caution!
Export Options	You can copy/download your current option settings. Keep this safe as you can use it as a backup should anything go wrong, or you can use it to restore your settings on this site (or any other site).

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 Darna :

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 StartUpe 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:

Container - Row will full width, visible content if overflow

Container Fluid - Max width 1170px and center.

Full Width - Full width, padding left and padding right 15px.

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.

Color Skin: Select skin for this column. These skins are created in Skins section from WP dashboard

Extra class name: 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)

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.

Here Is A Screenshot That Shows The Various Areas Of The Portfolio Post Page Described Above

Our Team

Our Team is the custom post type to introduce the staff in your organization to the customer. Posts from this type are built with special metaboxes for extra staff information.

Each custom post type has each page setting to change slug, display name. To change setting custom post type follow the steps below:

• Step 1: Go to an 'Custom Post Type' item(ex: Portfolio ) > Settings in your Dashboard.
• Step 2: Input value to New slug post type and New name post type
• Step 3: Input value to New slug category and New name category .
• Step 4: Once you are finished, click Save Changes to save the settings

Here Is A Screenshot That Shows Setting Custom Post Type Described Above