Cómo visualizar el contenido en función del idioma del sitio web

Cómo funciona

Puede segmentar el contenido y mostrar bloques concretos solo a los usuarios que vean la página en determinados idiomas mediante un código HTML personalizado. Puede utilizar una solución existente o añadir su propio código.

Cómo conseguirlo

Utilizar una solución existente

1. Abra su proyecto en Cuenta del editor.
2. En la barra lateral haga clic en Site Builder.
3. Haga clic en Open Site Builder.
4. En el bloque Header, establezca el componente Translations.
5. Seleccione el idioma para el que desee ocultar determinados bloques.
6. Inserte el siguiente código en el bloque Custom code:

<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>

7. En la matriz blockArray, modifique los siguientes parámetros para cada bloque que desee ocultar a los usuarios para el idioma elegido:
   • blockName - el nombre de la clase CSS del bloque. Las opciones posibles son:
     • .block--header (el bloque Header )
     • .block--hero (el bloque Call-to-action )
     • .block--html (el bloque Custom code )
     • .block--packs (el bloque Packs )
     • .block--description (el bloque Description )
     • .block--gallery (el bloque Gallery )
     • .block--requirements (el bloque System requirements )
     • .block--faq (el bloque FAQs )
     • .block--embed (el bloque Social media widgets )
     • .block--news (el bloque News )
     • .block--footer (el bloque Footer )
   • blockNumber - el número de secuencia del bloque. El valor mínimo es 0.
8. Haga clic en Preview para ver sus cambios.

Vea el tutorial en vídeo para seguir estas instrucciones:

Agregar su propio código

1. En Builder, haga clic en Add block y seleccione Custom code.

2. Inserte su propio código en el bloque.

Enlaces útiles