Come impostare il tuo blog di autorità con il tema WordPress Canvas

Molti aspiranti blogger sono intimiditi dall'inerzia per la percezione che creare e gestire un blog sia troppo impegnativo dal punto di vista tecnico. Se ti consideri tra quel gruppo, questo post è per te.

In realtà, il fatto che tu stia leggendo questo quasi certamente ti qualifica per creare un sito web. Hai bisogno di poco più di un livello base di alfabetizzazione informatica per apprendere ciò che è necessario per creare e mantenere il tuo blog personale. Sono finiti i giorni in cui avevi bisogno di sporcarti le mani con codice come HTML e CSS per creare il tuo angolo personale sul web - sebbene tali competenze siano sicuramente utili in molte applicazioni, non sono più una necessità.

Quando si tratta di creare un blog, tutto ciò di cui hai bisogno è una buona idea e qualche ora del tuo tempo (o anche meno) per alzarsi e correre. Inoltre, con un'enorme selezione di framework tematici altamente personalizzabili tra cui scegliere, è possibile creare un sito Web dall'aspetto professionale in breve tempo con relativa facilità. I prossimi tre post di questa serie sulla creazione di un blog di autorità di successo si concentreranno sugli aspetti fondamentali della creazione del tuo blog personale e questo post si concentrerà specificamente su come creare un design unico per il tuo sito web. Iniziamo!


Perché WordPress?

Tornando indietro di quindici anni, creavo siti Web manualmente codificandoli in Microsoft Notepad e caricando ogni pagina HTML tramite FTP. Non è stato facile. Ma avanti veloce al 2013 e creare il tuo sito web non può essere più complicato di un processo rispetto all'utilizzo di un word processor.

Per il tuo sito web utilizzeremo il sistema di gestione dei contenuti più popolare al mondo: WordPress. Più specificamente, useremo WordPress self-hosted.

Ma prima di andare oltre, possiamo affrontare le domande elementari. Prima di tutto, cos'è un Content Management System (o CMS)? Wikipedia lo definisce come segue:

Un programma per computer che consente di pubblicare, modificare e modificare il contenuto e la manutenzione da un'interfaccia centrale.

In poche parole, è progettare siti Web ciò che Microsoft Word sta creando documenti. Crea un framework dal quale è possibile avviare un sito Web con il clic di un pulsante. Inoltre, ti permette facilmente di modificare e migliorare drasticamente sia il design che la funzionalità del tuo sito web con facilità. In breve, è fantastico ed è (a mio modesto parere) di gran lunga l'opzione migliore per i nostri scopi.

Ma perché usare WordPress self-hosted al posto della sua controparte, WordPress.com? Bene, non è nello scopo di questo articolo entrare nei dettagli su questo fronte, specialmente quando in precedenza sono stati scritti tanti articoli sull'argomento. Ecco il mio preferito sull'argomento se vuoi educare te stesso. Uno dei principali vantaggi dell'hosting automatico è la possibilità di personalizzare ampiamente l'installazione di WordPress. Prendilo da me -- WordPress self-hosted è l'opzione giusta per creare un blog di autorità.

Se hai bisogno di indicazioni su come acquistare un nome di dominio, hosting e configurazione di WordPress, guarda questo video in cui ti mostro come farlo in pochi minuti. È un pezzo di torta.


Perché Canvas?

Quando installi WordPress viene fornito con alcuni temi predefiniti gratuiti come Twenty Twelve. Mentre tu può inizia subito a bloggare con uno di questi temi, l'installazione di un tema premium può fare la differenza nel fornire un'esperienza più unica e piacevole per i visitatori del tuo sito. Neanche per rompere la banca: il tema che sto per consigliare costa solo $ 60 e offre design e flessibilità eccezionali.

Sto parlando del framework Canvas, che considero il miglior framework per i temi premium disponibile per WordPress. Nemmeno io sto pagando il servizio a parole - uso Canvas per i blog di autorità che possiedo; in particolare Leaving Work Behind:

Puoi acquistare Canvas direttamente da Themeforest. Viene fornito con istruzioni di installazione complete - non che tu abbia bisogno di molto aiuto su quel fronte; il processo di installazione è molto semplice. Quello su cui voglio concentrarmi in questo tutorial è come modellare e modellare Canvas per creare un design dall'aspetto unico per il tuo blog di autorità.

Per darti un'idea della diversità del design che puoi creare con Canvas, qui ci sono due versioni dello stesso sito web di base:

