Comment créer une page d'accueil de faire-part de mariage avec Divi

Publié: 2017-05-16

Cet article fait partie 1 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.

La création d'une page d'annonce de mariage est un moyen créatif de faire savoir à vos invités que vous allez vous marier. En leur fournissant l'URL de votre site Web, ils resteront en contact. Ils pourront également voir les détails du mariage en ligne quand ils le souhaitent.

Jetons un coup d'œil à la mise en page de la page d'accueil que nous allons vous aider à construire étape par étape :

Création de votre menu de navigation

Nous vous montrerons exactement comment créer une page d'annonce, une page de galerie et une page de liste de cadeaux pour votre site Web de mariage. Ce premier post est dédié à la réalisation de la page d'annonce. Mais avant d'aller là-bas, nous voulons nous assurer que les invités peuvent trouver leur chemin à travers votre site Web en douceur.

C'est pourquoi vous devrez d'abord créer un menu de navigation approprié et élégant.

Commencez par aller dans Divi > Options du thème > et téléchargez le logo que vous souhaitez utiliser sur l'ensemble de votre site Web.

Cliquez sur Enregistrer les modifications et passez aux pages de votre site Web WordPress. Ajoutez une nouvelle page où vous allez créer la page d'annonce. Faites de même pour la page de la galerie et la page de la liste de cadeaux que nous vous montrerons comment créer dans les prochains articles.

Laissons le contenu vide pour l'instant et allons dans le Personnalisateur de thème de votre site Web pour modifier le menu de navigation. Commencez par ajouter les pages de votre site web à votre menu en allant dans Menus > Ajouter un menu > Ajouter les pages à votre menu . Ce menu doit être le menu principal de votre site Web.

Ensuite, accédez à En-tête et navigation > Barre de menus principale et apportez les modifications suivantes :

  • Hauteur des menus : 66
  • Ajustez la hauteur maximale du logo en fonction des dimensions de l'image
  • Taille du texte : 16
  • Espacement des lettres : 2
  • Police : Raleway Light
  • Style de police : Gras
  • Couleur du texte : #9b7461
  • Couleur d'arrière-plan : rgba(155 116,97,0,13)

Maintenant, revenez à En-tête et navigation et modifiez le style d'en-tête en « Centré » dans le format d'en-tête.

Enregistrez et publiez les modifications que vous avez apportées.

Commencez sur la page d'annonce

Le site Web comporte quatre sections, et chacune d'entre elles apporte sa valeur au site Web, ce qui rend votre faire-part de mariage complet. Nous allons expliquer chaque section en détail et nous vous montrerons comment exactement vous pouvez créer le même design que la mise en page illustrée ci-dessus.

Section héros (y compris le compte à rebours)

La première partie de la conception est l'en-tête. Nous avons décidé de faire en sorte que les invités se sentent immédiatement interagis avec le site Web et le mariage en y insérant un module de compte à rebours. Dans le constructeur Divi, la section d'en-tête ressemble à ceci :

Nous allons utiliser une section standard avec une ligne complète en mode pleine largeur dans cette partie du site Web. Dans la section des lignes, vous devrez ajouter trois modules ; deux modules de texte et un module de compte à rebours. Le module de compte à rebours est situé au milieu des deux modules de texte.

Commencez avec le premier module de texte

Commencez par ajouter un module de texte à la ligne. Écrivez le texte que vous souhaitez utiliser, modifiez l'orientation du texte sur « Centre » et appliquez les modifications suivantes à l'onglet Paramètres de conception avancés :

  • Taille de la police du texte : 100 px (ordinateur de bureau), 80 px (tablette), 66 px (téléphone)
  • Police du texte : Mandarine
  • Couleur du texte : #9b857b

Dans le même onglet, faites défiler vers le bas et modifiez les marges de votre module de texte en ajoutant "10%" en haut et "5%" en bas.

Cliquez sur Enregistrer et quitter.

Module de comptage (de bureau)

Ajoutez un module de compte à rebours sous le module de texte que vous venez de créer. Dans l'onglet Paramètres généraux, ajoutez la date et l'heure du mariage et remplacez la couleur d'arrière-plan par « #fae4de ». Nous utiliserons ce compte à rebours sur les ordinateurs de bureau uniquement, allez-y et désactivez-le pour les tablettes et les téléphones.

