Speaker 1: In Webflow, you can localize your site for people around the world. But you aren't just changing your site from one language to another. You're creating a version where you can customize all the content. This way, people will experience a site that is tailored to their locale. But first, what is a locale? Because we're going to be using this word a lot. A locale is a language or language-region combination, like Spanish-Mexico, that you select for your site so you can meet a specific audience's needs. So, in this lesson, we'll assign a primary locale. We'll add a secondary locale, and then in that secondary locale, we'll translate the text. We'll localize the static images and translate all text. We'll localize the settings to ensure it is SEO-optimized. And finally, we'll publish our site so it's live in both English and, of course, in Icelandic. So, let's get started with assigning our primary locale. Okay, we're here in the designer, and I already have a site here, a completely made-up financial company, and it's all built in English. And that's an important thing to note because we highly recommend you design first and then localize your site. That first version of the site is the primary locale. That means any new locales you add will inherit all the content from it by default. So, let's head over to Settings. And once we're there, we'll go up to Localization. In the dropdown, we can select any language and region we want. But because our site's in English, we can type and then just choose English, United States. There are some other settings here, but for our primary locale, we don't need to change anything. So, let's just save. That's assigning our primary locale. Let's add a secondary, a more interesting locale. But what is our goal here? Our goal is to create a localized version for the great nation of Iceland, all 375,322 people. Same place. Click Add New Locale. And from the dropdown list, I can select a locale. Or because I know I want this locale to be Icelandic, I can search for and choose Icelandic. Next, we can set up the subdirectory for this locale. What does that even mean? Webflow automatically creates a URL structure that makes it different from the primary locale. So, instead of just website.com, it's website.com slash something. I could customize it, but by default, it's generated the country code for Iceland, which is slash IS. So, I'll just leave that as is. And since we've not done any work on this locale yet, we aren't ready to publish. So, we'll leave Enable Publishing off and we'll click Save. And finally, to save all the changes we made here, we'll go up and Save Changes. And that's it. We just created our secondary locale. Next, let's translate the text in our secondary locale. Back in the Designer, we have a new dropdown here that indicates what locale we're on. Let's go to our Icelandic locale. And everything's still in English. That's because we have to translate it. And that's exactly why I'm here. So, let's double-click this Learn More button and simply replace the text with Icelandic by typing naunar. But I don't have time to manually replace all of the text myself. I'm quite a busy person, you see. So, let's right-click on this other button where I can translate to Icelandic. But that's just translating one element at a time. The real superpower is when you select a body, we can do this in the Navigator, and right-click to translate. And just like that, all the text on this page has been translated. This includes text in components, like the navbar, text in our card layout here, and even placeholder text in form fields. All static text content on this page is instantly translated. Now, keep in mind that this is just a first-pass translation. It's not perfect. So, at any time, I can right-click to reset to the original text. And then I'll go into the paragraph and change this to anything I want. That's much better. Now, what about our primary locale? What happens to the English text? Well, if we go back there, we can see it's exactly how we left it. And that's because of inheritance. Remember that secondary locales inherit content from primary locales, but it doesn't go back the other way. So, changes to our secondary locale do not affect the primary locale. But there's another thing about inheritance. Once I've localized an element in a secondary locale, it's no longer linked back. It's not going to inherit changes from the primary. So, if you make a change to text on a primary locale that you want to be carried over to the secondary locale, you have to right-click, reset, and translate again. Okay, that's translating the text. But we also need to change the images. That's important here because we have English and we have dollars, and they don't work in Iceland. So, replacing an image in a locale works exactly the same way as replacing an image. All you have to do is double-click the image and replace image. Over in the Assets panel, we'll select the image with the Krona currency. And just like that, the image in this locale has been replaced, so it's localized for Iceland. If we scroll down here, we can do the same thing for this image at the bottom. Double-click, replace image, and select the Icelandic version in the Assets panel. But there's more. Here we have an image with three credit cards. It works fine for our Icelandic site, so we don't need to change it, but we do want to translate the image alt text. We want to make our site more accessible to people in Iceland. So, if we go to the Assets panel and into the settings for that image, we can see the alt text. I could manually replace it, but I can also click on this little globe icon here. And when I do, the text is translated to Icelandic. And, like earlier, changes to images and alt text only affect this locale. The primary English locale has not been changed at all. Okay, we've localized text and images in our secondary locale. But there's one more extremely important thing we need to localize, and that's in the page settings. Localizing the information in here is crucial, because we want our site to be optimized for SEO in that locale. So, over in Pages, let's go into the settings of our home page. And we can see that the content is inherited from our English locale. But we came here to localize this into Icelandic. So, again, we could translate this page name by typing whatever we want, or, like we did before, we can click the globe thing here, and it automatically translates that field. And we can tell that the field is now localized because it has a blue label, just like when you make a change on an inherited property in the Style panel. Down here, we have the title tag. Let's keep it, because this is the name of our company. But we do want to translate the meta description here. So, same thing, click the globe icon, and everything is in Icelandic. We're not done here. We also want to update the open graph image, and we already have one for this. Let's save our settings here real quick. Back in our Assets panel, let's copy the link to the localized version of the image. And back in our page settings, back over to the open graph image URL field, we'll paste that link. And once we've confirmed that we updated all our page settings in here, we'll go up and save. Now, if Google loads our site in Icelandic, or if both of my fans in Iceland share this on social, it will be in Icelandic. That's everything localized. Finally, our last step, let's publish. In order for a locale to be published, you have to make sure that publishing to the subdirectory for that locale is turned on. So, back in our localization settings, we'll open the Icelandic locale. And down here, where it says enable publishing, let's flip the switch on. We've now enabled this locale to be published along with the rest of our site. But before we do, let's save our locale, and then save our settings. Now, we can publish. And once we do, our site is published in both locales. So, if we open it up, you'll see that we have our English site, and if we add slash IS to the URL, there it is. Our site is in Icelandic. And that's it. Let's quickly recap what we just did. We assigned a primary locale for our site. We added and set up a secondary locale for Icelandic. We translated the text manually and by using the built-in translation. We localized the images and the alt text. We localized our SEO and open graph in the page settings. And finally, we published the site in both English and Icelandic. This is just the beginning when it comes to localizing your site. So, be sure to check out our localization course on Webflow University if you haven't already. That's localizing a site in Webflow.