Share
Het is een essentieel onderdeel voor een succesvolle freelance carrière om een website te hebben om uw services te detailleren en uw portfolio te presenteren.
Met de grote verscheidenheid aan WordPress-thema's van hoge kwaliteit die beschikbaar zijn, is er geen reden waarom u geen uitstekende portfolio voor uw werk kunt hebben - zelfs als u nog geen ervaring hebt opgedaan met webontwikkeling. Ja, je kunt dit zelf doen.
In deze zelfstudie nemen we een premium WordPress-thema en werken we elke stap in het aanpassingsproces om een website voor uw freelance-portfolio te ontwikkelen.
Hier zijn twee overwegingen waarmee u rekening moet houden voordat u deze zelfstudie aanpakt:
Het kiezen van het juiste WordPress-thema voor uw portfolio kan moeilijk zijn. Ik raad u aan om eerst door de lijst met portfoliothema's op Themeforest te bladeren. Voor deze tutorial gebruik ik Scope, ontworpen door Orman Clark (een recente "Power Elite" -auteur op Themeforest). Hoewel de voorbeelden specifiek zijn voor Scope, zijn de algemene principes van toepassing op welk thema u ook kiest.
Koop en download het thema van je keuze en pak het themapakket uit.
Sla deze stap niet over. Zelfs na het voltooien honderden van thematische installaties I nog steeds lees eerst de documentatie. Hoewel niet alle documentatie gelijk is gemaakt, doet de thema-ontwikkelaar in meer gevallen dan niet zijn uiterste best om het thema zo pijnloos mogelijk aan te passen..
Log in op uw WordPress Admin en ga naar Uiterlijk> Thema's. Klik op 'Thema's installeren' in de rechterbovenhoek van de interface.
Klik vervolgens op de Uploaden link en dan Kies bestand. Blader naar de locatie van uw onlangs gedownloade thema en selecteer het themarit zipbestand.
Notitie: Zorg ervoor dat het zipbestand dat je uploadt alleen het eigenlijke thema bevat. De meeste premium-thema's worden verpakt als een zip-bestand met het thema zelf geritst in het oorspronkelijke pakket. Nadat u het bestand hebt gecomprimeerd dat u aanvankelijk hebt gedownload, zoekt u naar het zipbestand met de naam van het thema.
Klik nu Activeren.
Met het thema geactiveerd, is het tijd om thema-opties te bekijken. Hoewel sommige thema-auteurs themakeuzes organiseren op een andere locatie, inIn de meeste gevallen heeft u toegang tot de opties door naar Uiterlijk> Thema-opties.
Verken de opties en maak uzelf vertrouwd met de aanpassingen die het thema biedt.
Met het Scope-thema zijn onze aanpassingsmogelijkheden relatief beperkt - en dat is prima! Het is out-of-the-box een geweldig thema. Ons doel is om enkele stijlupdates te implementeren en het thema het onze eigen te maken. Van thema opties ga naar Stylingopties.
Voor deze zelfstudie gaan we drie verschillende aanpassingen aan:
Het Scope-thema wordt geleverd met een warme schaduw van geel voor een markeerkleur, die wordt weergegeven in de koptekst achter het bijschrift, als de achtergrondkleur voor de pictogrammen op de hele site en op koppelingen wanneer u eroverheen beweegt. Binnen Stylingopties voeg een kleur toe via de Markeer en koppel kleur keuze.
U kunt de Kleur kiezer of voer handmatig een kleurcode in. Ik heb Kuler.com gebruikt om een kleur groen te vinden die ik leuk vond. Twee andere geweldige bronnen voor het kiezen van kleuren zijn ColorSchemeDesigner.com en ColourLovers.com.
Vervolgens vervangen we de standaard achtergrondkleur door een achtergrondafbeelding van onze keuze. Scope biedt verschillende opties voor het werken met achtergrondafbeeldingen. Voor deze zelfstudie gaan we een herhalend patroon toevoegen dat de achtergrond vult. Kies eerst een achtergrondafbeelding en klik Afbeelding uploaden, dan, onder Standaard achtergrondherhaling, Kiezen Herhaling.
Achtergrondpatronen zijn een geweldige manier om te gaan. Ik vond dit patroon op SubtlePatterns.com, dat is een uitstekend plaats om patronen te vinden die gratis te gebruiken zijn. Een andere goede bron is DinPattern.com.
Notitie: Als je geïnteresseerd bent in het gebruik van volledige achtergrondafbeeldingen, ga dan naar PhotoDune.net - je kunt een geweldige, royalty-vrije achtergrondafbeelding krijgen voor $ 3 of $ 4, afhankelijk van de maat die je kiest. Nadat u een afbeelding hebt gekozen, stelt u de Standaard achtergrondpositienaar Volledig scherm.
Het Scope-thema biedt de mogelijkheid om onze eigen toe te voegen Aangepaste CSS. Als laatste aanraking gaan we de achtergrondkleur op de voettekst wijzigen. De hex-waarde is ingesteld op # 222 standaard. Laten we dat veranderen naar een iets lichtere waarde van # 333.
Nu, als je nieuw bent bij CSS, kan dat voor jou Grieks lijken. Geen schrik hebben! Je kunt de aangepaste CSS helemaal overslaan, of, als je je meer avontuurlijk voelt, een kijkje nemen in deze screencast die ik samen heb opgesteld over hoe je kunt experimenteren met stijlen in Safari, Chrome en Firefox.
Naast wat we hier besproken hebben, wil je ook een logo uploaden of de platte tekst-optie gebruiken die het Scope-thema biedt. Scope biedt ook de mogelijkheid om een "koptekst kop" in te stellen die boven uw navigatiemenu wordt weergegeven. Dit kan een geweldige plek zijn om een telefoonnummer of een kort bericht op te nemen. Dit is ook een goed moment om te laten zien welke Analytics-trackingcode u heeft.
Als u nog verder wilt gaan met aanpassingen aan het thema, moet u verder gaan dan de thema-opties. Ten eerste, als u niet van plan bent om het thema te upgraden, kunt u de themabestanden rechtstreeks bewerken en wijzigingen aanbrengen in de code. Als u de mogelijkheid wilt hebben om in de toekomst te upgraden, stelt u een kindthema in en brengt u daar uw wijzigingen aan (aanbevolen).
Hier zijn enkele wijzigingen die u mogelijk wilt aanbrengen:
Het Scope-thema biedt, samen met de meeste andere premiumthema's, een aangepaste startsjabloon en opties voor het beheren van welke inhoud op de startpagina wordt weergegeven. Eerst moeten we een nieuwe pagina maken. Ga naar Pagina's> Nieuw toevoegen. Geef de pagina een naam (ik noemde het gewoon 'Homepage') en vervolgens in de Paginakenmerken menu, selecteert u de Sjabloon vervolgkeuzemenu en kies het Startpagina sjabloon.
volgende, Publiceren jouw pagina. Ga nu naar Instellingen> Lezen. Aan de bovenkant, zult u zien Voorpagina wordt weergegeven. Schakel de omschakeling van "Uw laatste berichten" naar "Een statische pagina" en kies vervolgens voor "Voorpagina" uw onlangs gemaakte startpagina uit de vervolgkeuzelijst en Wijzigingen opslaan.
Het creëren van een goede startpagina is hard werken. Eerste indrukken zijn belangrijk - veel. Als je net begint, heb je niet veel om mee te werken. Als je al veel werkervaring hebt gehad, is een startpagina een geweldige plek om een deel van die ervaring te benadrukken terwijl je bezoekers (en potentiële klanten) verder naar je site trekt.
Een goede startpagina zou het volgende moeten hebben:
Het Scope-thema (en de meeste premium-thema's in de 'Portfolio'-stijl) heeft een zeer visuele focus voor de startsjabloon. Voor degenen onder u met een visueel georiënteerde portfolio, raad ik u aan de themawetgevingen te volgen en gebruik te maken van de schuifknoppen en andere homepagina-opties die het thema biedt.
Een "Over" -pagina is erg belangrijk. Wanneer een potentiële klant je als project beschouwt, willen ze weten wat ze kunnen over jou. Een "Over" -pagina geeft u de mogelijkheid om uw verhaal te vertellen en een persoonlijke verbinding tot stand te brengen.
Van Pagina's> Nieuw toevoegen, een pagina maken met de naam "Over" (of misschien "Over mij" of "Over [Uw naam]") en aan de slag gaan met de inhoud.
Hier zijn enkele richtlijnen om in gedachten te houden:
En hier zijn enkele ideeën om te overwegen:
Een "Services" -pagina laat potentiële klanten weten wat u aanbiedt en kan hen helpen beslissen of u een match bent voor hun behoeften.
Voor deze zelfstudie gaan we ons richten op het maken van een "Services" -pagina met de volgende kenmerken:
Van Pagina's> Nieuw toevoegen, maak een pagina en geef hem een toepasselijke titel. Van Paginakenmerken Kiezen Volledige breedte van de Sjabloon laten vallen.
De mensen van WordPress.com beschrijven een shortcode als "een WordPress-specifieke code waarmee je met weinig moeite handige dingen kunt doen." De meeste ontwikkelaars van premiumthema's bieden themaspecifieke shortcodes die u kunt gebruiken binnen het thema. Om onze lay-out met drie kolommen te maken, maken we gebruik van shortcodes.
U kunt de shortcodes rechtstreeks in de Visual Editor schrijven of, vanuit het editormenu, op het shortcode-pictogram klikken (de beschikbaarheid en het uiterlijk ervan kunnen variëren van thema tot thema) om de ingebouwde shortcode-interface van het thema te gebruiken.
U kunt de code voor een voorbeeld van een shortcode met drie kolommen hier vinden.
Het Scope-thema en portfolio-thema's zoals het, bieden de mogelijkheid om een aangepaste achtergrondafbeelding in te stellen op basis van een pagina. Om hier gebruik van te maken, scrolt u omlaag onder de hoofdeditor en zoekt u naar Pagina-instellingen paneel. Als het niet zichtbaar is, ga dan naar Schermopties (rechterbovenhoek) en zorg ervoor dat de optie "Pagina-instellingen" is aangevinkt.
Binnen Pagina-instellingen klik op de knop "Bladeren" om een afbeelding te uploaden en klik vervolgens op "Invoegen aan bericht" (in het dialoogvenster Afbeelding beheren) om de afbeeldings-URL aan het veld toe te voegen. In mijn geval, omdat ik een ander patroonafbeelding heb gekozen, zal ik ook "Aangepaste achtergrondherhaling" instellen op "Herhalen". Als u een afbeelding op volledige grootte gebruikt, stelt u "Aangepaste achtergrondpositie" in op "Volledig scherm" of "Gecentreerd", afhankelijk van de grootte van de afbeelding.
Een "Contact" -pagina biedt potentiële klanten de mogelijkheid om contact met u op te nemen.
Voor deze zelfstudie gaan we ons richten op het maken van een "Contact" -pagina met behulp van de "Contact" -sjabloon, verstrekt door het Scope-thema.
Van Pagina's> Nieuw toevoegen, maak een pagina en geef deze een toepasselijke titel (misschien: "Contacteer mij!"). Van Paginakenmerken Kiezen Contact van de Sjabloon laten vallen.
De volgende is de kern van deze tutorial, het maken van een portfolio-index en het toevoegen van items aan onze portfolio.
Voor deze zelfstudie gaan we ons richten op het volbrengen van het volgende:
Van Pagina's> Nieuw toevoegen, maak een pagina en geef hem een toepasselijke titel. Van Paginakenmerken Kiezen Portefeuille van de Sjabloon laten vallen. De portfolio-pagina toont nu automatisch uw invoer terwijl u ze publiceert.
Het Scope-thema maakt gebruik van aangepaste taxonomieën in WordPress om u portfolio-items te organiseren op basis van type. De meeste Portfolio-thema's bieden vergelijkbare functionaliteit.
Van de portefeuilles menu kiezen Portfolio Types.
U kunt nu de soorten portfolio-items definiëren die u verwacht te publiceren.
Hier zijn een paar suggesties om in gedachten te houden:
Van Portfolio's> Nieuw toevoegen om uw eerste portfolio-item te maken. Geef het een toepasselijke titel en een beschrijving. Dan van de Portfolio Type interface, kies het / de juiste type (s), houd er rekening mee dat een item gemakkelijk tot meer dan één type kan behoren.
Stel vervolgens de visuele opties voor het item in en upload uw afbeeldingen of, afhankelijk van het "Portfolio Type", kunt u in plaats daarvan een audio- of videobestand insluiten. In het Scope-thema zijn de instellingen georganiseerd onder de Portfolio Detail Instellingen net onder het hoofdvenster van de editor.
Stel als laatste in Uitgelichte afbeelding voor uw invoer, die zal worden gebruikt om de vermelding in de portfolio-index te vertegenwoordigen.
Het Scope-thema, samen met de meeste portfoliothema's, is gemaakt om met een blog te werken. Het toevoegen van een blog is een relatief belangrijke beslissing en omwille van de eenvoud gaan we ervan uit dat je het goed hebt nagedacht en hebt besloten dat het een match was.
Van Pagina's> Nieuw toevoegen maak een nieuwe pagina voor je blog. Geef het een titel en laat de inhoud leeg. Deze pagina wordt de index voor je blogposts. Ga vervolgens naar Instellingen> Lezen en kies de pagina die je hebt gemaakt (de mijne was getiteld 'Blog') van de vervolgkeuzelijst 'Posts'. Sla uw wijzigingen op.
Nu we enkele pagina's hebben om mee te werken, is het tijd om een menu toe te voegen. Van Uiterlijk> Menu's maak een nieuw menu aan (ik noem mijn "navigatie").
Wijs vervolgens het menu toe aan de themakop met behulp van de Eerste menu laten vallen.
Gebruik nu de Pages widget, rechtsonder Thema-locaties en Aangepaste koppelingen om de recente pagina's toe te wijzen die u hebt gemaakt. In ons geval omvat dit 'Blog', 'Portfolio', 'Contact', 'Services' en 'Over'. Sleep vervolgens elk menu-item slepen en neerzetten om ze dienovereenkomstig te bestellen. Opslaan als je klaar bent.
Standaard gebruikt het Scope-thema een reeks van vier basiswidgets op uw zijbalk van uw blogposts en pagina's. Hoewel je ze misschien wilt laten zoals ze zijn, is de kans groot dat je ze wilt aanpassen.
Het Scope-thema, en veel soortgelijke, bieden meerdere sets widgetlocaties. Voor Scope zijn die locaties:
Ga naar om de widgets aan te passen Verschijning dan widgets.
Werken met widgets valt buiten het bestek van deze zelfstudie, maar hier zijn enkele aanbevelingen waarmee u rekening moet houden:
Oef! We zijn er bijna! Nu is het tijd om een stap terug te doen en een beoordeling te maken.
Doorloop elke pagina en portfolio-invoer met een editormentaliteit, op zoek naar inhoud die moet worden bijgewerkt en verfijnd. Kijk naar elke pagina zoals een potentiële klant het zou zien, daag jezelf uit om ervoor te zorgen dat je werk- en serviceaanbiedingen goed worden gepresenteerd, samen met een duidelijke oproep tot actie.
Houd tijdens uw beoordeling rekening met ideeën voor toekomstige updates en verdere verbeteringen. Let op, misschien, wat je het leukste vindt aan het huidige thema en wat je graag zou zien verbeterd in een toekomstige versie (laat de auteur dit weten) of misschien zelfs in een nieuw thema helemaal op de weg.
Zodra u een persoonlijke beoordeling hebt voltooid, stuurt u uw website naar een paar vertrouwde vrienden en familie en vraagt u om feedback. Richt je niet op feedback op de esthetiek, maar op de inhoud en organisatie. Vraag hen of wat je doet en wat je aanbiedt, duidelijk wordt overgebracht. Vraag om suggesties om de boodschap te verbeteren.
Een peer review is belangrijk en biedt het voordeel van een perspectief van derden op uw werk. Als u net begint, kan de eerste lijst met mensen die u vraagt om uw site te beoordelen zelfs uw eerste klanten worden..
We hebben veel terrein afgedekt. U bent van een geheel nieuw thema naar een portfolio op maat gegaan voor uw freelance bedrijf. Goed gedaan!
Vragen hebben? Stel ze in de reacties hieronder. Als ze dat zijn technisch vragen die u van harte kunt vragen, maar ter wille van het goede doel, kunt u eventuele themaspecifieke vragen richten aan de thema-auteurs zelf.
Accentsconagua