Hoe de taalswitcher aanpassen?

Om u aan te passen aan uw grafische charter, is het mogelijk om het uiterlijk van de taalkiezer te personaliseren. Hiervoor biedt wpLingua veel ontwerpopties en de vrijheid om uw eigen aangepaste CSS toe te voegen.

1 - Pas de taalselector aan met ontwerpopties

Wanneer u naar de wpLingua > Schakeltabblad, u vindt een scherm met de verschillende aanpassingsopties. De Switcher Design paneel geeft u 4 soorten opties:

1.1 - Taalkeuzethema

Hiermee kunt u de kleur en randstijlen van de taalschakelaar kiezen.

De kleur opties bieden 5 thema's:

1. Licht: witte kleur op de achtergrond van de switcher
2. Grey: grijze achtergrondkleur
3. Donker: zwarte achtergrondkleur
4. Zwart vervagen: transparante en wazige achtergrondkleur met zwarte tekst en randen
5. Vervagen wit: transparante en wazige achtergrondkleur met witte tekst en randen

Elk thema wordt vervolgens uitgesplitst naar vorm en randstijl:

6. Dubbelzijdig: de wisselaar wordt omlijst door een dubbele rand met afgeronde hoeken.
7. Dubbele vierkant: dubbele rand met vierkante hoeken.
8. Eenvoudig: enkele rand met afgeronde hoeken.
9. Eenvoudig vierkant: enkele rand met vierkante hoeken.

1.2 - Taalselectiestijlen

Met deze opties kunt u de lay-out van de talen in de switcher definiëren...

1. Inline lijst: De talen staan naast elkaar.
2. Blok: de talen worden in kolommen onder elkaar geplaatst.
3. Dropdown: de talen verschijnen in een drop-down menu; dit wordt aanbevolen wanneer uw site meerdere talen biedt.

1.3 - Weergegeven naam

Met deze opties kunt u kiezen hoe de taalnaam in de switcher geschreven moet worden.

1. Vertaalde naam de naam van de talen wordt vertaald in de oorspronkelijke taal van de site.
2. Oorspronkelijke naam: elke taal behoudt zijn naam in zijn eigen taal (Engels, Français, -, Português, Español, enz.)
3. Taal-ID: taalnamen gebruiken taal-ID (FR, EN, DE, RU, enz.)
4. Geen weergave: geen tekst, alleen vlaggen worden weergegeven.

1.4 - Vlaggenstijl

Met deze opties kunt u het uiterlijk van de vlaggen in de switcher kiezen.

1. Cirkel zal ronde vlaggen tonen
2. Rechthoekig zal rechthoekige vlaggen tonen
3. Golf zal golvende vlaggen tonen
4. Geen weergave zal geen vlaggen tonen, alleen de taalnaam wordt weergegeven

2 - De vlag van de switcher aanpassen

Naast de vorm van de vlaggen, kunt u ook kiezen voor de vlag te tonen door taal. Dit kan een wens zijn om een andere vlag te gebruiken dan conventionele vlaggen. U kunt bijvoorbeeld de vlag van de Verenigde Staten of Australië gebruiken voor de Engelse taal, in plaats van de vlag van Groot-Brittannië. Of die van Canada of België voor de Franse taal, in plaats van de vlag van Frankrijk. Dit is mogelijk!

2.1 - Kies je vlagvoorkeur

1. Ga naar wpLingua > wpLingua tabblad.
2. Klik op Bewerken Vlag.
3. Selecteer uw favoriete vlag en vergeet niet om uw wijzigingen op te slaan.
4. Het is ook mogelijk om een persoonlijke vlag te gebruiken die u stroomopwaarts importeert in uw mediabibliotheek.

2.2 - Aangepaste vlaggen gebruiken

Te gebruiken aangepaste vlaggen, u moet ze eerst importeren in uw mediabibliotheek, als volgt:

1. Ga naar Media > Tabblad Bibliotheek en klik op Nieuw Mediabestand toevoegen.
2. Importeer uw vlag en klik erop om de media te openen. Klik nu op Kopiëren URL naar klembord.
3. Ga naar wpLingua > wpLingua tabblad om de aangepaste vlag URL te plakken. Wijzigingen opslaan.
4. Nu toont uw wisselaar de nieuwe vlag.

Herhaal voor elke taal indien nodig.

3 - De taalselector aanpassen met CSS

