How to display content depending on site language

How it works

You can segment the content and display particular blocks only to the users viewing the page in certain languages via a custom HTML code. You may use an existing solution or add your own code.

How to get it

Using an existing solution

  1. Open your project in Publisher Account.
  2. In the side bar click Site Builder.
  3. Click Open Site Builder.
  4. In the Header block, set up the Translations component.
  5. Select the language to hide particular blocks for.
  6. Insert the following code to the Custom code block:
Copy
Full screen
Small screen
<script>
  (function () {
    var blockArray = [
      {
        blockName: '.block--packs',
        blockNumber: 0
      },
      {
        blockName: '.block--description',
        blockNumber: 0
      }
    ];

    function removeBlock() {
      setTimeout(function () {
        blockArray.map(function (block) {
          return document.querySelectorAll(block.blockName)[block.blockNumber];
        })
          .forEach(function (element) {
            element && element.remove();
          });
      }, 0);
    }

    removeBlock();
  })();
</script>

  1. In the blockArray array, modify the following parameters for each block you want to hide from users for the chosen language:
    • blockName — the name of the CSS class of the block. Possible options are:
      • .block--header (the Header block)
      • .block--hero (the Call-to-action block)
      • .block--html (the Custom code block)
      • .block--packs (the Packs block)
      • .block--description (the Description block)
      • .block--gallery (the Gallery block)
      • .block--requirements (the System requirements block)
      • .block--faq (the FAQs block)
      • .block--embed (the Social media widgets block)
      • .block--news (the News block)
      • .block--footer (the Footer block)
    • blockNumber — the sequence number of the block. Minimum value is 0.
  2. Click Preview to see your changes.

Watch the tutorial video for this instruction:


Adding your own code

  1. In the Builder, click Add block and choose Custom code.
  1. Insert your own code to the block.
Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!

Useful links

Last updated: March 26, 2024

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!