Share
È un componente fondamentale per una carriera di successo indipendente avere un sito Web per dettagliare i tuoi servizi e mostrare il tuo portafoglio.
Con l'ampia varietà di temi WordPress di alta qualità disponibili, non c'è motivo per cui non si possa avere un portafoglio eccellente per il proprio lavoro, anche se non si è avuto un'esperienza di sviluppo web precedente. Sì, puoi farlo da solo.
In questo tutorial, utilizzeremo un tema WordPress di qualità e lavoreremo attraverso ogni fase del processo di personalizzazione per sviluppare un sito web per il tuo portfolio freelance.
Ecco due considerazioni da tenere a mente prima di affrontare questo tutorial:
Scegliere il giusto tema WordPress per il tuo portfolio può essere difficile. Ti consiglio di iniziare sfogliando l'elenco dei temi del portfolio su Themeforest. Per questo tutorial, userò Scope, progettato da Orman Clark (un recente autore di "Power Elite" su Themeforest). Sebbene gli esempi siano specifici di Scope, i principi generali si applicano a qualsiasi tema tu scelga.
Acquista e scarica il tema a tua scelta e decomprimi il pacchetto tematico.
Non saltare questo passaggio. Anche dopo aver completato centinaia di installazioni a tema I ancora leggere prima la documentazione Anche se non tutta la documentazione è stata creata uguale, in molti casi lo sviluppatore del tema fa di tutto per rendere la personalizzazione del tema il più semplice possibile..
Accedi al tuo amministratore di WordPress e vai a Aspetto> Temi. Fai clic su "Installa Temi" nella parte in alto a destra dell'interfaccia.
Quindi, fai clic su Caricare link e poi Scegli il file. Passare alla posizione del tema scaricato recentemente e selezionare il file zip del tema.
Nota: Assicurati che il file zip che carichi contenga solo il tema reale. La maggior parte dei temi premium viene confezionata come un file zip con il tema stesso compresso all'interno del pacchetto iniziale. Dopo aver decompresso il file inizialmente scaricato, cerca il file zip con il nome del tema.
Ora, fai clic Attivare.
Con il tema attivato, è tempo di rivedere le opzioni del tema. Mentre alcuni autori di temi organizzano le opzioni del tema in una posizione diversa, inla maggior parte dei casi è possibile accedere alle opzioni andando a Aspetto> Opzioni tema.
Esplora le opzioni e familiarizza con le personalizzazioni offerte dal tema.
Con il tema Scope, la nostra gamma di personalizzazioni è relativamente limitata - il che è perfetto! È un grande tema fuori dagli schemi. Il nostro obiettivo è implementare alcuni aggiornamenti di stile e rendere il tema nostro. A partire dal Opzioni del tema vai a Opzioni di stile.
Per questo tutorial, affronteremo tre diverse personalizzazioni:
Il tema Scope viene fornito con una calda tonalità di giallo per un colore di evidenziazione, che viene visualizzato nell'intestazione dietro la didascalia, come colore di sfondo per le icone in tutto il sito e sui collegamenti quando si passa il mouse su di essi. Entro Opzioni di stile aggiungi un colore tramite il Evidenzia e Colore collegamento opzione.
Puoi usare il Color Picker o inserisci manualmente un codice colore. Ho usato Kuler.com per trovare un'ombra di verde che mi è piaciuta. Altre due grandi risorse per la scelta dei colori sono ColorSchemeDesigner.com e ColourLovers.com.
In seguito, sostituiremo il colore di sfondo predefinito con un'immagine di sfondo a nostra scelta. Scope offre diverse opzioni per lavorare con le immagini di sfondo. Per questo tutorial, aggiungeremo un pattern ripetuto che riempie lo sfondo. Innanzitutto, scegli un'immagine di sfondo e fai clic Carica immagine, quindi, sotto Ripetizione sfondo predefinita, scegliere Ripetere.
I pattern di sfondo sono un ottimo modo per andare. Ho trovato questo modello su SubtlePatterns.com, che è un eccellente posto per trovare modelli che sono liberi di usare. Un'altra buona risorsa è DinPattern.com.
Nota: Se sei interessato all'utilizzo di immagini di sfondo completo, consulta PhotoDune.net - puoi ottenere un'ottima immagine di sfondo senza royalty per $ 3 o $ 4, a seconda della dimensione scelta. Una volta scelta un'immagine, imposta il Posizione di sfondo predefinitaa A schermo intero.
Il tema Scope offre la possibilità di aggiungere il nostro CSS personalizzato. Come ultimo tocco, cambieremo il colore di sfondo sul piè di pagina. Il valore esadecimale è impostato su # 222 per impostazione predefinita. Passiamo a un valore leggermente più leggero di # 333.
Ora, se sei nuovo ai CSS, potrebbe sembrare greco per te. Non avere paura! Puoi saltare del tutto il CSS personalizzato oppure, se ti senti più avventuroso, dai un'occhiata a questo screencast che ho messo insieme su come sperimentare gli stili in Safari, Chrome e Firefox.
Oltre a ciò che abbiamo trattato qui, ti consigliamo di caricare un logo o utilizzare l'opzione del logo in testo semplice offerta dal tema Scope. Scope offre anche la possibilità di impostare una "Intestazione di intestazione" che appare sopra il menu di navigazione. Questo può essere un ottimo posto per includere un numero di telefono o un breve messaggio. Questo è anche un buon momento per inserire qualsiasi codice di tracciamento di analisi che possiedi.
Se desideri andare ancora oltre con le personalizzazioni del tema, devi andare oltre le opzioni del tema. Innanzitutto, se non si prevede di aggiornare il tema, è possibile modificare direttamente i file del tema e apportare modifiche al codice. Se desideri la possibilità di eseguire l'upgrade in futuro, imposta un tema figlio e apporta le modifiche necessarie (consigliato).
Ecco alcune modifiche che potresti voler apportare:
Il tema Scope, insieme alla maggior parte degli altri temi premium, fornisce un modello di home page personalizzato e opzioni per la gestione dei contenuti visualizzati nella home page. Per prima cosa, dobbiamo creare una nuova pagina. Vai a Pagine> Aggiungi nuovo. Dare un nome alla pagina (l'ho appena chiamato "Homepage") quindi, nel Attributi della pagina menu, selezionare il Modello menu a discesa e scegliere il Home Page modello.
Il prossimo, Pubblicare la tua pagina. Ora vai Impostazioni> Lettura. In cima, vedrai Visualizza la prima pagina. Cambia l'interruttore da "I tuoi ultimi post" a "Una pagina statica", quindi per "Pagina iniziale" scegli la tua home page creata di recente dall'elenco a discesa e Salva I Cambiamenti.
Creare una buona homepage è un duro lavoro. Le prime impressioni contano molto. Quando hai appena iniziato, non avrai molto con cui lavorare. Se hai già avuto un sacco di esperienza lavorativa, però, una homepage è un ottimo posto per mettere in luce alcune di queste esperienze mentre i visitatori (e i potenziali clienti) vengono ulteriormente inseriti nel tuo sito.
Una buona homepage dovrebbe avere il seguente:
Il tema Scope (e la maggior parte dei temi premium in stile "Portfolio") ha un focus molto visivo per il modello di homepage. Per quelli di voi con un portfolio visivamente orientato, vi consiglio di seguire i consigli sui temi e utilizzare i cursori e le altre opzioni della homepage che il tema offre.
Una pagina "Informazioni" è molto importante. Quando un potenziale cliente ti considera per un progetto, vuole imparare quello che può su di te. Una pagina "Informazioni" ti dà l'opportunità di raccontare la tua storia e stabilire una connessione personale.
A partire dal Pagine> Aggiungi nuovo, crea una pagina chiamata "Informazioni" (o forse "Informazioni personali" o "Informazioni su [Il tuo nome]") e inizia a lavorare sul contenuto.
Ecco alcune linee guida da tenere a mente:
E qui ci sono alcune idee da considerare:
Una pagina "Servizi" consente ai potenziali clienti di sapere cosa offri e possono aiutarli a decidere se si è in grado di soddisfare le loro esigenze.
Per questo tutorial, ci concentreremo sulla creazione di una pagina "Servizi" con i seguenti attributi:
A partire dal Pagine> Aggiungi nuovo, creare una pagina e dargli un titolo appropriato. A partire dal Attributi della pagina scegliere Intera larghezza dal Modello cadere in picchiata.
I membri di WordPress.com descrivono uno shortcode come "un codice specifico per WordPress che ti permette di fare cose belle con pochissimo sforzo". La maggior parte degli sviluppatori di temi premium fornisce shortcode specifici per tema che è possibile utilizzare all'interno del tema. Per creare il nostro layout a tre colonne faremo uso di shortcode.
È possibile scrivere gli shortcode direttamente in Visual Editor oppure, dal menu dell'editor, fare clic sull'icona di shortcode (la sua disponibilità e l'aspetto possono variare da tema a tema) per utilizzare l'interfaccia shortcode incorporata del tema.
Puoi prendere il codice per uno shortcode di esempio tre colonne qui.
Il tema Scope e i temi del portfolio come questo offrono la possibilità di impostare un'immagine di sfondo personalizzata per ogni pagina. Per fare uso di questo, scorrere verso il basso sotto l'editor principale e cercare il Impostazioni della pagina pannello. Se non è visibile, vai a Opzioni dello schermo (in alto a destra) e assicurarsi che l'opzione "Impostazioni pagina" sia selezionata.
Entro Impostazioni della pagina fare clic sul pulsante "Sfoglia" per caricare un'immagine e quindi fare clic su "Inserisci per post" (all'interno della finestra di dialogo di gestione delle immagini) per aggiungere l'URL dell'immagine al campo. Nel mio caso, dal momento che ho scelto un'altra immagine di pattern, imposterò anche "Custom Background Repeat" su "Repeat". Se si utilizza un'immagine a dimensione intera, impostare "Posizione sfondo personalizzata" su "Schermo intero" o "Centrato", a seconda delle dimensioni dell'immagine.
Una pagina "Contatto" offre ai potenziali clienti opzioni per contattarti.
Per questo tutorial, ci concentreremo sulla creazione di una pagina "Contatto" utilizzando il modello "Contatto", fornito dal tema Scope.
A partire dal Pagine> Aggiungi nuovo, crea una pagina e assegnagli un titolo appropriato (forse, "Contattami!"). A partire dal Attributi della pagina scegliere Contatto dal Modello cadere in picchiata.
Il prossimo è il cuore di questo tutorial, creando un indice di portafoglio e aggiungendo voci al nostro portafoglio.
Per questo tutorial, ci concentreremo sul conseguire quanto segue:
A partire dal Pagine> Aggiungi nuovo, creare una pagina e dargli un titolo appropriato. A partire dal Attributi della pagina scegliere Portafoglio dal Modello cadere in picchiata. La pagina del portfolio ora mostrerà automaticamente le tue voci mentre le pubblichi.
Il tema Scope si avvale di tassonomie personalizzate in WordPress per consentire di organizzare le voci del portfolio per tipo. La maggior parte dei temi Portfolio offre funzionalità simili.
Dal portafogli menu scegli Tipi di portafoglio.
Ora puoi predefinire i tipi di voci del portfolio che prevedi di pubblicare.
Ecco alcuni suggerimenti da tenere a mente:
A partire dal Portafogli> Aggiungi nuovo per creare il tuo primo ingresso nel portfolio. Dagli un titolo appropriato e una descrizione. Quindi dal Tipo di portafoglio interfaccia, scegliere il tipo appropriato (s), tenendo presente che una voce può facilmente appartenere a più di un tipo.
Quindi, imposta le opzioni visive per la voce e carica le tue immagini oppure, in base al "Tipo di portfolio", puoi invece incorporare un file audio o video. Nel tema Scope, le impostazioni sono organizzate sotto il Impostazioni del dettaglio del portfolio appena sotto la finestra principale dell'editor.
Infine, imposta a Immagine in primo piano per la tua iscrizione, che verrà utilizzata per rappresentare la voce nell'indice del portafoglio.
Il tema Scope, insieme alla maggior parte dei temi del portfolio, è stato creato per funzionare con un blog. Aggiungere un blog è una decisione relativamente importante e, per semplicità, assumeremo che tu abbia pensato attentamente e deciso che era una corrispondenza.
A partire dal Pagine> Aggiungi nuovo crea una nuova pagina per il tuo blog. Dagli un titolo e lascia il contenuto vuoto. Questa pagina diventerà l'indice per i tuoi post sul blog. Avanti, vai a Impostazioni> Lettura e scegli la pagina che hai creato (il mio era intitolato "Blog") dal menu a discesa "Pagina Posts". Salva le tue modifiche.
Ora che abbiamo alcune pagine su cui lavorare è ora di aggiungere un menu. A partire dal Aspetto> Menu crea un nuovo menu (sto chiamando il mio "Navigazione").
Quindi, assegna il menu all'intestazione del tema usando il Menù primario cadere in picchiata.
Ora, usa il pagine widget, proprio sotto Luoghi a tema e Link personalizzati per assegnare le pagine recenti che hai creato. Nel nostro caso sono inclusi "Blog", "Portfolio", "Contatti", "Servizi" e "Informazioni". Quindi, trascina e rilascia ciascuna voce di menu per ordinarli di conseguenza. Salva quando hai finito.
Per impostazione predefinita, il tema Scope utilizzerà un set di quattro widget di base nei post del blog e nella barra laterale delle pagine. Mentre puoi decidere di lasciarli così com'è, è probabile che tu voglia personalizzarli.
Il tema Scope, ea molti piace, offre più set di posizioni di widget. Per Scope, quelle posizioni sono:
Per personalizzare i widget, vai a Aspetto poi widget.
Lavorare con i widget non rientra nell'ambito di questo tutorial, ma ecco alcuni consigli da tenere a mente:
Meno male! Ci siamo quasi! Ora è il momento di fare un passo indietro e fare una revisione.
Passare attraverso ogni pagina e voce del portfolio con una mentalità editoriale, alla ricerca di contenuti che necessitano di aggiornamento e messa a punto. Guarda ogni pagina come un potenziale cliente lo vedrebbe, sfidandoti per assicurarti che le tue offerte di lavoro e di servizio siano presentate bene insieme a un chiaro invito all'azione.
Durante la revisione, prendere nota delle idee per aggiornamenti futuri e ulteriori miglioramenti. Nota, forse, cosa ti piace di più del tema attuale e cosa ti piacerebbe vedere migliorato in una versione futura (assicurati di far sapere all'autore) o forse anche in un nuovo tema in fondo alla strada.
Una volta completata la revisione personale, invia il tuo sito Web a pochi amici fidati e familiari e chiedi feedback. Non concentrarti sul feedback sull'estetica, ma sul contenuto e sull'organizzazione. Chiedi loro se ciò che fai e ciò che stai offrendo è chiaramente trasmesso. Chiedi qualche suggerimento per migliorare il messaggio trasmesso.
Una peer review è importante e ha il vantaggio di offrire una prospettiva di terze parti sul tuo lavoro e, se sei appena agli inizi, il primo elenco di persone che chiedi di recensire il tuo sito potrebbe addirittura diventare il tuo primo cliente.
Abbiamo coperto molto terreno. Sei passato da un tema nuovo di zecca a un portafoglio personalizzato per il tuo business freelance. Molto bene!
Hai domande? Chiedi loro nei commenti qui sotto. Se lo sono tecnico domande che siete invitati a chiedere, anche se per ragioni di convenienza, per favore indirizzate le domande specifiche ai temi stessi agli autori dei temi.
Accentsconagua