Documentation

Introduction

Thank you for purchasing BeautySpot!
This documentation should help you to set up theme on your WordPress installation.

If you need further assistance with this theme, don't hesistate to contact me through ThemeForest.

Installation

Downloading Complete Package

Before diving into installation, make sure that you have downloaded complete package from ThemeForest. You can find it under Your Profile / Downloads.

It is advisable to check the "Get notified by email if this item is updated" option so the ThemeForest will notify you whenever the new version of the theme will be available.

Also, don't forget to rate please. It will help to keep this theme updated.

Installing Theme To WordPress

Now unzip the complete package from the previous step. You should see couple of folders inside it.

We will install the main theme first. Open the THEME folder which contains beautyspot.zip file. Go to wp-admin / Appearance / Themes

Click on Add New and then on Upload Theme.

Select the beautyspot.zip file from THEME folder and install it.

Do not click on Activate button yet, we will install the Child Theme first. Please read this article to learn more about child themes and why you should always use them if possible.

Again, go to wp-admin / Appearance / Themes and click on Add New and then Upload Theme button. This time select the beautyspot-child.zip file from Child Theme folder. After the successful installation, click on the Activate button.

After activation, you will see a notice about recommended plugins. You should install all of them. So click on Begin installing plugins.

Check all plugins, in the Bulk Actions selectbox choose Install and click on Apply.

Now you have them installed, but not activated. To do so, go to wp-admin / Plugins, check new plugins, select Activate from the Bulk Actions selectbox and hit Apply.

That's it. If you want to use also the shop functionalities, you will need to install the WooCommerce plugin. Simply go to wp-admin / Plugins / Add New and search for WooCommerce.

Theme Options

Before diving into content creation, we will cover the Theme Options. You can set it manually or import the demo settings. Please note that not all settings from the demo will be imported, things like images or Twitter App credentials must be added manually.

Import Settings

Open the theme_options.txt file in the Demo Data folder (from package), copy its content and go to wp-admin / Theme Options / Import / Export.

Click on Import from file, paste the copied data to the input and hit Import.

Manual Setup

All settings under Theme Options should be self-explanatory by their name or description, but let's take a look at some basic ones.

General Settings

You can upload your logo with Site Logo option. Its width should be around 300px or less (for example, logo in the demo is 290px wide).

It is advisable to upload also the Retina version which should be exactly twice as large as the standard version. You can use PSD logo templates for both versions which can be found in Logo folder in the theme package.

Don't forget to set Logo Width option to the width of the standard version of the logo.

Add your social links to the corresponding fields and reorder them as you want.

Main Sidebar Settings

Main Sidebar is basically the header of the page. You should at least set the Sidebar Background Image. It is recommended to use vertically oriented image with width about 1200px and height about 1600px.

Sidebar Panel is the bottom part of the Sidebar with Reservation Form button and contact info.

If you want to add opening hours to one of the Contact Info Text fields, switch editor to Text and use the following code:

<dl><dt>Mo. - Fr.:</dt><dd>10:00 - 16:00</dd><dt>Sa.:</dt><dd>10:00 - 14:00</dd><dt>Su.:</dt><dd>Closed</dd></dl>

Footer Settings

Same as in Main Sidebar Settings, you should at least upload your own background image here using Bottom Panel Background Image option. The optimal resolution for it is about 1400px x 600px.

Please note that the Bottom Panel won't be displayed if it doesn't contain any widgets. You can add widgets to it under wp-admin / Appearance / Widgets.

Styling

Here you can choose a predefined color scheme or enable your own. You will learn how to create a custom scheme in How To chapter.

Typography

This section allows you to choose primary and secondary fonts. Please note that even if you want to use the default fonts, make sure that all fields have a value for fonts to load correctly. See the image below how it should look.

Custom Sidebars

You can create up to 10 custom sidebars which can be displayed in any page which uses With Sidebar template. You can learn more about using custom sidebars in How To chapter.

Reservation Form

Reservation Form is basically a special type of contact form. First, you need to create a form in wp-admin / Contact. You can use the template which can be found in reservation-form.txt file in Demo Data folder. Then you will paste a shortcode of that form in Form Shortcode field.

You will learn more about creating a Reservation Form in How To chapter.

Twitter

Twitter Feed can be displayed in footer section, but you will need to set it up first. You must create a Twitter App (follow this tutorial to learn how) and copy its credentials to corresponding fields.

