1.6 Theme Installation

1. At first, after purchasing this theme, please download the package from Themeforest. All you need to do that is move your mouse over your login name in the right top corner (of course after you`re logged in Themeforest) and then click Download. Here you will find all the items that you have purchased.

2. In the next step click the Download > Main File(s) button next to designthemes theme and save the package on your computer.

3. Please unpack the whole package after downloading it from Themeforest. In that package, you can find things like documentation.zip, spalab.zip, spalab-child.zip, and revolutionslider-export.zip files.

1.6.1. Theme Installation via WordPress

Kindly follow the steps given below for installing this theme from WordPress.

1. First get into "Wp-admin (Dashboard) > Appearance > Themes" and click "Add New" button thereby
2. So, you will be loaded to "Add Themes" page, where you need to hit "Upload Theme" button then.
3. Find and select "spalab.zip" (inside 'spalab-2.4.zip') file from your computer and click on "Install Now" to proceed installation.
4. Once if your theme is uploaded and installed, you will then activate it from "Appearance > Themes"
5. Then you will get a notification message to activate the required and recommended plugins: 'DesignThemes Core Features Plugin', 'Responsive Styled Google Maps', 'Contact Form 7', 'LayerSlider WP' and 'Revolution Slider'.
6. Once after the required plugins are activated, navigate to Settings > Permalinks, and select 'Post Name' in 'Common Settings' tab and save it finally.

1.6.2. Theme Installation via FTP

You can also install this theme through FTP server by using the following steps,

1. Log into your Hosting server space using any FTP software (applications like FileZilla) at first.
2. Extract the "spalab.zip" (inside "spalab-2.4.zip") file as you've downloaded.
3. Upload that extracted folder into your "wp-content / themes" directory.
4. Once if the theme is uploaded and installed, you need to activate it from "Appearance > Themes".
5. Then you will get a notification message to activate the required & recommended plugins: 'DesignThemes Core Features Plugin', 'Responsive Styled Google Maps', 'Contact Form 7', 'LayerSlider WP' and 'Revolution Slider'.
6. Once after the required plugins are activated, navigate to Settings > Permalinks, and select 'Post Name' in 'Common Settings' tab and save it finally.

Please take a look at the structure of the spalab-2.4.zip archive you've got after purchasing.

1.7 Folder Structure

• style.css - main style.css
• responsive.css - makes the template as responsive
• The skins folder - contains the css for predefined skins that comes with the template.
• The css folder - contains the css for all major browsers & for the font awesome. - ( Please ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours. )
• The images folder - contains all the images that are used in the stylesheets for the layout purpose
• The js folder - contains javascript files & plugins ( Which includes)

   

  1. Easing (easing.js)
  2. Modernizr (modernizr-2.6.2.min.js)
  3. Mean Menu (jquery.meanmenu.js)
  4. Isotope plugin (isotope.js)
  5. Nice Scroll (jquery.nicescroll.min.js)
  6. CarouFredSel plugin (jquery.carouFredSel-6.2.0-packed.js)
  7. Tabs (jquery.tabs.min.js)
  8. bx Slider plugin (jquery.bxslider.min.js)
  9. video ratio(jquery.fitvids.js)
  10. Smart Resize (jquery.smartresize.js)
  11. And custom js like (custom.js)

1.9 Plugin Installation

Once spalab theme is installed and activated, you will get a notification message in your WordPress admin telling you to install the required and recommended plugins. Once you have uploaded and activated the theme, install and activate the 'DesignThemes Core Features Plugin' immediately. All promoted features will work properly, after activating this plugin only.

Plugins packed with theme

• DesignThemes Core Features Plugin - comes by default with theme.
• LayerSlider WP - premium slider plugin created by Kreatura.
• Slider Revolution - premium slider plugin created by ThemePunch.
• Responsive Styled Google Maps - google maps plugin created by GreenLine.

Others plugins used by theme

• Contact Form 7 - contact from creator plugin created by iDeasilo
• WooCommerce - an e-commerce plugin created by WooThemes
• YITH WooCommerce Wishlist, YITH WooCommerce Zoom Magnifier - an e-commerce addon plugin created by Yithemes

Others plugins supported by theme

• All in One SEO Pack
• Metronet Reorder Posts
• WordPress SEO by Yoast

1.10 Theme Update

IMPORTANT: Before you go ahead with the update please check theme changelog and make sure you backup your old theme folder. Download it to your computer locally.

It is the best practice to backup both your files and database regulary and especially before making some serious updates. We recommend using free backup plugins for WordPress like WPOnlineBackup

Update Option 1. Update using WordPress uploader

1. Log into your Themeforest account and navigate to your downloads tab. Find the theme and download "Installable WordPress file".
2. Log into your wordPress website and go to Dashboard -> Themes
3. Activate a different theme. Delete the previous version of spalab and re-upload the new Wordpress Installable files that you have downloaded from Themeforest in the 1st step.
4. Once it uploads, choose to activate the theme.
5. Update the included plugins if you see a notification message letting you know the plugins have a new version.

Importing the Demo Content

Before running the importer, make sure that you have installed and activated the required and recommended plugins. You will see a message at the top of your dashboard if you have not yet done so.

• First of all, make sure that you have installed and activated the "DesignThemes Core Features Plugin" on your Wordpress.
• Goto Dashboard -> Appearance -> spalab Options -> Buddha Panel -> Import Demo
• Please be patient, as it may take few minutes to import everything. Once it is completed, you will receive a success message finally.

3. Menu creation

3.1 Menu Settings

The supports custom WordPress menus, with multiple levels of dropdown support for the main menu. There are 3 areas of the theme where you can assign a menu; the header menu, Footer Menu, and Top Menu. Each of these menu locations can have a custom menu assigned. Once a menu is created and assigned to the location, it will show up on the site. There are also several Theme Options to customize the menu. Please see below for the menu locations, how to create a new menu, and the menu Theme Options.

• Header Menu - this is main menu that appears in header area
• Footer Menu - this is the menu that appears in footer area
• Top Menu - this is the menu that appears in top area

3.2 Setting up the MegaMenu

Here are some points regarding mega menu and default menu.

• By default you will have option to diable menu text and menu link option for every menu.
• To enable mega menu please check the 'Use As Mega Menu' option and you can choose the number of column layout for mega menu ( available options 2 column, 3 column and 4 column ).
• You can add any page or custom link or any availalable pages as sub menu for mega menu.
• In sub menu you will have 'Enable Fullwidth' option which will make current menu and all its submenu to display in fullwidth.
• Also for every submenu you will have option to choose custom widget area in 'Display Widget Area', which is created in buddha panel ( Dashboard -> spalab Options ).
• You can also choose number of column(s) these custom widgets should occupy ( available options 2 column, 3 column and 4 column ).

3.3 How to Setup a New Menu

Step 1 – Navigate to Dashboard > Menus section of your admin sidebar.

Step 2 – Click the 'Create a new menu' link to make a new menu. Enter the name then click the 'Create Menu' button.

Step 3 – To add a menu item, select one of your created pages on the left hand side and click the 'Add to Menu' button. You can also add all kinds of different posts from the left side.

Step 4 – To add a custom menu item, enter URL and Link Text using 'Custom Links' box.

Step 5 – Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item.

Step 6 – After setting up your menu, scroll down to the bottom of the page to assign the menu to one of the 3 locations in the Theme Locations box.

Step 7 – Once its all done, make sure you click the Save button.

Header layout

To setup header layout, please navigate to "Dashboard > Appearance > Spalab Options > Buddha Panel > Appearance > Header" section and choose one of available layouts.

5.1. How To Create 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, then find the Page Attributes box on right side.

Step 3 – Set your Parent page. It's usually set to No Parent.

Step 4 – Set your page template from the Template dropdown list. See list of page templates below.

Step 5 – Content for your page goes in the editing field, use the Visual or Text editor. Page content is mainly built using Shortcodes. See the Shortcodes 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.

5.2.1. Default Page Options

• You can enable / disable the breadcrumb section here.
• You can switch between following available page layouts 'Without Sidebar', 'Left Sidebar', 'Right Sidebar' and 'Both Sidebar'. You can choose the custom widget area created using 'Widget Area' tab in Buddha Panel(Admin Section -> spalab) and enable / disable the default widget area.
• Enable / Disable comments at any time.

5.2.2 Blog Template

• Choosing 'Blog Template' in 'Page Atrributes' metabox will enable the 'Blog Options' metabox.
• You can enable / disable the breadcrumb section here.
• You can switch between following available page layouts 'Without Sidebar', 'Left Sidebar', 'Right Sidebar' and 'Both Sidebar'. You can choose the custom widget area created using 'Widget Area' tab in Buddha Panel(Admin Section -> spalab) and enable / disable the default widget area.
• You can choose the posts layout, control the excerpt length and number of posts to display per page.
• You can enable / disble author, category, tag, date, comment information at any time. You can exclude certain categories using 'Exclude Categories' dropdown.

5.2.4. Fullwidth Page Options

• Choosing 'Full Width Template' in 'Page Atrributes' metabox will enable the 'Fullwidth Page Options' metabox.
• You can enable / disable the breadcrumb section and comments for fullwidth section page here.

5.2.5. SEO Options

• You can add title, description and keywords for every single page using this option.
• When external plugins 'All in One SEO Pack' or 'WordPress SEO by Yoast' is activated, this theme 'SEO Options' will be removed automatically.

6.1 Blog Single Post Options

You can configure each single blog post with following options

• You can switch between following available layouts 'Without Sidebar', 'Left Sidebar', 'Right Sidebar' and 'Both Sidebar'. You can choose the custom widget area created using 'Widget Area' tab in Buddha Panel(Appearacne -> spalab) and enable / disable the default widget area.
• Enable / Disable the Comments and Featured Image options
• You can enable / disble author, category, tag, date, comment info at any time.

6.2 Portfolio Single Post Options

You can configure each single portfolio post with following options

• You can switch between following available layouts 'Fullwidth', 'Left Gallery' and 'Right Gallery'.
• You can configure Sub Title, Client Name and Website Link for each post
• Enable / Disable the Show Related Projects and Show Social Share
• You can add any number of images and videos for each post which will be displayed using bxslider in frontend.

7. Slider

7.1 Layer Slider

LayerSlider WP is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects, even from your WordPress posts and pages. It uses cutting edge technologies to provide the smoothest experience that's possible, and it comes with more than 200 preset 2D and 3D slide transitions. It has a beautiful and easy-to-use admin interface with supporting modern features like drag n'drop WYSIWYG slider builder, real-time previews, timeline view, Google Fonts and transition builder for custom animations. It's device friendly by supporting responsive mode, multiple layouts, touch gestures on mobile devices, and uses techniques like lazy load and conditional script loading for optimal performance. You can add any content into sliders, including images, text, custom HTML, YouTube and Vimeo videos or HTML5 self-hosted multimedia contents. It's also SEO friendly by allowing you to build semantic markup with custom attributes that search engines can index easily. LayerSlider comes with 13 built-in skins, and it has tons of options to entirely customize the Dashboard and behavior of your sliders at the smallest detail.

LayerSlider is external plugin which is included into theme. Because, for each product we purchase "Extended license" and that`s why we are able to include it into theme. This plugin works fine of course and if you want current slider version, you can always get directly from us. What you need to do, to get this slider is send us a request about it via contact form on our profile's page http://themeforest.net/user/designthemes (it is in the right bottom corner) and we`ll send you the current version.

7.1.2 Create A New Layer Slider

Step 1 – Click on the Layer Slider sidebar item in your admin section, then click the "Add New" button and give the slider a name.

Step 2 – The "Slider Settings" tab will open and allow you to set the general settings for your slider such as the width, height, responsive, full width, and more. Check out each tab.

Step 3 – Once you are done, click "Save Changes" to save the slider. Next you can add slides, see the information below.

Please Note – You can get sample sliders by clicking the "Import Sample Sliders" button. It's a good way to learn and see the different types of settings.

7.1.3 How to add Slides to your slider

Step 1 – Click on the "Slides" tab.

Step 2 – Slide #1 will already be created, add a background image for the slide, set thumbnails, transitions, links and more in the settings box above the slider preview window.

Step 3 – Each slide you make can have multiple layers to it. The layers show up below the slider preview window. Click "Add New Layer" create a new layer. An editing section will display once clicked.

Step 4 – The layer editing section has 5 tabs; Content, Transition, Link, Styles, Attributes. Content tab is where you add your content, Transition tab is where you set all the timings and animations, Link tab is where you can set the content to link, Styles tab is where you set custom styles, Attributes tab is where you can add custom id's or classes.

Step 5 – Click on the Content Tab and enter your text, image or video or custom HTML content. Then set your transitions, links, styles and attributes if needed.

Step 6 – Click the "Enter Preview" button to view a preview of the slider and layers.

Step 7 – When finished, click "Save Changes" to save it. Repeat process for more slides.

8.1 General Options

In this section you can set up some general options for your site. Please check below options available in this section,

• Logo - Upload logo that fit the best for your homepage layout
• Retina Logo - Upload logo that fit the best for your homepage layout (retina logo must be 2x larger than regular homepage logo)

The General Settings tab has options relevant to the entire site such as logo, favicon, default intro content, breadcrumbs, twitter, top bar settings and more.

8.2 Appearance

Appearance Settings - Here you can change the appearance of the theme. Please check below options available in this section,

• Header - Choose any of the available headers and enable cart icon for your site, if you wish.
• Menu - To Change the Menu section appearance and behaviour styles.
• Body - To customize the body portion of the theme like font, color & etc.
• Footer - To customize the footer portion of the theme like font, color & etc.
• Typography - To customize the font family, color, size for all headings from H1 to H6.
• Layout & BG - Here you can change the layout of your theme (Boxed or FullWidth). For Boxed layout - you can set the background by selecting the predefined patterns or upolad your custom image.

8.3 Color Options

Color Options - Here you can change the Colors.

Dashboard > Appearance > Spa Lab > Color Options

Set a custom solid color for your Full Width Shortcode by entering a hexcode into the Background Color field, or use our Color Picker tool to choose your desired color.

8.4 Skin Options

Skin Options - SpaLab comes with following predefined 20 color skins [ You can add your own skin :) ]

