Beautyspa Premium Documentation

BeautySpa Premium Documentation

# 0 Comment

BeautySpa is a multi-purpose responsive theme coded & designed with a lot of care and love. You can use it for your business, portfolio, blogging or any type of site.

Try BeautySpa Premium Theme: DEMO HERE

Key Contents

1. Theme installation

2. Setup Home Page

2.1 General Settings

2.1.1 Enable Front Page
2.1.2 Add Logo
2.1.3 Add Favicon
2.1.4 Header Background Image
2.1.5 Google Analytic Code & Custom CSS Editor

3. BeautySpa slider

3.1 Customize BeautySpa Slider

4. BeautySpa Service

4.1 Customize BeautySpa Service

5. BeautySpa Portfolio

5.1 Customizing BeautySpa Portfolio

6.  BeautySpa Blog

7. BeautySpa Testimonial

7.1 Customize BeautySpa Testimonial Section

8. BeautySpa Member

9. BeautySpa Clients

9.1 Customizing BeautySpa Client Section

10. Customize BeautySpa Team

11.BeautySpa Facts and Skills

11.1 Customizing BeautySpa Facts and Skills

12. Contact Setting

13. Appointment Setting

14. Callout Setting

15. Skin Layout Setting

16. Social Icon Setting

17. Footer Setting

17.1 Widget Area

17.2 Custom Footer Bar

18 Home Page Manager Setting

19. Custom URL Setting

20. Theme Templates

21. Maintanance Mode Setting

21.1 Slider Type

21.1.1 Add Background Image

21.1.2 Welcome Video Background

22. Short-codes

22.1 Accordion

22.2 Collapse

22.3 Alert

22.4 Button

22.5 Column

22.6 Drop-Caps

22.7 Heading

22.8 Panel

22.9 Popover

22.10 Progress Bar

22.11 Tabs

22.12 Tool Tip

22.13 Portfolio

22.14 Blog

Now, we are going through installation, configuration and publish theme. Follow the step by step guide:

1. Theme Installation

First, download your theme package from .your account

Upload Theme package zip folder using theme installer wordPress option Otherwise Any FTP (FillZilla)

We recommend you upload theme zip package using FTP( FillZill/Bitwise), In your host-server-directory\wp-content\themes\

After that Activate theme into WordPress site Admin Dashboard -> Appearance ->themes.

Now the theme is successfully installed on our site, step up to the next step.

2. Setup Home Page

Our theme home page has 9 different sections. These sections can be customized with the theme options page.

You can access theme options page at Admin Dashboard → Appearance → Theme Options.

A look of Theme Options page is Here.

Now all settings are explained one by one.

2.1 General Settings

In this section, you can enable front-page, add a logo , add a background image to breadcrumbs, add custom CSS, add google analytic code etc.

Please go to Admin Dashboard → Appearance → Theme Options → Home Options →General Settings.

Please refer below image for Quick Settings.

2.1.1 Enable Front-page

To Enable front-page  go to Admin Dashboard → Appearance → Theme Options → Home Options →General Settings.

And slide Home-Page or Custom Page to ON.

To add Logo  go to Admin Dashboard → Appearance → Theme Options → Home Options →General Settings.

Now click on Custom Logo Button and upload your logo image or select from Media Library.

Follow image

You can further customize the logo’s height and width from Logo Height and Logo Width settings.

NOTE : Logo height is Set to 60px for fixed header, if fixed header is enabled and when you scroll the page, Logo will set to 60px height in fixed menu.

2.1.3 Add Favicon

To add Favicon  go to Admin Dashboard → Appearance → Theme Options → Home Options →General Settings.

Now click on Favicon Icon Button and upload your logo image or select from Media Library.

To add Header Background Image go to Admin Dashboard → Appearance → Theme Options → Home Options →General Settings.

And Click on Upload image in Header Background Image setting.

Theme Support Custom Header functionality.

To add Background Image via Custom Header, slide Custom Header Background button to ON save the changes.

Now go to Admin Dashboard → Appearance → Customize→Header Image and customize header image.

Theme supports Fixed Header functionality.

