Introduction

Thank you for purchasing the theme! If you have any questions that goes beyond the scope of the theme documentation, feel free to contact support.

1. Getting Started

Please make sure you have downloaded the "Installable WordPress files only" zip file from the download page on ThemeForest.

  1. Hover you account name
  2. Select downloads from the submenu
  3. Click the green Download button of the theme
  4. Select Installable WordPress files only
Download WordPress Theme from ThemeForest If you download "All files & documentation" unzip the package to use the "thermen-qt" zip to upload

1.1 Upload the theme

You can upload the theme on two ways:

  1. Admin Dashboard
    • Go to Appearance -> Themes
    • Click on Add New, then on Upload
    • Upload the thermen-qt.zip file
    • Click the Install Now button

  2. FTP Client
    • Unzip the thermen-qt.zip file and upload the unzipped folder to
      wordpress/wp-content/themes/ on your server by using a FTP client

After uploading the theme, hover the thumbnail image and click 'Activate'.

Activate Thermen - WP Theme
Click the activate button to active the theme

1.2 Install Plugins

  • Go to Appearance -> Install Plugins
  • Check all checkboxes, click the select field at the top and select Install click on the Apply button
  • Again, check all checkboxes, click the select field and click Activate then click Apply
  • Go back to the dashboard
  • The WooCommerce install wizard show up. Choose Not right now to skip or press Yes Please to setup the shop (can be done later)

1.3 Import Demo Content

Please install and activate all required plugins before you import the demo content !
  • Go to Appearance -> Install Demo Data
  • Click the blue Import button from one of the demo's you would like to use
  • Wait till you see the finished notice at the bottom of the page
  • Demo import is finished

One click Demo Install
Choose your demo and click the import button once and wait till the import is finished

The theme installation and demo import is done. You're ready to edit the theme! Enjoy!


1.4 Update the theme

You can update the theme on three different ways. Please pick the option that suit you the most or you're the most familiar with.

It's recommended to install a backup plugin (UpdraftPlus) and create a backup before updating the theme!
1. Envato Market plugin
  • Download and install the Envato Market plugin
  • Click the Envato Market tab in the admin menu
  • Generate a token - by clicking the link of step 1 on the page
  • Give your token a name and make sure you enable the following settings:
    • View and search Envato sites
    • Download your purchases items
    • List purchases you've made
  • Click on "Create Token"
  • Copy your token from the screen and (important) save it somewhere on your computer
  • Go back to your website and add the token to the "Token" input field
  • After saving the settings the "Theme" tab should be available where you can update the theme

Envato Market guide with screenshots

2. FTP
  • Go to the download page of your ThemeForest account that purchased the theme
  • Click the download button and select "Installable WordPress files only"
  • Login to your server with a FTP client
  • Navigate to the theme folder in your WordPress installation (e.g. wordpress/wp-content/themes/)
  • Rename the thermen-qt folder (e.g. thermen-qt-1 or thermen-qt-old)
  • Unzip the downloaded zip file and upload the thermen-qt folder to your server
  • Check if your website is working correctly
  • If you have any translation files in the old theme folder copy them over to the new theme folder
  • Remove the old theme folder from your server

2. Header

The logo can be uploaded to the theme customizer via Appearance -> Customize -> Logo & Favicon. It is recommended to upload a logo that's already scaled in size.

Please do not upload the default logo in the retina logo option. The retina logo option need to contain a logo that is exactly double the size of the default logo. For example; if you default logo is 150x90 pixels in size, your retina logo image should be uploaded as 300x180 pixels.

If you don't have such logo leave the retina logo option empty.

upload logo to the theme

2.2. Favicon

The favicon can be uploaded to the theme customizer via Appearance -> Customize -> Logo & Favicon at the "Site Icon" setting. Please make sure you upload the favicon image in the correct size of 512x512 pixels.


2.3 Topbar

2.3.1 Change topbar content

The topbar of the theme is a widgetized area. Please navigate to Appearance -> Widgets, on the right side of the screen you will see the "Topbar - Left Side" and "Topbar - Right Side" panels where you can add widgets to.

Please limit the topbar widgets to text, navigation widget, social icons, icon box or currently open widgets

theme topbar widget area

2.3.2 Change topbar colors

To change the colors of the topbar (background color, text & link color) please navigate to Appearance -> Customize -> Topbar, there you will find the color controls

2.3.3 Hide the topbar

To hide the topbar please navigate to Appearance -> Customize -> Topbar and change the "Display topbar" field.


2.4.1 Change header colors

To change the colors of the header please navigate to Appearance -> Customize -> Header. Here you will find all the color controls in this panel.

2.4.2 Change header button

You can change the text and url of the header button via Appearance -> Customize -> Header at the "Button Text" and "Button Link" settings.

To remove this button remove the text and url from the settings.


The theme has multiple menu's, each of these menu's can be edited via Appearance -> Menu's. From the dropfield field select which menu you want to edit. To edit the parent theme menu please select the Primary Navigation.

edit theme menu

Please make sure you have assigned the menu to to correct location by clicking one of the checkboxes at the bottom.

theme menu location

The footer area have three widgetized rows; footer columns, middle footer and bottom footer. You can add widgets to these area's by going to Appearance -> Widgets. On the right side of the screen you will see the footer panels.

To change the amount of columns, or hide the footer please navigate to Appearance -> Customize -> Footer.

Footer widget panels
Footer columns, middle footer & bottom footer widget panels

To change the colors of the header please navigate to Appearance -> Customize -> Footer. Here you will find all the color controls in this panel.


The bottom footer and have it's own widget area and color controls. The widget panels can also be found under Appearance -> Widgets and is called "Bottom Footer" (left & right column).

4. Theme Customizer

With the theme customizer you can change the colors and settings of the theme, all options are grouped in sections. Please navigate to Appearance > Customizer to enter the theme customizer.

theme menu location

The theme customizer contain the following sections, each section have it's own color and layout options:

  • Logo & Favicon
  • Topbar
  • Header
  • Navigation
  • Navigation Mobile
  • Home Slider
  • Page Header
  • Colors & Layout Settings
  • Blog
  • Typography
    • Body
    • Navigation
    • Headings
  • Shop
  • Post Types
    • Archives
  • Footer
  • 404 Page
  • Social Links
  • Opening Hours
  • Custom

5. Pages

5.1 Homepage

The homepage is using the "Front Page" template that includes the slider option field. If you build your homepage from scratch please select this template in the "Page Attributes" metabox on the right side of the page builder:

homepage settings
Select "Front Page" template

After selecting the page template the slider option field become visible at the bottom of the page. In the following chapter we will show you how to setup the image slides.

Please also set the static page option under Settings -> Reading to the homepage you're building.

static pages option
Select pages for homepage and blog page

5.2 Default / Regular pages

To add a default page there are no additional steps. Just navigate to the Pages tab and click on the Add New button at the top of the page.


5.5 Blog & Blog post pages

The blog page with a summary of posts is using the default WordPress loop. To configure this page please make sure you have at least 1 post added under the Blog tab in the admin menu. Navigate to Settings -> Reading and set the blog page at the Post Page option.

Blog Layout

You can choose from two layouts for the blog page, the default list layout and the grid layout. You can change the layout via Appearance -> Customize -> Blog -> Blog Layout.

6. Slider

The slider is built as part of a custom page template because, after switching the template to "Front Page" the slider option field become visible at the bottom of the page (might need to scroll down a bit).

QreativeThemes slider option field
The slider field is located at the bottom of the page for the "Front Page" template
  • Select the "Front Page" template in the Page Attributes field
  • Click the "Add New Slide" button to start

QreativeThemes slider option field
These are the controls to add a single image slide
  1. Add your image (1600 x 770px recommend)
  2. Add a small top heading
  3. Add the main heading
  4. Add a text paragraph (optional)
  5. Click "Add Button" to add a button
  6. Enter the button details
  7. Click "Add New Slide" to add a new image slide
  8. Repeat step 1 till 7

