Opção 1:
Elementos Gerais

Atributo CSS "lang-hide"
Seleciona-se as línguas em que o elemento não deve aparecer
lang-hide="BR-ES"
lang-hide="ES-EN"
lang-hide="BR-EN"
lang-hide="BR"
lang-hide="ES"
lang-hide="EN"
Sem "lang-hide"
lang-hide="BR-ES-EN"

Opção 2:
Elementos Gerais

Atributo CSS "lang-show"
Seleciona-se as línguas em que o elemento deve aparecer,
lang-show="EN"
lang-show="BR"
lang-show="ES"
lang-show="EN-ES"
lang-show="BR-EN"
lang-show="BR-ES"
lang-show="BR-EN-ES"
Sem "lang-show"

CMS | Blog

Atributo CSS "lang-cms"
Seleciona-se, no CMS, as línguas em que o item deve aparecer,
Articles

Sensedia uses AWS expertise to accelerate the digital journey of companies

APIX

APIX confirm the 2022’s edition in a global online version and face-to-face journey in São Paulo

APIs

7 benefits that a Low Code API platform can bring to your business

APIs

3 formas de adotar estratégias de APIs em Telecom e o impacto para as equipes de negócio e tecnologia

Open Health

Entenda como dar o primeiro passo rumo ao Open Health no Brasil

Open Finance

Open Everything? Calm down, we can explain!

Events

Melhores momentos APIX Stories BH

Dicas
Elementos Gerais

O que são elementos gerais?

Estamos chamando de elementos gerais aqueles que não possuem mudanças dinâmicas pelo CMS, ou seja, no Webflow, são todos os elementos que não estão dentro de uma Collection List.

Como adicionar os atributos?

Ao selecionar um elemento, vá para "Element Settings" e adicione o atributo na aba de "Custom Attributes".

Exemplo:

Qual a formatação devo utilizar para os atributos?

O nome do atributo deve ser escrito da mesma forma apresentada nas sections acima.
O valor do atributo deve utilzar o seguinte padrão:
• LETRAS MAIÚSCULAS para os idiomas;
• Idiomas escritos como "BR", "ES" ou "EN";
• Para inserir 2 ou 3 idiomas, separá-los por hífen, sem espaços.

Quais idiomas são aceitos?

Os idiomas configurados no script são Inglês, Português e Espanhol.

Diferença entre "lang-show" e "lang-hide"

O atributo "lang-show" deve ser utilizado quando deseja especificar em qual idioma o elemento deve aparecer.
Já o atributo "lang-hide" faz o contrário, ele deve ser utilizado quando precisar ocultar o elemento em um determinado idioma.

Dicas
CMS | Blog

Como adicionar os atributos?

Dentro do CMS do blog ("Blog Posts"), selecione o(s) idioma(s) do post.

Exemplo:

Como selecionar os três idiomas?

Para evitar um excesso de execuções do código, não adicionamos a opção de selecionar os três idiomas. Portanto, ao deixar o campo de seleção desmarcado, o código considerará que o post faz parte de todos os idiomas.

Código não está funcionando?

O código identifica os idiomas a partir do atributo lang-cms que está logo abaixo do Collection Item em um embed adicionado pela Novos Conceitos.
Certifique-se que esse elemento está presente.

Se o erro persistir, entre em contato pra escalerecermos dúvidas ou resolvermos problemas/bugs.

Scripts
Códigos

HEAD

<!-- Novos Conceitos Script -->
<script>
 /*
  * SCRIPT utilizando o atributo "lang-hide"
  */
 let url = window.location.hostname;
 let css = ""
 switch(url.substring(0,2)){
   case "br":
     css = '[lang-hide*="BR"] { display: none !important;}';
     break;
   case "es":
     css = '[lang-hide*="ES"] { display: none !important;}';
     break;
   default:
     css = '[lang-hide*="EN"] { display: none !important;}';
     break;
 }  let style = document.createElement('style');
 style.type = 'text/css';
 style.innerHTML = css;
 document.getElementsByTagName('head')[0].appendChild(style);  /*
  * SCRIPT utilizando o atributo "lang-show"
  */  css = ""
 switch(url.substring(0,2)){
   case "br":
     css = '[lang-show*="ES"]:not([lang-show*="BR"]),[lang-show*="EN"]:not([lang-show*="BR"]) { display: none !important;}';
     break;
   case "es":
     css = '[lang-show*="BR"]:not([lang-show*="ES"]),[lang-show*="EN"]:not([lang-show*="ES"]) { display: none !important;}';
     break;
   default:
     css = '[lang-show*="BR"]:not([lang-show*="EN"]),[lang-show*="ES"]:not([lang-show*="EN"]) { display: none !important;}';
     break;
 }  let style2 = document.createElement('style');
 style2.type = 'text/css';
 style2.innerHTML = css;
 document.getElementsByTagName('head')[0].appendChild(style2);</script>
<!-- Fim Novos Conceitos Script -->

FOOTER

<!-- Novos Conceitos Script -->
<script>
/*
* SCRIPT utilizando o atributo "lang-cms"
*/
 let url3 = window.location.hostname;
 switch(url3.substring(0,2)){
   case "br":
     $('[lang-cms*="ES"]:not([lang-cms*="BR"]),[lang-cms*="EN"]:not([lang-cms*="BR"])').parent().parent().css("display", "none");
     break;
   case "es":
     $('[lang-cms*="BR"]:not([lang-cms*="ES"]),[lang-cms*="EN"]:not([lang-cms*="ES"])').parent().parent().css("display", "none");
     break;
   default:
     $('[lang-cms*="BR"]:not([lang-cms*="EN"]),[lang-cms*="ES"]:not([lang-cms*="EN"])').parent().parent().css("display", "none");
     break;
 }
</script>
<!-- Fim Novos Conceitos Script -->

BLOG POST TEMPLATE | HEAD

<!-- Novos Conceitos Script -->
<script>  
let css_blog = "";  
switch("{{wf {&quot;path&quot;:&quot;selecionar-idioma&quot;,&quot;type&quot;:&quot;Option&quot;\} }}"){    
case "BR":    
css_blog = '#wg-es{ display: none !important;} #wg-en{ display: none !important;}'          
break;    
case "ES":    
css_blog = '#wg-br{ display: none !important;} #wg-en{ display: none !important;}'    
break;    
case "EN":    
css_blog = '#wg-es{ display: none !important;} #wg-br{ display: none !important;}';    
break;    
case "BR-ES":    
css_blog = '#wg-en { display: none !important;}';  
break;    
case "BR-EN":    
css_blog = '#wg-es { display: none !important;}';    
break;    
case "ES-EN":    
css_blog = '#wg-br { display: none !important;}';  
break;    
default:    
// Do Nothing    
break;  }  

let style_blog = document.createElement('style');  
style_blog.type = 'text/css';  
style_blog.innerHTML = css_blog;  
document.getElementsByTagName('head')[0].appendChild(style_blog);
</script>
<!--Fim Novos Conceitos Script -->