Comprehensive Guide To Site & Page Settings In Framer

Introduction

On top of allowing you to create a beautiful website without writing a single line of code, Framer also allows you to easily manage your site and page settings to best fit your needs.

Whether you want to optimise your website for search engines, connect a custom domain, or add password protection, Framer site settings make it easy to achieve your goals.

In this beginner-friendly guide, you’ll learn:

✅ How to edit your site’s metadata

✅ How to integrate Google Analytics

✅ How to connect a custom domain

✅ How to add password protection to your site

✅ How to add custom code

✅ How to set up redirects

✅ How to manage staging and versioning

Ready? Let’s get started!

Glossary

I’ve tried my best to make the guide as beginner-friendly as possible.

However, If you are unfamiliar with any of the terms used, you can reference this glossary at any moment.

• Metadata

  → All the website data that doesn’t get displayed in the browser. For the sake of this article, when I say metadata, I mean “page title + meta description + site language + social image + favicon”.

  
  

• Page Title

  → The title of your page, which gets displayed in search results, browser tabs, and social media sharing previews.

  
  

• Meta Description

  → A brief summary of the page’s content, often (but not necessarily) displayed under the title in search engine results pages and social media sharing previews.

  
  

• Social Image

  → The image that gets displayed whenever you share a page on a social media platform

  
  

• Favicon

  → Small icon displayed in browsers that represents your brand/business.

How To Edit Your Site’s Metadata

Metadata is just a fancy term used to describe all the information about your website that isn’t displayed in the browser but is still essential for your site.

The metadata of your website is made up of a bunch of meta tags. Luckily, you don’t have to worry about most of them since Framer manages them for you.

However, there are four key meta tags that Framer allows you to edit:

1. Page Title (individual pages)

2. Meta Description (individual pages)

3. Site Language (whole website)

4. Social Image (individual pages)

   
   

Theoretically speaking, you could just set them once, and they would be applied to all of your site’s pages.

However, from an SEO standpoint, it’s important to have different titles and meta descriptions for each page. It is so important that Google even mentions it in its developers’ guidelines.

Ok, so this stuff is important. But how do you edit that in Framer?

The first step is to go into your site’s settings. You can do that by clicking on the settings icon in the top-right corner of your canvas or by navigating through the top-left menu > Site Settings > Open Settings.

Within the left sidebar, you’ll notice two main categories:

• Site settings

• Page settings

  
  

Site settings impact the entire website, while page settings allow changes to metadata (and the addition of custom code) specific to individual pages.

Let’s start by editing the whole site’s metadata:

1. On the left sidebar, click on “General”.

2. Edit the Site Title, Site Language, and Site Description.

3. Save the changes.

4. Scroll down a bit and customise the Favicon and Social Image for your entire website.

5. Publish your changes.

   
   

You can repeat the same process for individual pages. However, if you’ve any trouble or don’t know how to edit CMS-generated pages, check out this in-depth guide.

How To Integrate Google Analytics

Framer comes with built-in analytics that provide a general overview of how much traffic your website gets and where it’s coming from.

However, these built-in analytics are quite limited as they’ve been designed to comply with all privacy laws. In fact, those analytics provide literally no insights into user behavior.

That’s why most website owners and marketers still want to integrate some third-party tool like Google Analytics for a more in-depth analysis of user behavior.

DISCLAIMER: As the site owner, it’s your responsibility to ensure that your site complies with privacy laws when handling data.

If you want to integrate Google Analytics into your Framer site, here’s how:

1. Create a Google Analytics account.

2. Copy the Tracking ID provided.

3. Navigate to your Framer dashboard and open your website project.

4. Click on the settings button located on the top right panel.

5. Within the settings, go to the “General” section and scroll down to find the “Google Analytics” area.

6. Paste your Tracking ID.

7. Save your changes.

How To Connect A Custom Domain

By default, whenever you publish your website (even on a free plan), you get a free Framer sub-domain that you can use to access your website from a browser.

However, every website needs a custom domain. There’s no way around it.

So, how do you connect yours to your Framer website?

Let’s start by saying that you need to have a paying plan if you want to connect a custom domain. And no, a paying plan doesn’t come with a domain name. You must buy it from a domain name provider like GoDaddy, Squarespace, Namecheap…

Once you’ve bought a domain and have upgraded your site to a paying plan, head over to your site’s settings > Domains > Custom Domain > Connect a domain you own.

Once there, type in your domain name (example: dacorte.dev) and hit the check button.

Unfortunately, you’re not done yet. You need to unsure your DNS records are pointing to Framer’s servers.

If you’re lucky, you’ve chosen a domain name provider that supports auto-configuration. In that case, you simply have to click the “Auto Connect” button, and you’ll be done.

If that’s not the case, here’s a step-by-step guide you can follow:

1. Log in to your domain provider.

