Share
Es ist eine entscheidende Komponente für eine erfolgreiche, freiberufliche Karriere, wenn Sie über eine Website verfügen, in der Sie Ihre Dienstleistungen detailliert darstellen und Ihr Portfolio präsentieren können.
Bei der Vielzahl an hochwertigen WordPress-Themes gibt es keinen Grund, warum Sie kein hervorragendes Portfolio für Ihre Arbeit haben können - selbst wenn Sie noch keine Erfahrung mit Web-Entwicklung hatten. Ja, das kannst du selbst machen.
In diesem Lernprogramm werden wir ein erstklassiges WordPress-Theme verwenden und jeden Schritt des Anpassungsprozesses durcharbeiten, um eine Website für Ihr unabhängiges Portfolio zu entwickeln.
Hier sind zwei Überlegungen, die Sie berücksichtigen sollten, bevor Sie dieses Tutorial in Angriff nehmen:
Das richtige WordPress-Theme für Ihr Portfolio auszuwählen, kann schwierig sein. Ich empfehle Ihnen, zunächst die Liste der Portfolio-Themen auf Themeforest zu durchsuchen. Für dieses Tutorial werde ich Scope verwenden, das von Orman Clark (einem kürzlich erschienenen Autor von "Power Elite" bei Themeforest) entworfen wurde. Während die Beispiele spezifisch für Scope sein werden, gelten die allgemeinen Prinzipien für das von Ihnen gewählte Thema.
Kaufen und downloaden Sie das Design Ihrer Wahl und entpacken Sie das Theme-Paket.
Überspringen Sie diesen Schritt nicht. Auch nach dem Abschluss Hunderte von themeninstallationen ich immer noch Lesen Sie zuerst die Dokumentation. Obwohl nicht alle Dokumentationen gleich erstellt werden, unternimmt der Entwickler des Themes in vielen Fällen alles, um das Anpassen des Themas so schmerzlos wie möglich zu gestalten.
Melden Sie sich bei Ihrem WordPress-Admin an und gehen Sie zu Aussehen> Themen. Klicken Sie oben rechts in der Benutzeroberfläche auf "Themen installieren".
Klicken Sie anschließend auf Hochladen Link und dann Datei wählen. Navigieren Sie zum Speicherort Ihres kürzlich heruntergeladenen Designs und wählen Sie die ZIP-Datei des Designs aus.
Hinweis: Stellen Sie sicher, dass die ZIP-Datei, die Sie hochladen, nur das eigentliche Design enthält. Die meisten Premium-Designs werden als ZIP-Datei verpackt, wobei das Design selbst im ursprünglichen Paket enthalten ist. Suchen Sie nach dem Dekomprimieren der ursprünglich heruntergeladenen Datei nach der ZIP-Datei mit dem Namen des Designs.
Klicken Sie jetzt auf aktivieren Sie.
Wenn das Thema aktiviert ist, können Sie die Optionen des Themas überprüfen. Während einige Motivautoren Motivoptionen an einem anderen Ort organisieren, können Sie inIn den meisten Fällen können Sie auf die Optionen zugreifen, indem Sie auf gehen Darstellung> Designoptionen.
Entdecken Sie die Optionen und machen Sie sich mit den Anpassungen des Themas vertraut.
Mit dem Scope-Thema sind unsere Anpassungsmöglichkeiten relativ begrenzt - und das ist gut so! Es ist ein tolles Thema, das sofort einsatzbereit ist. Unser Ziel ist es, einige Stilupdates einzuführen und das Thema zu unserem eigenen zu machen. Von Theme-Optionen gehe zu Styling-Optionen.
In diesem Lernprogramm werden drei verschiedene Anpassungen vorgenommen:
Das Scope-Thema wird mit einem heißen gelben Farbton für eine Hervorhebungsfarbe geliefert, die in der Kopfzeile hinter der Beschriftung angezeigt wird, als Hintergrundfarbe für die Symbole auf der gesamten Site und für Links, wenn Sie mit der Maus darüber fahren. Innerhalb Styling-Optionen füge eine Farbe über die hinzu Markieren Sie und verknüpfen Sie Farbe Möglichkeit.
Du kannst den ... benutzen Farbwähler oder geben Sie einen Farbcode manuell ein. Ich habe Kuler.com benutzt, um einen Grünton zu finden, den ich mochte. Zwei weitere großartige Ressourcen zum Auswählen von Farben sind ColorSchemeDesigner.com und ColourLovers.com.
Als Nächstes ersetzen wir die Standardhintergrundfarbe durch ein Hintergrundbild unserer Wahl. Scope bietet mehrere Optionen zum Arbeiten mit Hintergrundbildern. Für dieses Tutorial fügen wir ein sich wiederholendes Muster hinzu, das den Hintergrund ausfüllt. Wählen Sie zunächst ein Hintergrundbild und klicken Sie auf Bild hochladen, dann unter Standardhintergrund wiederholen, wählen Wiederholen.
Hintergrundmuster sind ein guter Weg. Ich habe dieses Muster auf SubtlePatterns.com gefunden Ausgezeichnet Platz, um Muster zu finden, die frei verwendet werden können. Eine weitere gute Ressource ist DinPattern.com.
Hinweis: Wenn Sie daran interessiert sind, vollständige Hintergrundbilder zu verwenden, besuchen Sie PhotoDune.net. Sie erhalten ein tolles, lizenzfreies Hintergrundbild für 3 oder 4 Dollar, je nachdem, welche Größe Sie wählen. Wenn Sie ein Bild ausgewählt haben, legen Sie das Bild fest Standardhintergrundpositionzu Vollbildschirm.
Das Scope-Thema bietet die Möglichkeit, eigene hinzuzufügen Benutzerdefinierte CSS. Als letzte Änderung ändern wir die Hintergrundfarbe in der Fußzeile. Der Hex-Wert ist auf gesetzt # 222 standardmäßig. Ändern wir das auf einen etwas leichteren Wert von # 333.
Wenn Sie neu in CSS sind, kann dies für Sie wie ein Griechisch aussehen. Hab keine Angst! Sie können das benutzerdefinierte CSS komplett überspringen oder, wenn Sie abenteuerlustiger sind, einen Blick auf diesen Screencast werfen, den ich zusammengestellt habe, um mit Styles in Safari, Chrome und Firefox zu experimentieren.
Neben dem, was wir hier behandelt haben, möchten Sie auch ein Logo hochladen oder die Nur-Text-Logo-Option verwenden, die das Scope-Design bietet. Scope bietet auch die Möglichkeit, eine "Kopfzeile" festzulegen, die über Ihrem Navigationsmenü angezeigt wird. Dies kann ein guter Ort sein, um eine Telefonnummer oder eine kurze Nachricht anzugeben. Dies ist auch ein guter Zeitpunkt, um in Ihrem Analyse-Tracking-Code auf Sie zuzugreifen.
Wenn Sie weitere Anpassungen an dem Thema vornehmen möchten, müssen Sie über die Motivoptionen hinausgehen. Wenn Sie nicht beabsichtigen, das Design zu aktualisieren, können Sie die Designdateien direkt bearbeiten und Änderungen im Code vornehmen. Wenn Sie in Zukunft ein Upgrade durchführen möchten, richten Sie ein untergeordnetes Design ein und nehmen Sie Ihre Änderungen dort vor (empfohlen)..
Hier sind einige Änderungen, die Sie möglicherweise vornehmen möchten:
Das Scope-Design bietet neben den meisten anderen Premium-Themes eine benutzerdefinierte Homepagevorlage und Optionen zum Verwalten des auf der Homepage angezeigten Inhalts. Zuerst müssen wir eine neue Seite erstellen. Gehe zu Seiten> Neu hinzufügen. Gib der Seite einen Namen (ich habe sie gerade "Homepage" genannt) dann im Seitenattribute Wählen Sie das Menü aus Vorlage Dropdown-Menü und wählen Sie die Startseite Vorlage.
Nächster, Veröffentlichen deine Seite. Gehen Sie jetzt zu Einstellungen> Lesen. Oben wirst du sehen Vorderseite wird angezeigt. Wechseln Sie den Umschalter von "Ihre neuesten Beiträge" in "Eine statische Seite". Wählen Sie dann für "Startseite" Ihre kürzlich erstellte Startseite aus der Dropdown-Liste und aus Änderungen speichern.
Eine gute Homepage zu erstellen ist harte Arbeit. Der erste Eindruck ist wichtig - viel. Wenn Sie gerade erst anfangen, haben Sie nicht viel zu tun. Wenn Sie bereits viel Berufserfahrung gesammelt haben, ist eine Homepage ein großartiger Ort, um einige dieser Erfahrungen hervorzuheben, während Besucher (und potenzielle Kunden) weiter auf Ihre Website gezogen werden.
Eine gute Homepage sollte folgendes haben:
Das Scope-Thema (und die meisten Premium-Themen im Portfolio-Stil) hat einen sehr visuellen Fokus für die Homepagevorlage. Für diejenigen unter Ihnen mit einem visuell orientierten Portfolio empfehle ich, dass Sie den Empfehlungen des Themas folgen und die Schieberegler und andere Optionen für die Startseite verwenden, die das Thema bietet.
Eine "About" -Seite ist sehr wichtig. Wenn ein potenzieller Kunde Sie für ein Projekt in Betracht zieht, möchten Sie wissen, was er über Sie tun kann. Eine "Info" -Seite gibt Ihnen die Möglichkeit, Ihre Geschichte zu erzählen und eine persönliche Verbindung herzustellen.
Von Seiten> Neu hinzufügen, Erstellen Sie eine Seite mit dem Namen "About" (oder vielleicht "About Me" oder "About [Your Name]") und arbeiten Sie an dem Inhalt.
Hier sind einige Richtlinien, die Sie beachten sollten:
Und hier sind einige Ideen, die Sie berücksichtigen sollten:
Auf einer "Services" -Seite können potenzielle Kunden wissen, was Sie anbieten, und sie können ihnen bei der Entscheidung helfen, ob Sie ihren Bedürfnissen entsprechen.
In diesem Tutorial konzentrieren wir uns auf die Erstellung einer "Services" -Seite mit den folgenden Attributen:
Von Seiten> Neu hinzufügen, Erstellen Sie eine Seite und geben Sie einen passenden Titel an. Von Seitenattribute wählen Gesamtbreite von dem Vorlage Dropdown-Liste.
Die Leute auf WordPress.com beschreiben einen Shortcode als "einen WordPress-spezifischen Code, mit dem Sie mit wenig Aufwand geschickte Dinge erledigen können". Die Mehrheit der Premium-Theme-Entwickler bietet themenspezifische Shortcodes an, die Sie innerhalb des Themes verwenden können. Um unser dreispaltiges Layout zu erstellen, verwenden wir Kurzcodes.
Sie können die Shortcodes direkt in den Visual Editor schreiben oder im Editor-Menü auf das Shortcode-Symbol klicken (Verfügbarkeit und Aussehen können je nach Thema unterschiedlich sein), um die integrierte Kurzcode-Schnittstelle des Themas zu verwenden.
Sie können den Code für ein Beispiel eines dreispaltigen Shortcodes hier herunterladen.
Das Scope-Thema und ähnliche Portfolio-Themen bieten die Möglichkeit, ein benutzerdefiniertes Hintergrundbild auf Seitenbasis festzulegen. Um dies zu nutzen, scrollen Sie unter dem Haupteditor nach unten und suchen Sie nach Seiteneinstellungen Panel. Wenn es nicht sichtbar ist, gehen Sie zu Bildschirmoptionen (obere rechte Ecke) und vergewissern Sie sich, dass die Option "Seiteneinstellungen" aktiviert ist.
Innerhalb Seiteneinstellungen Klicken Sie auf die Schaltfläche "Durchsuchen", um ein Bild hochzuladen, und klicken Sie anschließend im Bildverwaltungsdialogfeld auf "In Post einfügen", um die Bild-URL zum Feld hinzuzufügen. Da ich ein anderes Musterbild gewählt habe, setze ich in meinem Fall auch "Benutzerdefinierte Hintergrundwiederholung" auf "Wiederholen". Wenn Sie ein Bild in voller Größe verwenden, würden Sie "Benutzerdefinierte Hintergrundposition" entweder auf "Vollbild" oder "Zentriert" setzen, abhängig von der Größe des Bildes.
Eine Seite "Kontakt" bietet potenziellen Kunden die Möglichkeit, Sie zu kontaktieren.
In diesem Tutorial konzentrieren wir uns auf die Erstellung einer Kontaktseite mit der Vorlage "Kontakt", die vom Scope-Thema bereitgestellt wird.
Von Seiten> Neu hinzufügen, Erstellen Sie eine Seite und geben Sie ihr einen passenden Titel (vielleicht "Contact Me!"). Von Seitenattribute wählen Kontakt von dem Vorlage Dropdown-Liste.
Als nächstes ist das Herzstück dieses Tutorials, das Erstellen eines Portfolio-Indexes und Hinzufügen von Einträgen zu unserem Portfolio.
In diesem Tutorial konzentrieren wir uns auf Folgendes:
Von Seiten> Neu hinzufügen, Erstellen Sie eine Seite und geben Sie einen passenden Titel an. Von Seitenattribute wählen Portfolio von dem Vorlage Dropdown-Liste. Die Portfolio-Seite zeigt jetzt automatisch Ihre Einträge an, wenn Sie sie veröffentlichen.
Das Scope-Design verwendet benutzerdefinierte Taxonomien in WordPress, um die Portfolioeinträge nach Typ zu organisieren. Die meisten Portfolio-Themen bieten ähnliche Funktionen.
Von dem Portfolios Menü auswählen Portfolio-Typen.
Jetzt können Sie die Arten von Portfolioeinträgen vordefinieren, die Sie veröffentlichen möchten.
Hier sind einige Vorschläge, die Sie beachten sollten:
Von Portfolios> Neu hinzufügen um Ihren ersten Portfolioeintrag zu erstellen. Vergeben Sie einen passenden Titel und eine Beschreibung. Dann aus dem Portfolio-Typ Wählen Sie die entsprechende (n) Art (en) aus, wobei ein Eintrag leicht zu mehreren Typen gehören kann.
Legen Sie anschließend die visuellen Optionen für den Eintrag fest und laden Sie Ihre Bilder hoch. Je nach "Portfolio-Typ" können Sie stattdessen eine Audio- oder Videodatei einbetten. Im Scope-Thema sind die Einstellungen unter der Schaltfläche organisiert Portfolio-Detaileinstellungen direkt unter dem Haupteditorfenster.
Legen Sie zuletzt ein Ausgewähltes Bild für Ihren Eintrag, der zur Darstellung des Eintrags im Portfolioindex verwendet wird.
Das Scope-Thema ist zusammen mit den meisten Portfolio-Themen für die Arbeit mit einem Blog ausgelegt. Das Hinzufügen eines Blogs ist eine relativ wichtige Entscheidung, und der Einfachheit halber gehen wir davon aus, dass Sie sorgfältig darüber nachgedacht und entschieden haben, dass es sich um eine Übereinstimmung handelt.
Von Seiten> Neu hinzufügen Erstellen Sie eine neue Seite für Ihr Blog. Vergeben Sie einen Titel und lassen Sie den Inhalt leer. Diese Seite wird zum Index für Ihre Blogbeiträge. Gehen Sie als Nächstes zu Einstellungen> Lesen und wählen Sie die von Ihnen erstellte Seite (meine hatte den Titel "Blog") aus der Dropdown-Liste "Beiträge". Speichern Sie Ihre Änderungen.
Da wir nun einige Seiten haben, mit denen wir arbeiten können, ist es an der Zeit, ein Menü hinzuzufügen. Von Aussehen> Menüs ein neues Menü erstellen (ich nenne meine "Navigation").
Als nächstes weisen Sie das Menü mit der Kopfzeile des Themas zu Hauptmenü Dropdown-Liste.
Verwenden Sie jetzt die Seiten Widget rechts unten Themenorte und Benutzerdefinierte Links um die zuletzt erstellten Seiten zuzuweisen. In unserem Fall sind dies "Blog", "Portfolio", "Kontakt", "Dienste" und "Info". Ziehen Sie anschließend die einzelnen Menüelemente per Drag & Drop, um sie entsprechend anzuordnen. Speichern Sie, wenn Sie fertig sind.
Standardmäßig verwendet das Scope-Design vier grundlegende Widgets in der Seitenleiste Ihres Blogbeitrags und Ihrer Seiten. Vielleicht möchten Sie sie so lassen, wie sie sind, aber wahrscheinlich möchten Sie sie anpassen.
Das Scope-Thema und viele davon bieten mehrere Sätze von Widgetpositionen. Für Scope sind diese Standorte:
Um die Widgets anzupassen, gehen Sie zu Aussehen dann Widgets.
Das Arbeiten mit Widgets ist nicht in diesem Tutorial enthalten. Es gibt jedoch einige Empfehlungen, die Sie beachten sollten:
Wütend! Wir sind fast da! Jetzt ist es Zeit, einen Schritt zurückzutreten und eine Überprüfung durchzuführen.
Durchsuchen Sie jeden Seiten- und Portfolioeintrag mit einer Editormentalität und suchen Sie nach Inhalten, die aktualisiert und optimiert werden müssen. Sehen Sie sich jede Seite an, die ein potenzieller Kunde sehen würde, und fordern Sie sich selbst heraus, um sicherzustellen, dass Ihre Arbeits- und Serviceangebote gut präsentiert werden und ein klarer Aufruf zum Handeln erfolgt.
Beachten Sie bei Ihrer Überprüfung die Ideen für zukünftige Updates und weitere Verbesserungen. Beachten Sie vielleicht, was Ihnen am aktuellen Thema am besten gefällt und was Sie in einer zukünftigen Version verbessern möchten (geben Sie dem Autor unbedingt Bescheid) oder vielleicht sogar in einem neuen Thema, das ganz in der Zukunft liegt.
Nachdem Sie eine persönliche Bewertung abgeschlossen haben, senden Sie Ihre Website an ein paar vertraute Freunde und Familienmitglieder und bitten Sie um Feedback. Konzentrieren Sie sich nicht auf die Ästhetik, sondern auf den Inhalt und die Organisation. Fragen Sie sie, ob das, was Sie tun und was Sie anbieten, eindeutig vermittelt wird. Bitten Sie um Vorschläge zur Verbesserung der übermittelten Nachricht.
Eine Peer-Review ist wichtig und bietet den Vorteil, dass Sie einen Einblick in Ihre Arbeit von Dritten erhalten. Wenn Sie gerade erst anfangen, kann die erste Liste der Personen, die Sie zur Überprüfung Ihrer Website bitten, sogar zu Ihren ersten Kunden werden.
Wir haben viel Boden bedeckt. Sie haben sich von einem brandneuen Thema zu einem individuellen Portfolio für Ihr freiberufliches Unternehmen entwickelt. Gut gemacht!
Habe Fragen? Fragen Sie sie in den Kommentaren unten. Wenn sie sind technisch Fragen, die Sie gerne stellen können, richten Sie bitte aus Gründen der Zweckmäßigkeit alle themenspezifischen Fragen an die Autoren des Themas.
Accentsconagua