Setup guide · Fanlight
How to customize Fanlight, the free Framer real estate template
Fanlight is a free Framer website template for luxury real estate agents. This guide takes you from your own copy to a live website in about an hour. You don’t need to write any code.
You’ll need: a free Framer account, your name and logo, your contact details and license numbers, and photos of your listings.
Get your copy
On the Fanlight page of the Framer Marketplace, click Remix for Free. Framer copies the whole site into your account and opens it in the editor. Everything below happens in that copy.
Read this first: how editing works
Every step uses the same three moves. Learn them once and the rest of the guide is quick.
1 Pages, 2 Layers, 3 Assets. Click a page in the list to open it.
1. Pages: choose what you’re working on. The left panel has three tabs: Pages, Layers, Assets. Pages lists every page of the site: Home, /listings, /neighborhoods, /journal, /about, /valuation, /contact, /legal and /404. Click one to open it.
2. Layers: find the thing on that page. Click Layers. It lists everything on the page you opened, as a tree. It only shows the page you’re on. If you search Home for a form you’ll find nothing, because Home has no form of its own. Open /valuation first, then search.
The quickest way to find anything is the search box at the top of Layers. Type part of a name, such as Form, Arch Frame or Footer, and click a row to select it. The same word can appear at several depths. The row indented furthest right is usually the real thing; the rows above it are the boxes holding it.
3. The right panel: change it. With something selected, click Style at the top of the right panel. The settings for that thing (a Form section, an Image row, a component’s options) sit below the general ones like Position and Size.
If the right panel doesn’t show what this guide describes, you selected the wrong layer. Go back to Layers and click the row below the one you clicked.
Two things don’t live on a page, so you find them differently:
The navigation and footer are in the Main template. Open any page, click Style in the right panel, then Edit under Template.
Listings and journal articles are CMS items. Switch the menu at the very top left from Canvas to CMS.
Step 1
Send your forms to yourself (10 minutes)
Until you do this, inquiries from your site reach nobody. Fanlight has five forms: four on pages and one in the footer. Open each place first, then search Layers for Form.
Open the page the form is on, here /valuation.
Search Layers for Form and click the lower Form row, with the grey icon.
In the right panel, scroll to the Form section and click the blue Email button.
Replace the Recipient with your own address and give the Subject the form’s name.
Leave Antispam on Basic. Framer forwards each submission by email and keeps no copy, so consider adding a Google Sheet as a second destination under Settings → Forms to keep a record.
Step 2
Your name, logo and contact details (10 minutes)
1 Style, 2 Edit under Template. The navigation and footer open on their own canvas.
The navigation and footer live in one place, the Main template. Open any page, click Style in the right panel, then Edit under Template. Change your name, logo mark, office address, phone and email once, and every page updates.
Step 3
Your colors and fonts (10 minutes)
1 Assets, 2 Styles, 3 click a color to change it.
Open Assets. Under Styles, Fanlight has 11 named colors (Ink, Bone, Gold and others) and 12 text styles, each with Desktop, Tablet and Phone sizes. Click a color, type your own hex code, and it changes everywhere it’s used. All three fonts are free Google Fonts.
Two pieces of type don’t follow the text styles: the name wordmark in the navigation and footer, and the address in each row of the recent-sales table. Their font is set directly, so if you change the serif font, change those two by hand as well.
Step 4
Your listings (5 minutes per home)
1 CMS, 2 Listings, 3 add a home, 4 Sale status, 5 Featured.
Switch the top-left menu from Canvas to CMS and open Listings. Each row is one home. Click + to add a home. Sale status sets the tag (For Sale, Under Contract, Sold, Private) and whether the showing form appears. Featured puts a home on your homepage.
Click a home’s title, then Open, to edit every field.
Fill in the fields from top to bottom. Scroll down for the description, the features and the five photos (Exterior, Living, Kitchen, Bedroom, Outdoor). Brochure, floor plan and film tour are optional. Fanlight builds the home’s page for you.
Facts are plain text, so “4,850 sq ft” and “451 m²” both work.
Step 5
Your journal
Same as listings, in the Journal collection.
Step 6
Your neighborhoods
Right-click a neighborhood page, then Duplicate. Rename the copy.
The four neighborhoods are ordinary pages, not CMS items. To add one, open /neighborhoods in Pages, right-click an existing neighborhood page and click Duplicate. Rename the copy and change its words, cover photo and listing filter. Then update the Neighborhood link on the listings in that area.
Step 7
Replace the sample proof
The Ledger (recent sales) and the client notes (testimonials) on the homepage are samples typed onto the page. Replace them with your own sales and your real clients’ words, or remove them. Never publish invented testimonials.
Step 8
Legal details
In the footer, replace the license number placeholders with your agent and brokerage license numbers and your brokerage’s name. Keep “Equal Housing Opportunity”. Read the /legal page and replace it with your own privacy notice.
Step 9
Photos and the film
Every photo and the hero film in the demo are AI-generated samples. Replace them with photography of your own listings.
Framer has no image library: each picture lives in the layer that shows it, so you replace it where it sits. The frames stay put. The arch shape, its gold border and its size belong to the Arch Frame component, not to the photo.
1 Layers, 2 search, 3 select the layer, 4 click the Image thumbnail.
Click the picture to swap it, then rewrite the Alt text.
Photos in arches and panels: select the layer, find the Image row under the component’s name in the right panel and click its thumbnail. Click the picture to choose your own, and rewrite the Alt text so it describes your photo.
Desktop, Tablet and Phone: Layers lists each layout separately. Change the photo on Desktop, then look at Tablet and Phone on the canvas. If either still shows the old photo, select that layer and repeat.
Listing and journal photos are CMS fields. Change them in CMS, as in Step 4.
The hero film: select the Video layer on the homepage and replace its file.
Step 10
Search and sharing
1 Settings, 2 General, 3 title, 4 description, 5 each page’s own settings.
Switch the top-left menu to Settings. Under General, set your site title and description. Further down, Site images holds your favicon and the social image people see when your link is shared.
Most Fanlight pages have their own title and description, so open each page under Page settings and write them for your business. Each listing and article takes its title and description from its CMS fields automatically.
Step 11
Go live
Publish puts your changes live.
Click Publish at the top right. Framer gives your site a free address; to use your own domain, you’ll need a paid Framer plan.
Before you share the link: open your site on your phone, send yourself one test from every form, and type a made-up address such as /nowhere to check your 404 page.
Questions
Is Fanlight really free? Yes. The template is free on the Framer Marketplace. Framer’s own plans are separate: you can publish on a free Framer address, and a paid plan adds your own domain.
Do I need to know how to code? No. Fanlight uses no custom code. Everything in this guide happens in Framer’s editor.
Does it work for agents in the UK and Canada? Yes. Prices, sizes and facts are plain text, so you can write them the way your market does.
Are the demo photos real homes? No. They are AI-generated samples, included only to show the design. Replace them with your own listing photography before you publish.
Need help?
Questions about setting up Fanlight are welcome at ashwinka9535@gmail.com. I reply within two business days. Custom design work isn’t included.