Come Creare un Layout WordPress Personalizzato (Passo dopo Passo)

Vuoi creare layout WordPress personalizzati per il tuo sito web per dargli un aspetto unico?

Indipendentemente dalle tue competenze, è facile creare un layout WordPress personalizzato senza dover assumere uno sviluppatore.

In questo articolo, ti mostreremo come creare un layout WordPress personalizzato utilizzando il miglior plugin page builder per WordPress, SeedProd. Ti mostreremo anche come farlo usando Beaver Builder.

Molti di voi si staranno chiedendo, perché creare un layout personalizzato quando si può semplicemente scegliere un tema premium e iniziare la pagina con uno dei suoi layout predefiniti.

Perché Creare Layout WordPress Personalizzati

Troverai un certo numero di temi WordPress premium che offrono diversi splendidi layout integrati, pronti per essere utilizzati subito. Puoi sicuramente optare per questi bellissimi layout e dare al tuo sito un aspetto accattivante.

Ma il problema con tali layout è che, a causa della loro pronta disponibilità, sono ampiamente utilizzati da centinaia e migliaia di utenti sul web.

Ciò significa che se stai utilizzando un layout predefinito per il tuo sito WordPress, non sarai in grado di dargli un aspetto distinto a meno che tu non lo personalizzi molto. Inoltre, questi layout potrebbero non soddisfare nemmeno le tue esigenze. Creare un layout personalizzato è l'opzione migliore in questi casi.

Se scegli di utilizzare Gutenberg (editor a blocchi), non avrai la facilità e la libertà di progettare il tuo sito come desideri. Potrebbe essere necessario aggiungere il tuo CSS per migliorare i tuoi modelli di post singoli personalizzati.

Creare un Layout WordPress Personalizzato con SeedProd

Il modo migliore per creare layout personalizzati visivamente accattivanti per il tuo sito web WordPress è utilizzare il builder SeedProd.

SeedProd è facile da usare per i principianti e ti dà la possibilità di modificare il front-end del tuo sito web visivamente. Non dovrai mai usare il codice o fare modifiche alla cieca solo per vedere un'anteprima e renderti conto che non funziona.

SeedProd è senza dubbio il modo n. 1 per creare layout WordPress personalizzati. Puoi leggere di più su questo plugin qui: Recensione di SeedProd.

Per creare un layout personalizzato per il tuo sito, dovrai installare e attivare SeedProd sul tuo sito.

Quindi vai al tuo pannello wp-admin e vedrai SeedProd nella barra delle attività a sinistra.

Questo ti permetterà di accedere alla dashboard di SeedProd. All'interno, puoi scegliere di utilizzare un kit di temi predefinito o creare singole landing page. Per questo tutorial, selezioneremo Theme Builder » Theme Template Kits.

Ora vedrai una libreria di kit tra cui scegliere. Questi kit sono dotati di immagini in primo piano e contenuti fittizi che puoi modificare rapidamente per renderli tuoi.

Una volta scelto un kit, tutte le pagine e i post del kit verranno importati e pubblicati sul tuo sito. Puoi usarlo per creare modelli per le tue pagine e i tuoi post.

Per personalizzare il layout del post, seleziona Edit Design sotto Single Post.

Ora si aprirà il builder visivo drag and drop dove vedrai un'anteprima live della tua pagina insieme alle opzioni di personalizzazione per modificarla.

Per apportare modifiche al modello della tua pagina personalizzata, puoi semplicemente selezionare un blog qualsiasi e otterrai opzioni per modificare il contenuto, la tipografia, il colore, lo sfondo e altro ancora. Per aggiungere nuovi blocchi, trascina semplicemente un blocco dal menu di sinistra e posizionalo dove desideri nel tuo design, in questo modo:

Vedrai blocchi predefiniti da aggiungere:

• Articoli
• Titolo del Post
• Contenuto del post
• Estratto del Post
• Bio autore post
• Commenti
• Logo sito
• Navigazione post

...e altro ancora. Vedrai anche blocchi per aggiungere testo, spaziatura, immagini, pulsanti, colonne, moduli di contatto, timer per il conto alla rovescia, omaggi e altri widget.

SeedProd si integra anche con WooCommerce, quindi puoi aggiungere campi personalizzati come griglie di prodotti, pulsanti aggiungi al carrello e checkout e molto altro.

Fondamentalmente, hai il pieno controllo su ogni nuovo post che pubblichi sul tuo blog WordPress.

SeedProd è così facile da usare che, anche per un principiante, non c'è molto da imparare.

Ti mostreremo le basi e potrai esplorare le funzionalità avanzate da solo. Quando selezioni un blocco, vedrai che è evidenziato in arancione. Quindi vedrai apparire un menu sopra il blocco dove puoi cambiarne la posizione, eliminarlo, duplicarlo e altro ancora.

Per modificare o eliminare un'intera riga, puoi selezionare la riga e la vedrai evidenziata in viola.

In questo modo, puoi evidenziare la riga e usare il simbolo Più per aggiungere una nuova riga. Vedrai layout tra cui scegliere.

Quindi puoi selezionare l'icona di navigazione per trascinarla e rilasciarla in un'altra area della pagina. Per riordinare righe e blocchi, tutto ciò che devi fare è afferrarli e spostarli dove desideri.

SeedProd viene fornito con sezioni e blocchi intelligenti che puoi aggiungere alla tua pagina. Nel menu di sinistra, seleziona la scheda 'Sezioni'. Qui troverai intestazioni, chiamate all'azione, FAQ, piè di pagina predefiniti e molto altro.

Puoi scegliere blocchi di contenuto a larghezza intera o sceglierne uno con un layout predefinito. Utilizzando queste funzionalità, puoi creare un layout personalizzato per il tuo sito in pochissimo tempo. Puoi anche aggiungere un nome al modello e salvarlo per un uso futuro.

I design sono automaticamente reattivi. Puoi persino utilizzare l'anteprima mobile per assicurarti che il design del tuo sito sia bello sui dispositivi mobili.

Ecco fatto! È davvero così semplice creare un layout personalizzato per il tuo sito web con SeedProd.

SeedProd è senza dubbio l'opzione migliore per creare un layout WordPress personalizzato. Ottieni modelli di post semplici predefiniti che rendono così facile creare layout diversi per il tuo sito.

Inoltre, puoi continuare a creare nuovi post di WordPress utilizzando questo modello che hai creato.

Esiste una versione gratuita di SeedProd nel repository dei plugin di WordPress. La versione pro ti dà accesso a fantastiche funzionalità per il tuo sito.

Inizia con SeedProd »

Creazione di un layout WordPress personalizzato con Beaver Builder

Il plugin Beaver Builder è un popolare plugin per la creazione di pagine drag and drop che ti consente di creare alcuni dei layout più straordinari per il tuo blog WordPress in pochi minuti.

La cosa migliore di questo plugin è il livello di flessibilità che offre. Puoi prendere il controllo di quasi tutto.

Colori, testi, font, immagini: tutto può essere completamente personalizzato per ottenere l'aspetto esatto che hai sempre sognato.

Un'altra cosa che amerai di Beaver Builder è che, a differenza di qualsiasi altro plugin per la creazione di pagine, è estremamente intuitivo per i principianti e non dovrai passare ore a capire come usarlo. Inoltre, offre anche decine di template visivamente accattivanti per aiutarti a iniziare.

Dai un'occhiata alla nostra recensione di Beaver Builder qui. Vediamo ora come creare i tuoi layout personalizzati utilizzando questo plugin.

Passaggio 1: Installazione e configurazione di Beaver Builder in WordPress

Il primo passo è installare e attivare Beaver Builder sul tuo sito web. Puoi scaricare il plugin andando sul sito di Beaver Builder. Una volta attivato, vai su Impostazioni » Page Builder.

Qui puoi inserire la chiave di licenza per abilitare il supporto e ricevere aggiornamenti. Una volta fatto, sei pronto per creare il tuo primo layout personalizzato.

Passo 2: Creazione del tuo primo layout personalizzato

Per creare il tuo primo layout personalizzato, vai su Tutte le pagine » Aggiungi nuova nella tua bacheca di WordPress. Sul tuo editor di testo, avrai un'opzione per passare al page builder.

Basta fare clic su questa opzione e vedrai la scheda del page builder avviarsi. Vedrai diverse opzioni di template qui. Quindi seleziona quella che ti piace di più per il tuo layout. Puoi anche fare clic sulla freccia a discesa e selezionare il tipo di layout che desideri. Questo può essere per le tue landing page o le tue pagine di contenuto.

Una volta fatto, verrai indirizzato al suo builder drag and drop. Per modificare un campo particolare, devi semplicemente passare il mouse sopra quell'area specifica, quindi fare clic su di essa e iniziare a personalizzare il tuo design.

Puoi aggiungere fino a 6 colonne, barre laterali, audio, immagini, separatori e altro ai tuoi layout. Per aggiungere righe e barre laterali, fai clic sulle schede Layout righe. Quindi trascina il numero di colonne che desideri e rilascialo nel tuo visual builder.

Questo ti permette di organizzare la gerarchia del tuo template.

Una volta aggiunte le tue colonne, fai semplicemente clic su di esse e personalizzale per soddisfare le tue esigenze. Puoi cambiare lo sfondo, il colore del testo, aggiungere collegamenti, testi, bordi e altro alle tue colonne. Queste colonne e righe possono anche essere salvate per un uso futuro. Per fare ciò, fai semplicemente clic sul pulsante Salva alla fine del popup.

Per altri elementi, devi utilizzare l'opzione Moduli di base. Hai anche diversi altri elementi che puoi aggiungere al tuo layout come pulsanti, fisarmoniche, tabelle prezzi, mappe, timer per il conto alla rovescia e molto altro.

Devi semplicemente trascinare gli elementi da destra e rilasciarli nel visual builder sulla sinistra. Ognuno di questi elementi è personalizzabile. Quindi, ad esempio, se vuoi aggiungere un nuovo titolo, fai semplicemente clic su Titolo e trascinalo e rilascialo nel tuo layout. Dopo aver fatto clic sull'elemento Titolo per personalizzarlo.

Avrai 3 schede diverse qui. Generale, Stile e Avanzate. La prima ti permette di aggiungere testi, collegamenti, ecc. ai tuoi titoli. La seconda scheda ti permette di stilizzare il tuo titolo con colori, font, ecc. diversi. L'opzione Avanzate ti permette di lavorare su margini, visibilità, reattività, animazione, ecc.

Puoi aggiungere quanti elementi e moduli desideri utilizzando lo stesso metodo e quindi personalizzarli per soddisfare le tue esigenze. I menu a discesa qui rendono molto facile farlo.

Dopo aver modificato i tuoi layout, fai clic sul pulsante Fatto nell'angolo in alto a destra dello schermo. Vedrai un nuovo popup con diverse opzioni come quelle mostrate nello screenshot qui sotto.

Utilizzando queste opzioni puoi salvare la bozza, pubblicarla o scartarla.

Passaggio 3: Riutilizzo del tuo layout

Beaver Builder ti consente anche di salvare il tuo layout WordPress personalizzato e riutilizzarlo ogni volta che vuoi. Per utilizzare questa opzione, vai su Strumenti nell'angolo in alto a destra dello schermo. Vedrai le seguenti opzioni sullo schermo.

Ora, a seconda delle tue esigenze, seleziona l'opzione. Se desideri utilizzare il template per un uso futuro, fai clic sull'opzione Salva template e quindi assegna un nome al tuo layout. Dopodiché premi il pulsante Salva.

Il tuo nuovo file template è salvato e pronto per l'uso futuro in qualsiasi momento.

Passaggio 4: Gestione dei tuoi template

I layout che crei con Beaver Builder possono essere utilizzati su siti web illimitati. I template creati dai suoi utenti sono memorizzati in un custom post type chiamato template.

Per impostazione predefinita, questa opzione è nascosta. Puoi renderla visibile andando alla scheda Impostazioni » Page Builder » Template.

Ora fai clic sull'opzione Abilita amministrazione template e premi il pulsante Salva impostazioni template. Dopo averlo fatto, noterai una nuova voce di menu chiamata Template apparire nella tua barra di amministrazione di WordPress. Tutti i layout di pagina che salvi come template appariranno in quella pagina.

Esportazione dei tuoi layout WordPress

Poiché i layout che crei sono salvati come custom post type, puoi facilmente esportare i tuoi template Beaver Builder. Per questo, hai la funzionalità di esportazione integrata in WordPress. Per utilizzare questa funzionalità vai alla pagina Strumenti » Esporta.

Ora seleziona Template. Fai clic sulla freccia a discesa e seleziona il template che desideri esportare. Dopodiché, premi il pulsante Scarica file di esportazione e WordPress ti invierà un file XML da scaricare.

Importazione di layout Beaver Builder

Per importare un layout, vai alla dashboard del sito web in cui desideri importare questo layout. Ora vai su Impostazioni » Importa » WordPress. Fai clic sull'opzione Installa ora sotto la scheda WordPress. Questo scaricherà e installerà il plugin di importazione di WordPress.

Una volta scaricato il plugin, puoi caricare il file XML che hai appena scaricato. Il tuo layout è ora pronto per essere utilizzato anche sul tuo altro sito.

E questo è tutto. Ora puoi creare layout di post personalizzati in pochissimo tempo senza mai toccare file PHP, HTML e altro codice. Speriamo che la nostra guida ti sia piaciuta.

Se l'hai fatto, potresti anche voler conoscere alcune delle altre alternative a Beaver Builder che puoi provare.