Thank you for choosing Blossom Spa Free theme!

We hope you enjoy this beautiful and eye-catching Spa and Salon WordPress theme which we have designed especially for you to create a lively and engaging website for your Spa and Salon Business.

Our team created it with a lot of hard work and love. And we want your website to blossom with our Blossom Spa Free WordPress theme.

About This Theme Documentation:

This documentation covers the installation, the usage, and the different settings available in the customizer of the theme.

The main goal of the documentation is to provide you the guidance and walk-through to set up the theme on your website in an easy-to-follow manner, while also introducing you to some of the features of the theme. So, we encourage you to go through this document and keep it handy for reference.

If you have any questions about the theme or need any kind of assistance with anything related to the theme, please feel free open a support ticket. Our support team will be happy to assist you.

In this documentation, first, we’ll make sure that everything is ready for the installation, then we’ll set up the theme, and cover some initial configuration and customization options.

How to use this Documentation?

We recommend you to go through each step of the documentation to have a better understanding of the theme and its features.

However, if you are looking for a specific section, you can easily navigate using our table of contents given below.

If you want to find a specific keyword, hit “Ctrl+F” on your browser to start searching.

Requirements for Getting Started

Make sure Blossom Spa is compatible with your WordPress version.

Blossom Spa will work with 4.7 and above versions of WordPress.

However, for the best experience, added features, and updated security patches, we recommend you to update your WordPress to the latest version.

Checklist for Getting Started

  • Check the WordPress Version and Update it
  • Install and Activate Blossom Spa
  • Install Recommended Plugins. Some functionality of the theme might not work if you do not install the recommended plugins.

If you haven’t downloaded WordPress already, you can download it from the WordPress repository via https://wordpress.org/download/

Recommended Image Size (in px)

Blossom Spa Schema: 600 X 60
Blossom Spa Single: 1920 X 700
Blossom Spa Service: 480 X 324
Blossom Spa Team: 270 X 300
Blossom Spa Pagination: 370 X 247
Blossom Spa Blog-list: 640 X 480
Blossom Spa Blog-classic: 776 X 517
Blossom Spa Related:110 X 83

How to Check and Update the WordPress version

  • Log in to the WordPress admin panel.
  • Go to Dashboard >Updates
  • Update WordPress if there is an update available

How to Install and Activate Blossom Spa Theme

Once you have updated to the latest version of WordPress, save the downloaded Blossom Spa file (blossom-spa.zip) somewhere handy on your computer, as you will be using the included files for the rest of the installation process.

The Blossom Spa theme file includes:

A WordPress Theme Files (in .zip format) — This (blossom-spa.zip) is a compressed WordPress theme file containing all of the required templates, images, and icons required for the theme to function properly.

Note for Safari users (macOS): If you are using Safari to download the theme file, the file may unzip automatically. So, make sure your theme file is in .zip format. Here’s how to stop Safari from automatically unzipping your .zip file.

Now, to install and activate the theme follow these steps or the above gif:

  • Log in to WordPress Dashboard
  • Go to Appearance > Themes
  • Click on Add New button

  • Click on Upload Theme

  • Click on “Choose File…”, select the “blossom-spa.zip” file from your computer and click Open

  • Click Install Now

  • After the theme is installed, click on Activate to use the theme on your website

Installing Recommended Plugins

You must install and activate the following plugins to get the best out of Blossom Spa Free WordPress theme.

BlossomThemes Email Newsletter by Blossom Themes:

This plugin is needed to add newsletter subscription form on the newsletter section. The plugin also creates a newsletter widget that can be used in the sidebars.

BlossomThemes Instagram Feed by Blossom Themes:

This plugin lets you add an Instagram feed to your website. The plugin also generates Instagram shortcode that you can add in your posts and Instagram widget that you can add in the sidebars.

BlossomThemes Toolkit by Blossom Themes:

This plugin generates 20 very useful widgets for you to use. It creates widgets like popular posts, advertisement box, author bio, social media feed, etc.

Regenerate Thumbnails by Alex Mills (Viper007Bond):

If you have existing content, this will help you update your images thumbnail sizes. To update the thumbnails, you must run this plugin.

How to Install Recommended Plugin

  • Login to your WordPress Admin panel
  • Go to Appearance> Install Plugins

  • Click “Install” to install the plugins

  • Click “Activate” to activate and use the plugins

Setting Up the Front/Landing/Home Page

To get started with customizing the theme, you first need to set up a front page. If you want to make your website look like demo, you should select Front Page as Static Page.

Configure the Home Page and Blog Page

  • Log in to WordPress Admin Panel.
  • Go to Appearance>Customize > Homepage Settings
  • Select A static page under Your homepage displays.
  • If you are using this theme in a fresh WordPress installation, go to the next point. If you are using this theme in an old WordPress, choose the page you want to set homepage as Frontpage and choose the page you want to set a blog page as Posts Page.
  • Click on Publish.

