Introduction

This document will go through all of the options regarding the Content Management System (CMS). The CMS is used for quick creation of the Landing Page which can be used as a substitute for a Website. The Landing Page will contain the Booking Engine and other minor modifications that the client wants to add. The addition of CMS also allows customization of the Widget.


TABLE OF CONTENTS


Setup

To set the CMS up, we will need to access the CMS Website found in the Admin Tabs:


Image 1. - CMS Website Tab Location


After accessing the CMS Website, we will be redirected to another Window which shows us a preview of how our CMS Website will look like. 


Along with the preview, we will also be able to see the Theme Customization on the Left-hand side of the window.


Image 2. - CMS Theme Customization Sidebar


Here we will be able to create a Landing Page and Customize it completely using the Options shown to us on the Theme Customization sidebar.


CMS Customization


Theme Styles

Here we will be able to Change the Style of the Whole theme.


Select Theme

The first option we are able to see on the Customization sidebar is the Theme Selection, here we can select the theme of the whole CMS website. There are currently 3 themes available, and right after changing the theme, we will be able to see the changes in real-time.


Image 3. - Theme 1 Preview


Image 4. - Theme 2 Preview


Image 5. - Theme 3 Preview



Global Styles

The next option we can see will change the Style of the Header and Footer of the Landing Page.


Image 6. - Advanced Global Style Header


Image 7. - Advanced Global Style Footer


Image 8. - Basic Global Style Header


Image 9. - Basic Global Style Footer



Next up, we will be able to see all of the options to customize the Header of the Landing Page, these options vary from the Style of the Header to the Information that can be set in it.


Select Styles

We will be able to select a pre-made set of Styles for the Header itself:


Image 10. - Style 1 Header Preview



Image 11. - Style 2 Header Preview



Image 12. - Style 3 Header Preview


Logo URL

We will be able to set the Custom Logo by either setting up the custom HTML for it, or having a default Logo set.


Image 13. - Header Logo Option


Top Header

These options will only apply to the Top part of the Header:


Background Color

This option will change the Background Color of the whole Top part of the Header:


Image 14. - Top Header Background Color


Contact Info

For the Contact information, we will be able to set the Phone Number and Email, and Customize the Color for both of those options and their icons


Image 15. - Top Header Contact Info Customization


Social Links

The Social links can be added to the pre-existing icons found on the top-right side of the header. After we add the Links to each of the Socials available, we will allow the redirection to those links once the icons are clicked on. We can change the Icon Color, the Color of the Hovering effect when the Cursor is directly on the Icon, and the Background color of the Icons.


Image 16. - Top Header Social Links Customization


Bottom Header

These options will only apply to the Bottom part of the Header:


Background Color

This option will change the Background Color of the whole Bottom part of the Header:


Image 17. - Bottom Header Background Color


Navigation

These options will allow the complete customization of the Tabs that are found on the Bottom Header. We will be able to change their order, Add new Tabs and Customize their Colors and Hovers. All of the Tabs will need to be linked with the appropriate URL so they can be used for the redirection.


Image 18. - Bottom Header Navigation Section



To add new Tabs to the Bottom Header, we will need to set it's name and add the valid URL where we will be redirected once clicked on that particular Tab.


Image 19. - Bottom Header Navigation Items


After setting up all of that information and clicking on Add, we will see the new Tab being shown in the order chosen from the Navigation options


Image 20. - Bottom Header Navigation Items Order


Lastly, we will be able to change the Color of all of the items being shown, their Hover colors and the respective Background of the Hover effect:


Image 21. - Bottom Header Navigation Items Customization


Primary and Secondary Buttons

The Primary and Secondary Buttons will be used for the Customers to Log in to our Website or Sign up if they do not have an account created. In the following options, we will be able to change the Colors of those 2 buttons, their respective Backgrounds and Hover Colors.


Image 22. - Bottom Header Primary and Secondary Buttons Customization


Hero

This section will change how the Middle part of our Website looks like. Here, our Booking Engine will be shown along with any information we want to add.


Select Layout

The first option here is the Layout option for the Hero, we will be able to choose from any of the two options available to us, and they will change how the Layout of the Booking Engine is. We can choose to have Full Width of the Booking engine, or have it more compact in it's Half width version.


Image 23. - Hero Center Full Width Layout


Image 24. - Hero Center Half Width Layout


Background Image URL

Along with changing how the Booking Engine looks, we will be able to choose a Custom Background to be shown behind it. This can either be done by setting a Custom HTML, or by just using a default Background:


Image 25. - Hero Background Image


Hero info

In the Hero Info options, we will be able to choose how the text next to (or above depending on the layout) will look like. We can change the Sub Title, Title and the Description of that Information.


Note: To send a part of the text to a next line you can use a <br> option to break line. For instance, this is how the Title has been formatted as per image bellow: Don't just dream about it, <br> plan it. Travel. This will work the same way for Sub Title and Description too.


Image 26. - Hero Information


Along with the text that is being shown, we will also be able to fully customize the Widget itself.


Select Form Type

Here we will be able to choose whether we want to have the Simple or Expedia-like type of Form:


Image 27. - Simple type of Booking Engine



Image 28. - Expedia type of Booking Engine


After choosing which type of Form we prefer to have shown on our Landing Page, we can also customize the Form using the Search Form color options:


Note: To see the changes, "Save & Preview" will need to be selected. The Form requires saving in order to show all of the changes that have been previously made.



Image 29. - Search Form Customization


The Footer can be found at the bottom of the Landing Page, here we will be able to set the Contact Information along with some Link Sections with the Custom Links we want to add to our Page. The Footer is split between the Top Footer and the Bottom Footer.


Select Style

As for the other options, we will also have 3 different options when it comes to the Footer Style:

Image 30. - Footer Style 1


Image 31. - Footer Style 2


Image 32. - Footer Style 3



Logo URL

We will also be able to add the Logo to the Footer, which can be chosen from the Custom HTML or we can set the Default Logo.


Image 33. - Footer Logo


Same as the Header, we will be able to independently customize the top and the bottom part of the Footer. This gives us more control on what exactly we want to change, and if we want them to look differently.


First, we will be able to change the Background Color of the Footer Top and also change the Colors of all the Titles on it:


Image 34. - Footer Top Background and Title Color


Sections

Here we will be able to change the First Section regarding the Contact information. We can change anything from the Title, the Text that is found in that section, the Text Colors and the Icon Colors


This also applies to the different Sections, some of them might not have the Icons, but changing the Text modification and It's Coloring will be available per default.


Image 35. - Footer Top Content Section


The Bottom part of the Footer will be mostly focused on the Socials and the Copyright. It can too be customized as the Top Part, except with some different options and less content. 


Background Color

The first option we see in this section is the Background Color, which will allow us to change the Color of the Background for the Bottom part of the Footer.


Image 36. - Footer Bottom Background Color


Copyright Section

Here, we will be able to choose the description for our Copyright Section in the Footer Bottom. We can add any custom text here that we wish to show in this particular section of the Website.


Image 37. - Footer Bottom Copyright Section Description


Social Links

Along with changing the Copyright Section, we will also be able to Customize the Social Links that are being shown in the Footer. We will need to set the link towards every of the Socials, which will allow us the redirection to the said URLs. After that, we can Customize each and every Social's Icon and Hover.


Image 38. - Footer Bottom Copyright Section Description


Privacy & Terms Section

Here we will be able to add any Links regarding to the Privacy & Terms, change their Colors and their respective Hover effects. We can have multiple options here.


Image 39. - Footer Bottom Privacy & Terms Section