Como posso personalizar o seletor de línguas?

Para se adaptar à sua carta gráfica, é possível personalizar a aparência do seletor de idioma. Para isso, wpLingua oferece muitas opções de design, bem como a liberdade de adicionar seu próprio CSS personalizado.

1 - Personalizar o seletor de línguas com opções de design

Quando você vai para o wpLingua > Aba do interruptor, você encontra uma tela com as diferentes opções de personalização. O painel Design do Switcher dá-lhe 4 tipos de opções:

1.1 - Tema do seletor de línguas

Isso permite que você escolha os estilos de cor e borda do switcher de idioma.

As opções de cores oferecem 5 temas:

1. Luz: cor branca no fundo do interruptor
2. Grey: cor de fundo cinza
3. Escuro: cor de fundo preto
4. Blur Black: cor de fundo transparente e borrada com texto preto e bordas
5. Blur White: cor de fundo transparente e borrada com texto branco e fronteiras

Cada tema é então dividido por forma e estilo de fronteira :

6. Duplo – Suave: o interruptor será enquadrado por uma borda dupla com cantos arredondados.
7. Duplo – Quadrado: fronteira dupla com cantos quadrados.
8. Simples – Suave: fronteira única com cantos arredondados.
9. Simples – Quadrado: fronteira única com cantos quadrados.

1.2 - Estilos do seletor de línguas

Essas opções permitem que você defina o layout dos idiomas no...

1. Lista inline: os idiomas são alinhados ao lado um do outro.
2. Bloco: as línguas são colocadas em colunas, uma sob a outra.
3. Dropdown: os idiomas aparecem em um menu suspenso; isso é recomendado quando seu site oferece vários idiomas.

1.3 – Nome exibido

Essas opções permitem que você escolha como o nome do idioma deve ser escrito no switcher.

1. Nome traduzido: o nome das línguas é traduzido para o idioma original do site.
2. Nome original: cada língua mantém seu nome em sua própria língua (Inglês, Français, 日本語, Português, Español, etc.)
3. Identificação linguística: nomes de idioma usam ID de idioma (FR, EN, DE, RU, etc.)
4. Sem exibição: sem texto, apenas as bandeiras são exibidas.

1.4 - Estilo da bandeira

Estas opções permitem que você escolha a aparência das bandeiras no switcher.

1. Círculo irá exibir bandeiras redondas
2. Retangular irá exibir bandeiras retangulares
3. Onda irá exibir bandeiras onduladas
4. Sem exibição não exibirá quaisquer bandeiras, apenas o nome do idioma será exibido

2 - Personalizar as bandeiras do seletor de línguas

Além da forma das bandeiras, você também pode escolher a bandeira para exibir por idioma. Isso pode ser um desejo de usar uma bandeira diferente das bandeiras convencionais. Por exemplo, você pode usar a bandeira dos Estados Unidos ou Austrália para o idioma inglês, em vez da bandeira da Grã-Bretanha. Ou do Canadá ou da Bélgica para a língua francesa, em vez da bandeira da França... Isto é possível!

2.1 - Escolha a sua bandeira preferida

1. Ir para wpLingua > wpLingua tab.
2. Clique em Editar Bandeira.
3. Selecione sua bandeira favorita e não se esqueça de salvar suas mudanças.
4. Também é possível usar uma bandeira personalizada que você importa a montante em sua biblioteca de mídia.

2.2 - Utilizar sinalizadores personalizados

Para usar bandeiras personalizadas, você deve primeiro importá-los em sua biblioteca de mídia, como segue:

1. Ir para a mídia > Aba Biblioteca e clique em Adicionar novo arquivo de mídia.
2. Importar sua bandeira, em seguida, clique nele para abrir a mídia. Agora, você pode clicar em Copiar URL para clipboard.
3. Vá para wpLingua > wpLingua guia para colar a URL da bandeira personalizada. Salvar alterações.
4. Agora seu switcher exibe a nova bandeira.

Repita para cada idioma, se necessário.

3 - Personalizar o seletor de idioma com CSS

Se você quiser o design do switcher de idioma para combinar sua carta gráfica, você pode personalizá-la com CSS personalizado. Claro, você vai precisar ter algum conhecimento de CSS, embora abaixo vamos dar-lhe algumas dicas, ideal se você é novo para CSS.

3.1 - Inspecionar a consola do navegador

O console do navegador é seu melhor amigo. Ele irá ajudá-lo a testar o CSS personalizado e ver sua renderização visual ao vivo. Veja como fazê-lo:

1. Visite o front-end do seu site a partir do seu navegador e clique com o botão direito do mouse, em seguida, escolha a opção Inspect. Aqui está um exemplo com o Firefox, mas outros navegadores funcionam da mesma maneira.
2. Clique no ícone de seta. Esta ferramenta permite que você selecione facilmente o item para inspecionar. A propósito, use-o para inspecionar o switcher de idioma (clique no switcher de idioma depois de clicar na ferramenta Arrow).
3. Para a esquerda do console é o código HTML, você pode navegar para selecionar outras tags HTML, se necessário.
4. À direita do console é o código CSS. Mesmo que você não seja um capricho CSS, você pode facilmente mudar a aparência em tempo real. Por exemplo, altere o código de cor hexadecimal de cores de borda, textos ou fundos... Não se preocupe, as mudanças não são levadas em conta, é apenas para testar a aparência, quando você recarregar a página, o site retorna ao seu estado inicial. Aproveite a oportunidade de modificar o switcher de acordo com suas preferências.
5. Em tempo real, você visualiza a nova aparência do switcher de idioma de acordo com suas modificações CSS.

3.2 - Adicionar o código CSS aos parâmetros do wpLingua

3.3 - Alguns extractos CSS úteis

Para ajudá-lo, nós pensamos que estes poucos snippets de código CSS podem ajudar:

Em primeiro lugar, note que a classe CSS .switcher-content permite que você aja em todo o bloco do switcher de idioma enquanto a classe .wplng-langague permite que você aja nas próprias línguas.

---

Para este exemplo, o switcher foi definido com o tema Luz – Duplo – Quadrado. Para alterar as cores de fundo e borda do switcher, aqui está o CSS:

.wplng-switcher.theme-light-double-square .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

Para alterar as cores de fundo e borda de idiomas, aqui está o CSS:

.wplng-switcher.theme-light-double-square .switcher-content .wplng-language {
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

---

Mas se você tivesse escolhido a Luz – Simples – Tema suave, por exemplo, você vai notar que uma das classes CSS muda (.theme-light-simple-smooth), então leve isso em conta ao fazer suas modificações (daí a importância de usar o console do navegador para procurar as classes CSS certas). Aqui está o código que você deve usar:

.wplng-switcher.theme-light-simple-smooth .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

.wplng-switcher.theme-light-simple-smooth .switcher-content .wplng-language {
  background-color: #ffffff;
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

Caso contrário, para evitar segmentar todas as classes CSS, você pode simplificar o código desta forma sem esquecer de adicionar !important para certas regras. O resultado será o mesmo:

.switcher-content {
  background-color: #5e33d9 !important;
  border: 1px solid #5e33d9 !important;
}

.wplng-language {
  background-color: #ffffff !important;
  border: 1px solid #5e33d9 !important;
  color: #5e33d9 !important;
}

---

Desta forma, você pode mudar tudo o que o código CSS permite: adicionar sombras, transições, estados no mouseover, etc.

/* add a shadow to the switcher */

.switcher-content {
  box-shadow: 5px 5px 0px 0px #5e33d9;
  transition: 500ms ease;
}

/* obtain a rounded switcher */

.switcher-content {
  border-radius: 100px;
}

---

E para terminar com o código CSS personalizado, aqui está o usado em nosso site:

.switcher-content {
  box-shadow: 8px 8px 0px 0px #bcfa99;
  transition: 500ms ease;
	
}

.switcher-content:hover {
  box-shadow: 10px 10px 0px 0px #bcfa99;
}

.switcher-content .wplng-languages .wplng-language:hover .language-name {
  color: #bcfa99;
}

4 - Escolher a localização do seletor de línguas

Agora que seu switcher de idioma é totalmente personalizado, é hora de definir sua localização em seu site!

4.1 - Visualizar automaticamente o seletor de línguas

Ir para o wpLingua > Switcher > Aba de inserção do interruptor para escolher um local predefinido.

4.2 - Inserir manualmente o seletor de idioma utilizando um shortcode

4.3 - Inserir o seletor de línguas no menu de navegação de um tema clássico

4.4 - Inserir o seletor de língua no menu de navegação de um tema baseado em blocos

5 - Personalize totalmente o seletor de idiomas com o wpLingua!

Esperamos que este guia tenha fornecido uma compreensão clara e abrangente de personalização do switcher de idioma em wpLingua.

Lembre-se, as opções de flexibilidade e personalização oferecidas por wpLingua são projetadas para garantir que o seu site não só se comunica efetivamente em vários idiomas, mas também mantém uma estética coesa e envolvente.

Se você tiver mais perguntas ou precisar de assistência adicional, nossa equipe de suporte está sempre aqui para ajudar. Seus feedbacks e insights são inestimáveis para nós, pois nos esforçamos continuamente para melhorar wpLingua.