Comment créer une page de liste de cadeaux pour votre mariage avec Divi

Cet article fait partie 3 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 deux premières parties de notre mini-série, nous vous avons montré comment créer une page de faire-part de mariage élégante et une page de galerie avec Divi. Cette troisième partie sera consacrée à la création d'une page de liste de cadeaux au sein de votre site Web de mariage.

Nous allons vous montrer étape par étape comment créer la mise en page suivante avec le Visual Builder de Divi :

La mise en page comporte cinq sections et chacune d'entre elles apporte sa propre valeur à l'ensemble. Plongeons dans le premier !

La section des héros

La section des héros est vraiment simpliste mais c'est exactement ce que nous recherchons dans cette mini-série ; simplicité et élégance. Nous utilisons la même palette de couleurs que dans les deux tutoriels de mariage précédents, donc si vous suivez, vous pouvez facilement ajouter cette page au site Web de mariage que vous avez déjà commencé à créer.

Commencer

Commencez par ajouter une nouvelle page à votre site WordPress et donnez-lui un nom. Activez ensuite le Divi Builder et passez immédiatement au Visual Builder.

Ajoutez une nouvelle section à la page que vous venez de créer. Ouvrez les paramètres de la section et modifiez l'image d'arrière-plan dans la sous-catégorie Arrière-plan de l'onglet Contenu. Dans cet exemple, nous avons pris une image symétrique pour l'arrière-plan de la section pour donner cet effet supplémentaire.

Continuez en ajoutant une ligne pleine largeur à la section. Ouvrez les paramètres de la ligne et remplacez la couleur d'arrière-plan par « rgba(122,122,122,0,56) » dans la sous-catégorie d'arrière-plan de l'onglet Contenu.

Pour continuer, allez dans l'onglet Conception. Ouvrez la sous-catégorie Dimensionnement, agrandissez la ligne et entrez « 1 » pour la largeur de la gouttière.

Faites défiler vers le bas et ouvrez la sous-catégorie Espacement. Nous devrons ajouter "200px" au rembourrage supérieur et inférieur pour les ordinateurs de bureau et "150px" au rembourrage supérieur et inférieur pour les tablettes et les téléphones.

Dans cette même sous-catégorie, ajoutez "-50px" aux marges supérieure et inférieure pour les tablettes et les téléphones.

Premier module de texte

En continuant, ajoutez un nouveau module de texte à la ligne. Ajoutez votre texte dans la sous-catégorie Texte de l'onglet Contenu. Après cela, accédez à l'onglet Conception et apportez les modifications suivantes à la sous-catégorie Texte :

• Orientation du texte : Centre
• Police du texte : Mandarine
• Taille de la police de texte : 100 (ordinateur de bureau et tablette), 68 (téléphone)
• Couleur du texte : #fffaf6
• Hauteur de la ligne de texte : 1,5 em

Deuxième module de texte

Créez un autre module de texte juste en dessous. Accédez à l'onglet Contenu et saisissez votre texte dans la sous-catégorie Texte. Ensuite, accédez à l'onglet Conception et apportez les modifications suivantes à la sous-catégorie Texte :

• Orientation du texte : Centre
• Police du texte : Raleway Light
• Style de police de texte : gras
• Taille de la police du texte : 20 pixels (ordinateur de bureau), 14 pixels (tablette et téléphone)
• Couleur du texte : #fffaf6
• Hauteur de la ligne de texte : 1,5 em

Votre en-tête devrait ressembler à ceci jusqu'à présent :

La section d'introduction

Dans cette disposition, nous voulons donner le choix aux gens. Ils peuvent choisir s'ils veulent acheter quelque chose pour la mariée, le marié ou les deux.

Commencez par créer une nouvelle section et ajoutez une ligne avec une colonne. Remplacez la couleur d'arrière-plan par « #fffaf6 » dans la sous-catégorie Arrière-plan de l'onglet Contenu. Après cela, ouvrez les paramètres de ligne et accédez à l'onglet Conception. Ajoutez « 5 % » aux marges supérieure et inférieure pour les ordinateurs de bureau uniquement.

Section titre

Dans cette rangée. la seule chose que nous devrons ajouter est un module de texte. Tapez le titre que vous souhaitez voir apparaître dans la sous-catégorie Texte de l'onglet Contenu. Passez à l'onglet Conception et apportez les modifications suivantes à la sous-catégorie Texte :

• Orientation du texte : Centre
• Police du texte : Mandarine
• Style de police de texte : gras
• Taille de la police du texte : 60 px (ordinateur de bureau), 50 px (tablette et téléphone)
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1,7 em

Maintenant, ouvrez la sous-catégorie Dimensionnement et modifiez la largeur maximale en « 500px ».

Continuez en ouvrant la sous-catégorie Espacement dans le même onglet et ajoutez « 3 % » au rembourrage supérieur et inférieur.

Ensuite, allez dans l'onglet Avancé et ajoutez le code suivant à l'élément principal dans la sous-catégorie CSS personnalisée :

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

