Comment créer une page de portfolio dans WordPress avec Elementor

Une page de portefeuille est l'une des meilleures façons de présenter votre travail en ligne. Cette page est importante non seulement pour les individus mais aussi pour les organisations et les agences. Sur cette page, n'importe qui peut mettre en évidence les projets qu'ils ont réalisés de manière captivante afin qu'il puisse attirer plus de clients et de clients.

Avoir un site de portefeuille est devenu une norme commune dans ce monde moderne, peu importe si vous êtes un employé distingué ou plus frais sur le marché du travail. De cette façon, les clients du monde entier peuvent vous trouver, vous connecter avec vous et offrir de nouveaux projets. Ainsi, il peut vous ouvrir des opportunités illimitées.

Avec WordPress et Elementor, la création d'une page Web de portfolio est si facile. Parce que vous pouvez le faire juste par glisser-déposer, sans codage. Dans ce message de didacticiel, nous vous expliquerons comment créer une page de portfolio dans WordPress avec Elementor. Commencer!

Qu'est-ce qu'une page Web de portfolio?

Une page Web de portfolio est une page dédiée où vous pouvez afficher votre travail, vos compétences et vos réalisations. Il agit comme une vitrine numérique, permettant aux visiteurs de voir ce que vous pouvez faire et ce que vous avez fait dans le passé. Il peut inclure des images, des vidéos, des études de cas, des témoignages et d'autres contenus qui prouvent vos capacités.

Les sites Web de portefeuille sont populaires parmi les professionnels créatifs tels que les designers, les photographes, les écrivains, les développeurs et les artistes. L'objectif principal d'un site Web de portefeuille est d'impressionner des clients ou des employeurs potentiels et de les encourager à vous embaucher ou à travailler avec vous.

Différences entre un site Web de portfolio et une page Web de portefeuille

Beaucoup de gens sont confus entre un site Web de portefeuille et une page Web de portfolio. Bien qu'ils semblent similaires, ils sont différents dans la façon dont ils présentent votre travail en ligne. Comprendre ces différences vous aidera à décider lequel convient le mieux à vos besoins lors de la création de votre présence en ligne.

Vérifiez comment créer un site Web de portfolio dans WordPress avec Elementor.

Éléments Une page Web de portfolio peut avoir

Comme vous le savez maintenant qu'une page de portefeuille a généralement moins de contenu qu'un site Web complet, il devrait se concentrer sur les parties les plus importantes qui montrent clairement votre travail. Voici les choses que vous pouvez envisager d'afficher sur la page Web du portefeuille.

1. Une brève introduction

Une brève introduction qui indique qui vous êtes et quel type de travail vous faites. Cela aide les visiteurs à se connecter tout de suite avec vous sans lire une longue biographie.

2. Galerie de portefeuille

Il s'agit de la section principale pour afficher vos projets. Utilisez des images ou des vidéos claires avec de courts titres ou descriptions. Organisez bien votre travail, afin que les visiteurs puissent facilement voir vos meilleures compétences. Apprenez à utiliser la galerie d'images Elementor.

3. Informations de contact ou bouton

Ajoutez un moyen simple pour les gens de vous contacter, comme une adresse e-mail, un numéro de téléphone ou un bouton de contact reliant un formulaire ou un e-mail.

4. Appel à l'action (CTA)

Guidez les visiteurs sur ce qu'il faut faire ensuite. Qu'il s'agisse de vous embaucher, de demander plus de détails ou de voir plus de travail, un CTA clair aide à transformer les visiteurs en clients.

Comment créer une page de portfolio dans WordPress avec Elementor: Guide étape par étape

N'oubliez pas qu'une page de portefeuille fait partie d'un site Web. Comme déjà mentionné, les pages de portefeuille peuvent être créées pour n'importe quel site Web. Donc, si vous souhaitez concevoir une page de portefeuille, vous pouvez souvent ressentir le besoin de concevoir ou de modifier d'autres pages sur votre site Web. Maintenant, pour concevoir votre page de portefeuille avec Elementor, vous aurez besoin des plugins suivants.

• Élémentor
• Elementor Pro
• Happyaddons
• Happyaddons pro

