Visual Composer è uno dei page builder più popolari per WordPress. In questo tutorial, approfondiremo come trasformare i siti realizzati con Visual Composer utilizzando TranslatePress.
Esamineremo i semplici passaggi necessari per costruire un sito multilingue utilizzando Visual Composer insieme a TranslatePress.
I due plugin sono pienamente compatibili, quindi puoi utilizzare TranslatePress per tradurre qualsiasi tipo di elemento o template disponibile in Visual Composer, direttamente dal front-end. Il tutto tramite un'interfaccia di traduzione visiva intuitiva.
Creare il tuo sito web con Visual Composer
Visual Composer ha un editor visuale drag-and-drop che rende la creazione di qualsiasi pagina del tuo sito web veloce e semplice, senza dover scrivere una sola riga di codice.
È disponibile sia in versione gratuita che a pagamento. La versione gratuita offre elementi standard per affrontare sia la struttura che il contenuto del tuo sito. Puoi facilmente aggiungere righe e dividerle in colonne. Quindi popolarle con contenuti sotto forma di testo, immagini, pulsanti, voci di menu, shortcode e altro ancora.
I piani a pagamento ti danno accesso a centinaia di elementi di contenuto premium e modelli predefiniti (tramite il Visual Composer Hub). Questo può aiutarti ad accelerare il processo e a non dover partire da zero con la struttura e il design del tuo sito.
Per questo tutorial, per accelerare i tempi, inizieremo utilizzando un modello predefinito che contiene già parecchi elementi. Puoi anche iniziare da zero e creare qualcosa di unico per il tuo sito web.
Creazione della nostra prima pagina con Visual Composer
Puoi acquistare o scaricare Visual Composer gratuitamente da il loro sito web. Quindi, installalo e attivalo come qualsiasi altro plugin di WordPress.
Una volta attivato, puoi iniziare e creare la tua prima pagina.
Verrai portato a un editor visivo front-end e ti verrà chiesto di dare un nome alla tua pagina, selezion.
Ho selezionato un template di pagina singolo prodotto, navigando nel Visual Composer Hub. Questo template per ristoranti include una sezione hero, descrizione, recensione e caratteristiche. Potrebbe essere una scelta d'ispirazione per le vendite online o per le recensioni di prodotti.
Questa è l'aspetto della mia pagina dopo aver caricato il modello. Posso personalizzare il modello per includere altre pagine dal tuo sito come un blog, un menu, una galleria, una posizione, ecc.
Puoi spostare facilmente gli elementi, personalizzare le loro impostazioni, le opzioni di visualizzazione e persino duplicare blocchi per muoverti più velocemente. C'è molta flessibilità che ti invito a esplorare.
Puoi applicare lo stesso processo visuale, drag & drop per creare tutte le pagine rimanenti del tuo sito web.
Tradurre i siti realizzati con Visual Composer utilizzando TranslatePress
Ora che abbiamo creato il nostro sito web utilizzando Visual Composer, vediamo quanto sia facile renderlo multilingue con TranslatePress.
Aggiungere una seconda lingua al tuo sito
Per questo tutorial, vedremo come tradurre la pagina che abbiamo creato utilizzando Visual Composer in una seconda lingua (diciamo l'italiano).
Per prima cosa installare e attivare il plugin multilingue TranslatePress.
Dopo aver attivato TranslatePress, noterai una nuova Traduci Sito elemento aggiunto nella barra di amministrazione.
Basta passarci sopra con il mouse e fare clic Impostazioni (o puoi cliccare sul Impostazioni voce di menu e seleziona TranslatePress). Verrai reindirizzato alla pagina delle impostazioni di TranslatePress.
Qui possiamo aggiungere le lingue in cui vogliamo tradurre la pagina/sito web creato con Visual Composer.
L'inglese è la nostra lingua predefinita, quindi aggiungeremo anche “Italiano”. Ci sono alcune altre impostazioni (come Google Traduttore integrazione per la traduzione automatica, o personalizzare il cambio lingua), ma possiamo saltarli per ora e fare clic Salva modifiche.
Tradurre la tua pagina usando l'editor di traduzione front-end
Ora siamo pronti per iniziare a tradurre il nostro sito Visual Composer.
Per iniziare a tradurre il tuo sito in italiano, puoi cliccare sul Traduci Sito scheda blu nelle impostazioni TranslatePress oppure vai semplicemente alla pagina che desideri tradurre e clicca sul Traduci pagina elemento dalla barra del menu dell'amministratore (accanto a Modifica con Visual Composer).
Questo aprirà un editor di traduzione visivo front-end dove potrai tradurre ogni stringa di una pagina e vedere le modifiche in tempo reale.
Tutto quello che devi fare è passare il cursore sopra un determinato testo o elemento che vuoi tradurre, poi apparirà un'icona a forma di matita, e cliccandoci sopra potrai inserire la traduzione. Una volta che premi "Salva", il testo tradotto verrà aggiornato nell'editor in tempo reale. È così semplice.
Lo stesso processo può essere applicato a tutti gli elementi di una pagina, sia che tu Traduci una voce di menu, a modulo, pulsante, o una immagine contenente testo. Anche Prodotti WooCommerce può essere facilmente tradotto con TranslatePress.
Puoi usare il scorciatoie da tastiera per velocizzare la navigazione attraverso le stringhe in una pagina e il salvataggio della loro traduzione.
Tradurre un pulsante contenente un link
Approfondiamo un po“. Come noterai sotto il ”Menu di Pesce“ c’è un pulsante ”Scarica Menu”.
Puoi tradurre facilmente il testo del pulsante in italiano seguendo i passaggi sopra, ma diciamo che vuoi anche dare alle persone che navigano nella versione italiana del tuo sito la possibilità di scaricare il menu nella propria lingua.
Anche questo è gestito da TranslatePress. Quando si passa il mouse su un elemento contenente un link, oltre a tradurre il testo, è possibile anche modificare il Collegamento di ancoraggio elemento.
In questo caso, ho caricato la versione italiana del menu e l'ho selezionata come Link di Ancoraggio per la versione italiana. Le persone che navigano la versione italiana del sito potranno ora scaricare il menu in italiano.
Tieni presente che, una volta tradotto un testo ricorrente sul tuo sito, TranslatePress provvederà a modificarlo ovunque compaia. Ad esempio, è sufficiente tradurre un “PRE ORDINE”Testo del pulsante per tutti loro da tradurre.
Traduzione di immagini e slider contenenti testo
Ci sono situazioni in cui durante il processo di traduzione ci si imbatte in immagini contenenti testo. Testo che dovrebbe essere tradotto una volta cambiata la lingua. Nel nostro caso, supponiamo che il logo CodHouse debba mostrare “Ristorante” invece di “Restaurant” quando navigato in italiano.
TranslatePress rende davvero facile visualizza immagini, loghi o slider diversi per lingue diverse.
Una volta cliccato sul logo, noterai quanto sia facile modificare le sorgenti delle immagini del logo e dell'eroe per la versione italiana. Puoi semplicemente caricare una versione diversa per l'italiano.
Come aggiungere un selettore di lingua al tuo sito web
Per impostazione predefinita, una volta aggiunta una lingua secondaria in TranslatePress, verrà automaticamente inserito un menu a tendina per la selezione della lingua nella parte front-end del sito. Questo menu seguirà l'utente in ogni pagina.
È anche possibile aggiungere Codice abbreviato selettore di lingua su qualsiasi pagina o widget. È disponibile anche una voce di menu denominata "selettore di lingua". È possibile personalizzare facilmente tutte queste opzioni e scegliere quali devono essere visibili.
Traduzione del resto del tuo sito Visual Composer
Come avrai ormai notato, tradurre i siti realizzati con Visual Composer utilizzando TranslatePress è davvero intuitivo e veloce.
Navighi semplicemente il sito, pagina per pagina, usando l'editor di traduzione visivo, selezioni un certo testo o elemento, passi il mouse sopra e clicchi sull'icona della matita, quindi inserisci la sua traduzione. Salva e passa al successivo.
Fai questo per le stringhe rimanenti e avrai la tua pagina tradotta in men che non si dica.
Ecco fatto. Realizzare un sito web multilingue utilizzando Visual Composer insieme a TranslatePress è più facile che mai.
Offerta imperdibile da Visual Composer
E per rendere il tutto ancora più vantaggioso, siamo lieti di condividere un codice sconto esclusivo che offre uno sconto di 20% su tutti i Versioni premium di Visual Composer.
Usa il codice coupon TRANSLATEPRESS al checkout e accedi a Visual Composer Hub per scaricare elementi, modelli ed estensioni esclusivi.