Copyright MOTIVOWEB 2017

HALA - Multi-Purpose WordPress Theme

    WORDPRESS VERSION

    HALA is a creative wordPress theme , creative and professional, readily responsive WordPress multipurpose website theme. Whoever you are, whatever business you are doing, HALA is the right one for you!

  • By: MOTIVOWEB
  • https://themeforest.net/user/motivoweb
  • Email: [email protected]

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
  • Hala WordPress Theme
  • Child Theme
  • Theme Documentation
  • Premium Plugins
  • Premium Plugins documentations (included Visual Composer and Revolution Slider plugins)
Code navigation

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

  • assets: Store sass , js, resource default and another plugin for theme. Besides include file for demo data.
  • framework: Store all functions
  • languages: Store .pot for translate to another language
  • vc_templates: Store template that override visual composer
Download HALA Theme

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

dashboard

Installation via Wordpress

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Themes. Click Add new button, located at the top of the screen or Add New theme ( see screenshots below ).

Step 3 - Click on Upload button at the top of the screen.

Step 4 - Choose Hala.zip.

Step 5 - Wait while the theme is uploaded and installed then activate the theme.

dashboard

Installation via FTP

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

Step 2 - Locate Hala.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 HALA with all theme files in it.

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

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

Install HALA Required Plugins

Step 1 - After activating the theme a notice should appear on the top of the screen, click on begin installing plugins ( see screenshots below ).

Step 2 - Select all the plugin,change Bulk Actions drop to Install then click apply ( see screenshots below ).

Step 3 - Congratulation you are ready to use Hala, check the First Steps part of our documentation to see what you may want to do before starting to edit your WordPress Site.

active all required plugins

WordPress Importer

Step 1 - Log into your WordPress Dasrdoard.

Step 2 - Go to Tools > Import. Then click on WordPress ( bottom of the list ).

Step 3 - A window should appear click the Install now button which is on bottom right.

Step 4 - Click Activate plugin & Run Importer. Then choose the content.xml file and click upload file and import Do not interrupt/cancel the import process!

Step 5 - Done! But you still need to set the Menu, Homepage.

import demo

Theme Options Importer

Step 1 - Log into your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Import/Export and import theme options.

import demo

Widget Importer

Step 1 - Log into your WordPress Dasrdoard.

Step 2 - Install plugin Widget Importer & Exporter.

Step 3 - Go to Tools > Widget Importer/Exporter and import widget.

import demo

Revolution Importer

Step 1 - Go to "Revolution Slider"

Step 2 - Click "Import Slider" button

Step 3 - When a popup appear, click "Browse" and select one of zip sliders(these files include in main file downloaded) file.

Step 4 - Click "Import Slider" button to start import the selected slider

Repeat the steps to import all

import demo

Use Page Builder

Creat a new page with page builder

Step 1 - Log in to your WordPress Administration Panel.

Step 2 - Click on Pages > Add New.

Step 3 - Click on Backend Editor.

page builder

Add and modify Row Layout

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

page builder

Step 2 - Select the Row Module

page builder

Step 3 - Click on the Edit This Row (pencil icon) to Edit the Row element ( in our example we use row with 3 columns filled with text block )

page builder

Step 4 - To change the Row layout ( number of columns ) you need to click the second Icon from the left then select a layout or custom to make your own

page builder

Edit Element

Pencil Icon - To Edit Row, Column or Module you need to click the Pencil icon.

page builder

Duplicate Element

Pages Icon - To Duplicate Row or Module you need to click the Pages icon.

page builder

Remove Element

Trash Box Icon - To Remove Row, Column or Module you need to click the Trash Box icon.

page builder

About Row / Column / Custom heading / Text Block Design options

Design Options - When you edit row / column / custom heading / text block module, you can edit the design options.

page builder

Row / Custom Heading / Text Block element have a default Bottom Margin of 35 pixel, you may want to set it to 0 if you don't want to have bottom space.

page builder

It is Good to add bottom Padding to your Column, so they will looks good on mobile

page builder

Left and Right Margin should NEVER be modified, please left blank