HappyAddons est un addon bien connu du plugin Elementor. Il est livré avec plus de 130 widgets supplémentaires et plusieurs dizaines de fonctionnalités puissantes par lesquelles vous pouvez surmonter les limites du plugin Elementor et améliorer la conception de votre site Web. Les deux ensemble peuvent créer des possibilités illimitées sur votre site.

Une fois ces plugins installés et activés sur votre site, commencez à suivre les étapes expliquées ci-dessous.

Étape 01: Décidez des éléments que vous souhaitez afficher sur la page du portefeuille

Avant de commencer à concevoir, il est important de décider de ce que vous souhaitez inclure sur votre page de portefeuille. Étant donné que cette page doit être propre et ciblée, vous devez sélectionner uniquement les éléments les plus essentiels qui mettent en évidence votre travail efficacement. Nous vous avons déjà dit quoi inclure dans la page.

• Une brève introduction
• Galerie de portefeuille
• Informations de contact ou bouton
• Appel à l'action

Étape 02: Ouvrez une page avec le toile Elementor

Maintenant, ouvrez une page avec le canevas Elementor. Ici, vous devez faire glisser et déposer des éléments et ajouter du contenu approprié.

Remarque: Nous avons déjà créé un en-tête avec le constructeur de thème qui apparaît en haut.

Étape 03: Ajoutez une brève description

Sélectionnez une taille de colonne appropriée pour le Canvas en fonction de la largeur que votre contenu peut nécessiter. Nous sélectionnons le conteneur à colonne unique.

Pour aligner la conception du conteneur sur l'en-tête, nous changerons sa couleur d'arrière-plan. Pour ce faire, appuyez sur l' icône à six points sur le dessus du conteneur, accédez à l' onglet Style et cliquez sur l'option de couleur sous la section d'arrière-plan .

Maintenant, choisissez une couleur pour le récipient.

Lorsque la couleur souhaitée est appliquée sur l'arrière-plan du récipient, trouvez et ajoutez le widget de cap dans le conteneur.

Ce widget créera un espace où vous pourrez écrire un titre ou une tête pour la page . Fais-le.

Vous pouvez voir que nous avons écrit un titre pour la page «Soyez inspiré par mes projets passés». Vous pouvez styliser sa taille, sa typographie, sa couleur et de nombreuses autres options de l'onglet Style.

Ajoutez le widget de l'éditeur de texte sous le widget d'en-tête comme indiqué dans l'image ci-dessous. Cela vous permettra d'écrire une brève description.

De la même manière, nous avons ajouté une description à la page du portefeuille et défini un alignement, une typographie et une couleur appropriés pour le texte.

Étape 04: Ajoutez un bouton à la page

Avec un bouton CTA, vous pouvez appuyer sur les utilisateurs pour visiter une autre page que vous souhaitez. Il est donc préférable d'ajouter un bouton avant de créer la section de portefeuille.

Dans l' onglet Contenu , vous pouvez ajouter la copie souhaitée pour le bouton .

En ajoutant un rembourrage

Après le bouton, j'ai ajouté un court texte qui donne une ambiance de fiabilité aux utilisateurs.

Étape 05: Créez la section de portefeuille

Maintenant, il est temps de créer la section de portefeuille où vous metterez en valeur visuellement vos tâches. Pour ce faire, ajoutez d'abord un nouveau conteneur dans la première section.

Ajoutez le widget Tabs à la section du portefeuille. Ce widget vous permettra de créer des onglets illimités, puis d'ajouter des widgets appropriés à chaque onglet afin que vous puissiez afficher tout type de contenu que vous souhaitez séparément.

# Nommez les onglets

Chaque onglet est censé fonctionner comme une catégorie. Vous devez donc les renommer.

Pour renommer les onglets, sélectionnez le widget , accédez à l' onglet Contenu , cliquez pour ouvrir un onglet souhaité et écrivez un nom pour l'onglet sous le titre.

De la même manière, ajoutez des noms à tous les onglets. Ensuite, si nécessaire, en cliquant sur le bouton + ajouter , vous pouvez ajouter plus d'onglets à la section du portefeuille.

# Styliser le widget des onglets

Maintenant, à partir de l' onglet Style , vous pouvez ajouter une couleur d'arrière-plan aux onglets, changer leur typographie , ajouter une couleur de bordure , etc. Faites vous-même ces personnalisations nécessaires.

Étape 06: Commencez à ajouter du contenu aux onglets

