Comment créer de superbes mises en page de grille avec le module vidéo de Divi (partie 3)
Publié: 2017-06-22Bienvenue à publier 3 sur 5 dans notre mini-série Comment créer de superbes mises en page de grille avec le module vidéo de Divi. Dans cette série, nous allons vous expliquer comment créer de superbes mises en page de grille à partir de zéro à l'aide de Divi Visual Builder. Et si vous craignez que cela soit trop compliqué, détrompez-vous ! Toutes ces mises en page peuvent être créées et stylisées à l'aide de Visual Builder sans code supplémentaire.
Bienvenue dans la troisième partie de la série ! J'ai l'impression que celui-ci va vous surprendre un peu. Aujourd'hui, je vais vous montrer comment utiliser des couleurs d'arrière-plan et des dégradés semi-transparents pour créer plusieurs variations de couleur de bordure. À la fin, je vais vous montrer comment vous pouvez changer complètement le schéma de couleurs en quelques clics. Cette disposition est composée d'une combinaison de deux lignes de structure de colonnes 1/4 1/2 1/4 et d'une ligne de structure de colonnes 1/4 1/4 1/4 1/4.
Je vais utiliser le module vidéo pour ajouter les vidéos et le module de présentation pour servir de section titre et description au milieu de la grille. Comme toutes les mises en page de cette série, celle-ci est également facile à mettre en œuvre à l'aide de Divi.
Voici à quoi ressemblera le résultat final
Le concept et l'inspiration
En fait, l'idée de mise en page originale est venue du site populaire giphy.com, car il présente un gif plus grand dans la colonne du milieu entouré de gifs plus petits. Je pensais que cette idée fonctionnerait bien pour une disposition de grille vidéo car cela vous permettrait de présenter une vidéo plus grande avec les autres vidéos qui l'entourent. Cependant, je ne me souciais pas du style de maçonnerie des images giphy environnantes, donc pour cet article, j'ai opté pour l'approche de la colonne paire pour rendre tout plus symétrique.
Outre la mise en page, je voulais explorer un peu plus les capacités d'arrière-plan semi-transparent de Divi pour créer quelque chose d'unique.
Commençons.
Mettre en œuvre le design avec Divi
Tout d'abord, ajoutez une section régulière avec une structure 1/4 1/2 1/4 (2 colonnes). 
Ajoutez ensuite un module vidéo à la première colonne.
Mettez à jour les paramètres vidéo comme suit :
Options de contenu
Vidéo MP4/URL : [entrez l'URL de la vidéo]
URL de superposition d'image : [téléchargez une image personnalisée pour votre vidéo ou générez-en une automatiquement à partir de la vidéo]
Enregistrer les paramètres
Ajoutez ensuite un module diviseur directement sous le module vidéo.
Dans les paramètres du diviseur, sous le
Maintenant que nous allons ajouter beaucoup de vidéos, je trouve qu'il est plus facile de dupliquer le module vidéo que vous venez de créer et de le faire glisser aux bons endroits. Ensuite, je peux revenir en arrière et modifier l'URL de la vidéo et les images de couverture plus tard.
Tout d'abord, dupliquons le module vidéo que vous venez de créer et glissez-le sous le module diviseur dans la première colonne.
Après cela, vous pouvez continuer à dupliquer les éléments de la première colonne (la vidéo, le diviseur et la vidéo) et les faire glisser vers la colonne la plus à droite. Ensuite, vous pouvez dupliquer l'un des modules vidéo et le faire glisser vers la colonne centrale. Une fois que vous avez mis à jour tout le contenu de la vidéo, vous devriez avoir quelque chose qui ressemble à ceci…
Avant de continuer, allez-y et ajoutez votre couleur d'arrière-plan à votre section et à vos colonnes de lignes. Accédez aux paramètres de la section (zone bleue) et mettez à jour les éléments suivants :
Options de contenu
Couleur d'arrière-plan : #333333
Options de conception :
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas
Enregistrer les paramètres
Modifiez maintenant vos paramètres de ligne avec les mises à jour suivantes :
Options de contenu :
Couleurs de dégradé d'arrière-plan : rgba (255,255,255,0,58) et #b684e8
Direction du dégradé : 360 deg
Couleur d'arrière-plan de la colonne 1 : rgba(0,0,0,0.69)
Couleur d'arrière-plan de la colonne 2 : rgba(255,255,255,0.45)
Couleur d'arrière-plan de la colonne 1 : rgba(0,0,0,0.85)
Options de conception
Faire cette ligne pleine largeur : OUI
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas
Marge personnalisée : 0 pixels en haut, 0 pixels en bas
Remplissage personnalisé de la colonne 1 : 20 pixels en haut, 20 pixels à droite, 20 pixels en bas, 20 pixels à gauche
Remplissage personnalisé de la colonne 2 : 20 pixels en haut, 20 pixels à droite, 20 pixels en bas, 20 pixels à gauche
Remplissage personnalisé de la colonne 3 : 20 pixels en haut, 20 pixels à droite, 20 pixels en bas, 20 pixels à gauche
Enregistrer les paramètres
Il est maintenant temps d'ajouter la deuxième ligne. Allez-y et ajoutez une autre rangée de structure 1/4 1/2 1/4 (3 colonnes) sous la première.
Pour vous donner une longueur d'avance sur la configuration des options des paramètres de ligne, utilisez la fonctionnalité de clic droit pour copier le style de la première ligne et le coller dans la deuxième ligne.
Maintenant, pour vos paramètres de ligne, il vous suffit de mettre à jour les options de contenu comme suit :
Dégradé d'arrière-plan : aucun (effacez celui qui a été copié)
Couleur d'arrière-plan de la colonne 1 : rgba(0,0,0,0.69)
Colonne 2 Couleur d'arrière-plan : rgba(0,0,0,0.0) - c'est la même chose qu'aucun ou transparent
Couleur d'arrière-plan de la colonne 3 : rgba(0,0,0,0.35)
Maintenant que vos paramètres de ligne sont terminés, allez-y et dupliquez et faites glisser (ou copiez et collez) un module vidéo dans la première (à l'extrême gauche) et également dans la troisième rangée (à l'extrême droite). Ensuite, mettez à jour le contenu vidéo.
Pour la colonne du milieu, ajoutez un module de présentation et mettez à jour les paramètres comme suit :
Options de contenu
Titre : [entrez le titre de la page ou de la vidéo]
Contenu : [entrez le contenu ou la description de la vidéo ou de la page]
Options de conception
Couleur du texte : clair
Orientation du texte : Centre
Police d'en-tête : PT Sans
Taille de la police d'en-tête : 52px
Espacement des lettres d'en-tête : 1px
Police de caractère : PT Sans
Taille de la police du corps : 20px
Maintenant, il est enfin temps pour la dernière rangée. Bien sûr, vous pouvez en ajouter si vous en avez besoin.
Allez-y et ajoutez une ligne de structure 1/4 1/4 1/4 1/4 (4 colonnes) sous la ligne précédente.
Comme vous l'avez fait auparavant, copiez le design de la ligne précédente et collez-le dans la ligne actuelle pour vous donner une petite longueur d'avance sur la conception.
Mettez ensuite à jour les paramètres de ligne comme suit :
Options de contenu
Couleur d'arrière-plan de la colonne 1 : rgba(0,0,0,0.34)
Couleur d'arrière-plan de la colonne 2 : rgba(0,0,0,0.69)
Colonne 3 Couleur d'arrière-plan : rgba(0,0,0,0.34)
Couleur d'arrière-plan de la colonne 4 : rgba(0,0,0,0.69)
Options de conception
Remplissage personnalisé de la colonne 4 : 20px 20px 20px 20px
Enregistrer les paramètres
Ensuite, dupliquez ou copiez un module vidéo dans chacune des quatre colonnes. Une fois que vous avez mis à jour tout votre contenu vidéo, vous avez terminé !
Découvrez votre nouvelle disposition de grille…
Création de la version légère
Pour changer la conception précédente de la grille vidéo sombre en une version claire, il vous suffit de mettre à jour quelques-unes des options de conception.
Mettez à jour les paramètres de section comme suit :
Options de contenu :
Couleur d'arrière-plan : rgba(0,0,0,0.12)
Mettez à jour tous les paramètres de ligne comme suit :
Fondamentalement, revenez à chacun des trois paramètres de ligne et partout où vous voyez une couleur d'arrière-plan utilisée, cliquez simplement sur l'option de palette de couleur blanche. Cela transformera tous les arrière-plans sombres semi-transparents en arrière-plans clairs semi-transparents.
Mettez à jour les paramètres du module Blurb comme suit :
Options de conception
Couleur du texte : foncé
ça va le faire ! Découvrez la version légère.
Modifiez facilement la conception avec les options d'arrière-plan de la section
Étant donné que la grille est construite avec des arrière-plans semi-transparents, vous pouvez facilement modifier la couleur, le dégradé ou l'image de l'arrière-plan de la section pour donner à votre site une nouvelle apparence qui correspond parfaitement à votre site.
Regardez la différence que cela peut faire avec l'ajout d'une image d'arrière-plan aux paramètres de la section.
Une autre façon de faire correspondre votre site est de faire correspondre les couleurs du dégradé d'arrière-plan que nous avons ajouté dans la première ligne.
À venir…
Le prochain article de cette série va être une sensation complètement différente. Celui-ci consiste à garder les choses propres et simples. Et quelques astuces de dégradé de fond.
D'ici là, j'ai hâte de vous entendre dans les commentaires.
Prendre plaisir!