Als u wilt dat het ontwerp van de taalwisselaar overeenkomt met uw grafische charter, kunt u het personaliseren met aangepaste CSS. Natuurlijk moet u enige kennis van CSS hebben, hoewel hieronder wij u enkele tips geven, ideaal als u nieuw bent bij CSS.

3.1 - De browserconsole inspecteren

De browser console is je beste vriend. Het zal u helpen het gepersonaliseerde CSS te testen en de visuele weergave ervan live te zien. Hier is hoe het te doen:

1. Bezoek de voorkant van uw site vanuit uw browser en klik met de rechtermuisknop, kies dan de Inspect optie. Hier is een voorbeeld met Firefox, maar andere browsers werken op ongeveer dezelfde manier.
2. Klik op het pijlpictogram. Met deze tool kunt u eenvoudig het te inspecteren item selecteren. Gebruik het trouwens om de taalschakelaar te inspecteren (klik op de taalschakelaar na het klikken op de pijl).
3. Links van de console is de HTML-code, u kunt navigeren om andere HTML-tags te selecteren indien nodig.
4. Rechts van de console staat de CSS code. Zelfs als je geen CSS whiz bent, kun je het uiterlijk gemakkelijk in real time veranderen. Verander bijvoorbeeld de hexadecimale kleurcode van randkleuren, teksten of achtergronden... Maak je geen zorgen, de wijzigingen worden niet in aanmerking genomen, het is gewoon om het uiterlijk te testen, wanneer u de pagina opnieuw laden, de site keert terug naar zijn oorspronkelijke staat. Maak van de gelegenheid gebruik om de switcher aan te passen volgens uw voorkeuren.
5. In real time visualiseer je het nieuwe uiterlijk van de taalwisselaar volgens je CSS wijzigingen.

3.2 - De CSS-code toevoegen aan de wpLingua-parameters

3.3 - Enkele nuttige CSS-uittreksels

Om u te helpen, dachten we dat deze paar CSS code knipsels zouden kunnen helpen:

Allereerst, let op dat de CSS klasse .switcher-content stelt u in staat om te handelen op het hele blok van de taalschakelaar terwijl de klasse .wplng-langague kunt u handelen op de talen zelf.

---

Voor dit voorbeeld werd de switcher gedefinieerd met het thema Light Om de achtergrond- en randkleuren van de switcher te wijzigen, is hier de CSS:

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

Om de achtergrond- en randkleuren van talen te veranderen, is hier het CSS:

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

---

Maar als je had gekozen voor het Licht.theme-light-simple-smooth), dus houd hiermee rekening bij het maken van uw wijzigingen (vandaar het belang van het gebruik van de browser console om te zoeken naar de juiste CSS klassen). Hier is de code die u moet gebruiken:

.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;
}

Anders, om te voorkomen dat gericht op alle CSS klassen, kunt u de code op deze manier te vereenvoudigen zonder te vergeten toe te voegen !important voor bepaalde regels. Het resultaat zal hetzelfde zijn:

.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;
}

---

Op deze manier kun je alles veranderen wat de CSS-code toelaat: schaduwen toevoegen, overgangen, staat op muisover, 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;
}

---

En om te eindigen met de aangepaste CSS-code, hier is die gebruikt op onze 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 - Kies de locatie van de taalkiezer

Nu dat uw taalwisselaar volledig is aangepast, is het tijd om de locatie op uw site te definiëren!

4.1 - De taalkeuzeknop automatisch weergeven

Ga naar de wpLingua > wisselaar > Switcher insertion tab om een vooraf gedefinieerde locatie te kiezen.

4.2 - De taalselector handmatig invoegen met een shortcode

4.3 - Taalswitcher invoegen in het navigatiemenu van een klassiek thema

4.4 - De taalselector invoegen in het navigatiemenu van een blokthema

5 - Pas de taalselector volledig aan met wpLingua!

Wij hopen dat deze gids heeft u voorzien van een duidelijke en uitgebreide kennis van het aanpassen van de taal switcher in wpLingua.

Vergeet niet, de flexibiliteit en aanpassing opties aangeboden door wpLingua zijn ontworpen om ervoor te zorgen dat uw website niet alleen effectief communiceert in meerdere talen, maar ook onderhoudt een samenhangende en boeiende esthetiek.

Mocht u nog vragen hebben of extra hulp nodig hebben, dan is ons ondersteuningsteam altijd hier om te helpen. Uw feedback en inzichten zijn voor ons van onschatbare waarde omdat we voortdurend streven naar verbetering van wpLingua.