Lo stesso identico sito web, diverse impostazioni all'interno di Canvas. Puoi usare questo tema per creare praticamente qualsiasi cosa.

Questo tutorial è suddiviso in cinque sezioni, ognuna delle quali mostrerà come apportare importanti modifiche al framework Canvas con relativa facilità. Ogni sezione è indipendente e non fa affidamento sugli altri, quindi sentiti libero di avvicinarti alla personalizzazione del tuo sito di autorità in qualsiasi modo tu ritenga opportuno.

Mentre c'è una quantità enorme che puoi fare in termini di personalizzazione all'interno del framework del tema Canvas, in questo tutorial ci stiamo concentrando su un elenco relativamente piccolo di azioni ad alto impatto che puoi intraprendere per creare un tema davvero unico.


1. Il layout

Una delle modifiche più evidenti che puoi apportare al tuo sito è il layout. In questa sezione modificheremo la larghezza del tuo sito e la struttura generale.

Passo 1

Navigare verso Canvas> Opzioni tema> Stile e layout dalla barra laterale di WordPress. Usa il cursore per cambiare la larghezza del tuo sito web (comprese le barre laterali).

Tieni presente che la larghezza massima consigliata è di 1.600 pixel. Se vai oltre, è probabile che il tuo sito si estenda oltre la larghezza degli schermi di molti visitatori e non sia consigliato.

Come regola generale consenti ~ 600 px per la colonna di contenuti e un ulteriore ~ ​​300 px per qualsiasi colonna. Anche se il tuo sito ha due colonne, non c'è motivo che la larghezza del tuo sito si estenda oltre ~ 1.200 pixel.

Passo 2

Nella stessa schermata, seleziona il layout principale del tuo sito.

Hai un totale di sei opzioni. Il primo è un layout a colonna zero (simile al blog Signal vs. Noise), mentre il resto è una selezione di varie opzioni della barra laterale.

Il layout del blog più popolare è un singolo display della colonna principale con una colonna della barra laterale, in genere con la barra laterale a destra del contenuto principale. Come puoi vedere dallo screenshot qui sopra, quel layout è selezionato per impostazione predefinita. Se vuoi andare con qualcosa di più unico, scegli un diverso layout di colonne, o essere ancora più audace e andare con un layout a colonna zero.

Passaggio 3

Nella stessa schermata, seleziona le aree del widget footer del tuo sito.

I widget di piè di pagina verranno visualizzati sotto il contenuto e estesi per tutta la larghezza del sito (comprese le colonne). Sono "aree widgetizzate", il che significa che è possibile trascinare e rilasciare "widget" preimpostati (come una casella di ricerca, post recenti, post popolari, ecc.) In essi.

Puoi avere fino a quattro widget footer sul tuo sito o nessuno.


2. Logo e sfondo

Incorporando il tuo logo e un colore o un'immagine di sfondo personalizzati puoi creare immediatamente un tema. Fortunatamente, con il tema Canvas, farlo è facile.

Se sei sfidato graficamente (come me), ci sono un sacco di opzioni in termini di design del logo che si adattano ad ogni budget. Due posti per trovare designer di logo freelance sono la FreelanceSwitch Job Board e il nuovo sito di Envato, Microlancer.

Passo 1

Navigare verso Canvas> Opzioni tema> Avvio rapido dalla barra laterale di WordPress. Clicca sul Caricare pulsante sotto il Logo personalizzato sezione per caricare un logo.

Passo 2

Navigare verso Canvas> Opzioni tema> Stile generale dalla barra laterale di WordPress. Scegli un colore di sfondo usando il selettore di colori.

Il tuo sito no bisogno avere un colore di sfondo, anche se averne uno è un modo semplice per impostare il tuo sito a prescindere dagli altri.

Passaggio 3

Nella stessa schermata, fare clic su Caricare pulsante sotto il Immagine di sfondo sezione per caricare un'immagine di sfondo. Quindi utilizzare il Ripetizione dell'immagine di sfondoPosizione dell'immagine di sfondoAllegato sfondo opzioni per garantire che l'immagine di sfondo sia presentata nella maniera corretta.


3. Stile generale

Insieme alla tipografia, questa è l'area in cui si può avere probabilmente l'impatto maggiore. Le ampie opzioni di personalizzazione di Canvas ti consentono di modificare completamente il modo in cui il tuo sito appare: dalla barra di navigazione ai widget della barra laterale e del piè di pagina.

Seguendo i passaggi sotto ti imbatterai in varie opzioni relative alla tipografia. Sei libero di sperimentare con loro in questa fase, ma saranno trattati nella quarta e ultima fase di questo tutorial.

