Welcome to Realty
In this quick guide, we'll walk you through the essentials of editing basic elements like colors, fonts, and CMS content. We'll also share some best practices and answer frequently asked questions to help you get the most out of your new website.
Get started
If you're new to Framer, we strongly encourage you to explore Framer Academy, where you can learn all the essentials to get started quickly and effectively.
Crafted with modularity in mind, this template gives you the freedom to personalize your website by effortlessly rearranging sections to suit your brand.
Design
Typography
Realty uses Satoshi, a versatile sans serif typeface as the main font. The font is from Fontshare, freely available for use.
Aa
Satoshi Medium
For details, we use the elegant italic serif font - Instrument Serif, which you can find for free on Google Fonts. It’s perfect for highlighting key words in a title and adding a touch of sophistication.
Instrument Serif Italic
We use two main type styles: Headings and Paragraphs. Headings help break up content into sections and make the order of information clear, while Paragraphs are used for longer blocks of text.
This way, everything is well-organized and easy to read.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Subtitle
X-large paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Medium paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icons
The chosen icon family is Phosphor, renowned for its flexibility and wide range of icons. You can explore their entire library here, and easily swap out icons on the website whenever you need to.
Colors
Realty comes with 2 colors that you can easily customize to fit your brand’s identity — simply change the hex codes in the styles to see an immediate update.
Primary
Secondary
A grey palette is implemented for text and various elements to delineate between primary and secondary content. These tones are meticulously selected to infuse vibrancy into the design, so we don't recommend you to change them.
Black
Grey 1
Grey 2
Grey 3
Border
Off White
Animations
Micro-interactions — those little moments of user engagement — are key to a great interactive website.
Realty not only includes these interactions effortlessly but also brings a bunch of other features to make the user experience even better.
Pages
Realty offers 10 unique pages and over 20 different sections. With its modular design — just like all Modula templates, you can easily customize and add content to tailor everything to your brand’s needs.
Utilities
CMS
Manage your properties effortlessly with our user-friendly Content Management System. It lets you add, edit, and delete properties without the hassle of working through the design canvas.
You have the freedom to fully customize:
Title
Address
Town
City
Price
Images (3)
Bedrooms Nr.
Bathrooms Nr.
Area
Year Built
Property Type
Features x6
Description
Best practises
Editing content
The main breakpoint is set for desktop screens at 1440 pixels — so be sure to make your edits in the desktop view first. Any changes you make will automatically adjust for other screen sizes, including text, images, effects, and more.
Learn more about breakpoints here.
Naming layers
Renaming your layers with clear, descriptive names helps keep your file organized and easy to navigate. This simple practice ensures that you and anyone else working on the project can quickly find and manage elements.
Image size
When uploading images, it's important to keep file sizes under 500KB for faster loading and smoother website performance.
For most images, go with JPG or WEBP formats—they offer great quality with efficient compression. If you need transparency (like for logos or icons), PNG is your go-to.
Following these tips will help ensure your website runs smoothly and delivers a great user experience.
Visual consistency
Keep your design consistent by using the same colors, fonts, and spacing throughout the template. This ensures a polished and cohesive look.
Responsive design
Make sure your design looks great on all screen sizes and devices. Test your prototype on different devices to confirm it’s fully responsive.