From remix link to a live hotel website

This guide takes you from the moment you buy Horae to a hotel website that runs on your own domain and takes booking requests. You do not need to know Framer or write code.

What you get

• 17 pages: Home, Rooms, Room page, About, Days here (experiences), Table & Spa, Offers, Journal, Article page, Location, Book, FAQ, Contact, Privacy, Cookies, Terms and 404. Plus a Start here page with a short version of this guide, which you delete before launch.
• 2 CMS collections: Rooms and Journal. Every room and every article gets its own page automatically.
• A booking calendar with nightly prices by season, full days, closed months, minimum stay, guests and a total with city tax.
• A design system: 11 colour styles and 25 text styles, already sized for desktop, tablet and phone.
• SEO set up: titles and descriptions on every page, dynamic titles for rooms and articles, alt text and structured data for Google.

What you need

• A Framer account. Free to create at framer.com. You can edit and preview the template for free.
• A paid Framer site plan, when you go live on your own domain. Horae uses exactly two CMS collections, so it fits the Basic plan. Check current prices and limits on framer.com/pricing; Framer changes them from time to time.
• Your own content: photos, room details, prices, texts, address and contact details.
• Optional: a domain name (for example yourhotel.com) and, if you already use one, your booking engine's property ID.

Framer in 5 minutes

If you have never used Framer, these are the only ideas you need. Everything else in this guide builds on them.

Get your copy

1. Log in to Framer in your browser. Create a free account first if you do not have one.
2. Open your remix link. You received it on the order confirmation page and by email after payment.
3. Choose the workspace where the project should go, if Framer asks. Framer copies the whole template into your account. This takes a few seconds.
4. Open the project. It is now yours: edit anything, nothing you do affects the original.
5. Rename it from the project menu (top left), for example to your hotel's name.

Your first afternoon

Change things in this order. Each step makes the next one faster, because styles and components update the whole site at once.

1. Colours and fonts, 10 minutes. The whole site changes at once.
2. Hotel name, logo and navigation in the header and footer, 10 minutes.
3. Your rooms in the CMS: names, texts, photos and prices, 30 to 60 minutes.
4. Booking requests: one free key so requests reach your inbox, 5 minutes.
5. Contact details and map, 15 minutes.
6. Page texts and photos, page by page. Start with Home.
7. SEO, legal pages and the launch checklist.
8. Publish on your own domain.

Colours, fonts and logo

Colours

Open Assets (left panel) and the Colors section. Horae has 11 colour styles. Click a colour to change it; every place that uses it updates.

Fonts

Open Assets and the Text section. Titles use Gambetta and body text uses Switzer. To change a font, click a text style and pick a new font. Sizes for desktop, tablet and phone are already set inside each style, so you only change the font.

Hotel name, logo and menu

The header and the footer are components, so you edit them once.

1. Open Assets (left panel) → Components and double-click Horae Header. You can also double-click the header on any page. The component opens on its own canvas.
2. The header has six variants: Desktop, Tablet and Phone, each in a transparent version (over a photo) and a Solid version (for pages without a photo at the top). Change the hotel name in every variant.
3. To use a logo image instead of the name, select the name and replace it with an image of your logo. Do the same in every variant.
4. To change the menu, edit the link texts and choose the page each one points to in the right panel (Link).
5. Edit the footer the same way: address, email, phone, social links and the closing line.

Favicon and social image

In Settings → General, upload your favicon (the small icon in the browser tab) and a social image (what people see when your link is shared). The social image should be 1200 × 630 pixels. The favicon can be changed on paid Framer plans.

Editing pages

Change a text

Double-click a text on the canvas and type. To keep the design consistent, leave the text style as it is.

Change a link or a button

Select the button or text, then in the right panel open Link and choose a page from your site or paste a web address.

Add, move or remove a section

• Duplicate: select a section in Layers and press Cmd+D.
• Move: drag it up or down in Layers.
• Remove: select it and press Delete.
• Copy to another page: select it, press Cmd+C, open the other page, select the Desktop frame and press Cmd+V.

Desktop, tablet and phone

Make your changes on Desktop first. They flow down to Tablet and Phone. Then check Tablet and Phone and adjust only what needs to be different there, such as a shorter title.

Pages you might not need

To remove a page, right-click it in Pages and choose Delete. Also remove its links from the header and the footer. Delete the Start here page before you go live.

Photos

Select an image on the canvas, then in the right panel click the image under Fill and upload your photo. Framer optimises photos automatically, so upload them in good quality.

• Alt text: in the image settings, describe each photo in a few words, for example "Double room with a view of the olive grove". It helps Google and visitors who use screen readers.
• Focus point: if a photo is cropped badly on phones, adjust its position in the image settings.
• Room and article photos are changed in the CMS, not on the page. See Add or edit a room.

Contact details and map

