Localize CMS content

Localization in Webflow gives you the power to manage dynamic content by locale. So, not only can you translate your collection items into other languages, you can also choose which items you see in each locale. In this lesson, we're going to add a testimonials collection to our site. Then, we'll add a testimonial section to our site. We'll take those testimonials and translate them to Icelandic. We'll show how to select and how to deselect which testimonial gets published in a specific locale. And finally, we'll create a new testimonial from an Icelandic customer that will only appear on our Icelandic locale.

Okay, first things first. Sophia's here to help with this lesson because before we localize anything, we need to have a collection for our testimonials and she's going to make that in the Webflow CMS. I'm on it. While Sophia is handling that, let's quickly go over how localizing CMS items works.

If you want to create a collection in a site that has been localized, you cannot do that in a secondary locale. You have to be in the primary locale to add it and set it up. When you do, that same collection is also in all secondary locales. And those secondary locales also inherit any CMS items. But the CMS items are distinct per locale. And that's so you can customize them in your other locale. Changes we make in our secondary locale stay there. They do not affect the primary locale. But again, changes we make to the collection on our primary locale pass down to our secondary locale. And that also means if you add another item to the primary, it will be added to all the secondary locales as well.

Okay. So, how is it going? Just finished. Perfect. We now have a CMS collection called testimonials that has three items in it. And if we go over to our Icelandic locale, we can see the same collection is there with the same CMS items. Okay, that's it for part one.

Next, we need to showcase these testimonials on our site. Sophia, are you ready? Already working on it. Excellent. Now, while she builds that, I want to let you know what happens when you add new elements to a site, like a testimonial section. Just like when we added the collection earlier, you can only add new elements on the primary locale. And when you add new elements there, they'll be added to all secondary locales. Remember, the elements will look identical to what's in the primary locale because they're getting inherited until you localize them in the secondary locale.

Okay. So, has made a section with three testimonials. It has a heading and three cards. Each card has the information for each of the testimonials in the collection. And if I go up and switch to our Icelandic locale, you can see it's here, too.

Now that we have our testimonial section, let's localize it. Here in our Icelandic locale, the text content is all in English, so we need to translate it. But if I right click on the paragraph here, I cannot translate it. And that's because you have to manage dynamic content inside the collection item. So, back over to our collections, let's open testimonials and let's edit the testimonial.

Now, we don't need to localize the name or the headshot image since it's a person, but we do want to translate the quote. I could manually write the translation here, or I can auto translate it to Icelandic. Let me reset this first. And then I can select the field or hover over it and click on this little globe icon. Boom. It's translated. Let's keep going and do the same for the alt text and for the years theme. Okay, we now have a localized testimonial. So, I'll click save. And if we escape out, we can see the translated testimonial is on our site.

But if we go back to our primary locale, switching over here in this dropdown menu, we can see that this testimonial is still in English because again, the content changes made in the secondary locale stay in the secondary locale. The changes do not affect the primary locale. So that's localizing one CMS item. Let's do the rest exactly the same way. All done, Grimur. I just did the rest. Oh, thanks. If we look at our site, we can see all of the CMS items in this collection have been localized and the heading has been translated to Icelandic.

All right, we've localized the content. Let's talk about managing CMS items in each locale. What if we don't want a testimonial to show on our Icelandic locale, but we still want to see it on our English locale? Well, we're back in our collection in the Icelandic locale. And you can see all the items are staged for publish. Our goal here is to have this item not to be published to Icelandic. So, we could select and then deleted from just this locale, but that's a bit drastic. So, up here, if we click in, we can set this item as a draft. And once we do, if we escape back to our canvas, we can see it's no longer there.

But this doesn't affect our English locale. Let's see it. Switch back. And that testimonial is still there. And that's because publish status is always managed per locale. So changes in one locale do not affect any other locale.

But now it feels kind of empty. What's that? It looked better when there were three cards. Yes, that's correct. and I have the perfect testimonial to add. Which brings us to our last step, creating a localized item. What if I want to have an entirely new testimonial from a customer, me, that only exists in our Icelandic locale. Back in our collection, again, making sure we are in our Icelandic locale. Let's add a new item, a new testimonial. Webflow lets me know that this item will only exist in the current locale and it won't appear anywhere else, including my primary English locale. That's exactly what I want. So, I'll select continue and make a new item.

Okay, let's fill this out. I'll add the name and I'll add the quote. I'll upload and add a photo, handsome devil, and fill out the rest. Looks good to me. So, I'll click create. And because it states for publish, if I go back to the homepage, you can see the new testimonial in our section here. Wait, what does it say? Trust me, it's really good.

So, that's it. Let's quickly recap what we did here. We added a collection to our site for testimonials. Sophia added a section for those testimonials. Then, we localized the collection in our Icelandic locale. We made sure that one of the items would not be published in our Icelandic locale. And finally, we created a new testimonial, a new CMS item for just that locale. But that's localizing CMS content in a secondary locale in Webflow.