QreativeThemes slider option field
Click the "Settings" tab in the left sidebar to change the global slider settings
QreativeThemes slider option field
Click the "Colors/Setting" tab in the rop row to access the color/settings for the individual image slide

7. Page Builder Elements

7.1 General info

The theme use the Elementor plugin as primary page builder. This page builder have some amazing elements that you can use straight away. For the Thermen WordPress theme we created 30 custom Elementor widgets that are specifically designed and build for this theme and useful for the targeted niche. To use the custom elements edit a page in Elementor and scroll to the "QreativeThemes" section in the widget list.

Most of the custom elements speak for themselves and are straight forward to use. There are a couple elements that require some extra information that might not be clear at first glance, we will highlight these and explain it below.

QreativeTheme page builder elements
  • Click here to see how to enable the page builder mode
  • Click here to see how to add the page builder elements to the page

Each Elementor widget have 3 tabs; Content, Style and Advanced. To change the colors of the widget you can click on the "Style" tab to see all available color controls.

Elementor widget - content tab
You can change the content of a widget inside the "Content" tab
Elementor widget - style tab
The colors/syle of the widget can be changed inside the "Style" tab

The QT: Featured page widget will show the title, excerpt and featured image of the page you've selected. To change this please navigate to the "Pages" tab and edit the specific page you're featuring. The excerpt text can be changed here:

QreativeTheme featured page select
Select page to feature
QreativeTheme featured page edit
Edit the featured image and excerpt text

This widget might come in handy if you show a specific service more than once on your website. On this way you only have to change the image or excerpt once, for example


7.3 Call to Action

The call to action widget is a straight forward element to use and you can display a great call to action element op your website.

To add/edit an image for this widget please add it to the page builder section instead of the widget

QreativeThemes Call to Action Elementor widget
You can add/edit the image within the page builder section instead of the widget

7.4 Opening Hours

To add your opening hours or translate the weekdays go to Appearance > Customize > Opening Hours

Opening Hours Settings

To show the opening hours on your website you can use the "QT: Opening Hours" widget (Elementor or native WP widget). This widget will show the opening hours added to the customizer by default. There are cases to you need to show different opening hours (e.g. multiple locations).

In that case you can overwrite the value's from the customizer by adding your opening hours inside the widget itself. On this way you can set different times per location or for a service:

Opening Hours Elementor widget
Opening Hours Elementor widget
Opening Hours WP Widget
Opening Hours native WP widget

8. Plugins

All the required and recommend plugins for the theme can be installed and activated via Appearance -> Install Plugins


8.1 Advanced Custom Fields PRO

The Advanced Custom Fields PRO plugin is bundled with the theme. This means this plugin don't have to be purchased seperately and can be installed via Appearance -> Install Plugins and is required for the theme. The plugin is not to be used or distributed outside of this theme.

How to update?

Updates for the Advanced Custom Fields PRO plugin will be shipped within theme updates. To update this plugin to the latest version make sure you have updated the theme to the latest version first.

  1. Make sure you're running the latest theme version
  2. Go to the "Plugins" tab
  3. Deactivate and delete the Advanced Custom Fields PRO plugin
  4. Go to "Appearance -> Install Plugins"
  5. Click the "Install" link at the Advanced Custom Fields PRO plugin
  6. Click the "Activate" plugin button
  7. Done !

8.2 Elementor

The theme is using the free version of the Elementor plugin as page builder. This is a required plugin if you want to use the elements from the theme demo. The PRO version is compatible too but need to be purchased separately in case you want this.

Looking for more information about the Elementor page builder? Please visit their documentation file.


8.2.1 Enable page builder mode

To use the page builder please click the "Backend Editor" button above the texteditor.

enable page builder mode
Enable Elementor page builder mode

8.2.2 Adding page builder widgets

After you've clicked the Elementor button (previous step) to enable the page builder mode you can follow these steps to add elements/widgets to your page:

