Comment créer une section de liste d'emplois dynamiques avec le module de blog de Divi

Dans un précédent tutoriel Divi, nous vous avons montré comment créer un modèle de poste ouvert complètement dynamique avec le générateur de thème de Divi et le plugin Advanced Custom Fields. Dans le didacticiel d'aujourd'hui, nous allons vous montrer comment vous pouvez présenter de manière dynamique les postes vacants sur votre page Carrières. Ce tutoriel est une suite de la publication du modèle de poste ouvert, alors assurez-vous de recréer d'abord le modèle, puis revenez à ce tutoriel.

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 la mise en page de la liste d'emplois de Dynamic Cares

Pour mettre la main sur la mise en page gratuite de l'offre d'emplois de carrières dynamiques, vous devez d'abord la 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. Ajouter une page Carrières

Ajouter une nouvelle page et basculer vers Visual Builder

Commencez par créer une nouvelle page, donnez un titre à votre page et passez à Visual Builder.

2. Commencez à créer une page Carrières sur le frontend

Ajouter la section #1

Fond dégradé

Ajoutez la première section à la page, ouvrez les paramètres de la section et utilisez un arrière-plan dégradé.

• Couleur 1 : #ff6600
• Couleur 2 : #fbff30
• Direction du gradient : 126 degrés

Diviseur inférieur

Utilisez également un séparateur de section inférieure.

• Style de séparation : rechercher dans la liste
• Hauteur du diviseur : 8vw
• Répétition horizontale du diviseur : 3x
• Disposition des diviseurs : sous le contenu de la section

Espacement

Complétez les paramètres de la section en ajoutant un peu de rembourrage inférieur.

• Rembourrage inférieur : 200px

Ajouter une nouvelle ligne

Structure des colonnes

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

Ajouter un module de texte à la colonne

Ajouter du contenu H1

Ajoutez un module de texte à la colonne de la ligne avec du contenu H1 de votre choix.

Paramètres de texte H1

Passez à l'onglet de conception du module et modifiez les paramètres de texte H1 en conséquence :

• Police de titre : Montserrat
• Poids de la police d'en-tête : lourd
• Couleur du texte du titre : #ffffff
• Taille du texte de l'en-tête : 8 rem (ordinateur de bureau), 4 rem (tablette), 2,5 rem (téléphone)

Ajouter un module diviseur à la colonne

Visibilité

Juste en dessous du module de texte, ajoutez un module de séparation. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Modifiez ensuite la couleur de la ligne du module.

• Couleur de la ligne : #ffffff

Dimensionnement

Et complétez les paramètres du module en modifiant les paramètres de dimensionnement.

• Poids du diviseur : 8px
• Largeur : 30%

Ajouter la section #2

Ajoutez une autre section régulière à la page.

Ajouter une nouvelle ligne

Structure des colonnes

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

Ajouter un module de texte à la colonne

Ajouter du contenu H2

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

Paramètres de texte H2

Modifiez les paramètres de texte H2 du module comme suit :

• Police de la rubrique 2 : Montserrat
• En-tête 2 Poids de la police : lourd
• Titre 2 Couleur du texte : #ffa500
• Titre 2 Taille du texte : 2,3 rem

Ajouter un module diviseur à la colonne

Visibilité

Le prochain module dont nous avons besoin dans cette colonne est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Modifiez ensuite la couleur de la ligne du module.

• Couleur de la ligne : #ffa500

Dimensionnement

Et complétez les paramètres du module en modifiant le poids du diviseur et la largeur maximale dans les paramètres de dimensionnement.

• Poids du diviseur : 6px
• Largeur maximale : 80px

Ajouter un module de blog à la colonne

Teneur

Pour afficher les différents postes vacants, nous utiliserons un module de blog que nous personnaliserons selon nos besoins. Assurez-vous que les paramètres de contenu suivants s'appliquent :

• Type de message : messages
• Inclure les catégories : Marketing
• Longueur de l'extrait : 150

Éléments

Dans les paramètres des éléments, les deux seules options que nous activons sont les suivantes :

• Afficher le bouton Lire la suite : Oui
• Afficher l'extrait : Oui

Disposition

Passez à l'onglet de conception du module et assurez-vous que vous utilisez une disposition pleine largeur.

• Disposition : pleine largeur

Paramètres du texte du titre

Modifiez également les paramètres du texte du titre.

• Titre Titre Niveau : H3
• Police du titre : Montserrat
• Taille du texte du titre : 1.5rem

Paramètres du corps du texte

Ensuite, modifiez les paramètres du corps du texte.

• Police de caractère : Raleway
• Taille du corps du texte : 1.1rem
• Hauteur de la ligne du corps : 2,1 em

Lire la suite Paramètres de texte

Avec les paramètres de lecture plus de texte.

• Lire la suite Police : Montserrat
• Lire la suite Style de police : majuscule
• Lire la suite Couleur du texte : #ffffff
• Lire la suite Taille du texte : 1rem

Espacement

Ajoutez des valeurs de marge et de remplissage personnalisées aux paramètres d'espacement.

• Marge de gauche : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 0 pixels (téléphone)
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Lire la suite Bouton CSS

Et complétez les paramètres du module en ajoutant quelques CSS du bouton Lire la suite dans l'onglet avancé.

max-width: 200px;
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 100px;
background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

Cloner Row autant de fois que nécessaire

Une fois que vous avez terminé la ligne et tous ses modules, vous pouvez la cloner autant de fois que vous le souhaitez, en fonction du nombre de départements de votre entreprise.

Modifier le contenu du module de texte

Assurez-vous de modifier le contenu H2 de chaque ligne en double.

Changer les catégories du module de blog

Avec les catégories du module de blog.

Ajouter un module de code à la colonne de la dernière ligne

Insérez le code CSS pour styliser les postes ouverts individuellement

Pour terminer la conception, nous allons ajouter un module de code à la dernière ligne de notre page et insérer les lignes de code CSS suivantes :

<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>

3. Enregistrer la conception de la page et afficher le résultat

Une fois que vous avez terminé la conception de la page, vous pouvez enregistrer toutes les modifications, quitter Visual Builder et afficher le résultat !

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

Ce didacticiel est la suite d'un didacticiel précédent, dans lequel nous vous avons montré comment créer un modèle de poste ouvert. Dans ce didacticiel, nous sommes allés plus loin et nous vous avons montré comment présenter ces postes ouverts dynamiques sur votre page Carrières à l'aide du module Blog de Divi. Vous avez également pu télécharger le fichier JSON gratuitement ! 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.