To add Fixed Header via Custom Header, slide Fixed Header button to ON save the changes.

Theme supports Show Search Bar in Header functionality.

To add Search Bar in Header via Custom Header, slide Show Search Bar in Header button to ON save the changes.

2.1.5  Google Analytic Code & Custom CSS Editor

Google Analytic Code and custom CSS can be added to theme using Theme’s  General Settings.

Note:Please add Google Analytic Code without script tag. Please don’t use >, < like symbol in custom CSS editor.

3. BeautySpa  Slider

To add a slide to BeautySpa Slider.

Go to Admin Dashboard →BeautySpa Slider →Add New Slide and fill related details.

For a quick view, please follow below image.

3.1 Customize BeautySpa Slider

Theme Slider have two types.

1. Slider Type

2. Welcome Video Background

3.1.1 Slider Type

You can customize BeautySpa Slider in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Home Options →Slider Settings.

In Slider Settings, you can set

  1. Auto-play ON/OFF
  2. Enable Pause On Hover.
  3. Set interval time.
  4. Set slider to rotate all slides.

 3.1.2 Welcome Video Background

You can customize BeautySpa Slider in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Home Options → Slider Settings → Slider Type.

In Slider Settings, you can set

  1. Auto-play ON/OFF
  2. Enable Pause On Hover.
  3. Set interval time.
  4. Set slider to rotate all slides.

Common Settings-

  1. Set slider Title Animation,
  2. Set Sub Title Animation,
  3. Set Button Animation.

3.1.2.1 How To Add Embedded Video Url

For a quick view, please follow below image.

Please add this video code into video embedded URL.

4. BeautySpa Services

To add Service to BeautySpa Services.

Go to Admin Dashboard → BeautySpa Services → Add New Service and fill related details.

For a quick view, please follow below image.

Note: To show services on the homepage you have to add either font awesome icon or feature image if you do not add this field, Service will not show on homepage.

4.1 Customize BeautySpa Services

You can customize  BeautySpa Services in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Home Options → Service Settings.

In Service Settings, you can set

  1. Service Heading
  2. Service Description
  3. Service Template
  4. Service Column

Please follow below image for Quick Service Settings.

5. BeautySpa Portfolio

To add Portfolio to BeautySpa Portfolios.

Go to Admin Dashboard  → BeautySpa Portfolios→ Add New Portfolio and fill related details.

For a quick view, please follow below image.

You can customize  Portfolio in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Home Options → Portfolio Settings.

In Portfolio Settings, you can set

  1. Portfolio Section Title
  2. Portfolio Section Description
  3. Portfolio Column Layout
  4. Set Portfolio Template

Please follow below image for Quick Portfolio Settings.

6. BeautySpa Blog

You can customize  Blog in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Home Options → Blog Settings.

In Blog Settings, you can set

  1. Blog Section Title
  2. Blog Section Description
  3. Blog Column Layout
  4. Set Blog Column
  5. Set AutoPlay
  6. Set Rotation
  7. Set Category

Please follow below image for Quick Blog Settings.

7. BeautySpa Testimonials

To add Testimonial to BeautySpa Testimonials.

Go to Admin Dashboard → BeautySpa Testimonials → Add New Testimonial and fill related details.

For a quick view, please follow below image.

7.1 Customize BeautySpa Testimonial Section

You can customize BeautySpa Testimonial Section in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Home Options →Testimonial Settings.

In Testimonial Settings you can set

  1. Testimonial Section Title
  2. Testimonial Description
  3. Testimonials Background
  4. Set AutoPlay
  5. Set Time Interval

Please follow below image for Quick Testimonial Settings.

8. BeautySpa Members

To add Member to BeautySpa Members.

Go to Admin Dashboard →BeautySpa Members →Add New Member and fill related details.

For a quick view, please follow below image.

9. BeautySpa Client

To add Member to BeautySpa Client.

Go to Admin Dashboard →BeautySpa Client →Add New Client and fill related details.

For a quick view, please follow below image.

9.1 Customize BeautySpa Client Section

You can customize BeautySpa Client Section in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Home Options →Client Settings.

