Comment créer un modèle de projet de portefeuille dynamique avec Divi et ACF

Vous cherchez un moyen de rationaliser la façon dont vous créez des éléments de portefeuille sur votre site Web ? Si c'est le cas, vous allez adorer ce post. Dans ce tutoriel, nous allons vous montrer comment créer un modèle de projet de portfolio dynamique avec Theme Builder de Divi et le plugin ACF. La création d'un modèle de projet de portefeuille vous permettra de concevoir le corps du modèle une seule fois et de l'appliquer également à tous les éléments de portefeuille que vous ajouterez à l'avenir. La conception du modèle que nous avons créée correspond à toutes sortes de professions créatives, mais ce n'est que la pointe de l'iceberg. Vous pouvez ajouter autant de champs que vous le souhaitez et les utiliser dans votre modèle. Vous pourrez également télécharger le fichier JSON du design que nous recréerons gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT le modèle de projet de portefeuille dynamique

Important : vous devrez ajouter manuellement du contenu dynamique à chaque module après avoir configuré les champs ACF et téléchargé le modèle de fichier JSON dans le générateur de thèmes.

Pour mettre la main sur le modèle de projet de portfolio dynamique gratuit, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

1. Installer ACF et configurer les champs de projet

Installer et activer ACF

Commencez par installer le plugin gratuit Advanced Custom Fields sur votre site WordPress. Après l'avoir installé, assurez-vous de l'activer également.

Configurer le groupe de champs

Une fois que vous avez installé et activé le plugin, il est temps de commencer à créer les champs personnalisés. Accédez aux paramètres de votre plugin et ajoutez un nouveau groupe de champs.

Modifiez l'emplacement de votre groupe de champs. Nous voulons qu'il n'apparaisse que sur nos projets.

• Type de poste – est égal à – Projet

Ajouter des champs

Continuez en ajoutant un nouveau champ pour chacun des éléments mentionnés ci-dessous :

• Problème
  • Libellé du champ : problème
  • Type de champ : zone de texte
• Solution
  • Libellé du champ : solution
  • Type de champ : zone de texte
• Témoignage
  • Étiquette de champ : Témoignage
  • Type de champ : Texte
• Contact
  • Libellé du champ : Personne à contacter
  • Type de champ : Texte
• Image de la personne de contact
  • Libellé du champ : Image de la personne de contact
  • Type de champ : Image
• Personne de contact Titre du poste
  • Libellé du champ : Titre du poste de la personne de contact
  • Type de champ : Texte
• Logo du client
  • Libellé du champ : Logo du client
  • Type de champ : Image
• Site Web des clients
  • Libellé du champ : Site Web du client
  • Type de champ : URL
• Durée du projet
  • Libellé du champ : Durée du projet
  • Type de champ : Plage
  • Ajouter : semaines

Sachez que vous êtes libre d'ajouter autant de champs que vous le souhaitez, en fonction du modèle de projet que vous souhaitez créer. Pour recréer le design exact qui a été montré dans l'aperçu de cet article, vous aurez besoin de tous les champs mentionnés ci-dessus.

2. Créer un nouveau projet

Ajouter le titre et la description du projet de portefeuille

Une fois que vous avez configuré le groupe de champs et tous ses champs, il est temps de créer un exemple de projet. Accédez à votre tableau de bord WordPress, ajoutez un nouveau projet et entrez un titre et une description.

Télécharger l'image en vedette

Ensuite, téléchargez une image vedette de votre choix.

Remplissez tous les champs personnalisés

Continuez en remplissant tous les différents champs personnalisés que vous avez ajoutés dans la première partie du didacticiel.

3. Créer un nouveau modèle

Accédez à Divi Theme Builder et créez un nouveau modèle

Il est temps de commencer à créer le modèle ! Accédez au Divi Theme Builder et ajoutez un nouveau modèle.

Utiliser sur

Appliquez le modèle à tous vos projets.

• Utiliser sur : tous les projets

4. Commencez à créer le corps du modèle

Continuez en commençant à créer le corps personnalisé du modèle.

Section 1

Couleur de l'arrière plan

Dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et ajoutez une couleur de fond noire.

• Couleur d'arrière-plan : #000000

Espacement

