[IMP] Website: review website translation page

task-3255779

closes odoo/documentation#3978

X-original-commit: 67bada80e6
Signed-off-by: auva-odoo <auva@odoo.com>

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
+Your website is displayed in the language that matches the visitor's browser's language, unless that
-possibility to translate it in different languages.
+particular language has not been installed. In this case, the website is displayed in the
+:ref:`default language <translate/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
+To translate your website, you first have to add the required languages:
-in as many different languages as you want.
 
-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
+   .. image:: translate/website-add-language.png
-**Add a language**.
+      :alt: Add a language to your website.
 
-.. image:: translate/translate_website01.png
+#. Click the :guilabel:`Languages` field and select the required language from the drop-down list.
-    :align: center
+   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
+.. tip::
-click on **Load.**
+   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
+.. _translate/default-language:
-    :align: center
 
-You will see that Now, next to English there is also French, which means
+Default language
-that the page for the translation has been created. You can also see
+----------------
-that some of the text has been translated automatically.
 
-.. image:: translate/translate_website03.png
+If the language of the visitor's browser is not installed on your website, the content is displayed
-    :align: center
+in the default language.
 
-To translate the content of the website, click on **Translate** (here
+To define a default language, go to :menuselection:`Website –> Configuration –> Settings`, and
-**Traduire** since we want to translate the website in French).
+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`.