Translation

Whenever you are creating a bilingual or a multilingual website and you've set it up within the CMAs, you will need to bring in the element, the language switcher or the switcher element, also known as the translation element, to actually enable your visitors to switch between the pages. Let's see how you bring it in and style out this element. From the add elements drawer on the left, let's go to the bottom and you will see translation. Click, hold, and drag, and I'll drop it here in my header, which is usually very convenient place to access the language switcher. Interact with it by clicking on it and align it to where you want it to go within your page. Settings allows you to change the width of the box in which the language switcher appears and also the height. This is basically padding that's added at the top and on the sides. You still have normal styling, additional padding, and margins as you want to apply it to it. For the settings itself, we go all the way to the left. Choose Use whether you want to display the name or only a code of the name, and then you have spacing between the flags and the name.

The flag can also be deactivated, and then you have settings for the size and the spacing remains here. Change the topography, and you also have color, but this color, you will note, only applies to the top link within this element. If you want to make changes to the drop-down menu, select the Open drop-down menu and you will see the color options appear now where you can go ahead and make changes. Remember also to check on your tablet and mobile displays to make sure it looks good on these devices and that it fits the various designs.