Créer de superbes modèles de types de publication personnalisés avec Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer de superbes modèles de type de publication personnalisé d'événement avec Divi à l'aide du pack de mise en page Meetup gratuit. Ce didacticiel de cas d'utilisation est rendu possible par la fonctionnalité de prise en charge du type de publication personnalisé de Divi Builder, l'une des mises à jour récentes de Divi. Nous allons créer un modèle qui correspondra au pack de mise en page Meetup. Après avoir créé ce modèle, vous pourrez le réutiliser pour tous les événements que vous partagez sur votre site Web.

Allons-y !

Aperçu

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

Installer le plugin de calendrier des événements

Allez dans les plugins et ajoutez-en un nouveau

Pour ajouter des types de publication personnalisés d'événements à notre site Web, nous utiliserons le plug-in The Events Calendar. Il s'agit d'un plugin gratuit que vous pouvez trouver en accédant à votre tableau de bord WordPress > Plugins > Ajouter un nouveau > Recherche du plugin Calendrier des événements .

Activer le plugin

Une fois que vous avez installé le plugin, assurez-vous de l'activer immédiatement afin de pouvoir commencer à l'utiliser.

Modifier les paramètres de personnalisation du thème

Changer de typographie

Maintenant, avant de créer un événement, commençons par bien comprendre les principes fondamentaux de notre site Web. Ouvrez votre personnalisateur de thème en accédant à votre tableau de bord WordPress > Apparence > Personnaliser . Accédez à la typographie de votre site Web en allant dans Paramètres généraux > Typographie ensuite . Une fois que vous y êtes, appliquez les paramètres suivants :

• Taille du corps du texte : 16
• Hauteur de la ligne du corps : 1,9
• Police d'en-tête : Roboto

Les paramètres du calendrier des événements

Le plugin Calendrier des événements possède également certains de ses propres paramètres dans le Personnalisateur de thème. Retournez au menu principal de votre Personnalisateur de thème > Le calendrier des événements > Thème général > Et utilisez les couleurs suivantes :

• Couleur d'accent: #06c8ff
• Couleur de surbrillance en vedette : #06c8ff

Revenez aux paramètres de The Events Calendar > General Theme et utilisez la même couleur '#06c8ff' pour toutes les options que vous pouvez y trouver.

Ajouter un nouvel événement

Ajouter un nouvel événement

Nous sommes maintenant prêts à créer un nouvel événement. Pour ce faire, accédez à votre tableau de bord WordPress > Événements > Ajouter un nouveau . Une fois que vous avez ajouté un nouvel événement, assurez-vous de lui donner également un titre.

Ajouter des détails sur l'événement

Continuez en entrant les détails de votre événement. Ceci comprend:

• Heure Date
• Emplacement
• Les organisateurs
• Site Web de l'événement
• Coût de l'événement

Ajouter une image en vedette

Ajoutez également une image vedette à votre événement. Plus tard dans cet article, nous le supprimerons du frontend, mais nous en aurons toujours besoin pour le partage social.

Modifier les paramètres de la page Divi

Dans le coin droit de votre événement, vous verrez les paramètres de la page Divi. Là, supprimez la barre latérale en sélectionnant "Pas de barre latérale" pour la mise en page.

Publier l'événement

Nous sommes maintenant prêts à commencer à travailler sur le frontend. Allez-y et publiez votre événement.

Il s'agit de la conception de page par défaut sans avoir activé Visual Builder :

Ouvrir la page de destination Meetup et enregistrer les éléments de conception

Localiser et enregistrer la ligne dans la bibliothèque Divi

Travailler efficacement est plus important que travailler dur. C'est pourquoi nous allons gagner du temps et des efforts en réutilisant des éléments du pack de mise en page Meetup. Commencez par ouvrir la page de destination à l'aide de Visual Builder de Divi. Ensuite, repérez la ligne suivante sur votre page et enregistrez-la dans votre bibliothèque Divi :

Localiser et enregistrer la section dans la bibliothèque Divi

Nous aurons également besoin de la section suivante, alors continuez et enregistrez également celle-ci :

Commencer à créer un modèle de type personnalisé d'événement

