Come creare una pagina di destinazione con Elementor e PowerPack

WordPress ha reso facile per tutti costruire la propria presenza online, che si tratti di un blog o di un sito Web aziendale o di un complesso ERP. I temi e i plug-in di WordPress rendono ancora più semplice per gli utenti creare i propri siti Web senza doversi preoccupare di assumere un esperto. I plug-in di Page Builder hanno svolto un ruolo fondamentale nel trasformare il modo in cui i siti Web sono costruiti con WordPress. Elementor è uno di questi popolari plugin per la creazione di pagine.

Se sei un web designer e vuoi dare vita ai tuoi progetti senza doversi preoccupare del codice, puoi usare Elementor. Ma cosa succede se sei uno sviluppatore? Bene, se sei uno sviluppatore puoi utilizzare anche Elementor grazie alla sua funzionalità dev-friendly e API facile da estendere.

In questo post imparerai di più su Elementor e su come puoi utilizzarlo con i componenti aggiuntivi di Elementor per creare rapidamente siti Web, landing page, popup.

Cos'è Elementor?

Elementor è un popolare plug-in Page Builder per WordPress. Elementor fornisce blocchi di contenuto pronti all'uso chiamati Widget insieme a elementi strutturali di base come sezioni e colonne.

Puoi trascinare e rilasciare questi widget su qualsiasi pagina del tuo sito Web WordPress e creare un layout personalizzato in base alle tue esigenze.

Elementor Pro è dotato di oltre 60 widget e un sacco di modelli predefiniti che puoi utilizzare per progettare qualsiasi pagina.

Caratteristiche di Elementor

Elementor è dotato di un sacco di caratteristiche e funzionalità che possono rendere lo sviluppo del tuo sito Web più comodo e veloce. Vediamo tutte le straordinarie funzionalità di Elementor che ne valgono la pena.

Veloce e facile da usare

Elementor è ottimizzato per le prestazioni. Anche se sei un utente alle prime armi, troverai molto facile da usare e navigare senza sforzo in Elementor. Non sentirai mai Elementor trascinarti indietro nel tuo processo di progettazione e renderà le cose facili e veloci per te.

Mentre Elementor è velocissimo, puoi ottenere di più da Elementor quando utilizzi l'hosting Cloudways Elementor. CW è tutto incentrato sulle prestazioni e fornisce un controllo eccellente su come funziona il tuo server. Quando si tratta di sicurezza, Cloudways offre server davvero affidabili e protetti governati dalle loro pratiche di sicurezza proattive per mantenere i tuoi server sicuri e protetti. Il numero di funzionalità fornite con Cloudways è qualcosa che è difficile da trovare oggi nel settore.

Modelli di pagina predefiniti

Con Elementor, ottieni un sacco di modelli predefiniti che puoi utilizzare per creare una pagina web con un solo clic. Esistono modelli per quasi tutte le categorie di pagine Web come la pagina di destinazione, la pagina, ecc. E possono rendere il processo di progettazione del sito Web molto più veloce.

Se non riesci a trovare un buon modello nella libreria Elementor, puoi controllare i modelli Elementor di terze parti. Con una fiorente comunità di designer e sviluppatori, portare Elementor al livello successivo è facile.

Caricato con widget

Entrambe le versioni gratuita e Pro Elementor viene fornito con widget caricati. Da semplici widget di contenuto come intestazioni, editor di testo, pulsanti a widget avanzati come griglia di post, modulo di accesso, WooCommerce, condivisione social, ottieni molte funzionalità con Elementor.

Se desideri avere più potere quando si tratta di widget, puoi provare i componenti aggiuntivi Elementor di terze parti. Ti consigliamo di utilizzare PowerPack per Elementor. È un componente aggiuntivo leader per Elementor e creato dallo stesso team dietro il popolare componente aggiuntivo PowerPack Beaver Builder.

Elementor Pop up Builder

Il generatore di popup è una delle ultime aggiunte al generatore di Elementor. La funzione di creazione di popup elimina la necessità di utilizzare un plug-in di creazione di popup di terze parti sul tuo sito web. Puoi utilizzare Elementor per progettare popup impressionanti con regole e funzionalità di targeting avanzate.

