How to customize Pietranera
This guide is for you if you have never opened Framer before. Every step is short. Follow the sections in order the first time; later, jump to what you need.
What you need: a free Framer account and the remix link you received after purchase.
Time: about an afternoon for a complete site, if your photos and prices are ready.
0. Before you start: what to replace
Pietranera is a made-up house. Everything below is sample content and must be replaced before you publish:
– the house name, address and description
– the reviews, the guest names and the review score (marked Sample in the demo: delete the word when you add real ones)
– the registration code in the footer
– the host names (Marco and Giulia), their photos and their texts (the line marked Sample host)
– the WhatsApp number and the email address
– the prices in the price list and in the calculator (see section 7)
– the house photos (they are AI-generated demo images)
– the credits line in the footer, which says the house is fictional
1. Open your copy
1. Log in to Framer.
2. Open the remix link from your purchase email. Framer creates your own copy of the project.
3. Rename it: click the project name at the top left and type the house name.
Your copy is yours: changes you make never touch the original.
2. Find your way around
– Left panel: the page layers (what is on the page) and Assets (colors, fonts, images, components).
– Canvas (center): the page, in Desktop, Tablet and Phone widths side by side.
– Right panel: the settings of whatever you selected.
– Preview (play icon, top right): try the site as a visitor would.
Tip: change something on the Desktop width, then check the Phone width. Most settings follow automatically; some sizes are set per width.
3. Change the colors
The whole site uses 6 Color Styles. Change one, and it changes everywhere it is used.
1. Open Assets in the left panel, then Colors.
2. Click a color style and pick a new value.
Ground — the background of the whole page · #161C1A
Ground Deep — the reviews section only, one step darker · #111614
Surface — panels and the calculator background · #1F2725
Ink — the main text · #E3E2DA
Muted — notes, distances, secondary text · #A9AFA7
Accent — only the booking button · #9FC7B8
3. The calculator has its own colors (they live inside the component). Select it, open Style in the right panel and set the same values. See section 7, step 10.
To keep the look: stay with one dark background and light text. Use the accent only for the booking button. A darker brown works for a stone farmhouse, a night blue for a house on the northern sea.
4. Change the fonts
The site uses 2 fonts and 5 Text Styles: Display, Head, Lead, Body, Small.
1. Open Assets, then Fonts (Text Styles).
2. Click a text style and choose a new font. Every text using that style updates.
3. Change Display, Head and Lead for the titles, Body and Small for the reading text.
4. Check the Phone width: long titles should stay on 2 lines at most.
Demo fonts: Zodiak for titles (weights 100 and 300) and Hanken Grotesk for text. If Zodiak is missing from your font menu, use Fraunces at weight 200.
5. Change the texts
1. Double-click any text on the canvas and type.
2. Keep each title short: about 32 characters, so it fits on 2 lines on a phone.
3. Change the page title and description for Google: Site Settings (gear icon) → General / SEO.
The price list next to the calculator is plain text. If you change a price there, change it in the calculator too (section 7).
6. Change the photos
Single photos (hero, house numbers, hosts, around the house):
1. Select the photo on the canvas.
2. In the right panel, click the image fill and upload yours.
3. Use photos taken in soft, low light: the template darkens every photo slightly so it blends into the background.
Hero (the photos that fade into each other):
1. Double-click the hero photo to open its component.
2. It has 3 variants, one photo each. Replace the photo in each variant.
Gallery (the row that scrolls by itself): it is a Framer Ticker.
1. Select the Ticker in the layers panel.
2. Inside it there are 12 vertical frames (2:3). Select a frame and replace its image.
3. To add a photo, duplicate a frame (Ctrl/Cmd + D). To remove one, delete the frame.
4. Speed is in the right panel. Hover speed is 0, so the row stops when a visitor points at it.
5. Update the gallery title if the number of photos changes ("· 12 photos").
Around the house: the photo on the left is a component with 6 variants, one per place. Replace the photo in each variant, then change the place names, distances and descriptions in the list.
Photo credits: the coast photos come from open archives and some require a credit (listed in the footer). If you replace all of them, delete the credits line. If you keep any, keep its credit.
7. Set up the calculator
The calculator is StayCalculator, in the Prices section. Select it: every setting is in the right panel. A purple Setup check box above it describes your settings in plain words and warns you about mistakes. It is visible only in the Framer editor, never on the live site.
1. Property: the house name used in the messages.
2. Currency: EUR, USD, GBP or CHF.
3. Seasons: click Add… for each season and fill in name, start (day / month), end (day / month), price per night and minimum nights. Seasons repeat every year and can cross New Year. If two seasons overlap, the first in the list wins.
4. Pricing: price and minimum nights for dates outside every season, maximum nights (0 = no limit), cleaning fee.
5. Guests: maximum guests, guests included in the price, fee per extra guest per night, age under which infants don't count.
6. Pets: allowed or not, how many, fee, charged per stay or per night.
7. Tourist tax: amount per person per night, exemption age, maximum nights taxed. Turn on Paid on arrival if guests pay it at the house.
8. Long stay discount and Platform comparison (an estimate of the platform price, using the % you set). Turn either off if you don't need it.
9. Booked dates: add each booking with arrival and departure, e.g. 2027-08-20. The departure day stays free for a new arrival.
10. Style: colors, radius (0 for this template), padding and Font. Demo values: Accent #9FC7B8 · Button text #161C1A · Background #1F2725 · Fields #28322F · Text #E3E2DA · Secondary #A9AFA7 · Borders #33403C · Radius 0 · Padding 28 · Font Hanken Grotesk.
WhatsApp, email and the host's language (in Contact):
11. WhatsApp: the host's number in international format, e.g. +39 333 123 4567.
12. Email and Email button: keep the email on. Some guests don't use WhatsApp.
13. Your language: the language the host reads. The guest writes in theirs; the host gets the dates, guests and total in this one.
The visitor's language (in Visitor language):
14. Language: Automatic (recommended). The site is in English, but the calculator speaks the visitor's language: English, Italian, Spanish, French, Portuguese, German, Romanian or Chinese, taken from the browser.
15. Show switcher: lets visitors change the calculator language by hand.
Then check it:
16. The Setup check says ✓ No problems found.
17. In Preview, pick some dates and tap the WhatsApp button to read the message.
18. The price list next to the calculator shows the same prices.
8. Add the registration code
Many countries require a registration code on rental listings (CIN in Italy, a tourist licence number in Spain or Portugal, and so on).
1. Scroll to the footer.
2. Double-click Registration code DEMO-0000 and type your code, with its local name (e.g. CIN IT087… in Italy).
3. If the house has no code, delete the part after "·". Check your local rules first.
The FAQ answer about payment also mentions the code: update it there too.
9. Contacts and links
1. In the footer, select WhatsApp, Email and Instagram one at a time.
2. In the right panel, under Link, paste: https://wa.me/393331234567 (number without + or spaces), mailto:you@example.com, the Instagram profile URL.
3. Delete any link you don't use.
10. Publish
1. Click Publish (top right). Framer gives you a free address ending in .framer.website.
2. A custom domain (e.g. yourhouse.com) needs a paid Framer site plan, bought from Framer.
3. Open the live site on a phone and send yourself a test request.
11. Optional: translate the whole site
The template is in English. The calculator already speaks 8 languages without any extra cost. If you also want the page texts in other languages:
1. Framer offers this through its Localization add-on. It is paid, sold by Framer, not included in this template. Check the current price on Framer's pricing page.
2. Once active, open Localization in Framer and add a language (e.g. German).
3. Translate the texts there, one by one, or with Framer's built-in tools.
4. Keep titles short in every language: German and French texts run about 30% longer.
5. With the calculator on Automatic, it follows the language of the page the visitor is reading. Nothing to set.
12. What the template does not do
Say this clearly to the host, so there are no surprises:
– No calendar sync with booking platforms (Airbnb, Booking.com and similar). Booked dates are added by hand in the calculator.
– No online payment and no instant booking. The guest sends a request; the host confirms availability and the final price.
– Quotes are estimates based on the prices you enter.
– One house per site. For several properties, duplicate the project.
– English only for the page texts, unless you add Framer Localization (section 11).
Questions? Write to pinoog10@gmail.com. I usually reply within 24 hours.