Share
Un site Web détaillant vos services et mettant en valeur votre portefeuille est un élément essentiel d’une carrière réussie en freelance..
Avec la grande variété de thèmes WordPress de haute qualité disponibles, il n’ya aucune raison pour que vous ne puissiez pas avoir un excellent portfolio pour votre travail, même si vous n’avez pas d’expérience en développement Web. Oui, vous pouvez le faire vous-même.
Dans ce didacticiel, nous allons utiliser un thème WordPress premium et suivre chaque étape du processus de personnalisation pour développer un site Web pour votre portefeuille indépendant..
Il convient de garder à l'esprit deux considérations avant de s'attaquer à ce didacticiel:
Choisir le bon thème WordPress pour votre portefeuille peut être difficile. Je vous recommande de commencer par parcourir la liste des thèmes de portefeuille sur Themeforest. Pour ce tutoriel, je vais utiliser Scope, conçu par Orman Clark (un auteur récent de "Power Elite" sur Themeforest). Bien que les exemples soient spécifiques à Scope, les principes généraux s’appliquent quel que soit le thème choisi..
Achetez et téléchargez le thème de votre choix et décompressez-le..
Ne sautez pas cette étape. Même après avoir terminé des centaines des installations thématiques I encore lisez d'abord la documentation. Bien que toute la documentation ne soit pas identique, dans la plupart des cas, le développeur de thèmes met tout en œuvre pour rendre la personnalisation du thème aussi simple que possible..
Connectez-vous à votre administrateur WordPress et accédez à Apparence> Thèmes. Cliquez sur "Installer les thèmes" en haut à droite de l'interface..
Ensuite, cliquez sur le Télécharger lien et puis Choisir le fichier. Accédez à l'emplacement de votre thème récemment téléchargé et sélectionnez le fichier zip du thème..
Remarque: Assurez-vous que le fichier zip que vous téléchargez ne contient que le thème réel. La plupart des thèmes premium sont regroupés sous forme de fichier zip, le thème lui-même étant compressé à l'intérieur du package initial. Après avoir décompressé le fichier que vous avez initialement téléchargé, recherchez le fichier zip avec le nom du thème..
Maintenant, cliquez Activer.
Avec le thème activé, il est temps de passer en revue les options de thème. Certains auteurs de thèmes organisent les options de thème dans un endroit différent,la plupart des cas, vous pouvez accéder aux options en allant à Apparence> Options de thème.
Explorez les options et familiarisez-vous avec les personnalisations proposées par le thème.
Avec le thème Scope, notre gamme de personnalisations est relativement limitée - ce qui est bien! C'est un excellent thème prêt à l'emploi. Notre objectif est d’implémenter quelques mises à jour de style et de personnaliser le thème. De Options du thème aller à Options de style.
Pour ce tutoriel, nous allons aborder trois personnalisations différentes:
Le thème Scope est livré avec une teinte jaune vif pour une couleur de surbrillance, qui apparaît dans l'en-tête derrière la légende, en tant que couleur d'arrière-plan pour les icônes de tout le site et sur les liens lorsque vous les survolez. Dans Options de style ajouter une couleur via le Couleur de surbrillance et de lien option.
Vous pouvez utiliser le Pipette à couleurs ou entrez manuellement un code de couleur. J'ai utilisé Kuler.com pour trouver une nuance de vert qui me plaisait. ColorSchemeDesigner.com et ColourLovers.com sont deux autres bonnes ressources pour choisir les couleurs..
Ensuite, nous allons remplacer la couleur d'arrière-plan par défaut par une image d'arrière-plan de notre choix. Scope offre plusieurs options pour travailler avec des images d’arrière-plan. Pour ce tutoriel, nous allons ajouter un motif répétitif qui remplit l'arrière-plan. Tout d'abord, choisissez une image de fond et cliquez Télécharger une image, puis, sous Répétition d'arrière-plan par défaut, choisir Répéter.
Les motifs de fond sont un excellent moyen d’aller. J'ai trouvé ce motif sur SubtlePatterns.com, qui est un excellent endroit pour trouver des modèles qui sont libres d’utiliser. DinPattern.com est une autre bonne ressource..
Remarque: Si vous souhaitez utiliser des images d'arrière-plan complètes, visitez PhotoDune.net. Vous pouvez obtenir une excellente image d'arrière-plan, sans redevance, pour 3 $ ou 4 $, selon la taille que vous choisissez. Une fois que vous avez choisi une image, définissez le paramètre Position d'arrière-plan par défautà Plein écran.
Le thème Scope offre la possibilité d’ajouter notre propre CSS personnalisé. En dernier lieu, nous allons changer la couleur de fond du pied de page. La valeur hexadécimale est définie sur # 222 par défaut. Changeons cela en une valeur légèrement plus légère de # 333.
Maintenant, si vous débutez dans CSS, cela peut vous paraître grec. N'ai pas peur! Vous pouvez ignorer complètement le code CSS personnalisé ou, si vous vous sentez plus aventureux, jeter un coup d'œil à cette capture d'écran que j'ai composée pour expérimenter des styles dans Safari, Chrome et Firefox..
Au-delà de ce que nous avons couvert ici, vous voudrez également télécharger un logo ou utiliser l'option de logo en texte brut offerte par le thème Scope. Scope offre également la possibilité de définir une "légende d'en-tête" qui apparaît au-dessus de votre menu de navigation. Cela peut être un bon endroit pour inclure un numéro de téléphone ou un message court. C’est également un bon moment pour insérer tout code de suivi d’analyse que vous avez..
Si vous souhaitez aller encore plus loin avec les personnalisations du thème, vous devrez aller au-delà des options de thème. Tout d'abord, si vous ne prévoyez pas de mettre à niveau le thème, vous pouvez modifier les fichiers de thème directement et apporter des modifications au code. Si vous souhaitez pouvoir effectuer la mise à niveau ultérieurement, configurez un thème enfant et apportez vos modifications dans cet emplacement (recommandé)..
Voici quelques modifications que vous voudrez peut-être apporter:
Le thème Scope, ainsi que la plupart des autres thèmes Premium, fournit un modèle de page d'accueil personnalisé et des options permettant de gérer le contenu affiché sur la page d'accueil. Tout d'abord, nous devons créer une nouvelle page. Aller à Pages> Ajouter un nouveau. Donnez un nom à la page (je viens de l'appeler "page d'accueil") puis, dans le Attributs de page menu, sélectionnez le Modèle menu déroulant et choisissez le Page d'accueil modèle.
Suivant, Publier ta page. Maintenant, allez à Paramètres> Lecture. Au sommet, vous verrez Affichages page de garde. Basculez le curseur de "Vos derniers messages" sur "Une page statique", puis, pour "Page de garde", choisissez la page d'accueil que vous venez de créer dans la liste déroulante, puis Sauvegarder les modifications.
Créer une bonne page d'accueil est un travail difficile. Les premières impressions importent - beaucoup. Lorsque vous commencez à peine, vous n’avez pas grand-chose à travailler. Si vous avez déjà beaucoup d'expérience de travail, une page d'accueil est un endroit idéal pour mettre en valeur une partie de cette expérience tout en attirant davantage de visiteurs (et de clients potentiels) sur votre site..
Une bonne page d'accueil devrait avoir les éléments suivants:
Le thème Scope (et la plupart des thèmes premium de style "Portfolio") est très visuel pour le modèle de page d'accueil. Pour ceux d'entre vous avec un portefeuille orienté visuellement, je vous recommande de suivre les recommandations de thème et d'utiliser les curseurs et autres options de page d'accueil proposées par le thème..
Une page "À propos de" est très importante. Lorsqu'un client potentiel vous considère pour un projet, il souhaite apprendre tout ce qu'il peut sur vous. Une page "À propos de" vous donne l'occasion de raconter votre histoire et d'établir un lien personnel.
De Pages> Ajouter un nouveau, créer une page intitulée "à propos de" (ou peut-être "à propos de moi" ou "à propos de [votre nom]") et commencer à travailler sur le contenu.
Voici quelques lignes directrices à garder à l'esprit:
Et voici quelques idées à considérer:
Une page "Services" permet aux clients potentiels de savoir ce que vous proposez et peut les aider à décider si vous êtes à la hauteur de leurs besoins..
Pour ce tutoriel, nous allons nous concentrer sur la création d'une page "Services" avec les attributs suivants:
De Pages> Ajouter un nouveau, créer une page et lui donner un titre approprié. De Attributs de page choisir Pleine largeur du Modèle menu déroulant.
Les gens de WordPress.com décrivent un shortcode comme "un code spécifique à WordPress qui vous permet de faire des choses astucieuses avec très peu d’effort". La majorité des développeurs de thèmes premium fournissent des codes courts spécifiques à un thème que vous pouvez utiliser dans le thème. Pour créer notre mise en page à trois colonnes, nous allons utiliser des codes courts.
Vous pouvez écrire les codes abrégés directement dans Visual Editor ou, à partir du menu de l'éditeur, cliquer sur l'icône de code abrégé (sa disponibilité et son apparence peuvent varier d'un thème à l'autre) pour utiliser l'interface de code abrégé intégrée du thème..
Vous pouvez récupérer le code d'un exemple de shortcode à trois colonnes ici.
Le thème Scope, et les thèmes de portefeuille similaires, offrent la possibilité de définir une image d'arrière-plan personnalisée page par page. Pour vous en servir, faites défiler l'écran sous l'éditeur principal et recherchez le Paramètres de page panneau. Si ce n'est pas visible, allez à Options d'écran (coin supérieur droit) et assurez-vous que l'option "Paramètres de page" est cochée.
Dans Paramètres de page Cliquez sur le bouton "Parcourir" pour télécharger une image, puis sur "Insérer dans le message" (dans la boîte de dialogue de gestion des images) pour ajouter l'URL de l'image au champ. Dans mon cas, puisque j'ai choisi un autre motif, je vais également régler "Répéter l'arrière-plan personnalisé" sur "Répéter". Si vous utilisez une image en taille réelle, vous devez définir "Position d'arrière-plan personnalisée" sur "Plein écran" ou "Centré", selon la taille de l'image..
Une page "Contact" offre aux clients potentiels des options pour vous contacter..
Pour ce tutoriel, nous allons nous concentrer sur la création d'une page "Contact" à l'aide du modèle "Contact", fourni par le thème Scope..
De Pages> Ajouter un nouveau, créez une page et donnez-lui un titre approprié (peut-être "Contactez-moi!"). De Attributs de page choisir Contact du Modèle menu déroulant.
La prochaine étape est le cœur de ce tutoriel: créer un index de portefeuille et ajouter des entrées à notre portefeuille..
Pour ce tutoriel, nous allons nous concentrer sur les tâches suivantes:
De Pages> Ajouter un nouveau, créer une page et lui donner un titre approprié. De Attributs de page choisir Portefeuille du Modèle menu déroulant. La page de portefeuille affichera automatiquement vos entrées au fur et à mesure que vous les publiez..
Le thème Scope utilise des taxonomies personnalisées dans WordPress pour vous permettre d’organiser les entrées de portefeuille par type. La plupart des thèmes de Portfolio offrent des fonctionnalités similaires.
Du Portefeuilles menu choisir Types de portefeuille.
Maintenant, vous pouvez prédéfinir les types d'entrées de portefeuille que vous comptez publier..
Voici quelques suggestions à garder à l'esprit:
De Portefeuilles> Ajouter un nouveau pour créer votre première entrée de portefeuille. Donnez-lui un titre approprié et une description. Puis du Type de portefeuille interface, choisissez le ou les types appropriés, en gardant à l'esprit qu'une entrée peut facilement appartenir à plusieurs types.
Ensuite, définissez les options visuelles pour l'entrée et téléchargez vos images ou, en fonction du "Type de portefeuille", vous pouvez intégrer un fichier audio ou vidéo à la place. Dans le thème Scope, les paramètres sont organisés sous le Paramètres de détail du portefeuille juste en dessous de la fenêtre principale de l'éditeur.
Enfin, définissez un L'image sélectionnée pour votre entrée, qui sera utilisé pour représenter l'entrée dans l'indice de portefeuille.
Le thème Scope, ainsi que la plupart des thèmes de portefeuille, est conçu pour fonctionner avec un blog. L'ajout d'un blog est une décision relativement importante. Par souci de simplicité, nous supposerons que vous y avez bien réfléchi et décidé qu'il s'agissait d'un match..
De Pages> Ajouter un nouveau créer une nouvelle page pour votre blog. Donnez-lui un titre et laissez le contenu vide. Cette page deviendra l'index de vos articles de blog. Ensuite, allez à Paramètres> Lecture et choisissez la page que vous avez créée (la mienne était intitulée "Blog") dans le menu déroulant "Publications". Enregistrez vos modifications.
Maintenant que nous avons quelques pages avec lesquelles travailler, il est temps d'ajouter un menu. De Apparence> Menus créer un nouveau menu (j'appelle le mien "Navigation").
Ensuite, assignez le menu à l’en-tête du thème à l’aide de la touche Menu primaire menu déroulant.
Maintenant, utilisez le Des pages widget, juste en dessous Lieux thématiques et Liens personnalisés pour assigner les pages récentes que vous avez créées. Dans notre cas, cela inclut "Blog", "Portfolio", "Contact", "Services" et "À propos de". Ensuite, faites glisser chaque élément du menu pour les classer en conséquence. Enregistrer lorsque vous avez terminé.
Par défaut, le thème Scope utilisera un ensemble de quatre widgets de base sur les publications de votre blog et la barre latérale des pages. Bien que vous souhaitiez les laisser tels quels, il est fort probable que vous souhaitiez les personnaliser.
Le thème Scope, et de nombreux autres projets similaires, propose plusieurs ensembles d’emplacement de widgets. Pour Scope, ces emplacements sont:
Pour personnaliser les widgets, allez à Apparence puis Widgets.
L'utilisation de widgets n'entre pas dans le cadre de ce didacticiel, mais voici quelques recommandations à garder à l'esprit:
Ouf! Nous y sommes presque! Il est maintenant temps de prendre du recul et de faire une critique.
Parcourez chaque page et chaque entrée de portefeuille avec une mentalité d’éditeur, à la recherche de contenu qui nécessite une mise à jour et un réglage précis. Examinez chaque page comme un client potentiel le verrait, en vous mettant au défi de vous assurer que votre travail et vos offres de services sont bien présentés, accompagnés d'un appel à l'action clair..
Lorsque vous passez en revue, prenez note des idées pour les mises à jour et améliorations futures. Notez, peut-être, ce que vous aimez le plus du thème actuel et ce que vous aimeriez voir amélioré dans une future version (assurez-vous de le faire savoir à l'auteur) ou peut-être même dans un nouveau thème entièrement à venir.
Une fois votre évaluation personnelle terminée, envoyez votre site Web à quelques amis et membres de votre famille en qui vous avez confiance et demandez un retour. Ne vous concentrez pas sur les commentaires sur l'esthétique, mais sur le contenu et l'organisation. Demandez-leur si ce que vous faites et ce que vous proposez sont clairement communiqués. Demander des suggestions pour améliorer le message transmis.
Une évaluation par les pairs est importante et présente l'avantage d'offrir un point de vue tiers sur votre travail et, si vous débutez, la première liste de personnes que vous demandez de consulter votre site peut même devenir votre premier client..
Nous avons couvert beaucoup de terrain. Vous êtes passé d'un tout nouveau thème à un portefeuille personnalisé pour votre activité indépendante. Bien joué!
Avoir des questions? Demandez-leur dans les commentaires ci-dessous. S'ils sont technique les questions que vous êtes invités à poser, bien que pour des raisons de commodité, veuillez adresser toute question spécifique à un thème particulier aux auteurs de thème.
Accentsconagua