Comment créer une chronologie pour votre calendrier de mariage avec Divi et le plugin Divi Timeline Module

Cet article fait partie 5 sur 5 de notre mini-série Comment créer un site Web de mariage élégant avec Divi. Dans cette série, nous vous guiderons à travers les étapes les plus importantes de la création d'un site Web de mariage pour vous-même ou un client avec Divi.

Dans les quatre premières parties de la mini-série, nous vous avons montré comment créer :

• une page d'annonce de mariage élégante
• une page de galerie
• une page de liste de cadeaux
• et comment utiliser le plugin Automatic Divi Testimonials sur votre site Web de mariage.

Les mises en page que nous avons créées étaient cohérentes dans le style et faciles à créer.

Dans cette dernière partie de la mini-série, nous allons vous montrer comment créer une chronologie pour votre site web de mariage avec le plugin Divi Timeline Module d'Elegant Marketplace. Nous allons vous donner un exemple sur la façon de créer une belle chronologie verticale qui tiendra vos invités au courant de ce qui va se passer pendant le grand jour des mariés.

Exemple de chronologie verticale

La mise en page que nous créons ressemblera à l'exemple ci-dessous. Nous parlerons des étapes les plus importantes qui vous aideront à trouver votre chemin avec la chronologie. Après avoir lu cet article, vous pouvez rapidement commencer, en créer un et donner une touche supplémentaire à votre site Web de mariage.

Achat du plugin

Si vous ne possédez pas encore le plugin Divi Timeline Module, vous devrez l'acheter sur le site d'Elegant Marketplace. Le plugin coûte 11 $. Après avoir acheté le plugin sur leur site Web, vous recevrez le fichier ZIP qui contient le nouveau module que vous ajouterez à votre site Web.

Installation du plugin

Connectez-vous à votre site Web WordPress et accédez à « Ajouter un nouveau » dans la section Plugin.

Téléchargez le fichier ZIP que vous avez reçu lors de l'achat.

Activez le plugin et vous êtes prêt à partir. Le plugin ajoutera désormais automatiquement des modules de chronologie à votre constructeur Divi.

Deux façons différentes d'utiliser le module Divi Timeline sur votre site Web

Affichage de l'horaire du mariage

Une chronologie sur votre site Web de mariage peut vraiment donner cette valeur ajoutée supplémentaire à votre site Web. Vous pouvez utiliser la chronologie pour montrer à quoi ressemblera le jour du mariage. Cette transparence en ligne aide vos invités à trouver leur chemin dans l'emploi du temps chargé du mariage.

Vous n'aurez qu'à penser à partager le lien vers votre site web de mariage avec vos invités à l'avance. De cette façon, ils pourront accéder aux informations n'importe où et n'importe quand.

Vous pouvez créer une page séparée pour la chronologie ou décider de l'inclure dans l'une de vos autres pages. Étant donné qu'une chronologie prend beaucoup de place sur un écran, nous vous recommandons de consacrer une toute nouvelle page à la chronologie.

Affichage de la chronologie des relations du couple de mariage

En plus de créer un calendrier de mariage avec le plugin, vous pouvez également utiliser le module de chronologie pour présenter la chronologie des relations du couple de mariage. En incluant la façon dont le couple s'est rencontré et les différentes phases qu'ils ont vécues dans leur relation, vous pouvez vous engager un peu plus avec les invités et raconter l'histoire.

Les différents types de modules de témoignages

Lors du téléchargement du plugin, vous remarquerez que quatre modules supplémentaires apparaissent dans votre liste de modules. Tous sont des échéanciers mais avec un objectif différent.

Vous en avez un pour les articles, le contenu, les images en vedette, les titres des articles et juste un vertical normal. Pour l'exemple de chronologie que nous allons créer dans cet article, nous n'utiliserons que la chronologie - Verticale. Ce module nous permet d'écrire immédiatement des informations dans la zone de contenu, sans être lié à quoi que ce soit d'autre sur le site Web comme vos messages.

Commencer

Nous vous montrons étape par étape comment créer la chronologie suivante :

Le module est réactif et aura fière allure sur votre bureau ainsi que sur votre téléphone ou votre tablette. Commençons!

Ajouter les éléments Chronologie et Chronologie

Étant donné que le module Timeline est un plugin tiers, nous ne pourrons apporter aucune modification visuelle avec Visual Builder. C'est pourquoi nous allons simplement rester sur la partie backend du site Web pour apporter les modifications nécessaires.

Commencez par ajouter une nouvelle page que vous dédierez à votre chronologie. Dans cette page, vous aurez bien sûr besoin d'une section de héros. Cependant, à part cela, vous n'aurez besoin que d'une section standard pour la chronologie. Ajoutez une nouvelle section standard avec une ligne pleine largeur à la page. Ensuite, placez la Timeline - Vertical Module dans cette rangée pleine largeur.

Désormais, dans les paramètres du module Timeline – Vertical, vous pourrez ajouter différents éléments de timeline à la timeline que vous créez.

