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.
- Hover you account name
- Select downloads from the submenu
- Click the green Download button of the theme
- Select Installable WordPress files only
1.1 Upload the theme
You can upload the theme on two ways:
- Admin Dashboard
- Go to Appearance -> Themes
- Click on Add New, then on Upload
- Upload the
- Click the Install Now button
- FTP Client
- Unzip the
thermen-qt.zipfile 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'.
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 ContentPlease 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
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.
- 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
- 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
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.
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.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.
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.
Please make sure you have assigned the menu to to correct location by clicking one of the checkboxes at the bottom.
3.1 Change Footer Content
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.
3.2 Change Footer Colors
To change the colors of the header please navigate to Appearance -> Customize -> Footer. Here you will find all the color controls in this panel.
3.3 Bottom footer bar
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.
The theme customizer contain the following sections, each section have it's own color and layout options:
- Logo & Favicon
- Navigation Mobile
- Home Slider
- Page Header
- Colors & Layout Settings
- Post Types
- 404 Page
- Social Links
- Opening Hours
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:
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.
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.
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).
- Select the "Front Page" template in the Page Attributes field
- Click the "Add New Slide" button to start
- Add your image (1600 x 770px recommend)
- Add a small top heading
- Add the main heading
- Add a text paragraph (optional)
- Click "Add Button" to add a button
- Enter the button details
- Click "Add New Slide" to add a new image slide
- Repeat step 1 till 7
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.
- 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.
7.2 Featured Page
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:
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
7.4 Opening Hours
To add your opening hours or translate the weekdays go to Appearance > Customize > Opening Hours
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:
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.
- Make sure you're running the latest theme version
- Go to the "Plugins" tab
- Deactivate and delete the Advanced Custom Fields PRO plugin
- Go to "Appearance -> Install Plugins"
- Click the "Install" link at the Advanced Custom Fields PRO plugin
- Click the "Activate" plugin button
- Done !
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.
- Documentation: https://docs.elementor.com/
8.2.1 Enable page builder mode
To use the page builder please click the "Backend Editor" button above the texteditor.
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:
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.
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/
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.
The custom fields can be added to the email template via Appointments -> Settings -> Emails -> Admin/Agent Emails
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.
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: firstname.lastname@example.org
Only at the From field make sure to wrap your email address in < > symbols, like this: <email@example.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:
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.
- Add the same email address you entered for your Contact Form 7 forms
- Enter your name or company name
- Select "Other SMTP"
- Add the SMTP Host (can be found in the email form your hosting provider or within the cPanel area of the domain)
- Only select SSL if your domain is served over HTTPS, else select TLS
- Enter the SMTP Port (can be found in the email form your hosting provider or within the cPanel area of the domain)
- Switch on
- Switch "Authenticion" on
- Enter the same email address as in your forms and as in step 2 here
- Enter the password for this email address
- 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.
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
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.
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.
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:
Change the look of the button; use primary, outline lighter or outline darker
Add a FontAwesome icon
Link the button to a new window, or not. To link in the same use _self or new _blank window
The edges of the buttons are rounded
The button goes fullwidth
Change the text color of the button
Change the background color of the button
Change the border color of the button, usefull for outline button
Add a custom class to the button
9.2 Icons (FontAwesome)
The default shortcode to display an icon is:
[icon type="fas fa-home"]
There are 3 more parameters:
Make the icon link to another url
Link the button to a new window, or not. To link in the same use _self or new _blank window
Change the font size of the icon
See the full list of available icons at the FontAwesome library
9.3 TableTable 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.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.
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.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
Each theme update we will provide the list of changes at the bottom of the item page on ThemeForest.
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?
- Login into your Themeforest account
- When logged in, move your mouse over your username (in the top)
- Navigate to Downloads
- At the Thermen WordPress theme, move your mouse over the stars and click.