Getting Started

Colors

Sabor del Mar Template uses color swatched which means it is very easy to update the colors site-wide to your liking.

In order to do this, you just need to go to the Style tab in the right sidebar, then scroll to Colors in Typography section, and if you click the color, you will be able to see all color swatches and edit them to be updated site-wide to any color needed.

‍

‍

Notes

• Change the color of Headings and Paragraphs to beige, simply by adding the class 'Light' to the element.
• Change the color of Section element to green or dark beige by simply adding the combo class 'BG Color 1' or 'BG Color 2' respectively.

Images

VH units are used to define the height of the images throughout this template. Below is a list of the classes you can use to adjust the height of the images to your preference. Simply add or change the class with one of the following classes:

• Full Frame Image -  100vh height
• Large Height -  75vh height
• Medium Height -  70vh height
• Small Height - 50vh height
• Extra Small Height - 35vh height

Global Classes

Sabor del Mar hotel template uses some global classes to additionally customize the look of the website in the best way possible. Here is a list of the main global classes used:

• Mobile None - use it if you want an element to be hidden for mobile devices
• Mobile Only - use it if you want an element to be displayed for mobile devices only
• No Padding Mobile - use it if you want to set the Padding to 0 on elements for mobile devices

With the use of these global classes you have a full control over desktop vs. mobile experience. It especially comes in handy to have the Full Frame Image element for desktop and mobile to your preference.

‍

Navigation

The navigation bar in this template is completely custom made. There are 2 different versions of the logo, full version logo and shorter version logo. The shorter version is consisted of type only and it's shown in the mobile version.
If you'd like to have 1 logo only, do the following steps:

• Remove class 'Mobile None' from desktop version
• Delete the image of the shorter version of the logo in the Mobile Portrait View

‍

Step 1

‍

Step 2

‍

‍

Edit the Navigation Bar

There are 2 types of Navigation: light and dark. Both of them are symbols, which means that once you edit them, the changes will be applied to all the navigations throughout the template.

To edit the dark version of the navigation bar, simply open a page where only the dark navigation is present. An example would be 'The Hotel' Page.

‍

To edit the light version of the navigation bar, follow the next steps:

Step 1

Delete the Navigation // Dark Symbol from the Navigator

‍

Step 2

Edit the Navigation // Light to your liking

‍

Step 3

Add the Navigation // Dark from the Symbols Tab once again

‍

Step 4

For better organisation, put both the symbols one below the other

CMS Filters

Right now the CMS is consisted of 3 rooms only. That means that in the last section in each room, where the user can continue exploring other rooms, the current room will be displayed as well. Once you add more than 3 rooms to the template, you should filter out the current room from the list.

‍

‍

The Sorting order is set to random. That means that every time the user loads the page the order of the rooms will vary.

Popup

This template has a Popup included in the homepage. It can be used to write some announcment to your users, like Covid-19 protocols. The popup will be shown everytime the user lands on the homepage. To change the duration or how the popup is displayed, you should open the Homepage Page Load interaction. This interaction is triggered on Page load in the homepage.

You can use cookies if you want to show the popup one time only (the first time the user lands on the website). If you display the Popup using cookies, don't forget to delete it from the Homepage Page Load interaction.

Notes

This template has a form that allows the user to enter check-in and check-out date and it allows you to connect it to an external booking software of choice, If you want a calendar displayed for the 'Check-in' and 'Check-out' fields, you should add it through an embedded code, where <input type="date">.

‍

Best Experience

In order to provide your users the best browsing experience, we suggest you to implement smooth scrolling to your website. In that way the interactions throughout the template will be experienced in a better way. If you don't know how to set up smooth scrolling, visit this cloneable project from Flowbase on this link.

‍