Trouver un moyen de simplifier la façon dont vous créez des éléments de portefeuille sur votre site Web? Si c’est le cas, vous aimerez cet article. Dans ce tutoriel, nous vous montrerons comment créer un modèle de projet de Portfolio dynamique en utilisant le générateur de thème Divi et le plug – in ACF. La création d’un modèle de projet de Portfolio vous permettra de concevoir le corps du modèle à la fois et de l’appliquer à tous les éléments de la Portfolio que vous ajouterez à l’avenir. Les modèles que nous avons créés correspondent à une variété de professions créatives, mais ce n’est que la partie émergée de l’iceberg. Vous pouvez ajouter n’importe quel nombre de champs et les utiliser dans le modèle. Vous pouvez également télécharger gratuitement le fichier json que nous allons recréer!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà inscrit, entrez votre adresse e – mail ci – dessous, puis
Cliquez sur télécharger pour accéder au paquet de mise en page.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Installer ACF et définir les champs du projet installer et activer ACF installe d’abord le plugin de champ personnalisé avancé gratuit sur le site WordPress. Après l’installation, assurez – vous qu’elle est également activée. Une fois que le plug – in Set Field Group est installé et activé, vous pouvez commencer à créer des champs personnalisés. Allez aux paramètres du plug – in et ajoutez un nouvel ensemble de champs.
Changez l’emplacement du Groupe de champs. Nous voulons qu’il ne soit affiché que sur nos projets. Type de poste – égal à – projet Ajouter des champs continuer en ajoutant de nouveaux champs pour chacun des éléments mentionnés ci – dessous: Étiquette du champ de problème: type de champ de problème: Étiquette du champ de solution de zone de texte: type de champ de solution: Étiquette du champ de témoignage de zone de texte: type de champ de témoignage: Étiquette du champ de référence de texte: type de champ de contact: Image textuelle du champ Étiquette du champ de contact: contact type de champ d’image: Contact Image titre de champ Étiquette: contact qualification type de champ: texte logo du client Étiquette du champ: logo du client type de champ: Image Logo du client Étiquette du champ du site: site du client type de champ: url Étiquette de la durée du Projet Type de champ: durée du projet type de champ: intervalle ajouter: semaine savoir, selon le modèle de projet à créer, vous pouvez ajouter autant de champs que vous voulez. Pour recréer la conception exacte affichée dans l’aperçu de cet article, vous avez besoin de tous les champs mentionnés ci – dessus.
Créer un nouveau projet ajouter le titre et la description du projet au port
Durée du projet: après une semaine Paramètres du texte ensuite, changez les paramètres du texte du formulaire. Police de texte: Lora text color: # FFFFFF text size: 1.5 rem Ajoutez le formulaire de texte 3 à la colonne de contenu dynamique ajoutez un autre formulaire de texte et sélectionnez le contenu dynamique pour le titre du poste \ archive. Contenu dynamique: Avant de publier \ archiver le titre: Après: Configuration du texte H1 configuration du formulaire configuration du texte H1. Police de l’en – tête: Montserrat header text color: # FFFFFF header text size: 6rem (Desktop), 3rem (tablette et téléphone)
Séparer les paramètres complets du module en ajoutant des marges supérieures et inférieures. Marge supérieure: 100 pixels marge inférieure: 100 pixels Ajouter un module de contenu de poste paramètres de texte le module suivant et le dernier module que nous avons besoin dans la colonne est le module de contenu de poste. Ceci affiche la description du projet. Modifier les paramètres de texte du formulaire comme suit: caractères de texte: Lora couleur du texte: # FFFFFF taille du texte: 1,5 rem (bureau), 0,9 REM hauteur de la ligne de texte: 2em Ajouter une ligne # 2 Structure de colonne ajouter une autre ligne à la section en utilisant la structure de colonne suivante:
Ajouter un module image à la colonne 1 contenu dynamique ajouter un module image à la colonne 1 et sélectionner le contenu dynamique du logo du client. Contenu dynamique: logo du client Ajouter un formulaire texte à la colonne 2 ajouter du contenu, puis ajouter un formulaire texte à la colonne 2 et entrer une copie de votre choix. Lien contenu dynamique connectez le formulaire au site du client en sélectionnant le contenu dynamique du site du client dans les paramètres du lien. Contenu dynamique: site Web du client Paramètres du texte ensuite, changez les paramètres du texte du formulaire.
Police de texte
Emma. Paramètres de texte puis modifier les paramètres de texte du formulaire: caractères de texte: Lora taille du texte: 1.5rem (bureau), 0.9vw (tablette et téléphone) hauteur de la ligne de texte: 2em Une fois la ligne terminée, continuez et clonez – la complètement.
Cliquez sur télécharger pour accéder au paquet de mise en page.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Installer ACF et définir les champs du projet installer et activer ACF installe d’abord le plugin de champ personnalisé avancé gratuit sur le site WordPress. Après l’installation, assurez – vous qu’elle est également activée.
Durée du projet: après une semaine
Police de texte
Emma.
Une fois la ligne terminée, continuez et clonez – la complètement. Modifier la copie du formulaire texte dans la colonne 1 modifier la copie du formulaire texte dans la colonne 1 de la ligne dupliquée. Modifier le contenu dynamique du formulaire texte dans la colonne 2 modifier le contenu dynamique du formulaire texte dans la colonne 2 de la ligne dupliquée. Contenu dynamique: solutions Ajouter un module bouton à la colonne 2 de la ligne dupliquée ajouter une copie continue en ajoutant un module bouton à la colonne 2 de la ligne dupliquée. Ajoutez une copie de votre choix. Passez à l’onglet conception du module et modifiez les paramètres du bouton comme suit: chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 1.5 couleur du texte du bouton REM: # 000000 rayon de la bordure du bouton: 0px Police du bouton: Montserrat L’espacement complète le réglage du module en ajoutant une marge supérieure. Marge supérieure: 100 pixels Ajoutez la couleur de fond de la section # 4 aux sections suivantes et finales! Ajouter une couleur de fond noire. Couleur de fond: # 000000 Border ajoute également un rayon des bords supérieurs gauche et droit à la section. En haut à gauche: 8vw en haut à droite: 8vw Ajouter une ligne de structure de colonne continue en ajoutant une nouvelle ligne à la section en utilisant la structure de colonne suivante: Ajouter un formulaire de recommandation à une colonne de contenu dynamique ajouter un formulaire de recommandation à une ligne et sélectionner le contenu dynamique pour différents éléments du formulaire. Auteur: personne – ressource titre: personne – ressource titre du texte: témoignage Image: personne – ressource image Projet désactiver l’icône de référence
La prochaine étape. Afficher l’icône devis: Non La couleur de fond change ensuite la couleur de fond du module en noir. Couleur de fond: # 000000 Les paramètres de texte se déplacent vers l’onglet conception du formulaire et changent la couleur du texte. Couleur du texte: clair Modifier les paramètres du texte du corps après les paramètres du texte. Police du texte: Montserrat taille du texte: 2 rem (bureau), 1,5 rem (tablette et téléphone) Paramètres du texte de l’auteur il modifie également les paramètres du texte de l’auteur. Police de l’auteur: Lora taille du texte de l’auteur: 1.4rem (bureau), 0.9rem (tablette et téléphone) Configuration du texte de position e compléter la configuration du module en changeant la configuration du texte de position en conséquence: police de position: Lora text Color Location: # a8a8a8 location text size: 1.4rem (Desktop), 0.9rem (tablette et téléphone) 4. Après avoir sauvegardé les modifications du générateur de thème et vu le modèle de résultat, sauvegardez toutes les modifications du générateur de thème Divi et visualisez les résultats sur le projet! Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment créer un beau modèle de projet portfolio en utilisant Divi Theme Builder et le plug – in ACF. C’est une bonne façon de simplifier la façon dont vous visualisez vos projets sur votre site. Une fois que le modèle est attribué à tous les projets, il s’applique automatiquement aux futurs projets de portefeuille que vous ajoutez. Vous pouvez également télécharger gratuitement le fichier modèle json de ce design! Si vous avez des questions ou des suggestions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous êtes impatient d’en savoir plus sur Divi et de recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et
Accédez à la chaîne YouTube afin que vous soyez toujours l’une des premières personnes à connaître et à bénéficier de ce contenu gratuit.
La prochaine étape. Afficher l’icône devis: Non
Accédez à la chaîne YouTube afin que vous soyez toujours l’une des premières personnes à connaître et à bénéficier de ce contenu gratuit.