Elementor - Add Element
1. Click the + icon
Elementor - Select Row Type
2. Select what type of row/columns you want to start with
Elementor - Add Widgets
3. Click the + icon inside the column
Elementor - Add Widget to Column
4. Drag one of the widgets from the sidebar to the page builder column

8.2.3 Adding theme demo page templates

If you have used the demo data importer all pre-built pages will be imported. But if you would like to use some of the demo pages outside of the imported data you can add them through the template section.

Each of our theme demo pages are added as page template which you can use without having to build it from scratch. Please click on the Add Template button.

While editing a page you can click the folder icon at the bottom. A modal will show up where you can click on the "My Templates" tab and select the green button at the template you want to import.

open page template library
Open template modal
select page template
Import selected template

8.3 Booked - Appoinment Booking for WordPress

Booked is a powerful and easy-to-use appointment booking plugin for WordPress. The plugin is bundled and coming with the theme for free. You don't have to purchase this plugin seperately. You can install the plugin via Appearane -> Install Plugin.

If you're looking for more information about the Booked plugin please see the Booked documentation: https://boxystudio.ticksy.com/articles/7827/


8.3.1 Time slots

Timeslots can be added via Appointments -> Settings -> Time Slots. Please see this link how to add or manage the time slots: https://boxystudio.ticksy.com/article/3238/

8.3.2 Shortcodes

The appointment calendar can be displayed by adding the "Default" shortcode below:


8.3.3 Custom fields

You can add custom fields to the booking modal by navigating to Appointments -> Settings -> Custom Fields.

Booked Appointment - Custom Fields Booking Modal
Add custom fields to booking modal

The custom fields can be added to the email template via Appointments -> Settings -> Emails -> Admin/Agent Emails

Booked Appointment - Custom Fields Email Template
Add custom fields to email template

8.4 Contact Form 7

The Contact Form 7 plugin is used for the contact forms in the theme. It's one of the most popular free contact form plugins available for WordPress.

You can create a form under the Contact tab in the admin menu. You can add form input field by clicking the type buttons above the form editor textarea. After creating your form you can display it with the unique shortcode anywhere in the theme.

To find more information or guides please visit the documentation of Contact Form 7.

8.4.1 Demo contact form layouts

If you have used the demo data importer on your fresh WordPress installation the layouts will be located under the Contact tab in the admin menu.
Please do not use the importer anymore if you started building your website.

If you did not used the importer, or lost the form layouts you can copy/paste the following code snippets into the textarea of the form editor.

<div class="row">
    <div class="col-12 col-lg-6">
        <span>Your Name *</span>[text* your-name placeholder "Full Name *"]<span>Your Email Address *</span>[email* your-email placeholder "Email Address *"]<span>Your Phone Number *</span>[tel* your-phone placeholder "Phone Number *"]<span>Receive Answer By: *</span>[select* your-answer first_as_label "Select preference:" "By Phone" "By Email"]
    </div>
    <div class="col-12 col-lg-6">
        <span>The Subject</span>[text* your-subject placeholder "Enter Subject"]<span>Your Message *</span>[textarea* your-message placeholder "Write your question.."][submit class:btn class:btn-default class:pull-right class:fullwidth "Send Question"]
    </div>
    <div class="col-12">
        [acceptance your-acceptance] I consent to having this website store my submitted information so they can respond to my inquiry, see <a href="#" class="animated-link" style="color: #556d67;">privacy policy</a> [/acceptance]
    </div>
</div>
<div class="row ask-a-question">
    <div class="col-12 col-lg-6">
        [text* your-name placeholder "Full Name *"][email* your-email placeholder "Email Address *"][tel* your-phone placeholder "Phone Number *"][select* your-answer first_as_label "Receive Answer By:" "By Phone" "By Email"]
    </div>
    <div class="col-12 col-lg-6">
        [text* your-subject placeholder "Enter Subject"][textarea* your-message placeholder "Write your question.."][submit class:btn class:btn-default class:pull-right class:fullwidth "Send Question"]
    </div>
    <div class="col-12">
            [acceptance your-acceptance] I consent to having this website store my submitted information so they can respond to my inquiry, see <a href="#" class="animated-link" style="color: #556d67;">privacy policy</a> [/acceptance]
    </div>
