Localizing Components (Beta)
Beta Feature
This feature is currently in beta and may be subject to changes. During the beta phase, some functionality might be limited or unstable. Please use it with caution in production environments and provide feedback to help us improve.
What are Components?
Components in Webflow empower you to create reusable and customizable blocks from various elements to help maintain a consistent, efficient, and scalable design workflow. Using the Localization APIs for components, teams can ensure the design of components remain consistent, while ensuring their translations are suited for a specific locale.
Below, we’ll quickly cover the key concepts of components in Webflow. For a more detailed understanding, visit Webflow University.
Component definitions, instances, and properties
Component definition
The component definition is the blueprint for a component. It establishes the foundational structure of the elements within the component, as well as properties that can be further defined in a component instance. Any modifications made to the component definition will propagate and automatically update all associated component instances. This ensures consistency across instances while allowing for centralized changes.
Component instance
A component instance is a single instantiation of the component definition. While it retains the core design and structure of the definition, each instance can be customized through component properties.
Component properties
Component properties, or “props,” in Webflow define the customizable elements of a component, such as text, images, or links. While designers can provide default values for props, they can also be overridden in a component instance without changing the original component definition.
These properties can be modified across locales, enabling seamless translation of your site into different languages. This flexibility allows you to create unique, localized variations of a component across different pages or sections, maintaining consistency while adapting to specific needs of a locale.
Localizing Components in Webflow
When it comes to localizing components in Webflow, you have two approaches based on your preferences and specific needs:
- Localize a Component Definition This approach is more suitable for commonly used components, like Navbars and Footers, that will appear throughout the localized version of your site. By localizing properties at the component definition level, you ensure consistency across all instances, making it easier to manage and update as needed.
- Localize a Component Instance This method is ideal for components that are used in varied contexts, such as Hero Sections, Testimonials, and Call-to-Action Buttons. By localizing each instance individually, you can customize the content to meet specific needs and contexts, ensuring that it resonates with local audiences.
Conclusion
By following these steps, you can effectively localize components on a Webflow site. Keep in mind the current limitations regarding what can be localized and ensure your payload matches the property type requirements to avoid issues during the localization process.