Dashboard > Appearance > Spa Lab > Skin Options

8.5 Integration Options

General - To place any code, that will be appear in header and portion of every page / post. Also you will have option to add cuctom css for your site.

Post - Single Post customization

With the help of this "Post integration" section , you can do the following things,

1. Setting up top and bottom code for individual post
2. You can enable Social share & Social bookmark module with easy customization option.

Page - Single page customization

You can do all the options like single post customization.

Portfolio - Single portfolio customization

You can enable social bookmarks in portfolio single page using the below options.

8.6 SEO Options

1. Title Delimiter - Please specify the symbol which will appear in title of the pages.
2. You can change the title formats of post, page, category, archive, tags, search and 404 pages. also you can change the order of the title contents.
3. Meta - To specify Meta data & other SEO elements
   1. You can generate automatic Canonical URLs for entire website
   2. You can exclude the archive, category and tag pages from indexing to avoid duplicate content.
   3. You can generate:
      1. Automatic description
      2. Meta keywords from the tag and category for posts.

Options related with SEO

• Google Analytics - paste your Google Analytics code to track your site
• Google Remarketing - paste your Google Remarketing code to add potential customers to Google list
• Use built-in SEO fields - if you are using external SEO plugin, then our inbuilt SEO options are turn off automatically.
• Meta Description - this is meta description for homepage but it`s also default description for each page added in Pages section.
• Meta Keywords - this is meta keywords for homepage but it`s also default keywords for each page added in Pages section.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.

