[IMP] Website: review website translation page
task-3255779
closes odoo/documentation#3978
X-original-commit: 67bada80e6
Signed-off-by: auva-odoo <auva@odoo.com>
@ -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 <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
|
||||
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`.
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 11 KiB |