2. Go to the “Edit DNS Records” section (or something along these lines).

3. Remove any existing records.

4. Enter the DNS information provided by Framer when trying to connect a custom domain.

5. Save your changes.

   
   

Please note that, even if you’ve done everything right, it might take some hours before the DNS updates and your website becomes accessible through your domain (it usually doesn’t happen, but it might sometimes).

How To Add Password Protection To Your Site

Framer offers a built-in feature to password-protect your entire website, a cool feature available with at least a basic plan.

I’ll show you how to enable it in just a few steps. However, let’s discuss some of its limitations first:

1. It affects the whole website.

   → Unless you’re creating a site for a small, exclusive group, password-protecting the entire website without revealing anything to non-authenticated users can be a significant limitation

   
   

2. The password is the same for everybody.

   → Unlike most use cases where users create accounts to access password-protected pages, Framer’s built-in feature provides a universal password unrelated to specific users.

   
   

3. No user-related data.

   → 1. This point ties back to the previous one. The built-in password-protection feature doesn’t work based on users. In fact, there are no users. If you have the password, you can see the website. If you don’t, too bad!

   
   

While I still think this feature has some use cases, we can’t deny that it imposes some important limitations.

That’s why if you want to create member-only content in Framer, something like medium.com, I suggest you check out third-party services like FramerAuth.

But this is not a guide on how to use FramerAuth so let’s get back to the built-in feature.

Here’s how you can enable it:

1. Head over to your site settings.

2. Go to the “General” section and scroll until you find the “Password Protection” section.

3. Turn it on by clicking on the toggle.

4. Framer generates a default password for you, but you can easily change it by clicking on “Edit” button.

Voilà! Your website is now only accessible to those who know the secret password.

If you now try to access your website, you’ll have to type in the password you’ve created. However, most browsers will automatically remember the password, so you don’t have to type it in every time.

How To Add Custom Code

Adding custom code is a great way to take more control over your website. You can add code that will affect your whole website or just for specific pages.

For example, if you want to center images in CMS formatted text fields (which Framer currently doesn’t support), you can achieve this by adding <style> rules in your CMS page settings.

However, as with other features on this list, adding custom code requires a paid plan.

Here’s how you can add custom code to your website:

1. Go to your site settings.

2. Choose “General” if you want to apply code globally. Otherwise, select the specific page you want to customise.

3. Scroll down to the “Custom Code” section.

4. Paste your custom code there.

5. Save your changes.

   
   

If you’re not familiar with HTML, you might be confused about whether you should include your code in the “head” tag or the “body” tag.

Here’s a simple rule of thumb: If you want the code to be visible on your website, paste it in the <body> tag. If the code shouldn’t be visible, use the <head> tag.

Let’s look at a couple of examples:

• Google tag → <head> tag

• Style rules → <head> tag

• Third-party widgets → <body> tag

• Facebook Pixel → <head> tag

How To Set Up Redirects

Simply put, redirects are a way to send visitors from one URL to another.

Redirects can be helpful for several reasons, from editing/deleting a page to moving a sub-domain to a sub-folder.

The good news is that Framer makes it super easy to do that. The bad news is that you must have a “Pro” plan to access the feature.

Here’s a step-by-step guide:

1. Head over to your site settings.

2. Go to “Redirects” > “Create Redirect”.

3. Type in the old URL (no longer available to users) and the new one (the desired destination for visitors).

4. Save your changes.

   
   

If you’ve deleted a page, it might not appear in Framer’s dropdown menu. However, this doesn’t mean you can’t set up a redirect for that specific URL.

If you want a deeper dive into how to redirect a page, how to use wildcards to redirect an entire folder, the limitations of Framer redirects, Framer automatic redirects, and some troubleshooting tips, make sure to check out this guide.

Note: If you’re into SEO, make sure you're only using 301 redirects in a white-hat manner.

How To Manage Staging And Versioning

Every time you publish your website, a new version is created. Why does this matter? Because it means you can easily recover a past version of your site.

This is extremely useful as it ensures you never do any irreparable damage to your website. Unfortunately, this feature is exclusively available with a Pro plan.

By default, staging is disabled, and Framer always publishes the latest version of your website. However, if you want to restore an old version, here’s how you can do it:

1. Navigate to your site settings.

2. Go to “Staging & Versioning”.

3. Under the “Staging” section, click on “Enable Staging”.

4. Under “Versions” are, deploy the version you want live.

   
   

If you want to preview how a version looks before making it live, click on the respective version next to the “Deploy” button.

Note: Switching to an older site version will NOT result in losing the latest changes you’ve made.

Conclusion

Thank you so much for having taken the time to read the guide. I hope you found it helpful!

If you need any assistance with your Framer website, do not hesitate to reach out.

If you’ve found this article helpful, I kindly invite you to share it with a friend who might benefit from it!