Come creare layout WordPress personalizzati con Elementor

Progettare i propri layout di pagina personalizzati in WordPress può sembrare una sfida enorme. Molte persone temono che la creazione di design unici richieda competenze di codifica. Questo può essere frustrante se si desidera personalizzare l'aspetto del proprio sito.

Fortunatamente, con Elementor, non è necessario conoscere alcun codice. Elementor è un page builder drag-and-drop per WordPress che rende la progettazione di layout facile e intuitiva. Anche i principianti possono creare pagine straordinarie con pochi clic.

Aiutiamo i nostri lettori a personalizzare i loro siti web con Elementor da anni. Pertanto, conosciamo i modi più semplici ed efficaci per farlo funzionare per te.

In questo articolo, ti guideremo attraverso i passaggi per creare layout WordPress personalizzati in modo rapido e semplice con Elementor.

Perché e quando hai bisogno di layout WordPress personalizzati?

Molti temi WordPress gratuiti e premium sono dotati di molteplici opzioni di layout per diversi tipi di pagine. Tuttavia, a volte, nessuno di questi layout soddisferà i tuoi requisiti.

Se sai programmare in PHP, HTML e CSS, puoi creare i tuoi modelli di pagina o persino creare un tema figlio per il tuo sito. Tuttavia, la maggior parte degli utenti WordPress non sono sviluppatori, quindi questa opzione non funziona per loro.

Quindi, non sarebbe fantastico se potessi semplicemente progettare layout di pagina usando un'interfaccia drag-and-drop?

Questo è esattamente ciò che fa Elementor. È un plugin per la creazione di pagine WordPress drag-and-drop che ti permette di creare facilmente i tuoi layout WordPress personalizzati senza alcuna competenza di codifica.

WordPress + Elementor è una combinazione potente che offre un'interfaccia utente intuitiva che ti consente di creare layout personalizzati con anteprima live. Viene fornito con molti moduli pronti all'uso per tutti i tipi di elementi di web design.

Elementor ha diversi template dal design professionale che puoi caricare istantaneamente e utilizzare come punto di partenza. Funziona con tutti i temi WordPress conformi agli standard ed è compatibile con tutti i plugin WordPress più diffusi.

Per maggiori dettagli, puoi consultare la nostra recensione completa di Elementor.

Tenendo conto di ciò, ti mostreremo come creare layout WordPress personalizzati con Elementor. Ecco una rapida panoramica di tutti i passaggi che ti guideremo attraverso:

1. Iniziare con Elementor
2. Creare layout WordPress personalizzati con Elementor
3. Creare i tuoi template in Elementor
4. Suggerimento bonus: Alternative a Elementor per la creazione di layout personalizzati

Iniziamo!

Iniziare con Elementor

Innanzitutto, dovrai acquistare il plugin Elementor Pro. È la versione a pagamento del plugin gratuito Elementor e ti dà accesso a funzionalità aggiuntive e 1 anno di supporto.

Successivamente, dovrai installare e attivare il plugin Elementor. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, devi visitare la pagina Elementor » Impostazioni per configurare le impostazioni del plugin.

Qui puoi abilitare Elementor per diversi tipi di post. Per impostazione predefinita, è abilitato per i tuoi post e pagine di WordPress.

Se hai tipi di post personalizzati sul tuo sito, anche questi appariranno qui e potrai abilitarli.

Puoi escludere o includere i ruoli utente che possono utilizzare Elementor durante la scrittura di post o pagine. Per impostazione predefinita, il page builder è abilitato solo per gli amministratori.

Quindi, non dimenticare di fare clic sul pulsante 'Salva modifiche' per memorizzare le tue impostazioni.

Creare layout WordPress personalizzati con Elementor

Innanzitutto, devi creare una nuova pagina o un nuovo post sul tuo sito WordPress. Nella schermata di modifica del post, noterai il nuovo pulsante 'Modifica con Elementor'.

Facendo clic su di esso si avvierà l'interfaccia utente di Elementor, dove potrai modificare la tua pagina utilizzando il page builder drag-and-drop di Elementor.

Puoi aggiungere sezioni e costruire la tua pagina da zero o scegliere un modello.

I modelli ti offrono un modo rapido e semplice per iniziare. Elementor viene fornito con diversi modelli progettati professionalmente che puoi personalizzare quanto desideri.

Iniziamo con un modello facendo clic sul pulsante 'Aggiungi modello'.

Questo aprirà una finestra popup dove potrai vedere i diversi modelli disponibili. Dovresti cercare un modello che sia simile a ciò che desideri per il layout della tua pagina.

Nel nostro esempio, stiamo esaminando i modelli di pagina 404.

Ora, devi fare clic per selezionare il modello che ti piace e quindi fare clic sul pulsante 'Inserisci' per aggiungerlo alla tua pagina.

Elementor caricherà ora il modello per te.

Ora puoi iniziare a modificare il modello per adattarlo alle tue esigenze. Semplicemente punta e fai clic su qualsiasi elemento per selezionarlo, e Elementor ti mostrerà le sue impostazioni nella colonna di sinistra.

Come funzionano i layout di Elementor

Ora, parliamo di come funzionano i layout di Elementor.

I layout di Elementor sono costruiti utilizzando sezioni, colonne e widget. Le sezioni sono come righe o blocchi che posizioni sulla tua pagina.

Ogni sezione può avere più colonne, e ogni sezione e colonna può avere i propri stili, colori, contenuti e così via.

Puoi aggiungere qualsiasi cosa nelle tue colonne e sezioni utilizzando i widget di Elementor. Questi widget sono diversi tipi di blocchi di contenuto che puoi inserire nelle tue sezioni Elementor.

Esiste un'ampia gamma di widget disponibili che coprono tutti i più diffusi elementi di web design a cui puoi pensare. Seleziona semplicemente un widget e trascinalo nella tua sezione o colonna.

Puoi aggiungere immagini, testo, titoli, gallerie di immagini, video, mappe, icone, testimonianze, slider, caroselli e molto altro.

Puoi anche aggiungere widget predefiniti di WordPress e persino i widget creati da altri plugin di WordPress sul tuo sito. Ad esempio, se stai usando WPForms per creare diversi moduli per il tuo sito, allora puoi usare il suo widget in Elementor.

Una volta terminata la modifica, puoi fare clic sulla freccia accanto al pulsante 'Pubblica' per visualizzare diverse opzioni di salvataggio.

Ora puoi visualizzare in anteprima la tua pagina o andare alla dashboard di WordPress.

Questo ti riporterà all'editor di contenuti. Ora puoi salvare la tua pagina WordPress o pubblicarla sul tuo sito web.

Creare i tuoi template in Elementor

Elementor ti consente di salvare i tuoi layout personalizzati come modelli. In questo modo, puoi riutilizzare i tuoi modelli per creare nuove pagine ancora più velocemente in futuro.

Modifica semplicemente la pagina che desideri salvare come modello con Elementor. Nell'interfaccia del builder di Elementor, facciamo clic sulla freccia accanto al pulsante ‘Pubblica’.

Ora vedrai altre opzioni per salvare il tuo post. Fai semplicemente clic sull'opzione ‘Salva come modello’.

Si aprirà un popup in cui dovrai fornire un nome per il tuo modello.

Dopo aver inserito il nome, fai semplicemente clic sul pulsante ‘Salva’.

La prossima volta che creerai un layout di pagina personalizzato, potrai selezionarlo dalla scheda ‘I miei modelli’.

Tutto quello che devi fare è fare clic sul pulsante 'Inserisci' per il tuo layout di pagina personalizzato.

Puoi anche esportare questo modello e usarlo su altri siti WordPress utilizzando Elementor.

Fai semplicemente clic sull'icona dei 3 puntini e poi fai clic sull'opzione 'Esporta'.

Da qui, puoi scaricare il modello sul tuo computer.

Suggerimento bonus: Alternative a Elementor per la creazione di layout personalizzati

Oltre a Elementor, ci sono altri strumenti per la creazione di landing page e siti web che ti consentono di creare layout personalizzati per il tuo sito.

Ecco alcune delle migliori alternative a Elementor che puoi utilizzare:

• SeedProd è il miglior costruttore di siti web WordPress drag-and-drop che ti permette di creare layout personalizzati per le tue landing page. Ci sono oltre 300 modelli di temi o landing page tra cui scegliere. SeedProd offre anche tonnellate di opzioni di personalizzazione e blocchi per creare pagine straordinarie. Per maggiori dettagli, puoi consultare la nostra recensione completa di SeedProd.
• Divi è un tema visivo e un page builder. È nel settore da oltre 14 anni e offre diverse funzionalità per la creazione di layout WordPress, inclusa una libreria di layout. Ci sono molte opzioni di personalizzazione nel builder visivo e non devi modificare alcun codice.
• Thrive Architect è un page builder potente e facile da usare per principianti che puoi utilizzare per creare layout splendidi. Viene fornito con oltre 352 modelli e molte opzioni di personalizzazione. Puoi utilizzare il suo builder visivo front-end per modificare qualsiasi elemento della pagina. Per maggiori dettagli, consulta la nostra recensione di Thrive Architect.
• Beaver Builder è un altro popolare page builder drag-and-drop per WordPress. È facile da usare e puoi impostare facilmente layout per pagine e articoli utilizzando Beaver Builder. Offre anche modelli predefiniti per landing page, ma non ce ne sono tanti quanti con SeedProd o Divi.

Speriamo che questo articolo ti abbia aiutato a imparare come creare layout WordPress personalizzati con Elementor. Potresti anche voler vedere il nostro confronto esperto tra Elementor vs. Divi vs. SeedProd e le nostre scelte per il miglior software di web design.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.