8.7 Speciality Pages

Speciality Pages - Author, Category, Tag, Gallery, Search & 404 Page

Dashboard > Appearance > Spa Lab > Speciality Pages Options

Available Options:

1. You can choose page layout
2. You can choose post layout for Author, Category, Tag, Gallery & Search Page
3. Custom 404 Text for 404 Page
4. And Background settings for 404 Page

8.8 Footer Settings

Available Options:

1. Show / Hide Footer Section.
2. Columns Layout - To choose the layout style you need in the footer.
3. You can set copyright text and enable it to show in front end.

8.9 Widget Area

• Widget areas created here will be left sidebar or right sidebar or megamenu.
• After creating new widget area here with specific title, go to Dashboard -> Appearance -> Widgets here you can see the new widget area that you have created.
• Add widgets for that widget area.
• You can add these widgets for 2 locations
  • Page Sidebars - While choosing 'Left Sidebar' or 'Right Sidebar', you have this option 'Choose Widget Area - Left Sidebar' or 'Choose Widget Area - Right Sidebar'. Here you can choose the newly created widget area here.
  • Mega Menus - While creating menus you will have option called 'Display Widget Area', here you can choose the newly created widget area here.

8.10 Woocommerce

To get this option install WooCommerce plugin. And the plugin bundled with dummy data which can be imported to instantly give you a working store with products to test the different features WooCommerce has to offer.