In Client Settings, you can set

  1. Client Section Title
  2. Client Description
  3. Set Rotation

Please follow below image for Quick Client Settings.

client settings

10. Customize BeautySpa Team

You can customize Team in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Home Options →Team Settings.

In Team Settings, you can set

  1. Team Section Title
  2. Team Section Description
  3. Set Team Background

Please follow below image for Quick Team Settings.

team settings

11. BeautySpa Facts and Skills

You can customize Facts And Skills in Theme Options Settings.

Go to Admin Dashboard →BeautySpa Facts And Skills → Add New Facts And Skills and fill related details.

For a quick view, please follow below image.

facts or skills

11.1 Customize BeautySpa Facts And Skills Section

You can customize Facts And Skills in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Facts And Skills Settings.

In Facts And Skills Settings, you can set

  1. Facts And Skills Section Title
  2. Facts And Skills Section Description

Please follow below image for Quick Facts And Skills Settings.

facts and skills

12. Contact Setting

You can customize Contact in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Contact Settings.

In Contact Settings, you can set

  1. Add Mail
  2. Set Contact Form Title
  3. Set Contact URL
  4. Add Placeholder Setting
  5. Add Contact Details

Please follow below image for Quick Team Settings.

contact options

Note: All mails, of contact us templates and Home Contact section, are mailed to the mail id that you set in contact mail option.

13. Appointment Setting

You can customize Appointment in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Appointment Settings.

In Appointment Settings, you can set

  1. Add Appointment  Contact Title
  2. Add Appointment   Description
  3. Set Appointment in Footer
  4. Set Appointment Contact Background

Please follow below image for Quick Appointment Settings.

appointment options

14. Callout Setting

You can customize Callout in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Callout Settings.

In Callout Settings, you can set

  1. Add Callout icon
  2. Add Callout Title
  3. Set Callout Span Title
  4. Set Callout Description
  5. Set Callout Button Text
  6. Set Callout Button Link
  7. Add Callout Background

Please follow below image for Quick Callout Settings.

call-out options

15. Skin Layout Setting

You can customize Skin Layout Setting in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Skin Layout Settings.

In Skin Layout Setting, you can set

  1. Set Switcher
  2. Set Theme Color
  3. Set Theme Layout
  4. Set Custom Background On/Off
  5. Set Background Image

Please follow below image for Quick Skin Layout Settings.

skin layout

16. Social Icon Setting

You can customize Social Icon  Setting in Theme Options Settings.

Go to Admin Dashboard → Appearance → Theme Options → Social Icon Settings.

In Social Icon Settings, you can set

  1. Set Icon On Header
  2. Set Icon On Footer
  3. Social Icon Link Setting

Please follow below image for Quick Social Icon Settings.

social icon options

Note: All social icon are set to open in new tab.

17. Footer Setting

Theme Footer have two Parts.

  1. Widget Area
  2. Custom Footer Bar

 17.1 Widget Area

Theme Footer Widget Area have default Widgets.

Please go to Admin Dashboard → Appearance → Widgets.

And Drag-Drop Widget to Footer Widget Area to add Footer Widget Area.

Please follow below image for Quick  Settings.

footer widgets

17.2 Custom Footer Bar

In custom Footer Bar there is two part

  1. Social Icons: Social Icon Can be Customize from Social Media Options.
  2. Credit Text: This Part can customize from Footer Options.

Please go to Admin Dashboard → Appearance → Theme Options → Footer Options.

In Footer Options Settings, following settings can be customized

  1. Set Footer Text
  2. Set Footer Link’s Text
  3. Set Footer Link

Please follow below image for Quick Footer Settings.

footer options

18. Home Page Manager Setting

Using Home Page Manager settings, sections on Home Page can be remove and move.

BeautySpa slider is always on the Top.

To access Home Page Manager go to Admin Dashboard → Appearance → Theme Options → Home Page Manager.

Here section can be enabled/disable and move using DRAG N DROP.

Please follow below image for Quick  Settings.

home page manager

19. Custom URL Setting

