Come utilizzare Avada Header, Footer e il generatore di layout di colonne?

Il nostro generatore di pagine personale, Avada Builder, è ora disponibile in due interfacce: Avada Builder, che è il nostro generatore di pagine wireframe di back-end, e Avada Live, che è il nostro generatore di front-end, introdotto solo di recente con Avada 6.0 .

Utilizzando il nostro semplice sistema di contenitori, colonne ed elementi, entrambe le versioni di Avada Builder ti consentono di progettare facilmente splendidi layout di pagina per il tuo sito web. Avada Builder è uno strumento fantastico sia per i web designer moderni che per i proprietari di siti, poiché offre loro il controllo completo su tutti gli aspetti del contenuto e del layout della pagina. Entrambe le versioni di Avada Builder generano anche lo stesso codice. Sono completamente intercambiabili, permettendoti di avere il meglio di entrambi i mondi con Avada Builder, che è attualmente disponibile.

La pagina Layout Builder è dove troverai tutti i tuoi layout e qualsiasi layout condizionale che potresti voler costruire oltre al layout globale creato per impostazione predefinita. Qui si trova anche l'area in cui assegni le sezioni di layout ai tuoi layout e specifichi le condizioni affinché i tuoi layout condizionali abbiano effetto.

È possibile accedere a Layout Builder da Avada Dashboard selezionando Layout > Layout Builder dal menu a discesa. Uno dei modi più semplici per descrivere i layout è dire che sono contenitori che ospitano le quattro sezioni di layout di una pagina: la sezione dell'intestazione, la sezione della barra del titolo della pagina, la sezione del contenuto e la sezione del piè di pagina. Puoi saperne di più sulle differenze tra sezioni di layout e layout leggendo questo documento: Comprensione di layout e sezioni di layout (PDF). Continua a leggere per saperne di più sulle cose che puoi fare in questa pagina.

Due parti si trovano nella parte superiore della pagina Layout Builder. Una tecnica per popolare le sezioni di layout nel layout globale o per generare layout condizionali è descritta nella prima sezione (suggerimento: puoi chiuderla con la X), e sul lato destro dello schermo c'è un'area da cui puoi creare direttamente nuovi Layout (vedi sotto). Digita un nome per il tuo nuovo layout e quindi fai clic su Crea nuovo layout per completare il processo. Quando si utilizza questo metodo viene creato un layout vuoto; non sono specificate sezioni o condizioni di layout.

Man mano che crei i layout, questi vengono importati automaticamente nella pagina Generatore di layout. Puoi rinominare un Layout facendo clic sul pulsante Rinomina nella parte superiore della pagina. Puoi anche fare clic sull'icona a forma di ingranaggio per stabilire le condizioni per il layout e puoi eliminare un layout facendo clic sull'icona del cestino nella parte superiore della pagina. Puoi anche vedere e assegnare criteri facendo clic sulla parte inferiore di tutti i layout, eccetto il layout globale.

All'interno di ogni Layout, puoi vedere le quattro Sezioni Layout assegnate a un particolare Layout, una per ciascuno dei quattro layout. In ogni sezione del layout vedrai un'icona +, che ti permetterà di assegnare una sezione del layout a quella sezione del layout quando ci muovi sopra con il mouse. Hai la possibilità di assegnare una sezione layout esistente a questa sezione o di creare una sezione completamente nuova da zero.

Utilizzo del layout di sezione

Come parte di Avada Layouts, ora puoi creare piè di pagina completamente personalizzabili per il tuo sito Web, sfruttando l'intera capacità creativa di Avada Builder per raggiungere questo obiettivo.

Un layout piè di pagina è una sezione di layout aggiunta a un layout. Per ex amp le, un piè di pagina richiede un aspetto di una sezione piè di pagina, che può essere aggiunto sia al globale o layout personalizzato. Vedremo come costruire una sezione di layout del piè di pagina personalizzato nella sezione successiva, ma prima diamo un'occhiata a Introduzione ai layout di Avada.

Nella barra laterale di WordPress o nella dashboard di Avada, seleziona Avada > Layout. I layout e le sezioni di layout di Avada vengono creati e gestiti qui. Come mostrato di seguito, il layout globale è inizialmente vuoto, senza sezioni di layout associate.

