Modifica utilizzando Fusion Builder nel tema Avada WordPress

AGGIORNAMENTO novembre 2016 : ThemeFusion ha aggiornato Avada alla versione 5.0. Questo aggiornamento separa il generatore di Fusion in un singolo plug-in, invece di essere incorporato con il plug-in Fusion Core. Fusion Builder è stato completamente riprogettato ed è molto diverso dalle versioni precedenti.

Quando ti viene chiesto di aggiornare Avada BACKUP dell'intero sito, incluso il primo plug-in Fusion Core, e preparati a dedicare un po' di tempo a riorganizzare le tue pagine, poiché non si spostano senza soluzione di continuità.

Se hai già eseguito l'aggiornamento ad Avada 5.0 e le tue pagine sono danneggiate, metti le mani su una versione precedente di Avada. Usando FTP vai alla cartella wp-content/themes e fai il backup della nuova versione. Quindi rinominalo e FTP la versione precedente. Dovresti recuperare la versione più ordinata delle tue pagine.

Questo post è per la versione 2.0.3 o precedente.

Utilizzo del tema Avada

Se hai il tema Avada sulla tua installazione di WordPress, è possibile utilizzare Fusion Builder per creare i tuoi post e le tue pagine, che è molto diverso da un aggiornamento di pagina standard.

Fusion Builder è un plugin sviluppato da ThemeFusion, gli sviluppatori di Avada, che consente un layout reattivo all'interno del tema.

Può essere un po' di confusione per i principianti.

Ho scritto alcune istruzioni per aiutarti a modificare pagine o post, utilizzando Fusion Builder all'interno del tema Avada WordPress.

Eseguire sempre il backup prima di apportare modifiche

Non aggiornare mai il core, i temi o i plug-in di WordPress senza prima eseguire un backup completo di plug-in, temi, caricamenti e database.

Gli aggiornamenti possono causare l'interruzione di qualcos'altro e devi essere in grado di ripristinare facilmente o eseguire il debug. Consiglierei di eseguire importanti aggiornamenti su un sito di sviluppo in modo da poterlo testare prima.

Attiva Fusion Builder di Avada

Innanzitutto attiva Fusion Builder sulla pagina o sul post, utilizzando il pulsante blu sopra l'area di modifica del contenuto.

Se il tuo web designer ha già impostato le pagine, potrebbe aver già fatto clic sul pulsante. Cambierà l'aspetto del tuo editor di contenuti, come di seguito.

Utilizzando Fusion Builder di Avada puoi creare pagine web reattive.

Come modificare le pagine utilizzando Fusion Builder

Accedi al tuo back-end WordPress.

Vai alle pagine o al post, utilizzando le schede sul lato sinistro, quindi modifica.

La casella Fusion Builder dovrebbe trovarsi nella parte superiore della schermata di modifica della pagina. I pulsanti in alto sono etichettati come "Opzioni colonna", "Elementi generatore", "Modelli personalizzati" e "Modelli precostruiti".

Ignoreremo i modelli personalizzati e i modelli pre-compilati per questo post.

Iniziare

Opzioni della colonna Fusion Builder

Scegli un'opzione di colonna quando vuoi dividere la pagina in colonne. Questo inserisce una struttura a colonne nella tua pagina, in cui poi inserisci gli elementi del costruttore. Le dimensioni e i numeri delle colonne possono essere modificati in seguito.

Una volta scelta un'opzione di colonna, tale opzione viene visualizzata nello spazio bianco sottostante. Per costruire la tua pagina pensa come se stessi mettendo insieme un puzzle.

Se hai aggiunto una colonna di 5 x 6 a sinistra, l'unica altra opzione che si adatta a destra è 1 x 6 a.

Puoi trascinare una colonna da sinistra a destra della pagina.

Fare clic sul pulsante meno su qualsiasi opzione di una colonna per ridurre il numero di colonne che occuperà l'elemento. Il pulsante più è l'esatto opposto.

Elementi di Fusion Builder

Gli elementi del generatore possono essere aggiunti senza prima scegliere un'opzione di colonna. Gli elementi verranno inseriti su una riga che si estende su tutta la tua pagina. Questi possono quindi essere trascinati all'interno di una colonna, se necessario.

C'è una serie di opzioni di Builder Element in Avada. Cominciamo dal testo. Dopo aver aggiunto le colonne, come sopra, potresti voler aggiungere un blocco di testo a una colonna.

Basta fare clic sul pulsante Elemento Builder, trovare TEXT, quindi fare clic e trascinarlo nella colonna.

Passa il mouse sopra l'elemento, quindi fai clic sull'icona del pennello che appare in alto a destra per aggiungere o modificare il testo.

Tutti gli elementi possono essere modificati utilizzando la stessa icona di modifica.

Modificare il testo o il supporto all'interno dell'elemento, quindi fare clic su SALVA, la casella si chiuderà.

Una volta chiusa la finestra, fai clic sul pulsante blu AGGIORNA per salvare le modifiche.

Modifica delle caselle di contenuto all'interno di Avada

Le caselle di contenuto si trovano in Elementi del generatore. Questi sono utili in quanto sono davvero flessibili.