Tout comme le Canvas Elementor par défaut, vous obtiendrez une interface similaire dans chaque onglet pour ajouter des widgets et afficher le contenu respectif. Cliquez sur l' icône plus (+) .

Sélectionnez une structure de colonne appropriée pour la section du portefeuille. Nous sélectionnons la structure à 3 colonnes mais à six container. Ensuite, vous pouvez ajouter n'importe quel widget capable d'afficher le contenu souhaité.

# Afficher le contenu du portefeuille

Par exemple, nous avons ajouté en série l' image, le titre et l'éditeur de texte en série à un conteneur pour créer notre disposition de contenu.

En utilisant ces widgets, vous pouvez afficher visuellement vos éléments de portefeuille et les accompagner autant de contenu textuel que vous en avez besoin.

Vous pouvez voir que nous avons ajouté du contenu au conteneur. Après cela, nous avons réglé une couleur pour l'en-tête et la description. De plus, nous avons ajouté un rayon au widget et à la bordure du conteneur. J'espère que vous pouvez les faire vous-même.

De la même manière, ajoutez votre contenu de portefeuille à tous les conteneurs.

Remarque: mais tout ce contenu peut sembler si désordonné, non? C'est parce qu'ils n'ont pas d'espace entre les deux.

# Ajouter des espaces entre les conteneurs sur la page du portefeuille

Pour ajouter de l'espace entre eux, sélectionnez le conteneur mère , accédez à l' onglet Contenu , accédez à l' option GAPS et entrez des valeurs pour ajouter de l'espace entre les conteneurs.

Vous pouvez voir la différence dans l'image ci-dessous.

Étape 07: Ajouter du contenu à l'autre onglet

Tous les onglets ne doivent pas suivre la même disposition de contenu. Ce n'est pas obligatoire. Vous pouvez créer différentes mises en page pour différents onglets.

Par exemple, nous ajouterons le widget de la galerie à la deuxième onglet. Avec ce widget, vous ne pouvez afficher vos éléments de votre portefeuille que visuellement. Aucune information textuelle n'est possible à afficher.

Vous pouvez voir que nous avons ajouté des images à la galerie.

En faisant défiler un peu l'onglet de contenu, vous obtiendrez des options pour personnaliser l' ordre d'image, le numéro de colonne, l'espacement, le type de galerie et la résolution d'image .

De la même manière, ajoutez du contenu aux onglets restants. Ainsi, vous pouvez terminer la création de votre section de portefeuille.

Étape 08: Ajoutez un formulaire à la fin de la page (facultatif)

Ainsi, votre section de portefeuille est prête. Vous pouvez mettre fin à votre page ici ou ajouter d'autres éléments, comme un formulaire de contact, un appel à l'action, ou bien.

Vous pouvez voir que nous avons ajouté un formulaire de contact à la fin de la page. Apprenez à créer une page de contact dans Elementor.

Étape 09: Aperçu de la page du portefeuille

Lorsque tout est fait, accédez à la page du portefeuille pour vérifier si tout fonctionne bien ou non. Vous pouvez voir dans le court clip vidéo ci-dessous ci-dessous ce widget d'onglets, ce qui signifie que la section du portefeuille principal fonctionne parfaitement. J'espère que cela fonctionnera également bien de votre côté.

Ainsi, vous pouvez créer une page de portfolio sur votre site WordPress à l'aide de plugins Elementor et HappyAddons.

Dernier mot!

Nous avons présenté la démo d'une page de portefeuille de base dans ce tutoriel. De toute évidence, lorsque ce sera votre tour, vous essairez certainement de créer une page de portefeuille complète et riche en contenu. Mais j'espère que vous pourrez réaliser que tout présenter dans un seul blog / tutoriel n'est jamais facile.

Nous voulions juste vous présenter les outils et comment les utiliser pour créer une page de portefeuille. Nous sommes sûrs que vous pouvez faire le reste vous-même. Cependant, si vous avez besoin d'une suggestion ou d'un conseil concernant Elementor, HappyAddons et la conception de sites Web, vous pouvez le mentionner dans la zone de commentaires ci-dessous.

Ou, vous pouvez nous faire discuter. Notre équipe d'assistance vous reviendra très bientôt. Merci d'être avec nous jusqu'à la fin. Passez une bonne journée à venir!