Available Options:

1. No.of Products to show in main shop page.
2. Product Layout - 3 types of products layouts are there. (II Column, III Column & IV Column )
3. You can choose separate page layouts for product details, product category and product tag.
4. Also you will have option to enable disable shop widget area here.

Following plugins used to extend the woocommerce options

1. YITH WooCommerce Zoom Magnifier is that enables you to add a zoom effect to product images.
2. YITH WooCommerce Wishlist adds all wishlist features to your website.

8.11 Page Builder

You can anable / disable page builder for any post.

Go to 'Wp-admin(Dashboard) > Spalab > Page Builder'.

8.12 Responsive & Mobile

You can enable responsive option in "SpaLab > Responsive & Mobile > Make My Site Responsive"

And you can disable sliders by choosing the 'Disable Slider for Mobile Devices' option in "SpaLab > Responsive & Mobile"

8.13 Branding

Branding : You can replace buddha panel logo here

8.14. Company

Company : You can choose or setup your Business Hours (timings available) here.

Payment : You can choose the Currency and Payment Options here.

Notification : You can also modify the Notification info & settings here.

8.15. Backup

• Backup & Restore Options - Backup Options => helps you to take backup of current buddha panel settings and Restore Options => helps you to restore buddha panel settings from last backup.
• Transfer Theme Options Data - Help you to transfer buddha panel datas from one install to another. Copy the code shown in text area and paste it in the same place of another install and click Import Options.

