Publishing & Settings

Site and Page Settings in Framer (Fundamentals Lesson 27)

Site and Page Settings in Framer (Fundamentals Lesson 27)

Site and Page Settings in Framer (Fundamentals Lesson 27)

Joseph

·

6:58

·

14K views

·

About this lesson

In the previous lesson, we dug into Site and Page settings related to accessibility and SEO, but there are still some other settings left to talk about.

In this lesson, we’re looking at a bunch other useful settings — and how they let us add some additional functionality and polish before we take our sites live.

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=0s Intro

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=6s Reviewing site settings overview

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=29s Preserving URL parameters

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=89s Hide edit button shortcut

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=118s Uploading site images

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=172s Password protecting a site

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=210s Automatic locale and Google Analytics

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=247s Well-known files and custom code

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=301s Redirects

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=348s Forms integration options

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=364s Staging, versions, and site plans

https://www.youtube.com/watch?v=HRf4nQfVNUo&t=385s Page-specific settings and wrap up

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00In the previous lesson, we dug into site0:02and page settings related to0:04accessibility and SEO, but there's still0:07plenty more to talk about. So, in this0:09lesson, we're looking at a bunch of0:10other useful settings and how they let0:12us add some additional functionality and0:15polish before we take our sites0:17[Music]0:19live. Again, we took a look at some of0:22the most important site settings in the0:24previous lesson. So, if you missed that,0:26you might want to head there first.0:28We're also going to dig into publishing0:29a few lessons from now. So, we'll save0:31anything publishing related for that.0:34But I'll start by clicking the settings0:36icon on the toolbar. And here we are on0:39the general tab of the site settings. We0:41pretty much tackled this entire top area0:43with the site title and language all the0:46way down to accessibility in the0:48previous lesson. And opting out of the0:50HTML to framework Chrome extension is0:52something we talked about in an earlier0:54lesson on importing from the web and0:56Figma. The next new setting is preserve0:59URL parameters like UTM source when1:02navigating between pages. If you're not1:05familiar with UTMs, they're just a1:06little snippet of text that you add to a1:08URL that helps track the effectiveness1:10of marketing campaigns by identifying1:12where the traffic came from. With this1:15setting checked, that snippet of text1:17will get passed along as visitors1:19navigate from page to page within your1:21site. With it unchecked, the UTM1:24wouldn't get passed along after visitors1:26navigate away from the first page that1:28they landed on. Our next setting says1:30hide button to edit pages in one click.1:34When your site's published and you visit1:36it as an editor, you'll see a little1:38framer button overlaid on the right. And1:40it's a shortcut that lets you quickly1:42jump in and edit the page you're looking1:44at. Visitors won't see this button. It1:47only shows up for collaborators who can1:49edit the site. But if you find it1:51distracting, you can use this setting to1:53hide it all together. Next, we have this1:56whole section for site images we can1:58upload, like a favicon, which is that2:01tiny little 64x 64 pixel icon that shows2:04up next to a page title or a bookmark in2:06a lot of web browsers. And Framer lets2:09us upload separate icons for light mode2:11and dark mode if we want to. But if you2:13want to use the same image for both, you2:15can just upload one and not the other2:17one, and the image will be used for2:19both. The social preview is a much2:21larger thumbnail at 1200 by 630. This2:24one's also known as an open graph or OG2:27image and it shows up when folks share a2:29link on social media platforms like2:31Facebook, LinkedIn or Slack. Then last,2:34we have an Apple Touch icon that's 180x2:38180 and it's used when someone on an2:39Apple device saves a bookmark to a page2:41of your site to their home screen. And2:43Framer gives us a nice little preview of2:45each one of these so we know exactly2:46what we're going to end up with. In the2:48next section, we have the ability to2:50password protect our entire site, so2:52only authorized individuals can access2:55what we've published. If you're on a2:57site plan that includes password2:58protection, just click the little switch3:00to enable it and either use the randomly3:03generated password or click edit to set3:06your own in the field below. Just be3:08sure it's longer than eight characters.3:10After publishing, when a visitor lands3:12on your site, they'll be prompted to3:14enter the password in order to gain3:15access to any of the content. To remove3:18the password, just flip the switch off3:20and publish again. It's great for3:22keeping client work secure until3:24everyone agrees it's time to go live.3:27Next, we have automatic local, which3:29relates to a feature that we haven't3:31covered yet called local. We're going to3:33have a dedicated course on localizing3:35your site, but if you're already3:36familiar with loces, this preference3:38lets your site automatically redirect3:40visitors to the local that matches their3:43browser settings if a matching local3:45exists. Then next is Google Analytics3:48where you can paste your measurement ID3:50if you've got one. But don't forget,3:52Framer also has some pretty powerful3:54analytics built right in. And I've3:56already published a lesson at the end of3:58this course that digs into it. You might4:00be surprised how much you can do without4:02any thirdparty tools. In the next4:05section, as long as you're on a4:06supported site plan, Framer also lets4:09you integrate with certain thirdparty4:10services by hosting something called4:12well-known files on your site. This can4:15enable features like Apple App Site4:17Association for universal links, Apple4:20Pay support, and Android verification.4:22It's more advanced stuff, but doesn't4:24hurt to know what it's for. And last,4:26but not least, for our general site4:28settings, we have custom code that'll be4:30added to every page of our site. And4:33each field puts the code that you type4:35or paste in a very specific place within4:38the HTML. Either at the start of the4:40head tag, the end of the head tag, the4:43start of the body tag, or the end of the4:46body tag. Be careful with custom code,4:48though, because if you don't know what4:50you're doing, the results could get4:52unpredictable, and we may not be able to4:54do as much to support you if things go4:57wrong. The next tab of our site settings4:59is for setting up and managing domains,5:02which again we're going to tackle a5:04couple of lessons from now. And then we5:06have redirects. If you're on a site plan5:08that includes redirects, then you can5:10use these to route traffic from an old5:12URL to a new one. When you're moving an5:15existing site over to Framer, these are5:17super helpful because they make sure5:19visitors land where we want them to,5:21even if they visit a page that's moved5:23or changed names. They also keep search5:26engines happy since we prevent indexed5:28URLs from throwing a page not found5:31error the next time Google tries to5:33crawl them. We've got a dedicated lesson5:35on redirects on Frame Academy, but the5:37gist of it is that we enter an old URL5:40and then designate the new URL to5:42redirect visitors to. Then the next tab5:45of the site settings is forms, which5:48gives us a small handful of items for5:49campaign tracking, keeping an eye on5:52form usage, and connecting your Google5:54account so that form submissions can go5:56directly to a Google sheet. We've5:58already got a dedicated course for forms6:00on Frame Academy, so be sure to check6:02that out for a deeper dive. The staging6:05and versions tab is another one we're6:07going to save for the upcoming lesson on6:08publishing. And the last tab lets us6:11browse and upgrade plans, which is6:13exactly what we're going over in the6:15next lesson. We'll spend some time going6:17over what to consider so you always6:19choose the right site plan for your6:21project. When you select a specific6:23page, you'll find the same sort of6:25settings we've already gone over, but6:27these ones are specific to the selected6:28page rather than being6:30sitewide. And there you have it. Between6:33these last two lessons, you become6:34familiar with what can be accomplished6:36with site and page settings. And in the6:39next two lessons, we'll get into picking6:40a site plan, publishing, and hooking up6:43your own custom domain name. I'll see6:45you there.

Watch on YouTube ↗

‹ Utilizing Collection Lists in Framer (CMS Lesson 4)

SEO and Accessibility in Framer (Fundamentals Lesson 26) ›

More in this topic

Hard work, easy website. Get a Free Domain with Framer.0:20
Hard work, easy website. Get a Free Domain with Framer.
Announcement13M views · 4 months ago
This website never happened — Get a free domain with Framer0:22
This website never happened — Get a free domain with Framer
Publishing & Settings4.7M views · 4 months ago
Free Domains with Framer: Go Build It0:16
Free Domains with Framer: Go Build It
Publishing & Settings9.1M views · 4 months ago
Introducing Advanced Hosting in Framer2:28
Introducing Advanced Hosting in Framer
Announcement7K views · 4 months ago
Transferring Framer projects to clients2:04
Transferring Framer projects to clients
Publishing & Settings9K views · 5 months ago
Creating Remix Links in Framer1:29
Creating Remix Links in Framer
Publishing & Settings3K views · 6 months ago
How to get the most out of Framer for Free4:05
How to get the most out of Framer for Free
Animations15K views · 8 months ago
Optimizing Video files for the Web5:34
Optimizing Video files for the Web
Publishing & Settings12K views · 8 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.