Ajouter des lignes de code CSS personnalisées pour correspondre au pack de mise en page Meetup

Nous pouvons utiliser le Visual Builder pour les pages d'événements mais malheureusement, nous ne pouvons pas l'utiliser partout. Pour nous assurer que tout est conforme au Meetup Layout Pack, nous allons ajouter quelques lignes de code CSS à l'avance :

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

Basculer vers Visual Builder

Nous pouvons maintenant passer à l'utilisation du Visual Builder sur notre événement !

Ajouter une nouvelle section

Image de fond

Vous verrez qu'il y a une section déjà présente sur la page. C'est l'endroit sur la page que nous pouvons modifier. Commencez par ouvrir les paramètres de la section et ajoutez l'image de fond ' bg-4.png '. Vous pouvez trouver cette image dans votre médiathèque si vous avez déjà téléchargé le pack de mise en page Meetup sur votre site Web. En plus de l'image d'arrière-plan, utilisez les paramètres suivants :

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : en bas à droite

Espacement

Ouvrez ensuite les paramètres d'espacement de votre section et ajoutez « 100px » à la marge supérieure.

Frontière

Nous créons également ce type d'effet de chronologie pour notre modèle. Accédez à vos paramètres de bordure et ajoutez la bordure gauche suivante :

• Largeur de la bordure gauche : 7px
• Couleur de la bordure gauche : #8301e9

Ajouter une nouvelle ligne

Structure des colonnes

Maintenant que nous avons terminé de modifier les paramètres de la section, nous pouvons commencer à ajouter nos lignes. Ajoutez une nouvelle ligne avec la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de votre ligne et activez l'option « Make This Row Fulliwdth » dans les paramètres de dimensionnement. C'est quelque chose que nous allons faire pour chacune des lignes de cette mise en page.

Ajouter un module de texte à la ligne

Dimensionnement

Ensuite, ajoutez un module de texte avec une description de votre événement, passez aux paramètres de dimensionnement et utilisez la largeur suivante :

• Ordinateur de bureau : 47 %
• Tablette et téléphone : 100 %

Importer la ligne enregistrée

Juste en dessous de la ligne que vous avez ajoutée, continuez et importez la ligne que vous avez enregistrée dans votre bibliothèque Divi.

Dimensionnement

Nous devrons modifier certaines choses sur cette ligne, en commençant par les paramètres de dimensionnement. Activez l'option « Rendre cette ligne pleine largeur ».

Supprimer le module de corps de texte et le module de boutons

Ensuite, supprimez le paragraphe du module de texte et le module de bouton dans la première colonne.

Cloner le module de texte et supprimer la taille

Allez-y et clonez le module de texte dans votre première ligne et placez-le dans la première colonne de votre nouvelle ligne. Ouvrez ensuite les paramètres de dimensionnement et supprimez la largeur personnalisée pour le bureau.

Importer la section enregistrée

Nous avons fini de modifier la première section ! Allez-y et importez la section que vous avez enregistrée ensuite.

Ajouter une bordure

Nous ajoutons également une bordure gauche à cette section :

• Largeur de la bordure gauche : 7px
• Couleur de la bordure gauche : #06c8ff

Modifier la taille de chaque ligne

Il y a quelques lignes dans la section que vous venez d'importer. Activez l'option « Make This Row Fullwidth » pour chacune de ces lignes.

Modifier l'alignement des boutons

Enfin, modifiez également l'alignement des boutons à gauche.

Enregistrer le modèle dans la bibliothèque Divi

Ajouter à la bibliothèque

Le modèle de mise en page est terminé ! Vous pouvez maintenant l'enregistrer dans votre bibliothèque Divi et le réutiliser également pour d'autres événements.

Aperçu

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

Dernières pensées

Dans cet article de blog de cas d'utilisation, nous vous avons montré comment créer de superbes modèles de type de publication d'événement personnalisé. Le modèle que nous avons créé correspond au style du pack de mise en page Meetup. Après avoir créé ce modèle, nous l'avons également enregistré dans la bibliothèque Divi afin de pouvoir le réutiliser également pour d'autres événements. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!