Create a Multilingual Website with Custom UI Kit and Weglot for Webflow

Table of Contents

1. Introduction
2. Integrating We Glatt with Web Flow
3. Custom UI Kit for Web Flow
4. Basic Implementation of Copy-Pasting
5. Custom Code for Web Flow Interactions
6. Understanding We Glatt Initialization
7. Changing Language with Data Attribute Method
8. Updating Text and Links in Drop-Down
9. Reordering Links to Show Active Language
10. Conclusion

Integrating We Glatt with Web Flow

Are you looking to translate your website into multiple languages? Look no further than We Glatt, the powerful translation tool that seamlessly integrates with Web Flow. In this article, we'll walk you through the process of integrating We Glatt with Web Flow and show you how to use our custom UI kit to create a professional-looking multilingual website.

Custom UI Kit for Web Flow

At Fin Suite, we've created a custom UI kit that works perfectly with Web Flow and We Glatt. Our UI kit includes custom-built UI components and custom JavaScript that allows for seamless integration with We Glatt. We've designed our UI kit to be easy to use and copy-paste into your project, so you can get started with multilingual website design right away.

Basic Implementation of Copy-Pasting

To get started with our UI kit, simply clone our site and copy-paste the elements you want to use into your project. We've built the entire UI kit to be easy to copy-paste, so you don't need to worry about the code or structure. In this video, we'll show you how to copy-paste the UI components and explain why we've used custom code to make the connection between Web Flow interactions and We Glatt.

Custom Code for Web Flow Interactions

Our custom code is what makes our UI kit work seamlessly with Web Flow and We Glatt. We've included all the code you need to get started, and we'll walk you through the process of customizing the code to fit your needs. We'll explain how to change the classes on your UI elements, update the timeout for language changes, and use the data attribute method to switch languages.

Understanding We Glatt Initialization

Before you can start using We Glatt with Web Flow, you need to understand how We Glatt initialization works. We'll explain how to get the current active language and how to run a click on the current language to make sure the initial state of the UI component is correct.

Changing Language with Data Attribute Method

We've created a data attribute method for changing languages that works perfectly with Web Flow interactions. We'll explain how to use this method to switch languages and make sure the active language is showing correctly in the UI component.

Updating Text and Links in Drop-Down

If you're using a drop-down for language selection, you'll need to update the text and links to make sure the active language is showing first. We'll walk you through the process of reordering the links to show the active language first and explain how to update the text to match the selected language.

Reordering Links to Show Active Language

Reordering the links in your drop-down is an important step in making sure your multilingual website looks professional. We'll explain how to reorder the links to show the active language first and make sure your users can easily switch between languages.

Conclusion

In conclusion, integrating We Glatt with Web Flow is a powerful way to create a multilingual website that looks professional and is easy to use. With our custom UI kit and custom code, you can get started with multilingual website design right away. If you have any questions, please reach out to the We Glatt support team at support@weglatt.com. Happy translating!

Highlights

• We Glatt is a powerful translation tool that seamlessly integrates with Web Flow.
• Fin Suite has created a custom UI kit that works perfectly with Web Flow and We Glatt.
• Our UI kit includes custom-built UI components and custom JavaScript that allows for seamless integration with We Glatt.
• We've designed our UI kit to be easy to use and copy-paste into your project.
• Our custom code is what makes our UI kit work seamlessly with Web Flow and We Glatt.
• We've included all the code you need to get started, and we'll walk you through the process of customizing the code to fit your needs.
• We'll explain how to use the data attribute method to switch languages and make sure the active language is showing correctly in the UI component.
• Reordering the links in your drop-down is an important step in making sure your multilingual website looks professional.

FAQ

Q: Can I use We Glatt with other website builders besides Web Flow? A: Yes, We Glatt can be used with any website builder that allows for custom code.

Q: Do I need to know how to code to use the Fin Suite UI kit? A: No, our UI kit is designed to be easy to use and copy-paste into your project.

Q: Can I customize the UI kit to fit my website's design? A: Yes, our UI kit is fully customizable and can be tailored to fit your website's design.

Q: Is We Glatt easy to use? A: Yes, We Glatt is designed to be easy to use and requires no technical knowledge.