How to Create a Landing Page with Framer
Learn the ins and outs of landing pages, and how to easily create your own with Framer.
What is a landing page?
Whether you work in marketing, sales, or product design, you understand the importance of a quality landing page. Landing pages are standalone websites used to generate leads or sales—in other words they help you increase your revenue. Unlike typical web pages, landing pages only have one call to action, or CTA, and they are usually tied to a specific marketing or advertising campaign. The hyper-focused nature of landing pages means they come with a pretty standard set of best practices.
Landing pages vs. front pages
A typical front page or website in general includes a full navigation bar with tons of links throughout the page linking to other pages or pieces of content. A good landing page should only have one link, or multiple links that all point to the same thing. Having one CTA on your landing page increases conversions because there’s less distraction—fewer equally appealing options to prompt your users into leaving your landing page.Your brand’s front page has totally different goals. It should show off your brand’s personality, let people explore different features, find blogs and support articles, or even apply for a job. But they won’t necessarily purchase your product from the front page. And that’s why we need landing pages.
Since landing pages are tied to specific campaigns, you don’t need to worry about users lacking information about your product. They arrived at your landing page because they were interested in an ad or post on Google, Bing, YouTube, Facebook, Instagram, Twitter, or similar places on the web. With super detailed campaigns pointing to easy-to-use landing pages, you’re getting high-quality leads that are actually interested in using your product.
Best practices for creating a landing page
What makes an easy-to-use landing page? Overall it’s clear, concise, and doesn’t give users any options except for the main CTA.
In terms of copy, your landing page should have one clear message. The header of your page should promote the desired action you want visitors to take. And additionally it should explain the benefits of performing this action.
The visual design of your page should be very simple. Unlike your front page, this is not the place to go crazy with brand personality—so no wild animations or complex design elements. You wouldn’t want to distract visitors from performing the main action of your page.
Landing page CTA’s are typically buttons, sometimes accompanied by an input field if you need to collect user information. To ensure your buttons are clicked, make sure they stand out visually. This can be done with contrasting the button color with your page background and clear copy on the button itself. For example, if you are asking visitors to book a demo, write“Book a demo” clearly on the CTA button.
How to create your landing page in Framer
Framer makes it easy to design how you want. With building blocks, templates, and a powerful freeform canvas—you can have a fully functional landing page in no time at all.
Start from a template
When starting a new project you’ll see a modal with all the default templates as well as your Team Templates. To create a landing page, start with the Input Form template. This template includes, input fields, a dropdown, a CTA button, and a checkbox—everything you need to create a simple landing page. And the best part about Framer, all of these included components are fully functioning with interactions built-in. No need to touch code to make things work.
You can easily change the colors and style properties of any element by selecting it on the canvas then going to the panel on the right-hand side of the canvas. In the properties panel you will find settings like radius, borders, and shadows to add your personal style to the template or follow your brand guidelines.
Start with the Landing Page Kit
You can also start designing your next landing page in Framer with our kit of 60 ready-to-use building blocks. Just open the kit to customize colors, text, and images in every element. You can start designing right in the Landing Page kit project or even use the components in your existing landing page files.
Start from scratch
Framer has a limitless canvas that allows you to design your own web pages as well as custom interactive components.
When you create your own interactive components in Framer, they’re called Smart Components. Smart Components can have multiple visual states that change with different interactions, as well as customizable properties for easy iterations.
In addition to building your own components, you can find more pre-built components to drag & drop from within the app itself. The Insert Menu in Framer contains interactive buttons, icons, illustrations and more to help you compose beautiful landing pages.
Start your next landing page in Framer →