In questo post
In questo post
Vuoi aggiungere un plugin selettore di lingua per Elementor in modo da poter offrire i tuoi progetti Elementor in più lingue?
Elementor è il plugin page builder di WordPress più popolare e ti consente di creare siti web fantastici e dinamici. Ma se vuoi offrire quei siti web in più lingue, avrai bisogno dell'aiuto di un plugin di terze parti.
TranslatePress è un plugin gratuito multilingue per WordPress che offre un supporto completo per Elementor, consentendoti tra l'altro di aggiungere un elemento Elementor selettore di lingua flessibile in varie parti dei tuoi progetti.
In questo articolo ti mostreremo come utilizzare il plugin gratuito TranslatePress per aggiungere un selettore di lingua a Elementor, spiegandoti anche come tradurre i tuoi contenuti di Elementor manualmente o tramite strumenti come Google Translate.
Ecco un esempio di come aggiungere un selettore di lingua a un modello di Theme Builder, ma avrai a disposizione anche altre opzioni per posizionare il tuo selettore di lingua:
Oltre a consentire l'aggiunta di selettore di lingua, TranslatePress include anche altre integrazioni con Elementor, come la possibilità di mostrare o nascondere determinati widget e sezioni di Elementor in base alla lingua scelta dal visitatore.
Prima di iniziare, ecco un breve video tutorial che spiega come fare in breve:
Ma se volete approfondire e procedere secondo i vostri tempi, continuate a leggere questo articolo.
Pronto a partire? Ecco come configurarlo…
Come aggiungere Elementor selettore di lingua gratuitamente
Per creare il tuo selettore di lingua, ti serve il plugin gratuito TranslatePress.
TranslatePress è un plugin multilingue completo per WordPress, il che significa che ti aiuta sia a tradurre i tuoi contenuti sia ad aggiungere un'interfaccia front-end selettore di lingua che i tuoi visitatori possono utilizzare.
TranslatePress ti permette di utilizzare sia la traduzione automatica che quella manuale (o una combinazione delle due) e potrai gestire tutte le tue traduzioni tramite un editor visivo "point-and-click", proprio come Elementor ti permette di utilizzare un editor visivo per creare i tuoi progetti:
Come ulteriore vantaggio, TranslatePress include anche alcune integrazioni speciali per Elementor, come la possibilità di mostrare o nascondere determinati widget e sezioni in base alla lingua scelta dall'utente.
Potrai utilizzare la versione gratuita di TranslatePress per aggiungere il tuo selettore di lingua e tradurre i contenuti del tuo sito Elementor in una nuova lingua. Per aggiungere il supporto per un numero illimitato di lingue e accedere ad alcune altre funzionalità avanzate, puoi anche passa alla versione a pagamento di TranslatePress. Ci assicureremo di annotare eventuali funzionalità che richiedono la versione a pagamento.
TranslatePress Multilingue
Ecco il processo di base:
- Installa TranslatePress e scegli le lingue;
- Personalizza il tuo Elementor selettore di lingua;
- Traduci i tuoi contenuti.
Esaminiamo ogni passaggio nel dettaglio…
1. Installa TranslatePress e seleziona le lingue
Per iniziare installare e attivare il plugin gratuito TranslatePress disponibile su WordPress.org.
Una volta attivato il plugin, vai su Impostazioni → TranslatePress per scegliere le lingue che vuoi offrire sul tuo sito:
- Lingua predefinita – la lingua in cui è attualmente presente il contenuto del tuo sito Elementor.
- Tutte le lingue – una o più nuove lingue in cui si desidera tradurre il contenuto del tuo sito Elementor. La versione gratuita supporta una nuova lingua mentre la versione premium di TranslatePress permette lingue illimitate.
Queste sono anche le lingue che appariranno come opzioni nel tuo selettore di lingua.
Per il processo di installazione e configurazione di TranslatePress, puoi anche guardare questa video guida:
2. Personalizza il tuo Elementor selettore di lingua
Per impostazione predefinita, TranslatePress aggiunge un selettore di lingua mobile nell’angolo in basso a destra del tuo sito che include tutte le lingue selezionate nel passaggio precedente. Questo selettore di lingua apparirà su ogni pagina*, indipendentemente dal fatto che tu abbia creato la pagina con Elementor o meno.
* Nota – se tu Escludere alcuni contenuti dalla traduzione, il selettore di lingua non apparirà nelle pagine in cui hai disabilitato la traduzione.
Se desideri modificare la posizione, TranslatePress ti consente anche di posizionare il tuo selettore di lingua utilizzando uno shortcode o una voce di menu, compresa la modifica del comportamento (come mostrare solo il nome della lingua e nascondere la bandierina).
Puoi gestire tutte queste impostazioni da Cambio lingua scheda nell'area delle impostazioni TranslatePress (Impostazioni → TranslatePress → Cambio lingua).
Qui troverai tre opzioni per aggiungere un selettore di lingua al tuo sito Elementor, oltre a numerose opzioni di personalizzazione relative all'aspetto e al funzionamento del componente.
Ora vediamo come puoi utilizzare queste opzioni per inserire il tuo selettore di lingua nei progetti realizzati con Elementor.
Come utilizzare lo shortcode selettore di lingua in Elementor
Ad esempio, per aggiungere uno switcher flottante che rimanga in cima a ogni pagina del tuo sito e segua il lettore durante la sua visita, è sufficiente abilitare lo switcher flottante. Questa è l'impostazione più semplice e conveniente.
Puoi semplicemente applicare una preimpostazione di design e lasciarla così com'è, oppure iniziare da una preimpostazione e personalizzarla per adattarla perfettamente al design del tuo sito. Sentiti libero di giocare con colori, dimensioni, bordi, animazioni, bandiere e altro ancora.
Vedrai un'anteprima live del tuo switcher sul lato sinistro dello schermo che si aggiorna in tempo reale mentre apporti modifiche.
Successivamente, puoi personalizzare il suo layout: elementi come la posizione sullo schermo, la larghezza, il padding o la posizione della bandierina rispetto al nome della lingua.
Se hai solo 2 lingue sul tuo sito, in Impostazioni aggiuntive sezione potrai configurare il tuo switcher in modo che mostri sempre la lingua opposta a quella attualmente visualizzata sul sito. Questo trasformerà il tuo menu a tendina dello switcher in un pulsante cliccabile.
Come utilizzare lo shortcode selettore di lingua in Elementor
Ora, se desideri che il tuo switcher sia in una posizione fissa sul tuo sito e necessiti della flessibilità per farlo, puoi utilizzare l'opzione Shortcode.
Puoi personalizzare questo selettore come l'opzione precedente e poi aggiungerlo dove preferisci sul tuo sito utilizzando [language-switcher] shortcode. Puoi pos Codice breve widget
Nel Avanzato scheda delle impostazioni del widget, puoi utilizzare tutte le normali impostazioni di Elementor per controllare spaziatura, posizionamento, ecc.
Se utilizzi Elementor Pro e il suo Theme Builder, puoi anche inserire lo shortcode selettore di lingua nei modelli che crei con Theme Builder. Ad esempio, potresti creare un modello per i singoli post del tuo blog e inserire lo shortcode selettore di lingua sotto il titolo del post.
Ecco un semplice esempio che utilizza il blocco shortcode per inserire un selettore di lingua sotto il titolo e le informazioni del post:
Come utilizzare la voce di menu "selettore di lingua" in Elementor
Se stai utilizzando Elementor Theme Builder per progettare la tua intestazione personalizzata, puoi anche inserire il tuo selettore di lingua in quel modello di intestazione utilizzando la voce di menu dedicata a selettore di lingua fornita da TranslatePress.
Innanzitutto, apri il modello di intestazione che hai creato con Elementor Theme Builder per verificare il nome del menu che stai utilizzando nell' Menu di navigazione widget. Nell'esempio, il nome del menu è “Menu principale”:
Poi, vai a Aspetto → Menu nella tua dashboard di WordPress per modificare quel menu. Assicurati di modificare il menu corretto utilizzando il menu a tendina in alto. A questo punto, puoi aggiungere il tuo selettore di lingua al menu utilizzando l'apposito Cambio lingua articoli del menu.
Puoi aggiungere ogni lingua come elemento del menu principale. Oppure, puoi impostare il Lingua Corrente come elemento di primo livello e aggiungere le altre lingue come sottomenu (nella foto qui sotto):
Una volta salvate le modifiche, vedrai il tuo selettore di lingua comparire nel menu del tuo template di intestazione di Elementor:
Se il tuo sito web Elementor ha solo 2 lingue, puoi anche optare per un pulsante di lingua cliccabile in cui il tuo selettore mostra sempre l'opzione della lingua alternativa. Per fare ciò, tutto ciò che devi fare è aggiungere il Lingua opposta elemento dall'elenco. Non è necessario aggiungere le lingue quando si sceglie questa opzione.
Ora, quando salvi le modifiche, se il tuo sito è visualizzato in inglese, il tuo switcher mostrerà solo lo spagnolo (o la lingua in cui hai scelto di tradurlo). Una volta che il visitatore passerà allo spagnolo, il pulsante mostrerà ora l'inglese.
Puoi anche utilizzare esattamente lo stesso approccio per aggiungere il tuo selettore di lingua a un modello di piè di pagina creato con Elementor Pro (o, in realtà, ovunque utilizzi Elementor) Menu di navigazione widget).
3. Trascina i Tuoi Contenuti
Una volta aggiunto il tuo Elementor selettore di lingua (oppure language switcher – se necessario, è possibile aggiungere più language switcher in posizioni diverse), il passo successivo consiste nel tradurre effettivamente i contenuti del tuo sito, in modo che i visitatori possano visualizzare i contenuti tradotti quando selezionano una lingua diversa da quella predefinita tramite selettore di lingua.
TranslatePress supporta due metodi di traduzione:
- Traduzione automatica automatica – puoi generare automaticamente le traduzioni del tuo sito utilizzando TraslatePress AI, DeepL o Google Translate (disponibile nella versione gratuita di TranslatePress).
- Traduzione manuale – è possibile aggiungere o modificare manualmente le traduzioni del tuo sito utilizzando l'editor visuale.
Puoi anche combinare i due approcci: potresti usare la traduzione automatica per generare le traduzioni di base del tuo sito, ma poi tornare indietro e modificare manualmente quelle traduzioni automatiche secondo necessità.
Ti mostreremo rapidamente come funziona la traduzione in questa sezione. Tuttavia, se desideri un'analisi dettagliata, abbiamo anche scritto guide complete sulla traduzione di Elementor:
- Come tradurre siti Elementor in generale
- Come tradurre i contenuti dei popup di Elementor per siti multilingue
Impostazione Traduzione Automatica (Opzionale)
Questo passaggio è facoltativo (100%): puoi anche passare direttamente al passaggio successivo per tradurre manualmente i tuoi contenuti.
Se desideri attivare la traduzione automatica tramite Google Translate o DeepL, vai su Impostazioni → TranslatePress → Traduzione automatica. Abilita la funzionalità e quindi configura il tuo servizio di traduzione automatica preferito.
Consiglio Pro: Se utilizzi una versione premium di TranslatePress, puoi evitare il lavoro manuale di configurazione delle chiavi API di Google Translate e DeepL grazie alla funzione integrata TranslatePress AI soluzione.
La traduzione del tuo sito web con TranslatePress AI prevede tre passaggi: attiva la tua licenza, scegli le lingue, abilita la traduzione automatica e voilà: il gioco è fatto!
Questo rende la traduzione automatica di tutti i contenuti del tuo sito web (inclusi i metadati SEO) 100 volte più veloce.
Tuttavia, puoi comunque collegarti direttamente all'API di Google Translate o DeepL se, per qualche motivo, preferisci questo metodo. Ciò richiede un po' più di configurazione da parte tua, ma potrebbe farti risparmiare di più se hai un sito web di piccole dimensioni.
Abbiamo una guida dettagliata su come tradurre automaticamente WordPress e WooCommerce, unitamente a guide dedicate all'installazione per entrambi i servizi:
Si noti, tuttavia, che la versione gratuita di TranslatePress non supporta la traduzione tramite l'API di DeepL. Per farlo, è necessaria la versione premium.
Utilizza l'Editor di traduzione visiva
Per aggiungere o modificare manualmente le tue traduzioni, puoi utilizzare l'editor visivo di traduzione di TranslatePress, di cui abbiamo parlato poco fa in questo post.
Per aprire l'editor, vai al pezzo di contenuto che desideri tradurre sul front-end del tuo sito e fai clic su Traduci pagina opzione nella barra degli strumenti di WordPress:
Dovresti vedere un'anteprima dal vivo del tuo sito insieme a una barra laterale sulla sinistra dove puoi gestire le tue traduzioni. Per modificare la traduzione di qualsiasi contenuto, puoi passare il cursore sopra quel contenuto nell'anteprima dal vivo del tuo sito e fare clic sull'icona della matita.
Si aprirà la traduzione del contenuto nella barra laterale, dove potrai aggiungere la traduzione (o modificarla, se hai usato la traduzione automatica):
Puoi ripetere il processo per tradurre tutti i tuoi contenuti, sia che provengano da Elementor, dall'editor nativo di WordPress o da un altro plugin. Puoi anche “tradurre” le immagini per visualizzare un'immagine diversa a seconda della lingua scelta dall'utente.
Il processo è sempre lo stesso: clicca e seleziona. Ma se vuoi vedere esempi in-context per tipi specifici di contenuto, abbiamo molte guide per aiutarti:
- Immagini
- Blocchi dell'editor (Gutenberg)
- Campi personalizzati
- Tipi di pubblicazione personalizzati
- Moduli WordPress
- Menu di WordPress
- Contenuto del popup
- Cursori
- Prodotti WooCommerce
Metadati dietro le quinte (come i titoli SEO)
Con la versione premium di TranslatePress e il suo add-on SEO Pack, puoi usare lo stesso approccio per tradurre anche informazioni "dietro le quinte" come Titoli e meta descrizioni di Yoast SEO, ad esempio, informazioni sui grafi dei social media, e altro ancora.
Una volta effettuato l'aggiornamento e installato il componente aggiuntivo SEO Pack, è possibile accedere a queste traduzioni utilizzando il menu a discesa nella barra laterale dell'editor di traduzione:
Otterrai anche un nuovo Elenco di stringhe sezione che ti permette traduci tutti gli slug degli URL sul tuo sito.
Bonus: Mostra/Nascondi Widget e Sezioni di Elementor in Base alla Lingua
Oltre ad aiutarti a creare un selettore di lingua, TranslatePress include anche una speciale integrazione con Elementor che ti permette di mostrare o nascondere determinati widget o sezioni di Elementor in base alla lingua selezionata dall'utente.
Ad esempio, potresti creare un widget speciale che viene visualizzato solo per le persone che navigano in inglese. Oppure, potresti creare un widget speciale che viene visualizzato per tutti. tranne per persone che navigano in inglese.
Sarai in grado di accedere a questa funzionalità dall'interno dell'interfaccia di Elementor. Quando modifichi qualsiasi widget o sezione, otterrai due nuove opzioni nella Avanzato scheda:
- Restringi per lingua – mostrare questo widget o questa sezione solo a persone che navigano in una certa lingua.
- Escludi per lingua – mostra questo widget o sezione a tutti i visitatori tranne a coloro che navigano in una determinata lingua.
Crea oggi stesso il tuo Elementor selettore di lingua
Con TranslatePress, puoi aggiungere facilmente un Elementor selettore di lingua e tradurre i contenuti del tuo sito Elementor in una o più nuove lingue.
TranslatePress offre un supporto immediato per la traduzione dei contenuti di Elementor, consentendoti persino di tradurre i layout creati con Elementor Popup Builder o Theme Builder.
Oltre a ciò, avrai a disposizione anche integrazioni speciali con Elementor, come la possibilità di mostrare o nascondere widget o sezioni in base alla lingua scelta dall’utente in selettore di lingua.
Puoi iniziare con la versione gratuita di WordPress.org per tradurre il tuo sito in una nuova lingua e accedere a tutte le impostazioni di selettore di lingua.
Poi, aggiorna alla versione premium per poter aggiungere un numero illimitato di lingue, tradurre metadati SEO e social media, e accedere ad altre funzionalità utili come:
- Supporto DeepL per la traduzione automatica.
- Reindirizzare automaticamente gli utenti alle loro lingue preferite.
- Account del traduttore.
- Mostrare menu separati in base alla lingua di un utentepiuttosto che tradurre semplicemente lo stesso insieme di voci di menu).
TranslatePress Multilingue
Hai ancora qualche domanda su come utilizzare selettore di lingua sul tuo sito Elementor? Facci sapere nei commenti!
Se hai trovato utile questo post, ti invitiamo a visitare il nostro Canale YouTube, dove carichiamo costantemente brevi tutorial video facili da seguire. Puoi anche seguirci su Facebook e Twitter per essere tra i primi a sapere ogni volta che pubblichiamo.