Maintenant, ajoutez une autre ligne avec une colonne à la même section. Nous n'avons pas besoin de changer quoi que ce soit dans les paramètres de cette ligne.

Module d'images

Ajoutez un module d'image à la ligne et téléchargez l'image dans la sous-catégorie Image de l'onglet Contenu. Ensuite, allez dans l'onglet Conception, supprimez l'espace sous l'image, sélectionnez « Centrer » pour l'alignement de l'image et centrez toujours l'image sur le mobile.

Ensuite, allez dans l'onglet Avancé et ajoutez le code suivant au champ Élément principal dans la sous-catégorie CSS personnalisée :

height: 100px;
width: 150px;

Premier module de texte

Sous le module Image, ajoutez le premier module texte de la section. Entrez le texte dans la zone de texte dans la sous-catégorie Texte de l'onglet Contenu et passez à l'onglet Conception. Dans la sous-catégorie Texte, effectuez les ajustements suivants :

• Orientation du texte : Centre
• Police du texte : Raleway Light
• Taille de la police du texte : 24 px
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1,5 em

Faites défiler le même onglet et ajoutez « 30px » à la marge supérieure dans la sous-catégorie Espacement.

Enfin, accédez à l'onglet Avancé de ce même module de texte et ajoutez le code suivant à l'élément principal dans la sous-catégorie CSS personnalisée :

font-weight:400;

Deuxième module de texte

Ajoutez un autre module de texte à la section et saisissez le texte dans la zone de texte de la sous-catégorie Texte de l'onglet Contenu. Ensuite, passez à l'onglet Conception et effectuez les modifications suivantes :

• Orientation du texte : Centre
• Police du texte : Raleway Light
• Style de police de texte : gras
• Taille de la police du texte : 16px
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1,5 em

Faites défiler le même onglet et modifiez la largeur maximale en « 300px » dans la sous-catégorie Dimensionnement. Remplacez également la marge supérieure par « 5 % » dans la sous-catégorie Espacement.

Ensuite, allez dans l'onglet Avancé et ajoutez le code suivant à l'élément principal dans la sous-catégorie CSS personnalisée :

font-weight: 300;

Cloner le module d'image et les modules de texte

Ajoutez une autre ligne, mais cette fois avec trois colonnes, à la même section.

La première colonne et la dernière colonne de la ligne ont besoin des mêmes modules que la ligne précédente ; un module image et deux modules texte. Ces modules doivent avoir les mêmes paramètres que ceux que nous avons créés auparavant, donc la seule chose que nous allons faire est de les cloner. Après avoir cloné chaque module deux fois, placez-les dans les colonnes de gauche et de droite de la nouvelle ligne et modifiez l'image et le texte.

Ensuite, accédez à l'onglet Conception de la ligne et ajoutez « 5 % » à la marge inférieure dans la sous-catégorie Espacement.

Module Image de la Mariée

Maintenant, ajoutez un module d'image à la deuxième colonne de la ligne. Téléchargez l'image et accédez à l'onglet Conception. Assurez-vous de placer l'alignement de l'image sur « Gauche » et d'activer l'option « Toujours centrer l'image sur le mobile » dans la sous-catégorie Alignement.

Faites défiler le même onglet et ajoutez « 5 % » à la marge supérieure dans la sous-catégorie Espacement.

Ensuite, allez dans l'onglet Avancé et ajoutez le code suivant à l'élément principal dans la sous-catégorie CSS personnalisée :

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

Enfin, désactivez le module Image sur les téléphones et les tablettes.

Module d'image du marié

Clonez le module Image précédent et placez-le dans la même colonne que le précédent. Modifiez l'image téléchargée et passez à l'onglet Conception. Ouvrez la sous-catégorie Alignement et modifiez l'alignement de l'image sur « Droite ».

De plus, ajustez la marge supérieure à « 60 % » dans la sous-catégorie Espacement.

Nous pouvons maintenant passer à la section liste de cadeaux de la mise en page. Votre mise en page devrait ressembler à ceci jusqu'à présent:

Liste de souhaits/cadeaux

Ajoutez une nouvelle section standard et changez la couleur d'arrière-plan en « #fae4de » dans la sous-catégorie Arrière-plan de l'onglet Contenu.

Module de texte : Titre

Ajoutez une ligne pleine largeur à la section et faites-la en pleine largeur. Ensuite, clonez le module de texte que nous avons créé dans la deuxième section et placez-le dans ce module de ligne. Modifiez le texte dans les messages de texte et changez la couleur d'arrière-plan en « #fffaf6 » dans le champ Élément principal dans la sous-catégorie CSS personnalisée de l'Avancé languette.

Liste de cadeaux/liste de souhaits : utiliser le module Slider

Ajoutez une nouvelle ligne avec 3 colonnes à la section et modifiez la largeur personnalisée « 65 % » dans la sous-catégorie Dimensionnement de l'onglet Conception. Continuez en ajoutant un module de texte à la première ligne et effectuez les ajustements suivants dans la sous-catégorie Texte de l'onglet Conception :