9. Page Builder

What about DesignThemes Page Builder? With the help of this, web development is child's play. Page can be splitted on totally different sections where you can choose things like colors, backgrounds, layouts, sidebars, classes and much more. For each section you can add an items that you need.

Now with the new DesignThemes Builder, you can also do things like clone sections or items. So building websites is much faster and easier now, and you will love it!

To add an item inside section please click "Add item " button. After that you will see the right item added below. You can do few more things with that item added.

• You have a "Resizable Column" item along with all the default columns.
• You can delete Item/Section if you don`t need it by ˟ in right Item corner.
• You can also move any Item/Section by drag & drop simply.

9.1 Page Builder

spalab theme come with page builder which makes creation of page simpler and easier. To enable / disable page builder in post, page, portfolio, course, lesson and teacher navigate to Dasboard -> spalab(Buddh Panel) -> Page Builder tab. You can switch between Page Builder and WordPress default editor in any single post or page or portfolio or course or lesson or teacher at any time.

Overview

• 'WordPress Editor' button and 'spalab Page Builder' button is used to switch between WordPress default editor and Page Builder.
• If you keep the 'Enable page builder' option active while saving, then everytime this page will be loaded by keeping page builder active.
• Use 'Clear All' button to completely clean the builder area
• 'Create Sample Layout' button is used to save the existing modules in builder area to separate layout. After updating the page created layout will be listed in 'Sample Layouts' tab.
• We have 11 tabs of modules consisting of columns('Columns'), modules('General', 'Unique', 'Others'), widgets('WP Widgets', 'spalab Widgets', 'BuddyPress Widgets', 'Events Widgets', 'WooCommerce Widgets', 'Sensei Widgets') and sample layouts('Sample Layouts').

Column Options

Every column comes with 3 types of options. They are,

1. Settings - It is used add additional CSS class for this column alone.
2. Clone - Click this button to clone the column along with every modules added inside. Those cloned column will be added immediately after current column.
3. Delete - Used to delete the column completely along with its settings.

Fullwidth Section or Fullwidth Section Video

These sections comes with lot of options in 'Settings' button to configure fullwidth section. Some of the available options are,

1. Fullwidth Section - Bacground Color, Background Image, Parallax Effect, Background Repeat, Background Position, Padding Top, Padding Bottom, CSS Class, etc,.
2. Fullwidth Section Video - MP4, WEBM, OGV, Poster Image, Background Image, Padding Top, Padding Bottom and CSS Class.

Module Options

Every module comes with 5 different types of options. They are,

1. Edit - Clicking this button will open a sliding panel at very top of the builder area which contains options to configure those modules.
2. Clone - Click this button to clone the module along with its settings. Those cloned modules will be added immediately after current module.
3. Delete - Use this delete button to delete the module along with its settings.
4. Show / Hide - Use this button to enable or disable this module. If its disabled then that module will not be shown in frontend but all the settings of that module will be preserved, you can enable that module any time.
5. Resize - Its just a symbol to represent that this module can be resized to any width. Making width too smaller or too larger may collapse the modules design.

Note : By default every module can be resized, but it cannot be resized inside another column or fullwidth section. While resizing note that making width too smaller or too larger may collapse the modules design.

Resizable Column

Resizable Column has all options similar to normal Column options. This resizable column cannot be placed inside the Fullwidth Section

Sample Layouts

spalab theme comes with few sample layouts which can be acessed simply clicking the module. Now your builder area will be loaded with all the modules of that sample layout, now you can just update the content, images, etc, as you wish.

10. Blog

10.1 How To Create A Blog Post

• Login to the WordPress dashboard by visiting www.yourdomain.com/wp-admin
• Click on Add New from the Posts menu once you are inside the WordPress admin panel
• Give the post a nice title.
• Add the post content in the content section using either Page Builder or WordPress Editor.
• Add relevant tags for this post.
• Add the post to the relevant category (Create a category if a relevant category doesn't exist, in Dashboard -> Posts -> Categories).
• Also you have option to choose Template page for this post.
• You can also switch between following page layouts Without Sidebar, Left Sidebar, Right Sidebar.
• If you wish you can disable feature image for this post.
• Finally publish the post by hitting Publish button.

11. Portfolio

11.1 How To Create A Portfolio Item ?

• Login to the WordPress dashboard by visiting www.yourdomain.com/wp-admin.
• Click on Add New from the Portfolios menu once you are inside the WordPress admin panel.
• You can also choose Template pages for your portfolio item.
• Also you can add Sub Title for the portfolio and also you can control >Social Share for this portfolio.
• You can add any number of images for portfolio gallery.
• Publish the portfolio by hitting the Publish button.

14. Footers

14.1 Footer Options

Navigate to Dashboard -> Dashboard -> spalabOptions -> Layout -> Footer, where you can find complete footer options.

• Enable Footer - Option to enable footer for your site.
• Column Layout Footer or Shortcode Section Footer - You can switch bewteen these 2 footers using Enable Shortcode Section
  1. Column Layout - 11 column layouts and 7 footer types are available.
  2. Shortcode Section - You can add any type of shortcode here, for your footer section.
• Background Image - Add background image for your footer, also choose background posistion and repeat option for the image.
• Copyright - You can add copyright text for your footer and also you can disable it anytime.
• Footer Menu - Show / hide footer menu here.
• Content - Content added here will be displayed along with copyright text.

14.2 How to add widgets to footer ?

• Once you have enabled Column Layout for footer using above options, than navigate to Dashboard -> Appearnce -> Widgets.
• Here you can find new widget areas created with the name of Footer Column, suffixed with columns count.
• Drag and drop the widgets from left hand side and configure widgets as per your needs.
• Now save the widgets and look at the frontend for your newly created widgets.

14.3 Widgets

Spa Lab Widgets

This SpaLab theme comes with 4 custom widgets as following,

1. SpaLab Posts
2. SpaLab Portfolio
3. SpaLab Twitter
4. SpaLab Flickr
5. SpaLab Mailchimp