Site Identity (Add/Edit a Logo and Favicon)

  • Log in to the WordPress Admin Panel
  • Go to Appearance > Customize > Site Identity
  • Click Select Logo and upload your logo
  • Enter Site Title and Tagline
  • Check Display Site Title and Tagline if you want to show your website’s name and tagline
  • Click Select Image and upload Image for Site Icon (favicon)
  • Select the Font Family for the site title
  • Select the Site Title Font Size
  • Click on Publish

Appearance Settings

You can configure the colors, background image, and typography of the website using this settings panel.

Colors

You can change the background color of your website using this settings panel.

Please follow the below steps to change the background color of the website.

  • Login to your WordPress admin panel
  • Go to Appearance> Customize> Appearance Settings> Colors
  • Select the color of your choice
  • Click on Publish

Background Image

You can change the Background Image of your website using this settings panel.

Please follow the below steps to change the background image of your website.

  • Log in to the WordPress Admin Panel
  • Go to Appearance> Customize> Appearance Settings> Background Image
  • Upload the image you want to keep as website background
  • Select the Image Preset, Image Position and Image Size.
  • Click on Publish

Typography (Change Fonts)

You can change the Primary Font and Secondary Font of your website using this settings panel.

Please follow the below method to change the typography of your website:

  • Log in to the WordPress Admin Panel
  • Go to Appearance> Customize> Appearance Settings> Typography
  • Select the Primary Font and Secondary Font for your website
  • Click on Publish

Layout Settings

Blog Page Layout

You can select the blog page layout using this settings panel.

Please follow the below steps to select the blog page layout of your website.

  • Login to your WordPress Admin Panel
  • Go to Appearance> Customize> Layout Settings> Blog Page Layout
  • Select the layout of your choice
  • Click on Publish

General Sidebar Layout

You can select sidebar layout for different pages such as post page, archive page, and default sidebar.

Please follow the below steps to select the sidebar for different pages of your website.

  • Log in to the WordPress Admin Panel
  • Go to Appearance> Customize> Layout Settings> General Sidebar Layout
  • Select the Sidebar Layout for Page, Post, and Default Sidebar layout.
  • Click on Publish

Front Page Settings

You can set up a image or video banner on the top of your website using this settings panel.

Please follow the below steps to set up a banner on the top of your homepage.

  • Log in to WordPress Admin Panel
  • Go to Appearance > Customize > Front Page Settings > Banner Section
  • Choose Static/Video CTA Banner
  • Upload the Header Video or enter the YouTube URL of the video. Also, you can upload images in the banner section by clicking on Add new image. If you add both video and image in the banner section at the same time, it will show video by default.
  • Enter Title & Sub Title of the section
  • Enter the Banner Button1 Label and Banner Button1 Link
  • Enter the Banner Button2 Label and Banner Button2 Link
  • Click on Publish

Note: You can select Disable Banner Section if you do not want to display Banner on the top of your homepage.

Service Section

You can add various services offered by your Spa in this section as given below:

Note: Make sure you have installed and activated BlossomThemes Toolkit plugin before adding service section on your homepage.

Please follow the below steps to add services in the service section on your homepage.

  • Login to your WordPress Admin Panel
  • Go to Appearance > Customize > Front Page Settings > Service Section.
  • Click Add a Widget.
  • Select Text Widget

  • Enter the Section Title and Description

  • Select the Blossom: Icon text widget.

  • Enter the Service Title, Description, Upload image or select from predefined icons.
  • Enter Read More Label and Read More Link
  • Add more services in similar manner
  • Click on Publish

About Section

Please follow the below steps to configure About Section on your homepage.

  • Login to your WordPress Admin Panel
  • Go to Appearance > Customize > Front Page Settings > About Section.
  • Click Add a Widget
  • Select Blossom: Featured Page Widget.

  • Choose the About Page from which the content for this section would be fetched. You need to create a separate page with content for this section. You can create an About page by going to Pages> Add New.
  • Select Show Full Page Content to show full page content in the About Section.
  • Checkbox to show featured image in the Service section
  • Select the image alignment
  • Checkbox Show Read More option and enter the Read More Text
  • Click on Done
  • Click on Publish

Service Two Section

You can add more services in this section of the front page of your website.

Please follow the below steps to add services to the Service Two Section.

  • Login to your WordPress Admin Panel
  • Go to Appearance > Customize > Front Page Settings > Service Section.
  • Click Add a Widget.
  • Click on Image Widget

  • Enter the Title & Click on Add an Image
  • Upload an Image for the section & enter the link

  • Again, click on Add a Widget
  • Select the Blossom: Icon text widget.

  • Enter the Service Title, Description, Upload image or select from predefined icons.
  • Enter Read More Label and Read More Link
  • Add more services in a similar manner if you wish to.
  • Click on Publish

