Come posso personalizzare il selettore della lingua?

Per adattarsi alla vostra carta grafica, è possibile personalizzare l'aspetto del selettore. Per questo, wpLingua offre molte opzioni di progettazione e la libertà di aggiungere il vostro CSS personalizzato.

1 - Personalizzare il selettore di lingua con opzioni di design

Quando vai al wpLingua La scheda del commutatore trova uno schermo con le diverse opzioni di personalizzazione. Il gruppo Switcher Design offre 4 tipi di opzioni:

1.1 - Tema del selettore di lingua

Questo permette di scegliere il colore e gli stili di confine dell'interruttore linguistico.

Le opzioni di colore offrono 5 temi:

1. Luce: colore bianco sullo sfondo dell'interruttore
2. Grigio: colore di fondo grigio
3. Oscuro: colore di fondo nero
4. Blur Black: colore di fondo trasparente e offuscato con testo nero e frontiere
5. Blur White: colore di fondo trasparente e offuscato con testo bianco e frontiere

Ogni tema è poi suddiviso per forma e stile di confine:

6. Doppia: l'interruttore sarà inquadrato da una doppia frontiera con angoli arrotondati.
7. Doppia piazza: doppio confine con angoli quadrati.
8. Semplice: un confine con angoli arrotondati.
9. Semplice: piazza: un confine con angoli quadrati.

1.2 - Stili del selettore di lingua

Queste opzioni permettono di definire la disposizione delle lingue nel commutatore...

1. Elenco in linea: le lingue sono allineate l'una accanto all'altra.
2. Blocco: le lingue sono inserite in colonne, una sotto l'altra.
3. Riduzione: le lingue appaiono in un menu a discesa; questo è raccomandato quando il tuo sito offre diverse lingue.

1.3 - Nome visualizzato

Queste opzioni permettono di scegliere come scrivere il nome della lingua nell'interruttore.

1. Nome tradotto: il nome delle lingue è tradotto nella lingua originale del sito.
2. Nome originale: ogni lingua mantiene il suo nome nella sua lingua (inglese, francese, 日本語, portoghese, spagnolo, ecc.)
3. ID linguistico: I nomi delle lingue usano la lingua ID (FR, EN, DE, RU, ecc.)
4. Nessun display: nessun testo, sono visualizzati solo le bandiere.

1.4 - Stile della bandiera

Queste opzioni permettono di scegliere l'aspetto delle bandiere nell'interruttore.

1. Cerchio mostrerà le bandiere rotonde
2. Rectangolare mostrerà bandiere rettangolari
3. Wave mostrerà bandiere ondulate
4. Nessun display non mostrerà alcuna bandiera, verrà visualizzato soltanto il nome della lingua.

2 - Personalizzazione dei flag del selettore di lingua

Al di là della forma delle bandiere, potete scegliere la bandiera da mostrare per lingua. Questo può essere il desiderio di usare una bandiera diversa dalle bandiere convenzionali. Ad esempio, potete usare la bandiera degli Stati Uniti o dell'Australia per la lingua inglese, invece della bandiera della Gran Bretagna. O quello del Canada o del Belgio per la lingua francese, invece della bandiera francese... Questo è possibile!

2.1 - Scegliere la bandiera preferita

1. Vai a wpLingua.
2. Clicca su Edit Flag.
3. Scegli la tua bandiera preferita e non dimenticare di salvare i tuoi cambiamenti.
4. È anche possibile usare una bandiera personalizzata che si importa a monte nella biblioteca dei media.

2.2 - Utilizzo di flag personalizzati

Da usare bandiere personalizzate, bisogna prima importarli nella biblioteca dei media, come segue:

1. Vai a Media La scheda della biblioteca e il nuovo file multimediale.
2. Importa la tua bandiera e poi clicca su di essa per aprire i media. Ora, potete cliccare su Copia URL su clipboard.
3. Vai a wpLingua per incollare l'URL della bandiera. Salva i cambiamenti.
4. Ora il tuo interruttore mostra la nuova bandiera.

Ripetere per ogni lingua, se necessario.

3 - Personalizzare il selettore di lingua con i CSS

Se volete che il design dell'interruttore linguistico corrisponda alla vostra carta grafica, potete personalizzarlo con CSS personalizzata. Naturalmente, avrete bisogno di conoscere il CSS, anche se sotto vi daremo qualche mancia, ideale se siete nuovi al CSS.

