Comment créer un modèle de publication d'offre d'emploi dynamique avec le générateur de thème et ACF de Divi

Publié: 2019-12-26

Lorsque vous utilisez Divi Theme Builder en combinaison avec du contenu dynamique, vous vous retrouverez rapidement à remplacer les plugins par des modèles créés par vous-même. Dans le didacticiel d'aujourd'hui, nous allons vous montrer comment créer un modèle de publication d'offre d'emploi complètement dynamique à l'aide de Divi Theme Builder et d'un groupe de champs ACF. Ce modèle de publication d'offre d'emploi dynamique est entièrement personnalisable et vous pourrez également télécharger le fichier JSON 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

modèle de poste ouvert

Mobile

modèle de poste ouvert

Téléchargez GRATUITEMENT le modèle de publication d'offre d'emploi

Pour mettre la main sur le modèle de publication d'offre d'emploi gratuit, vous devez d'abord le télécharger à l'aide du 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.

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 des catégories de publication

Aller aux catégories de messages

La première partie de la création du modèle de poste vacant consiste à ajouter de nouvelles catégories de publication que vous utiliserez pour les postes vacants que vous ajoutez. Accédez aux catégories de publications dans votre tableau de bord WordPress.

modèle de poste ouvert

Ajouter des catégories de postes vacants

Ajoutez une catégorie parent et une catégorie distincte pour chaque département.

Une opportunité d'emploi
- Communication
- Concevoir
- Développement
- Commercialisation
- …

modèle de poste ouvert

2. Installer ACF et configurer les champs de projet

Installer et activer ACF

Continuez en installant et en activant le plugin gratuit Advanced Custom Fields.

modèle de poste ouvert

Configurer le groupe de champs

Configurez un nouveau groupe de champs en accédant à votre tableau de bord WordPress > Champs personnalisés > Ajouter un nouveau .

modèle de poste ouvert

Nous voulons que le groupe de champs apparaisse exclusivement sur les publications qui font partie de la catégorie parent que nous avons ajoutée dans la partie précédente de ce didacticiel. Pour ce faire, assurez-vous que les règles suivantes s'appliquent au groupe de champs :

Post Type est égal à Post et
Catégorie de poste est égal à Offre d'emploi

modèle de poste ouvert

Ajouter des champs

Une fois le groupe de champs créé, il est temps d'ajouter les différents champs. Pour recréer exactement le même modèle que dans l'aperçu de ce didacticiel, vous aurez besoin des champs personnalisés suivants :

Responsabilités
- Libellé du champ : responsabilités
- Type de champ : zone de texte
Expérience requise
- Libellé du champ : Expérience requise
- Type de champ : Éditeur Wysiwyg
Compétences requises
- Libellé du champ : compétences requises
- Type de champ : Éditeur Wysiwyg
Bonus de qualification
- Étiquette de champ : Qualifications bonus
- Type de champ : Éditeur Wysiwyg
Emplacement
- Libellé du champ : Emplacement
- Type de champ : Texte
Type d'emploi
- Libellé du champ : type de tâche
- Type de champ : case à cocher
- Choix : Temps plein + Temps partiel + Freelance (nouvelle ligne pour chaque choix)
Appliquer la redirection
- Libellé du champ : Appliquer la redirection
- Type de champ : URL

modèle de poste ouvert

3. Ajouter un nouvel article de blog

Ajouter le titre du poste ouvert, la description courte et les catégories

Une fois que vous avez rempli le groupe de champs personnalisés et tous ses champs, il est temps de créer un exemple de poste vacant. Entrez le titre, la description du poste et sélectionnez les catégories.

modèle de poste ouvert

Remplissez tous les champs personnalisés

Continuez en remplissant tous les champs personnalisés.

modèle de poste ouvert

4. Créer un nouveau modèle

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

Une fois que votre exemple d'article de blog est en place, il est temps de créer le modèle de poste à pourvoir ! Pour ce faire, accédez au générateur de thème Divi et cliquez sur « Ajouter un nouveau modèle ».

modèle de poste ouvert

Utiliser sur

Utilisez le modèle sur les publications de la catégorie Offres d'emploi.

modèle de poste ouvert

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

Maintenant, commencez à créer le design en cliquant sur « Ajouter un corps personnalisé » et en sélectionnant « Créer un corps personnalisé ». Cela vous redirigera vers l'éditeur de modèles.

modèle de poste ouvert

Section 1

Fond dégradé

À l'intérieur de l'éditeur de modèles Divi, vous remarquerez une section. Ouvrez cette section et ajoutez un arrière-plan dégradé.

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

modèle de poste ouvert

Diviseur inférieur

Ajoutez un séparateur inférieur à la section suivante.

Style de séparation : Rechercher dans la liste
Hauteur du diviseur : 8vw
Disposition des diviseurs : sous le contenu de la section

modèle de poste ouvert

Espacement

Et incluez également un rembourrage inférieur.

Rembourrage inférieur : 400px

modèle de poste ouvert

Ajouter la ligne n° 1

Structure des colonnes

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

modèle de poste ouvert

Ajouter le module Blurb à la colonne 1

Contenu dynamique

Il est temps de commencer à ajouter des modules ! Le premier module dont nous avons besoin dans la colonne 1 est un module Blurb. Sélectionnez le contenu dynamique de l'emplacement pour la zone de titre et laissez la zone de contenu vide.

Titre : Emplacement

modèle de poste ouvert

Sélectionnez l'icône

Continuez en sélectionnant une icône.

modèle de poste ouvert

Paramètres des icônes

Passez à l'onglet Conception et modifiez les paramètres de l'icône comme suit :

Couleur de l'icône : #ffffff
Placement des images/icônes : à gauche
Utiliser la taille de la police de l'icône : Oui
Taille de la police de l'icône : 25px

modèle de poste ouvert

Paramètres du texte du titre

Modifiez également les paramètres de texte H3.

Titre Titre Niveau : H3
Police du titre : Lato
Couleur du texte du titre : #ffffff
Taille du texte du titre : 1.4rem

modèle de poste ouvert

Animation

Enfin, supprimez l'animation de l'icône dans les paramètres d'animation.

Animation d'image/icône : pas d'animation

modèle de poste ouvert

Cloner le module Blurb et placer le doublon dans la colonne 2

Une fois que vous avez terminé le module Blurb dans la colonne 1, vous pouvez le cloner une fois et placer le doublon dans la deuxième colonne.

modèle de poste ouvert

Modifier le contenu dynamique et l'icône

Assurez-vous de modifier le contenu dynamique du titre avec l'icône.

Titre : Type de poste

modèle de poste ouvert

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Dans la dernière colonne, ajoutez un module de bouton. Ajoutez une copie de votre choix.

modèle de poste ouvert

Lien dynamique

Sélectionnez ensuite le lien de redirection d'application dynamique.

URL du lien du bouton : Appliquer la redirection
Cible du lien du bouton : dans le nouvel onglet

modèle de poste ouvert

Alignement

Passez à l'onglet de conception du module et modifiez l'alignement sur différentes tailles d'écran.

Alignement des boutons : à droite (ordinateur de bureau), à gauche (tablette et téléphone)

modèle de poste ouvert

Paramètres des boutons

Stylisez également le bouton.

Utiliser des styles personnalisés pour le bouton : Oui
Taille du texte du bouton : 1rem
Couleur du texte du bouton : #ff6600
Couleur d'arrière-plan du bouton : #ffffff
Largeur de la bordure du bouton : 0px

modèle de poste ouvert

Rayon de la bordure du bouton : 100 pixels
Police des boutons : Montserrat
Style de police des boutons : majuscule

modèle de poste ouvert