{"id":4297,"date":"2024-04-15T03:39:29","date_gmt":"2024-04-14T19:39:29","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4297"},"modified":"2024-04-15T03:39:29","modified_gmt":"2024-04-14T19:39:29","slug":"adapt-content-and-designs","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/adapt-content-and-designs\/","title":{"rendered":"Adapt content and designs"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<h6><strong>Prior to beginning: <\/strong>Take a look at the Localization introduction to acquaint yourself with Localization.<\/h6>\n<p>By default, any additional locale(s) you include on your site inherit the content and styles of your site\u2019s primary locale. You can override or <em>customize<\/em> anything on the Designer canvas to cater to the cultural and linguistic requirements of customers in a specific locale.<\/p>\n<p>Upon inserting an element into your primary locale, you can select the <strong>Locale view<\/strong> option from the top bar, select your desired locale, and modify the element just as you would typically do \u2014 however, these adjustments will now only impact the chosen locale. Localized elements are distinguished with a \u201c<strong>globe<\/strong>\u201d icon in the Navigator.<\/p>\n<h6><strong>Please note: <\/strong>Your layout (i.e., arrangement of elements and components) is influenced by your primary locale. It is not possible to add or remove elements or components while in a secondary locale. Furthermore, any localization modifications made in a secondary locale will exclusively affect that secondary locale.<\/h6>\n<h6><strong>Kindly be informed:<\/strong> Some Localization capabilities are exclusive to certain Localization subscription packages. <a href=\"https:\/\/webflow.com\/localization\">View a comprehensive comparison of Localization subscriptions and features<\/a>.<\/h6>\n<p>Throughout this tutorial, you will understand:<\/p>\n<ol role=\"list\">\n<li>How to customize on-canvas text<\/li>\n<li>How to adapt assets<\/li>\n<li>How to individualize element visibility<\/li>\n<li>How to personalize styles<\/li>\n<li>How to tailor components<\/li>\n<\/ol>\n<h2>How to customize on-canvas text<\/h2>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-video\">\n<div><iframe allowfullscreen=\"true\" frameborder scrolling=\"no\" src=\"https:\/\/www.youtube.com\/embed\/YT2wxw4vick\" title=\"How to localize text\"><\/iframe><\/div>\n<\/figure>\n<h6><strong>Please remember:<\/strong> Localization functionalities are solely accessible in the Designer. Content editors have the ability to customize content in edit mode.<\/h6>\n<p>To adjust text on the Designer canvas, click the <strong>Locale view<\/strong> dropdown in the top bar and select your preferred locale. Subsequently, you can modify any on-canvas text (including links, buttons, forms, etc.) with the content you wish to display in that locale.<\/p>\n<p>If you intend to translate your text content, you can right-click on any element containing text and choose \u201c<strong>Translate to (locale language)<\/strong>.\u201d<\/p>\n<h6><strong>Please note: <\/strong>When automatically translating an element containing a child span element, the text of the span element does not automatically translate. Although you can auto-translate the span element individually, we recommend manually translating text in span elements to ensure the translation remains contextually relevant.<\/h6>\n<p>If a specific piece of content on the page does not translate, it may be due to the unavailability of a translation for that content.<\/p>\n<h6><strong>Expert tip: <\/strong>If you wish to translate an entire page, select the <strong>Body<\/strong> element, then right-click and choose \u201c<strong>Translate to (locale language)<\/strong>.\u201d<\/h6>\n<p>You can also manually translate your text or utilize translation Apps like <a href=\"https:\/\/webflow.com\/apps\/detail\/lokalise\">Lokalise<\/a>.<\/p>\n<h3>Customizing right-to-left text<\/h3>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-video\">\n<div><iframe allowfullscreen=\"true\" frameborder scrolling=\"no\" src=\"https:\/\/www.youtube.com\/embed\/bPpDeEkpK2g\" title=\"Localizing right-to-left locales in Webflow\"><\/iframe><\/div>\n<\/figure>\n<p>Webflow automatically offers support for RTL (right-to-left) script on published sites for Arabic (ar), Persian (fa), Hebrew (he), Urdu (ur), and Yiddish (yi) locales, as well as regional dialect locales of these languages (e.g., Arabic (Iraq)), even when the text has not been customized. If you prefer not to exhibit text elements with automatic RTL, include a custom attribute of <code>dir=\"ltr\"<\/code> or <code>dir=\"auto\"<\/code> to the element.<\/p>\n<h2>How to customize assets<\/h2>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-video\">\n<div><iframe allowfullscreen=\"true\" frameborder scrolling=\"no\" src=\"https:\/\/www.youtube.com\/embed\/whcCbt15j9A\" title=\"How to localize assets\"><\/iframe><\/div>\n<\/figure>\n<p>There could be several reasons necessitating the customization of your assets \u2014 for instance, if an asset on your site comprises text and requires a translated version for a specific language or locale, or if an asset is shared across multiple locales but necessitates translated alt text for each locale. Alternatively, you may require a distinct asset for each locale to meet your site\u2019s localization requirements. You can manage alt text and assets for each locale.<\/p>\n<p>To substitute an asset for a particular locale:<\/p>\n<ol role=\"list\">\n<li>Click the <strong>Locale view<\/strong> dropdown in the top bar<\/li>\n<li>Select your desired locale<\/li>\n<li>Choose the asset on the canvas<\/li>\n<li>Navigate to <strong>Element settings<\/strong> &gt; <strong>Image settings<\/strong><\/li>\n<li>Click on <strong>Replace image<\/strong><\/li>\n<li>Select an asset or upload a new asset in the Assets panel<\/li>\n<\/ol>\n<p>To distribute an asset across locales, but personalize the alt text for <em>all<\/em> instances of that asset within a secondary locale:<\/p>\n<ol role=\"list\">\n<li>Click the <strong>Locale view<\/strong> dropdown in the top bar<\/li>\n<li>Select your desired locale<\/li>\n<li>Access the <strong>Assets panel<\/strong><\/li>\n<li>Hover over the asset for which you wish to customize<\/li>\n<li>Click the settings \u201c<strong>cog<\/strong>\u201d icon<\/li>\n<li>Input the customized alt text for the asset<\/li>\n<\/ol>\n<p>To share an asset across locales, but customize the alt text for <em>one<\/em> instance of that asset within a secondary locale (i.e., customize the alt text for an asset within a secondary locale without disseminating that alt text to all other instances of that asset in that secondary locale):<\/p>\n<ol role=\"list\">\n<li>Click the <strong>Locale view<\/strong> dropdown in the top bar<\/li>\n<li>Select your desired locale<\/li>\n<li>Choose the asset on the canvas<\/li>\n<li>Proceed to <strong>Element settings<\/strong> &gt; <strong>Image settings<\/strong><\/li>\n<li>Select \u201cCustom description\u201d from the <strong>Alt text<\/strong> dropdown<\/li>\n<li>Enter the customized alt text for the asset<\/li>\n<\/ol>\n<p>To reset an asset or alt text to inherit from the primary locale:<\/p>\n<ol role=\"list\">\n<li>Click the <strong>Locale view<\/strong> dropdown in the top bar<\/li>\n<li>Select your desired locale<\/li>\n<li>Choose the asset on the canvas<\/li>\n<li>Access <strong>Element settings<\/strong> &gt; <strong>Image settings<\/strong><\/li>\n<li>Click on <strong>Image<\/strong> and\/or <strong>Alt text<\/strong> (depending on the reset you desire)<\/li>\n<li>Click on <strong>Reset to primary locale<\/strong><\/li>\n<\/ol>\n<h2>How to customize element visibility<\/h2>\n<p>Whilst all elements and components in secondary locales are inherited from the primary locale, you can individualize the page display for a secondary locale using element visibility.<\/p>\n<p>To modify the visibility for a specific element:<\/p>\n<ol role=\"list\">\n<li>Click the <strong>Locale view<\/strong> dropdown in the top bar<\/li>\n<li>Select your desired locale<\/li>\n<li>Access <strong>Element settings<\/strong> &gt; <strong>Visibility<\/strong><\/li>\n<li>Select the element\u2019s visibility setting (i.e., \u201cshow\u201d or \u201chide\u201d)<\/li>\n<\/ol>\n<p>Elements are concealed on the server-side \u2014 implying hidden elements will not be visible in your site design or reflected in the HTML code of your site.<\/p>\n<h2>How to customize styles<\/h2>\n<p>You can also personalize the presentation of a specific locale by localizing the styles on a given element.<\/p>\n<h6><strong>Expert tip: <\/strong>Word breaking, line breaking, and text wrapping styles can be beneficial for adhering to language-specific rules and guaranteeing a positive user experience across locales. Discover more about text wrapping and line breaking.<\/h6>\n<h6><strong>Kindly note: <\/strong>Webflow automatically supports RTL (right-to-left) script on published sites for Arabic (ar), Persian (fa), Hebrew (he), Urdu (ur), andYiddish (yi) locales, along with regional dialect locales of these languages (e.g., Arabic (Iraq)), irrespective of the absence of localization in the text. If you prefer not to exhibit text elements with automated RTL, append a custom attribute of <code>dir=\"ltr\"<\/code> or <code>dir=\"auto\"<\/code> to the respective element.\u00a0Explore further details on how to localize right-to-left text.<\/h6>\n<p>To localize styles on a specific element:\u00a0<\/p>\n<ol role=\"list\">\n<li>Tap the <strong>Locale view<\/strong> dropdown in the upper bar<\/li>\n<li>Pick your preferred locale<\/li>\n<li>Choose an element on the canvas\u00a0<\/li>\n<li>Modify styles as necessary<\/li>\n<\/ol>\n<p>To restore element styles to inherit from the primary locale:\u00a0<\/p>\n<ol role=\"list\">\n<li>Press the <strong>Locale view<\/strong> dropdown in the top bar<\/li>\n<li>Select your desired locale<\/li>\n<li>Pick the element on the canvas\u00a0<\/li>\n<li>Hit any style in the <strong>Style panel<\/strong> (e.g., font, color, breaking, etc.)\u00a0<\/li>\n<li>Press <strong>Reset<\/strong><\/li>\n<\/ol>\n<h2>How to localize components<\/h2>\n<blockquote><p><strong>Important: <\/strong>When localizing an element and\/or its child elements in a secondary locale prior to transforming the element into a component, the localized content will be overwritten with the default content of the component from the primary locale. Hence, it is recommended to convert elements into components before localizing their content.<\/p><\/blockquote>\n<p>You can localize components in the same manner as localizing elements. You can localize the primary component to ensure the localized values for that component are retained across every instance\u00a0 of that component in a specific locale.<\/p>\n<p>For instance, if you possess a navbar and wish to localize the text and links:\u00a0<\/p>\n<ol role=\"list\">\n<li>Click the <strong>Locale<\/strong><strong>view<\/strong> dropdown in the upper bar<\/li>\n<li>Choose your preferred locale<\/li>\n<li>Double-tap your navbar component on the canvas to adjust the primary component<\/li>\n<li>Revise or interpret the text and links in the main component<\/li>\n<li>Exit the main component\u00a0<\/li>\n<\/ol>\n<p>Following this, each occurrence of that navbar within that locale will adopt those localized values.<\/p>\n<p>Alternatively, you can localize the default value of a component property:\u00a0<\/p>\n<ol role=\"list\">\n<li>Press the <strong>Locale view<\/strong> dropdown in the top bar<\/li>\n<li>Select your preferred locale<\/li>\n<li>Double-tap the component you desire to localize to adjust the main component<\/li>\n<li>Proceed to <strong>Element settings panel<\/strong> &gt; <strong>Component properties<\/strong> &gt; <strong>Manage properties<\/strong><\/li>\n<li>Hit the component property whose value you intend to localize\u00a0<\/li>\n<li>Revise the default value (e.g., text, visibility, image, etc.)\u00a0<\/li>\n<\/ol>\n<p>You can also localize component instances by localizing the property fields. To initiate this, first ensure that the component has properties designated for the elements you wish to localize. Then:\u00a0<\/p>\n<ol role=\"list\">\n<li>Press the <strong>Locale view<\/strong> dropdown in the top bar<\/li>\n<li>Choose your preferred locale\u00a0<\/li>\n<li>Unveil the component instance you desire to localize\u00a0<\/li>\n<li>Revise or localize the values in the component instance<\/li>\n<li>Exit the component instance<\/li>\n<\/ol>\n<p>The localized values in the component instance will not propagate to other instances of the same component, even within the same locale.\u00a0<\/p>\n<h6><strong>Note: <\/strong>While in a secondary locale view, you are unable to append new component properties, erase or disconnect component properties, or alter component property types or settings.<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Customize your site\u2019s content and styles for each locale.","protected":false},"author":2,"featured_media":5326,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[288],"tags":[],"class_list":{"0":"post-4297","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-localization","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4297"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5285"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}