Don't forget to add your Twitter username to Username field (you can add any Twitter username there, it don't have to be an username under which you have created the app).

Adding Content

Importing Demo Content

If you don't have any own content on your Wordpress site yet, you can import the demo content under wp-admin / Tools / Import / WordPress.

Use the demo_content.xml file located in Demo Data folder to do so.

Using Shortcode Generator

Shortcode Generator can be opened from button group above the Visual Editor by clicking on Add Shortcode button.

Usage of the Shortcode Generator is very intuitive, just select the desired shortcode with Choose shortcode from the list selectbox, set parameters and hit Add Shortcode button. The shortcode will be placed to the position of the cursor in the visual editor.

Using Page Builder

Page Builder can be accessed through wp-admin / Appearance / Page Builder.

You can insert your template created in Page Builder by clicking on Add Template button above Visual Editor.

You can also use a Shortcode Generator inside Page Builder block by clicking on the last button of the editor toolbar.

Please keep in mind that when you are using the visual editor inside Page Builder block, the generated code can contain some extra HTML elements which can cause issues on the front-end. If something like this happen, switch the editor to HTML mode and manually clean up the additional SPAN or BR tags in the code.

Pages Tutorial

This chapter will show you how to create some of the pages seen in demo. If you don't want to do it manually, you can just import the XML data. But if you want to see how things work, you should really read this chapter.

Blog Page

We will start with the blog page, which is the core of any WordPress based website.

Add a new page and name it Blog. Leave the content blank but don't forget to set Template to With Sidebar (if you want to display sidebar on blog pages). You can also change the Sidebar Settings if you wish. Publish the page when ready and that's it.

Front Page

The Front Page (or home page) is the most complex one. We will use a Page Builder to create it.

But let's start by adding a new page first. Name it Front Page and set its Template to Fullsize w/o Title. Now Publish it, we will add the content later.

Now we will prepare a slider for the Front Page. Let's head to wp-admin / Slides and click on Add New Slide button. Give it some meaningful title as it will be displayed under the slider in the list of slides.

You can use the combination of the H1 and H3 tags for the content and set the vertical align in Slide Settings (I recommend to set it to Middle).

The last step is to upload Featured Image which will be used as the background image for this slide. That's all, you can hit the Publish button.

You can create as many slides as you need, you can even group them under various Sliders (wp-admin / Slides / Sliders), which works in the same fashion as Categories for the Posts.

Now it's time for the Page Builder. Go to wp-admin / Appearance / Page Builder and create the first template. Let's call it simply FP to save space as we will be creating several templates just for the Front Page. So fill the Template Name field and hit the Create Template button.

You are now free to drag & drop blocks to this template. We will start with Slider block. If you grouped your home slides under a Slider, choose that slider in the Slider field, otherwise leave it on None, so all slides will be used. Beacause our Front Page uses Fullsize template, check the Fullsize option. You can set the autoplay speed for the slider with Interval option or leave it on 0 to disable autoplay. The remaining options - Block Offset and Custom Class are same for each block. You can set the left offset of the whole block with the first and define a custom class with the second. Custom class can be used for adding some custom styles in Custom CSS.

Now minimize the block and save the template. We will create a new template for the Services Section. Let's name it FP Services. Save it and drag the Carousel block to it. Let's set few options first. Wrap in Container should be checked and Items per slide selectboxes should be set to 4 4 3 2 1. This block offers also the InView Animation option.

Now it's time for adding the items. First item is already defined, you can expand it by clicking on the arrows icon. First give it a name, then click inside Content text editor and hit Shortcode Generator button.

Choose a Service shortcode, set parameters and click on Add Shortcode button.

Now move the cursor above the [/lsvr_service] tag and write your description of the service. You can add new item by clicking on Add New button and repeat the whole procedure.

When you are finished with adding services, save the template and copy its shortcode.

Now go back to the FP template and drag the Section block. Set all parameters and paste the shortcode of the FP Services to the Content field. Don't forget to check the Fullsize option and save the template.

Next is the the Gallery Section. Again, we will create a separate template. Let's name it FP Gallery. We will use the Gallery block. Check the Display as Carousel option and set Items Per Slide options to 4 4 3 2 1. Add at least five images (with Add New button), save the template and copy its shortcode.

Now open the FP template, drag a new Section block, set all parameters and insert the FP Gallery template shortcode to the Content field. Don't forget to check the Fullsize option.

