Il costruttore di temi di Elementor (Elementor Theme Builder) è tra i migliori del settore, offre decine di strumenti, un’assistenza clienti di prim’ordine e aggiornamenti frequenti che lo rendono sempre attuale.
Se state prendendo in considerazione di utilizzare il page builder Elementor per creare un sito, sarete sicuramente curiosi di sapere se è possibile provare questa opzione gratuitamente. Certamente no!
L’Elementor Theme Builder è un servizio premium incluso solo nella versione a pagamento di Elementor.
Non sai cos’è Elementor? Scoprilo qui!
Nel corso di questo articolo, vedremo:
- Come funziona Elementor Theme Builder e perché da solo vale il costo di Elementor Pro
- Come creare un Header e Footer
- Come creare un template di pagina
- Suggerimenti per risparmiare e utilizzare la versione gratuita di Elementor
Elementor Theme Builder: Scopriamo le funzionalità
Se siete pronti a provare il Theme Builder, ci sono alcune cose che dovete sapere. Ad esempio, è parte integrante del plug-in “Elementor“, quindi il contenuto viene creato direttamente sul vostro sito web.
A meno che non abbiate scelto la variante gratuita di Elementor, avrete accesso con la versione Pro a oltre 300 modelli e widget per creare il vostro sito web definitivo. Tutto ciò che dovete fare è trascinare e rilasciare ogni elemento nella posizione desiderata. Potete scegliere tra intestazioni, piè di pagina, moduli, pop-up e altro ancora.
Cosa sono i Single Page Template e i Single Post Template?
I modelli di pagina e i modelli di post sono un ottimo modo per risparmiare tonnellate di tempo nella progettazione di pagine web da zero.
Una volta che avete un modello di base, potete applicarlo a ogni singola pagina del vostro sito web. Al massimo, dovrete apportare qualche piccola personalizzazione e aggiungere i vostri contenuti a ogni singola pagina. Tuttavia, il design e il layout di base rimarranno gli stessi per ogni pagina, conferendo al vostro sito web un aspetto coerente e uniforme. In questo modo, un modello a pagina singola può rendere più facile e veloce la progettazione di siti web.
La differenza tra i due è semplicemente che il Single Page Template si applica sulle Pagine, mentre il Single Post Template si applica agli articoli (quindi al blog)
La creazione di questi template ha due scopi: migliorare l’aspetto del sito per gli utenti e ridurre i tempi di caricamento delle pagine. Poiché ogni pagina ha un layout simile, Google non deve caricare una pagina nuova per ogni clic. Questo processo aumenta la velocità del sito, che è essenziale per la SEO.
Come creare un Single Page/Post Template utilizzando Elementor Theme Builder?
La maggior parte delle persone pensa che la progettazione di siti web richieda conoscenze di codifica. Ma nell’era dei costruttori di pagine come Elementor, chiunque può creare un sito web decente senza toccare una riga di codice. È sufficiente utilizzare l’editor drag-and-drop per posizionare widget come pulsanti e moduli in qualsiasi punto della pagina web.
Il Theme Builder di Elementor consente di creare modelli per tutte le parti del sito web, tra cui intestazioni, piè di pagina, post, pagine di archivio e molto altro ancora. In questo modo, non è più necessario affidarsi al design e ai layout di un tema WordPress.
Nota: il Theme Builder è una funzione disponibile solo con Elementor Pro. È necessario installare sul proprio sito sia la versione gratuita che quella premium di Elementor.
1. Aprite Elementor Theme Builder
Per prima cosa, accedere alla dashboard di WordPress e navigare in Modelli→ Theme Builder. In questo modo si accede all’interfaccia del Theme Builder, dove si ottiene una panoramica dell’intero sito web.
2. Create un modello di pagina
Come si può vedere, Elementor Theme Builder consente di creare modelli e di personalizzare ogni parte del sito. In questo tutorial ci concentreremo solo sulla creazione di un modello di pagina singola, tanto la procedura per la creazione del modello per i post è pressoché identica.
Per farlo, cliccate su ‘Pagina singola’ dal pannello laterale sinistro e poi su ‘Aggiungi nuovo’. Apparirà una finestra di popup con alcuni modelli di pagina singola già pronti dalla libreria dei template di Elementor. Se si desidera, è possibile utilizzare questi modelli e personalizzarli. Oppure si può creare un modello di pagina singola personalizzato partendo da zero.
3. Aggiungete il titolo della pagina, il contenuto e gli altri elementi essenziali
Cercate l’elemento “Titolo della pagina”, trascinatelo in un punto qualsiasi della pagina per attivarlo. Si tratta di un elemento dinamico, il che significa che visualizzerà automaticamente il nome della pagina. È possibile personalizzare il titolo della pagina in base al proprio stile. È possibile aggiungere colori e caratteri tipografici personalizzati. Oppure si possono usare colori e caratteri globali per un aspetto più coerente e uniforme.
Fate lo stesso con gli altri elementi essenziali che volete sulla vostra pagina. Ad esempio, l’elemento “Contenuto del post” visualizzerà il contenuto della pagina. Allo stesso modo, è possibile utilizzare l’elemento ‘Immagine in Evidenza’ per aggiungere l’immagine in evidenza automaticamente alla pagina.
4. Personalizzate il layout della pagina in Elementor
È possibile personalizzare il layout del modello di pagina sull’Elementor Theme Builder. Per farlo, cliccate sulla sezione che volete personalizzare e poi andate alla scheda ‘Layout’. Qui si può giocare con le impostazioni per rendere la pagina singola più accattivante.
5. Impostate le condizioni di visualizzazione e pubblicate il modello di pagina
Ora che il modello di pagina singola è pronto, non resta che impostare le condizioni per la sua visualizzazione. Quando si fa clic sul pulsante “Pubblica”, appare una finestra popup. Da qui è possibile aggiungere condizioni per decidere dove applicare il modello di pagina. Dopo aver impostato le condizioni, fare clic su “Salva e continua”. Il modello di pagina è pubblicato! È possibile salvare questo modello e riutilizzarlo per ogni singola pagina del sito web.
Come creare una testata (o header) e un piè-di-pagina (o footer)?
Torniamo sulla schermata principale di Elementor Theme Builder e andiamo, questa volta, a selezionare l’opzione “Testata” o “Piè-di-pagina”
La Testata, o Header, è quella parte presente solitamente nella parte alta di un sito web, che include il logo del sito, il menu di navigazione e a volte può contenere dei pulsanti o informazioni di contatto.
Il Piè-di-pagina, o Footer, è invece quel blocco alla fine di una pagina che contiene, normalmente, informazioni di navigazione, le policy per i cookie e la privacy, i dati legali, i dati di copyright di un sito, etc.
Essendo la procedura per i due quasi identica, ci concentreremo sulla creazione di una Testata usando il Theme Builder di Elementor.
La prima cosa che si vede quando si entra nell’editor è, di nuovo, un elenco di template di header pre-caricati da Elementor: Passando il mouse su ciascuno dei modelli di Elementor, appare l’icona di una lente di ingrandimento. Cliccala se vuoi visualizzare l’anteprima del template.
Scegliete il layout più simile a quello che avete immaginato per il vostro header. Non importa se i colori, i componenti e il layout non corrispondono esattamente. In questa fase si tratta solo di gettare le basi per ridurre la quantità di lavori da fare.
Quando ne avete trovato uno che vi piace, selezionatelo e fate clic sul pulsante verde “Inserisci” in alto a destra.
Per prima cosa, cambiamo il logo: Esistono due modi per aggiungere un logo all’intestazione del sito web.
- Utilizzando il widget “Immagine”
- Utilizzando il widget “Logo del sito”
La seconda opzione ci consente di usare un logo dinamico che viene ereditato direttamente dall’immagine che carichiamo quando impostiamo l’identità del sito nelle impostazioni generali di Aspetto di WordPress.
Per accedere a Site Identity da Elementor, cliccate sull’icona del menu ad hamburger nell’angolo in alto a sinistra. Andate quindi su Impostazioni del sito e Identità del sito, dove caricherete il file del vostro logo.
È possibile che si vogliano apportare personalizzazioni al logo: Utilizzate le impostazioni “Contenuto”, “Stile” e “Avanzate” per regolarne il design e il comportamento.
Adesso tocca al menu di navigazione: Ogni testata di Elementor è dotata di un widget “Nav Menu”. Questo widget inserisce automaticamente il menu di navigazione principale.
Se non avete ancora creato la navigazione, uscite dall’editor di Elementor e impostatela in Aspetto > Menu.
Per cambiare il menu che appare nell’intestazione, fare clic sull’elemento Nav Menu nell’intestazione. Quindi selezionate il vostro menu di navigazione dal menu a tendina.
Il widget Elementor Nav Menu consente agli utenti di selezionare un menu specifico da caricare nell’ header.
Per modificare lo stile della tipografia e delle icone, andate alla scheda “Stile”. La scheda Avanzate consente di personalizzarne il layout, gli effetti di movimento, il design dello sfondo e altro ancora.
Lo scopo principale dell’intestazione del sito web è quello però di aiutare i visitatori a muoversi all’interno del sito. Per questo motivo, è buona norma aggiungere una call-to-action all’intestazione, oltre al logo e al menu che i visitatori si aspettano di trovare.
La call-to-action (CTA) dovrebbe essere quella che attira la maggior parte dei visitatori. Per esempio:
- In un sito di e-commerce, aggiungere una barra di ricerca.
- In un sito SaaS, aggiungete un pulsante “Prova ora” o “Pianifica demo”.
- In un sito di media, aggiungete un pulsante per “Abbonarsi”.
- Qualunque cosa vogliate aggiungere, Elementor ha un widget adatto. Trovatelo e trascinatelo nel vostro header.
Una cosa da fare assolutamente, soprattutto se inserite una CTA, è controllare la visualizzazione in modalità responsive. Poiché i pulsanti e le barre di ricerca possono essere elementi ingombranti, è bene assicurarsi che non disturbino troppo il design della nostra intestazione quando visualizzati sui piccoli schermi.
Per aprire la modalità responsive, fare clic sul pulsante nella barra degli strumenti inferiore e selezionare l’icona del tablet o smartphone nella barra degli strumenti responsive nella parte alta della sezione “anteprima”.
Una volta completata la creazione dei contenuti e il design, l’ultima cosa da fare è impostare le condizioni di visualizzazione per la nostra testata.
Quando cliccate su Pubblica vi si aprirà il pop-up delle condizioni di visualizzazione: Per impostazione predefinita, il nuovo header verrà visualizzato nella parte superiore di ogni pagina del sito.
Se si desidera escludere l’intestazione da alcune pagine (ad esempio una landing page di vendita), passate da “includi” a “escludi” e quindi inserire la pagina o le pagine a cui applicare l’impostazione di esclusione. È possibile utilizzare queste impostazioni anche per visualizzare intestazioni personalizzate su determinati tipi di pagine.
Una volta terminata la configurazione delle condizioni di visualizzazione, l’intestazione personalizzata verrà automaticamente pubblicata e resa disponibile sul sito. Verificate che l’aspetto e il funzionamento siano esattamente quelli desiderati.
Ormai hai capito come funziona.
Elementor Theme Builder ti consente allo stesso modo di personalizzare altre parti del tuo sito web, come
- la pagina di errore 404
- le pagine di archivio dei post
- le pagine dei risultati di ricerca interna
- le landing page
- i pop-up
La personalizzazione di questi tipi di pagine è un pochino più complessa, quindi non ne parlerò in questo articolo. Ci saranno dei post scritti ad hoc così da potervi facilitare la comprensione di tutte le funzioni che il Theme Builder ci offre.
Alternative Gratuite al Theme Builder di Elementor
All’inizio di questo articolo abbiamo detto che il Theme Builder è disponibile solo per gli utenti di Elementor Pro. Come hai visto fino ad ora, il Theme Builder è veramente una funzione premium, le le cose belle hanno un prezzo.
Fortunatamente esistono addons per Elementor che consentono di creare intestazioni e piè di pagina personalizzati con gratuitamente.
Royal Theme Builder di WP Royal
Il Royal Theme Builder è relativamente nuovo sul mercato. È sviluppato da WP Royal e l’addon viene fornito con la versione gratuita di Royal Elementor Addons. I widget gratuiti offerti da questo sviluppatore sono abbastanza buoni, ma il theme builder non è riuscito a impressionare la maggior parte della comunità dei designer. Il motivo è che il plugin non ha una dashboard sul frontend e non ha compatibilità con WooCommerce.
L’addon ha alcune caratteristiche promettenti come le condizioni di visualizzazione, l’opzione sticky header e il supporto per i tipi di post personalizzati, ma (logicamente) sono disponibili solo facendo l’upgrade alla versione a pagamento del plugin. Tuttavia, la versione gratuita consente di creare un modello di testata e piè di pagina personalizzato per il proprio sito web Elementor.
Cosa si può fare:
- Personalizzazione dell’intestazione e del piè di pagina
- Utilizzo di menu precostituiti
- Compatibilità con tutti i temi moderni
- Costruire intestazioni e piè di pagina
- Creare template per gli archivi dei post
- Creare template per singoli post
Header & Footer Builder di Brainstorm Force
Elementor Header & Footer Builder è un addon per Elementor che consente di creare modelli personalizzati e di impostarli come intestazione, piè di pagina e blocco.
Questo plugin è sviluppato da Brainstorm Force, lo stesso team che ha realizzato il tema Astra. L’addon ha più di un milione di installazioni attive, il che dimostra quanto sia semplice e utile!
Cosa si può fare:
- Personalizzazione dell’intestazione del piè di pagina
- Personalizzazione dei blocchi
Se proprio non avete budget, le opzioni qui sopra potrebbero fare al caso vostro sebbene non siano complete come invece lo sono le opzioni offerte da Elementor Pro. In ogni caso, visti tutti i vantaggi di Elementor Pro, credo che la presenza del Theme Builder da sola valga il prezzo del plugin premium.