{"id":8528,"date":"2020-06-18T16:00:58","date_gmt":"2020-06-18T14:00:58","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8528"},"modified":"2020-07-29T00:35:08","modified_gmt":"2020-07-28T22:35:08","slug":"wordpress-multilingual-site","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-multilingual-site\/","title":{"rendered":"How to Create a Multilingual WordPress Site with Bridge and Weglot"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Of the <a href=\"https:\/\/www.internetworldstats.com\/stats7.htm\" target=\"_blank\" rel=\"noopener noreferrer\">world&#8217;s 4.3+ billion Internet users<\/a>, only about a quarter actually use English on the Internet. If you\u2019re looking to expand your reach and start doing business internationally you should <strong>consider how your WordPress site could benefit from going multilingual<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Translating your WordPress site can help you <strong>each new audiences and provide a better experience for your existing visitors<\/strong>. It\u2019ll also <strong>improve the ranking<\/strong> of your content in Google for different language queries (multilingual SEO).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With the help of a WordPress translation plugin, it&#8217;s actually not that complicated to offer your site in multiple languages. And, whilst there are many multilingual plugins available, none are more <strong>user friendly and easy to integrate<\/strong> than <a href=\"https:\/\/weglot.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Weglot<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this tutorial, we\u2019ll show you step-by-step how to translate your site into new languages and create a great multilingual experience for your visitors. Here&#8217;s what we&#8217;ll cover:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-does-weglot-work\">How Does Weglot Work?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#translation-management\">Translation Management<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#multilingual-seo\">Multilingual SEO<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-install-weglot\">How to Install Weglot on Your WordPress Website<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#edit-your-translations\">Edit Your Translations<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#translating-images\">Translating Images<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#tips-to-create-a-more-effective-multilingual-website\">Three Tips to Create a More Effective Multilingual Website<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#automatically-redirect-visitors-to-their-preferred-language\">Automatically Redirect Visitors to Their Preferred Language<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#layouts-in-different-languages\">Pay Attention to Layouts in Different Languages<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#get-started-with-a-multilingual-wordpress-site\">Get Started With a Multilingual WordPress Site Today<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-does-weglot-work\"><\/a>How Does Weglot Work?<\/h2>\n<p>[\/vc_column_text][vc_column_text]<strong>Weglot works by automatically detecting all the content on your WordPress website<\/strong> (including all plugins), translating it using machine translation providers and then displaying the content under language subdirectories. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Your multilingual WordPress website is up and running as soon as you\u2019ve installed the Weglot plugin<\/strong> &#8211; there\u2019s nothing else to it! Once you head over to your website, you\u2019ll see a newly added language switcher making it easy for your website visitors to change between the language of their choice. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Weglot is incredibly user friendly and in comparison with other WordPress multilingual plugins, there\u2019s no manual work or tricky string-by-string translation required &#8211; installing the Weglot plugin takes just a couple of minutes. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The other part of Weglot is that you don\u2019t need to worry about content that falls outside of your website (e.g. a review plugin) being translated, <em>everything<\/em> on your website will be detected and translated (including images). This content is then managed within the same interface as the rest of your website translations.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"translation-management\"><\/a>Translation Management<\/h2>\n<p>[\/vc_column_text][vc_column_text]One of the great things about Weglot is that you have the best of both worlds when it comes to translation management. First, Weglot will give you a <strong>fast layer of automatic translation<\/strong>, meaning your website is instantly multilingual. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But, if you want to refine those translations further you can edit them manually within the Weglot dashboard, or, if you\u2019re not familiar with the language, order <strong>professional translations without leaving the Weglot interface<\/strong> (<em>only available on paid plans<\/em>).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Weglot is an all-in-one translation solution that takes care of every part of the usual issues related to going multilingual. One of its USPs is that you can translate your website without the need for a developer, this is also echoed when it comes to editing your language switcher. This can easily be styled to suit the look of your website in a few clicks within the Weglot tab in your WordPress dashboard. [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"multilingual-seo\"><\/a>Multilingual SEO<\/h2>\n<p>[\/vc_column_text][vc_column_text]It\u2019s not just the translating and displaying part of making your website multilingual that Weglot takes care of. Another important aspect to ensure you\u2019ll be found by your new markets is multilingual SEO. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is managed by Weglot in a number of different ways. [\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-ordered-list-item \">\n\t        <div class=\"qodef-ol-title-holder\">\n            <span class=\"qodef-ol-title-number\">1.<\/span>\n                        <span class=\"qodef-ol-title\">\n                <span class=\"qodef-ol-title-text\">A unique URL is created for each version of your translated website<\/span>\n            <\/span>        <\/div>\n    <\/div>[vc_column_text]Weglot creates language subdirectories to help avoid duplicate content penalties. Google\u2019s best practices recommend using \u2018dedicated URLs\u2019 that include a language indicator. The indicator enables search engines and users to identify the language from the URL alone.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Unique-URL.jpg\" class=\"attachment-full size-full\" alt=\"Unique URL\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Unique-URL.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Unique-URL-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Unique-URL-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;48px&#8221;]<div class=\"qodef-ordered-list-item \">\n\t        <div class=\"qodef-ol-title-holder\">\n            <span class=\"qodef-ol-title-number\">2.<\/span>\n                        <span class=\"qodef-ol-title\">\n                <span class=\"qodef-ol-title-text\">Automatically added Hreflang tags<\/span>\n            <\/span>        <\/div>\n    <\/div>[vc_column_text]Weglot automatically <a href=\"https:\/\/qodeinteractive.com\/magazine\/hreflang-tags-in-wordpress\/\">adds hreflang tags<\/a> in your source code because these tags let search engines determine both the language of the page and which region it is intended for. You can find these hreflang tags in the <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;head&gt;<\/code> tag of your website source code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Automatically-added-Hreflang-tags.jpg\" class=\"attachment-full size-full\" alt=\"Automatically added Hreflang tags\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Automatically-added-Hreflang-tags.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Automatically-added-Hreflang-tags-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Automatically-added-Hreflang-tags-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Handling this process manually can be both time consuming and tricky &#8211; and usually requires the help of a developer &#8211; which is why Weglot manages this for you. [\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-ordered-list-item \">\n\t        <div class=\"qodef-ol-title-holder\">\n            <span class=\"qodef-ol-title-number\">3.<\/span>\n                        <span class=\"qodef-ol-title\">\n                <span class=\"qodef-ol-title-text\">Content translated into the source code<\/span>\n            <\/span>        <\/div>\n    <\/div>[vc_column_text]Another important aspect is that Weglot translates your website\u2019s content on the server-side. This is where your original content is swapped with the translation before the page is sent to the visitor. The translations are kept in the source code of the page which is the ideal way for Google bots to detect it. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is in contrast with a JavaScript solution (an option used by many other WordPress multilingual plugins), which stores the translations on the client-side \u2013 where your original content is sent to your site visitor, and it\u2019s only there that the content is swapped with the translation. This way of translation makes it harder for Google bots to index the translations, as they will only \u201csee\u201d the original content.[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-ordered-list-item \">\n\t        <div class=\"qodef-ol-title-holder\">\n            <span class=\"qodef-ol-title-number\">4.<\/span>\n                        <span class=\"qodef-ol-title\">\n                <span class=\"qodef-ol-title-text\">Detects and translates SEO metadata<\/span>\n            <\/span>        <\/div>\n    <\/div>[vc_column_text]It\u2019s not just the visible content of your WordPress website that Weglot detects and translates. All your metadata will also be translated and available to edit within your Weglot dashboard.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is an essential part of your multilingual SEO because metadata helps search engines and potential visitors understand the content of your page, and is treated as a key piece of information when indexing a website\/page. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The even better news is that all the functionalities we\u2019ve just discussed are available on the Weglot free plan. For small websites with 2,000 words or less and needing one additional language, you can use Weglot for free. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<em><a href=\"https:\/\/weglot.com\/pricing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Paid plans<\/a> start from just 99EUR a year depending on the number of words on your website and how many languages you want to add. Paid plans also include access to professional translators and the option to add team members to your translation project. <\/em>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-install-weglot\"><\/a>How to Install Weglot on Your WordPress Website<\/h2>\n<p>[\/vc_column_text][vc_column_text]To demonstrate how to create a multilingual WordPress site, we&#8217;ve <em>spun up<\/em> a brand new <a href=\"https:\/\/bridge.weglot-translate.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">test site<\/a> using Qode\u2019s <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/bridge-creative-multi-purpose-wordpress-theme\/\">Bridge WordPress theme<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-How-to-install-Weglot-on-your-WordPress-website.jpg\" class=\"attachment-full size-full\" alt=\"How to install Weglot on your WordPress website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-How-to-install-Weglot-on-your-WordPress-website.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-How-to-install-Weglot-on-your-WordPress-website-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-How-to-install-Weglot-on-your-WordPress-website-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Weglot will <strong>work with all WordPress themes (and plugins)<\/strong>, so you can use any configuration that fits your needs. But for the purposes of this demonstration, we decided to go with the Bridge theme for its ease of use and sheer power.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here&#8217;s your step-by-step guide to creating a multilingual WordPress site&#8230;[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-ordered-list-item \">\n\t        <div class=\"qodef-ol-title-holder\">\n            <span class=\"qodef-ol-title-number\">1.<\/span>\n                        <span class=\"qodef-ol-title\">\n                <span class=\"qodef-ol-title-text\">Install the Weglot plugin<\/span>\n            <\/span>        <\/div>\n    <\/div>[vc_column_text]Go into your WordPress dashboard and click on <em>Plugins &gt; Add New<\/em>. Search for <em>Weglot<\/em> and click install. This will take a couple of seconds &#8211; then click activate.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Weglot-Translate.jpg\" class=\"attachment-full size-full\" alt=\"Weglot Translate\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Weglot-Translate.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Weglot-Translate-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Weglot-Translate-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;48px&#8221;]<div class=\"qodef-ordered-list-item \">\n\t        <div class=\"qodef-ol-title-holder\">\n            <span class=\"qodef-ol-title-number\">2.<\/span>\n                        <span class=\"qodef-ol-title\">\n                <span class=\"qodef-ol-title-text\">Add your languages<\/span>\n            <\/span>        <\/div>\n    <\/div>[vc_column_text]You\u2019ll now see a Weglot tab has been added to your WordPress dashboard. Click on that tab to add your languages.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Add your API key<\/strong> (to access your unique API key you\u2019ll need to <a href=\"https:\/\/dashboard.weglot.com\/register?fp_ref=qodeinteractive\" target=\"_blank\" rel=\"noopener noreferrer\">create an account<\/a> with Weglot &#8211; this is also where you\u2019ll manage your translations), the original language of your website, then the languages you want to add to your WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, to translate an English language site into Spanish, you&#8217;d configure things like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Add-your-languages.jpg\" class=\"attachment-full size-full\" alt=\"Add your languages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Add-your-languages.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Add-your-languages-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Add-your-languages-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As soon as you click <em>Save Changes<\/em>, Weglot will use machine translation to <strong>automatically translate all of your content into your destination language(s)<\/strong>:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Automatically-translate-all-of-your-content.jpg\" class=\"attachment-full size-full\" alt=\"Automatically translate all of your content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Automatically-translate-all-of-your-content.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Automatically-translate-all-of-your-content-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Automatically-translate-all-of-your-content-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And just like that, you have a working multilingual WordPress website! [\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;81px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"edit-your-translations\"><\/a>Edit Your Translations<\/h2>\n<p>[\/vc_column_text][vc_column_text]To edit your translations, Weglot gives you two interfaces:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Translations list<\/strong> \u2014 you&#8217;ll see a side-by-side list of your original translations and the translated versions. To edit text, you can click and type.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Visual editor<\/strong> \u2014 you&#8217;ll see a live preview of your website. To edit text, you can hover over the element that you want to translate on the preview of your site and click the blue pencil icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here&#8217;s what the list editor looks like. You can use the search box or filters to find specific content:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Edit-your-translations.jpg\" class=\"attachment-full size-full\" alt=\"Edit your translations\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Edit-your-translations.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Edit-your-translations-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Edit-your-translations-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And here&#8217;s what the visual editor looks like. To translate an element, all you do is hover over it and click the blue pencil icon:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Visual-editor.jpg\" class=\"attachment-full size-full\" alt=\"Visual editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Visual-editor.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Visual-editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Visual-editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That will open a popup where you can edit the translation:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Translating-images.jpg\" class=\"attachment-full size-full\" alt=\"Translating images\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Translating-images.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Translating-images-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Translating-images-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]No matter which interface you choose, any changes that you make will immediately sync with your live WordPress site.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"translating-images\"><\/a>Translating Images<\/h2>\n<p>[\/vc_column_text][vc_column_text]Weglot can also help you &#8220;translate&#8221; your site&#8217;s images so that visitors see different images depending on their chosen language.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To enable the ability to translate images with Weglot, you&#8217;ll need to go to the <em>Project settings<\/em> area in your Weglot dashboard and use the toggle to <em><strong>Enable Media translation<\/strong><\/em>:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Enable-Media-translation.jpg\" class=\"attachment-full size-full\" alt=\"Enable Media translation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Enable-Media-translation.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Enable-Media-translation-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Enable-Media-translation-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you can translate images from both the list and visual editors. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And that&#8217;s it! Congratulations \u2014 you just created a WordPress multilingual site.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"tips-to-create-a-more-effective-multilingual-website\"><\/a>Three Tips to Create a More Effective Multilingual Website<\/h2>\n<p>[\/vc_column_text][vc_column_text]To finish things out, let&#8217;s look at some tips to optimize your multilingual website.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Pick a Language Switcher That Works for Your Site<\/h3>\n<p>[\/vc_column_text][vc_column_text]By default, Weglot adds a floating language switcher in the bottom-right corner of your website that includes both a flag and the language name.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If needed, you can change both the position and style of the language switcher. You&#8217;ll get a new group of settings in the <em>Weglot<\/em> area in your WordPress dashboard, and you can also choose between different positions:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Menu item<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Widget<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Shortcode<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Source code (by adding a\n\n)<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;12px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Pick-a-language-switcher-that-works-for-your-site.jpg\" class=\"attachment-full size-full\" alt=\"Pick a language switcher that works for your site\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Pick-a-language-switcher-that-works-for-your-site.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Pick-a-language-switcher-that-works-for-your-site-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/11-Pick-a-language-switcher-that-works-for-your-site-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So what&#8217;s the optimal language switcher design and position?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The best position depends on your site. You want it to be somewhere visible so that people know you offer multiple languages, but not so noticeable that it gets in the way of your site. The most common positions are:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Floating<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Footer<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Header<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]Because most visitors are familiar with looking in these areas, it&#8217;s a good idea to stick to them for your language switcher&#8217;s placement.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the design, here are some general tips:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Don&#8217;t display just the flag<\/strong>. While Weglot does let you do this, most experts recommend against using only flags (and no language name). There&#8217;s even an <a href=\"http:\/\/www.flagsarenotlanguages.com\/blog\/why-flags-do-not-represent-language\/\" target=\"_blank\" rel=\"noopener\">entire site dedicated to the idea that flags are not languages<\/a>.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Use a language&#8217;s local name<\/strong>. For example, &#8220;Espa\u00f1ol&#8221; instead of &#8220;Spanish&#8221;. Weglot does this automatically for you.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"automatically-redirect-visitors-to-their-preferred-language\"><\/a>Automatically Redirect Visitors to Their Preferred Language<\/h2>\n<p>[\/vc_column_text][vc_column_text]To create a more user-friendly experience and make sure visitors don&#8217;t miss the fact that you offer your content in their native languages, you can <strong>automatically redirect visitors to the proper language<\/strong> <a href=\"https:\/\/blog.weglot.com\/best-practices-language-redirection\/\" target=\"_blank\" rel=\"noopener noreferrer\">based on their browser language<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<em>This is more reliable than using a visitor&#8217;s geolocation, as a person&#8217;s physical location doesn&#8217;t always correlate with their preferred language.<\/em>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to set this up, you can go to the <em>Project settings<\/em> in your Weglot dashboard and enable the <em>Auto switch<\/em> feature. You can also <strong>specify a fallback language in case your site can&#8217;t detect a visitor&#8217;s preferred language<\/strong>:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Auto-switch-feature.jpg\" class=\"attachment-full size-full\" alt=\"Auto switch feature\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Auto-switch-feature.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Auto-switch-feature-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Auto-switch-feature-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"layouts-in-different-languages\"><\/a>Pay Attention to Layouts in Different Languages<\/h2>\n<p>[\/vc_column_text][vc_column_text]When you created the design for important pages on your site, you probably paid close attention to how your text fits on the page. For example, does your main heading take up two lines or three lines? Does the button text fit the optimal width of the button?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>When you translate your content into a new language, there&#8217;s no guarantee that it&#8217;s going to match the same layout<\/strong>. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sure, you might get lucky and have your translations fit perfectly on the page. But you also might end up with some awkward situations where the translated text takes up an extra line and it looks weird.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, for your important pages, <strong>it&#8217;s worth spending a little time checking not just the words<\/strong>, but also the fit of those words on the page.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you use the visual editor in Weglot, you&#8217;ll be able to instantly see how changing your translations affects the design of your page:[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"get-started-with-a-multilingual-wordpress-site\"><\/a>Get Started With a Multilingual WordPress Site Today<\/h2>\n<p>[\/vc_column_text][vc_column_text]The Internet breaks down physical barriers between people, but overcoming communication barriers is up to you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]By translating your WordPress site into new languages, you can break down those barriers and:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Improve your visibility in Google search and start ranking for search queries in new languages.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Offer a better experience to your existing multilingual visitors.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Open your site up to new audiences and give yourself a chance to connect with more people.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]Then, you can use a translation plugin like Weglot to translate your site into one or more new languages in no time. Try Weglot\u2019s <a href=\"https:\/\/dashboard.weglot.com\/register?fp_ref=qodeinteractive\" target=\"_blank\" rel=\"noopener noreferrer\">10-day free trial<\/a> and get started today.[\/vc_column_text]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Creating a WordPress multilingual site can be quick and easy, especially with the combined power of the Bridge theme and the Weglot plugin.<\/p>\n","protected":false},"author":20500,"featured_media":8582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-8528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/20500"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8528"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8528\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8582"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}