Passez aux paramètres de conception avancés et apportez les modifications suivantes :

  • Police des nombres : mandarine
  • Taille de la police des nombres : 74px
  • Couleur de la police des nombres : #9b857b
  • Hauteur de la ligne des nombres : 70px
  • Police de l'étiquette : Raleway Light
  • Taille de la police de l'étiquette : 14 px
  • Couleur du texte de l'étiquette : #9b857b
  • Hauteur de la ligne d'étiquette : 25px

Dans le même onglet, faites défiler vers le bas et ajustez le rembourrage personnalisé supérieur à « 10 % » et le rembourrage personnalisé inférieur à « 10 % ».

Ensuite, accédez au troisième onglet CSS personnalisé et ajoutez le code suivant à l'élément principal : 

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Votre compte à rebours ressemblera maintenant exactement à celui de l'image de mise en page que nous vous avons montrée ci-dessus.

Module de compte à rebours (tablette et téléphone)

Maintenant, allez-y, clonez le compte à rebours précédent que vous avez effectué et désactivez-le sur le bureau (au lieu de la tablette et du téléphone). Ensuite, apportez les modifications suivantes au module :

  • Taille de la police des nombres : 72 px (tablette et téléphone)
  • Hauteur de la ligne des nombres : 70px
  • Taille de la police de l'étiquette : 14 px (tablette), 12 px (téléphone)

Et changez le code dans l'élément principal de l'onglet CSS en : 

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Deuxième module de texte

Maintenant, sous le module de compte à rebours, ajoutez un autre module de texte. Dans l'onglet Paramètres généraux, modifiez l'orientation du texte sur « Centre ». Continuez en ajoutant le nom du marié et de la mariée et en allant dans l'onglet Paramètres de conception avancés.

Dans les paramètres de conception avancés, apportez les modifications suivantes :

  • Police du texte : Mandarine
  • Taille de la police de texte : 50px
  • Couleur du texte : #9b857b
  • Hauteur de la ligne de texte : 1,7 em

Continuez à faire défiler l'onglet Paramètres de conception avancés jusqu'à Marge personnalisée et ajoutez « 10 % » à la marge supérieure.

Diviseur

La dernière partie de cette section de héros est le diviseur. Ajoutez un séparateur et changez la couleur dans l'onglet Général en '#9b857b'. Assurez-vous que le diviseur est également rendu « visible ».

Ensuite, allez dans l'onglet Design et rendez le style de diviseur « solide », la position du diviseur « en haut », modifiez le poids du diviseur en « 1px » et masquez-le sur le mobile.

Passez à l'onglet CSS et ajoutez le code suivant à l'élément principal : 

margin-left: auto;
margin-right: auto;
width: 30%;

Cliquez sur Enregistrer et quitter. Vous avez terminé la première section du site Web, qui devrait ressembler à ceci :

Nous pouvons maintenant passer à la deuxième partie de cette mise en page où vous pouvez commencer à raconter votre histoire aux invités.

Raconter l'annonce : deuxième section

Cette deuxième section comporte deux rangées symétriques qui forment une partie de la page d'accueil du mariage. Cette partie a une largeur légèrement plus petite qui crée un peu plus de perspective sur votre site Web.

Première rangée de la section

Commencez par créer une section standard, changez la couleur d'arrière-plan en '#fffaf6' et ajoutez '5%' au rembourrage inférieur. Ensuite, ajoutez une ligne à deux colonnes à cette section.

Ensuite, ouvrez les paramètres de ligne. Dans les paramètres généraux, sélectionnez « OUI » pour utiliser la largeur personnalisée, modifiez l'unité en pourcentage et remplissez « 90 % ». Faites défiler vers le bas dans le même onglet, activez la largeur de la gouttière et masquez pour le téléphone et la tablette.

Ensuite, allez dans l'onglet Paramètres de conception avancés, égalisez les hauteurs de colonne et ajoutez « #9b857b » comme couleur d'arrière-plan de la première colonne. Dans ce même onglet, modifiez le remplissage de la colonne 1 en "5%" en haut, "10%" à droite, "5%" en bas et "10%" à gauche.

