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

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

Nous sommes arrivés à la partie 2 de la série! Et je dois dire que j'aime vraiment construire ces mises en page. Aujourd'hui, je vais vous montrer comment créer une mise en page de grille pour vos vidéos qui ressemble à une section de fonctionnalité d'une page de produit ou d'une page de destination. Cette mise en page est composée d'une séquence de 1/2 1/2 rangées de colonnes, chaque rangée contenant une vidéo et sa description correspondante dans chacune des deux colonnes. Ensuite, la section suivante alterne l'ordre de la vidéo et de la description de gauche à droite puis de droite à gauche. Étant donné que chacune des lignes s'étend sur toute la largeur de la page et que chacune des colonnes conserve la même hauteur verticale, la mise en page est superbe sur toutes les tailles d'écran.

Je vais utiliser le module vidéo pour ajouter les vidéos et le module de présentation pour servir de titre et de description à côté de la vidéo. Comme toutes les mises en page de cette série, celle-ci est également étonnamment facile à mettre en œuvre à l'aide de Divi.

Voici à quoi ressemblera le résultat final

Le concept et l'inspiration

Ce concept n'est en aucun cas nouveau. En fait, j'ai été inspiré pour créer cette mise en page en raison de sa familiarité avec les utilisateurs. De nombreux sites Web utilisent une mise en page similaire pour présenter les fonctionnalités de leurs produits ou services. Cela permet de plus grandes zones de contenu qui, je pense, créent un grand espace négatif pour le texte et des images saisissantes pour la vidéo.

Ce serait parfait pour une entreprise qui utilise la vidéo pour promouvoir les fonctionnalités du produit, mais qui a également de nombreuses autres utilisations. J'espère que vous profiterez de cette conception pour votre prochain projet.

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 1/2 1/2 (2 colonnes).

Ajoutez ensuite 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 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]

Options de conception

Couleur de l'icône de lecture : rgba(255,255,255,0.87)

Enregistrer les paramètres

Ajoutez ensuite un module Blurb dans la colonne de droite directement adjacente au module vidéo que vous venez de créer.

Mettez à jour les paramètres Blurb comme suit :

Options de contenu :

Titre : [entrez le titre de la vidéo]
Contenu : [entrez la description de la vidéo]
Lien : [vous pouvez entrer l'URL du lien vers une autre page si vous le souhaitez]
Utiliser l'icône : OUI
Icône : [sélectionner l'icône]

Options de conception :

Couleur de l'icône : #666666
Couleur du texte : clair
Orientation du texte : Centre
Police d'en-tête : Roboto
Taille de la police d'en-tête : 52px
Espacement des lettres d'en-tête : 1px
Police du corps : Open Sans
Taille de la police du corps : 20px
Couleur du corps du texte : #dddddd
Rembourrage personnalisé sur le bureau : 5 % en haut (vous devrez peut-être ajuster cela en fonction de la quantité de texte que vous avez dans votre description)
Rembourrage personnalisé sur tablette et smartphone : 20 pixels en haut, 20 pixels en bas

Options avancées

Animation d'image/icône : de droite à gauche (cette animation combinée à l'icône de flèche attirera davantage l'attention sur la vidéo de gauche.

Enregistrer les paramètres

Avant de continuer, allez-y et ajoutez votre image d'arrière-plan à votre section. Accédez aux paramètres de la section (zone bleue) et mettez à jour les éléments suivants :

Options de contenu :

Image d'arrière-plan : [entrez une image d'arrière-plan (la mienne fait 2000 x 2200)]

Utiliser l'effet de parallaxe : OUI
Méthode de parallaxe : vraie parallaxe

Options de conception :

Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

Enregistrer les paramètres
Modifiez ensuite les paramètres de ligne avec les mises à jour suivantes :

Options de contenu

Couleur d'arrière-plan de la colonne 2 : rgba(0,0,0,0.69)

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 : 0 pixels en haut, 0 pixels en bas
Remplissage personnalisé de la colonne 2 : 0 pixels en haut, 0 pixels en bas

Les choses commencent à se mettre en place maintenant. Vous avez votre image de fond et vous avez créé votre première ligne. Vous êtes maintenant prêt à dupliquer cette ligne. Cliquez sur l'icône en double dans la barre de menu de la ligne dans le générateur visuel.

Dans la nouvelle ligne que vous venez de dupliquer, faites glisser le module vidéo vers la colonne de droite et faites glisser le module de présentation vers la colonne de gauche.

Il ne vous reste plus qu'à mettre à jour le contenu du module vidéo pour inclure la nouvelle URL de la vidéo et la nouvelle image de couverture. Pour le module Blurb, vous devrez mettre à jour l'en-tête et le contenu qui correspondent à votre vidéo. Et vous devrez également ajuster l'icône du texte de présentation à une flèche qui pointe vers la droite (si vous avez utilisé la même icône que moi) et basculer l'animation de l'image/icône sur « De gauche à droite ».

Ensuite, nous devons mettre à jour les paramètres de ligne dupliqués pour définir l'arrière-plan de la première colonne. Accédez aux paramètres de ligne et mettez à jour les éléments suivants sous l' onglet Contenu :

Couleur d'arrière-plan de la colonne 1 : rgba(0,0,0,0.69)
Couleur d'arrière-plan de la colonne 2 : aucune

Nous progressons un peu. Voyons maintenant à quoi ressemblent nos deux premières rangées…

Pour les deux lignes suivantes, répétez le processus de duplication et mettez à jour le contenu. N'oubliez pas que plus vous avez de lignes, plus l'image d'arrière-plan de votre section devra s'étirer pour s'adapter à la longueur du contenu.

Pour cet exemple, j'ai ajouté deux lignes supplémentaires, ce qui en fait un total de quatre lignes. Découvrez le résultat final.

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.

Pour ces modifications, il peut être un peu plus facile d'utiliser la vue filaire.

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

Options de contenu

Image d'arrière-plan : [entrez une image d'arrière-plan claire]

Mettez à jour les paramètres de la première ligne comme suit :

Options de contenu

Couleur d'arrière-plan de la colonne 2 : rgba(255,255,255,0.68)

Mettez à jour les paramètres du module Blurb de la première ligne comme suit :

Options de conception

Couleur de l'icône : #333333
Couleur du texte : foncé
Couleur du texte de l'en-tête : #444444
Police de caractère : Roboto
Couleur du corps du texte : #666666

Mettez à jour les paramètres de la deuxième ligne comme suit :

Options de contenu

Couleur d'arrière-plan de la colonne 1 : rgba(255,255,255,0.45)

Utilisez les options du clic droit pour copier la conception du module de présentation de la première ligne et collez-la dans le module de présentation de la deuxième ligne.

C'est ça! Découvrez le résultat final.

Sensible?

Celui-ci est un peu délicat en ce qui concerne son comportement sur des écrans de plus petite taille. Étant donné que l'ordre d'empilement par défaut place la colonne de gauche au-dessus de la colonne de droite, le résultat de cette disposition est un peu déroutant. Vous pouvez apprendre comment résoudre ce problème sur mon précédent post sur la façon de modifier l'ordre d'empilement des colonnes de Divi.

À venir…

La prochaine grille va vous surprendre. Les couleurs d'arrière-plan et les dégradés semi-transparents rendent le design très facile à assortir à votre propre site. Découvrez l'aperçu…

J'espère que vous appréciez la série jusqu'à présent. J'ai hâte de vous entendre dans les commentaires.

À votre santé!