Template guide
Make Dorra yours.
Each section below is one job, with the exact place to change it in the Framer editor. Most take a few minutes.
Your phone number and WhatsApp
Your number lives in two places. Change both and the whole site follows.
1. Open Assets on the left, then Components, then Project, and double-click Phone Line.
2. Click Variables in the top toolbar, choose Phone and type your number in Default. Every place the number shows follows, with its call link.
3. Back in Project, double-click Order Button, open Layers and select the WhatsApp layer. In the right panel, type your number in Phone: country code and number, digits only, for example 212600000000. Every Order on WhatsApp and Chat on WhatsApp button follows.
The demo leaves the WhatsApp number empty on purpose: the buttons open WhatsApp with the message ready and the visitor picks the contact.
Your address and opening hours
1. In Assets, Components, Project, double-click Address. Click Variables and change the Default of Street and City.
2. Still in Address, open Layers, select Map Link and paste your own Google Maps link in Link to, in the right panel.
3. Double-click Opening Hours, click Variables and change Days, Open and Kitchen Closes.
The footer, the Contact page and the Booking page all follow.
Your brand colour
Dorra comes with three colour sets. Two colour styles carry the colour of every button, label and price.
Orange, the demo: Accent F26A21, Accent Text B23A0A.
Green: Accent 4CB782, Accent Text 1B6E45.
Pink: Accent F0657B, Accent Text B8203F.
Open Assets, then Styles, then Color, and click Accent. Type the new code in the HEX field. Do the same for Accent Text.
All three sets keep every text readable at a contrast ratio of at least 4.5. The same values are saved under Color, Themes.
The dish of the day
1. Open the menu at the top left that says Canvas and choose CMS.
2. Open Dish of the Day and pick another dish in the Dish column. The picture, its colour and the price come from that dish.
3. Change Title and Description to match. They are written here, not taken from the dish.
The price always matches your menu, so there is only one price to keep up to date.
Menu categories
1. In CMS, open Categories and click + above the table to add a row.
2. Type the Name and give it the next Order number. The menu tabs follow that number.
3. Open Dishes and choose the new category in the Category column for each dish that belongs to it.
The new tab appears on the Menu page by itself. No design work is needed.
Dish descriptions
Keep each Short Description to one sentence of about 45 to 75 characters. At that length it runs to two lines on every screen size, so the cards line up.
Longer text goes in Long Description, which shows on the dish’s own page.
Where messages go
The booking, contact and sign-up forms work on Framer’s free plan. Dorra ships with no destination on any of them, so you add your own before you publish.
1. Open the page with the form, then Layers, and select Booking Form, Contact Form or Sign Up Form (the sign-up form is on the home page).
2. In the right panel, under Form, click Add… next to Send to, choose Email and type your address in Recipient. Webhook and Google Sheets work too.
Do this for all three forms. Until then, a visitor who sends one sees a demo note in the button instead of an error. Once yours are connected, open Assets, then Components, double-click Form Submit and replace the text in its Error variant with your own, for example “Could not send, please try again”. Then publish and send one test message from each live form to check it reaches you.
Your own photos
Every dish has an Image Style field in the CMS. Cutout floats a transparent render in front of the glass. Photo shows an ordinary photo, background and all, in a frame with 20px corners. Below is the same dish, from the same CMS item, in both styles.
Image Style: Cutout
Vegetarian
Double espresso over cold milk and ice, served tall with a straw.
Image Style: Photo
Vegetarian
Double espresso over cold milk and ice, served tall with a straw.
Switch a dish to your photo
1. Open the CMS and choose Dishes.
2. Open a dish and set Image Style to Photo.
3. Upload your picture in the Photo field. Square and landscape photos both work: the frame crops to fit, so keep the dish near the centre.
Cards, the dish page and similar dishes all follow the field, so one switch changes the dish everywhere.
Headings use Playfair Display
Headings are set in Playfair Display from Google Fonts, under the SIL Open Font License. It comes from Framer’s Google list, so it shows in your editor and on your site with nothing to upload, and it covers Latin, Cyrillic and Vietnamese.
Want another heading font? Open Assets, then Styles, then Text. Click Display, click its font and pick the new one. Do the same for Heading and Subheading, and every page follows. The logo in the navigation and footer, the figures on the home and About pages and the large quote mark set their font on the text itself: select each one and pick the same font.
Body text, buttons and prices use Inter, which every Framer project includes.