Call To Action Section

Please follow the below steps to add a call to action section on the homepage of your website.

  • Login to your WordPress Admin Panel
  • Go to Appearance> Customize> Front Page Settings> Call To Action Section
  • Click on Add a Widget
  • Select Blossom: Call To Action Widget

  • Enter the Section Title and Description
  • Select the Number of Call-to-Action Buttons you want to display
  • Enter the buttons Link
  • Select the Button Alignment
  • Select the Background Color or Upload Image
  • Click on Done
  • Click on Publish

Testimonial Section

You can add your client testimonials in this section of the homepage.

Please follow the below steps to configure the Testimonial section on the homepage of your website.

  • Login to your WordPress Admin Panel
  • Go to Appearance> Customize> Front Page Settings> Testimonial Section
  • Enter Testimonial Section Title and Description

  • Click on Add a Widget
  • Select Blossom: Testimonial widget

  • Enter the client Name, Designation, and Testimonial
  • Upload an image of the client
  • Click on Done
  • Add More testimonial in a similar way if you want to
  • Click on Publish

Team Section

Please follow the below steps to add your Spa Team members on the homepage of your website.

  • Login to your WordPress Admin Panel
  • Go to Appearance> Customize> Front Page Settings> Team Section
  • Enter the Team Section Title and Description

  • Click on Add a Widget
  • Select Blossom: Team Member Widget

  • Enter the Name, Designation and Description of the team member.
  • Upload an image of the person
  • Enter the social media link of the member
  • Add more team member in similar manner
  • Click on Done
  • Click on Publish

Blog Section

You can display recent blog posts in this section of the homepage.

Please follow the below steps to add a blog section on the homepage of your website.

  • Login to your WordPress Admin Panel
  • Go to Appearance> Customize> Front Page Settings> Blog Section
  • Enter the Blog Section Title and Blog Section Description
  • Enter Read More Label and View All Label
  • Click on Publish

Note: This section automatically fetches three recent articles to display in the Blog section

Portfolio Settings

You need to create a Portfolio page before performing the Portfolio settings.

Please follow the below steps to create a portfolio page.

  • Login to your WordPress Admin Panel
  • Go to Pages> Add New
  • Enter the Page Title
  • Select the Page Template as Portfolio Template
  • Click on Publish

Please follow the below step to create your Portfolios.

  • Login to your WordPress Admin Panel
  • Go to Portfolios> Add New
  • Enter the Portfolio Title & Description
  • Click on Add New Categories and Enter the category of the portfolio
  • Click on Set Featured Image & Upload an image.
  • Click on Publish

General Settings

Header Settings

You can add your phone number, email and opening hours in the header area using this settings panel.

Please follow the below steps to add the header details.

  • Login to your WordPress Admin Panel
  • Go to Appearance> Customize> General Settings> Header Settings
  • Enable Header Search to add a search bar in the header menu
  • Enter the Phone Label and Phone Number
  • Enter the Email Label and Email Address
  • Enter the Opening Hours Label and Opening Hours
  • Upload the Background Image
  • Click on Publish

Social Media Settings

You can add your social media links on your website using this settings panel.

Please follow the below steps to add your social media accounts in the header area of your website.

  • Login to your WordPress Admin Panel
  • Go to Appearance> Customize> General Settings> Social Media Settings
  • Enable Social Media Links to add social media accounts
  • Click on Add new links
  • Select the Social Media Icon and Add the Link
  • Click on Publish

SEO Settings

You can configure the SEO settings of your website using this settings panel.

Please follow the below steps to configure SEO settings of your website.

  • Login to your WordPress Admin Panel
  • Go to Appearance> Customize> General Settings> SEO Settings
  • Enable Last Updated Post Date to allow search engine crawl your posts latest changes and help in better ranking.
  • Enable Breadcrumb to help your visitors and search engine bots to navigate to your website
  • Enter the Breadcrumb Home Text
  • Click on Publish

Posts(Blog) & Pages Setting

Please follow the below steps to configure the Posts/Blog and Page settings of your website.

  • Login to your WordPress admin panel
  • Go to Appearance > Customize > General Settings > Posts (Blog) & Pages Settings
  • Enable/Disable the Prefix on Archive Pages
  • Enable Blog Excerpt if you want to show the summary of the posts. If enabled, select the number of words for the blog excerpt.
  • Enable Hide Author Section if you don’t want to show author section on the blog page.
  • Enable Show Related Posts to show related posts below a blog post.
  • Enter the title for Related posts section.
  • Enable Show Comments to show comments in Single Post/Page.
  • Enable Hide Category if you don’t want to show the category name on the blog posts.
  • Enable Hide Author if you don’t want to show author section on the blog page.
  • Enable Hide Posted Date if you don’t want to show the posted date on blog posts.
  • Enable Show Featured Image to show featured image in the blog posts.
  • Click Publish.