BeautySpa provides an option to use your own custom URL for custom post types.

You can use custom URLs at Admin Dashboard → Appearance → Theme Options →Custom URL’s Options.

You have to refresh Permalinks to apply these changes. Please change your URLs here, save the change. Then go to Admin Dashboard → Settings→ Permalinks.

Here change the permalink to another format and save. Now revert to your permalink type and again save.

In Custom Settings, you can set

  1. Add Service Custom URL
  2. Add Portfolio Custom URL
  3. Add Member Custom URL

Please follow below image for Quick  Settings.

custom URL

Note: After changing custom URL you have to re-save permalink setting. To re-save permalink setting please go to Admin Dashboard >> Settings >> Permalinks and click on save button.

20 Theme Templates

BeautySpa Premium Theme  provides about 22 templates.

There is some Details of them

20.1 Page Templates

  1. Default Template (Page With Right Sidebar)
  2. Page With Left Sidebar
  3. Full Width Page

20.2 Blog Templates

  1. Blog With Left Sidebar
  2. Blog Masonry Full Width
  3. Blog Masonry 2 Column
  4. Blog Masonry 3 Column
  5. Blog Masonry 4 Column
  6. Blog Full Width

20.3 Contact Us Templates

  1. Contact Us 1
  2. Contact Us 2

20.4 About Us Templates

  1. About Us 1
  2. About Us 2

20.5 Portfolio Templates

  1. Portfolio Gallery
  2. Portfolio 2 Column
  3. Portfolio 3 Column
  4. Portfolio 4 Column
  5. Portfolio1
  6. Portfolio Vertical

20.6 Service Templates

  1. Service Template 1
  2. Service Template 2
  3. Service Template 3

You can see them at BeautySpa Theme Demo

21. Maintenance Mode

BeautySpa maintenance Mode have Two Types.

1. Slider Type

2. Welcome Video Background.

21.1 Slider Type

You can Enable/Disable Maintenance Page at Admin Dashboard → Appearance → Theme Options → Maintenance Mode Option.

In Maintenance ModeSettings, you can set

  1. Set Maintenance Mode On/Off
  2. Add Maintenance Mode Heading
  3. Add Site Introduction
  4. Set Social Icon(Social icons are set in Theme Option → Social option)
  5. Set Date
  6. Set Background Type
  7. Set Background Opacity

Please follow below image for Quick  Settings.

maintenance mode

21.1.1 Add Background Image

Now click on Custom Logo Button and upload your logo image or select from Media Library.

After Select Image Follow Below Image.

35

21.2 Welcome Video Background

You can select background video slider to follow below image.

Maintanance Mode

If you add Youtube URL in Settings, then video background will be shown. If you want to show Image background only, please not provide Video URL.

Please follow below Image to get your Youtube Video URL.

youtube URL

22. Short-codes

Theme provide many shortcodes.

You can see them in below Image.

To use shortcode please follow Image.

shortcode selector

It’s simple to use.

Click on Shortcode Button →Select Short-code type from Option→ Provide Relative Information→ Click on insert

Please below Images.

accordian

22.1 Accordion

add accordion

After clicking on insert button You found shortcode, As given in below image.

accordion

copy this shortcode and paste in a page where you want to show shortcode.

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/accordian/

22.2 Collapse

For add collapse follow below image.

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/collapse/

22.3 Alert

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/alerts/

22.4 Button

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/buttons/

22.5 Column

add column

22.6 Drop-Caps

add drop

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/drop-caps/

22.7 Heading

add heading

22.8 Panel

add panel

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/panels/

22.9 Popover

add popover

See Demo Here http://demo.weblizar.com/beautyspa-premium/popovers/

22.10 Progress Bar

add progressbar

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/1823-2/

22.11 Tabs

add tab
add tab1
add tab2

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/tabs/

22.12 Tool Tip

add tooltip

See Demo Here http://demo.weblizar.com/beautyspa-premium/popovers/

22.13 Portfolio

add portfolio

See Demo Here http://demo.weblizar.com/beautyspa-premium/shortcodes/portfolio/

22.14 Blog

add blog

Inquiry