Pour la deuxième colonne, nous n'aurons pas besoin de définir une couleur d'arrière-plan mais de télécharger une image d'arrière-plan à la place.

Module de texte

Maintenant, ajoutez un module de texte dans la première colonne de la ligne. Dans l'onglet Paramètres généraux, placez l'orientation du texte sur « Centre » et saisissez le texte que vous souhaitez partager dans la zone de texte. Ensuite, allez dans l'onglet Paramètres de conception avancés.

Dans l'onglet Paramètres de conception avancés, apportez les modifications suivantes :

  • Largeur max : 500px (pour ordinateur uniquement)
  • Police du texte : Mandarine
  • Taille de la police de texte : 44
  • Couleur du texte : #fffaf6

Et ajoutez 5% au rembourrage inférieur.

Appuyez sur Enregistrer et quitter et ajoutez un autre module de texte. Rendez l'orientation du texte 'justifiée'. Continuez en apportant les modifications suivantes au module de texte dans les paramètres de conception :

  • Largeur maximale : 500 px
  • Taille de la police du texte : 14 px
  • Police du texte : Raleway Light
  • Style de police : gras
  • Couleur de la police du texte : #fffaf6
  • Hauteur de la ligne de texte : 1,7 em

Appuyez sur Enregistrer et quitter.

Cloner la ligne précédente

Maintenant, clonez la ligne que vous venez de créer. La ligne clonée sera automatiquement placée sous celle que vous venez de créer. Mais dans ce cas, nous avons besoin que les modules soient du côté opposé. Placez les deux modules de texte dans la deuxième colonne au lieu de la première.

Ensuite, ouvrez les paramètres de ligne et ajoutez une image d'arrière-plan à la première colonne. Supprimez tous les paramètres de remplissage que nous avons définis dans le remplissage de la première colonne et placez-les dans le remplissage de la deuxième colonne.

Appuyez sur Enregistrer et quitter et vous êtes prêt à partir.

Rangée pour téléphone et tablette

Créez une autre ligne à deux colonnes et masquez-la pour le bureau. Agrandissez le rang et changez la largeur de la gouttière en « 3 ».

Ensuite, accédez à l'onglet Conception et téléchargez une image d'arrière-plan pour les deux colonnes et apportez les modifications suivantes au remplissage personnalisé des deux colonnes :

  • Top 5%
  • À droite : 10 %
  • Bas : 5 %
  • À gauche : 10 %

Après avoir ajouté cette deuxième section, voici à quoi devrait ressembler votre mise en page en ce moment :

Meilleur homme, demoiselle d'honneur, hommes d'honneur et garçons d'honneur

Pourquoi ne pas mettre les personnes les plus importantes de votre vie sur votre site de mariage ? Donner qui sera le meilleur homme, la demoiselle d'honneur, les hommes d'honneur et les garçons d'honneur, peut donner un petit coup de pouce supplémentaire à votre site Web.

Pour ajouter cette partie à votre site, commencez par ajouter une nouvelle section standard à votre page. Dans cette nouvelle section, vous devrez créer trois lignes avec des colonnes et des modules différents.

Maintenant, une fois que vous avez créé la section, qui est une section standard, donnez-lui la couleur d'arrière-plan suivante : '#fae4de'. Vous n'aurez rien d'autre à modifier dans les paramètres de la section, vous pouvez donc appuyer sur Enregistrer et quitter.

Création du module de texte

Ensuite, créez votre première ligne pleine largeur. La seule chose que vous devrez y mettre est un module de texte. Ouvrez le module de texte, remplissez la zone de texte et sélectionnez « Centrer » dans le champ Orientation du texte.

Ensuite, allez dans Paramètres de conception avancés, définissez la police du texte sur « Tangerine », la taille de la police du texte sur « 100px » (ordinateur de bureau et tablette) et « 68 % » (téléphone) et la couleur de la police du texte sur « #9b857b ». Faites défiler le même onglet et modifiez les marges en « 10 % » en haut et « 5 % » en bas.

Cliquez sur Enregistrer et quitter. Votre premier module et rangée sont maintenant terminés.

