IMG

Labore Wordpress Theme

Version: 1.0 | Last update: 22 August 2020

Thank you for purchasing theme!

Labore is built by the latest version of WordPress. Labore can be used for many type of website. Specially for Beauty, Spa, Yoga, Salons, Massage, Care, Hair, Health, Wellness Center and personal website.

Labore use our Hun Page Builder to build pages. Hun Page Builder is very easy to use and makes you feel comfortable building pages. Using it, you don't need to know the code, you can build a page quickly. With just simple steps, you will have a great page as you like.

If you need help about using the theme, please contact us from here: http://themeforest.net/user/huntheme

Thank you so much!

HUNTHEMES

Requirements

There are system requirements in order to install and setup Labore theme and its components properly. Make sure that you are running the latest version of WordPress, PHP version 5.6 or higher and MySQL version 5.6 or higher.

What's Included

Once you have download the package you will see the following files:

  • Labore theme
  • Documentation
  • Demo data

Import Demo

Labore use WordPress Importer (Import tool of WordPress) to import Demos. You will have demo data files in the packet when you buy the theme.

Go to menu Tools > Import on admin menu.

IMG

If WordPress Importer is not already installed, please install and activate it. Then you go to menu Plugins on Dashboard, find the WordPress Importer and check version of the plugin.

IMG
IMG

Finally, Back to menu Tools > Import on admin menu. Click "Run Importer", select the appropriate demo data file with the WordPress Importer version. Then click "Upload file and import" > check to "Download and import file attachments" > "Submit". You will get all great Demos.

Note: Although the demo pages have been imported, the Home Page and Header Menu (Primary Menu) have not been setup. Go to the menu Settings > Reading to set the Home Page and go to Appearance > Menus to put the pages you want into the Menu Header (Primary Menu).

IMG
IMG
IMG

1. How To Use Hun Page Builder

1.1 Before starting

Before using the builder, please add new pages you want to build and upload necessary images to the library.

Go to menu Appearance > Hun Page Builder on admin menu and click to link "Open The Builder" to open Hun Page Builder.

IMG

IMG

1.2 The main steps to build a page

IMG
Step 1: Select a page to build
IMG
Step 2: Click to show sections list
IMG
Step 3: Select a section to add
IMG
Step 4: Click to show setting section panel
IMG
Step 5: Select a layout
IMG
Step 6: In a layout, you can add new item, remove item, change image, icon, type text (title, description, content,...), choose options,... for this layout
IMG
Step 7: Click to an item to show setting for it
IMG
Step 8: Setting for the item
IMG
Step 9: You can hide panels to view page clearly
IMG
Step 10: Finaly, click save button to save page

NOTE:

Some content will not display correctly, only demo content will be displayed as: Shortcode, Post (service, event, news), General Footer/Header/Pagetitle,...

IMG
IMG

So after saving the pages, you can go to Dashboard > Pages, click to view link to see the full page.

IMG
IMG

1.3 Build Dynamic Page

Dynamic pages are Archive pages, Single pages. This pages will show a collection of posts grouped by category, author, date, tag, etc...or detail of post. You can select them to build. If not, they will show the default interface.

This theme alow you buid Single blog, Archive blog, Single gallery and 404 error page. You can select them form page list in select dropdown to build.

1.4 Build General Section

General Section are Header, Page Title, Footer. You can use them for other pages by choosing the general layout for them.

1.5 Build Static Page

Static Pages are the pages you add new as: Home, About, Contact, Gallery, Service,....

Note: A blog page is the page that displays articles. You should add new blog page with template "Blogs" to it will look like the Archive blog. But you can also do not choose the template "Blogs" if you want to build a special blog page.

IMG

2. Build General Sections

2.1 Build General Header

IMG
Select General Header
IMG
Add a new Header Section
IMG
Select a layout
IMG
Change logo and choose options for it
IMG
Save setting

2.2 Build General Footer

You do the same as other sections to build General Footer.