Next one is the Blog Section. First make sure that you have already created some blog posts. If yes, drag the Section block, fill all parameters and click into Content text editor. Open the Shortcode Generator and choose the Articles shortcode. Don't forget to check the Fullsize and Wrap Content in Container options and save the template.

The Clients Section requires again its own template. Let's name it FP Clients. This template will contain single Carousel block. Check the Wrap in Container option and uncheck the Transparent Background option. All Items Per Slide options should be set to 1. Now we will add some items. For each item, click into Content field and open the Shortcode Generator. Choose the Testimonial shortcode and set all parameters.

Now copy the shortcode of the FP Clients template and open the FP template. Drag a Section block, fill all parameters and paste the FP Clients template shortcode to the Content field. Don't forget to check Fullsize option.

The last one is the Brands Section. It also needs a separate template. We will name it FP Brands and it will contain Carousel block. Check the Wrap in Container option and set Items per Slide options to 4 4 3 2 1. Add the Image shortcode for each item's Content field. You can also add textalign-center to the Custom Class field of the Carousel block.

Copy the shortcode of FP Brands template and open the FP template. Drag the Section block, fill all parameters and paste the FP Brands shortcode to Content field. Don't forget to check the Fullsize option.

Save the template, head to wp-admin / Pages / Front Page and click on Add Template button.

Now select the FP template and click on Insert Template.

That's it, you have created the Front Page. Now go to wp-admin / Settings / Reading, set the Front page displays option to A static page (select below) and set Front page to our Front Page and Posts page to our Blog

Now you can check the front-end to see if the Front Page is displaying correctly and review the previous steps if something went wrong.

Menus

You can now create the menus. Go to wp-admin / Appearance / Menus and create menu named Main Menu. Add both Front Page and Blog pages to this menu and set Header Menu in Theme locations.

Create the Footer Menu in the same way, but choose Footer Menu in the Theme locations instead.

Contact Page

We will create the Contact Page by using only the Shortcode Generator. The first shortcode we will use will be Section.

We nest the Grid Row shortcode inside it and there we nest the Grid Column shortcode with Size 8. This column will contain an embed map. Get the embed code from maps.google.com, it should look like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3304.224586276013!2d-118.37727137971396!3d34.089386635837336!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bebd1edae66f%3A0x1409fe931a9d4506!2sSunset+Strip!5e0!3m2!1sen!2s!4v1402502604876" width="600" height="450" frameborder="0" style="border:0"></iframe>

Let's edit this code a little bit. Remove the width and height attributes and add a c-map class. Also remove the frameborder and style attributes. The final code will look like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3304.224586276013!2d-118.37727137971396!3d34.089386635837336!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bebd1edae66f%3A0x1409fe931a9d4506!2sSunset+Strip!5e0!3m2!1sen!2s!4v1402502604876" class="c-map"></iframe>

Now switch the visual editor to the Text (HTML) mode and paste the map code inside lsvr_grid_column shortcode.

You can switch the visual editor back to Visual mode and move cursor to the new line after [/lsvr_grid_column] shortcode.

Add another Grid Column shortcode, this time with Size 4. You can insert some additional contact info to shis column, like address and opening hours. You can use Icon Block shortcode for those blocks.

To add the opening hours, first insert the Icon Block shortcode, then switch to Text mode and use the following snippet:

<dl><dt>Mo. - Fr.:</dt><dd>10:00 - 16:00</dd><dt>Sa.:</dt><dd>10:00 - 14:00</dd><dt>Su.:</dt><dd>Closed</dd></dl>

The first section is completed. Switch back to Visual mode, move cursor to the new line after the [/lsvr_section] section and insert a new Section shortcode.

Again, insert the Grid Row shortcode and Grid Column shortcode with Size 8. This column should contain the Contact Form. Save the page and head to wp-admin / Contact. Use the template from contact_form.txt file located in Demo Data for the Form field and contact_form_message.txt template for the Message body field.

You can use the following snippets for Messages.

<p class="c-alert-message m-success"><i class="ico fa fa-check-circle"></i>Your message was sent successfully. Thanks.</p>

<p class="c-alert-message m-warning"><i class="ico fa fa-exclamation-circle"></i>Validation errors occurred. Please confirm the fields and submit it again.</p>

Save the form, copy its shortcode and head to wp-admin / Pages / Contact page.

Paste this shortcode to the column we created a few moments ago.

Now add a new Column after the [/lsvr_grid_column] tag with Size 4. This column can contain various additional info, for example button which will open the Reservation Form.