Personalizzazione di un layout

Questa sezione può essere aggiunta al Layout Globale o a un Layout Condizionale, mostrando solo alcuni tipi di post personalizzati o singole pagine. Il layout globale è già presente, ma dobbiamo prima sviluppare un layout condizionale.

Nella pagina Layout, aggiungi un nome e fai clic su Crea nuovo layout, come mostrato di seguito.

Crea una sezione layout piè di pagina se desideri aggiungerla a un layout esistente o al layout globale.

Nella schermata di aspetto di una sezione Builder, selezionare il tipo di aspetto di una sezione, inserire un nome (in questo ex amp le, piè di pagina, possibilmente globale piè di pagina) e fare clic su Crea nuova sezione layout, come illustrato di seguito.

L'immagine seguente mostra come generare una sezione di layout direttamente dal layout. Le sezioni del layout del tuo sito devono essere aggiunte a un layout. Inizialmente, c'è semplicemente un layout globale. Quindi, per creare un piè di pagina personalizzato globale, aggiungilo a questo layout. Sezione layout piè di pagina personalizzato, quindi aggiungi le condizioni alla sezione layout piè di pagina personalizzato per far apparire il layout secondo i criteri.

Non c'è niente di male, ma è fondamentale considerare la situazione. Se il Layout è attualmente attivo (cioè ha delle condizioni o è il Layout Globale), qualsiasi nuova Sezione del Layout sarà immediatamente attiva e vuota. Ha più senso aggiungere prima un piè di pagina personalizzato a un layout globale tramite la pagina Generatore di sezioni di layout, quindi aggiungerlo al layout globale.

In alternativa, potremmo aggiungere un piè di pagina, un'intestazione o una sezione di layout di colonna a un layout condizionale e quindi crearlo. Le condizioni non vengono utilizzate fino a quando non vengono aggiunte condizioni. Come illustrato di seguito, possiamo modificare la sezione del layout del piè di pagina passandoci sopra con il mouse e facendo clic sull'icona di modifica.

Aggiunta della sezione del layout del piè di pagina al layout condizionale

Modifica del layout personalizzato

L'editor WordPress predefinito appare quando si modifica una nuova sezione di layout; puoi utilizzare Avada Builder o Avada Live da qui. Le sezioni di layout personalizzate vengono create qui. Per ulteriori informazioni, vedere Creazione del contenuto della sezione layout, ma in breve, qui puoi creare qualsiasi cosa.

Il tuo piè di pagina personalizzato può contenere tutto ciò che puoi costruire in Avada Builder. Puoi avere numerose colonne, foto, ecc.; Ciò consente un'immensa flessibilità. La sezione Layout è dove apparirà il materiale del piè di pagina. Il materiale proviene dal Costruttore e la tua creatività è l'unico vincolo.

Guarda il Footer originale creato per la Demo Taxi di seguito; Ciò è stato fatto modificando le opzioni del tema e i widget del piè di pagina.

Taxi Demo> Basic piè di pagina”src =” https://lh3.googleusercontent.com/_xzRCQdf_jBPoJv6eaW9Wx3rdXORc7Ni1945ud13b9kALKA4WdmZpeSSCTnLx-4hcwPKXGF1dl3E0qragaIr_eJ6AiBxO4AMKlY2tuxFbek-S0Z1PY3oQTE2UmjI4QzZydYbWqscpkwNbIpjTQ=s0 "> Guarda il piè di pagina globale personalizzato di Avada Layouts.

La versione desktop di questa intestazione personalizzata è mostrata qui, ma per comprendere correttamente l'ambito di questa intestazione personalizzata, devi visitare il sito live, a cui puoi accedere qui.

Progettazione del layout condizionale

Nessuna condizione in un layout globale. L'aggiunta di sezioni di layout verrà utilizzata in ogni pagina perché è globale. Se hai solo bisogno di un piè di pagina personalizzato su alcune pagine del tuo sito, come i singoli articoli di blog, dovresti utilizzare un layout condizionale.

Un layout condizionale può contenere solo sezioni di layout esistenti. Quindi, nella scheda Seleziona piè di pagina del layout, scorrere fino a Esistente, dove è possibile aggiungere la sezione layout, come mostrato di seguito.