Puoi creare moduli di accesso, tappetini a schermo intero, pop-up di sconti e altro con la funzione di creazione di popup.

Impostazioni globali

Quando crei un sito Web, è importante avere impostazioni di colore coerenti, tipografia, ecc. Puoi personalizzare i colori, i caratteri e persino il selettore di colori in anticipo per facilitare il processo di progettazione con le impostazioni globali in Elementor.

Costruisci parti del tema come intestazione, piè di pagina, archivi, ecc.

Con Elementor, il tuo design non si limita solo all'area del contenuto di una pagina . Puoi creare un'intestazione, un piè di pagina, una barra laterale e quasi ogni parte del sito Web personalizzati senza doversi preoccupare di scrivere codice. Tutti questi possono essere facilmente creati utilizzando la funzionalità Theme Builder in Elementor Pro.

Contenuto dinamico

Con la funzionalità di contenuto dinamico in Elementor Pro, puoi visualizzare dati/contenuti dinamici da campi personalizzati di WordPress, ACF, Toolset, Pods, MetaBox o qualsiasi altro plug-in di campi personalizzati. Puoi utilizzare i dati dei campi personalizzati e visualizzarli con i widget Elementor in qualsiasi parte del tuo sito. Puoi saperne di più sui contenuti dinamici qui.

Versione Lite e Pro

Sebbene Elementor abbia molto da offrire, non è necessario che gli utenti debbano pagare una somma enorme per accedervi. In effetti, Elementor ha due versioni, Lite e Pro. Puoi accedere a molte funzionalità di Elementor nella stessa versione lite. Entrambe le versioni hanno le loro caratteristiche da offrire. Ecco un confronto dettagliato di Elementor Lite e Pro che può aiutarti a prendere una decisione.

PowerPack per Elementor

Elementor è sicuramente l'intero pacchetto. L'unico strumento di cui hai bisogno per iniziare a progettare pagine web con un angolo di apprendimento minimo.

Potrebbero esserci momenti in cui ti senti un po' limitato durante l'utilizzo di Elementor. Per questo, componenti aggiuntivi di terze parti ben codificati come il componente aggiuntivo PowerPack Elementor vengono in soccorso. Questo componente aggiuntivo è uno dei migliori della sua categoria e offre widget eccellenti e impressionanti con un sacco di opzioni di personalizzazione per gli utenti.

Attualmente, ci sono più di 50 widget nella versione Pro di PowerPack e il team continua ad aggiungere nuovi widget che lo rendono un'ottima scelta tra i componenti aggiuntivi di Elementor.

PowerPack è costruito da un team di sviluppatori e designer esperti di WordPress con in mente le prestazioni. Il plugin è ben codificato e regolarmente aggiornato per la compatibilità con le ultime versioni di Elementor e WordPress

Vediamo come puoi usare Elementor e il componente aggiuntivo PowerPack insieme per creare fantastiche pagine web.

Creazione di una pagina di destinazione

In questo tutorial imparerai come creare una landing page rapida con Elementor e PowerPack Elementor addon. È facile iniziare con Elementor , tutto grazie all'interfaccia intuitiva.

Assicurati di avere sia Elementor che PowerPack installati sul tuo sito. Puoi ottenere le versioni gratuite dai seguenti link:

1. elementor
2. PowerPack Lite per Elementor

Creare una pagina con Elementor

Accedi alla dashboard di amministrazione di WordPress e fai clic sull'opzione Aggiungi nuovo in Pagine . Ora dai alla tua pagina un titolo/nome e fai clic sul pulsante Modifica con Elementor .

In questo tutorial, stiamo creando una landing page per una Pizzeria, quindi chiameremo la nostra Pagina di conseguenza. Ecco come dovrebbe essere il nostro risultato finale:

Cominciamo con la prima sezione . Prima di farlo, cambia il layout in Elementor Canvas facendo clic sulla piccola icona delle impostazioni nell'angolo in basso a sinistra nell'editor.

Passaggio 1: sezione Eroe

La sezione eroe comprende un'immagine di sfondo, due widget di titoli e un pulsante CTA.