Attention, in setting panel of footer section you can show/hide 6 Widget Area. You can add widget to Widget Area in Dashboard > Appearance > Widgets

IMG
Select to show/hide and setting for Widget Area
IMG
Add widget to Widget Area here

2.3 Build General Page Title

You do the same as other sections to build General Page Title.

IMG

2.4 Use General Sections

When you build many pages, you add new header/footer/page title, you want the pages to have the same header/footer/page title, but you don't want to resetting them many times. So, you can choose General layout fo them. General layout is General Sections.

IMG
Select General Layout for Header
IMG
Select General Layout for Page Title
IMG
Select General Layout for Footer

3. Main menu & Main sidebar

3.1 Main menu

The main menu will be displayed in the header. Go to Dashboard > Appearance > Menus to setting menu.

IMG
Creat a new menu
IMG
Select the menu and add items to it
IMG
In Managa Locations tab, select the menu for Primary Menu and save changes

3.2 Main sidebar

The main sidebar will be displayed in archive blog and single blog. Go to Dashboard > Appearance > Widgets to add widgets for the main sidebar.

IMG

4. Booking Form & Contact Form

Labore use Contact Form 7 Plugin To make Booking Form and Contact Form, documentation: https://contactform7.com/docs/. You make new form and copy shortcode to input field at option panel of book service sections and contact section in Hun Page Builder.

IMG
Install and active Contact Form 7 Plugin
IMG
Create a form and copy shortcode of it
IMG
Paste to the shortcode input of book service section or contact section

Default input fields of Contact Form 7 don't have icon like our demo. If you want to make a form like demo, then copy below code to editor tab of Contact Form 7

IMG
Paste code below to the form editor

Booking Form Layout 1:

								

								

								

								

								[submit "Make appointment"]
							

Booking Form Layout 2:

								
[submit "Make appointment"]

Contact Form:

								
[submit "Send message"]

Some explanations:

To use icon, you add class="has-icon" to label tag and add the icon after input tag. You can get other icons here:

To use date picker like demo, add class="js-call-datepicker" data-drop="down" data-drop-inside="true" to label tag and use input type text inside (not type date)

To create column, use can use some grid class of boostrap: https://getbootstrap.com/docs/4.3/layout/grid/

5. Font & Color

5.1 Change Font

To change font, we recommend you to use Easy Google Fonts Plugin. You can download and read the user guide here: https://wordpress.org/plugins/easy-google-fonts/

Labore use 2 google font: Nunito and Alice. Using Easy Google Fonts Plugin, you can create a new font control and Add CSS Selectors to change font of them.

We show you CSS Selectors you can use in this theme:

  • body, .comments-area .comment-reply-title a, .set-primary-font : Nunito Font
  • h1, h2, h3, h4, h5, h6, .comments-area .comment .comment-author .fn, .set-second-font-author-tes strong, .set-second-font : Alice Font
IMG
Install and active Easy Google Fonts Plugin
IMG
Go to Appearance > Customize > Typography > Default Typography to setting font for paragraphs and heading
IMG
Go to Settings > Google Fonts
IMG
Creat a new font control
IMG
Paste CSS Selectors above to the font control
IMG
Go to Appearance > Customize > Typography > Theme Typography to setting font for the new font control

5.2 Change Color

You go to Appearance > Customize > Colors to change color for the theme. This theme allow you chang Background Color, Primary Color and Secondary Color.

IMG

6. Subscribe Form

We recommend you to use Easy Forms for Mailchimp Plugin. You can download and read the user guide here: https://yikesplugins.com/plugin/mailchimp-wordpress-plugin/. You make new form and copy shortcode to input field at option panel in Hun Page Builder. You can also use other plugin, but maybe the form won't look as good as it should.

7. Labore Post Widget

Labore provides a widget for displaying recent posts and related posts. Go to menu Widgets, add "Labore Post Widget" to main sidebar. You can choose to display recent posts, related posts by tag or by category.

IMG