Comment créer une page de galerie de mariage avec Divi

Cet article fait partie 2 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 la première partie de notre mini-série, nous vous avons montré comment créer une page de faire-part de mariage élégante. Cette deuxième partie sera consacrée à la création d'une page de galerie au sein de votre site Web de mariage. La page de la galerie est dans le même style que la page d'annonce de mariage, ce qui vous permet d'utiliser les deux sur le même site Web sans avoir à faire beaucoup de changements.

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

Cette mise en page est composée de 6 sections qui vous aident à créer une page de galerie interactive et magnifique.

La section des héros

Nous avons décidé d'opter pour un en-tête très simple qui n'a pas l'air trop chargé. La page de la galerie contiendra déjà beaucoup d'images et nous voulons que les gens se concentrent là-dessus. Avoir une simple section de héros permet aux invités de trouver plus facilement l'essence de la page sans être trop distraits par les visuels au début de la page.

Créer une page

Commencez par créer une page, à l'aide du constructeur Divi et passez à Visual Builder.

Vous pouvez voir qu'il y a déjà une section automatiquement présente dans votre nouvelle page. Cette section contient une ligne pleine largeur. Nous aurons besoin d'une ligne pleine largeur pour la première partie de cette section, alors continuez à l'utiliser.

Ouvrez les paramètres de la section que vous venez de créer et ouvrez la sous-catégorie Arrière-plan dans l'onglet Contenu. Ensuite, changez la couleur d'arrière-plan en '#fffaf6'.

Module de texte

Continuez en ajoutant un module de texte à la colonne pleine largeur de la ligne. Saisissez le texte dans la zone de texte de l'onglet Contenu et passez à l'onglet Conception.

Sélectionnez la sous-catégorie Texte dans l'onglet Conception pour commencer à modifier la conception de votre contenu. Pour la mise en page que nous avons créée, nous devrons apporter les ajustements suivants à la sous-catégorie Texte de votre module de texte :

• Orientation du texte : Centre
• Police du texte : Mandarine
• Taille de la police de texte : 90p (ordinateur de bureau), 80 (tablette), 66 (téléphone)
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1,7 em

Si vous n'avez pas envie de faire défiler vers le bas et de rechercher les différentes options à modifier, vous pouvez également utiliser l'option de recherche. Cette option vous aide à devenir plus productif et à changer les choses instantanément sans avoir à faire beaucoup d'efforts. Dans l'exemple ci-dessous, nous recherchons simplement les termes « Police de texte » et nous verrons l'option apparaître immédiatement.

Cliquez sur Enregistrer et quitter.

Mariée et marié

Ensuite, vous devrez créer une section avec deux images individuelles des mariés.

Allez-y et ajoutez une nouvelle ligne à deux colonnes juste en dessous de la ligne précédente que vous avez créée. Ouvrez les paramètres de ligne et accédez à l'onglet Conception.

Ensuite, accédez à l'onglet Conception des paramètres de ligne et ouvrez la sous-catégorie Dimensionnement. Activez l'option Largeur personnalisée et modifiez le pourcentage à « 60 % ». Faites défiler le même onglet et ajoutez « 5% » à la marge inférieure.

Encore une fois, vous pouvez choisir la solution de facilité et écrire simplement « Largeur personnalisée » dans la barre de recherche.

Image de la mariée

Ajoutez un module d'image à la première colonne de la ligne. Téléchargez une image de la mariée dans l'onglet Contenu sous la sous-catégorie Image et passez à l'onglet Avancé. Cliquez sur la sous-catégorie CSS personnalisée et ajoutez la ligne de code suivante au champ Élément principal :

border: 10px double #9b857b; 

Comme mentionné précédemment, vous pouvez également simplement taper « Élément principal » dans la barre de recherche et il apparaîtra immédiatement. L'utilisation de l'option de recherche peut être un gain de temps considérable, surtout lorsque vous essayez de suivre les étapes d'un didacticiel. Vous pouvez faire exactement ce qui est nécessaire sans trop y penser.

Appuyez sur Enregistrer et quitter.

Image du marié

Comme vous pouvez le remarquer, les images ont les mêmes paramètres. Allez-y et clonez le module d'image, la seule chose que vous devrez changer est l'image. Voici à quoi devrait ressembler votre page de galerie jusqu'à présent :

Remerciements

La page de la galerie apparaît généralement sur le site Web du mariage après le mariage. Les gens sont ravis de voir les photos qui ont été prises, il est donc probable que tous vos invités visitent la page. Cela fait de la page de la galerie l'endroit idéal pour dire une dernière chose aux invités.

Pour commencer, ajoutez une nouvelle section standard à votre mise en page. Dans la section, utilisez une ligne pleine largeur.