All'interno dell'elemento 'Riquadri dei contenuti' possono esserci diversi 'riquadri figli', o 'Articoli', che possono essere aggiunti scorrendo fino in fondo alla schermata del riquadro dei contenuti.

La schermata principale del riquadro dei contenuti cambia le opzioni per tutti i riquadri figlio, a meno che il 'figlio' non abbia un proprio stile.

Vai alla schermata di modifica della tua casella dei contenuti, utilizzando l'icona del pennello.

Le opzioni all'interno di Content Box sono le seguenti:

Impostazioni genitore/figlio
Le impostazioni "Livello genitore" controlleranno tutti gli stili di casella insieme. Le impostazioni "Livello figlio" controlleranno ogni stile di casella individualmente.

Layout della casella dei contenuti
Seleziona il layout per la casella del contenuto

Numero di colonne
Imposta il numero di colonne per riga.

Allineamento dei contenuti
Funziona con le opzioni di layout "Icona classica con titolo" e "Icona classica a lato".

Dimensione del titolo
Controlla la dimensione del titolo. Lascia vuoto per la selezione dell'opzione del tema. In pixel es: 18px.

Colore carattere titolo
Controlla il colore del carattere del titolo. Lascia vuoto per la selezione dell'opzione del tema. es: #000

Colore del carattere del corpo
Controlla il colore del carattere del corpo. Lascia vuoto per la selezione dell'opzione del tema. es: #000

Colore di sfondo della casella del contenuto
Lascia vuoto per la selezione dell'opzione del tema.

Sfondo dell'icona
Scegli di mostrare uno sfondo dietro l'icona. Seleziona l'impostazione predefinita per la selezione dell'opzione del tema.

Raggio di sfondo dell'icona
Scegli il raggio del bordo dello sfondo dell'icona. Lascia vuoto per la selezione dell'opzione del tema. In pixel (px), es: 1px o "rotondo".

Colore icona
Lascia vuoto per la selezione dell'opzione del tema.

Colore di sfondo dell'icona
Lascia vuoto per la selezione dell'opzione del tema.

Colore del bordo interno dello sfondo dell'icona
Lascia vuoto per la selezione dell'opzione del tema.

Dimensione del bordo interno dello sfondo dell'icona
Lascia vuoto per la selezione dell'opzione del tema.

Colore del bordo esterno dello sfondo dell'icona
Lascia vuoto per la selezione dell'opzione del tema.

Dimensione del bordo esterno dello sfondo dell'icona
Lascia vuoto per la selezione dell'opzione del tema.

Dimensione dell'icona
Controlla la dimensione dell'icona. Lascia vuoto per la selezione dell'opzione del tema. In pixel es: 18px.

Tipo di animazione al passaggio del mouse dell'icona
Seleziona il tipo di animazione per l'icona al passaggio del mouse. Seleziona l'impostazione predefinita per la selezione dell'opzione del tema.

Colore animazione al passaggio del mouse
Seleziona un colore di accento per l'animazione al passaggio del mouse. Lascia vuoto per la selezione dell'opzione del tema.

Tipo di collegamento
Seleziona il tipo di collegamento che dovrebbe essere visualizzato nella casella del contenuto. Seleziona l'impostazione predefinita per la selezione dell'opzione del tema.

Area di collegamento
Seleziona a quale area verrà assegnato il link. Seleziona l'impostazione predefinita per la selezione dell'opzione del tema.

Collegamento bersaglio
_self = aperto nella stessa finestra
_blank = apre in una nuova finestra. Seleziona l'impostazione predefinita per la selezione dell'opzione del tema.

Ritardo animazione
Controlla il ritardo dell'animazione tra ogni elemento in un set. In millisecondi, 1000 = 1 secondo.

Offset dell'animazione
Scegli quando deve iniziare l'animazione.

Tipo di animazione
Seleziona il tipo di animazione da utilizzare sullo shortcode

Direzione dell'animazione
Seleziona la direzione in arrivo per l'animazione

Velocità di animazione
Digitare la velocità dell'animazione in secondi (0,1 – 1)

Margine superiore
In pixel (px), es: 1px.

Margine inferiore
In pixel (px), es: 1px.

Classe CSS
Aggiungi una classe all'elemento HTML di wrapping.

ID CSS
Aggiungi un ID all'elemento HTML di wrapping.

Modifica di una casella di contenuto "figlio"

Fare clic sull'icona del pennello per modificare la casella del contenuto.

Scorri fino in fondo per trovare "Aggiungi nuovo riquadro dei contenuti" o eventualmente "Articolo 1+ del riquadro dei contenuti", se è già presente un elemento all'interno del riquadro dei contenuti.

Modifica testo, immagini, aggiungi icone e modifica numerose opzioni nella casella di contenuto "figlio" qui. Queste impostazioni sovrascriveranno le impostazioni principali.

Ora fai clic sul pulsante blu SALVA. La casella di modifica si chiuderà.

Ricordati di cliccare sul pulsante AGGIORNA a destra per salvare la pagina.

Link utili

Informazioni sull'aggiornamento di Avada