Ajoutez ensuite un rembourrage supérieur et inférieur personnalisé.

• Rembourrage supérieur : 250 px
• Rembourrage inférieur : 250px

Frontière

Ajoutez également un rayon de bordure en bas à gauche et à droite.

• En bas à gauche : 8vw
• En bas à droite : 8vw

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une première ligne à la section en utilisant la structure de colonnes suivante :

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu

Ensuite, ajoutez un module de texte et placez du contenu dans la zone de contenu.

• Corps : Durée du projet :

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police du texte : Montserrat
• Couleur du texte : #a0a0a0
• Taille du texte : 1.2rem

Ajouter le module de texte #2 à la colonne

Contenu dynamique

Ajoutez un autre module de texte à la colonne et sélectionnez le contenu dynamique de la durée du projet.

• Contenu dynamique : durée du projet
• Après : semaines

Paramètres de texte

Modifiez ensuite les paramètres de texte du module.

• Police du texte : Lora
• Couleur du texte : #ffffff
• Taille du texte : 1.5rem

Ajouter le module de texte n° 3 à la colonne

Contenu dynamique

Ajoutez un autre module de texte et sélectionnez le contenu dynamique du titre de la publication/de l'archive.

• Contenu dynamique : titre de la publication/de l'archive
• Avant : <H1>
• Après : </H1>

Paramètres de texte H1

Stylisez les paramètres de texte H1 du module.

• Police de titre : Montserrat
• Couleur du texte du titre : #ffffff
• Taille du texte de l'en-tête : 6 rem (ordinateur de bureau), 3 rem (tablette et téléphone)

Espacement

Complétez les paramètres du module en ajoutant des marges en haut et en bas.

• Marge supérieure : 100 pixels
• Marge inférieure : 100px

Ajouter un module de contenu de publication

Paramètres de texte

Le prochain et dernier module dont nous avons besoin dans la colonne est un module de contenu de publication. Cela affichera la description de votre projet. Modifiez les paramètres de texte du module comme suit :

• Police du texte : Lora
• Couleur du texte : #ffffff
• Taille du texte : 1.5rem (bureau), 0.9rem
• Hauteur de la ligne de texte : 2 em

Ajouter la ligne n° 2

Structure des colonnes

Ajoutez une autre ligne à la section en utilisant la structure de colonnes suivante :

Ajouter un module d'image à la colonne 1

Contenu dynamique

Ajoutez un module Image à la colonne 1 et sélectionnez le contenu dynamique du logo client.

• Contenu dynamique : logo client

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Ensuite, ajoutez un module de texte à la colonne 2 et entrez une copie de votre choix.

Lier du contenu dynamique

Liez le module au site Web client en sélectionnant le contenu dynamique du site Web client dans les paramètres de lien.

• Contenu dynamique : site Web client

Paramètres de texte

Modifiez ensuite les paramètres de texte du module.

• Police du texte : Montserrat
• Couleur du texte : #ffffff
• Taille du texte : 1.5rem
• Hauteur de la ligne de texte : 1 em

Espacement

Ajoutez également un rembourrage inférieur personnalisé.

• Rembourrage inférieur : 50px

Frontière

Et complétez les paramètres du module en ajoutant une bordure inférieure.

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #ffc300

Ajouter la section #2

Espacement

Passons à la section suivante ! Supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une rangée

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Espacement

Ouvrez les paramètres de ligne et supprimez tous les rembourrages par défaut en haut et en bas.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter un module d'image à la colonne

Contenu dynamique

Le seul module dont nous avons besoin dans cette rangée est un module Image. Connectez l'image à l'image vedette du projet.

• Contenu dynamique : image en vedette

Frontière

Ajoutez également un rayon de bordure en bas à gauche et à droite.

• En bas à gauche : 8vw
• En bas à droite : 8vw

Ajouter la section #3

Espacement

Ajoutez une autre section régulière avec un rembourrage supérieur et inférieur personnalisé.

• Rembourrage supérieur : 250 px
• Rembourrage inférieur : 250px

Ajouter la ligne n° 1

Structure des colonnes

Ajoutez une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Ajouter un module de texte à la colonne 1

Ajouter du contenu H2

Ajoutez un module de texte à la colonne 1 et insérez du contenu H2 de votre choix.

