Comment créer de superbes mises en page de grille avec le module vidéo de Divi (partie 4)

Bienvenue à publier 4 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.

J'espère que vous appréciez les dispositions de la grille jusqu'à présent. La mise en page d'aujourd'hui est le numéro 4 de la série, et c'est l'une de mes préférées (et la plus rapide à mettre en œuvre). Non seulement il est facile (et amusant) de créer à l'aide de Divi, mais il est également personnalisable pour s'adapter au schéma de couleurs de votre site. Les options de dégradé d'arrière-plan sont la principale caractéristique de cette conception qui ont été utilisées pour créer les deux couleurs de tons séparées par une ligne diagonale. L'espacement est également utile pour que les vidéos soient facilement perçues. On peut soutenir que cette conception peut sortir du cadre de ce que nous appellerions normalement une « grille », mais je pense que vous en verrez le potentiel.

Alors on y va. Je vais vous montrer à quel point il est facile de créer cette conception de grille à l'aide du module vidéo et de quelques éléments d'arrière-plan personnalisés.

Voici à quoi ressemblera le résultat final

Le concept et l'inspiration

Je cherchais une mise en page agréable et propre qui organisait de petits lots de vidéos à utiliser pour des choses comme des tutoriels ou des cours. Ceci combiné à mon empressement impulsif à jouer avec les dégradés d'arrière-plan, c'est ce que j'ai fait. J'espère que tu aimes.

Commençons.

Mettre en œuvre le design avec Divi

Abonnez-vous à notre chaîne Youtube

Tout d'abord, ajoutez une section régulière avec une structure pleine largeur (1 colonne).

Ajoutez ensuite un module de texte à la colonne. Cela servira de titre ou de titre pour la section de la page.

Mettez à jour les paramètres de texte comme suit :

Options de contenu
Contenu : [entrez le texte pour le titre]

Options de conception

Couleur du texte : clair
Police du texte : Arimo
Taille de la police du texte : 56 px
Espacement des lettres du texte : 1px
Hauteur de la ligne de texte : 1 em

Enregistrer les paramètres

Vous ne pourrez encore rien voir car vous avez du texte blanc sur fond blanc, mais ce n'est pas grave. Allons de l'avant et ajoutons notre dégradé de fond de section. Accédez aux paramètres de la section et, sous la section Contenu, mettez à jour les options suivantes :

Couleurs de dégradé d'arrière-plan : #121212, #ffffff
Type de dégradé : Linéaire
Direction du gradient : 198 degrés
Position de départ : 45 %
Position finale : 45 %

Ensuite, mettez à jour les paramètres de ligne pour la ligne que vous venez d'ajouter comme suit :

Options de conception

Faire cette ligne pleine largeur : OUI
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 4
Égaliser les hauteurs de colonne : OUI
Rembourrage personnalisé : 1 % en haut, 5 % à droite, 5 % en bas, 5 % à gauche

Enregistrer les paramètres

Ajoutez maintenant une autre ligne avec une structure ⅓ (2 colonnes) directement sous la ligne que vous venez de créer.

Ensuite, ajoutez un module vidéo dans la colonne de gauche.

Mettez à jour les paramètres vidéo comme suit :

Options de contenu

Vidéo MP4/URL : [entrez l'URL de votre vidéo]
URL de superposition de l'image : [entrez l'URL de l'image de superposition]

Enregistrer les paramètres

Ensuite, dupliquez (ou copiez) le module vidéo que vous venez de créer deux fois et faites glisser (ou collez) les deux vidéos en double pour qu'elles s'empilent dans la colonne de droite.

Mettez à jour le contenu des vidéos pour inclure les URL et les images de couverture correctes.

Allez-y et ajoutez un module Blurb sous les deux modules vidéo dans la colonne de droite. Cela peut servir de description des vidéos dans cette grille.

Mettez à jour les paramètres Blurb comme suit :

Options de contenu

Titre : [entrez le titre]
Contenu : [entrez le contenu ou la description]

Options de conception

Couleur du texte : clair

Enregistrer les paramètres

Modifiez maintenant les paramètres de ligne pour la ligne contenant les vidéos que vous venez de créer comme suit :

Options de contenu

Couleurs de dégradé d'arrière-plan : #4999c1, #121212
Type de dégradé : Linéaire
Direction du gradient : 198 degrés
Position de départ : 45 %
Position finale : 45 %

Options de conception

Faire cette ligne pleine largeur : OUI
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 4
Égaliser les hauteurs de colonne : OUI
Rembourrage personnalisé : 5 % en haut, 5 % à droite, 5 % en bas, 5 % à gauche

Super! Vous avez terminé la première section. On a presque terminé. Découvrez les progrès jusqu'à présent.

Pour créer la section suivante, dupliquez toute la section que vous venez de créer en cliquant sur le bouton dupliquer la section.

Mettez à jour les nouveaux paramètres de section comme suit :

Options de contenu

Couleurs de dégradé d'arrière-plan : #ffffff, #121212 (ces couleurs sont dans l'ordre inverse de la première section)

Mettez ensuite à jour les paramètres du module de texte dans la section dupliquée avec les éléments suivants :

Options de conception

Texte Couleur du texte : #333333

Enregistrer les paramètres

Pour terminer cette section, mettez à jour les paramètres de ligne qui contiennent vos vidéos avec les éléments suivants :

Options de contenu

Couleurs de dégradé d'arrière-plan : #121212, #4999c1 (en gros, vous changez l'ordre des couleurs pour qu'elles soient dans l'ordre inverse de la première section)

Enregistrer les paramètres

Voyons maintenant le résultat après avoir ajouté la deuxième section…

Si vous ne l'avez pas déjà remarqué, vous pouvez continuer à ajouter plus de sections facilement puisque nous avons déjà créé ces deux sections. Créons une autre section juste pour faire bonne mesure. Étant donné que la couleur d'arrière-plan de notre section est noire en bas, nous voulons commencer la section suivante avec une couleur d'arrière-plan noire en haut. Cela signifie que nous devons dupliquer la première section en haut et la faire glisser vers le bas de la page sous la deuxième section. Cela permet de maintenir la continuité de la conception tout au long de la page.

Voici à quoi cela ressemble après l'ajout de la troisième section :

C'est ça! Tout fini.

Sensible?

Cette mise en page est en fait encore meilleure sur mobile sans aucune modification. Vérifiez-le!

Personnalisation supplémentaire

Après avoir construit cette disposition de grille avec plusieurs sections, vous pouvez probablement déjà remarquer à quel point il serait facile de changer les couleurs pour correspondre au thème de votre prochain projet. Il suffit de changer les couleurs de dégradé d'arrière-plan pour les sections et les lignes.

Si vous souhaitez peaufiner davantage le design, je suggère d'ajouter une semi-transparence aux couleurs du dégradé pour exposer l'arrière-plan derrière elles. Ou essayez de vous débarrasser complètement de l'un des dégradés de couleurs et voyez à quoi cela ressemble. Voici quelques exemples de ce que peut faire le changement d'une seule couleur de dégradé…

Vous pouvez également ajouter un module de curseur vidéo à la grille dans la colonne de gauche.

À venir…

Vient ensuite notre dernière disposition de grille vidéo de la série. Celui-ci vous donne la possibilité de garder les choses belles et propres avec des éléments de cadrage subtils ou d'utiliser des couleurs d'une manière unique pour faire ressortir chaque vidéo.

D'ici là, j'ai hâte de vous entendre dans les commentaires.

Prendre plaisir!