Thank you for purchasing our product! We are very glad that you have decided on our Hotelia WordPress Theme.
This documentation will help you to set up and use the Hotelia WordPress Theme. The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation, if there are some other issues you want to discuss then do not hesitate to contact us on firstname.lastname@example.org. This documentation is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.
Please read the following very carefully as it will help you set the theme up, we have gone through the setup process multiple times and provided the best possible instructions.
We wish you good luck in your work with Hotelia WordPress Theme, and of course we would love to see your website and what you come up with by using this theme.
The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email email@example.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us an email.
Browser and Devices support
To start working with Hotelia you need to have WordPress installed on your server (local,dev or production)
Step 1: Download and Extract
Download and unzip the WordPress package from Download Wordpress.
Step 2: Upload
Copy the extracted contents of wordpress zip to the corresponding path of the server. Make sure WP has permissions to write the folder it is located in.
Now when accessing the corresponding URL you should see the following message:
Step 3: Edit the Configuration File
Auto Mode: After clicking on "Create a configuration file" then "Let's Go" you will get the configuration page:
If the information is correct and everything works fine you will receive:
If it's successful then skip the "Manual Mode" if not, follow the instructions bellow.
Manual Mode: You can either rename the file
wp-config.php on your local machine or on you server (you'll still need to tell WordPress your database information).
wp-config.php with a txt editor and enter your database information under the section labeled:
// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', 'wordpress'); /** MySQL database username */ define('DB_USER', 'root'); /** MySQL database password */ define('DB_PASSWORD', 'root'); /** MySQL hostname */ define('DB_HOST', 'localhost'); /** Database Charset to use in creating database tables. */ define('DB_CHARSET', 'utf8'); /** The Database Collate type. Don't change this if in doubt. */ define('DB_COLLATE', '');
After the information is edited upload the file to the server.
Step 4: Site name and login data
If it's all sparky then you click Run the Install and fill all the lines shown bellow:
This being the last step you will see a success message.
Click Log in and now you can proceed to you site. Now you can go to installing your Hotelia WordPress Theme.
To install the Hotelia WordPress Theme you will need WordPress v3.6 or newer.
Follow the steps and upload the Theme's installation zip file through the WordPress admin backend:
- Download the theme archive, Hotelia.zip
- Unzip the theme archive
- Find the installation file, Hotelia.installation.zip
- Go to your WP admin – Appearance – Themes – Add New – Upload Theme – Choose file
- Upload the Hotelia.installation.zip file.
Then, when prompted activate the theme.
Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:
Uploading directly to the Server:
- Download the theme archive, Hotelia.zip
- Unzip the theme archive
- Find the installation folder, Hotelia
- Connect to your server via FTP or any other way that will allow you to explore and upload files directly.
- Navigate to your
WP Installation Folder/wp-content/themes/
- Upload the Hotelia folder here.
If everything went well in Option A or B, the theme should appear under Appearance → Themes like shown below:
Then, when prompted activate the theme. Or go to Appearance->Themes and press the Activate button next to the theme.
Now you are ready to customize your theme.
Blog & Front Pages
Create a page that will serve as homepage - In wordpress admin panel under Pages → Add New, name it for example "Front Page Default".
Create a page that will serve as the archive page of blog posts - In wordpress admin panel under Pages → Add New, name it for example "Blog". Make sure that the permalink slug is "blog" only. Also, select "Default Template" as the template used by the page.
Set the front page to display as a static page: - Go to Settings → Reading → A static page (select below) → Front page: → Choose your page from the drop-down menu.
Choose your posts page from the drop-down menu. It should be the "Blog" page we have just created.
Your page should look something like:
All our themes are powered by Tesla Framework ( Tesla Framework Tour ), a powerful administration tool that comprises all our great features and allows you to easily customize the look and functionality of your theme, without advanced knowledge of programming. It gives you the possibility to customize and manage your theme settings from a dedicated area within your Wordpress Admin. Tesla Framework works smoothly, is intuitive and easy to use, once you install one of our themes you will be able to personalize its logo, site background and color, SEO options, social media networks and more; all from one place.
Our Framework is in continuous development and improvement process, we are working hard to provide you an easy administration tool, and we're guided by the latest UX trends and new technologies.
To personalize your theme you need to follow the instructions below.
TeslaThemes framework is a powerfull tool that helps to customize your project. Bellow is described all options step by step.
TeslaThemes framework added in the new version new features and filtered options by priority.
TeslaThemes Framework Sections
- General Options
- Customize defaults
- 404 Error
General Options sections
This option page has three sections with many options
Section A: Layout
This section has option to switch between Wide and Boxed version of your project.Note: This option is a Global one and will affect entire project.
Section B: Favicon
Here is the option to set your favicon. You can use any png, and our functions will set it for any device.
Section C: Background Settings
The options is for customize project background. It possible to set custom image background or solid color.Note: This option is a Global one and will affect entire project.
Use these settings to set custom typography for each typo element.
For better results we recommend to read this article Web Typography
Section A: Global Typography
This section has three options: Text color, Font, Font size. Those settings will be setted for the body tag.
Section B: Links Style
Here is the options to change Font, Text Color, Font size for the tag "< a >" (anchor tag);
Section C: Headings style
Styling the project heading (h1-h6). It possible to change Text color, Font and Font Size for each heading
Our theme has a palette of colors and this section is best to change global colors.
Teslathemes changed theme building philosophy. Now we develop a frontend framework, to help developers to reduce time and optimize the theme, also help users to customize their project by himselfs without extra help.
Theme "Hotelia", have six base colors (Blue, Red, Green, Yellow, Brown, Violet). Those colors was used for all our UI elements, but only one color dominate - "Blue"
In our framework we added a section to customize your project header.
Main changes possibile for the headers:
Can be set Custom background, Solid color background, Padding, Margin. Also, you can drop your custom content or any shortcode.
Set your brand logo for your project. Also here you can find many option to align your logo. Also you can use text logo with any Google font.
Cusomize your navigation, change links colors, hover and position
Set your footer as you want. Add or remove widgets, cahnge color and even more.
Section A: Footer Style
Change the color of footer widget bar or hide it
Section B: Footer Logo
Add footer logo and a little bit info related to your business
Section C: Social Footer
Add social link into the footer. If isn't set any social link, it will not be showed.
Section D: Instagram info
Instagram account settings
Paste your content in coherent input and it will be showed on 404 page
Section for hardcoded customization. Here you can drop your cusom CSS or JS.
If you use the subscribe for on your project, all incoming data will be showed in thie section.
To clear, export, import options for the settings explained above, go to WP Admin -> Tesla Theme -> Export/Import Options.
Clear Options: Restores all the inputs to default values. You will lose all customization made in the theme options tabs.
Import Demo Options: Imports the options predefined by our developers as seen on demo page.
Export Options: Saves the current options to a file. This file can be later used to import options as described below. Useful when migrating to a new server.
Import Options: Loads options from an earlier exported file.
Import Demo Content
To import the content that is used on our demo page, go to WP Admin -> Tesla Theme -> Import Demo.
Some error may happen due to permissions or repeating media. If the final message is green and successful just ignore them. If it fails or takes longer than 15 min to load please contact our support team and send the WP + FTP credentials.
Wordpress will check for updates each hour and our themes will be displayed on the WP's updates page automatically.
To check for updates manually go to WP Admin -> Tesla Theme and at the top click on the Check Updates button. If there are updates, the newest version will be displayed and the "Go to updates page" button will appear, clicking on it will lead you to the Wordpress' updates page.
Select the checkbox next to the Tesla Theme and then click on Update Themes
If you get any errors during this process please be sure that WP has permission to write in /wp-content folder.
Custom Posts & Shortcodes
To ease the process of creating a website our TeslaFramework combines Theme Options, Custom Posts, Shortcodes and Templates.
Most of the custom posts are linked with a shortcode that you can use on any page. Some will need a specific page template to be called on. Others have their own placement and will be used as content for static locations.
The best way to understand and start working with our custom posts and shortcodes is to Import Demo Content and modify it.
Next we will explain each custom post in part. It's parameters and limitations of use. But don't be afraid to experiment.
"Hotelia" theme has built in three powerfull shortcode "Visual Composer", "Revolution Slider" and "WooCommerce". Thise plugins give you opportunity to customize the theme without any coding knowledge.
The theme has two custom posts, tons of shortcodes and two type of custom templates.
- Room (Product woocomerce's default post)
- Guest book
All shortcodes via Visual Composer are self explained and if you need our help you can use our support forum.
- Blog col two
- Blog col three
All pages from "Hotelia" theme was built using Visual Composer plugin, taht mean based on shortcodes. To understand better, we recommend you to import demo content and switch Visual Composer to "Classic mode" and you will descover regular shortcodes.
To customize the theme we prepare couple CSS helper classes:
|text-left||Move text to left|
|text-right||Move text to right|
|text-center||Center align text|
|uppercase||Text Transform: all caps lock|
|text-white||text color white|
|text-blue||text color blue|
|text-dark-blue||text color dark blue|
|text-red||text color red|
|text-dark-red||text color dark red|
|text-green||text color green|
|text-dark-green||text color dark green|
|text-yellow||text color yellow|
|text-dark-yellow||text color dark yellow|
|text-brown||text color brown|
|text-dark-brown||text color dark brown|
|text-violet||text color violet|
|text-dark-violet||text color dark violet|
|text-dark||text color with black rgba|
|to-left||Floating element to left|
|to-right||Floating element to right|
|dark-blue||Background dark blue|
|dark-red||Background dark red|
|dark green||Background dark green|
|dark-yellow||Background dark yellow|
|dark brown||Background dark brown|
|dark violet||Background dark violet|
Please see how is look a page builted with Visual Composer
Visual Composer for WordPress is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.
Have you ever noticed how much time you spend fighting with [shortcodes]? No more trial and errors with “shortcodes magic” – Visual Composer will take care of that.
With the Visual Composer your are able to work with responsive design – check out how you website will look on mobile devices during page building process with one click only.
Add columns, rows and choose from 40+ predefined elements divided in logic groups with single click, by using intuitive and handy UI. Then simply use your mouse to drag elements around to re-arrange them. Or use your creativity and skills to extend Visual Composer with unique elements by using our developer API.
Visual Composer is #1 Best Selling drag and drop frontend and backend page builder with 70k+ websites already powered. Join now and create beautiful websites in shortest possible time and with minimum efforts and of course – no coding and [shortcodes].
For more information about Visual composer you can find here: http://kb.wpbakery.com/index.php?title=Visual_Composer
Shortcodes Available in Visual composer
Insert text using default editor
Insert horizontal line
Separator width text
Insert header with line
Insert Alert box
facebook, Twitter, Google+, Pinterest
Insert social sharing buttons
Insert FAQ toggle
Insert single image
Insert Tour section
Insert Post grid
Insert Carousel width posts
Insert Posts Slider
Insert Widgeted sidebar
Call to action
Insert Call to action
Insert Video player
Insert Google Map
Raw HTML, JS
Insert Raw HTML, JS
Insert Flickr Widget
Insert Progress bar
Insert Pie chart
Insert Revolution Slider
Insert whitespace with custom height
Heading text with lot of options
Insert facilities in your pages
Insert Address box on your pages
Insert Custom Ajax Contact form
Insert Custom Booking form
Insert Custom Ajax Guest form
Insert widgets as shortcodes
Create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.
This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
This easy to use WP feature will help you create fancy layouts with 2 clicks. When adding a page you can choose from different templates:
Used width Visual Composer
Template for generate landing pages
Hotelia has 2 custom widgets:
- Hotelia - ADS
- Hotelia - Recent Posts
Also, All default widgets are well styled and can be used in the main sidebar or in footer sidebar
Woocommerce polugin is required to be installed in order to use 'Hotelia' theme.
'Hotelia' theme supporting the latest verion of 'WooCommerce' plugin, please foloow steps bellow to setup shopping pages for your project.
After succesfull install, in top menu bar should be appear the shopping cart button
If the shopping cart buttons isn't in your menu bar, we advice you to check your plugin status.