Come Creare un Tema con Beaver Themer

Creazione di un tema WordPress personalizzato per principianti

A differenza dei siti HTML statici, i temi WordPress sono un insieme di file modello scritti in PHP, HTML, CSS e JavaScript. In genere, devi avere una buona conoscenza di tutti questi linguaggi di web design o assumere uno sviluppatore web per creare un tema WordPress personalizzato.

Se hai assunto uno sviluppatore o un’agenzia, il costo di un tema WordPress personalizzato può raggiungere migliaia di dollari.

Poiché molti proprietari di piccole imprese non potevano permettersi i costi elevati di un tema WordPress personalizzato, molti di loro si sono semplicemente accontentati dei temi predefiniti forniti con WordPress.

Coloro che non volevano accontentarsi e desideravano le personalizzazioni o utilizzavano un builder di pagine WordPress con trascinamento della selezione, oppure utilizzavano un framework di temi per creare un tema personalizzato.

Mentre i framework di temi WordPress hanno semplificato la costruzione di un tema WordPress, sono una soluzione per gli sviluppatori, non un proprietario medio di siti Web.

D’altra parte, i plug-in del generatore di pagine WordPress hanno reso super facile la creazione di layout di pagina personalizzati utilizzando un’interfaccia di trascinamento della selezione, ma erano limitati ai soli layout. Non è stato possibile creare temi personalizzati con esso.

Fino a Beaver Builder, uno dei migliori plugin per la creazione di pagine WordPress ha deciso di risolvere questo problema con il suo componente aggiuntivo chiamato Beaver Themer.

Beaver Builder miglior plug-in per la creazione di pagine di WordPress

Beaver Themer è un componente aggiuntivo per la creazione di siti che consente di creare layout di temi personalizzati utilizzando un’interfaccia di trascinamento della selezione e senza imparare a programmare.

Impostazione di Beaver Themer per creare un tema personalizzatoBeaver Themer è un plug-in aggiuntivo per Beaver Builder, quindi per questo articolo avrai bisogno di entrambi i plug-in.

Innanzitutto, è necessario installare e attivare i plug-in Beaver Builder e Beaver Themer.

Beaver Themer ti consente di creare un tema personalizzato, ma per iniziare avrai comunque bisogno di un tema. Ti consigliamo di utilizzare un tema leggero che includa un modello di pagina a larghezza intera che funga da tema iniziale.

Puoi trovare molti di questi temi nella directory dei temi di WordPress.org. La maggior parte dei temi WordPress moderni include un modello a larghezza intera. Le nostre scelte migliori sono:

Astra – Un tema WordPress per tutti gli usi leggero e leggero che viene fornito con il supporto integrato per Beaver Builder.OeanWP – Un altro popolare tema WordPress multiuso gratuito che viene fornito con il supporto per la creazione di pagine complete.Temi di StudioPress – Tutti i loro temi sono compatibili con Beaver Builder e funzionerebbero alla grande con Beaver Themer.Per il bene di questo tutorial, useremo Astra, che è leggero e facile da personalizzare il tema WordPress.

Come Creare un Tema con Beaver Themer

Impostazione del tema per Beaver Themer

Quando crei un tema WordPress personalizzato con Beaver Themer, è importante assicurarsi che Beaver Themer abbia accesso a tutto il corpo della pagina (da un bordo all’altro).

Questo è il layout predefinito di Astra. Come puoi vedere, questo layout include una barra laterale con cui può essere difficile lavorare con Beaver Themer.

Layout del tema predefinito con una barra laterale

Puoi cambiarlo visitando il pannello di amministrazione del tuo sito web e poi vai alla pagina Aspetto »Personalizza. Da qui, è necessario passare alla scheda Layout »Barre laterali.
Disattiva le barre laterali nel tuo tema
Una volta lì, seleziona semplicemente “Nessuna barra laterale” sotto l’opzione di layout predefinita e fai clic sul pulsante Pubblica per salvare le modifiche.
Il tema ora inizierà a utilizzare un layout senza barre laterali. Questo è il miglior layout da usare con Beaver Themer.
Layout del tema senza barre laterali
Questo layout a pagina intera consente a Beaver Themer di utilizzare ogni pollice dello schermo, in modo da poter creare una bella esperienza visiva end-to-end.
La maggior parte dei temi WordPress include un file modello per pagine a larghezza intera. Se stai usando qualche altro tema, potresti trovare un’opzione per rimuovere le barre laterali nelle impostazioni del tema.
Se non riesci a trovarlo, contatta lo sviluppatore del tema e potrebbero essere in grado di aiutarti.
Dopo aver impostato il tema su un layout a tutta larghezza, sei pronto per creare il tuo tema WordPress personalizzato utilizzando Beaver Themer.

