How To Use Framer Templates

Introduction

Framer templates are a fantastic way to get online quickly. You buy one, customise it, and launch it. Easy, right?

Well, most people don’t have any experience in web design and development. So, customising a template can still be challenging.

That’s why I’ve put together this guide, to guide you through all the steps you need to take to get a template online.

Ready? Let’s get started!

Step 0: Purchase The Template

Obviously, the first step is to buy a Framer template.

The best place to start your research is the official Framer marketplace. There, you can find 1000+ quality templates for any project you can think of.

The categories include Portfolio, Agency, Blog, Landing Page, e-commerce, free templates, etc.

If you can’t find anything you like, a quick Google search for “Framer templates” will return many different marketplaces and creators who have decided not to submit their work to the official marketplace.

A cool thing about Framer templates is that they all can be previewed live, so you know exactly what you’ll get once you buy them.

For most templates, prices range from 0 to 50 dollars, making it a perfect solution for people on a budget.

P.S. If you want, we also have some cool Framer templates you can check out!

Step 1: Create A Free Account

Once you buy the template, you’ll usually receive a recipe email with a “remix link”.

A remix link is a link that, when clicked, will copy the project to your dashboard.

If you click on that link and don’t have an account, it will automatically redirect you to the signup page where you can register for free.

Once you have set up your account, you will be redirected to your dashboard, where you should find the template you’ve just bought.

If that’s not the case, click the remix link again - that will do the trick.

Now that you have created an account and have the template in your dashboard, it’s time to customise it.

Step 2: Customise The Template

Here comes the tricky part.

Customising a template can mean anything, from editing the existing assets to adding new ones.

Unfortunately, I can’t possibly know what changes you want to make.

However, I’ve tried reporting the most common customisations people want and how to make them.

Edit Text

Let’s begin by discussing how to update the copy on your Framer website.

This is one of the most common adjustments users want to make, and fortunately, it’s also one of the easiest.

To do that, double-click the text you want to change to select it. Once you’ve selected it, you can edit it like in any other writing editor you’re used to.

Change Images

Once you’ve changed the copy, it’s time to change the images.

Similarly to the previous point, double-click on the image to select it. Once it’s selected, a small overlay window will open in the bottom-right of your screen.

Using that overlay, you can choose the image, adjust how it gets displayed, and change the alt text (don’t forget about this!).

Customise Colors

If the template creator knew what he was doing, customising colors should take less than one minute.

All you have to do is select “Assets” in the left sidebar. Then, scroll down to the “colors” section, where you should find all the colors used throughout the template.

To edit them, click on them and paste the HEX value of your brand colors.

Edit CMS Elements

If the template you purchased has one or multiple CMS collections, you must also customise its elements.

To do that, click on the CMS button on the top-left of your page. You’ll now see a brand new interface that allows you to edit your CMS collection.

Once you’re there, select one element and start editing it. Once you’re done, you can take a look at the final result by clicking the play button at the top right of your screen.

Further Reading: Intro To The Framer CMS

Remove A Page

Does the template have a page you don’t need? No problem, you can easily remove it.

To do that, hover over the page you want to delete in the left sidebar. Then, click on the menu icon and select “delete”.

That’s it! You’ve just deleted the page.

One thing to notice, though, is that removing a page might cause some internal links to break.

To check whether that’s the case, you can temporarily publish your website (Framer allows you to publish to a random domain) and run it through a tool like Dead Link Checker.

The tool will analyse your website and tell you whether you have broken links and where to find them.

Note: As of April 2024, Framer currently doesn’t allow you to “hide” pages from the deployed website. If you want to remove a page but don’t want to lose it, you can make a copy of the whole project and keep the page there. So, when you want to restore it, you can copy and paste it.

Edit Meta Data

Every page on your website needs a custom title tag and meta description.

If you’re unfamiliar with the terms, they’re basically the text shown when you search with Google.

Here’s an example:

So, how do you customise them in Framer?

Click on the settings button in the top-right of your page. Once there, you can use the left sidebar to navigate your pages and customise each title and page description.

If you want to go the extra mile, you can also set a different social image (aka the image shown when you share a website on social media) for every page.

Further Reading: How To Add Custom Title Tags & Meta Descriptions In Framer

Connect Google Analytics

Do you need to integrate Google Analytics for marketing purposes? No problem.

To do that, log in to your GA4 dashboard and copy your measurement ID. Then, head to your site settings > General and scroll down until you find the Google Analytics section.

There, you can paste your GA measurement ID, save the changes, and you’re all set up!

Note: Having GA integrated requires you to have a cookie policy and a cookie banner. As the website owner, it’s your responsibility to ensure your website complies with privacy laws.

Step 3: Publish Your Website

Now that your website is ready, it’s time to get it live.

The first thing you need to do is figure out which plan you need. If you find the plans confusing, I’ve written a guide to help you find the perfect Framer pricing plan.

Once you have figured out which plan you need, head to your site settings and click on plans. From there, select the plan and follow the outlined procedure.

Once you’ve done that, you’ll have to connect your domain name. To do that, go to your Site Settings > Domains > Custom Domain > Connect a domain you own.

Type in your domain name (e.g. example.com) and click the check button.

Now, an “auto connect” button should appear on your screen. Click it, and you’ll be all set.

If you don’t see it, you’ll have to change your DNS settings manually.

Conclusion

Framer templates are a fantastic way to jumpstart the development of your website. All you have to do is buy one, customise it, and then publish it.

Thanks to its easy of use, Framer allows anybody to easily customise templates, even people with no experience whatsoever in web design or web development.

However, if you need or want more advanced customisation and don’t want to spend time learning how to use the platform, I suggest you consider hiring one of the official Framer Experts.

Thanks for reading!

- Luca