That's all, save the page and you can add it to your menus under wp-admin / Appearance / Menus. The whole code of this page can be found in contact_page.txt file in Demo Data folder. Switch the editor to Text mode when you will be pasting the code.

Services Page

We will use the combination of Page Builder and Shortcode Generator for the Services Page. Let's head to wp-admin / Appearance / Page Builder first, where we will create a separate template for each service category.

Create the new template named SC 1 (Service Category 1) and drag a Row block to it. Then drag a Text block inside this row and insert an Image shortcode (with the image of the category) to the Content field of the Text block. The Image shortcode should have a rounded Custom Class and the Text block should have a textalign-center margin-sides-auto max-width-180 custom classes.

Now minimize the Text block and resize it approximately to the 1/6 size of the row (move the cursor over the right edge of block).

Drag the Tabs & Accordion block right after the Text block. Set the Tabs Style either to Accordion or Toggle and add as many items as you want. Each item represents a service.

Once finished, minimize the Tabs & Accordion block and resize it to 5/6 size of the row.

Create a template for each service category in the same way as for this one.

When finished, create a Services page. Now we will add a Section shortcode for each service category and insert a corresponding SC template into it.

Let's add a "bonus" Section shortcode at the end which will contain a CTA Message shortcode with some additional info.

Again, we will use the combination of Page Builder and Shortcode Generator. Open the wp-admin / Appearance / Page Builder, create new template (let's call it Gallery) and insert the Gallery block.

Expand the newly added Gallery block and click on Add New button to add new gallery item.

Now expand the new gallery item with arrows icon on its right, click on Upload button and insert an image.

After you have inserted all gallery images, you can set gallery options like cropping of thumbnails (recommended) and items per slide (if you have choosen to display this gallery as carousel). Save the template after you made all edits.

Now create a new page using Fullsize template and insert the gallery template shortcode (via Add Template button).

If you want to add some additional text after the gallery (as in demo page), add the Container shortcode (via Add Shortcode button), then Divider shortcode and finally insert your text.

How To

Create custom color scheme

If you are not familiar with the SASS language, check sass-lang.com first.

The easiest way to create a custom color scheme (skin) is to make copy of the existing one from beautyspot / library / css / skin folder and change some SASS variables.

You can do the whole operation on your local machine, just extract the beautyspot.zip file from the package. You will find two file types for each scheme, one with .css extension and other with the .scss extension. Make copy of the .scss one (for example default.scss) and rename it to, let's say, mytheme.scss.

Open this new file in the editor. You will find all variables at the top of the document, most important ones are $color-1, $color-2 and $color-3. You can change just those three colors to create a brand new skin, but of course, you can play with values of all other variables to fine-tune your scheme.

After you have made your changes, save the file. Now you need to convert mytheme.scss to mytheme.css (note the different extension). First create an empty file named mytheme.css. Then use any online SASS to CSS converter (for example sassmeister.com, paste the content of the .scss file into the corresponding field). After the successful conversion, copy the converted CSS code to mytheme.css file.

Now you need to upload both .scss and .css files to the library / css / skin folder of the Child Theme(!). The final step is to open the wp-admin / Theme Options / Styling, enable the Enable Custom Color Scheme option and insert the name of your skin to Custom Skin Name field (without extension).

Also, don't forget to copy the sidebar "clouds" image if you want to have animated background. You can find all "cloud" images in library / img folder. Just copy the desired one to the library / img folder in the Child Theme and make sure that the $header-animated-image variable in your skin's .scss file is pointing to the correct image.

Change Slider Height

You can change the height of the slider with the following Custom CSS (add it to Theme Options / Custom CSS):

.c-slider .slide-content { height: 640px; }
@media ( max-width: 991px ) {
	.c-slider .slide-content { height: 540px; }
}
@media ( max-width: 480px ) {
	.c-slider .slide-content { height: 350px; }
}

You can define the height for various screen sizes. Just change the number after each height: attribute to fit your needs.

If you are using multiple sliders and want to define a different height for each of them, you first need to define a Custom Class for each slider (it can be added via Slider block in Page Builder or Slider shortcode in Shortcode Generator). Then we can alter the code for a specific slider like this (my-custom-slider is your Custom Class):

.c-slider.my-custom-slider .slide-content { height: 640px; }
@media ( max-width: 991px ) {
	.c-slider.my-custom-slider .slide-content { height: 540px; }
}
@media ( max-width: 480px ) {
	.c-slider.my-custom-slider .slide-content { height: 350px; }
}

Getting Instagram widget to work

For this widget to be fully functional, you must authorize Embedagram plugin. Go to embedagram.com and click "...let's get started" link. Instagram will ask for authorization, so click on "Authorize" button. You don't need to do anything else on that page, you can close it.

You will need to obtain your Instagram ID (this is different from your user name) for this widget to work. Use for example this page to get your ID.

Creating Reservation Form

To create a Reservation Form, head to wp-admin / Contact and click on Add New button.

Name it and open the reservation_form.txt file which can be found in Demo Data folder of the full package. Paste the content of this file to Form field of the new form.

You will have to change dummy texts and fields manualy, but you can use the Generate Tag button to create service checkboxes.

Also, don't forget to copy the content of the Demo Data / reservation_form_message.txt file to the Message body field.

Last thing is to edit the Messages. You can use the following snippets for this:

<p class="c-alert-message m-success"><i class="ico fa fa-check-circle"></i>Your message was sent successfully. Thanks.</p>

<p class="c-alert-message m-warning"><i class="ico fa fa-exclamation-circle"></i>Validation errors occurred. Please confirm the fields and submit it again.</p>

Once the Reservation Form is ready, hit the Save button and copy its shortcode to Form Shortcode field under wp-admin / Theme Options / Reservation Form.

Now go to Theme Options / Main Sidebar Settings and set Enable Reservation Form Button to On.

Adding a (custom) sidebar to any page

If you want to add a custom sidebar, you will need to create it first under wp-admin / Theme Options / Custom Sidebars. There are 10 slots, you can use any of them. You will activate the sidebar by enabling it and adding a name to its field (or you can leave the default name). Save Theme Options and go to wp-admin / Appearance / Widgets. You should see your sidebar at the right side. So, fill it with your widgets and open any page in wp-admin.

First make sure that you are using a template With Sidebar.

Head to Sidebar Settings panel under the main editor where you can choose which sidebar will be used (it must contain at least one widget) and its position for desktop and mobile devices.

Getting Subscribe widget to work

You need to have a Mailchimp account in order to make subscribe form work.

Log in to Mailchimp and go to desired subscribers List which you want to connect with this template. Click on Signup forms and build some basic signup form. If you want to use this template's subscribe form as it is, you will need just an email field (field tag EMAIL).

When you done building the form, go back to Signup forms and click on Embedded forms. You should see the code of your form in Copy/paste onto your site section. Copy it into your text editor, but you need just form's action URL. Search for "<form action=" and copy the whole URL. It should look similar to this: http://volovar.us8.list-manage.com/subscribe/post?u=76a50c9454ec8ab78914d1bf2&id=49e892f53d.

You need to edit it a little bit though. Replace "post?" with "post-json?" and add "&c=?" at the end. You should get something similar to this: http://volovar.us8.list-manage.com/subscribe/post-json?u=76a50c9454ec8ab78914d1bf2&id=49e892f53d&c=?.

You can also replace "&" with "&amp;" for HTML to be valid. So the final link should look like this: http://volovar.us8.list-manage.com/subscribe/post-json?u=76a50c9454ec8ab78914d1bf2&amp;id=49e892f53d&amp;c=?.

Add this URL to Mailchimp Link field of Mailchimp Subscribe widget.

Updating the Theme

The easiest way to update is to delete the current version in the wp-admin / Appearance / themes and install the new one as described at the beginning of the documentation.

Alternatively, unzip the "beautyspot.zip" file, then open your WordPress installation through the FTP, go to "wp-content / themes" folder and overwrite the existing beautyspot folder with the new one.

Icons

FontAwesome

This template uses Font Awesome icon font.

To add an icon use <i class="fa fa-heart"></i> code and replace the fa-heart with any of the classes from Font Awesome icon set. For example: <i class="fa fa-flag"></i>, <i class="fa fa-folder"></i>, etc.

Social Icons

This template contains also separate icon font set with lots of social icons. Its usage is similar to FontAwesome, but you will need just a single class for any icon.
For example: <i class="soc-twitter-bird"></i>

The complete list of social icons:

Images used on demo page

Images seen in preview are NOT included. Here is the list of images in case you want to obtain your own licenses: 36587560, 39296139, 40008279, 51097512, 57992070, 60929205, 63266605, 64141588

Contact

You can find my ThemeForest portfolio here and you can use the contact form on my profile to get in touch.