Fondamenti di Themer

Beaver Themer funziona in cima a Beaver Builder. Come plug-in di page builder, Beaver Builder ti consente di trascinare e rilasciare elementi su una pagina per creare layout personalizzati.
Ha i seguenti elementi che è possibile utilizzare nei layout:
Modello: una raccolta di righe di colonne e moduli che compongono un intero layout di pagina.Colonne: moduli di layout verticali che aiutano ad allineare il contenuto in orizzontale.

Righe: raccolta orizzontale di più moduli

Modulo: un elemento che genera informazioni specifiche come titolo, blocco di testo, tabella, galleria, ecc.Basta modificare una pagina in Beaver Builder e quindi fare clic sul pulsante Aggiungi nell’angolo in alto a destra. Puoi quindi trascinare e rilasciare colonne, righe, moduli sulla tua pagina e iniziare a modificarli immediatamente.

Utilizzando Beaver Builder
Se non si desidera iniziare da zero, selezionare da un elenco di modelli predefiniti per iniziare.

Modelli di Beaver Builder

Beaver Builder ti consente anche di salvare i tuoi layout e di usarli in seguito come modelli.
Per saperne di più consulta il nostro articolo su come creare un layout di pagina personalizzato utilizzando Beaver Builder.
Tuttavia, non vogliamo solo creare layout di pagina. Vogliamo creare un tema personalizzato completo.
Questo è quando arriva Beaver Themer.
Aggiunge un altro oggetto a Beaver Builder chiamato “Layout dei temi”.

Layout dei temi

I layout tematici consentono di creare layout personalizzati per intestazione, piè di pagina, aree di contenuto, pagina 404 e altre parti del modello.
Questi sono i mattoni di tutti i temi di WordPress e utilizzandoli sarai in grado di creare un tema personalizzato adatto alle tue esigenze.

Utilizzo dei modelli di temi Beaver per creare un tema WordPress personalizzato

Nelle seguenti istruzioni, ti guideremo attraverso i passaggi necessari per creare gli elementi del tema personalizzato più popolari. Al termine, avrai completamente trasformato il tema di base in un tema figlio di WordPress completamente personalizzato.

Costruire un’intestazione personalizzata per il tuo tema

Cominciamo con l’area dell’intestazione del tuo sito web. Un’intestazione personalizzata è un componente essenziale di un tema e costruirne uno può essere complicato usando i metodi tradizionali.
Fortunatamente, Beaver Themer ha funzioni di intestazione integrate. Puoi utilizzare il modello pre-creato o utilizzare i menu e i moduli immagine con un layout a due colonne.
Per arrivare a quest’area di intestazione, per prima cosa, dobbiamo impostare un layout di intestazione in Beaver Themer. Visita Beaver Builder »Aggiungi nuova pagina e inserisci un titolo per la tua intestazione.
Creazione di un layout di intestazione personalizzato
Successivamente, seleziona “Layout tematico” come tipo e “Intestazione” come opzione di layout. Una volta terminato, fai clic sul pulsante “Aggiungi layout tematico” per continuare.
Questo ti porterà alla pagina delle impostazioni del layout. Da qui devi selezionare “Intero sito” come posizione in cui verrà visualizzato il modello di intestazione.

Impostazioni di Layout

Successivamente, fai clic sul pulsante “Avvia Beaver Builder” per aprire l’interfaccia del builder.
Beaver Builder verrà avviato con una colonna singola di base e un layout di intestazione a due righe come punto di partenza.

Layout dell’intestazione

Puoi utilizzare gli stessi strumenti di trascinamento della selezione di Beaver Builder per modificare lo sfondo, i colori, il testo, ecc. Puoi anche aggiungere altri moduli, caricare modelli prefabbricati e aggiungere righe / colonne facendo clic sul pulsante Aggiungi in alto a destra angolo.
Una volta che sei soddisfatto del design, fai clic sul pulsante Fine per salvare o pubblicare il layout.
Ora puoi visitare il tuo sito Web per vedere l’intestazione del tema personalizzato in azione. Come puoi vedere, abbiamo applicato il layout dell’intestazione al nostro tema personalizzato.

Intestazione personalizzata nel tema personalizzato

A parte l’intestazione, non mostrerai ancora alcun contenuto e probabilmente vedrai l’area a piè di pagina del tema di base.

Costruire un piè di pagina personalizzato per il tuo tema

Puoi creare un piè di pagina personalizzato per il tuo tema usando Beaver Themer proprio come hai creato un’intestazione personalizzata.
Vai su Beaver Builder »Aggiungi nuova pagina e fornisci un titolo per il layout del piè di pagina. Successivamente, seleziona “Layout tematico” come tipo e “Piè di pagina” come opzione di layout.

