Skip to main content
All CollectionsHow-tos
How to edit translations?
How to edit translations?

Explanation about how to use the edit translations feature.

Edvard avatar
Written by Edvard
Updated over a year ago

The Edit translations feature is available in our paid plans only. If you do not already have a paid plan you can get one from https://gtranslate.io/#pricing page. Check our How to choose a paid plan guide for more info.

To edit the translations you will need to have your paid plan configured properly. If you have issues configuring it, you may contact our Live Chat for help.

Update: Now you can edit translations specific to your website from your User Dashboard also.

1. Opening the in-context edit interface

To open the edit interface first go to the page you wish to edit and select the language you want to modify. For example open https://ru.gtranslate.io/о-нас, then add ?language_edit=1 in the end of URL in browser address bar https://ru.gtranslate.io/?language_edit=1

This will open the edit interface where you can modify translations and save the changes.

Note: Anyone can open the edit interface, but only those with login/password provided by GTranslate can save changes.

2. Modifying translations and saving

On the edit interface you will see pencil icons near each text you can edit. Hovering on the pencil icon will highlight the text it will edit and clicking on it will open popup window for you to make modifications you want.

To close the edit interface click on the Close edit interface button on the top left corner of your page.

Note: If you cannot see the modifications you have made after closing the edit interface, try CTRL+F5 (⌘+Shift+R for Mac) keys combination to refresh the page and clear the browser cache.

Note: Editing text on one page will change it site-wide.

Note: Purple pencil icon represents human edited text, while green pencil icon represents automatic translation.

Note: If the original text changes, the previous modification for that text will also be changed by automatic translation.

3. Editing meta keywords, description and page title

You can edit meta keywords, meta description if there is any for your page. You can use edit pencil icons on the top left corner of the edit interface to change the page title, meta keywords and meta description.

Please refer to the previous animation for demonstration.

4. Editing images

If your image has width + height dimensions larger than 100 pixels you can edit it by using pencil icon on the top left corner of that image. Hovering on the pencil icon will highlight the image it will edit and clicking on it will open a popup window where you can enter the URL of the image you want to be used instead.

Alternatively, in your original version you can define data-gt-src-xx attribute (where xx is the code of the language) for the HTML <img> tag which will contain the URL of the image you want to be used in the translated version.
For example:

<img src="original.jpg" data-gt-src-ru="russian.jpg" data-gt-src-es="spanish.jpg">

This will result in using russian.jpg image for Russian translation, spanish.jpg for Spanish translation and original.jpg for all other cases.

Moreover, data-gt-src-xx attribute can be used for HTML <iframe> tag to modify for example YouTube embedded videos for different translations. You can also use it for HTML <script> tag to include a different javascript file.

For links you can use data-gt-href-xx attribute to change the pointing URL.
For example:

<a href="http://example.com" data-gt-href-es="http://example.es">Link</a>

This will result in using http://example.es link in Spanish translation and http://example.com for original and other languages. You can also use it for HTML <link> tag to include a different CSS file.

5. Editing URL translations

If you have URL translation feature included in your plan, then you can also edit the translations of the internal links. You can use the arrow icon on the right of each link to open a popup window where you can enter translation of URL segments.

Note: Changing a segment for one link, will change it site-wide.

6. Editing texts with numbers

In our edit interface, we utilize the XNUMX variable as a placeholder for all numerical values. For instance, if your original text includes "10 cents," it will be represented as "XNUMX cents" in the edit interface. When you translate "XNUMX cents" once, the same translation will be applied to all similar phrases like "11 cents," "18 cents," and so on.

However, there are cases where the order of numbers in the translated text may differ from the original text. In such situations, you can use indexes to refer to specific numbers. For example, consider the English phrase "10 doves are sitting on 5 stones," which is translated into Russian as "На 5 камнях сидят 10 голубей." To correctly adjust this, you would use the format "На XNUMX{2} камнях сидят XNUMX{1} голубей," where the numbers 5 and 10 are appropriately indexed.

This approach allows you to maintain accuracy and efficiency in your translations, ensuring that numerical values are correctly positioned without the need for repetitive manual adjustments.​

7. Editing paragraphs (pencil with blue block icon)

If the paragraph contains text formatting or other HTML elements you can edit it as a whole. On the edit interface you will see a pencil with blue block icon near each paragraph. Hovering on the pencil with blue block icon will highlight the whole paragraph to be edited and clicking on it will open a popup window where you can make modifications.

Note: The modifications of the paragraph as a whole have higher priority over the changes of the parts of that paragraph.

By default we only allow editing paragraph (<p>) elements as HTML blocks, but you can define more blocks using data-gt-block attribute. For example:

<div class="contact-info" data-gt-block>
    <div>1 Hacker Way, Menlo Park, CA 94025, USA</div>
    <div>Tel: +1 (555) 123 8888</div>
    <div>9:00 AM - 6:00 PM PDT</div>
</div>

This will allow you to edit the whole HTML content of contact info block.

You may define HTML blocks using CSS selectors from your User Dashboard. For this case the following CSS selector will add the necessary data-gt-block attribute:

div.contact-info

Did this answer your question?