Welcome!
Welcome to Hotell Pro theme’s documentation page!
This documentation talks about how you can install the theme on your WordPress site, how to customize the theme to suit your needs and a couple of other things that you’ll need to know to get going.
Recommended Server Requirements
Although having WordPress installed in your server is enough to install the theme, we recommend that your server meets the following versions:
- PHP version 7.0 or greater.
- WordPress version 5.1 or greater
Installing The Theme
Installing the theme is quite straightforward.
Download and save the ZIP file containing all the theme files. We’ll be using it later on.
Step 1. Go to your WordPress dashboard and head over to Appearance > Themes.
Step 2. Inside Themes, click on Add New (plus icon).
Step 3. Click on Upload Theme located near the top right.
Step 4. It will then ask you to choose the ZIP file for the theme. Navigate to and select the ZIP file for Hotell Pro theme that you downloaded earlier. Once done, click on Install Now.
Step 5. Click on the Activate button after the theme installation finishes.
That’s pretty much it! Reload your website to see the gorgeous theme in action!
Installing Recommended Plugins
Hotell Pro Theme requires some essential plugins to be installed for some components to work: BlossomThemes Email Newsletter for the Newsletter Section, Contact Form 7 for contact forms, One Click Demo Import for importing Demo, and Hotel Booking Lite for managing your hotel booking services.
To install the plugins, follow the following steps:
Step 1. Go to your WordPress Dashboard. Head over to Plugins > Installed Plugins.
Step 2. On the top it displays a notice, asking you to install the recommended plugins. Click on Begin Installing Plugins.
Step 3. Select all the plugins and choose Install from the dropdown menu. Hit Apply.
Step 4. Head over to the Installed Plugins page once again. Select all the plugins, choose ‘Activate’ in the dropdown, and click on Apply as shown below.
That’s it. The plugins are now installed, activated, and ready to use. You’re all set!
Configuring The Theme
Now that you have the theme successfully installed, time to tweak the customization settings to make it your own!
As with all the other themes from GLThemes, Hotell Pro theme comes with tons of customization features to truly give you full control over the look of your website.
We’ll be exploring various customization options available in the theme’s customizer in this section.
Site Identity Options
While inside the customizer, navigate to Site Identity to edit settings such as Header title and tagline, add a (optional) logo, and add site icon (optional).
Inside Site Identity, you can add a logo via the Select Logo option, change your site’s title in the Site Title option, change the tagline in the Tagline option, and add a site icon in the Select Site Icon option.
You’ll be able to see the live preview as you edit the options.
Change Basic Appearance Settings
You can change the basic appearance of your website through the Appearance Settings option inside the customizer as shown below.
While inside the Appearance Settings option, you can change the Colors and Background Images in their respective settings.
Change Website Colors
While inside Appearance Settings, go to Colors.
Available Color Options:
- Background Color: The color of the hindmost background. Color changed for visibility. Default is #FFFFFF(white).
- Primary Color: The accent color used in Hotell Pro. Most used color site-wide. Default is #af9065.
Example Usage:
- Secondary Color: The secondary accent color. The second most used color site-wide. Default is #ffaC41.
Example Usage:
- FallBack SVG Color: This is the default color of the SVGs which are found missing in the pages.
Typography Settings
Here you can change the Font Family, Font Weight, Font Size, and Text Transform style for Primary, Secondary, H1, H2, H3, H4, H5, and H6 fonts.
Font Family is the typeface of the font used.
Font Weight is the width or the boldness of a font.
Font Size determines the size of the letters in the font.
Text Transform allows you to add special characters to the font, namely uppercase, lowercase, underline, and capitalize.
Change Background Image
You can add or change the background image of the whole website through Background Image settings inside Appearance Settings. By default, no background image is set.
Click on Select Image and upload the image file to the uploader. After uploading the image, you can choose variously Preset to change how the background image displays.
Front Page Settings
The front page is what makes or breaks the first impression of a visitor to your website. In the Hotell Pro theme, you’ve been given numerous options to tweak and customize various sections of the front page.
The Front Page includes the following sections: Banner Section, About Section, Accommodation Section, Amenities Section, Call to Action (CTA) Section, Services Section, Offers Section, Video Block Section, Testimonial Section, Newsletter Section, Award Section, Blog Section, Footer Top Section, and Sort Section.
To start customizing the front page, go to Front Page Settings while inside the customizer.
Inside the Banner Section, you can choose among the following banner types: Static/Video, Banner as Slider, and Disable Banner Section.
In the Pro version, you’re given two types of banner options — Static/Video CTA Banner and Banner as Slider. You can choose to disable the option in the Banner Options.
This banner type includes an image or a video as the background banner, banner heading, banner subheading, and Call-To-Action (CTA) buttons.
Customization Options:
- Header Video: You can upload a video to use as the background video for the banner. Alternatively, you can also enter a URL for a YouTube video in the given field.
- Header Image: This is the background image for the banner. Try to use the recommended image size of 1920×863 pixels for best results. Optimized, small-size images are highly suggested because of their impact on site performance.
- Title, Description, CTA Buttons: Title is the main heading of the banner while Description is the subheading. What’s more, you change the labels for the CTA buttons through here.
This banner type uses your posts and their content as a slider/carousel.
Customization Options:
- Slider Content Style: You can set the slider to use Latest posts, posts from a specific Category, or you can add your own custom pages to display. Likewise, you can create custom slider by putting custom parameters as well.
If you select Category, you can choose what category of posts to choose from from the Slider Category dropdown menu.
If you choose Pages option, you can add your own pages to cycle through via the Add New Pages button.
- Button Label: Change the button label in the front of the banner.
- Slider Auto: Enable to automatically scroll through the available slider pages/posts. Disable to require user button press to change the slider page.
- Slider Loop: Enable to infinitely cycle through the slider pages via looping. Disable to stop the slider as soon as it hits the last slider page.
- Slider Animation: Choose among 29 different slider animations. Default is Slide.
- Slider Speed: Specify how often the slider changes automatically (in miliseconds). Only effective if Slide Auto option is enabled. Default value is 5000.
Completely removes the banner section.
About Section
About section is generally configured to add a short description of your company with an image to reflect the core motive of your business.
Customization Options:
- Section Title, Subtitle, Description and View Button Options: This is where you can change the title, subtitle and description and description for the About Us section, which will be reflected in the banner. Moreover, you can add a link and a text to the “View More” button to direct your visitors to a relevant link.
Accommodations Section
This section is where you can add the accommodation services provided by your hotel-based business. It can be used to showcase the types of rooms provided by your hotel.
Customization Options:
- Section Title, Subtitle, Section Content and Button Label: This is where you can change the title, subtitle and description and for the Accommodation section, which will be reflected in the banner. Moreover, you can add a link and a text to the “Learn More” button to direct your visitors to a relevant link.
- Select Accommodations: You can select the type of accommodation from the pre set list of accommodations. Six different accommodation options are pre set and if required you can add the options yourself from Accommodation>> Add Accommodation Type.
Amenities Section
This is where you can feature your most important services or offerings provided by the hotel to your customers. For this go to Customizer > Front Page Settings > Amneties Section and add title, a short description of your offerings, and select the special facilities to showcase from the Select Accommodations option. Moreover, you can add a link and a text to the “View More” button to direct your visitors to a relevant link.
CTA (Call-To-Action) Section
CTA section allows you to include important links and details for your visitors and prompt action from them. This, in turn, helps generate and convert more leads.
Customization Options:
- Section Title, Subtitle, Background Image, and Button Options: Here you can change or set the section’s title and subtitle, upload a background image (the default blue background is used if you don’t upload one), and edit the CTA button’s label and link.
This is what a typical CTA Section looks like:
Services Section
This is where you can feature your most important services or offerings to your customers. For this go to Customizer > Front Page Settings > Services Section and add a title, a short description of your offerings, and of services you want to show on the homepage. Recommended number of services to show on the homepage is four.
Customization Options:
- Add New Service: This is where you can add new services that you wish to be displayed. Click on Add New Service button.
It will then ask you to customize the Service you just added.
Add Image is where you add the image you wish to display.
Here’s an example of the services settings and how it looks in the actual section:
Offers Section
This section lets you display the offers provided by your business to the customers.
You can list offers from Offers>>Add New.
Gallery Section
You can use this section to add an image gallery on the home page. This section can be used to showcase the beautiful images of your hotel.
To add a gallery go to Gallery>>Add New and create your Gallery.
Customization Options:
- Section Title, Section title and Section Content: Here you can change or set the title, sub title and description for your gallery.
Video Block Section
If you have a video of the services to showcase to your prospective customers, you can set up a Video from Customizer > Front Page Settings > Video Block Section.
Customization Options:
- Section Title, Video Link and Background Image: Here you can change or set the title for your video, add link to the video and a background image to showcase for your video.
[Note: The video block will not function properly if the Light Box option is turned off from Customization>General Settings>Misc Settings]
Testimonials Section
This section is all about setting up customers’ testimonials on your website. To set up testimonials go to Customizer > Front Page Settings > Testimonial Section
How To Add A Testimonial Page:
Step 1. Go to WordPress Dashboard and go to Testimonials.
Step 2. Click on Add New to begin creating a new testimonial page. On the next page, add the name of the reviewer in the Title section and the review in the description field below it.
Step 3. On the left sidebar, you can set the designation of the reviewer and the rating. You can also set the image of the testimonial in the Set Featured Image option.
Hit Publish and there we have it, a testimonial page!
Customization Options:
- Section Subtitle: The subheading for the section
- Section Title: The heading for the section
- Number of Testimonials to show: The number of total testimonials to show in the section at once. If this number is higher than the total number of testimonials pages, it will repeat the testimonials.
Blog Section
A section where your blog posts are displayed.
Customization Settings:
- Section Title and Subtitle: You can change the heading and the subheading for the section in the respective options.
- Read More text: Change the text for the Read More button.
And this is what the section looks like, after making all the necessary changes.
Award Section
This is the section where you can showcase the awards received by your hotel. It will help you to gain trust of your potential customers.
Note: You’ll need to configure the contact form 7 plugin in order to set up an appointment form on the homepage. Once configured, paste the shortcode from contact form 7 in order to showcase your desired form.
This is the section where you can add the hotel booking companies/ facilities in which your hotel is listed.
Sort Section
In this section, you can sort your homepage sections according to your preferences. You can drag and drop sections as and when required. You can even hide certain sections which don’t fit your requirements.
Allows you to rearrange the sections within the homepage.
General Settings
General Settings comprises settings that allow you to tweak several aspects of the Top Bar, Header, edit SEO Settings for your website, Post-Page settings, Performance tweaks alongside other Miscellaneous settings.
We’ll go through each setting and sub-settings inside the General Settings of the customizer and explain what the setting does, how it impacts your website, and where you can see the changes take place.
Notification Settings
Notification Settings is where you can change the settings of the topmost bar of your website, most commonly used for offering notifications. Most of the settings are mostly preferences and are localized, meaning they don’t majorly impact the whole website.
Available Sub-Settings:
- Notification Text, Notification link text and Notification Link: Here you can change the text displayed on the topbar, and the notification label and link.
As the button implies, the Show link in a new tab makes it so that the link in this section, if clicked, opens up a new browser tab.
Header Settings
Header Settings is where you can change the settings of the header of your website. Most of the settings are mostly preferences and are localized, meaning they don’t majorly impact the whole website.
Available Sub-Settings:
- Location, Email, Button Label and Link: You can set or modify the location and email details shown on the header through these settings. You can also change what text the buttons on the header hold and their links.
Social Media Settings:
- Enable Social Links: Toggle to enable or disable the social link icons and links on the header.
- Social Links: This option is where you can add, remove and customize the social links present on the header. This option is only effective if you have Enable Social Links turned on.
To add a new link, click on the Add new links button.
For this demo, let’s set up 3 social media links for the header — Facebook Link, Twitter Link, and Instagram Link.
For the first link i.e, the Facebook link, choose “Facebook” from the Social Media dropdown menu.
Add the link to your Facebook profile in the Link field.
The steps for the other two links are quite similar. Here’s the end result:
Click on Publish and you’ll be able to see the changes in the header.
Social Sharing Settings: You can use this setting to add sharing options in your posts to social media such as Facebook and Instagram.
Enable Social Sharing Buttons: Enable or disable social sharing buttons on archive and single posts.
Enable Open Graph Meta Tags: Disable this option if you’re using Jetpack, Yoast, or another plugin to maintain Open Graph meta tags.
SEO Settings: You can enable this setting to show the breadcrumb in the inner pages.
Post(Blog)-Page Settings
These settings apply to all the Single Posts on your website, which are generally blog posts.
Available Sub-Settings:
- Hide Prefix in Archive Page: Enable/disable to show or hide prefix in the archive page.
- Hide Author, Posted Date, Post Views: Enable these settings to hide Author name, Date of Publishing, and number of views on your Single Page Posts (blog posts).
This is what the blog post looks like before turning on these settings.
After turning on each of those settings, this is what the same page looks like:
- Related Posts Section Title: You change the Related Posts heading displayed at the end of each blog post by editing this setting.
By default, the text is set to “You might also like”:
Performance Settings
Performance settings include settings that impact the performance of your website, and in most cases, increase the overall performance of the website.
Caution: Some of the settings come with a tradeoff, and you may not be able to use particular features if one or more of the settings are turned on. Likewise, it may conflict with other external plugins which are related to performance and SEO.
Available Sub-Settings:
- Lazy Load: Lazy loading is a way of intentionally delaying the load or initialization of resources until the resources are actually needed. Enabling this option will lazy load the featured images, thereby improving load times and conserving bandwidth.
- Lazy Load Content Images and Gravatar: Toggling this option on will lazy load content images and gravatar icons, potentially improving site performance.
- Defer JavaScript: “Defer” is a boolean attribute in JavaScript.
If this option is enabled, the ‘defer’ attribute is set to TRUE for all JavaScript content on the website, if available. This causes the JavaScript file to be downloaded/loaded asynchronously or in parallel to parsing the page, thereby improving page speed.
- Remove ‘ver’ parameters: By default, WordPress adds ‘ver’ (referring to version) parameter at the end of JS and CSS files in HTML tags. This specifies the browser to not cache those files. Enabling this option will remove ‘ver’ parameters, which tells your browser to cache the JS and CSS files next time you visit the webpage. This can drastically improve the load time and on-site performance due to caching being enabled.
Misc Settings
Misc Settings contains a few other miscellaneous settings that affect various parts of the website.
Available Sub-Settings:
- Admin Bar: Toggle to enable or disable the Admin Bar on the top of the screen when you’re logged in to your WordPress backend of the website. The Admin Bar allows you to easily edit pages and customize various parts of the website on-the-go.
- Sticky Header: Toggle to enable or disable the sticky header button at the lower right side of the page.
- Error Page Image: If the requested page redirects you to the error page then the image uploaded on Error Page Image Upload will be shown to the user.
Breadcrumb Image Settings
You can use this setting to upload images for the background of the error page, offer page, facility page, gallery page, and testimonial page.
Layout Settings:
Layouts are essentially how the components are displayed in a particular section or theme component — their positioning, colors. size, etc.
Consider them as themes or presets for theme sections. With different layouts, you can fully revamp and change the look of Headers, Footers, Single Posts, and so forth without having to add any code or use any plugin.
Hotell Pro comes with a variety of layouts for the Header, Sidebars, and Banner.
To start customizing layouts, head over to Layout Settings inside the customizer.
Header Layouts
There are a total of seven different header layout options in Hotell Pro.
We’ll label each layout from 1 to 7, top to down to make it easier to understand.
- Header Layout #1: Header with Top Bar above the navigation section.
- Header Layout #2: Top Bar disabled. Search bar enabled and menu in the center.
- Header Layout #3: Top Bar enabled. Social Links at the hamburger menu.
- Header Layout #4: Top Bar enabled, logo position at center and menu below logo.
Slider Layouts
You can easily customize the way the slider on the homepage looks by browsing through the two available slider layouts in this theme.
We’ll numerically label each layout from 1 to 3, top to down.
- Slider Layout #1: Buttons, title and subtitle aligned on the left side of image.
- Slider Layout #2: Solid colored background. Image aligned on the right; title, subtitle and buttons on the left.
There are 3 layouts for Pages in Hotell Pro theme. Pages include any page you create through the Admin Panel or the template pages created by us such as Contact Page, Testimonial Page, etc.
We’ll mark each layout numerically from top-right-down as you see on the screenshot above.
- Page Sidebar Layout #1: Sidebar completely disabled.
- Page Sidebar Layout #2: Sidebar on the left side of the page.
- Page Sidebar Layout #3: Sidebar on the right side of the page.
Note: The Page sample used here is the default Privacy Policy page. All of these layouts look the same on any Page.
There are 2 layouts for Posts in Hotell Pro theme. Posts include any Post you create through the Admin Panel which is generally a blog post.
We’ll mark each layout numerically from top-right-down as you see on the screenshot above.
- Page Sidebar Layout #1: Sidebar completely disabled.
- Post Sidebar Layout #2: Sidebar on the left side of the page.
Archive Post Layout
There are 2 layouts for Archive Posts in Hotell Pro theme. Archive Posts include any Post you create through the Admin Panel.
Archive Post Layout #2: The Archive posts age arranged in a list format.
Rooms Archive Layout
There are 2 layouts for Rooms Archive in Hotell Pro theme. Rooms Archive Posts include any room post you create through the Admin Panel.
Rooms Archive Layout #1: The Archive posts age arranged in a grid format.
Rooms Archive Layout #2: The Archive posts age arranged in a list format.
How To Create A Page in WordPress
Creating pages in WordPress is a simple process. Pages can be fully custom or you can create a page with premade templates.
Follow the steps below to create a simple new page for your website:
Step 1. Log in to your WordPress Admin Panel. Go to the Pages option located in the left sidebar.
Step 2. Click on Add New at the top. You should have a screen that looks like this:
You can add titles, paragraphs, and many other blocks through the editor. For now, let’s create a basic page titled “My First Page” and a dummy text for the paragraph.
Step 3. Click on Publish button located on the righthand sidebar.
That’s pretty much it. We’ve created a page titled “My First Page”.
Here’s what the page looks like:
You can add different blocks, headings, and media files via the + button in the editor.
Set Up and Configure Accommodation Page
Let’s create an Accommodation page for your website with the Hotell Pro theme.
Here’s what our recently created accommodation page will look like:
Now we need to add accommodations to our hotel for them to be displayed on this page. Let’s do that next.
How To Add Accommodations
Step 1. Go to your WordPress Dashboard and go to Accommodation in the left sidebar.
Step 2. Click on the Settings option and select the bed types then save the settings.
Step 3. Click on the Amenities option and select the pre-defined amenities or add new amenities.
Step 4. Click on the Seasons option and select the pre-defined seasons or add a new season.
Step 5. Click on the Categories option and select the pre-defined categories or add a new category.
Step 6. Click on the Accommodation Tags option and select the pre-defined tags or create a new tag.
Step 7. Click on the Services option and select the pre-defined services or add a new service with the price.
Step 8. Now you can click on the Add New Accommodation Type option and add new accommodations.
Hit Publish and see the changes.
Here’s what our new Accommodation Page looks like now:
You can populate this page by adding more accommodations.
Set Up and Configure Testimonials Page
Let’s create a Testimonials page for your website with Hotell Pro theme.
Step 1. Add Testimonials of your own. Follow the below steps to add one:
Go to your WordPress dashboard and on to the Testimonials section in the left sidebar.
Click on Add New button.
On the next page, enter the required details. You can add an image of the reviewer in the Featured Image section in the right sidebar.
Finally, click Publish and it should be listed on the Testimonial page you just created.
To view the Testimonial listing Page:
Step 1. View any of the listed testimonial from the Testimonials option.
Step 2. Click on the Testimonials option on the image breadcrumb.
Customization Options:
- Testimonial Section: You can conveniently change the number of testimonials to show in the testimonial page before the user has to “Load More” through the slider option inside this section.
Let’s create a Booking page for your website from a ready-made template that comes with Hotell Pro theme.
Set Up and Configure Facilitiy Page
Let’s create a Facility page for your website with Hotell Pro theme.
Customization Options:
We’ll go through the customization of each of the sections on the Contact Us Page.
To view the Facilities listing Page:
Step 1. View any of the listed facility from the Facilities option.
Step 2. Click on the Facilities option on the image breadcrumb.
Set Up and Configure Contact Page
Let’s create a Contact page for your website from a ready-made template that comes with Hotell Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose the Contact page.
Step 3. You can configure other settings such as adding an Excerpt or setting the Featured Image for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Time to configure the theme!
Go to your Customizer and head over to Contact Page Settings to begin customizing your newly created Contact page.
Customization Options:
- Contact Details Section: Here you can change the text for Section Title, Subtitle, Location Title, Description, Mail Title, your email address, Phone Us heading title, your phone number, and details about your hours of operation.
Ensure that the changes are reflected on the Contact Us page by publishing the changes and refreshing the page.
As expected, we can see the changes on the page.
- Google Map Section: You can embed Google Maps of your location via this section. You can always disable this section by toggling the Google Map Settings button off.
To add a new embed for your location, go to Google Maps and enter your location. For this demo, we’ll input the following address: Empire State Building, West 34th Street, New York, NY, USA
Click on the Share button.
And on the Share page, go to the Embed a Map tab. Copy the link shown.
Go back to your Contact Page Settings, and enter the embed code you just copied in the Embedded Google Map field.
Refresh the page to see the changes.
- Contact Form Section: Contact forms are essential components of a Contact page. You can add a contact form to your page by creating and configuring a form in Contact Form 7, which is a plugin we’ll use. If you don’t have the plugin installed, please refer to Installing Recommended Plugins section to learn how to install it.
You can change the form title in the Contact Form Title field. For this demo, we’ll keep it as it is.
To get a shortcode for a form configured in Contact Form 7, follow the steps below:
Note: You must have the Contact Form 7 plugin installed.
Step 1. Go to your WordPress dashboard and go to the Contact page from the sidebar.
Step 2. Click on Add New to add a new contact form. Enter your form title in the given field.
Step 3. You can configure the form as you please, but for now, we’ll use the default template.
Step 4. Configure the Mail settings to make sure the contact form is fully functional and sends mail to the right email address.
You can configure other settings for the form as well. For now, this will do for us. Hit the Save button.
Step 5. Copy the shortcode shown on the top.
Go back to the Contact Us Form settings, and paste the code in the Contact Form Shortcode field as shown below.
Hit Publish and refresh the Contact Us page to see the changes in action.
Set Up and Configure Offers Page
Let’s create an Offers page for your website from a ready-made template that comes with Hotell Pro theme.
On to the customization part!
- Offers Details Settings: Inside the Offers Details Settins , which is the main emphasis of this page, you’ll find the following options:
- CTA Section: CTA section allows you to include important links and details for your visitors and prompt action from them. This, in turn, helps generate and convert more leads. Inside yhis section you’ll find the following options:
- FAQ Section: Inside the FAQ Section you can add section title, section subtitle and also add new FAQ options.
Here you change the title and subtitle of the section add section description and Button label.
To view the Offers listing Page:
Step 1. View any of the listed offers from the Offers option.
Step 2. Click on the Offers option on the image breadcrumb.
Set Up and Configure Gallery Page
Let’s create a Gallery page for your website from a ready-made template that comes with Hotell Pro theme.
To view the Gallery listing Page:
Step 1. View any of the listed gallery from the Galleries option.
Step 2. Click on the Galleries option on the image breadcrumb.
You can tweak the footer of your website through these settings.
Recommended Image Sizes
Image sizes can impact the performance of your website, which is why we suggest you use the following sizes for images on the website (in pixels):
- Featured Posts = 440px * 304px (Width * Height)
- Portfolio Archive = 610px * 458px (Width * Height)
- Slider Image = 1920px * 853px (Width * Height)
Further Support
If you have any issues about how to install the theme, set up the pages, or customize the website elements, please submit an inquiry ticket at the Support page. You can also directly mail us at [email protected]
Theme Installation Service
If the theme installation process is a little too technical for you, we offer theme installation services at an extremely affordable price. Check out our Theme Installation service page for more info.
Theme Customization Service
If you want professionals to customize the theme for you, or make internal changes to the theme’s core elements to better suit your liking, our Theme Customization service might just be the right service for you.