Come creare facilmente un tema WordPress personalizzato in 5 passaggi

Vuoi creare un tema WordPress personalizzato per il tuo sito Web di piccole imprese?

Lo sviluppo di temi WordPress prima era impegnativo senza codificare il design del tuo tema da zero o assumere sviluppatori costosi. Tuttavia, in questi giorni sono disponibili potenti plugin per WordPress che ti consentono di creare temi visivamente utilizzando la semplice funzionalità di trascinamento della selezione.

Questo articolo ti mostrerà come creare un tema WordPress da zero senza toccare una singola riga di codice.

Perché personalizzare il tuo tema WordPress?

Internet è occupato con milioni di siti Web in lizza per l'attenzione del pubblico di destinazione. Un modo per distinguerti e mostrare che sei diverso è personalizzare la tua casa sul web: il tuo sito web.

Poiché molti proprietari di siti Web WordPress si attengono immediatamente ai temi iniziali, la personalizzazione del tuo può aiutare il tuo sito a distinguersi dalla concorrenza. Inoltre, con un tema WordPress personalizzato, è più facile mostrare la personalità del tuo marchio, aggiungere funzionalità di generazione di lead e migliorare la velocità e le prestazioni del tuo sito web.

Come posso creare un tema WordPress da zero?

La maggior parte dei temi WordPress sono realizzati con linguaggi di codifica HTML, CSS, PHP e JavaScript. L'apprendimento di queste lingue richiede tempo e formazione, il che non è realistico per molti proprietari di siti Web.

Ciò significa che una delle tue uniche opzioni è assumere uno sviluppatore o un'agenzia di sviluppo per creare un tema personalizzato per te. Di conseguenza, il costo di un sito WordPress personalizzato può raggiungere migliaia di dollari.

Un'altra opzione è usare SeedProd per creare il tuo tema WordPress personalizzato. Questo potente plugin per WordPress è dotato di una semplice interfaccia drag-and-drop che chiunque, anche i principianti, può utilizzare per personalizzare ogni aspetto del tuo tema WordPress.

Perché dovresti usare SeedProd?

SeedProd è il plugin per la creazione di siti Web più intuitivo per WordPress.

Include ampie opzioni di personalizzazione e offre un'ampia varietà di funzionalità, tra cui:

• Generatore di temi WordPress
• Oltre 170 modelli di pagine di destinazione
• Kit di temi WordPress completi
• Generatore di trascinamento della selezione
• Integrazioni di email marketing
• Funzionalità di importazione/esportazione
• Gestione abbonati
• Prossimamente e modalità di manutenzione
• e altro ancora.

In precedenza, potevi utilizzare SeedProd solo per creare pagine di destinazione all'interno del tuo tema esistente. Ma dopo diversi aggiornamenti rivoluzionari, puoi creare interi temi WordPress con lo stesso builder drag-and-drop.

Ciò significa che puoi personalizzare il tuo sito Web da cima a fondo senza codifica, quindi scopriamo come farlo.

Creazione di un tema WordPress personalizzato con SeedProd

Per questo tutorial, supponiamo che tu abbia già un sito WordPress ospitato su un dominio. In caso contrario, puoi seguire questa guida passo passo sulla creazione di un sito Web WordPress.

Poiché SeedProd sostituisce il tuo attuale tema WordPress con quello che creerai da zero, ti suggeriamo di utilizzare un ambiente di sviluppo. In questo modo, le tue modifiche non influiranno sul tuo sito web attivo finché non sarai pronto per pubblicarle.

I servizi di hosting WordPress popolari come Bluehost offrono ambienti di staging e sviluppo con i loro pacchetti di hosting.

Oltre a creare un ambiente di staging, assicurati di eseguire il backup del tuo sito prima di iniziare. Questo ti assicurerà di poter ripristinare il tuo sito web se qualcosa va storto. Vedi questo post per i migliori plugin di backup per WordPress.

Dopo aver preparato quanto sopra, puoi iniziare a creare il tuo tema WordPress personalizzato seguendo i passaggi seguenti.

Passaggio 1. Installa e attiva il plug-in SeedProd

Per il primo passaggio, devi installare e attivare il plugin SeedProd sul tuo sito WordPress. Segui questa guida dettagliata sull'installazione di un plugin per WordPress se hai bisogno di aiuto con questo passaggio.

Dovrai scegliere la licenza SeedProd Pro per sbloccare la funzione Theme Builder. Questo ti darà una chiave di licenza che puoi inserire nella pagina delle impostazioni del plug-in.

Per trovare la tua chiave di licenza, accedi al tuo account SeedProd, fai clic sulla scheda Download , quindi fai clic sull'icona di copia per salvare la chiave negli appunti.

Successivamente, vai al tuo amministratore di WordPress, vai a SeedProd »Impostazioni e incolla la chiave nel campo "Chiave di licenza". Quindi fare clic sul pulsante Verifica chiave per salvare le modifiche.