Ensuite, ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan en « #fffaf6 » dans la sous-catégorie d'arrière-plan.

Premier module de texte

Ajoutez un module de texte à la ligne que vous venez de créer. Dans l'onglet Contenu, saisissez le texte que vous souhaitez afficher sur votre site Web dans la zone de texte. Continuez en passant à l'onglet Conception.

Commencez par sélectionner la sous-catégorie Texte dans l'onglet Conception et effectuez les modifications suivantes en les recherchant manuellement ou dans la barre de recherche :

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

Maintenant, sélectionnez la sous-catégorie Espacement dans le même onglet et modifiez la marge inférieure en « 5% ».

Cliquez sur Enregistrer et quitter.

Deuxième module de texte

Ajoutez un nouveau module de texte sous le premier module de texte que vous avez créé. Dans l'onglet Contenu, rédigez la note de remerciement que vous souhaitez partager avec les invités dans la zone de texte et passez à l'onglet Conception.

Apportez les modifications suivantes dans l'onglet Conception en les recherchant manuellement ou en recherchant les options avec la barre de recherche.

• Orientation du texte : justifiée
• Police du texte : Raleway Light
• Style de texte : gras
• Taille de la police de texte : 14
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1,6 em

Cliquez sur Enregistrer et quitter et vous êtes prêt à partir. Voici à quoi devrait ressembler votre page de galerie maintenant :

Section photos préférées

Une fois que vous avez terminé la section de remerciement, vous pouvez passer à la section où vous montrez les photos préférées des mariés. Dans cette partie, vous utiliserez deux sections et appliquerez du code CSS aux modules d'image pour leur donner un aspect polaroïd.

Commencez par ajouter une section standard. Dans cette section standard, vous aurez besoin d'une rangée pleine largeur. Ouvrez les paramètres de la section et remplacez la couleur d'arrière-plan par « #9b857b » dans la sous-catégorie Arrière-plan de l'onglet Contenu.

Ensuite, ajoutez un module de texte à la ligne. Ouvrez les paramètres et entrez le titre que vous souhaitez afficher dans la zone de texte de la sous-catégorie Texte. Continuez, allez dans l'onglet Conception et apportez les modifications suivantes dans 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,6 em

Cliquez sur Enregistrer et quitter.

Images Polaroid (Bureau)

Pour cette partie, vous aurez besoin d'une autre section standard. Dans cette section, vous aurez besoin d'une ligne comportant 4 colonnes. Remplacez la couleur d'arrière-plan de cette section par « #fae4de » dans l'onglet Contenu de la sous-catégorie Arrière-plan.

Continuez en ajoutant un module d'image à la première colonne de la ligne. Ouvrez les paramètres de l'image et téléchargez l'une des images préférées dans la sous-catégorie Image de l'onglet Contenu.

Ensuite, allez dans l'onglet Avancé, cliquez sur la sous-catégorie CSS ID & Classes et tapez 'polaroid' dans le champ CSS Class. Dans le champ Élément principal, ajoutez le code suivant :

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

Maintenant, pour mettre la classe 'polaroid' à l'action, vous devrez vous rendre au backend de votre site Web. Allez dans Divi > Options du thème > et insérez le code suivant dans le champ CSS personnalisé en bas de la page :

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}

.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}

.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

Après cela, vous pouvez revenir à Visual Builder. Vous aurez besoin de plus d'une image polaroid, c'est pourquoi vous devez cloner le module image 7 fois, et assurez-vous de les mettre dans les différentes colonnes. Chaque colonne doit avoir 2 modules image.

Pour rendre les images polaroid ludiques, vous devrez modifier le code CSS dans le champ Élément principal de chaque module Image individuellement. Pour appliquer le code différent, nous avons attribué à chaque module Image un numéro différent dans l'image ci-dessous :

Selon le numéro attribué, modifiez le code dans le champ Élément principal en conséquence. Vous pouvez trouver l'élément principal dans l'onglet Avancé sous la sous-catégorie CSS personnalisée. Ajoutez également une valeur aux champs Marge personnalisée dans la sous-catégorie Espacement de l'onglet Conception :

Image 1

C'est le premier module Image que vous avez créé, gardez-le ainsi.

Image 2

Marges personnalisées :
Haut : -10%
Gauche : -20%

Élément principal :

z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

Image 3

Marges personnalisées :
Gauche : -20%

Élément principal :
Rien

Image 4

Marges personnalisées :
Haut : -10%
Gauche : -20%

Élément principal :

z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);

Image 5

Marges personnalisées :
Rien

Élément principal :

-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);

Image 6

Marges personnalisées :
Haut : -10%
Gauche : -20%

Élément principal :

-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);

Image 7

Marges personnalisées :
Gauche : -20%

Élément principal :

z-index: 1;
-webkit-transform: rotate(-10deg);l
-moz-transform: rotate(-10deg);

Image 8

Marges personnalisées :
Haut : -10%
Gauche : -20%

Élément principal :

z-index: 5;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);

Après avoir configuré toutes les images, ouvrez les paramètres de la ligne. Accédez à l'onglet Avancé et masquez la ligne pour téléphone et tablette dans la sous-catégorie Visibilité.

Assurez-vous également que les gens peuvent ouvrir l'image dans cette section en activant la Lightbox dans la sous-catégorie Lien de l'onglet Contenu.

Images préférées (tablette et téléphone)

Pour nous assurer que les images sont réactives, nous allons ajouter une autre ligne à la même section. Faites-en une ligne pleine largeur et clonez les modules d'image numéro 1 et 5. Placez ces modules clonés dans la nouvelle ligne. Pour la version mobile, nous n'utiliserons que ces deux versions des Modules Image que nous avons créés.

Maintenant, ouvrez les paramètres de la ligne. Accédez à l'onglet Avancé et masquez la ligne sur les ordinateurs de bureau dans la sous-catégorie Visibilité.

Après avoir effectué toutes ces modifications, votre mise en page devrait ressembler à ceci jusqu'à présent sur le bureau :

Galerie par nom de famille (bureau)

Il y a généralement beaucoup de photos prises lors de mariages, ce qui peut rendre difficile la recherche d'une certaine structure. C'est pourquoi nous avons décidé de rendre la section galerie de cette page de galerie un peu plus facile à vivre. Les galeries seront affichées en fonction du nom de famille des invités, ce qui leur permettra de retrouver facilement leurs propres photos.

Liste des noms

Pour commencer, vous devez afficher la liste des noms de famille et les lier à la section de la page où ils trouveront les images.

Créez une nouvelle section standard et placez-y une ligne pleine largeur. Ensuite, ajoutez un module de texte. Tapez le texte que vous souhaitez afficher dans la sous-catégorie Texte de l'onglet Contenu. Ensuite, 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 : #9b857b
• Hauteur de la ligne de texte : 1,6 em

Faites défiler le même onglet vers le bas et modifiez la marge supérieure en « 2 % » et la marge inférieure en « 5 % » dans la sous-catégorie Espacement.

Cliquez sur Enregistrer et quitter. Maintenant, ajoutez une autre ligne, dans ce cas avec trois colonnes. Dans l'onglet Conception des paramètres de ligne, modifiez la marge inférieure à « 5 % » dans la sous-catégorie Espacement.

Ensuite, ajoutez un module de texte dans la colonne de gauche de la ligne. Dans le module de texte, ajoutez un tiers des noms de famille des invités. Chacun de ces noms de famille aura besoin d'un lien d'ancrage vers la partie du site Web vers laquelle vous souhaitez les amener. Sélectionnez l'un des noms, cliquez sur l'icône du lien et écrivez un '#' + le nom. Plus tard dans cet article de blog, vous lierez ce nom à une certaine section. Répétez la même chose pour chacun des noms de la liste.

Sélectionnez l'un des noms, cliquez sur l'icône du lien et écrivez un '#' + le nom. Plus tard dans cet article de blog, vous lierez ce nom à une certaine section. Répétez la même chose pour chacun des noms de la liste.

Accédez à l'onglet Conception et effectuez les ajustements suivants dans la sous-catégorie Texte :

• Orientation du texte : à droite
• Police du texte : Raleway Light
• Style de texte : gras
• Taille de la police de texte : 20
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1,6 em

Ensuite, clonez deux fois le module de texte et placez les modules clonés dans les deux autres colonnes. Assurez-vous de changer les noms de famille dans ces listes et l'orientation du texte en « Centre » pour la deuxième colonne et « Gauche » pour la troisième colonne.

Ouvrez les paramètres de la ligne et modifiez la visibilité sur le bureau uniquement dans la sous-catégorie Visibilité de l'onglet Avancé.

Galerie par nom de famille (tablette et téléphone)

Pour nous assurer que le site Web est réactif, nous allons créer une nouvelle ligne adaptée aux tablettes et aux téléphones. Ajoutez une nouvelle ligne avec une colonne pleine largeur. Ensuite, ajoutez un module de texte à cette ligne pleine largeur et tapez les noms de famille dans la zone de texte. Vous pouvez trouver la zone de texte dans la sous-catégorie Texte de l'onglet Contenu.

Répétez la même chose que nous avons fait dans la ligne précédente en cliquant sur l'icône du lien et en écrivant un '#' + le nom dans la zone URL.