page builder

Configure row / column

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

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

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

Add / Edit Page Elements

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.

Create Full width Section

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

page builder

Step 2 - Select the Row Module

page builder

Step 3 -Click on the Edit This Row (pencil icon)

page builder

Step 4 - Change the Type setting to Full width content then click Save changes

page builder

Set Fixed Background Section

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon)

Step 4 - Click on Design Options ADD padding and REMOVE margin for better result, add a Background Image change to Cover and then Saves changes

page builder

Step 4 - Click on Design Options ADD padding and REMOVE margin for better result, add a Background Image change to Cover and then Saves changes

page builder

Step 5 - Seclect background overlay and Enable background fixed in this row.

Step 6 - Update or Publish your page and you should now have a section with background fixed

Parallax Background Section

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon)

Step 4 - Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).

page builder

Step 5 - Click on Design Options ADD padding and REMOVE margin for better result, add a Background Image change to Cover and then Saves changes

Step 6 - Update or Publish your page and you should now have a section with parallax background

Video Background Section

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon)

Step 4 - If checked, video will be used as row background.

page builder

Step 5 - You can edit the Design options ( remove margin and add padding "optional" ) and then Saves Changes and Update / Publish your page. You should now have a Full width Section with Video

Setting a static page as Home

If you installed Hala 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

home page

Save all your changes!

Building OnePage

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

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

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

Step 2 - Go to your homepage, anywhere you want the menu item to navigate to section, please edit row by Visual Composer and type id on field: Row ID

Building Hompage

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

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

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

Home Version 01 (One Page)

Home Version 02

Home Version 03

Home Version 04

Home Version 05

Home Version 06

Home Version 07

Elements area on page

THIS IS GUIDE ON HOW TO BUILD HOME PAGE MANUALLY FOR HALA HOME PAGE 01

Add Portfolio Items

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).

Step 2 - Click the 'Portfolio' tab.

Step 3 - Click the 'Add New Portfolio Item' sub-tab.

Step 4 - Start filling in the blanks: enter your portfolio title in the upper field, and enter your portfolio body content in the main post editing box below it.

Step 5 - Add categories to your item, the tags will be used as a filter on Portfolio Template pages.

Step 6 - Upload a featured image for your portfolio item then publish it.

Step 7 - Scroll down until you see the Portfolio Settings to Select thumbnail Link Type .

Create Portfolio page

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button

Step 5 - Select the Portfolio module.

Step 6 - The Portfolio Settings should appear. You can customize the Portfolio by modifying the settings

Step 7 - After finishing, Publish the page.

Create Team Post

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).

Step 2 - Click the Team Members > Add New.

Step 3 - Fill the title field with the team name, position and short bio if needed.

Step 4 - Add a featured image, it will represent your team member's image.

Step 5 - Scroll down until you see the Team Member Social.

Create Team page ( standard )

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button

Step 5 - Select the Team Or Team Carousel module.

Step 6 - The Team should appear. You can customize the Team by modifying the settings

Step 7 - After finishing, Publish the page.

Create Blog page

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button.

Step 5 - Select the Blog module.

Step 6 - The Blog Settings should appear. You can customize the Blog by modifying the settings.

Step 7 - After finishing, Publish the page.

For each page you can change the title style, title background color, select to use a slider and much more! Check the screenshot and read the documentation to see how it works

General setting

Body Layout - Select body layout for page ( Boxed - Wide ).

Header setting

Select Header - Select header layout for page.

Logo - Select an image logo for page.

Select Menu - Select menu for page.

Select Position - Select position menu for page.

Disable Stick Menu - Disable Stick Menu for page.

Title Bar setting

Background - Select Background title bar for page.

Select title bar style - Select style title bar for page ( Snow - Particles - Animator ).

Footer setting

Select Footer - Select footer layout for page ( Footer V1 - Footer V2 - Footer V3 ).

Theme Options

The theme comes with an extensive Theme Options Panel. From the Theme options panel you will be able to set or change the color of the theme, layout, header style, social icons and a lot more. You should take the time to go through all of these options to ensure that you are getting the most out of the theme.