Innanzitutto, fai clic sull'icona più e aggiungi una struttura a colonna singola dalle opzioni. Ora vai alle impostazioni della sezione e abilita l' opzione tratto sezione e imposta l'imbottitura inferiore e superiore su 250 dalla scheda avanzata.

Ora puoi selezionare l'immagine desiderata per lo sfondo dalla scheda stile> tipo di sfondo> Classico e scegliendo l'immagine dal display multimediale.

Abbiamo lo sfondo pronto. Ora aggiungiamo i titoli e il pulsante alla nostra sezione degli eroi.

Trascina e rilascia il widget Dual Heading sulla pagina e modifica rispettivamente il testo. Ora, assicurati di dividere la prima e la seconda intestazione di conseguenza per enfatizzare maggiormente il prezzo come abbiamo fatto nell'immagine qui sotto. Modificare la tipografia per entrambe le parti dell'intestazione.

Ci sono molte altre modifiche che puoi apportare per rendere il tuo titolo di eroe nel modo desiderato.

Una volta apportate le modifiche, trascina e rilascia un altro widget Intestazione sotto la doppia intestazione e modifica le impostazioni di testo e tipografia per le stesse come richiesto, qui ho modificato la dimensione del testo in 90 , il carattere in Elsie e il peso del carattere in 600 .

Ora aggiungeremo il pulsante CTA .

Trascina e rilascia il widget Pulsante Elementor nella sezione appena sotto il widget Intestazione. Ora inizieremo a modificare le impostazioni per il pulsante.

Ecco le modifiche che ho apportato al pulsante:

• Testo modificato in Ordina ora!
• Allineato al centro il pulsante.
• Aggiunto il link CTA
• Tipografia modificata in Elise; 24;600 rispettivamente per carattere, dimensione e peso.
• Modificato il colore di sfondo in rosso ( #ff0000 ) e il colore del carattere in bianco ( #ff0000 ).
• Aggiunto imbottitura 18, 40, 18, 40 rispettivamente in alto, a destra, in basso, a sinistra.

Dopo aver apportato le modifiche, ecco come appare la sezione degli eroi.

Passaggio 2: la sezione Informazioni

Ora lavoreremo sulla sezione Informazioni, vai avanti e aggiungi una struttura a due colonne alla pagina facendo clic sull'icona "+".

Ora puntiamo a creare un layout simile a questo, quindi aggiungeremo un widget di intestazione, un widget dell'editor di testo e il widget Testimonianze nella colonna di sinistra. Nella colonna di destra, aggiungeremo un widget Intestazione, un widget Testo e il widget Pulsante.

Basta iniziare a trascinare e rilasciare i widget nella sezione e modificarli in modo che assomiglino a quelli nell'immagine fornita sopra. Aggiungi il titolo e cambia la tipografia per lo stesso.

Ecco come sarà:

Ora aggiungi l'editor di testo sotto il titolo nella colonna di sinistra e cambia la tipografia con la stessa visualizzata di seguito.

Ora aggiungeremo il widget Carousel di testimonianze sotto il widget dell'editor di testo. Aggiungi gli "Articoli" o le Testimonianze da mostrare sul tuo sito web. Puoi anche utilizzare il widget Testimonianze di PowerPack che offre molto più potere di personalizzazione.

Una volta che hai finito di apportare le modifiche, la colonna di sinistra della sezione Informazioni dovrebbe essere simile a questa.

Ora per la colonna di destra , aggiungi lo sfondo per aggiungere un po' di contrasto alla sezione.

Ora crea un duplicato dell'intestazione che abbiamo creato nella colonna di sinistra e trascinalo e rilascialo nella colonna di destra. Fai lo stesso per l'editor di testo in quanto ciò ti salverà da ridondanza non necessaria e ti farà anche risparmiare tempo. Ora per il pulsante, duplica semplicemente il pulsante dalla sezione Eroe e trascinalo e spostalo nella colonna di destra della sezione Informazioni.

Allinea verticalmente la colonna di destra al centro dalla colonna di modifica> layout> allinea verticale e hai la sezione Informazioni pronta!

Questo è il risultato finale della sezione About:

Passaggio 3: sezione CTA "Scopri di più"

Aggiungeremo un'altra sezione che parla di Pizzeria. Questa sezione sarà simile a quella che abbiamo creato prima, ma la struttura sarà leggermente diversa.

Quindi, vogliamo che il nostro risultato finale assomigli a questo:

Hai notato qualcosa di simile qui?

Sì! L'intestazione, l'editor di testo sono simili a quello che abbiamo già creato in precedenza. Quindi, invece di ridisegnare tutti i widget, li duplicheremo semplicemente e li trascineremo in posizione.

Facciamolo!

Innanzitutto, aggiungi una nuova struttura a due colonne e vai alle impostazioni della sezione e aggiungi l'immagine di sfondo dalla finestra multimediale e aggiungi l' imbottitura superiore di 100 per rendere il pannello più spazioso. Inoltre, abilita l' opzione Allunga sezione dalle impostazioni.

Ora vai alla sezione precedente e duplica l'intestazione, l'editor di testo e il widget del pulsante . Puoi farlo semplicemente facendo clic con il pulsante destro del mouse sul widget e selezionando l'opzione duplica . Una volta duplicati, trascina e rilascia i widget duplicati nelle nuove posizioni.

Ecco come si presenta la sezione:

Ora per la colonna di destra, trascina e rilascia il widget dell'immagine e seleziona l'immagine dalla galleria multimediale. Regola l'immagine in termini di Dimensioni immagine ecc. E una volta terminato, ecco come appare la sezione.

Passaggio 4: la sezione Contatti/Ordini

Questa è la sezione CTA che aiuterà l'utente a effettuare l'ordine. Ora, cosa dovrebbe includere tutta questa sezione? Vediamo cosa ci proponiamo di fare qui.

Abbiamo bisogno di creare due widget per l'intestazione e l'editor di testo, un modulo di contatto e il widget del menu del listino prezzi di PowerPack.

Prima di tutto, sappiamo che dobbiamo mantenere lo stesso design e aspetto dell'intestazione e dell'editor di testo. Puoi andare avanti e duplicarli dalla sezione precedente e posizionarli qui. Ora cambia il testo lì con quello che vuoi.

Puoi utilizzare il widget Moduli in Elementor Pro per creare un modulo di contatto tramite un semplice processo di trascinamento della selezione. Una volta fatto ciò, il modulo di contatto apparirà sulla pagina. Ora puoi effettuare ulteriori personalizzazioni dei moduli. Ecco le modifiche che ho apportato:

• Aggiunti campi modulo e modificata la dimensione del campo.
• Modificato il testo, le dimensioni e l'allineamento del pulsante.
• Aggiunta l'e-mail come azione del pulsante di invio e aggiunti i dettagli dell'e-mail.
• Aggiustato gli spazi tra le colonne e rifatto la tipografia e i colori del testo e dei campi
• Altre modifiche necessarie per rendere il modulo di contatto più accattivante .

Se utilizzi un plug-in per moduli di contatto come Gravity Forms, WPForms, Ninja Forms, ecc., puoi utilizzare il widget di stile del modulo di PowerPack per modellare il modulo con Elementor.

Ora, nella colonna di destra, aggiungeremo il listino prezzi per i prodotti. Per questo, utilizzeremo il widget Menu prezzi di PowerPack. Basta trascinarlo e rilasciarlo, aggiungere i dettagli e modificare il design e il layout per lo stesso. Ecco come sarebbe l'intera sezione:

Partecipa subito al giveaway!

PowerPack Giveaway ospitato da Cloudways

Avvolgendolo!

Dopo aver apportato tutte le modifiche, ecco come sarebbe l'intero layout.

Ora puoi creare un layout di bell'aspetto anche per te stesso con Elementor e PowerPack per Elementor. Mentre Elementor offre molte funzionalità, PowerPack lo estende ulteriormente con widget creativi e orientati alla funzionalità. Con oltre 50 widget molto utili nel tuo toolkit, puoi creare siti Web più velocemente.

Elementor e PowerPack possono farti risparmiare tempo, fatica e aiutarti a espandere la tua attività di web design. Non solo questo, entrambi i prodotti sono supportati da un fantastico team di esperti di WordPress in modo da ottenere la massima tranquillità.