Paramètres de texte H2

Modifiez les paramètres de texte H2 comme suit :

• Police de la rubrique 2 : Montserrat
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Taille du texte : 2rem

Ajouter un module de texte à la colonne 2

Contenu dynamique

Passez à la deuxième colonne, ajoutez un module de texte et utilisez le contenu dynamique du problème.

• Contenu dynamique : problème

Paramètres de texte

Ensuite, modifiez les paramètres de texte du module :

• Police du texte : Lora
• Taille du texte : 1,5 rem (ordinateur de bureau), 0,9 vw (tablette et téléphone)
• Hauteur de la ligne de texte : 2 em

Cloner la ligne

Une fois que vous avez terminé la ligne, allez-y et clonez-la entièrement.

Modifier la copie du module de texte dans la colonne 1

Modifiez la copie de la colonne 1 Text Module de la ligne dupliquée.

Modifier le contenu dynamique du module de texte dans la colonne 2

Modifiez également le contenu dynamique du module de texte dans la colonne 2 de la ligne dupliquée.

• Contenu dynamique : solution

Ajouter un module de bouton à la colonne 2 de la ligne en double

Ajouter une copie

Continuez en ajoutant un module de bouton à la colonne 2 de la ligne en double. Ajoutez une copie de votre choix.

Paramètres des boutons

Passez à l'onglet de conception du module et modifiez les paramètres des boutons comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1.5rem
• Couleur du texte du bouton : #000000
• Rayon de la bordure du bouton : 0px

• Police des boutons : Montserrat

Espacement

Complétez les paramètres du module en ajoutant une marge supérieure.

• Marge supérieure : 100 pixels

Ajouter la section #4

Couleur de l'arrière plan

Passons à la prochaine et dernière section ! Ajoutez une couleur de fond noire.

• Couleur d'arrière-plan : #000000

Frontière

Ajoutez également un rayon de bordure supérieur gauche et droit à la section.

• En haut à gauche : 8vw
• En haut à droite : 8vw

Ajouter une rangée

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Ajouter un module de témoignage à la colonne

Contenu dynamique

Ajoutez un module de témoignage à la ligne et sélectionnez du contenu dynamique pour les différents éléments à l'intérieur du module.

• Auteur : Personne de contact
• Titre du poste : Personne-ressource Titre du poste
• Corps : Témoignage
• Image : Image de la personne-ressource

Éléments

Désactivez ensuite l'icône de citation.

• Afficher l'icône du devis : Non

Couleur de l'arrière plan

Ensuite, changez la couleur de fond du module en noir.

• Couleur d'arrière-plan : #000000

Paramètres de texte

Déplacez-vous sur l'onglet de conception du module et modifiez la couleur du texte.

• Couleur du texte : clair

Paramètres du corps du texte

Modifiez ensuite les paramètres du corps du texte.

• Police de caractère : Montserrat
• Taille du corps du texte : 2 rem (ordinateur de bureau), 1,5 rem (tablette et téléphone)

Paramètres du texte de l'auteur

Modifiez également les paramètres du texte de l'auteur.

• Police de l'auteur : Lora
• Taille du texte de l'auteur : 1.4rem (ordinateur de bureau), 0.9rem (tablette et téléphone)

Paramètres de texte de position

Et complétez les paramètres du module en modifiant les paramètres du texte de position en conséquence :

• Police de caractère : Lora
• Couleur du texte du poste : #a8a8a8
• Taille du texte de la position : 1.4rem (ordinateur de bureau), 0.9rem (tablette et téléphone)

4. Enregistrer les modifications apportées au générateur de thème et afficher le résultat

Une fois que vous avez terminé le modèle, enregistrez toutes les modifications de Divi Theme Builder et affichez le résultat sur votre projet !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer un magnifique modèle de projet de portfolio à l'aide de Divi Theme Builder et du plugin ACF. C'est un excellent moyen de rationaliser la façon dont vous affichez les projets sur votre site Web. Une fois que vous avez attribué le modèle à tous vos projets, il s'appliquera automatiquement aux futurs éléments de portefeuille que vous ajouterez. Vous avez également pu télécharger gratuitement le fichier modèle JSON de cette conception ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.