CASA ENSUEÑO
Thank you for purchasing Sabor del Mar Hotel Template. We can't wait to see the amazing websites you get to develop with it. Use this page to get familiar with the basics and learn how to edit pages and components. If you have any questions, reach us out to support@thepapestielliz.com
Webflow basics to help you get started with the template
1
2
The Style Guide page will help you to ensure a continuous brand experience and the possibility to quickly change the styles of the main components all over the template.
How to manage the main stylings of this template
1
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
2
Sabor del Mar template uses typography formatted with search engines and accessibility in mind.
There are two fonts site-wide in this template, and the main one is set up in the Body (All Pages) selector. Changes to this selector (like the font) will pass down to all your text. This is a great way to set defaults so the font can match your brand.
3
This hotel template uses VW as units for the Container sizes. This means that the container element has full width (100%) that fill up the entire viewport’s width.
4
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:
5
Since this template has asymmetrical grids that use various spacings between elements, both horizontal and vertical, there are special classes to handle them.
For horizontal spacing there are global classes that can be used to all elements:
For vertical spacing Div Blocks are used instead, with a class name of 'Divider' to which a combo class is added.
Other things to keep in mind
1
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:
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.
2
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:
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:
Delete the Navigation // Dark Symbol from the Navigator
Edit the Navigation // Light to your liking
Add the Navigation // Dark from the Symbols Tab once again
For better organisation, put both the symbols one below the other
3
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.
4
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.
5
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">.
6
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.
7
This template has been created in a way to allow you to easily modify it and adjust it to your needs. But if you want a custom website, tailored to your needs and entirely developed in Webflow, check out our website and feel free to get in touch with us for a free consultation.
