Editing Site Settings in Framer

A more thorough explanation on editing Site Settings in framer when building your website

Categories
All

Editing Site Settings in Framer is where you can customize main SEO settings and properties when building a website with Framer. In this section, users can specify the title and description of their website, upload a favicon & selected social images, and adjust a few other things such as SEO options, Google Analytics and more.

In this article we’ll take you through all the different features that are offered in the Site Settings Section.

The Site Settings are all project specific so they are only available once you’re editing a project… To find the site settings you’ll navigate to the Framer Icon Framer in the top left corner, then go to Site Settings -> Open Settings (or use the shortcut  + , or Ctrl + , on a PC).

Open Framer Site Settings

Within the site settings you get 5 different sections you can edit when managing your Framer website.

Editing Site Settings in Framer, the different sections are:

As well as a Plan section to select a premium plan to upgrade to, and per page settings for better SEO optimization.

General Settings

Within the General Settings when editing Site Settings in Framer, you can edit everything from the site title & description, to uploading a favicon and which images are displayed when sharing the website to social platforms, un-publishing the website, adding Google analytics and more.

The Site Settings are very intuitive and laid out nicely so that everything is easy to edit and easy to understand.

Site Settings:

Framer - Edit Site Settings
Edit Site Title & Description

Here you can adjust the site title and description to what you want to display on your site and it will also show you a nice preview of how your result will look in the Google search rankings.

You can turn off all animations for better accessibility for users with disabilities if needed, and you can “Unpublish” your website if you published it too early or if you are busy making big changes to your Framer website.

Site Images

Under Site Images you can upload your website favicon & social image icons.

A site favicon, which is short for “favorite icon”, is a small image that appears on the browser tab to identify a website. It is typically a small graphic or logo that represents the website and helps users quickly identify and distinguish it from other open tabs.

Framer - Upload Site Images
Upload website images to Framer

The social image is for when you or another viewer shares your website on any social media platforms, rather than the social platform selecting any random (and often wrong) image to use, you can nicely specify an image to ensure the share post looks good!

Page Level Settings

All the site settings listed above are also available to edit on a per page level, which will override these settings.

For SEO (Search Engine Optimization) purposes we recommend you take the time to go through these and add the titles, descriptions and images for each page.

Framer - Page Settings
Page Settings

Password Protection PRO FEATURE

To safeguard your website’s content from any unauthorized visitors, or if you only want certain users to view the website, a password protection can be added to your Framer website. Enabling Password Protection in the Site Settings after publishing generates a password that can be used as is, or it can be customized to a password you want.

Framer - Add Password Protection
Add Password Protection

When a password is set, visitors attempting to access the website from any domain will be required to enter the password before they can view any content. This can also be used while developing a website, for only the client(s) to be able to view the progress.

Canconical URL PRO FEATURE

A canonical URL is the preferred URL that represents a webpage, also to avoid duplicate content issues and to indicate which version of a page should be indexed, for search engines. It is used when there are multiple URLs pointing to the same content or similar pages, to specify the primary URL that should be indexed and displayed in search results.

Framer - Canconical URLs
Canconical URLs

Canonical URLs are only required in Framer if you host your site behind a reverse proxy.

Google Analytics PRO FEATURE

Google Analytics is a powerful web analytics tool that allows website owners to track and analyze all aspects of their website’s performance. By using Google Analytics, website owners can gain insights into their website’s traffic, user behavior, and conversion rates, which can be used to make data-driven decisions to optimize their website and improve their online presence.

You can easily integrate Google Analytics when editing Site Settings in Framer by simply entering your Tracking ID provided by Google Analytics. It takes either your tag ID found in your Google Analytics admin section in (the ID that starts with “G-“) or your Tracking ID which can be found in your Google Analytics Property settings (the ID that starts with “UA-“).

Read more here on how to find these ID’s.

Framer - Adding Google Analytics
Add Google Analytics

Once your Google Analytics ID has been added, you will have integrated analytics and combine the insights on your website together.

Note: You will be responsible for any GDPR compliances when using Google Analytics integration.

Custom Code PRO FEATURE

To add custom some code and/or scripts to all pages of your website, you can insert the code at the beginning or end of the <head> and <body> tag.

Supported languages include HTML, CSS, and JavaScript, while server-side languages like Perl, PHP, Python, or Ruby cannot be integrated. The allowed tags for custom code insertion are <link>, <script>, <meta> and <style>.

Framer - Add Custom Code
Add custom code to your website pages

Note: These changes will not be visible in the preview of the website. Also, you need to know what you’re doing when adding custom code as Framer does not validate the code for you.

You’ll also need to test yourself that this code is working, once the site is published.

Some custom code use cases are:

  • Google Tag Manager
  • Hotjar User Metrics
  • Facebook Pixel
  • LinkedIn Conversion Tracking
  • AddThis Social Sharing

Page Level Custom Code PRO FEATURE

All the custom code settings listed above are also available to add/edit on a per page level, which will only add the custom code to the page it’s been added to.

Domains

A domain name is a unique name that identifies your website on the internet. It serves as an address that users can use to find and access a particular website.

When you create a new website in Framer, you are given a base domain to view your new site on, and this can be changed when editing Site Settings in Framer

Base Domain

In Framer, a base domain refers to the main domain of a Framer project that is used to create a shareable link for the project.

Your base domain will be something like https://ready-functions-866454.framer.app/ which you can view live or share to anyone else.

Edit your Framer Base Domain

Custom Domain

Framer also offers you a FREE custom subdomain under “.framer.website”.

Simply enter a subdomain name you’d like to use and the click the ☑️ next to the input and see if it is available for you to use.

Select a Framer subdomain
Add your own Framer subdomain

If it is not available, you will need to think of a new one as someone else is most likely already using that name.

This custom domain can be changed at any time… Simply click the 3 dots next to the custom domain, then select to ‘Remove Domain’ to delete it and you can then think of a new name and add it in again to see if it’s available.

Custom domain in Framer

While Framer is becoming a well known brand and will come with credibility, having your own custom domain name is better for establishing a strong online presence.

If you upgrade to a payment plan, you can link the site to your own custom domain name that you’ve purchased though any other hosting provider. Framers Pro plans are very well priced compared to other hosting companies!

Then, you can choose a name that reflects your business or website’s unique identity and purpose. This can make it easier for people to remember your website and business, providing many benefits that can help to improve your website’s visibility, credibility, and performance.

Framer - Connect your own domain name
Connect a domain name that you own

Redirects PRO FEATURE

Redirects serve as a valuable tool when you need to permanently or temporarily direct traffic from an old path to a new URL. There are various scenarios in which you might use a redirect, such as restructuring the URL format, introducing a new page design, or safeguarding against potential typos in alternative paths.

Once you establish a redirect, anyone who attempts to access the old URL will automatically be rerouted to the new URL. This feature is particularly advantageous when updating a page while preserving the ranking power from the old URL.

Redirecting URLs in Framer is feature only offered on the Pro payment plan.

Framer - Create URL Redirects
Setup your URL redirects

Setting up redirects is simple and effective… Read more on how to setup redirects in Framer.

You can also view a list of your redirects once they have been created and they can be re-ordered from top to bottom to define the priority of the redirects.

Framer Redirects
You will see a list of redirects once they have been created

Staging & Versions

A staging website is a separate copy of your website that is used for testing changes and updates before they are applied to the live website. It allows you to make changes to your website without affecting the user experience on the live website.

By using a staging website, you can test new features, plugins, designs, and other changes to ensure that they work properly and don’t cause any issues before they are deployed to the live website.

To enable Staging on your site, you need to create a custom domain.

Framer - Create a Staging site
Create a custom domain to enable staging

By default, staging is set to Disabled.

You can enable it to create a staging site and then manually select a different site version to use as your staging site.

Framer website versions & staging site
Select a staging version

After you’ve enabled staging, you will notice in the publish layer that the only option available is to update the Base Domain.

You can repeatedly publish to this link until you are satisfied with the changes. After making the desired changes, navigate to the Staging & Versions tab again in the Site Settings, and select the version you want to deploy to your Custom Domain.

Click the Deploy button to initiate the process. If you need to, you can always revert to a prior version and undo any changes until you are ready to proceed with the changes again.

Analytics

When editing Site Settings in Framer, there is also the Analytics section which offers a robust analytics tool that enables you to track user behavior and gain insights into how users interact with your website. With Framer analytics, you can track and analyze user flows to gain a better understanding of how users navigate your site.

This can help you identify areas for improvement and optimize the user experience.

Framer Website Analytics
Framer website analytics

Framer analytics also integrates with Google Analytics, to provide even more comprehensive data analysis. Overall, Framer analytics offers a powerful tool for tracking user behavior and optimizing the user experience.

Framer Plans & Pricing

Framer offers very competitive prices compared to other hosting companies!

Starting out, it’s completely free… You can sign up to Framer, build your complete website, view it live on a Framer subdomain, build multiple websites if you like, and only start paying once you decide you need the pro features or your website reaches over 1000 visitors per month.

The screenshot below is shown in ZAR, but you can visit the Framer Pricing page to see what you’ll pay in your currency.

Framer Payment Plans
Framer Plans & Pricing

You can start with a free plan and experiment with unlimited projects, and once you start getting lots more traffic and need more features or your own domain then you can upgrade to a paid plan.

Paid plans can be cancelled at any time by simply emailing Framer support to cancel your subscription. If you cancel your subscription, you will just be downgraded to the free plan and lose all paid features, but your projects will all remain in place.

So give Framer a go… Try it out!