</div>

8.4.2 Setting up the sending & receiver details

Navigate to the Contact tab and edit one of your forms, then click on the "Mail" tab.

At the To and From fields enter your email address, for exampel: info@yourdomain.com
Only at the From field make sure to wrap your email address in < > symbols, like this: <info@yourdomain.com>

The last step is to make sure all the form shortcodes are added to the "Message Body" textarea so the data will be send in the email:

Contact Form 7 Sender Email
Please use the same symbol for your email address. E.g. [your-name] <info@yourdomain.com>

8.4.3 The form is not working / not sending the message

First make sure you have added your email address correctly as described in the previous step.

If the form does not send or you not receive any message (make sure to check your spam folder) you need to install the WP Mail SMTP plugin.

It is a common issue with contact form and WordPress and is most likely related to the security settings from mail server of your domain. You need to setup a secure connection which is possible with the WP Mail SMTP plugin.

After installing navigate to Settings -> Mail, select "Other SMTP" at the Mailer option and enter all details. Most of the SMTP details can be found in the email your have received from your hosting provider when the domain is registered.

WP Mail SMTP - Setup 1
Replace "youremail@yourdomain.com" with the email you're using in the Conact Form 7 plugin forms
  1. Add the same email address you entered for your Contact Form 7 forms
  2. Enter your name or company name

WP Mail SMTP - Setup 2s
Enter all SMTP details or your domain (your hosting provider send this in an email when the domain is registered)
  1. Select "Other SMTP"
  2. Add the SMTP Host (can be found in the email form your hosting provider or within the cPanel area of the domain)
  3. Only select SSL if your domain is served over HTTPS, else select TLS
  4. Enter the SMTP Port (can be found in the email form your hosting provider or within the cPanel area of the domain)
  5. Switch on
  6. Switch "Authenticion" on
  7. Enter the same email address as in your forms and as in step 2 here
  8. Enter the password for this email address
  9. Save the settings

Please try the contact form on your website again and you should receive the message on the added email address (make sure to check the spam folder as well, just in case). If you still don't receive anything or the forms still doesn't send please open a ticket on our support desk.


8.5 One Click Demo Import

This plugin is required if you want to import the pre-built pages from the theme demo.

You can use the import function via Appearance -> Import Demo Data. Please use the import only on a clean WordPress installation. If you have existing content or already started building your website it is recommend not to use the demo data importer.

Please do not change pages or close the window until the importer is finished

8.6 Thermen Toolkit

The Thermen Toolkit is created by us and is required for the theme. This plugin contain the custom fields, page settings, custom Elementor widgets and some shortcodes.


8.7 Simple Page Sidebars

This plugin allows you to create a unique sidebar on each page. While editing a page the "Sidebar" field is located on the right side of the screen.

Before doing this make sure you have set the "Default sidebar" option to page sidebar under Settings -> Reading


Contact Form 7 Sender Email
1. Edit a page and click 'Enter New' at the Sidebar metabox
Simple Page Sidebars Name
2. Enter logical name for the custom sidebar and press Update
Simple Page Sidebars New Area
3. Under Appearance -> Widgets your custom sidebar is added

8.8 WooCommerce

The theme is WooCommerce compatible. This means that all default options of WooCommerce are working and that there are no custom options for WooCommerce.

8.8.1 Select Shop page

To setup the shop page please create a new default page named "Shop" for example. Then navigate to WooCommerce -> Settings and select the created page at the "Shop Page" option.

WooCommerce Set Shop Page

8.8.2 Select other shop pages

To setup the Cart, Checkout and My Account shop pages please click the Advanced tab and select the pages at this right select field.

WooCommerce Set Other Shop Pages

9. Shortcodes

9.1 Button

The default shortcode to display a the button is:
[button href="https://yourdomain.com/page"] Text on Button [/button]

There are 7 more parameters you can use inside the shortcode:

Style
Change the look of the button; use primary, outline lighter or outline darker
style="outline lighter"