3.1 - Ispezione della console del browser

La console del browser è il tuo migliore amico. Vi aiuterà a testare il CSS personalizzato e a vedere il suo rendering visivo dal vivo. Ecco come farlo:

1. Visitate l'estremità anteriore del vostro sito dal vostro browser e fate un clic destro, quindi scegliete l'opzione Inspect. Ecco un esempio con Firefox, ma altri browser funzionano allo stesso modo.
2. Clicca sull'icona della freccia. Questo strumento permette di scegliere facilmente l'oggetto da ispezionare. A proposito, lo usi per ispezionare l'interruttore linguistico (clicca l'interruttore linguistico dopo aver cliccato sullo strumento Arrow).
3. A sinistra della console c'è il codice HTML, si può navigare per selezionare altri tag HTML, se necessario.
4. A destra della console c'è il codice CSS. Anche se non sei un capriccio CSS, puoi cambiare facilmente l'aspetto in tempo reale. Per esempio, cambiare il codice colore esadecimale dei colori di frontiera, dei testi o degli strati... Non si preoccupi, i cambiamenti non sono presi in considerazione, è solo per verificare l'aspetto, quando si ricarica la pagina, il sito ritorna allo stato iniziale. Cogliete l'opportunità di modificare l'interruttore in base alle vostre preferenze.
5. In tempo reale, si vede la nuova apparizione dell'interruttore linguistico in base alle modifiche del CSS.

3.2 - Aggiungere il codice CSS ai parametri di wpLingua

3.3 - Alcuni utili estratti di CSS

Per aiutarvi, abbiamo pensato che questi pochi frammenti di codice CSS potrebbero aiutare:

Prima di tutto, si noti che la classe CSS .switcher-content permette di agire sull'intero blocco dell'interruttore linguistico mentre la classe .wplng-langague permette di agire sulle lingue stesse.

---

Per questo esempio, l'interruttore è stato definito con il tema Light - Double - Square. Per cambiare lo sfondo e i colori di frontiera dell'interruttore, ecco il CSS:

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

Per cambiare lo sfondo e i colori delle lingue, ecco il CSS:

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

---

Ma se aveste scelto il tema Light - Simple - Smooth, per esempio, noterete che una delle classi CSS cambia (.theme-light-simple-smooth), quindi tenga conto di questo quando si apportano le modifiche (da qui l'importanza di usare la console del browser per cercare le classi CSS giuste). Ecco il codice da usare:

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

Altrimenti, per evitare di indirizzare tutte le classi CSS, si può semplificare il codice in questo modo senza dimenticare di aggiungere !important per certe regole. Il risultato sarà lo stesso:

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

---

In questo modo si può cambiare tutto ciò che il codice CSS permette: aggiungere ombre, transizioni, stati su mouseover, ecc.

/* 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 per finire con il codice CSS personalizzato, ecco quello usato sul nostro sito:

.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 - Scegliere la posizione del selettore di lingua

Ora che il vostro interruttore è completamente personalizzato, è ora di definire la sua posizione sul vostro sito!

4.1 - Visualizzazione automatica del selettore di lingua

Vai alla wpLingua. La scheda di inserimento del commutatore per scegliere una posizione predefinita.

4.2 - Inserire manualmente il selettore di lingua con uno shortcode

4.3 - Inserimento del selettore di lingua nel menu di navigazione di un tema classico

4.4 - Inserimento del selettore di lingua nel menu di navigazione di un tema a blocchi

5 - Personalizzate completamente il selettore di lingua con wpLingua!

Speriamo che questa guida vi abbia fornito una comprensione chiara e completa della personalizzazione dell'interruttore linguistico in wpLingua.

Ricordate, le opzioni di flessibilità e personalizzazione offerte da wpLingua sono progettate per garantire che il vostro sito web non solo comunichi efficacemente in più lingue, ma mantenga anche un'estetica coesa e coinvolgente.

Se avete altre domande o avete bisogno di assistenza, la nostra squadra di supporto è sempre qui per aiutare. Il vostro feedback e le vostre intuizioni sono inestimabili per noi mentre ci sforziamo continuamente di migliorare la wpLingua.