diff --git a/content/applications/websites/website/publish/translate.rst b/content/applications/websites/website/publish/translate.rst index 18744008f..fd3870b48 100644 --- a/content/applications/websites/website/publish/translate.rst +++ b/content/applications/websites/website/publish/translate.rst @@ -1,39 +1,95 @@ -=========================== -How to translate my website -=========================== +=================== +Website translation +=================== -Overview -======== +The contents of your website pages (i.e., text strings) can be translated into different languages +directly on your website. -In addition to creating great modern websites, Odoo gives you the -possibility to translate it in different languages. +Your website is displayed in the language that matches the visitor's browser's language, unless that +particular language has not been installed. In this case, the website is displayed in the +:ref:`default language `. The visitor can still select another language +in the language menu. -Process -======= +Installing languages +==================== -Once your website is created, you have the opportunity to translate it -in as many different languages as you want. +To translate your website, you first have to add the required languages: -You can only translate your website manually, follow the next step. +#. Go to your website. +#. Scroll to the bottom of the page to the **language menu**. +#. Click the language and select :guilabel:`Add a language`. -Now go to your website. On the bottom right corner of the page, click on -**Add a language**. + .. image:: translate/website-add-language.png + :alt: Add a language to your website. -.. image:: translate/translate_website01.png - :align: center +#. Click the :guilabel:`Languages` field and select the required language from the drop-down list. + Repeat this step for each additional language. +#. Click the :guilabel:`Add` button. -Choose the language in which you want to translate your website and then -click on **Load.** +.. tip:: + You can also edit your website's languages from the backend, in the :guilabel:`Settings`. Go to + :menuselection:`Website –> Configuration –> Settings` and add/remove the required languages in + the :guilabel:`Languages` field, in the :guilabel:`Website info` section. -.. image:: translate/translate_website02.png - :align: center +.. _translate/default-language: -You will see that Now, next to English there is also French, which means -that the page for the translation has been created. You can also see -that some of the text has been translated automatically. +Default language +---------------- -.. image:: translate/translate_website03.png - :align: center +If the language of the visitor's browser is not installed on your website, the content is displayed +in the default language. -To translate the content of the website, click on **Translate** (here -**Traduire** since we want to translate the website in French). +To define a default language, go to :menuselection:`Website –> Configuration –> Settings`, and +select a language in the :guilabel:`Default` field. + +.. note:: + This field is visible only if multiple languages are already configured for your website. + +Translating the contents +======================== + +Once the languages have been added, you can translate the contents of your website. To do so, go to +your website, select the language from the language menu and click the :guilabel:`Translate` button +on the right part of the task bar to activate the **translation mode**. + +.. image:: translate/translate-button.png + :alt: Translate button + +As a result: + +- Text strings that have already been translated are highlighted in green; +- Text strings that need to be translated are highlighted in yellow. + +.. image:: translate/website-translation-yellow.png + :alt: Text to be translated highlighted in yellow + +You can then replace the original text with the translation by clicking the block, editing its +contents and saving. + +.. tip:: + - Once the languages have been installed, you can also translate some items (e.g., + the product's name and description) from the backend (e.g., in the product template). To do so, + click the language code (e.g., :guilabel:`EN`) next to the text you want to translate (e.g., + the product name) and add the translation. + + .. image:: translate/product-translation.png + :alt: Translate product-related items. + + - You can also :doc:`export/import translations <../../../../developer/howtos/translations>` + to translate multiple items (e.g., product names and descriptions) in one go. + +Language selector menu +====================== + +To add a language selector menu: + +#. Go to your website and click :guilabel:`Edit`. +#. Select the block where you want to add the language selector menu (e.g., the header). +#. Select the :guilabel:`Customize` tab. +#. In the :guilabel:`Navbar` section, set the :guilabel:`Language selector` field to either + :guilabel:`Dropdown` or :guilabel:`Inline`. + + .. image:: translate/language-selector.png + :alt: Add a language selector menu. + +#. Click :guilabel:`Save`. diff --git a/content/applications/websites/website/publish/translate/language-selector.png b/content/applications/websites/website/publish/translate/language-selector.png new file mode 100644 index 000000000..cdc391b7d Binary files /dev/null and b/content/applications/websites/website/publish/translate/language-selector.png differ diff --git a/content/applications/websites/website/publish/translate/product-translation.png b/content/applications/websites/website/publish/translate/product-translation.png new file mode 100644 index 000000000..2706297e0 Binary files /dev/null and b/content/applications/websites/website/publish/translate/product-translation.png differ diff --git a/content/applications/websites/website/publish/translate/translate-button.png b/content/applications/websites/website/publish/translate/translate-button.png new file mode 100644 index 000000000..a6ecbf8be Binary files /dev/null and b/content/applications/websites/website/publish/translate/translate-button.png differ diff --git a/content/applications/websites/website/publish/translate/translate_website01.png b/content/applications/websites/website/publish/translate/translate_website01.png deleted file mode 100644 index 7906aa9da..000000000 Binary files a/content/applications/websites/website/publish/translate/translate_website01.png and /dev/null differ diff --git a/content/applications/websites/website/publish/translate/translate_website02.png b/content/applications/websites/website/publish/translate/translate_website02.png deleted file mode 100644 index d3139575e..000000000 Binary files a/content/applications/websites/website/publish/translate/translate_website02.png and /dev/null differ diff --git a/content/applications/websites/website/publish/translate/translate_website03.png b/content/applications/websites/website/publish/translate/translate_website03.png deleted file mode 100644 index 8ba88104e..000000000 Binary files a/content/applications/websites/website/publish/translate/translate_website03.png and /dev/null differ diff --git a/content/applications/websites/website/publish/translate/website-add-language.png b/content/applications/websites/website/publish/translate/website-add-language.png new file mode 100644 index 000000000..6b3620c8d Binary files /dev/null and b/content/applications/websites/website/publish/translate/website-add-language.png differ diff --git a/content/applications/websites/website/publish/translate/website-translation-yellow.png b/content/applications/websites/website/publish/translate/website-translation-yellow.png new file mode 100644 index 000000000..181427ee0 Binary files /dev/null and b/content/applications/websites/website/publish/translate/website-translation-yellow.png differ