Come utilizzare l'intestazione, il piè di pagina e il generatore di layout di colonna di Avada

Il nostro generatore di pagine personale, Avada Builder, è ora disponibile in due interfacce: Avada Builder, che è il nostro generatore di pagine wireframe back-end, e Avada Live, che è il nostro generatore 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 bellissimi 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. Anche entrambe le versioni di Avada Builder generano lo stesso codice. Sono completamente intercambiabili e ti consentono di avere il meglio di entrambi i mondi con Avada Builder, attualmente disponibile.

La pagina Generatore di layout è dove troverai tutti i tuoi layout e tutti i layout condizionali che potresti voler creare 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 al Generatore di layout dalla dashboard Avada selezionando Layout > Generatore di layout 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: Informazioni sui layout e sulle sezioni di layout (PDF). Continua a leggere per saperne di più sulle cose che potresti fare in questa pagina.

Due parti si trovano nella parte superiore della pagina del Generatore di layout. Una tecnica per popolare le Sezioni di Layout nel Layout Globale o per generare Layout Condizionali è delineata 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.

Mentre crei i layout, questi vengono automaticamente importati 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 visualizzare e assegnare criteri facendo clic sulla parte inferiore di tutti i layout, ad eccezione del layout globale.

All'interno di ciascun Layout è possibile vedere le quattro Sezioni Layout assegnate a un particolare Layout, una per ciascuno dei quattro layout. In ogni Sezione di Layout vedrai un'icona +, che ti permetterà di assegnare una Sezione di Layout a quella sezione del Layout quando passi il mouse su di essa. Hai la possibilità di assegnare una sezione di layout esistente a questa sezione o di crearne una nuova da zero.

Utilizzando il layout della sezione

Nell'ambito 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. Ad amp , un piè di pagina personalizzato richiede una sezione di layout piè di pagina, che può essere aggiunta al layout globale o personalizzato. Nella sezione successiva esamineremo la creazione di una sezione di layout del piè di pagina personalizzato, ma prima diamo un'occhiata all'introduzione di Avada Layouts.

Nella barra laterale di WordPress o nella dashboard di Avada, seleziona Avada > Layout. I layout e le sezioni 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 su determinati 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 di layout piè di pagina se desideri aggiungerla a un layout esistente o al layout globale.

Nella schermata Generatore di sezioni di layout, seleziona il tipo di Sezione di layout, inserisci un nome (in questo amp , Piè di pagina, possibilmente Piè di pagina globale) e fai clic su Crea nuova sezione di layout, come mostrato di seguito.

L'immagine seguente mostra come generare una sezione di layout direttamente dal layout. Le sezioni di layout del tuo sito devono essere aggiunte a un layout. Inizialmente esiste 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 sì che il layout venga visualizzato in base ai criteri.

Niente di male, ma è fondamentale considerare la situazione. Se il Layout è attualmente attivo (cioè ha condizioni o è il Layout Globale), qualsiasi nuova Sezione di Layout sarà immediatamente attiva e vuota. È più sensato 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 finché non vengono aggiunte le condizioni. Come illustrato di seguito, possiamo modificare la sezione Layout piè di pagina passandoci sopra con il mouse e facendo clic sull'icona di modifica.

Modifica del layout personalizzato

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

Il tuo piè di pagina personalizzato può contenere qualsiasi cosa tu possa costruire in Avada Builder. Puoi avere numerose colonne, foto, ecc.; Ciò consente un'enorme flessibilità. La sezione Layout è dove apparirà il materiale del footer. 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.

La versione desktop di questa intestazione personalizzata è mostrata qui, ma per comprendere correttamente la portata 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 su ogni pagina perché è globale. Se avessi bisogno di un piè di pagina personalizzato solo su alcune pagine del tuo sito, come singoli articoli del 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, scorri fino a Esistente, dove puoi aggiungere la sezione Layout, come mostrato di seguito.

È necessario impostare le condizioni per qualsiasi layout condizionale. Il Layout è attivo non appena vengono specificate le condizioni; pertanto, se si esegue questa operazione prima di creare la Sezione Layout, le pagine che soddisfano le condizioni saranno vuote.

Per aggiungere una condizione, seleziona Aggiungi una condizione dal menu in basso del layout. Viene visualizzata una finestra di dialogo, come mostrato di seguito. Per ulteriori informazioni sui layout condizionali, consulta Comprendere i layout condizionali, ma per questo amp selezioneremo Tutti i post nella scheda Condizioni dei post, come mostrato di seguito.

Aggiunta di colonne dal builder Avada Layout

L'Elemento Colonna, come l'Elemento Contenitore, è un componente strutturale essenziale quando si progetta un sito Avada.

L'aggiunta di colonne è relativamente semplice con il builder Avada Layout.

  • 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, fare clic qui.
  • Nell'angolo in alto a sinistra di una colonna, fai clic sull'icona "Ridimensiona colonna". Ora avrà le stesse dimensioni della tua colonna. Ad esempio amp una colonna da 1/4 verrà visualizzata 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; Solitamente si tratta della larghezza del sito impostata per il sito. Pertanto, se imposti la larghezza del sito su 1200 px, una mezza colonna sarà larga 600 px. Le dimensioni delle colonne preimpostate vengono visualizzate di seguito quando vengono aggiunte a una pagina.

In Avada, puoi impostare la larghezza 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 eccellente nuova funzionalità con le colonne.

Le larghezze 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. Puoi modificare la colonna principale in Automatico e la colonna verrà ridimensionata in base alla larghezza dell'elemento.

Avada aggiunge anche set di opzioni reattive 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 flessibili mostrano set di opzioni reattive. Le colonne nei contenitori legacy non sono disponibili.

Conclusione

Grazie ad Avada Layouts, la possibilità di creare piè di pagina, intestazioni e aggiungere colonne personalizzate è 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 a cui puoi pensare utilizzando Avada Builder.

Quando si tratta di layout WordPress, Avada Layouts rappresenta 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 più lo stesso.

Hanson F.

Post recenti

Come utilizzare intestazioni e piè di pagina con Elementor

Le intestazioni e i piè di pagina di un sito Web sono elementi essenziali. Nella maggior parte dei casi, l'intestazione fornisce la navigazione...

6 gennaio 2022

Confronto dei temi WordPress: Astra vs OceanWP

Due dei temi WordPress più popolari sul mercato sono Astra e OceanWP. Professionale…

2 gennaio 2022

Confronto dei temi delle notizie WordPress: Giornale vs. Astra

Per creare un eccellente sito Web di notizie non è necessario che tu diventi un web designer. Noi…

25 ottobre 2021

Crea un sito Web relativo alle notizie con il tema del giornale

Il tema Giornale è uno dei temi WordPress più significativi progettati da tagDiv, un...

18 ottobre 2021

Come costruire un eCommerce con il builder Avada WooCommerce

Quando si tratta di creare un negozio online, WooCommerce è il plugin di riferimento. Esso…

4 ottobre 2021

Come utilizzare l'intestazione fissa e gli effetti di scorrimento con Elementor

Un'intestazione è generalmente la prima cosa che una persona vede quando visita il tuo sito web,...

21 settembre 2021