Layout piè di pagina

Fai clic sul pulsante “Aggiungi layout tematico” per continuare.
Questo ti porterà alla pagina delle impostazioni del layout. Da qui devi selezionare “Intero sito” come posizione in cui verrà visualizzato il modello.
Impostazioni layout piè di pagina
Successivamente, fai clic sul pulsante “Avvia Beaver Builder” per aprire l’interfaccia del builder.
Beaver Builder verrà avviato con un layout a piè di pagina utilizzando tre colonne. È possibile utilizzare questo layout come punto di partenza e iniziare la modifica.
Modifica del layout del piè di pagina
Puoi aggiungere moduli, blocchi di testo o qualsiasi altra cosa tu voglia.

Puoi sempre cambiare colori, caratteri, aggiungere un’immagine di sfondo e altro.
Una volta che sei soddisfatto del design, fai clic sul pulsante Fine per salvare o pubblicare il layout.

Creazione di aree di contenuto per posta e pagine

Ora che abbiamo creato intestazioni e piè di pagina per ogni pagina e post sul sito Web, è tempo di creare il post o il corpo della pagina (l’area del contenuto).
Inizieremo quasi nello stesso modo in cui abbiamo creato l’intestazione e il piè di pagina aggiungendo il layout “Singolare” nella pagina Aggiungi nuovo.
Creazione di post e layout di pagina
Successivamente, sceglierai dove visualizzare questo layout. Puoi scegliere singolare per usarlo per tutti i singoli post e pagine, oppure puoi scegliere post o solo le pagine.

Impostazioni di layout singole post e Pagine

Successivamente, fai clic sul pulsante “Avvia Beaver Builder” per aprire l’interfaccia del builder.

Modifica layout singolare

Beaver Builder caricherà un layout singolare di esempio con il titolo di post / pagina in alto, seguito da contenuto, casella bio autore e area commenti.
È possibile puntare e fare clic per modificare uno di questi elementi o aggiungere nuovi moduli, colonne e righe in base alle esigenze.
Una volta che sei soddisfatto del layout, fai clic sul pulsante Fine per salvare e pubblicare le modifiche.
Ora puoi visitare il tuo sito Web per vederlo in azione.

Creazione di layout di archivio per il tuo tema personalizzato

Ora che il tuo tema personalizzato ha iniziato a modellarsi, puoi passare alla creazione di layout per altre parti del tuo sito Web. Le pagine di archivio sono le aree in cui WordPress visualizza categorie, tag, autore e archivi mensili.
Creiamo un layout per le pagine di archivio nel tuo tema personalizzato.
Inizierai visitando Beaver Builder »Aggiungi nuova pagina e fornendo un titolo per il layout dell’archivio.
Creazione di un layout di archivio per il tuo tema personalizzato
Successivamente, seleziona “Layout tematico” come tipo e “Archivia” come opzione di layout. Fai clic sul pulsante “Aggiungi layout tematico” per continuare.
Questo ti porterà alla pagina delle impostazioni del layout. Da qui devi selezionare “Tutti gli archivi” come posizione in cui verrà visualizzato il modello. Puoi anche creare layout separati per ogni singolo tipo di archivio come data, risultati della ricerca, categoria, tag, ecc.

Impostazioni del layout dell’archivio

Successivamente, fai clic sul pulsante “Avvia Beaver Builder” per aprire l’interfaccia del builder.
Beaver Builder verrà avviato con un layout di base dell’archivio a colonna singola. Verrà visualizzato il titolo dell’archivio in alto, seguito dai post.
Modifica del layout degli archivi per il tuo tema
È possibile puntare e fare clic su qualsiasi elemento per modificarne le proprietà. È inoltre possibile aggiungere nuovi moduli, righe e colonne in base alle esigenze.
Successivamente, fai clic sul pulsante “Fine” per salvare e pubblicare le modifiche.

Creazione di altri layout per il tuo tema WordPress personalizzatoBeaver Themer consente inoltre di creare layout per altre pagine nella gerarchia dei modelli, ad esempio 404 pagine, parti di modelli, pagina dei risultati di ricerca e altro ancora.

Utilizzando la funzionalità di trascinamento della selezione integrata di Beaver Builder, puoi creare facilmente il tuo tema WordPress personalizzato da zero senza mai scrivere codice. Questo è davvero il metodo di sviluppo del tema WordPress più adatto ai principianti esistente.

 

 

Chi è l'autore: WP Italia Unofficial
Raccontaci qualcosa di te.

Partecipa!

Unisciti e Partecipa!

E' la Community non Ufficiale di WordPress

Commenti

Ancora nessun commento