• Orientation du texte : Centre
• Police du texte : Raleway Light
• Style de police de texte : gras
• Taille de la police du texte : 24 px
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1,5 em

Faites défiler le même onglet et ajoutez « 30px » à la marge supérieure dans la sous-catégorie Espacement.

Maintenant, clonez le module de texte deux fois et placez-en un dans chaque colonne.

Ensuite, ajoutez un module de curseur. Accédez à l'onglet Avancé du curseur et ajoutez le code suivant à l'élément principal dans la sous-catégorie CSS personnalisée :

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

En continuant, ajoutez une nouvelle diapositive. Dans la diapositive, téléchargez une image d'arrière-plan de l'un des éléments que vous souhaitez placer sur la liste de cadeaux dans la sous-catégorie Arrière-plan de l'onglet Contenu. Ensuite, entrez le nom de l'élément et le texte du bouton dans la sous-catégorie Texte de ce même onglet. Modifiez également l'URL dans la sous-catégorie Lien. Ajoutez autant de diapositives que vous le souhaitez dans une catégorie et répétez la même chose.

Continuez en ajoutant une nouvelle ligne, mais maintenant avec seulement 2 colonnes.

Modifiez la largeur personnalisée à « 55 % » dans la sous-catégorie Dimensionnement de l'onglet Conception et modifiez la marge inférieure à « 5 %» dans la sous-catégorie Espacement.

Le module de texte et le module de curseur que nous avons créés dans le module de rangée précédent ont les mêmes paramètres que ceux dont nous avons besoin dans tous les autres modules de texte et curseurs. Allez-y et clonez les deux quatre fois et placez-les dans les colonnes restantes de chaque module de rangée.

Votre mise en page devrait ressembler à ceci maintenant :

Le formulaire de contact (bureau)

Le but du formulaire de contact dans la mise en page est de permettre aux gens de transmettre quel cadeau ils achètent pour le couple. Dès qu'un cadeau est pris, il peut être remplacé par un autre sur le site. En faisant cela, il devient moins probable que deux invités apportent le même cadeau.

Créez une nouvelle section standard et remplacez la couleur d'arrière-plan par #fffaf6 dans la sous-catégorie Arrière-plan de l'onglet Contenu.

Première rangée

La ligne dont nous avons besoin dans cette section est la même que dans les autres sections. Il suffit de cloner le module de ligne précédemment utilisé avec le module de texte et de le placer dans la section. La seule chose que vous aurez à faire est d'apporter quelques modifications aux paramètres du module de texte. Changez la couleur du texte et de l'arrière-plan dans l'élément principal en #fae4de.

Deuxième rang

Maintenant, ajoutez une ligne avec deux colonnes et masquez la ligne sur les tablettes et les téléphones dans la sous-catégorie Visibilité de l'onglet Avancé. Mettez un module de formulaire de contact dans la première colonne et apportez les modifications suivantes aux différentes sous-catégories de l'onglet Conception.

Texte du champ de formulaire :

• Police du champ de formulaire : Raleway Light
• Taille de la police du champ de formulaire : 18 px
• Couleur du texte du champ de formulaire : #9b857b
• Hauteur de la ligne du champ de formulaire : 1,7 em

Frontière:

• Rayon de bordure d'entrée : 15
• Utiliser la bordure : Oui
• Couleur de la bordure : #d7dce1
• Largeur de la bordure : 1px
• Style de bordure : solide

Bouton:

• Taille du texte du bouton : 15
• Taille du texte du bouton : 15
• Couleur du texte du bouton : #fffaf6
• Couleur d'arrière-plan du bouton : #9b857b
• Largeur de bordure de bouton : 9
• Couleur de la bordure du bouton : #9b857b
• Rayon de bordure de bouton : 4

Dans l'onglet Contenu du module Formulaire de contact, vous pouvez désormais ajouter trois champs ; Nom, e-mail et message.

Changez manuellement la couleur d'arrière-plan de chaque champ en #fae4de.

Enfin, nous allons ajouter un module de texte à la deuxième colonne pour informer vos invités du processus. Accédez à l'onglet Conception et apportez les modifications suivantes à la catégorie Texte :

• Orientation du texte : Centre
• Police du texte : Raleway Light
• Style de police Tet : gras
• Taille de la police de texte : 16
• Couleur du texte : #9b857b
• Hauteur de la ligne des lettres : 1,5 em

Faites défiler le même onglet et ajoutez « 300 px » à la largeur maximale dans la sous-catégorie Dimensionnement.

Enfin, tapez « 5px » dans la marge supérieure de la sous-catégorie Espacement.

Le formulaire de contact (tablette & téléphone)

Clonez la ligne précédemment créée et faites simplement basculer le module de formulaire de contact et le module de texte (et colonnes). Accédez à l'onglet Avancé et masquez la ligne pour les bureaux.

Votre mise en page devrait maintenant, et enfin, ressembler à ceci :

Suivant

Dans la quatrième partie de cette mini-série, nous allons vous montrer comment créer un livre d'or en ligne pour votre mariage avec Divi et des témoignages auto. 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 !