Come creare facilmente un tema WordPress personalizzato (senza alcun codice)

Vuoi creare un tema WordPress personalizzato da zero?


In passato, dovevi seguire il codice WordPress e avere una discreta conoscenza del codice per creare un tema WordPress personalizzato. Ma grazie ai nuovi generatori di temi WordPress, ora chiunque può creare un tema WordPress completamente personalizzato entro un’ora (non sono necessarie conoscenze di codifica).

In questo articolo, ti mostreremo come creare facilmente un tema WordPress personalizzato senza scrivere alcun codice.

Creazione di un tema WordPress personalizzato senza scrivere alcun codice

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 gli alti costi 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 personalizzazioni hanno usato una resistenza & rilasciare il builder di pagine WordPress o hanno usato 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 di WordPress hanno reso super facile la creazione di layout di pagina personalizzati con un trascinamento & interfaccia di rilascio, 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.

Diamo un’occhiata a come utilizzare Beaver Themer per creare facilmente un tema WordPress.

Tutorial video

Iscriviti a WPBeginner

Se non ti piace il video o hai bisogno di ulteriori istruzioni, continua a leggere.

Impostazione di Beaver Themer per creare un tema personalizzato

Beaver 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. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

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.

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 navigando verso Aspetto »Personalizza pagina. Da qui, è necessario passare al Layout »Barre laterali linguetta.

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 del castoro veloce

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 ti 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 funzionalità 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. Visitare Beaver Builder »Aggiungi nuovo pagina e fornire un titolo per l’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.

Cambiamo questo.

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 a Beaver Builder »Aggiungi nuovo pagina e fornire 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 un’area 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 più o meno allo 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 singolari

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.

Layout del tema con contenuto

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 nuovo pagina e fornire 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 personalizzato

Beaver Themer ti consente anche di creare layout per altre pagine nella gerarchia dei modelli, ad esempio 404 pagine, parti di modelli, pagina dei risultati di ricerca e altro.

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 è veramente il metodo di sviluppo del tema WordPress più adatto ai principianti esistente.

Speriamo che questo articolo ti abbia aiutato a imparare come creare un tema WordPress personalizzato senza imparare a programmare. Potresti anche consultare la nostra guida su come velocizzare il tuo sito Web WordPress per una migliore esperienza SEO e utente.

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