The demo email, phone, WhatsApp and address appear in several places. Replace them in all of these:

• Footer (Assets → Components → Horae Footer): address, email, phone, WhatsApp, Instagram, Facebook, Tripadvisor.
• Contact page: the contact blocks and the reception hours.
• Location page: address, distances and the map.
• FAQ page: answers that mention times, policies or contact details.
• Structured data in custom code: see Custom code.

WhatsApp link

Link the WhatsApp text to https://wa.me/ followed by your number in international format, without spaces or the plus sign. Example: https://wa.me/302662000000.

Map

The map on the Contact and Location pages is a Framer map component. Select it and enter your address or coordinates in the right panel. Do the same for the "Open in Maps" and "Get directions" buttons: link them to your hotel in Google Maps (open your hotel in Google Maps, click Share and copy the link).

Rooms and journal (CMS)

The CMS is where your repeating content lives. Open the menu in the top-left corner and choose CMS (or press Alt+2). Your collections are listed on the left. Horae has two collections:

• Rooms: one item per room type. Each item becomes a room page (/rooms/olive-room) and a card on the Home, Rooms and Book pages.
• Journal: one item per article. Each item becomes an article page (/journal/august-sky) and a card on the Journal page.

You never design a room page yourself. You fill in the fields, and Framer builds the page from the design already in Horae.

Rooms fields

Journal fields

Add or edit a room

1. Switch to CMS mode and click Rooms.
2. To edit, click a room and change its fields. To add one, right-click an existing room and duplicate it, then change every field. Duplicating keeps all the photos and facts in place, so you only replace them.
3. Check the slug (the end of the page address, for example olive-room). Use lowercase words separated by hyphens.
4. Set Order so the rooms appear in the order you want.
5. Click Publish. The new room appears in every room list and gets its own page.

Write a journal article

1. Switch to CMS mode, click Journal and add a new item.
2. Fill in Title, Excerpt, Cover, Category, Read time and Date, then write the Body.
3. Publish. The article appears at the top of the Journal page.

How bookings work

Horae has a booking bar on Home, Book, every room page and at the end of most pages. Guests choose dates and guests, see the price per night and the total with city tax, and then either:

• Send a booking request that reaches your inbox (default). No payment is taken on your site. You reply to confirm availability and payment. See Booking requests by email.
• Or go to your booking engine (Cloudbeds, Mews, SiteMinder and others) with their dates and guests filled in, and pay there. See Connect a booking engine.

Every booking bar is the same component, HoraeBooking. Select one on the canvas and its settings appear in the right panel.

Booking requests by email

Requests are sent through Web3Forms, a free service (up to 250 requests a month at the time of writing). You set it up once for the whole site.

1. Go to web3forms.com, enter the email address where you want to receive requests and create an access key. They send it to that email.
2. In Framer, switch to Settings → Code and click the entry Horae settings (edit me). Find this line:

   window.HORAE = { web3formsKey: "" }

   Paste your key between the quotes:

   window.HORAE = { web3formsKey: "your-access-key-here" }

3. On each booking bar, check that Booking engine is set to Booking request (email) and set Hotel name.
4. Optional: in Rooms in request, list your room names separated by commas. Guests can then choose a room. Leave it empty to hide the room choice.
5. Publish, open your live site, choose dates and send a request to yourself. It should arrive within a minute. Check your spam folder the first time.

Prices, seasons and full days

Select a booking bar and set these in the right panel. On room pages, the base price comes from the room's Price from field in the CMS, and the full days come from its Booked dates field.

Connect a booking engine

If you already use a booking engine, guests can book and pay there. Select a booking bar, choose your engine in Booking engine and paste your property ID in Property ID / email. The button then opens your engine in a new tab with the dates and guests filled in. Do this on every booking bar.

Test it: publish, choose dates on your live site and click the button. Your engine should open with the same dates.

Contact form

The form on the Contact page is a native Framer form. Tell Framer where to send the messages:

1. Open the Contact page and select the form.
2. In the right panel, find Send To and choose where submissions go, for example your email address. Framer also supports other destinations such as webhooks or Google Sheets.
3. Publish and send yourself a test message.

The Room dropdown in the form lists the demo rooms. Select it and replace the options with your room names.

Animation

The animations in Horae are switched on by layer names. Add one of these tags to a layer's name (double-click the name in Layers) to animate it. Animations run on the published site and in Preview, not on the canvas.

Example: a text layer named Title [reveal] fades in. Remove [reveal] and it simply appears.

Custom code (what not to delete)

Switch to Settings → Code. Horae uses three small pieces of code, each with a clear name. You only edit the first one.

Edit the structured data

In Horae settings (edit me), the block under "Your hotel's details for Google" tells Google the hotel's name, address, phone and more. It still contains the demo hotel. Replace the values with yours: name, description, url, telephone, email, numberOfRooms, checkinTime, checkoutTime, the address and the coordinates (latitude, longitude).