Assegnazione di una sezione di layout personalizzata

È necessario impostare le condizioni per qualsiasi layout condizionale. Il Layout è attivo non appena vengono specificate le condizioni; quindi, se lo fai prima di stabilire la Sezione Layout, le pagine che soddisfano le condizioni saranno vuote.

Per aggiungere una condizione, seleziona Aggiungi una condizione dal menu inferiore del layout. Viene visualizzata una finestra di dialogo, come mostrato di seguito. Per ulteriori informazioni su condizionali Layout, vedere Informazioni condizionali layout, ma per questo ex amp le avremmo selezionare tutti i messaggi nella scheda Messaggi condizioni, come si vede qui sotto.

Aggiunta di colonne da Avada Layout builder

L'elemento colonna, come l'elemento contenitore, è un componente strutturale essenziale nella progettazione di un sito Avada.

L'aggiunta di colonne è relativamente semplice con il generatore di layout Avada.

  • Fare clic sul pulsante ' + Contenitore ' per aggiungere un contenitore alla pagina. Quando inserisci un contenitore, ti verrà chiesto di selezionare una colonna o un layout di colonna. Puoi creare un contenitore vuoto, ma normalmente aggiungi colonne in questo passaggio.
  • Per aggiungere nuove colonne a un contenitore esistente, passa il mouse sopra il contenitore e fai clic sul pulsante ' + Colonna '. Per aggiungere una nuova colonna, clicca qui.
  • Nell'angolo in alto a sinistra di una colonna, fai clic sull'icona "Ridimensiona colonna". Adesso avrà le stesse dimensioni della tua colonna. Ad esempio amp apparirà come '1/4 ' sotto l'opzione Ridimensiona colonna.
  • Trascina e rilascia le colonne per riorganizzarle. Puoi anche trascinare e rilasciare le colonne nei contenitori.

Una colonna può essere posizionata solo all'interno di un elemento contenitore con la stessa larghezza; Di solito è la larghezza del sito che hai impostato per il sito. Pertanto, se imposti la larghezza del sito su 1200 px, una colonna di 1/2 sarà larga 600 px. Le dimensioni delle colonne predefinite sono mostrate di seguito quando vengono aggiunte a una pagina.

In Avada, puoi impostare le larghezze delle colonne (e altro) separatamente su layout grandi, medi e piccoli come impostare l'ordine di visualizzazione e la dimensione delle colonne nei layout reattivi spiega come utilizzare questa nuova eccellente funzionalità con le colonne.

personalizzate si trovano in Colonne > Design > Larghezza . Come mostrato di seguito, l'utilizzo di un numero percentuale consente di specificare una larghezza personalizzata. Pertanto, il posizionamento è illimitato

Auto è una nuova opzione di larghezza. Invece di una larghezza fissa, la Colonna occuperà lo spazio dell'Elemento più significativo al suo interno. Quindi funziona solo in alcuni casi. È possibile modificare la colonna padre in Auto e la colonna si ridimensionerà alla larghezza dell'elemento.

Avada aggiunge anche i set di opzioni reattivi per contenitori e colonne. Nel back-end del Builder, puoi vedere le icone reattive su qualsiasi colonna, come mostrato nell'immagine qui sotto. Il Front-End Builder mostra le icone reattive nelle opzioni.

Solo i nuovi contenitori Flex mostrano i set di opzioni reattivi. Le colonne nei contenitori legacy non sono disponibili.

Conclusione

Grazie ad Avada Layouts, la possibilità di creare un piè di pagina personalizzato, un'intestazione e l'aggiunta di colonne è ora una realtà e un'opzione quasi illimitata. Non solo puoi utilizzare la potenza di Avada Builder per costruire praticamente qualsiasi piè di pagina o intestazione che puoi immaginare, ma puoi anche sfruttare la potenza dei layout condizionali per mostrarli o nasconderli su qualsiasi pagina, categoria, tipo di post personalizzato o qualsiasi combinazione di criteri che puoi pensare utilizzando Avada Builder.

Quando si tratta di layout di WordPress, Avada Layouts è un punto di svolta nel senso più letterale. Il fatto che consenta tale libertà di progettazione e flessibilità di implementazione significa che il processo di creazione dei piè di pagina non sarà mai lo stesso.

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *