A guide to building a landing page in Framer, from templates and layouts to forms, domains, and publishing, along with the most common mistakes beginners make.
This is a practical guide to creating a landing page in Framer, in the exact order that I work: from preparation and template selection, through layouts, components, and mobile views, to forms, domains, and publishing. At the end, there are common mistakes beginners make, so you can skip them.
Note: The links to Framer in this text are affiliate links, which means I receive a commission if you purchase a subscription through them.
Framer is a tool where you design a page and publish it from the same window, without writing code. If you are still deciding whether this is the right choice for your business, I described the business side of the story in the article how Framer helps conversions and the marketing team.
Before you open Framer
Most time is wasted when design begins without content. Therefore, first resolve three things on paper or in a simple document.
- One goal. Decide what the visitor should do: leave an email, schedule a call, or buy. A landing page with two equally important goals usually achieves neither.
- Layout sketch. Draw the sequence of sections with a pencil or in Figma. It doesn't have to be pretty, you just need to know what goes below what.
- Ready materials. Prepare texts, photos, logo, and any video before designing. Text that "arrives later" almost always disrupts the layout you have already arranged.
I do not repeat here which sections a page should have and in what order to arrange them, as I explained that in detail in the guide how to make a landing page. In the following text, I deal only with how this is done in Framer.
Creating a landing page in Framer step by step
1. Template, remix, or blank canvas
When you create an account and open Framer, you can start a new project in three ways.
- Template. Framer has a library of free and paid templates. For the first page, this is the fastest way, because you get pre-set styles, mobile views, and basic components.
- Remix. The author of a Framer site can share a link through which you copy the entire project into your account. A useful way to see how someone more experienced put a page together.
- Blank canvas. This makes sense when you already have a finished design or experience with the tool. You build everything yourself, so you have complete control, but also more work.
If you are starting from a template, choose it based on structure, not colors. You will change colors and fonts in a few minutes, but a layout that does not match your content will take hours to rebuild.
2. Layout: stack and grid
Framer has two basic layout tools. Stack arranges elements one below the other or side by side, with a spacing you specify. Grid arranges them in columns and rows, which is handy for cards with benefits or pricing.
I recommend putting each section into a stack and adjusting the spacing through it, rather than manually moving elements. Elements placed freely on the canvas only look good at the width you drew them. As soon as the screen narrows, they start to overlap. Limit the content width with a single maximum value, so that text on large monitors does not stretch into overly long lines.
3. Styles, components, and states
Before you put the whole page together, create styles for colors and text. When you later want to change a shade or heading size, you change it in one place.
Turn everything that repeats into a component: button, card, navigation, footer. A component can have variants, for example a primary button and an outlined button, and states, such as the appearance when a visitor hovers over or presses it. Framer animates the transition between states automatically, and you choose the duration and type of transition.
Be spare with animations. A subtle fade-in of content on scroll and a clear button reaction are enough for most pages. Speed is always my top priority, as people leave a page that doesn't open quickly. Therefore, I avoid heavy animations and effects that slow down the page, and I only add animation if the page remains fast with it.
4. Tablet and mobile views
Framer offers separate breakpoints for desktop, tablet, and mobile for each page. Changes you make on a narrower view apply only to it, so you can reduce a heading, change a layout from three columns to one, or hide an element that gets in the way on mobile.
On mobile, check three things: whether the primary call to action (CTA) is visible without much scrolling, whether the buttons are large enough for a finger, and whether the text is readable without zooming. Previewing in the tool itself is not enough, so make sure to open the page on a real phone as well.
5. CMS for repeating content
You need a CMS when you have multiple items of the same type on a page: client reviews, FAQs, case studies, or a blog. You create a collection, define fields (for example, name, text, and photo), and then link the list on the page to the collection. After that, you add a new item as a row in a table, without touching the design.
For a single simple landing page, a CMS is often not necessary. If you have three client reviews that rarely change, it is faster to type them in directly.
6. Form
Framer has built-in forms: insert fields, mark which ones are required, and select where submissions go, for example to an email. Ask only for data you really need, because every extra field is a reason for someone to give up.
Set up what happens after submission as well: a clear message that the submission has been received or a redirect to a thank-you page. Before publishing, send a test submission and check if it arrived.
7. SEO settings and accessibility
In the page settings, enter the title and description that appear in search results, and an image for social media sharing. On the page itself, leave one H1 heading, and arrange the other headings in order (H2, then H3). Add alt text to images describing what is in them.
Also, check text contrast and whether the page can be navigated using a keyboard. I write more about this in the text about the WCAG standard. A page that everyone can use also has a better chance of achieving its goal.
8. Domain and publishing
By clicking "Publish", the page goes live on a free Framer address, which is enough for testing and showing to colleagues. A custom domain requires a paid plan. You connect the domain by entering the DNS records shown to you by Framer at your domain registrar. Hosting is included in the plan, so you don't buy it separately.
Any subsequent change becomes visible only when you publish the page again. This is useful, because you can work quietly on a new version while the old one is still live on the internet.
Checklist before publishing
- All links and buttons lead where they should.
- The form has been tested and the submission has arrived.
- The page title and description are filled in, and the social sharing image is set.
- The page has been reviewed on a real phone, not just in the tool.
- Images have been reduced to the size at which they are displayed.
- Speed has been checked with a tool like PageSpeed Insights.
- There are no template remnants in the text, such as placeholder text or someone else's contact details.
Typical beginner mistakes
Mistake 1: freely placed elements instead of stacks
The page looks neat on your monitor but falls apart on every other. The solution is for all sections to be in a stack or grid, with spacing defined through them.
Mistake 2: too many animations
When every element is animated, nothing stands out, and the page becomes slower. Animate what leads to the goal of the page and check the speed after every major change.
Mistake 3: leaving mobile view for the end
If you only look at mobile when the desktop is finished, you often have to rebuild half the page. Check the narrower view after each section.
Mistake 4: huge images
A photo straight from a phone or a stock photo library can be much larger than the page needs. Reduce it before inserting and avoid auto-playing background videos unless necessary.
Mistake 5: template without customization
A template is a starting point. If you leave its section order even though your content requires a different one, the page will look nice but won't explain your offer.
An example from my portfolio
One of the sites I made this way is the logo and website for the marketing agency Marketit, where the entire site was built in Framer.
If you want to compare Framer with other solutions before starting, also check out the comparison of Framer, Webflow, and hand-written code.
What next
The best way to learn a tool is to build a real page. You can open an account for free and go through the steps in this text. If you prefer to have someone do it for you, see how I do website development in Framer or get in touch with me via the contact page for a free consultation.
