Come creare layout personalizzati per WordPress con Elementor

Progettare layout di pagina personalizzati in WordPress può sembrare una grande sfida. Molti temono che la creazione di design unici richieda competenze di codifica. Questo può essere frustrante se si vuole personalizzare l’aspetto del proprio sito.

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

Da anni aiutiamo i nostri lettori a personalizzare i loro siti web con Elementor. Quindi, conosciamo i modi più semplici ed efficaci per farlo funzionare per voi.

In questo articolo vi guideremo attraverso i passaggi per creare layout WordPress personalizzati in modo semplice e veloce con Elementor.

Perché e quando avete bisogno di layout WordPress personalizzati?

Molti temi WordPress gratuiti e premium sono dotati di più layout per diversi tipi di pagine. Tuttavia, a volte nessuno di questi layout soddisfa le vostre esigenze.

Se conoscete il codice PHP, HTML e CSS, potete creare i vostri modelli di pagina o addirittura creare un tema figlio per il vostro sito. Tuttavia, la maggior parte degli utenti di WordPress non sono sviluppatori, quindi questa opzione non è adatta a loro.

Quindi, non sarebbe fantastico se si potessero progettare i layout di pagina utilizzando un’interfaccia drag-and-drop?

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

WordPress + Elementor è una potente combinazione che offre un’interfaccia utente intuitiva che consente di costruire layout personalizzati con un’anteprima dal vivo. È dotato di molti moduli pronti all’uso per tutti i tipi di elementi di web design.

Elementor dispone di diversi modelli progettati professionalmente che si possono caricare immediatamente 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 verifiche, potete consultare la nostra recensione completa di Elementor.

Per questo motivo, vi mostreremo come creare layout WordPress personalizzati con Elementor. Ecco una rapida panoramica di tutti i passaggi che vi guideremo:

Iniziamo!

Come iniziare con Elementor

Innanzitutto, è necessario acquistare il plugin Elementor Pro. Si tratta della versione a pagamento del plugin Elementor gratuito e consente di accedere a funzionalità aggiuntive e a un anno di assistenza.

Successivamente, è necessario installare e attivare il plugin Elementor. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, è necessario visitare la pagina Elementor ” Impostazioni per configurare le impostazioni del plugin.

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

Se sul vostro sito sono presenti tipi di post personalizzati, anche questi appariranno qui e potrete abilitarli.

È possibile escludere o includere ruoli di utenti che possono utilizzare Elementor per scrivere post o pagine. Per impostazione predefinita, il costruttore di pagine è abilitato solo per gli amministratori.

Quindi, non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

Creare layout WordPress personalizzati con Elementor

Per prima cosa, è necessario creare una nuova pagina o un nuovo post sul sito WordPress. Nella schermata di modifica del post, noterete il nuovo pulsante “Modifica con Elementor”.

Facendo clic su di esso si avvia l’interfaccia utente di Elementor, dove è possibile modificare la pagina utilizzando il costruttore di pagine drag-and-drop di Elementor.

È possibile aggiungere sezioni e costruire la pagina da zero o scegliere un modello.

I modelli offrono un modo semplice e veloce per iniziare. Elementor è dotato di diversi modelli dal design professionale che potete personalizzare a piacimento.

Iniziamo con un modello facendo clic sul pulsante “Aggiungi modello”.

Si aprirà una finestra a comparsa in cui si potranno vedere i diversi modelli disponibili. Si dovrebbe cercare un modello che sia simile a quello che si desidera per il layout della pagina.

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

A questo punto, è necessario fare clic per selezionare il modello desiderato e poi fare clic sul pulsante ‘Inserisci’ per aggiungerlo alla pagina.

Elementor caricherà ora il modello per voi.

Ora è possibile iniziare a modificare il modello per adattarlo alle proprie esigenze. È sufficiente puntare e fare clic su un elemento per selezionarlo e Elementor 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 file o blocchi che vengono inseriti nella pagina.

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

È possibile aggiungere qualsiasi cosa nelle colonne e nelle sezioni utilizzando i widget di Elementor. Questi widget sono diversi tipi di blocchi di contenuto che si possono inserire nelle sezioni di Elementor.

È disponibile un’ampia serie di widget che coprono tutti gli elementi di web design più diffusi. È sufficiente selezionare un widget e inserirlo nella sezione o nella colonna.

È possibile aggiungere immagini, testo, titoli, gallerie di immagini, video, mappe, icone, testimonianze, cursori, caroselli e molto altro ancora.

Potete anche aggiungere al vostro sito i widget predefiniti di WordPress e persino quelli creati da altri plugin di WordPress. Ad esempio, se utilizzate WPForms per creare diversi moduli per il vostro sito, potete utilizzare il suo widget in Elementor.

Una volta terminata la modifica, è possibile fare clic sulla freccia accanto al pulsante “Pubblica” per visualizzare le diverse opzioni di salvataggio.

Ora è possibile visualizzare l’anteprima della pagina o accedere alla dashboard di WordPress.

In questo modo si torna all’editor dei contenuti. Ora è possibile salvare la pagina di WordPress o pubblicarla sul proprio sito web.

Creare i propri modelli in Elementor

Elementor consente di salvare i layout personalizzati come template. In questo modo, è possibile riutilizzare i propri template per creare nuove pagine ancora più velocemente in futuro.

È sufficiente modificare la pagina che si desidera salvare come modello con Elementor. Nell’interfaccia del costruttore di Elementor, facciamo clic sulla freccia accanto al pulsante “Pubblica”.

A questo punto si vedranno altre opzioni per salvare il post. È sufficiente fare clic sull’opzione “Salva come modello”.

Si aprirà una finestra a comparsa in cui si dovrà indicare un nome per il modello.

Dopo aver inserito il nome, è sufficiente fare clic sul pulsante “Salva”.

La prossima volta che si crea un layout di pagina personalizzato, sarà possibile selezionarlo dalla scheda “I miei modelli”.

È sufficiente fare clic sul pulsante “Inserisci” per il layout di pagina personalizzato.

È inoltre possibile esportare questo modello e utilizzarlo su altri siti WordPress utilizzando Elementor.

È sufficiente fare clic sull’icona con i tre puntini e poi sull’opzione “Esporta”.

Da qui è possibile scaricare il modello sul proprio computer.

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

Oltre a Elementor, esistono altri costruttori di landing page e siti web che permettono di creare layout personalizzati per il sito.

Ecco alcune delle migliori alternative a Elementor che potete utilizzare:

• SeedProd è il miglior costruttore di siti web WordPress drag-and-drop che consente di creare layout personalizzati per le pagine di destinazione. Ci sono oltre 300 modelli di temi o di pagine di destinazione tra cui scegliere. SeedProd offre anche tonnellate di opzioni di personalizzazione e blocchi per creare pagine straordinarie. Per maggiori dettagli, potete consultare la nostra recensione completa di SeedProd.
• Divi è un tema visivo e un costruttore di pagine. È presente nel settore da oltre 14 anni e offre diverse funzionalità per la creazione di layout WordPress, tra cui una libreria di layout. Ci sono molte opzioni di personalizzazione nel costruttore visuale e non è necessario modificare alcun codice.
• Thrive Architect è un costruttore di pagine potente e facile da usare per creare bellissimi layout. Viene fornito con oltre 352 modelli e molte opzioni di personalizzazione. È possibile utilizzare il suo costruttore visuale front-end per modificare qualsiasi elemento della pagina. Per maggiori dettagli, consultate la nostra recensione di Thrive Architect.
• Beaver Builder è un altro popolare costruttore di pagine drag-and-drop per WordPress. È facile da usare e si possono impostare facilmente i layout di pagine e post utilizzando Beaver Builder. Offre anche modelli precostituiti per le pagine di destinazione, ma non sono così numerosi come quelli di SeedProd o Divi.

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

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.