SEO and Google

Page titles and descriptions

Every page already has a title and a description written for the demo hotel. Change them in Settings: under Page settings (lower left) click a page and edit Title and Description. Use your hotel name and location, for example "Rooms and Suites | Your Hotel, Town".

The room and article pages build their titles from the CMS (for example "Olive Room | Casa Olea, Paxos"). In Page settings, open /rooms/:slug and /journal/:slug and replace "Casa Olea, Paxos" with your hotel name and town.

After you go live

• Add your site to Google Search Console and submit your sitemap: your domain followed by /sitemap.xml. Framer creates the sitemap for you.
• Add your website link to your Google Business Profile. Most hotel searches start on Google Maps.
• Use the same name, address and phone on your website, Google, Booking.com and social media.

Legal pages and cookies

The Privacy, Cookies and Terms pages contain sample texts with placeholders such as [Company name] and [address]. They are a starting point, not legal advice. Have them reviewed for your country and your business before you publish.

• The Privacy page should name the services you use: Framer (hosting), Web3Forms (booking requests), Google Maps, any analytics and your booking engine.
• If you add analytics or marketing tools that use cookies, add a consent banner. You can find cookie banner components in Framer's Insert menu and Marketplace.

Publish on your own domain

1. Publish

Click Publish at the top right. The first time, Framer gives your site a free address ending in .framer.website. Open it and check your site on your phone.

2. Choose a site plan

To use your own domain and remove the "Made in Framer" badge, upgrade the project to a paid site plan in Settings → Plans. Horae fits the Basic plan.

3. Connect your domain

1. Buy a domain from any registrar (for example Namecheap, GoDaddy or Cloudflare) if you do not have one.
2. In Framer, open Settings → Domains (under Hosting) and enter your domain.
3. Framer shows you the DNS records to add, usually two A records for yourhotel.com and one CNAME for www.
4. Log in to your registrar, open the DNS settings of your domain and add exactly those records. Remove any other A or AAAA records on the same name.
5. Go back to Framer and wait. It usually takes minutes, sometimes up to 24 hours. Framer sets up the security certificate (https) automatically.

4. Update your links

Once the domain works, update the url in the structured data and add the new address to Google Search Console.

Launch checklist

• All demo photos replaced, each with alt text.
• Hotel name, logo and colours updated in the header and footer (all variants).
• Rooms updated in the CMS, with your prices.
• Booking bars: Demo availability OFF, booking engine chosen, prices and seasons set.
• Web3Forms key pasted and a test booking request received.
• Contact form Send To set and a test message received.
• Email, phone, WhatsApp, address and map updated everywhere.
• FAQ answers match your policies.
• Page titles and descriptions updated, including room and article pages.
• Hotel details for Google updated in Horae settings (edit me).
• Privacy, Cookies and Terms reviewed for your business.
• Favicon and social image uploaded.
• Start here page deleted.
• Checked on a real phone: menu, booking bar, contact form.
• Domain connected and the site opens with https.
• Site added to Google Search Console and Google Business Profile.

Troubleshooting

My changes are not on the live site.

Click Publish. Changes go live only when you publish. Then reload the live page.

Animations do not play in the editor.

That is normal. They run in Preview and on the published site.

The phone menu is empty or misses a page.

The phone menu is built from the footer links. Check that the page is linked in the footer (Assets → Components → Horae Footer).

The booking button shows a demo message instead of sending the request.

The Web3Forms key is missing or wrong. Check the window.HORAE line in Settings → Code → Horae settings (edit me), then publish again.

Booking requests do not arrive.

Check your spam folder and confirm the email address in your Web3Forms account. Send a test from the live site, not from the editor.

The calendar shows full days I did not set.

Demo availability is still on. Turn it off on every booking bar.

A room page shows an empty space.

One of that room's CMS fields is empty. Open the room in the CMS and fill in every field, including the three gallery images.

Something looks wrong only on tablet or phone.

Select the layer on the Tablet or Phone breakpoint and check whether it has its own setting there. Adjust it on that breakpoint.

I broke something and cannot fix it.

Undo with Cmd+Z, or restore an earlier version from the project's version history. You can also open your remix link again to get a fresh copy and copy sections from it.

Support, licence and updates

Support

Email fiddweb@gmail.com. We answer within 48 hours on working days. Tell us which page and which device, and add a screenshot if you can. We help with everything in the template. For Framer itself (account, billing, plans, domains), Framer's help centre is at framer.com/help.

Licence

One purchase covers one website, for yourself or for one client. You may change the template freely. You may not resell, share or redistribute the template or the remix link, alone or as part of another template.

Updates

Updates are free. When we improve Horae, we email you. A remix is a copy, so your project does not change by itself: to use an update, open the remix link again and copy the parts you want into your project.