Vuoi creare un tema WordPress personalizzato da zero?
In passato, era necessario seguire tutorial complicati su WordPress e avere una discreta conoscenza del codice per creare un tema WordPress personalizzato. Ma grazie ai nuovi costruttori di temi WordPress, ora puoi crearne facilmente uno senza imparare alcuna competenza di programmazione.
In questo articolo, ti mostreremo come creare facilmente un tema WordPress personalizzato senza scrivere alcun codice.
Ecco l'elenco degli argomenti che tratteremo in questo articolo.
- Creare un Tema WordPress Personalizzato per Principianti
- Creare un Tema Personalizzato con SeedProd Theme Builder
- Modificare un Tema con SeedProd Theme Builder
- Modificare il Design del Tuo Tema per Tutto il Sito
- Applicare e Pubblicare il Tuo Tema WordPress Personalizzato
- Creare Altri Layout per il Tuo Tema WordPress Personalizzato
Pronto? Iniziamo.
Tutorial video
Se preferisci istruzioni scritte, continua a leggere.
Creare un Tema WordPress Personalizzato per Principianti
Un sito web WordPress utilizza un tema per il layout e il design del sito. Questi temi sono composti da file di template scritti in PHP, HTML, CSS e JavaScript.
Tipicamente, dovresti avere una discreta comprensione 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, allora il costo di un tema WordPress personalizzato può raggiungere migliaia di euro.
Poiché molti piccoli imprenditori non potevano permettersi gli alti costi di un tema WordPress personalizzato, molti di loro si accontentavano dei temi predefiniti. Coloro che non volevano accontentarsi utilizzavano un page builder di WordPress o un theme framework per creare un tema personalizzato.
Mentre i theme framework di WordPress rendevano più facile la creazione di un tema WordPress, erano una soluzione per gli sviluppatori, non per il proprietario medio di un sito web.
D'altra parte, i plugin page builder di WordPress rendevano super facile creare layout di pagina personalizzati utilizzando un'interfaccia drag & drop, ma erano limitati solo ai layout di singola pagina. Non potevi creare temi personalizzati con loro.
È qui che entra in gioco SeedProd.
È il miglior plugin per la creazione di temi WordPress che ti permette di creare facilmente un tema WordPress personalizzato senza scrivere codice.
SeedProd è un page builder di WordPress drag and drop per aziende, blogger e proprietari di siti web. Ora include anche un nuovo designer di temi personalizzati che ti permette di fare clic e trascinare per modificare qualsiasi elemento.
Puoi anche aggiungere elementi di design comunemente usati al tuo tema con il drag and drop.
La cosa migliore del theme builder SeedProd è che è agnostico rispetto al tema. Ciò significa che non si basa sul tuo tema WordPress esistente per lo stile o la funzionalità, dandoti completa libertà e controllo sul design del tuo sito web.
Se stai cercando un'alternativa, puoi anche creare facilmente un tema WordPress personalizzato con il plugin Thrive Theme Builder.
Detto questo, diamo un'occhiata a come creare il tuo tema WordPress personalizzato senza scrivere codice utilizzando SeedProd.
Creare un Tema Personalizzato con SeedProd Theme Builder
La configurazione del costruttore di temi SeedProd è piuttosto semplice, poiché funziona con qualsiasi sito web WordPress utilizzando qualsiasi tema.
Per prima cosa devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Nota: Avrai bisogno almeno del piano Pro o Elite per sbloccare il costruttore di temi.
Dopo l'attivazione, vai alla pagina SeedProd » Impostazioni per inserire la chiave di licenza del tuo plugin. Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd.
Dopo aver inserito la tua chiave di licenza, sei pronto per creare il tuo tema WordPress personalizzato utilizzando il tema builder di SeedProd.
Creare il tuo tema WordPress personalizzato con SeedProd è piuttosto semplice.
Innanzitutto, devi accedere alla pagina SeedProd » Theme Builder. Qui vedrai l'elenco dei modelli per il tuo tema personalizzato SeedProd corrente. Poiché non abbiamo ancora iniziato, abbiamo solo un modello CSS globale. Ti mostreremo come usarlo più avanti nel tutorial.
Per iniziare, hai due opzioni.
- Utilizza uno dei temi SeedProd già pronti come punto di partenza
- Crea manualmente i modelli del tema da zero
Diamo un'occhiata a come funzionano queste opzioni.
1. Iniziare con un tema già pronto (Consigliato)
Ti consigliamo di iniziare con un tema esistente. Questo consente a SeedProd di generare automaticamente tutti i file di modello. Questi sono temi completi progettati professionalmente, il che ti dà un vantaggio nell'editing dei modelli in base alle tue esigenze.
Fai semplicemente clic sul pulsante Temi e scegli uno dei temi disponibili. Ci sono temi diversi per diversi tipi di siti Web, quindi puoi sceglierne uno che meglio si adatta alle tue esigenze.
Non preoccuparti troppo del design e del layout in questo momento. Tutti questi temi sono completamente modificabili, quindi puoi cambiare ogni aspetto al suo interno nel tema builder.
Una volta scelto un tema, SeedProd genererà tutti i modelli del tema.
Questa è la versione bozza del tuo tema WordPress personalizzato.
Più avanti in questo tutorial, ti mostreremo come modificare questi file del tema per progettare il tuo tema e quindi pubblicare il tuo tema per applicarlo sul tuo sito Web.
2. Crea manualmente i modelli del tema da zero
In alternativa, puoi iniziare il tuo tema da zero facendo clic sul pulsante 'Aggiungi nuovo modello tema'. Dovrai dare un nome al tuo modello e quindi scegliere uno dei tipi di modello per iniziare.
Attualmente, hai la possibilità di scegliere tra i seguenti tipi di modello:
- Intestazione
- Piè di pagina
- Singolo Post
- Singola Pagina
- Archivio
- Risultati della ricerca
- Parte Globale
- Pagina Personalizzata
Puoi anche impostare condizioni per l'utilizzo di un modello. Ad esempio, puoi applicarlo all'intero sito o a una sezione specifica del tuo sito web.
Una volta salvato il modello, SeedProd lo aprirà nell'editor del tema dove potrai iniziare a modificarlo.
Modificare un Tema con SeedProd Theme Builder
Una volta generati i modelli del tuo tema, puoi modificarli utilizzando il Theme Builder di SeedProd.
Fai semplicemente clic sul link Modifica Design sotto un file modello per modificarlo.
Questo aprirà il file modello nell'editor del tema di SeedProd.
Vedrai un'anteprima live del modello nella colonna di destra con un pannello di modifica nella colonna di sinistra.
Per modificare un elemento nel tuo file modello, puoi semplicemente puntare e fare clic per modificarlo.
A seconda del tipo di elemento, vedrai diverse opzioni di modifica nella colonna di sinistra. Potrai cambiare font, colori, sfondo, spaziatura e altro ancora.
Per aggiungere nuovi elementi, puoi aggiungere blocchi SeedProd dalla colonna di sinistra. Viene fornito con una serie di tipi di blocchi che puoi aggiungere al tuo modello.
1. Blocchi di Tag del Modello
I blocchi di tag del modello sono i blocchi dinamici che ti consentono di generare elementi del tema al volo dal tuo database WordPress.
Ad esempio, puoi utilizzare il blocco Post per elencare i tuoi post recenti o il blocco Contenuto Post per visualizzare i contenuti del post o della pagina attualmente visualizzati.
2. Blocchi Standard
Successivamente, hai i tuoi blocchi standard per aggiungere elementi comuni di web design al modello del tuo tema.
Puoi usarli per aggiungere testo, media, pulsanti, colonne, divisori e altro.
3. Altri Blocchi
Altri blocchi avanzati ti consentono di aggiungere moduli di contatto, profili social, pulsanti di condivisione, shortcode WordPress, Google Maps, listini prezzi, contatori alla rovescia e altro.
SeedProd viene fornito anche con una completa integrazione WooCommerce.
Se gestisci un negozio online, puoi utilizzare i blocchi WooCommerce nel tuo tema.
Puoi creare modelli WooCommerce completamente personalizzati con una pagina carrello personalizzata e un'esperienza di checkout.
Utilizzo di Sezioni per Layout di Temi Rapidi
Oltre ai blocchi, puoi anche aggiungere sezioni complete al modello del tuo tema.
Passa semplicemente alla scheda Sezioni nel pannello Design.
Le sezioni sono gruppi di blocchi per diverse aree del design del sito web. Ad esempio, troverai sezioni pronte all'uso per l'intestazione, il piè di pagina, le chiamate all'azione, le funzionalità e altro ancora.
Fai semplicemente clic su una sezione per aggiungerla al tuo modello di tema, quindi modificala in base alle tue esigenze.
Utilizzo del generatore di siti web AI per generare contenuti istantaneamente
SeedProd offre anche un potente generatore di siti web AI che creerà automaticamente contenuti scritti per il tuo modello di tema. Puoi generare istantaneamente titoli accattivanti, descrizioni, inviti all'azione, testo del corpo e altro ancora.
Fai semplicemente clic su qualsiasi blocco Titolo o Testo dal builder di SeedProd per aprire il pannello delle impostazioni sul lato sinistro. Quindi, fai clic sul pulsante 'Genera testo AI'.
Successivamente, digita un prompt nel campo di testo, che è essenzialmente una descrizione di ciò che vuoi che l'assistente AI scriva per te. Oppure, puoi scegliere un prompt suggerito dall'elenco.
Dopodiché, fai clic sul pulsante 'Genera testo'.
In pochi secondi, SeedProd creerà automaticamente i contenuti per te. Da lì, puoi ottimizzare il testo, cambiare il tono e persino tradurre il testo in oltre 50 lingue.
Quando sei soddisfatto del contenuto, fai clic sul pulsante 'Inserisci' per aggiungerlo al tuo modello di tema.
Puoi anche utilizzare l'integrazione DALL-E del generatore di siti web AI per generare automaticamente immagini originali per il tuo tema.
Trascina semplicemente un blocco Immagine sulla tua pagina e fai clic su di esso per aprire il pannello delle impostazioni. Quindi, fai clic sul pulsante ‘Aggiungi con AI’.
Successivamente, digita una descrizione dell'immagine che desideri creare e fai clic sul pulsante ‘Genera immagine’.
Una volta generata l'immagine, SeedProd la visualizzerà. Per aggiungere l'immagine al tuo modello di tema, fai clic sul pulsante ‘Inserisci’.
Puoi anche modificare l'immagine con l'IA, oltre a generare variazioni dell'immagine, in modo che corrisponda esattamente alla visione che avevi in mente.
Salvataggio e pubblicazione del tuo modello
Una volta soddisfatto del design, puoi semplicemente fare clic sul pulsante Salva e selezionare Pubblica per salvare il tuo modello.
Ripeti il processo per modificare altri file del modello con i tuoi contenuti e le tue esigenze di progettazione.
Modificare il Design del Tuo Tema per Tutto il Sito
Durante la modifica dei modelli del tuo tema, vorrai assicurarti che il tuo design sia coerente in tutto il tuo sito web.
Ad esempio, probabilmente vorrai utilizzare lo stesso stile tipografico, dimensioni dei caratteri, colori e altri stili visivi su ogni pagina.
Nei temi WordPress tradizionali, dovevi farlo manualmente modificando complessi file CSS. Questo processo richiedeva l'uso dello strumento Ispeziona del browser, l'individuazione delle classi CSS, l'apprendimento del codice e altro ancora.
SeedProd rende anche questo super facile.
Invece di scrivere codice CSS, puoi semplicemente modificare il modello CSS globale.
Il modello CSS globale ti consente di visualizzare in anteprima gli elementi comuni del sito web, quindi puoi semplicemente puntare e fare clic su di essi per modificarne le proprietà.
Applicare e Pubblicare il Tuo Tema WordPress Personalizzato
Una volta soddisfatto del tuo tema WordPress personalizzato, il passo finale è attivarlo sul tuo sito web WordPress.
SeedProd ti consente di applicare il tuo tema WordPress personalizzato con un semplice interruttore.
Vai semplicemente alla pagina SeedProd » Theme Builder e attiva l'interruttore accanto all'opzione 'Abilita tema SeedProd' su 'Sì'.
SeedProd sostituirà ora il tema WordPress esistente con il tema WordPress personalizzato che hai creato.
Ora puoi visitare il tuo sito web per vedere il tuo tema WordPress personalizzato in azione.
Creare Altri Layout per il Tuo Tema WordPress Personalizzato
Ora che hai creato il tuo tema WordPress personalizzato, hai la possibilità di estenderne la funzionalità e creare altri design e layout basati sul tuo tema.
SeedProd lo rende estremamente facile.
Puoi ancora personalizzare il tuo tema WordPress personalizzato e creare più modelli per diverse sezioni del tuo sito web.
Ad esempio, potresti voler aggiungere un nuovo modello di intestazione al tuo tema che viene visualizzato solo su categorie specifiche.
Allo stesso modo, potresti voler creare un modello per pagine o post specifici.
Puoi aggiungerlo anche al tuo tema.
Che ne dici di creare landing page personalizzate?
SeedProd ti copre anche in questo caso.
Puoi semplicemente andare su SeedProd » Landing Pages e fare clic sul pulsante Aggiungi nuova landing page per crearne una.
Per maggiori dettagli, consulta il nostro tutorial su come creare una landing page con WordPress.
Utilizzando il costruttore di temi drag and drop di SeedProd, facile da usare per i principianti, puoi creare facilmente qualsiasi tipo di layout personalizzato di cui hai bisogno.
Speriamo che questo articolo ti abbia aiutato a imparare come creare un tema WordPress personalizzato senza imparare a programmare. Potresti anche voler consultare la nostra guida su come velocizzare il tuo sito WordPress per un migliore SEO e un'esperienza utente ottimale, o le nostre scelte delle migliori soluzioni di analisi per WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Mrteesurez
Questo è fantastico, che strumento fantastico da un team fantastico. Seedprod è davvero potente per creare un tema WordPress senza codifica o dover affrontare gerghi tecnici, ha anche modelli di temi di partenza con cui iniziare.
Ma è possibile installare il tema o usarlo su un altro sito WordPress?
Supporto WPBeginner
Puoi esportare i file del tuo tema per usarli su un sito diverso utilizzando SeedProd.
Amministratore
Mrteesurez
Lieto di sapere che posso esportare il mio file del tema e usarlo altrove, grazie per aver dedicato il tuo tempo a rispondere. Significa che devo avere Seedprod installato sul sito web dove ho proposto di utilizzare il tema.
Jiří Vaněk
Ottima idea, Mrteesurez, che in realtà non mi era mai venuta in mente, e sono contento che il team di WPBeginner abbia confermato che è possibile. Ho anche SeedProd e sono interessato a questa idea. Esiste una guida da qualche parte, o avete intenzione di crearne una?
Ayanda Temitayo
Wow, per tutto questo tempo ho creduto che solo un ottimo programmatore PHP potesse creare temi per WordPress. Non avrei mai pensato che si potesse creare un tema con un altro plugin per WordPress. Questo è un grande sviluppo per WordPress e grazie a WordPress e alla sua entusiasta comunità di sviluppatori per renderlo fantastico ogni giorno che passa.
SeedProd è così potente. Sto imparando le sue funzionalità e proverò anche ad implementarle.
Articolo fantastico
Supporto WPBeginner
Thank you and glad we could share how to make a theme without the requirement of coding knowledge
Amministratore
Mrteesurez
Inizialmente ho provato la stessa cosa! È incredibile come WordPress si sia evoluto, rendendo la creazione di temi accessibile a più persone senza bisogno di essere esperti di codifica. SeedProd è davvero un punto di svolta con il suo builder drag-and-drop e i modelli predefiniti. Aiuta a creare temi personalizzati rapidamente, cosa che avrebbe richiesto molto più tempo se si fosse dovuto codificare tutto da zero. Guardando al futuro, sono entusiasta delle possibilità di integrare strumenti di progettazione basati sull'IA in WordPress. È incredibile come la piattaforma continui a innovare, rendendola più facile e potente per gli utenti di tutti i livelli.
Moinuddin Waheed
Fino ad ora c'era un fermento nel mercato di WordPress per la creazione di pagine e qui arriva un ulteriore avanzamento sotto forma di sviluppo di temi personalizzati anche senza alcuna base di conoscenza di codice.
Grazie WordPress e alla sua entusiasta comunità di sviluppatori per renderlo fantastico ogni giorno che passa.
SeedProd è così potente. Sto imparando le sue funzionalità e le sto implementando sui miei siti web.
Satish
Come ha progettato la sua home page wpbeginner?
Supporto WPBeginner
We created a theme for ourselves
Amministratore
Fahad
Possiamo vendere questi temi?
Supporto WPBeginner
Vorresti codificare manualmente un tema invece di usare questo metodo se volessi vendere un tema.
Amministratore
Flox
Grazie per il post. Mi è molto utile per creare un sito. Grazie…
Supporto WPBeginner
You’re welcome, glad our article was helpful
Amministratore
Hosli
Ciao team,
Posso creare una landing page usando questo?
Supporto WPBeginner
Anche se al momento non hai bisogno di Beaver Themer, puoi usare Beaver Builder per creare una landing page
Amministratore
Irene
Grazie per il tutorial. Domanda veloce: posso anche riaggiungere le mie barre laterali dopo aver creato un nuovo tema personalizzato con Beaver. Se sì, come posso farlo per favore.
Supporto WPBeginner
Dovresti tornare nel personalizzatore per aggiungere nuovamente la barra laterale
Amministratore
Louise Findlay
Quali sono i vantaggi dell'utilizzo di Beaver Themer rispetto a Beaver Builder?
Supporto WPBeginner
Differisce in base a ciò che modifica; Beaver Builder serve per modificare l'area dei contenuti, mentre Beaver Themer serve per le posizioni diverse dall'area dei contenuti
Amministratore
Kathy Smith
Una volta creato un tema, posso usarlo per altri siti web senza aver bisogno di Beaver Builder?
Supporto WPBeginner
Al momento, richiederebbe anche Beaver Builder per funzionare su altri siti.
Amministratore
Athena
Domanda da principiante.. cosa succede a tutti i miei contenuti esistenti come pagine e widget (attualmente sto usando il tema Asta) ecc. mentre sto facendo questo o sto prima costruendo un sito web separato all'interno di WordPress e, in tal caso, come lo trasferisco poi?
Grazie
Supporto WPBeginner
Your posts and pages would remain, you would normally need to readd the widgets for the new widget areas
Amministratore
Vince
Non ho provato Beaver Builder, ma funziona come Divi? Sono simili? Se è così, allora direi che finora, non importa che tipo di tema, non ho trovato un tema che dia uno 0% di codifica totale.
Sì, è possibile creare una pagina o un tema con lo 0% di codifica. MA, normalmente ci sono funzionalità che un tema non possiede ma che il cliente richiederebbe per il suo sito e quindi sarebbe necessario codificare.
Supporto WPBeginner
If you visit the Beaver Builder site there is the option for you to try the live demo to see how it works
Amministratore
Sayed Ezhar
Ottimo materiale! Lo proveremo. Grazie.
Supporto WPBeginner
You’re welcome
Amministratore
Zulqar
Ciao,
Sono un principiante e un fan del sito WP Beginner. Non conosco codice, quindi questo post è una rivelazione per me!
Una domanda veloce: ho cercato di capire Generate Press. Mi sembra di dover imparare un po' di codice per giocare con il layout o creare pulsanti. Hai qualche consiglio per me?
Grazie per aver aiutato la community di WP Beginner!
Saluti.
Supporto WPBeginner
Se vai sul sito di Generate Press, hanno una pagina di documentazione per aiutarti a iniziare con il loro plugin.
Amministratore
kat
attualmente sto usando Adobe Muse per costruire siti web per più clienti, perché è veloce e facile, e wysiwyg.
ma, Adobe l'ha eliminato. Devo convertire TUTTI i miei siti clienti in un altro software. il mio hosting ha C-panel, quindi posso ottenere l'app di wordpress e pubblicare sui domini.
questo processo mi permetterà di ricreare i design che ho già costruito e che i clienti desiderano, e quanto complesso può diventare un sito usando questo?
Gioco su Wordpress, non ci LAVORO su WP.
Supporto WPBeginner
You would want to reach out to Beaver Builder’s support for specifics on the design depending you your needs
Amministratore
Mohamed Hassan
Grazie per le ottime informazioni!
Supporto WPBeginner
You’re welcome
Amministratore
Sy
Un altro ottimo post! Grazie.
Mi chiedo solo perché WPBeginner sembri sempre evitare Elementor?
Costruire un tema con Elementor è molto simile a costruirlo con Beaver Builder, ma Elementor è più veloce e hai molte più opzioni per lo stile e gli elementi/moduli.
Adoro i tuoi contenuti!
Supporto WPBeginner
Il fatto che Elementor pro non sia conforme alla GPL è una delle maggiori preoccupazioni nel consigliarlo, a seconda del caso d'uso dell'utente.
Amministratore
Monique
Tutorial fantastico. Proprio quello di cui avevo bisogno. Grazie!
Supporto WPBeginner
You’re welcome
Amministratore
Captaiing
Grazie, lo proverò
Supporto WPBeginner
We hope our article makes it easier for you
Amministratore
Muhammad Waqar
Grazie per avermi insegnato questo plugin che mi è molto utile. Questo sito web mi è molto utile. Grazie ancora
Supporto WPBeginner
Glad our article could help
Amministratore
sajid
grazie per aver condiviso informazioni molto utili.
Supporto WPBeginner
You’re welcome
Amministratore
Louise Findlay
Sto pensando di intraprendere un progetto di migrazione di un sito da WordPress.com alla versione self-hosted e di utilizzare Divi per rinnovarlo.
Seguendo il tuo articolo sui migliori page builder di WordPress, cosa consiglieresti tra Beaver Builder o Divi?
Con Divi, ottieni una gamma di temi e plugin da ElegantThemes, ma ho letto recensioni negative sul blocco del tema e sul fatto che sia troppo restrittivo. Hai esperienze personali al riguardo?
Con Beaver Builder, sembra che la funzionalità del page builder sia perfetta, anche se sembra più complesso con tutte le opzioni sparse in più pagine e non ottieni temi o plugin con l'abbonamento.
Staff editoriale
Entrambe sono ottime opzioni e sono nella nostra top 5.
Il plugin Divi Page Builder funziona anche con altri temi, quindi non sei bloccato con ElegantThemes. Tuttavia, come per qualsiasi tema, se passi da un tema all'altro, potresti perdere determinate funzionalità. Ma è per questo che devi assicurarti che il nuovo tema abbia un set di funzionalità comparabile.
Finché utilizzi il plugin Divi Page Builder, manterrai le funzionalità di trascinamento e rilascio.
Il vantaggio di Divi sono i temi / layout aggiuntivi offerti da ElegantThemes. Tuttavia, il vantaggio di Beaver Builder sono le opzioni di personalizzazione avanzate.
Amministratore
Richard Ross
Per non parlare del fatto che Beaver Builder non utilizza shortcode per popolare le aree di contenuto.
Chris Nieass
Is not using short codes to populate content is a good thing? Be gentle, I’m a newbie
Rob Dewing
@Chris Nieass, sì, non usare shortcode è un grande vantaggio di Beaver. Solo occasionalmente, anche nelle migliori installazioni, un page builder come Divi o Beaver si rompe. Quando Divi si rompe, finisci con contenuti della pagina che sembrano brutti con gli shortcode visualizzati letteralmente su tutta la pagina. Se la stessa cosa accadesse a Beaver, otterresti semplicemente il tuo contenuto impilato e leggibile in una serie di blocchi in fondo alla pagina invece di colonne eleganti.
Divi è per i designer che amano la sua interfaccia colorata e facile da usare e il fatto che tutti i loro amici lo usano. Beaver è per le persone che si preoccupano di quanto bene funziona il sito, della facilità di personalizzazioni più profonde, ecc. ecc.