Come creare un layout WordPress personalizzato (passo dopo passo)

layout personalizzati, costruttore di castori


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

Indipendentemente dal tuo insieme di competenze, è facile creare un layout WordPress personalizzato senza dover assumere uno sviluppatore.

In questo articolo, ti mostreremo come creare un layout WordPress personalizzato utilizzando un noto plug-in per la creazione di pagine WordPress, Beaver Builder.

Molti di voi devono chiedersi, perché creare un layout personalizzato quando si può semplicemente scegliere un tema premium e dare il via alla propria pagina con uno dei suoi layout predefiniti.

Perché creare layout personalizzati di WordPress

Troverai una serie di temi WordPress di alta qualità che offrono diversi splendidi layout integrati, che sono pronti per essere utilizzati immediatamente. Puoi sicuramente optare per questi splendidi layout e dare al tuo sito un aspetto accattivante.

Ma il problema con tali layout è che, a causa della sua 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 dare un aspetto distinto a meno che non lo personalizzi molto. Inoltre, questi layout potrebbero non soddisfare i tuoi requisiti. La creazione di un layout personalizzato è l’opzione migliore in questi casi.

Creazione di un layout WordPress personalizzato

Il modo migliore per creare layout personalizzati visivamente sbalorditivi per il tuo sito è utilizzare il plug-in Beaver Builder. Beaver Builder è un popolare plug-in di trascinamento della selezione del generatore di pagine che ti consente di creare alcuni dei layout più straordinari in pochi minuti.

Beaver Builder

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

Colori, testi, caratteri, 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 plug-in di page builder, è completamente adatto ai principianti e non devi passare ore a capire come usarlo. Inoltre, offre anche decine di modelli visivamente sbalorditivi per aiutarti a iniziare.

Controlla qui la recensione di Beaver Builder outour. Vediamo ora come creare i layout personalizzati utilizzando questo plug-in.

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 plug-in andando sul sito di Beaver Builder. Una volta attivato, vai a Impostazioni »Page Builder.

Impostazioni di Beaver Builder

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

Passaggio 2: creazione del primo layout personalizzato

Per creare il tuo primo layout personalizzato, vai a Tutte le pagine »Aggiungi nuovo sulla dashboard di WordPress. Sul tuo editor di testo, avrai un’opzione per passare al generatore di pagine.

Basta fare clic su questa opzione e vedrai lanciata la scheda del generatore di pagine. Vedrai diverse opzioni di modello qui. Quindi seleziona quello che ti piace di più per il tuo layout. Puoi anche fare clic sulla freccia del menu a discesa e selezionare il tipo di layout desiderato. Questo può essere per le tue landing page o le tue pagine di contenuti.

Una volta fatto, verrai indirizzato al suo builder drag and drop. Per modificare un determinato campo, devi solo passare il mouse sopra quell’area specifica e quindi fare clic su di esso 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 su Layout di riga schede. Quindi trascina il numero di colonne che desideri e rilascialo nel tuo visual builder.

Una volta aggiunte le colonne, fai clic su di esse e personalizzale in base alle 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 successivo. Per questo, basta fare clic su Salva pulsante alla fine del popup.

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

Devi semplicemente trascinare gli elementi da destra e rilasciarli nel visual builder alla tua sinistra. Ognuno di questi elementi è personalizzabile. Ad esempio, se si desidera aggiungere una nuova intestazione, fare clic su Intestazione e trascinalo nel layout. Successivamente, fai clic sull’elemento Titolo per personalizzarlo.

Avrai 3 diverse schede qui. Generale, Stile e Avanzamento. Il primo ti consente di aggiungere testi, collegamenti, ecc. Ai titoli. La seconda scheda ti consente di modellare la tua intestazione con colori, caratteri, ecc. Diversi Avanzate L’opzione ti consente di lavorare su margini, visibilità, reattività, animazione, ecc.

Puoi aggiungere tutti gli elementi e i moduli che desideri utilizzando lo stesso metodo e quindi personalizzarlo per soddisfare le tue esigenze.

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

beaver builder salva layout

Usando queste opzioni puoi salvare la tua bozza, pubblicarla o scartarla.

Passaggio 3: riutilizzo del layout

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

strumenti per la creazione di castori

Ora, a seconda delle tue esigenze, seleziona l’opzione. Se si desidera utilizzare il modello per un utilizzo successivo, fare clic su Salva modello opzione e quindi denominare il layout. Dopo che ha colpito il Salva pulsante.

i layout di wordpress salvano il tempate

Passaggio 4: gestione dei modelli

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

Per impostazione predefinita, questa opzione è nascosta. Puoi renderlo visibile andando a Impostazioni »Page Builder» Modelli linguetta.

Ora fai clic su Abilita amministratore modelli e premi il tasto Salva impostazioni modello pulsante. In questo modo, noterai una nuova voce di menu denominata Modelli che appare nella barra di amministrazione di WordPress. Tutti i layout di pagina salvati come modello appariranno su quella pagina.

Esportazione dei layout di WordPress

Poiché i layout creati vengono salvati come tipo di post personalizzato, è possibile esportare facilmente i modelli di Beaver Builder. Per questo, hai la funzione di esportazione integrata in WordPress. Per utilizzare questa funzione vai a Strumenti »Esporta pagina.

esportazione layout wordpress

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

Importazione di layout di Beaver Builder

Per importare un layout, vai alla dashboard del sito Web in cui desideri importare questo layout. Adesso vai a Impostazioni »Importa» WordPress. Fai clic sull’opzione Installa ora nella scheda WordPress. Questo scaricherà e installerà il plug-in importatore di WordPress.

Una volta scaricato il plug-in, puoi caricare il file XML che hai appena scaricato. Il layout è ora pronto per essere utilizzato anche su un altro sito.

E questo è tutto. Speriamo che il nostro articolo ti sia piaciuto. In tal caso, potresti anche voler conoscere alcune delle altre alternative di Beaver Builder che puoi provare.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map