Abalone Hotel & Villas Logo
Documentation

Getting Started

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

Basics

Webflow basics to help you get started with the template

1

Webflow Crash Course

To use this template in the best way possible, we recommend a basic to intermediate level of understading how Webflow works. If you are a beginner, check out the resources below that will help you get the best out of this Hotel Template.

2

Style Guide

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.

Styling

How to manage the main stylings of this template

1

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.

How to edit color swatches

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.

2

Typography

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

Containers

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

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

5

Spacing & Dividers

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:

  • Left Padding -  adds 5vw padding on the left
  • Right Padding -  adds 5vw padding on the right
  • Right Padding 10 - adds 10vw padding on the right

For vertical spacing Div Blocks are used instead, with a class name of 'Divider' to which a combo class is added.

How to add a 'Divider' between elements

Various

Other things to keep in mind

1

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.

Full Frame Image for Desktop Version

Full Frame Image for Mobile Version

2

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

3

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.

How to filter current room so it won't be shown in 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.

Sort Order

4

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.

5

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">.

6

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.

7

Custom Website Design

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.