Passo 1

Navigare verso Canvas> Opzioni tema> Navigazione principale dalla barra laterale di WordPress. Ti verrà presentato un numero di opzioni, tra cui (ma non solo):

Sebbene l'enorme numero di opzioni possa sembrare travolgente, ognuna è auto-esplicativa.

Inizia modificando i colori. Utilizzare i selettori di colore per definire a Colore di sfondoColore del testo al passaggio del mouseHover Background ColorColore del testo dell'articolo corrente Colore sfondo oggetto attuale. Tieni presente che i colori che scegli devono essere complementari l'uno con l'altro - è poco utile fare in modo che il colore dello sfondo e il colore del testo al passaggio del mouse siano blu (poiché il testo scompare quando si passa il mouse).

Quindi modifica i bordi di navigazione. Definire le larghezze e i colori dei bordi per DivisoreMenu a discesa Bordo, Border Top, Bordo inferiore e Border Left / Right. Infine, se desideri che la barra di navigazione abbia gli angoli arrotondati, seleziona una quantità di pixel nel file Angoli arrotondati di navigazione casella a discesa.

Passo 2

Navigare verso Canvas> Opzioni tema> Widget dalla barra laterale di WordPress. Ti verrà presentato un insieme di opzioni simili a quelle nella Navigazione principale schermo, incluso (ma non limitato a):

C'è solo un colore principale da modificare e questo è il Colore di sfondo del widget. Puoi cambiare drasticamente l'aspetto dei widget del tuo sito alterando il Bordo del widget, Imbottitura di widget Titolo del widget Bordo inferiore. Infine, ti consiglio di impostare Angoli arrotondati Widget allo stesso valore impostato Angoli arrotondati di navigazione nel passaggio precedente per dimostrare la continuità del design.

Passaggio 3

Navigare verso Canvas> Opzioni tema> Piè di pagina dalla barra laterale di WordPress. Ti verrà presentato un insieme quasi identico di opzioni rispetto a quelle che si trovano all'interno del widget schermo, incluso (ma non limitato a):

Raccomando di impostare queste opzioni in modo congruente con le impostazioni del widget. Impostare il Sfondo di piè di pagina insieme a Bordo piè di paginaPiè di pagina inferiore del bordo, Bordo piè di pagina a sinistra / a destra Pioli arrotondati a piè di pagina.


4. Tipografia

Ai fini di questo tutorial, la tipografia si riferisce al carattere, al colore e allo stile di tutto il testo sul tuo sito, dalla navigazione principale al post-meta. A causa della struttura delle opzioni di personalizzazione della tela, le impostazioni tipografiche sono sparse su vari schermi. Ognuna delle seguenti fasi ti mostrerà come modificare la tipografia per ciascuna sezione distinta del tuo sito web.

Passo 1

Navigare verso Canvas> Opzioni tema> Navigazione principale dalla barra laterale di WordPress e seleziona a Stile del carattere di navigazione.

Passo 2

Navigare verso Canvas> Opzioni tema> Post / Pagine dalla barra laterale di WordPress. Ti verrà presentato un numero di opzioni, tra cui (ma non solo):

Le impostazioni più importanti da cambiare sono Stile carattere titolo post / pagina Stile del carattere del testo post / pagina. Questi avranno l'effetto più drammatico in termini di creazione di un design di pagina unico.

Passaggio 3

Navigare verso Canvas> Opzioni tema> Stile generale dalla barra laterale di WordPress. Utilizzare i selettori di colore per definire il Link ColorLink Hover Color.

Passaggio 4

Navigare verso Canvas> Opzioni tema> Widget dalla barra laterale di WordPress.

Cambiare il Titolo del widgetTesto Widget.

Passaggio 5

Navigare verso Canvas> Opzioni tema> Piè di pagina dalla barra laterale di WordPress e cambia Stile del carattere del piè di pagina.


Cosa Avanti?

Ormai dovresti avere un sito web dall'aspetto davvero unico, ma il tuo percorso verso la creazione di un blog autorevole di successo è tutt'altro che finito.

Nei prossimi due post di questa serie mi concentrerò su ciò che puoi fare per rendere il tuo sito più interessante e dinamico per i visitatori, sia in termini di funzionalità che di struttura. Dopodiché, passeremo alla vera nitidezza concentrandoci sulla creazione e sulla promozione di grandi contenuti.

Nel frattempo, se hai domande o commenti, non esitare a contattarci tramite la sezione commenti qui sotto. In bocca al lupo!