Mais assurez-vous d'attribuer un lien d'ancrage différent à chaque deuxième nom. Dans cet exemple, Avery et Brown auront un lien d'ancrage différent de celui qu'ils avaient sur les ordinateurs de bureau. Nous devons le faire car, dans la prochaine partie du site Web, nous devrons avoir deux sections de galerie différentes pour une galerie sur deux. De cette façon, il sera réactif pour tablette et téléphone.

Enfin, accédez à l'onglet Avancé de la ligne et désactivez la ligne pour les ordinateurs de bureau dans la sous-catégorie Visibilité.

Section Galerie (Bureau)

Dans la dernière partie du site, nous devrons créer les différentes sections de la galerie qui représentent différents noms de famille. Nous allons vous montrer comment en créer deux et vous pourrez ensuite en ajouter d'autres en conséquence.

Tout d'abord, ajoutez une section standard. Changez la couleur d'arrière-plan en '#fae4de' dans la sous-catégorie Arrière-plan de l'onglet Contenu

En continuant, ajoutez une ligne comme celle-ci :

Dans les sections de ligne, utilisez Largeur personnalisée. Accédez à l'onglet Conception, sélectionnez et modifiez la largeur personnalisée à « 60 % » dans la sous-catégorie Dimensionnement.

Ensuite, allez dans l'onglet Conception et modifiez les marges supérieure et inférieure à "5%".

Module de texte

Maintenant, ajoutez un module de texte et saisissez le nom de famille d'une famille dans la zone de texte de la sous-catégorie Texte de l'onglet Contenu. Continuez en accédant à l'onglet Conception et en apportant les modifications suivantes :

• Alignement du texte : Centre
• Police du texte : Mandarine
• Taille de la police de texte : 60
• Couleur du texte : #9b857b
• Hauteur de la ligne de texte : 1,6 em

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

Passez à l'onglet Avancé. Dans le champ CSS ID de la sous-catégorie CSS ID & Classes, vous devrez lier le lien d'ancrage que vous avez créé ci-dessus au module de texte. Donc, si le premier lien d'ancrage dans la liste était « #adams », alors vous devrez remplir « adams ». Assurez-vous que l'ID est le même que celui que vous avez lié au nom dans la liste que vous avez créée auparavant.

Dans la deuxième colonne de la ligne, vous devrez ajouter un module Galerie. Tapez « 8 » dans le champ Numéro d'images de la sous-catégorie Images de l'onglet Général et choisissez 8 images.

Ensuite, allez dans l'onglet Conception et assurez-vous que votre mise en page est « Grille » et l'orientation de votre vignette « Paysage » dans la sous-catégorie Mise en page.

Continuez, allez dans l'onglet Avancé. Dans cet onglet, vous devrez ajouter du code à deux sections différentes de la sous-catégorie CSS personnalisée ; l'élément principal et la superposition.

Élément principal :

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: 5px solid #FFFFFF;
column-count: 2; 
column-gap: 0px;

Recouvrir:

-webkit-filter: brightness(0%);

Cliquez sur Enregistrer et quitter.

Maintenant, allez-y et clonez la section. Remplacez la structure des colonnes par la suivante et basculez entre le module de texte et le module de galerie :

Modifiez les images dans la galerie, le nom de famille mentionné dans la zone de texte et l'ID de classe. Cette section a également une autre couleur d'arrière-plan ; '#fffaf6'.

Maintenant, allez dans l'onglet Avancé de cette ligne et masquez-le pour les tablettes et les téléphones dans la sous-catégorie Visibilité.

Vous pouvez continuer à créer des sections de galerie comme celle-ci, en fonction du nombre de noms de famille présents au mariage.

Section Galerie (Mobile)

Comme nous l'avons mentionné précédemment, chaque deuxième section de galerie aura besoin d'une alternative pour mobile. Il suffit de cloner la première rangée de galerie que nous avons créée et de la placer dans la même section de la dernière rangée de galerie que nous avons créée.

Ensuite, ouvrez les options du module de texte. Accédez à l'onglet Conception et supprimez la marge supérieure dans la sous-catégorie Espacement. Ensuite, allez dans l'onglet Avancé et modifiez l'ID CSS dans la sous-catégorie CSS ID & Classes en « very1 ». Il s'agit du même identifiant que celui de la liste qui s'appliquait aux tablettes et aux téléphones.

C'est ça. Votre mise en page devrait maintenant ressembler exactement à celle que nous avons créée et montrée au début de cet article de blog :

Suivant

Dans la troisième partie de cette mini-série, nous allons voir comment créer une page de liste de cadeaux à ajouter sur le site du mariage. Si vous avez des questions concernant 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, alors revenez vers vous 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 !