Ora vai alla pagina SeedProd »Costruttore di temi, dove SeedProd mostrerà i diversi elementi del tuo tema.

Esistono 2 modi diversi per creare un tema WordPress personalizzato con SeedProd. Puoi creare ogni parte del tuo tema da zero oppure puoi utilizzare un modello predefinito e personalizzare ogni parte in base alle esigenze del tuo sito web.

Ogni tema WordPress è composto da più parti chiamate file modello, tra cui:

• Intestazione
• Piè di pagina
• Posto unico
• Pagina singola
• Pagina archivio o blog
• Risultati di ricerca
• parte globale

Questo può essere piuttosto opprimente se è la prima volta che crei un tema da zero. Per questo motivo, ti consigliamo di iniziare con un modello di tema predefinito.

SeedProd ha vari modelli di temi reattivi che impostano la struttura del tuo tema con un solo clic. Genera automaticamente ogni file modello, ma ti consente anche di modificare ogni file con le tue personalizzazioni.

Per il resto di questa guida, utilizzeremo un modello di tema per mostrarti ogni passaggio del processo di personalizzazione perché è l'approccio più adatto ai principianti per creare un tema personalizzato.

Passaggio 2. Scegli un modello di tema WordPress

Per visualizzare tutti i modelli di temi di SeedProd, fai clic sul pulsante Temi .

Si aprirà una finestra che mostra temi per diversi tipi di siti Web, inclusi portafogli, viaggi, negozi WooCommerce, immobili, eventi e altro ancora.

Utilizzeremo il tema iniziale per questo tutorial, quindi passa il mouse sull'immagine del tema e fai clic sull'icona del segno di spunta arancione.

Non appena fai clic per importare il modello del tema, SeedProd genererà automaticamente le parti del tema.

Se non hai bisogno di una parte tematica specifica, disattivala facendo clic sull'interruttore sotto l'intestazione Pubblicato nella posizione "No".

È inoltre possibile modificare le condizioni di ciascuna parte facendo clic sul collegamento "Modifica condizioni".

Si aprirà una finestra in cui puoi scegliere il nome della parte, il tipo, la priorità e dove la parte dovrebbe apparire sul tuo sito web.

In molti casi, non sarà necessario modificare queste impostazioni e potrai passare direttamente alla personalizzazione dell'aspetto di ciascuna parte.

Passaggio 3. Personalizza le parti del tuo tema

Ora che le parti essenziali del tuo tema sono state configurate, puoi personalizzare i loro design in modo che appaiano nel modo desiderato. Per modificare un file modello, posiziona il cursore su di esso e fai clic sul collegamento "Modifica design".

Personalizzeremo le parti Intestazione, Piè di pagina, Home e Blog per questa guida. La personalizzazione delle altre parti del tema segue gli stessi principi.

Personalizzazione di intestazione e piè di pagina di WordPress

Per personalizzare l'intestazione, sposta il cursore sul modello di intestazione e fai clic su Modifica design .

Nella schermata seguente, vedrai l'interfaccia del generatore di temi di SeedProd. Puoi puntare e fare clic in un punto qualsiasi dell'anteprima live per vedere le impostazioni di ciascun elemento nel pannello di sinistra.

Iniziamo facendo clic sul logo SeedProd predefinito per aprire le impostazioni del blocco immagine. Nel pannello delle impostazioni del contenuto, puoi fare clic sull'icona del cestino per eliminare l'immagine predefinita e caricare un nuovo logo dal tuo computer o dalla libreria multimediale di WordPress.

Nello stesso pannello, puoi modificare la dimensione dell'immagine, l'allineamento e assegnare al tuo logo un collegamento personalizzato. Ad esempio, puoi reindirizzare i visitatori che fanno clic sul tuo logo alla tua home page.

Puoi anche modificare il colore di sfondo dell'intestazione facendo clic sull'icona delle impostazioni della riga. Da lì, puoi aggiungere un'immagine di sfondo, un colore o una sfumatura di sfondo personalizzata.

Quindi, fai clic sul blocco menu nell'anteprima live per personalizzare il menu di navigazione. SeedProd utilizza il blocco Nav Menu per questa sezione per impostazione predefinita, che ha 2 diverse opzioni di menu:

• Semplice: aggiungi i collegamenti ai menu individualmente nell'interfaccia del builder
• Menu WordPress : usa il menu nativo di WordPress per mostrare la tua navigazione

Dopo aver scelto il tipo di menu, puoi fare clic sulla scheda Avanzate e modificare i colori, la tipografia, gli stili e altro del collegamento del menu.

Quando sei soddisfatto del design dell'intestazione, fai clic sul pulsante Salva nell'angolo in alto a destra e fai clic sull'icona "X" per uscire dal generatore di temi.

Ora puoi seguire gli stessi passaggi per personalizzare il piè di pagina di WordPress e, quando hai finito, puoi passare alla modifica della tua home page.

