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írculoirá exibir bandeiras redondas
2. Retangularirá exibir bandeiras retangulares
3. Ondairá exibir bandeiras onduladas
4. Sem exibiçãonã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 usarbandeiras 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-contentpermite que você aja em todo o bloco do switcher de idioma enquanto a classe.wplng-langaguepermite 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!importantpara 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.