How do I customize formatting on my translated website?
For certain languages, the text on your webpage may expand or contract upon translation to the point where the formatting may need to be adjusted. For example, compare the sentences below:
EN: Add these items to my shopping cart.
DE: Fügen Sie diese Artikel meinem Einkaufswagen hinzu.
KO: 이 상품을 장바구니에 담습니다.
We can see that the German translation "expands" compared to the English source text, and the opposite occurs for Korean. While a common feature of translation, text expansion or contraction may lead to formatting issues on your website.
Edits to the layout or formatting on your translated website can be made directly in the context of your translated pages from your GlobalLink Web Studio. Studio is only accessible from the Desktop app. If you haven't already, download the Desktop app from your User dropdown menu in the top right corner of the web-based platform.
It is recommended that you have at least a baseline knowledge of CSS when applying properties in your Editor.
Control the formatting of your translated site
To change the formatting on your translated page, follow the steps below:
1: Open GlobalLink Web Studio from your Desktop app and select the relevant language.
2: Click on the Layout tab.
3: On your webpage in the left-hand pane, right-click on the block that you want to adjust.
4: The CSS selector for the block you selected will be automatically added in the right-hand pane. Click on Add new.
In the ensuing custom CSS Editor, apply the relevant properties needed to adjust the layout of your page to your specifications. You can see your changes in-context as you make them by clicking the Preview button below the Editor. Once done, be sure to Save your changes! Any saved changes can be tracked and compared against previous properties from the bottom left corner of your Editor.
In the screenshot below, you can see the adjustments applied to the H1 heading when compared with the previous screenshot. This change wouldn't be recommended in a real deployment of course, it's simply illustrating the ability of your Custom CSS Editor to control the layout of your translated pages.