Il existe un flux standard qui est généralement suivi lors d'un mariage. Nous allons créer de nouveaux éléments de chronologie pour chacun des événements suivants :

• Coiffure et maquillage de la mariée
• Shooting de mariage
• Pré-cérémonie
• La cérémonie
• L'heure du cocktail
• Début du dîner
• Toasts
• Première danse
• Temps de danse
• désert
• Dernier mot de remerciement

Bien sûr, tout dépend de la façon dont vous avez planifié votre journée de mariage. Vous pouvez ajouter autant d'éléments de chronologie que vous le souhaitez.

Modifications du module de chronologie

Mais avant d'ajouter les éléments de la chronologie, apportons les modifications qui devront s'appliquer à tous les éléments de la chronologie via le module Chronologie - Vertical. Accédez à l'onglet Contenu de votre Timeline – Module vertical et modifiez la couleur de la ligne centrale en « #fae4de » dans la sous-catégorie Arrière-plan. Cette couleur sera appliquée à toutes les lignes du module Timeline qui permettent aux différents éléments de la timeline d'interagir les uns avec les autres.

Ensuite, allez dans l'onglet Conception. Tout d'abord, ouvrez la sous-catégorie Texte et effectuez les modifications suivantes :

• Police du texte : Raleway Light
• Style de police de texte : gras
• Taille de la police du texte : 14 px
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1 em

Faites défiler le même onglet vers le bas et apportez les modifications suivantes à la sous-catégorie Texte de l'étiquette de l'article :

• Police de l'étiquette de l'article : Raleway Light
• Style de police de l'étiquette de l'article : gras
• Taille de la police de l'étiquette de l'article : 39 px
• Couleur du texte de l'étiquette de l'article : #9b857b
• Hauteur de la ligne de l'étiquette de l'article : 1,5 em

De plus, apportez les modifications suivantes à la sous-catégorie Texte des titres :

• Police des en-têtes : Tangerine
• Taille de la police des en-têtes : 70 px (ordinateur de bureau et tablette), 60 px (tablette)
• Couleur du texte des en-têtes : #9b857b
• Hauteur de la ligne des en-têtes : 1,5 em

Toutes les modifications mentionnées ci-dessus s'appliqueront à chaque élément de la chronologie. Cliquez sur Enregistrer et quitter.

Modifications des éléments de la chronologie

Lorsque vous regardez le résultat jusqu'à présent, vous pouvez remarquer que les modifications ont été apportées à l'image totale. Maintenant, nous devons apporter des modifications individuelles aux éléments de la chronologie. Commencez par ajouter un seul élément de la chronologie. Ensuite, accédez à l'onglet Contenu de cet élément de la chronologie. Continuez en ajoutant un titre à votre élément de la chronologie dans la sous-catégorie Arrière-plan.

Ensuite, ajoutez le contenu que vous souhaitez voir apparaître dans la zone de contenu (y compris l'heure en italique) et écrivez l'heure du jour dans le champ Étiquette de la chronologie. Vous pouvez également ajouter l'emplacement dans ce même champ si vous le souhaitez.

Contenu de l'élément de la chronologie

Le contenu écrit sur le terrain apparaîtra de l'autre côté de la chronologie lorsque quelqu'un visitera votre site Web avec un ordinateur de bureau. Cette étiquette ne s'affiche pas lorsque quelqu'un regarde votre chronologie sur son téléphone. C'est pourquoi nous vous recommandons de placer également les informations pratiques que vous souhaitez partager dans l'étiquette de l'article dans la zone de contenu. De cette façon, les personnes qui visitent le site Web par téléphone peuvent également voir les informations.

Faites défiler le même onglet et recherchez l'icône du cœur dans la liste des icônes d'élément, changez la couleur de l'icône en « 9b857b » et la couleur d'arrière-plan de l'icône en « #fae4de ».

Cliquez sur Enregistrer et l'élément de la chronologie sera ajouté à votre chronologie. Dans l'exemple que nous avons créé, nous avons utilisé les mêmes paramètres pour tous les éléments de la chronologie. Par conséquent, pourquoi nous vous recommandons de cloner simplement le premier élément de la chronologie et d'effectuer d'autres ajustements en conséquence.

Créez autant d'éléments de chronologie que nécessaire pour rendre votre programme de mariage aussi clair que possible pour les invités. Chaque fois que vous ajoutez un nouvel élément de la chronologie, il sera automatiquement situé du côté opposé de l'élément de la chronologie précédent sans que vous ayez à effectuer des ajustements manuels.

Emballer

C'était la dernière partie de la mini-série Comment créer un site Web de mariage élégant avec Divi . Nous espérons qu'il s'agit d'une série d'articles précieux qui vous aideront à créer un site Web de mariage élégant et époustouflant pour vous-même ou vos clients. Si vous avez des questions concernant ce didacticiel, ou si vous avez des demandes de futurs didacticiels/mini-séries ; assurez-vous de laisser un commentaire dans la section commentaires de cet article de blog afin que nous puissions vous répondre avec des réponses !

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !