Costruire il tuo primo sito WordPress può essere complicato. Con migliaia di temi tra cui scegliere, può essere difficile trovare quello giusto per il tuo brand.
È qui che la creazione di un tema personalizzato che soddisfi tutti i tuoi requisiti torna utile.
Tuttavia, la parte difficile per i principianti è che di solito richiede esperienza di codifica e una profonda conoscenza di WordPress.
Ma con il giusto costruttore di temi WordPress, puoi semplicemente usare un costruttore drag and drop per creare il tuo tema.
In questo articolo, ti mostreremo come creare un tema personalizzato in pochi semplici passaggi senza bisogno di codifica.
Cos'è un tema WordPress?
Per cominciare, chiariamo cos'è esattamente un tema WordPress e di cosa è composto.
Un tema WordPress è un insieme di file collocati in una cartella comune nella directory dei temi di WordPress sul tuo hosting.
Questo set include modelli di pagina scritti in linguaggi HTML, PHP e JavaScript, fogli di stile CSS e grafica.
Quando si tratta di creare un tema personalizzato da zero, ci sono 2 modi tipici:
- Fai da te: Richiede una vasta esperienza nello sviluppo web e molto tempo libero.
- Assumi uno sviluppatore o un'agenzia web: Il prezzo medio varia da un paio di centinaia a un paio di migliaia di dollari.
Per ovvie ragioni, entrambi questi metodi sono difficilmente accettabili per i principianti.
Fortunatamente, esiste un terzo modo per creare un tema personalizzato senza spendere una fortuna o essere un guru della codifica.
Ciò è possibile attraverso l'uso di un costruttore di siti web WordPress come SeedProd. Diamo un'occhiata in dettaglio e scopriamo perché è così popolare tra gli utenti WordPress.
Perché usare SeedProd per creare un tema WordPress personalizzato?
SeedProd è il plugin per la creazione di siti web basato sull'IA n. 1 per WordPress, facile da usare per i principianti.
Questo è un vero punto di svolta, poiché ti consente di creare temi WordPress personalizzati di alta qualità in pochi minuti, senza bisogno di codifica.
L'ingrediente segreto è l'utile e potente editor visivo di SeedProd. Usandolo, puoi facilmente trascinare e rilasciare gli elementi del sito, i blocchi o persino intere sezioni necessarie sulla tua pagina.
Ecco una breve anteprima di come funziona:
SeedProd ottimizza automaticamente pagine e temi per un caricamento veloce. Ti consente di garantire la migliore esperienza utente per i tuoi visitatori.
Sono anche responsive e pronti per i dispositivi mobili per impostazione predefinita, quindi non devi preoccuparti di come appare il tuo sito su diversi dispositivi.
Insieme a ciò, SeedProd offre funzionalità potenti come:
- Centinaia di modelli di pagina pronti all'uso: Non ti senti ispirato a creare un tema da zero? Puoi utilizzare uno dei oltre 200 modelli predefiniti e personalizzarli facilmente per soddisfare le tue esigenze.
- Integrazione WooCommerce: Vendi prodotti online? SeedProd è completamente compatibile con WooCommerce, quindi puoi creare moderne pagine "coming soon" e di checkout, griglie di prodotti e altro ancora.
- Dashboard di gestione degli iscritti via email: Hai una newsletter via email? SeedProd ti consente di raccogliere email e monitorare lo stato dei tuoi iscritti su una comoda dashboard.
- Codice ottimizzato per la SEO: Preoccupato per la chiarezza del codice? Il codice dei temi e delle pagine che crei con SeedProd è ottimizzato per la SEO e soddisfa tutti i requisiti dei motori di ricerca.
Inoltre, SeedProd ha un team di supporto fantastico e reattivo.
Anche se questo plugin è estremamente facile da usare, se dovessi avere domande, sono sempre pronti a intervenire in tuo soccorso.
Il feedback degli utenti entusiasti non lascia spazio a dubbi sul fatto che questa valutazione sia ben meritata.
Ecco cosa dicono le persone della loro esperienza con SeedProd:
Ora che sai perché usare SeedProd è il modo migliore per creare un tema personalizzato per principianti, vediamo come puoi farlo.
Come Creare un Tema WordPress Personalizzato
Questo tutorial dettagliato ha 6 semplici passaggi. Seguili per creare un bellissimo tema WordPress personalizzato senza toccare una singola riga di codice.
Ecco un indice per aiutarti a navigare:
- Passaggio 1: Installa e Attiva il Plugin SeedProd
- Passaggio 2: Seleziona un Tema WordPress Predefinito
- Passaggio 3: Personalizza le Parti del Tuo Tema WordPress
- Passaggio 4: Personalizza il CSS Globale del Tuo Tema (Senza Codice)
- Passaggio 5: Connettiti al Tuo Servizio di Email Marketing
- Passaggio 6: Pubblica il Tuo Tema WordPress Personalizzato
- Bonus: Crea Moduli di Ricerca Personalizzati e Pagina dei Risultati
Passaggio 1: Installa e Attiva il Plugin SeedProd
Per iniziare, puoi ottenere la tua copia di SeedProd qui.
Successivamente, puoi accedere al tuo account SeedProd e andare alla scheda Download.
Quindi, fai clic sul pulsante Scarica SeedProd Pro per iniziare a scaricare il file ZIP del plugin sul tuo computer.
Una volta terminato il download, copia la tua chiave di licenza nella stessa scheda. Ti servirà in seguito per attivare la tua copia di SeedProd.
Il passo successivo è caricare il file ZIP scaricato sul tuo sito e installare il plugin. Se hai bisogno di aiuto, puoi seguire questo tutorial su come installare un plugin di WordPress.
Dopo aver installato il plugin, vedrai la schermata di benvenuto di SeedProd. Qui, puoi andare alla tua bacheca di WordPress e fare clic sul pulsante SeedProd nel pannello di sinistra.
Quindi, incolla la tua chiave di licenza nel campo della licenza e premi il pulsante Verifica chiave.
Una volta attivata la tua copia di SeedProd, sei pronto per iniziare a creare il tuo tema WordPress personalizzato.
Passaggio 2: Seleziona un Tema WordPress Predefinito
Per iniziare, naviga su SeedProd » Theme Builder nella tua bacheca.
In questa pagina, puoi gestire i tuoi temi personalizzati e crearne di nuovi.
Da qui, hai 2 modi per iniziare.
Il primo è creare ogni parte del tuo tema personalizzato da zero.
Ogni tema WordPress è composto dalle seguenti parti:
- Intestazione
- Piè di pagina
- Post singolo
- Pagina singola
- Archivio (Pagina Blog)
- Homepage
- Barra laterale
Queste parti compongono il tuo tema e SeedProd ti consente di crearle e personalizzarle individualmente.
Per iniziare a creare una nuova parte del tuo tema, premi il pulsante Aggiungi nuovo modello di tema.
Qui puoi scegliere il tipo della tua parte del tema, darle un nome e poi iniziare a costruirla da zero.
Ma, se senti che è troppo opprimente per il tuo primo tentativo, c'è un secondo modo per creare il tuo tema WordPress personalizzato.
SeedProd viene fornito con un sacco di modelli di tema predefiniti dall'aspetto professionale. Puoi selezionarli e personalizzarli per le tue esigenze.
In questo tutorial, ci concentreremo su questo modo poiché è più facile per i principianti e ci consente di mostrarti più funzionalità di SeedProd.
Per iniziare a personalizzare uno dei modelli di tema pronti, premi il pulsante Kit modelli di tema.
Qui troverai una varietà di temi per diversi scopi.
Ad esempio, ci sono temi per blog personali, portfolio, siti aziendali o eCommerce e altro ancora.
Per scegliere un tema che ti piace, passa il cursore del mouse sopra di esso e fai clic sull'icona del segno di spunta.
Ad esempio, sceglieremo uno dei modelli di avvio.
Una volta selezionato un modello, SeedProd crea automaticamente le parti che lo compongono.
Come puoi vedere, il nostro tema include non solo modelli di parti di pagina, come l'intestazione, il piè di pagina e la barra laterale.
Ci sono anche modelli per intere pagine, come una singola pagina, un post, archivi e homepage.
Se non hai bisogno di un modello specifico sul tuo sito, puoi disattivarlo spostando l'interruttore accanto ad esso.
Per cambiare il nome di un modello o modificare le condizioni in cui dovrebbe apparire sul tuo sito, fai clic sul link Modifica condizioni.
Si aprirà una finestra modale in cui puoi nominare un modello come desideri e cambiarne il tipo, la priorità e le condizioni.
Al termine, fai semplicemente clic sul pulsante Salva.
Ora che sai come gestire le parti del tuo tema, sei pronto per iniziare a personalizzarlo.
Passaggio 3: Personalizza le Parti del Tuo Tema WordPress
Innanzitutto, personalizziamo l'intestazione poiché è la prima cosa che i visitatori vedono dopo essere arrivati sul tuo sito.
Intestazione
Per iniziare, scorri verso il basso la pagina Theme Builder, trova il modello Header e fai clic su di esso.
Nota: L'intestazione e il piè di pagina sono comuni all'intero sito. Ciò significa che ogni modifica apportata ad essi sarà visibile su ogni pagina del tuo sito.
Come puoi vedere, la nostra intestazione è composta da due parti. C'è la parte sinistra con il logo del sito e la parte destra con il menu di navigazione.
SeedProd ha un editor visivo drag-and-drop. Puoi interagire con qualsiasi elemento della pagina e aggiungerne di nuovi semplicemente trascinandoli sulla pagina.
Proviamo a cambiare il logo. Per farlo, fai semplicemente clic su di esso e apparirà una barra laterale dove potrai modificare le impostazioni dell'elemento.
Ogni tipo di elemento nell'editor di SeedProd ha il proprio set di impostazioni e opzioni di personalizzazione.
Ad esempio, il nostro logo ha il tipo Immagine. Quindi ha tutte le impostazioni che ti aspetteresti normalmente da un'immagine, come il file sorgente, il testo alternativo, le dimensioni e altro ancora.
Puoi anche passare tra le schede Contenuto, Modelli e Avanzate nella barra laterale sinistra per scoprire ancora più opzioni di personalizzazione.
Ora, supponiamo che tu voglia sostituire il logo predefinito con il tuo.
Per farlo, fai clic sull'immagine del logo corrente, quindi puoi selezionare l'immagine che desideri utilizzare al suo posto.
Ecco come appare il nostro nuovo logo sul nostro sito di prova:
Ora, cambiamo il colore di sfondo dell'intestazione.
Per farlo, posiziona il cursore sopra la tua intestazione finché non ha un contorno blu e fai clic su di essa.
Dopo di che, vedrai le opzioni di personalizzazione dell'intestazione nella barra laterale sinistra. Ha il tipo di elemento Riga.
Nella scheda Contenuto, puoi cambiare il colore di sfondo della tua intestazione, sostituirlo con un'immagine e scegliere la larghezza dell'intestazione.
Per cambiare il colore di sfondo, fai clic sull'icona della tavolozza dei colori e seleziona il colore desiderato.
Quindi, nella scheda Avanzate, puoi aggiungere un'ombra o un bordo alla tua intestazione, modificare le impostazioni di spaziatura e altro ancora.
Come tocco finale, rendiamo il carattere del menu di navigazione un po' più grande.
Per farlo, posiziona il cursore sopra il menu e fai clic su di esso.
Ora, nel campo Dimensione carattere nella barra laterale sinistra, inserisci la dimensione del carattere desiderata.
Semplicemente sposta il cursore o inserisci un numero per cambiare la dimensione del carattere.
Una volta terminata la personalizzazione dell'intestazione, premi il pulsante Salva nell'angolo in alto a destra.
Quindi, premi l'icona di uscita per lasciare l'editor visivo e tornare alla pagina dei modelli del tema.
Successivamente, personalizziamo la Homepage.
Homepage
Per farlo, trova il modello Homepage tra gli altri modelli del tema e fai clic su di esso.
Il modello di partenza ha una homepage con funzionalità che si trovano in un tipico sito aziendale, come:
- Sezione di descrizione dell'attività
- Elenco dei clienti con i loro loghi
- Funzionalità aziendali
- Testimonianze
- Sezione FAQ
- e altro ancora...
Come per l'intestazione, puoi interagire con ogni elemento della pagina e cambiarne l'aspetto.
Ad esempio, puoi vedere come cambiare facilmente il titolo, la descrizione e il testo del pulsante nella sezione hero con pochi clic:
Ora, proviamo ad aggiungere qualcosa di nuovo alla nostra pagina.
Se nessun elemento della pagina è attualmente selezionato, nella barra laterale sinistra, puoi vedere la scheda Blocchi.
Ci sono molti blocchi pronti all'uso che puoi aggiungere alla tua pagina con pochi clic, senza bisogno di codice.
Ad esempio, puoi trovare blocchi come l'autore del post, tabella prezzi, modulo di ricerca e molti altri.
Per aggiungere un blocco specifico alla tua pagina, trascinalo nel punto desiderato.
Ad esempio, aggiungiamo un blocco Conto alla rovescia alla sezione Funzionalità:
Inoltre, se vai alla scheda Sezioni, troverai tonnellate di sezioni predefinite che puoi anche aggiungere alla tua pagina, come:
- Intestazioni
- Piè di pagina
- Invito all'azione
- Funzionalità
- Testimonianze
- e molti altri...
Per aggiungere una nuova sezione alla pagina, passa il mouse sopra la sezione desiderata e fai clic sull'icona più.
Ad esempio, aggiungiamo una nuova sezione Invito all'azione alla nostra pagina.
Per impostazione predefinita, la nuova sezione apparirà alla fine della pagina.
Per cambiare la posizione della sezione, posiziona il cursore sul suo bordo superiore, scegli l'opzione Sposta sezione e trascinala nello stesso modo di un blocco.
Quando hai finito di personalizzare la tua homepage, puoi vedere come appare sui dispositivi mobili.
Per farlo, fai clic sull'icona di anteprima mobile nell'angolo in basso a sinistra.
Se ci sono blocchi o sezioni che non hanno un aspetto corretto, puoi spostarli.
In questo modo, puoi assicurarti che la tua versione mobile offra la migliore esperienza utente.
Quando sei soddisfatto della tua homepage, non dimenticare di premere il pulsante Salva per salvare tutte le modifiche apportate.
Pagine Indice del blog, Archivi e Ricerca
Guardiamo ora un modello chiamato Indice del blog, Archivi, Ricerca.
Come puoi intuire dal nome, questo modello è responsabile della visualizzazione della pagina dei post del blog, degli archivi e dei risultati di ricerca.
Questo è utile poiché puoi modificare l'aspetto di 3 pagine contemporaneamente.
Dato che hai già imparato come personalizzare le pagine e aggiungere nuovi blocchi e sezioni, concentriamoci sulla configurazione di elementi specifici.
Ad esempio, se fai clic sull'elemento Post, puoi cambiare l'ordine dei post, escludere post da categorie, tag o autori specifici e altro ancora.
Inoltre, sei libero di personalizzare completamente il layout dell'elenco dei post.
In particolare, puoi cambiare il numero di colonne e di post per pagina, modificare la visibilità del nome dell'autore, della data di pubblicazione, dell'ora e del conteggio dei commenti.
È raro che un website builder ti permetta di controllare tali cose, senza bisogno di codice, il che è un altro motivo della popolarità di SeedProd.
Post singolo
Quando hai finito di personalizzare la tua pagina del blog, modifichiamo anche il modello Post singolo .
Un tipico post del blog ha le seguenti parti:
- Immagine in evidenza
- Titolo del post
- Informazioni sul post
- Contenuto del post
- Box autore
- Sezione commenti
La cosa migliore è che, con SeedProd, puoi personalizzare completamente ognuna di queste parti.
Ad esempio, se fai clic sull'elemento Informazioni sul post, puoi aggiungere nuovi dati utili.
Può essere un orario di pubblicazione o modifica, informazioni aggiuntive sull'autore del post o qualcos'altro che desideri specificare.
Ad esempio, supponiamo di voler visualizzare il numero di commenti nella nostra sezione informazioni del post. Per iniziare, premi il pulsante Aggiungi elemento.
Quindi, fai clic sul menu a discesa Tipo e seleziona l'opzione Commenti.
Dopo di che, vedrai che il numero di commenti viene ora visualizzato all'interno dell'elemento informazioni del post.
In questo modo, puoi personalizzare facilmente qualsiasi elemento della pagina.
Barra laterale
Cambiamo anche l'aspetto della barra laterale del nostro tema. Vai alla dashboard del theme builder e fai clic sul modello Barra laterale.
La barra laterale è molto popolare tra i proprietari di siti WordPress.
È un ottimo posto per inserire elementi pertinenti del sito web come un elenco di post recenti, un modulo di iscrizione e molti altri.
SeedProd ti consente inoltre di personalizzare completamente la tua barra laterale allo stesso modo degli altri modelli.
Ad esempio, puoi aggiungere un modulo di iscrizione alla newsletter via email alla tua barra laterale con pochi clic.
Per fare ciò, trascina e rilascia semplicemente l'elemento Modulo di iscrizione dalla scheda Blocchi alla tua barra laterale:
Quindi, se fai clic su di esso, puoi modificare il numero di campi, il loro tipo e altro.
Ora che sai come lavorare all'interno dell'editor visivo di SeedProd, sei pronto per personalizzare il CSS globale del tuo tema.
Passaggio 4: Personalizza il CSS Globale del Tuo Tema (Senza Codice)
Innanzitutto, chiariamo cos'è il CSS e come puoi modificare l'aspetto globale del tuo sito modificando questo file.
CSS sta per fogli di stile a cascata. È un file che contiene codice che determina lo stile globale, la tipografia e i colori del tuo sito.
Quando modifichi l'aspetto di un elemento nel file CSS, tali modifiche si applicano a quell'elemento in tutto il tuo sito.
Ogni tema WordPress ha il proprio file CSS. In genere, per apportare modifiche, è necessario avere una certa esperienza nello sviluppo web.
Ma SeedProd ti consente di personalizzare il CSS globale del tuo sito in un editor semplice e intuitivo per i principianti.
Per iniziare, fai clic sul modello CSS globale nella dashboard dei modelli del tuo tema.
Questo ti porterà all'editor visivo delle impostazioni CSS globali.
Sul lato sinistro, troverai schede in cui puoi modificare il colore, i font, lo sfondo e altro del tuo sito.
E sul lato destro, puoi vedere i risultati delle modifiche apportate in tempo reale.
Per connettere il tuo account di email marketing, naviga prima alla scheda Costruttore di temi e fai clic su qualsiasi modello.
Per farlo, puoi fare clic sulla scheda Font.
Per cambiare il font di tutti i titoli da H1 a H6, seleziona un nuovo font dal menu a discesa sotto il titolo Font intestazione.
C'è anche un'opzione per cambiare il colore del font.
Se vuoi cambiare il font di un particolare titolo, puoi attivare l'interruttore Mostra impostazioni H1 – H6.
Quindi, fai clic sul pulsante Modifica accanto all'opzione Tipografia di un titolo scelto e seleziona il font che desideri.
Ad esempio, cambieremo il font del titolo H1 in Comic Sans. Come puoi vedere, il font è cambiato istantaneamente.
Quando hai finito di regolare le impostazioni CSS, fai clic sul pulsante Salva per salvare le modifiche apportate.
Seguendo questo modo, puoi personalizzare molte cose relative all'aspetto del tuo tema WordPress personalizzato.
Ora che sai come modificare le impostazioni CSS globali, sei pronto per passare a connettere il tuo account del servizio di email marketing.
Passaggio 5: Connettiti al Tuo Servizio di Email Marketing
SeedProd ha un'integrazione perfetta con i servizi di email marketing più diffusi. Questo elenco include, ma non si limita a, Mailchimp, Constant Contact e Drip.
Questa è un'ottima notizia se hai già una base attiva di iscritti via email o vuoi iniziare a far crescere la tua prima lista email.
To connect your email marketing account, first navigate to the Theme Builder tab and click on any template.
Quindi, vai alla scheda Connetti nel pannello superiore.
Una volta lì, posiziona il cursore su un servizio che stai utilizzando, premi il pulsante Connetti e segui le istruzioni sullo schermo.
Quando hai finito di connettere il tuo servizio email, premi il pulsante Salva in alto a destra per salvare le modifiche.
Ora, SeedProd raccoglierà le email dei visitatori che hanno compilato il tuo modulo di optin e le aggiungerà alla tua base email.
Passaggio 6: Pubblica il Tuo Tema WordPress Personalizzato
L'ultimo passaggio è pubblicare il tuo tema personalizzato e renderlo live sul tuo sito web.
Per farlo, prima, vai su SeedProd » Costruttore di temi dalla tua bacheca WordPress.
Quindi, attiva l'interruttore Abilita tema SeedProd in alto a destra.
Ecco fatto. Il tuo tema WordPress personalizzato è live e puoi vederlo sul tuo sito.
Per farlo, visita semplicemente il tuo sito web e vedi il nuovo tema personalizzato.
Ad esempio, ecco la nostra homepage personalizzata sul nostro sito demo:
Ed ecco il modello di singolo post del blog che abbiamo anche personalizzato con pochi clic utilizzando SeedProd:
Bonus: Crea Moduli di Ricerca Personalizzati e Pagina dei Risultati
Ora, vorresti anche migliorare l'esperienza di ricerca sul tuo nuovo sito WordPress con tema personalizzato?
La ricerca predefinita di WordPress manca di molte funzionalità e spesso non riesce a fornire risultati pertinenti, specialmente se hai molti articoli o prodotti sul tuo sito.
È qui che SearchWP può aiutarti. È il miglior plugin di ricerca per WordPress e migliora la ricerca predefinita consentendo di includere campi personalizzati, tag, categorie, dettagli del prodotto, file multimediali, documenti e altro nel processo di ricerca.
Con SearchWP, puoi impostare moduli di ricerca personalizzati e collegarli a motori di ricerca specifici. Offre anche layout predefiniti e molte opzioni di personalizzazione.
Non è tutto! SearchWP viene fornito anche con un modello di risultati per WordPress. Puoi personalizzare l'aspetto dei risultati di ricerca sul tuo sito e scegliere tra modelli predefiniti.
Per saperne di più, consulta la nostra guida su come creare una pagina di ricerca dall'aspetto professionale in WordPress.
Speriamo che questo articolo ti abbia aiutato a imparare come creare un tema WordPress personalizzato in 6 semplici passaggi, senza bisogno di codice. Potresti anche voler consultare la nostra guida sui migliori plugin di ricerca WordPress per potenziare la ricerca del tuo sito e su come creare una pagina di ricerca in WordPress.
Se vuoi anche migliorare la ricerca di WordPress, allora puoi iniziare con SearchWP qui.