Icon
Add a FontAwesome icon
icon="fas fa-angle-right"

Link target
Link the button to a new window, or not. To link in the same use _self or new _blank window
target="_blank"

Edges
The edges of the buttons are rounded
edges="round"

Fullwidth
The button goes fullwidth
fullwidth="true"

Text color
Change the text color of the button
color="white"

Background color
Change the background color of the button
background="red"

Border color
Change the border color of the button, usefull for outline button
border_color="red"

Custom class
Add a custom class to the button
custom_class="class-here"


9.2 Icons (FontAwesome)

The default shortcode to display an icon is:
[icon type="fas fa-home"]

There are 3 more parameters:

Link icon
Make the icon link to another url
href="http://yourdomain.com/page"

Link target
Link the button to a new window, or not. To link in the same use _self or new _blank window
target="_blank"

Size
Change the font size of the icon
font_size="16"


See the full list of available icons at the FontAwesome library


9.3 Table

Table shortcode:
[table cols="Service,Price Per Hour, Project Based Hour Price" data="
Design & Build, $60, $50,
Plastering, $45, $40,
Electrical, $55, $50,
Plumbing, $45, $40"]

The table shortcode can only contain plain text. If you want to use html in your table please add the tables but with html inside the "Custom HTML" widget:

<table class="qt-table default">
    <thead>
        <tr>
            <td>Type of Ticket</td>
            <td>Weekdays</td>
            <td>Weekends</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Thermal Bath with locker</td>
            <td>$15.00</td>
            <td>$20.00</td>
        </tr>
        <tr>
            <td>Thermal Bath with cabin</td>
            <td>$20.00</td>
            <td>$25.00</td>
        </tr>
        <tr>
            <td>Private cabin & entrance</td>
            <td>$45.00</td>
            <td>$50.00</td>
        </tr>
        <tr>
            <td>Thermal Bath + 60 min massage</td>
            <td>$70.00</td>
            <td>$79.00</td>
        </tr>
    </tbody>
</table>

10. Translations

10.1 WPML - The WordPress Multilingual Plugin

The theme is fully compatible for the WPML plugin. If you have purchased this plugin please install and activate the following WPML plugins:

  • WPML Multilingual CMS
  • WPML String Translation
  • WPML Translation Management

After installing and activating the WPML plugins it will guide you through the installation wizard to configure your multilingual website.


10.2 Polylang

Although the theme is not made compatible for this plugin it will still does a great job for making a multilingual website. Polylang is a free alternative plugin for WPML.


10.3 Manual Translation

There is a .pot file included with the Theme. You can find the file here: thermen-qt/language/thermen.pot

You can create translation .po and .mo files by editing the .pot file with a program like PoEdit.

Please see this tutorial by WPZOOm for translating the .pot file

11. Extra

11.1 Demo Images

The images used in our theme demo are not included with the theme because of licensing and copyright of the images. All images are replaced with grey placeholders. This is described on the item page on ThemeForest.

We have created a collection of the images we've used for the theme demo. If you need them please see this link where you can buy them.


11.2 Child Theme

A child theme is a theme that inherits the functionality from the parent theme and are often used when you want to make changes to the theme that goes beyond the default options. Changing code directly to the theme files is not possible because you will loose them when you update the theme. This is why installing a child theme will help you.

The child theme is included inside the "All files & documentation" package from ThemeForest. If you want to use the child theme upload it through the WordPress dashboard (zip file) or ftp (unzipped folder). Please see Upload Theme how to upload and activate the child theme


11.3 Changelog

Each theme update we will provide the list of changes at the bottom of the item page on ThemeForest.


11.4 Support

If you have questions that are beyond the scope of this documentation, please contact support.


11.5 Rate the Theme

If you like this theme please give it rating on Themeforest. It means alot for us!

How to rate the theme?

  1. Login into your Themeforest account
  2. When logged in, move your mouse over your username (in the top)
  3. Navigate to Downloads
  4. At the Thermen WordPress theme, move your mouse over the stars and click.
  5. Rate Thermen WordPress theme