Instagram Settings

You can add your Instagram Feed on your website from here.

To display your Instagram feed, you need to install and activate BlossomThemes Instagram Feed plugin and then configure your Instagram profile.

Configuring Instagram Profile

  • Log in to the WordPress Admin Panel.
  • Go to BlossomThemes Instagram Feed > General

  • Enter your Instagram username
  • Enter the number of photos you want to display from your Instagram feed.
  • Enter the number of photos you want to display at a time in Number of Photos Per Row
  • Enter the Instagram Profile link text
  • Check “Show Likes/Comment” if you want to show likes and comment count of your Instagram profile on your website
  • Click Save Changes

Adding Instagram Section

  • Log in to the WordPress Admin Panel.
  • Go to Appearance > Customize > General Settings > Instagram Settings
  • Enable Instagram Section. Blue is enabled
  • Click Publish

Navigation Menus (Create and Edit Menu)

You can create navigation menu from Customizer or from Dashboard. This theme supports two menus: Primary and Secondary. If you need more than two menus, you can add them in the sidebar using “Navigation Menu” widget.

Create a New Menu from Customizer

  • Login to your WordPress Dashboard.
  • Go to Appearance > Customize> Menus in the WordPress Dashboard
  • Click on Create a New menu button
  • Give a name to your menu and select whether you want to display the menu on Primary or Secondary location. If you select a primary location, the menu will be displayed below the logo. If you select the secondary location, the menu will be displayed above the logo.

  • Click Next
  • Click “Add Items” to add items (pages, posts, categories, custom links…) to the Menu
  • Click “+” icon on the items list to add the item to the menu
  • Drag and Drop the added items to rearrange them.
  • Click Publish

Create Menu from Dashboard

  • Login to your WordPress Dashboard.
  • Go to Appearance > Menus in the WordPress Dashboard

  • Click on create a new menu.

menu dash create.png

  • Give a name to your menu in Menu Name and click Create Menu button.

menu dash save.png

  • Select the items from Pages, Posts, Custom Links, or Categories and click “Add to Menu”.

menu dash add.png

  • Drag and Drop the added items to rearrange them.
  • Check the Menu location to Primary or Footer
  • Click Save Menu

Widgets

You can add the widgets to the sidebar in two ways – via the Dashboard and Customizer

Adding Widgets via Customizer

  • Login to your WordPress Dashboard.
  • Go to Appearance> Customize> Widgets
  • Make sure you are on the page you want to add widgets to.
  • Click on the desired Sidebar or location (the one you want to add widgets to). You can add widgets on Footer as well
  • Click on Add a Widget to add widgets
  • Select desired Widgets and give a title to the widget
  • Click Add a Widget to add more widgets in the sidebar
  • Drag and reorder the widget as desired
  • Click Publish

Adding Widgets via Dashboard

  • Login to your WordPress Dashboard
  • Go to Appearance> Widgets
  • Available widgets are listed on the left-hand side while Sidebars are listed on the right side (including the sidebars you create)
  • Drag and drop the widgets to the desired sidebars. Or, click on the widget and select the sidebar you want to add the widget to.

Footer Section

The theme has 4 widgets area in the footer. You can add various widgets to the area. To add widgets in the footer, go to Appearance> Customize>Widgets and select the Footer Location (footer one, two, three, four) and add the widgets.

Footer Credit Settings

You can edit the footer credit using this setting.

  • Login to your WordPress Dashboard
  • Go to Appearance> Customize> Footer Settings
  • Enter your desired footer credit text
  • Click on Publish

Additional CSS

You can add extra CSS codes here. If you want to modify the color, fonts, or any other CSS effects, you can enter the code here.

  • Login to your WordPress Dashboard
  • Go to Appearance> Additional CSS
  • Enter your code
  • Click on Publish

Useful Tips

  • We highly recommend using Child Theme if you need to change the code of the theme. Do not change the codes in the files of the parent theme as all such changes will be lost when the theme is updated. You can create a child theme using a plugin or manually by following the official guide
  • Always keep a BackUp of your theme before making any changes to the theme

If you get any problem in using the theme, you can do the following things:

  • Deactivate the plugins, sometimes plugin conflict may cause issues with the theme. Please deactivate the unused plugins
  • Replace the latest modified code with the original code
  • If the issue pertains, feel free to contact us using our Support Ticket