Ajoutez une autre ligne, dans ce cas avec deux colonnes et ajoutez 5% aux marges supérieure et inférieure. Ensuite, ajoutez un module de personne dans la première colonne de la ligne.

Le module image et personne

En continuant, ouvrez les paramètres du module de personne. Téléchargez une image, entrez l'URL des canaux de médias sociaux dans les champs et écrivez un peu à leur sujet dans la zone de texte. Si vous n'êtes pas sûr des dimensions que vos images devraient avoir, jetez un œil à cet article de blog.

Ensuite, accédez aux paramètres de conception avancés et effectuez les ajustements suivants :

  • Police d'en-tête : Raleway Light
  • Style de police d'en-tête : gras
  • Taille de la police d'en-tête : 14
  • Couleur du texte de l'en-tête : #9b857b
  • Hauteur de la ligne d'en-tête : 1 em
  • Police de caractère : Raleway Light
  • Style de police du corps : gras
  • Taille de la police du corps : 14
  • Couleur du corps du texte : #9b857b
  • Hauteur de la ligne du corps : 1,7 em

Ouvrez les paramètres du module personne et allez dans l'onglet CSS. Dans le champ Member Image, ajoutez le code suivant : 

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

Maintenant, allez-y et clonez les modules Image et Person et placez-les dans la colonne de droite.

Continuez en ajoutant une nouvelle ligne avec quatre colonnes et clonez à nouveau le module Image et Personne (quatre fois) et placez-les dans chaque colonne. Le code et les paramètres que nous avons utilisés la première fois s'appliqueront à tous.

Votre mise en page devrait maintenant ressembler à ceci :

Où et quand

Il s'agit de la dernière partie de la page d'accueil de votre mariage, où vous informerez votre public du lieu et de l'heure de votre mariage. Pour cette section, nous aurons besoin d'une ligne avec 3 colonnes (1/2, 1/4, 1/4) avec la couleur de fond suivante : '#fffaf6'.

Ajout d'une carte

Dans la première colonne de cette section, ajoutez un module Carte. Pour pouvoir utiliser la fonctionnalité Carte, vous devrez entrer une clé API Google. Si vous n'avez pas de clé API, lisez ici comment en créer une. Entrez l'adresse de votre mariage et laissez le module trouver le lieu. Pour créer une épingle sur votre carte, ajoutez une nouvelle épingle et remettez l'emplacement, l'épingle apparaîtra alors sur la carte.

Dans les autres colonnes, nous utiliserons des modules de texte et des textes de présentation. Ajoutez un module de texte et définissez les paramètres d'orientation du texte dans les paramètres généraux sur « Centre ». Ensuite, accédez aux paramètres de conception avancés et effectuez les modifications suivantes :

  • Police du texte : Mandarine
  • Taille de la police de texte : 50px
  • Couleur du texte : #9b857b
  • Hauteur de la ligne de texte : 1,7 em

Les paramètres de ce module de texte s'appliquent aux modules de texte dans les deux colonnes.

Module de présentation

Sous le module de texte, ajoutez un module Blurb. Choisissez l'icône d'emplacement, changez sa couleur en '#f9c8b8', ajoutez l'emplacement dans la zone de texte et changez l'orientation du texte en 'Centre'. Ensuite, accédez aux paramètres de conception avancés et effectuez les modifications suivantes :

  • Taille de la police de l'icône : 42 px
  • Police de caractère : Raleway Light
  • Style de police : gras
  • Taille de la police du corps : 14
  • Couleur du corps du texte : #9b857b
  • Hauteur de la ligne du corps : 1 em

Dans la colonne suivante, faites exactement la même chose. Changez uniquement l'icône de présentation en horloge et ajoutez les détails « quand » dans la zone de texte.

C'est ça. Votre mise en page devrait maintenant être aussi fluide que la mise en page de ce didacticiel :

Suivant

Dans la deuxième partie de cette mini-série, nous allons voir comment créer une page galerie dédiée au partage de photos avec vos invités après le mariage. Si vous avez des commentaires sur ce tutoriel, ou si vous avez des demandes de futurs tutoriels ; assurez-vous de laisser un commentaire dans la section commentaires de cet article de blog afin que nous puissions vous répondre !

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 !