Personalizzazione della tua home page di WordPress

La home page del tuo sito web è la prima pagina del tuo sito e in genere include elementi essenziali che definiscono la tua attività. Ad esempio, dettagli su chi sei, cosa fai, recensioni e testimonianze e informazioni di contatto.

Il modello che stiamo utilizzando include le seguenti sezioni della home page:

• Eroe
• Caratteristiche
• Testimonianze
• Domande frequenti

Puoi modificare ogni aspetto di questa pagina, inclusi layout, immagini, contenuto, pulsanti e altro. Dai un'occhiata a questo rapido esempio per vedere com'è facile modificare diverse parti della tua home page:

Puoi utilizzare i blocchi e le sezioni sul lato sinistro per modificare la tua home page finché non sei soddisfatto di come appare tutto. Ad esempio, puoi aggiungere valutazioni a stelle, Google Maps, moduli di ricerca e molti altri elementi del sito web.

È anche importante controllare la versione mobile della tua home page.

Se la versione mobile del tuo sito non ha un aspetto corretto, puoi continuare a modificarla finché non appare perfetta.

Quando sei soddisfatto del design della tua home page, salva le modifiche e torna alla dashboard del generatore di temi SeedProd.

Stile della tua pagina del blog personalizzata

La prossima parte del tema che personalizzeremo è la pagina del blog. Dalla dashboard del generatore di temi, cerca l'intestazione Blog, Indice, Archivi, Cerca e fai clic sul collegamento Modifica design .

In questa pagina puoi aggiungere, rimuovere e spostare diversi elementi, come il contenuto del post del blog, l'immagine in primo piano, l'estratto e la biografia dell'autore.

Per impostazione predefinita, questo modello utilizza il blocco Post per mostrare un elenco di post recenti del blog, quindi fai clic su di esso per visualizzare le diverse impostazioni che puoi configurare.

Nel pannello delle impostazioni dei post, puoi scegliere il tipo di post del blog da visualizzare e mostrare o nascondere informazioni come l'impaginazione, il meta, i dettagli dell'autore, il conteggio dei commenti e altro ancora.

Dopo aver personalizzato la pagina del tuo blog, fai clic sul pulsante Salva e torna alla dashboard del generatore di temi.

Definizione delle impostazioni globali

L'ultima parte del modello che esamineremo controlla le impostazioni di stile globali per i pulsanti, i colori, la tipografia e il layout del tema. Cerca la parte CSS globale e fai clic sul collegamento Modifica design per aprire le impostazioni.

Puoi espandere ciascuna scheda su questa schermata e personalizzare le diverse impostazioni.

Ad esempio, puoi aprire la scheda Pulsante e personalizzare lo stile predefinito di ogni pulsante del tuo sito web.

Inoltre, puoi modificare i caratteri, il layout, lo sfondo e aggiungere CSS personalizzati al tuo tema WordPress. Ogni modifica che apporti viene applicata automaticamente all'intero sito web.

Ricordati di fare clic sul pulsante Salva per salvare le modifiche prima di procedere.

Passaggio 4. Collega il tuo servizio di email marketing

Se hai utilizzato il modulo di attivazione o il blocco del modulo di contatto nel design del tuo tema, avrai bisogno di un modo per aggiungere nuovi contatti alla tua lista e-mail. Fortunatamente, SeedProd si integra direttamente con i più diffusi servizi di email marketing per rendere tutto più semplice.

Puoi trovare le integrazioni e-mail di SeedProd facendo clic sulla scheda Connetti durante la modifica di qualsiasi progetto. Da lì, puoi trovare il tuo servizio di email marketing e seguire le istruzioni sullo schermo per connetterti.

Oltre a integrarsi direttamente con i servizi di posta elettronica, SeedProd può memorizzare i contatti nella sua dashboard abbonati integrata. Questo è utile se stai iniziando a creare la tua lista e-mail e non hai ancora scelto un provider.

Passaggio 5. Pubblica il tuo tema WordPress personalizzato

Ora che hai personalizzato il tuo tema WordPress personalizzato, è tempo di renderlo attivo sul tuo sito web. Per farlo, vai alla dashboard del generatore di temi e ruota l'interruttore accanto all'intestazione Abilita tema SeedProd sulla posizione "On".

Successivamente, puoi andare al front-end del tuo sito Web e vedere il tuo nuovo tema WordPress personalizzato.

Ecco qua!

Speriamo che questo post ti abbia aiutato a imparare come creare un tema WordPress da zero senza codifica.

Sapevi che SeedProd include anche un blocco RafflePress? L'aggiunta di omaggi RafflePress ovunque nel design del tuo tema personalizzato rende semplicissimo aumentare il traffico, i lead e i follower sui social media.

Pronto per tuffarti?

Inizia con SeedProd qui e ottieni la tua copia di RafflePress qui.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per i video tutorial di RafflePress. Ci trovate anche su Twitter e Facebook.