Click Appearance > Theme Options to access the Theme Options Panel.

General setting

Layout - Body layout with wide or boxed.

Page Loader - Enable/Disable page loader.

Color setting

Theme Style - Set Theme style ( White - Dark ).

Theme Stylesheet - Set stylesheet to change colors.

Body Background - Body background with image, color, etc.

Primary Color - Set primary color.

Secondary Color - Set secondary color.

Typography

Body Font Options - Set value of Font Family, Font Subsets, etc.

H1/H2/H3/H4/H5/H6 Font Options - Set value of Font Family, Font Subsets, etc.

Logo setting

Logo - Select an image file for your logo.

favicon - Select an image file for your favicon.

Header setting

Header Layout - Select header layout in your site.

Title Bar setting

Dimensions (Height) Option - Enter the value of Height for Title Bar.

Padding - Enter the value of padding for Title Bar.

Background - Seclect background for Title Bar.

Canvas Style - Seclect canvas style for Title Bar ( Snow - Particles - Animator ).

Title Bar Heading - Set value of Font Family, Font Subsets, etc.

Title Bar Path - Set value of Font Family, Font Subsets, etc.

Sub Text - Enter sub text of Title Bar.

Sub Text Format - Set value of Font Family, Font Subsets, etc.

Delimiter - Enter Delimiter of page breadcrumb in Title Bar.

Blog setting

Select Layout - Select layout of blog.

Content Column - Enter class bootstrap content column.

Sidebar Right Column - Enter class bootstrap content column.

Read More Text - Enter text of label button read more in blog.

Show share - Show or not share on your single blog.

Show Navigation - Show or not post navigation on your single blog.

Show Author - Show or not post author on your single blog.

Show Comment - Show or not post comment on your single blog.

Page setting

Show Page Comment - Show or not page comment on your page.

Custom CSS

Custom CSS Code - Quickly add some CSS to your theme by adding it to this block.

Contact Forms Settings

You can do step by step as image below to build 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

Mail Chimp Settings

Step 1 Go to MailChimp for WP > MailChimp Settings

Step 2

Step 3

Step 4

Step 5

Step 6

Set Up WooCommerce ( eShop )

Hala themes is 100% compatible with the WooCommerce plugin for WordPress. It includes full design integration of the WooCommerce pages, shortcodes and widgets.

If you want to use Woocommerce you will have to install the plugin, to do so go to Plugins > Add New , search for Woocommerce. The Plugin you need to install is WooCommerce - excelling eCommerce by WooThemes

For full documentation visit the following websites:

Theme Update via WordPress

Updating the theme via WordPress is very similar to the install process via WordPress.

Follow the steps below to update your theme via WordPress:

Step 1 - Log into your WordPress Dasrdoard.

Step 2 - Go to Appearance > Themes.

Step 3 - Deactivate the Hala Theme by simply activating a different theme. Once you activate a different theme, you can delete the Hala theme.

Step 4 - Delete the Hala Theme. Do not worry, your content will not be lost!

Step 5 - Then simply upload the new Hala.zip” file in the Appearance > Themes section. Click on the Install Themes tab at the top and choose to upload the zip file. You have this step explained in section: Theme Installation via WordPress.

Theme Update via FTP

Updating the theme via FTP is very similar to the install process via FTP.

Follow the steps below to update your theme via FTP:

Step 1 - Go to .../wp-content > themes location on your server using a FTP client and backup your "Hala" theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.

Step 2 - Download the new version of Hala theme from your Themeforest and retrieve Hala folder by unpacking the zip that you download from Themeforest and Hala_(version.number).zip.

Step 3 - Then simply drag and drop the new "Hala" theme folder into .../wp-content > themes location. Choose to “Replace” the current one if you did not delete it.

Step 4 - Log into your WordPress Dasrdoard, go to Appearance > Themes and activate the new Hala theme.

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 MotivoWeb Support Team by signing up and submit a new topic. MotivoWeb Support Team will be glad to assist you.

Please Send Email: [email protected]

Thanks so much for purchasing Hala!