Adding localized images to the site

How It Works

You can add an image with the text written in a certain language. This feature will help you make the site more informative for users from different countries.

Who Can Use It

Partners who have already integrated Site Builder.

How to Get It

  1. Go to Publisher Account > Site Builder.
  2. In the Header block, set up the Translations component.
  3. Select the language(s) to add a localized image for.
  4. Insert the following code to the Custom code block:

<style>
  .localised-image {
    text-align: center;
    padding: 4em 1em;
  }
  .localised-image img {
    width: 100%;
  }
</style>  
<div class="localised-image">
  <img class="lazy loaded" data-src="https://cdn3.xsolla.com/files/uploaded/2340/d9d69114bb9f7c60f0981639aaa4bf3a.jpeg" />
</div>

  1. Put the link to each image to the img element of the data-src attribute. Supported image formats: JPEG, PNG, GIF.
  2. To add several localized images, duplicate the block with the div tag and change the image URLs.
  3. Click Preview to see your changes.

Here is the tutorial video for this recipe: