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 per page builder di 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 tua pagina con uno dei suoi layout predefiniti.

Perché Creare Layout Personalizzati di WordPress

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

Ma il problema con tali layout è che, data la 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 le tue esigenze. Creare un layout personalizzato è l'opzione migliore in questi casi.

Se scegli di utilizzare Gutenberg (editor a blocchi), non otterrai 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 Personalizzato di WordPress 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 apportare modifiche alla cieca solo per vedere un'anteprima e renderti conto che non funziona.

SeedProd è senza dubbio il modo numero 1 per creare layout personalizzati per WordPress. 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 evidenza stock 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 tuo modello di pagina personalizzato, puoi semplicemente selezionare qualsiasi blog 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 a sinistra e posizionalo dove desideri nel tuo design, così:

Vedrai blocchi predefiniti da aggiungere:

• Post
• Titolo del Post
• Contenuto del Post
• Estratto del Post
• Bio Autore del Post
• Commenti
• Logo del Sito
• Navigazione Post

...e altro ancora. Vedrai anche blocchi per aggiungere testo, spaziatura, immagini, pulsanti, colonne, moduli di contatto, contatori 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 di 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 da 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.

Per cambiare 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 dei layout tra cui scegliere.

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

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, call to action, FAQ, piè di pagina già pronti e molto altro.

Puoi scegliere blocchi di contenuto a larghezza intera o sceglierne uno con un layout predefinito. Usando 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 responsive. Puoi persino usare 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 facilissimo creare layout diversi per il tuo sito.

Inoltre, puoi continuare a creare nuovi post 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 »

Creare 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, è completamente intuitivo per i principianti e non devi passare ore a capire come usarlo. Inoltre, offre dozzine di modelli 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 dashboard 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 e 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 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: Riutilizzare il tuo layout

Beaver Builder ti consente anche di salvare il tuo layout personalizzato di WordPress 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 modello per un uso futuro, fai clic sull'opzione Salva modello e quindi assegna un nome al tuo layout. Dopodiché, premi il pulsante Salva.

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

Passaggio 4: Gestire i tuoi modelli

I layout che crei con Beaver Builder possono essere utilizzati su siti Web illimitati. I modelli creati dai suoi utenti sono archiviati in un tipo di post personalizzato chiamato modelli.

Per impostazione predefinita, questa opzione è nascosta. Puoi renderla visibile andando su Impostazioni » Page Builder » Modelli.

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

Esportare i tuoi layout WordPress

Poiché i layout che crei sono salvati come tipo di post personalizzato, puoi facilmente esportare i tuoi modelli Beaver Builder. Per questo, hai la funzionalità di esportazione integrata in WordPress. Per utilizzare questa funzionalità, vai su Strumenti » Pagina di esportazione.

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

Importare 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 importer 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 altri codici. Speriamo che il nostro tutorial ti sia piaciuto.

Se ti è piaciuto, potresti anche voler conoscere alcune delle altre alternative a Beaver Builder che puoi provare.