Comment concevoir une mise en page « vitrine » réactive à cinq colonnes avec Divi

Concevoir une mise en page à cinq colonnes avec suffisamment d'espace pour votre contenu peut être difficile. Sans parler du plus grand défi de s'assurer qu'il s'adapte bien à toutes les tailles de navigateur. Dans ce didacticiel, je vais vous montrer comment maximiser l'espace nécessaire pour insérer le contenu dans une disposition à cinq colonnes sans compromettre la conception sur des écrans de plus petite taille (comme une tablette et un smartphone). Cette conception est idéale pour présenter des produits, des services et des projets. Je vais même ajouter quelques fonctionnalités de conception bonus pour un peu d'inspiration.

Commençons.

Aperçu

Techniques réactives utilisées

Utiliser une largeur de rangée et une largeur de gouttière personnalisées

La clé pour rendre une mise en page à cinq colonnes réactive est d'abord de donner à vos colonnes suffisamment d'espace pour contenir le contenu. Dans la conception de ce didacticiel, je vais donner à la ligne contenant les cinq colonnes une largeur personnalisée de 89 %. Ensuite, je vais créer encore plus d'espace en définissant la largeur de la gouttière sur 1, ce qui supprime essentiellement toute marge entre les colonnes. Pour cette conception, il est important d'utiliser une largeur personnalisée de 89 % au lieu de définir la ligne sur toute la largeur, car vous pouvez définir la largeur de la gouttière sur 1 tout en conservant une marge de chaque côté de votre ligne. Vous verrez ce que je veux dire.

Utiliser les unités de longueur vw pour l'espacement et le texte d'en-tête

Une autre clé pour que les choses restent réactives sur une mise en page à cinq colonnes consiste à espacer votre contenu à l'aide d'unités de longueur vw. Et il est important d'être cohérent avec l'utilisation de vw tout au long de votre espacement. Cela garantira que les choses seront mises à l'échelle de manière cohérente sur toutes les tailles de navigateur sans que les éléments ne se cassent ou ne sautent pendant que vous ajustez la largeur de votre fenêtre. L'utilisation de l'unité de longueur vw pour le texte d'en-tête sera également essentielle afin que le texte ne s'interrompe pas dans une nouvelle ligne sur les fenêtres de navigateur plus petites. Cependant, pour le texte d'en-tête, nous devrons attribuer une unité px pour tablette et smartphone afin de s'adapter au texte qui rétrécit trop.

Partie 1 : Commencer

Tout ce dont vous avez besoin pour ce tutoriel est le thème Divi. Nous utiliserons le Visual Builder avec la mise en page de la page d'accueil du cabinet d'architecture.

Donc, pour commencer, créez une nouvelle page, donnez un titre à votre page et déployez le Visual Builder. Sélectionnez l'option « Choisir une mise en page prédéfinie ». Dans la fenêtre contextuelle de chargement à partir de la bibliothèque, sélectionnez le pack de mise en page Interior Design, puis chargez la mise en page de la page d'accueil du cabinet d'architecture sur votre page.

Partie 2 : Création de la section de titre

Pour commencer, dupliquez la deuxième section contenant les trois textes de présentation.

Nous avons besoin de deux sections pour cette conception car la section supérieure servira à deux fins. Premièrement, il contiendra le titre de notre section ci-dessous. Et deuxièmement, cela nous permettra d'ajouter un design unique à l'aide d'un diviseur de section.

Nous allons continuer.

Dans la section d'origine (pas le doublon), supprimez les trois textes de présentation et modifiez la structure des colonnes de la ligne en une seule colonne.

Faites ensuite défiler vers le bas de la mise en page jusqu'à la dernière section et copiez le module de texte dans la colonne de gauche.

Ensuite, collez-le dans la ligne de colonne que vous venez de créer et supprimez tout le contenu du texte sous l'en-tête h2 de sorte qu'il ne reste que « Construisons quelque chose ».

Partie 3 : Personnalisation des Blurbs pour une mise en page à cinq colonnes

Il est maintenant temps de visiter la section que nous avons dupliquée avec nos trois textes de présentation originaux à l'intérieur de la rangée de 3 colonnes. Tout d'abord, modifions la structure des lignes en une disposition à cinq colonnes.

Ouvrez les paramètres de présentation du module de présentation dans la première colonne, puis supprimez l'image utilisée comme icône.

Ensuite, dupliquez le module de présentation dans la première colonne. Nous allons utiliser deux textes de présentation par colonne pour cette conception, car nous avons besoin du texte de présentation supérieur pour contenir notre image d'arrière-plan.

Ouvrez les paramètres du texte de présentation supérieur dans la première colonne et supprimez le corps du texte dans la zone de contenu.

Ajouter une image d'arrière-plan et un dégradé au module Blurb supérieur

Donnez ensuite au même texte de présentation une image d'arrière-plan et ajoutez un dégradé pour superposer l'image comme suit :

Ajouter une image d'arrière-plan
Couleur d'arrière-plan du dégradé de gauche : rgba(255,255,255,0)
Dégradé d'arrière-plan à droite : rgba (18,18,18,0,65)
Position de départ : 50 %
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Le dégradé est nécessaire pour aider notre texte de titre à devenir plus lisible avec des images d'arrière-plan plus claires.

Utilisez les unités VW pour le texte du titre et l'espacement

Mettez ensuite à jour les paramètres de l'onglet de conception comme suit :

Taille du texte du titre : 2.7vw (ordinateur de bureau), 46px (tablette), 36px (smartphone)
Espacement des lettres du titre : -3px
Marge personnalisée : 1,5 vw à gauche, 1,5 vw à droite
Rembourrage personnalisé : 35vw en haut, 2vw en bas, 1vw à gauche, 1vw à droite

Enregistrer les paramètres.

Le rembourrage supérieur personnalisé de 35vw est ce qui crée la conception unique de l'image verticale longue. Le texte du titre reçoit une valeur de 2,7vw afin de maintenir la mise à l'échelle du texte de manière cohérente sur différentes largeurs de navigateur. Le reste de l'espacement aura plus de sens une fois que nous aurons ajouté plus d'espacement à notre rangée plus tard.

Personnaliser le texte de présentation inférieur

Ensuite, ouvrez les paramètres du deuxième module de présentation en dessous dans la première colonne et supprimez le texte du titre. Ensuite, mettez à jour les éléments suivants :

Alignement du corps du texte : à gauche
Couleur du corps du texte : #666666
Rembourrage personnalisé : 2vw en haut, 2vw en bas, 2vw à gauche, 2vw à droite

Maintenant que nous avons conçu nos deux textes de présentation dans notre première colonne. Copiez-les tous les deux et collez-les dans chacune des colonnes restantes. Vous devrez d'abord supprimer les modules de présentation originaux dans les colonnes 2 et 3. Maintenant, votre conception devrait ressembler à ceci.

Partie 4 : Personnalisation des paramètres de section

Maintenant, mettons à jour nos paramètres de section pour avoir un fond blanc et une ombre de boîte en bas qui créera un espace pour que notre ligne se chevauche.

Couleur d'arrière-plan : #ffffff
Rembourrage personnalisé : haut par défaut, bas 5vw, gauche par défaut, droite par défaut
Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : -200px
Force du flou de l'ombre de la boîte : 0px
Couleur de l'ombre : #121212

Partie 5 : Personnalisation des paramètres de ligne

Revenons maintenant à notre ligne et mettons à jour les paramètres comme suit :

Image de fond : #ffffff
Alignement des lignes : Centre
Largeur personnalisée : 89 %
Largeur de gouttière : 1
Marge personnalisée : -10vw
Rembourrage personnalisé : 3vw haut, 3vw bas, 1.5vw gauche, 1.5vw droite
Box Shadow : voir capture d'écran
Force du flou d'ombre de la boîte: 80px

Comme mentionné précédemment dans le didacticiel, la largeur personnalisée et la largeur de la gouttière sont essentielles pour créer l'espace de contenu dont nous avons besoin pour une mise en page à cinq colonnes.

À ce stade, la structure de base de la conception est terminée. Voici à quoi ressemble le design jusqu'à présent.

Partie 6 : Ajouter les touches finales

Nous pouvons maintenant ajouter quelques modifications de conception supplémentaires pour le terminer.

Décaler les Blurbs

Tout d'abord, échelonnons la hauteur des images d'arrière-plan de présentation en diminuant le remplissage de quelques-unes. Ouvrez les paramètres du module de présentation supérieur dans la deuxième ligne et mettez à jour le remplissage comme suit :

Rembourrage personnalisé : 28vw Haut

Et pour le texte de présentation supérieur dans la troisième colonne, modifiez le rembourrage supérieur à 30vw.

Ajoutez un diviseur de section pour ajouter de la texture à votre ligne à cinq colonnes

Une technique de conception intéressante consiste à ajouter un diviseur de section supérieure à la section directement au-dessus de la section avec nos cinq colonnes. L'arrière-plan du séparateur s'affichera sur l'arrière-plan de la ligne à cinq colonnes même s'il chevauche la section ci-dessus. Pour ce faire, rendez-vous dans la section contenant le titre « Construisons quelque chose » et donnez-lui un intercalaire comme suit :

Étant donné que la couleur du séparateur est la même couleur que l'arrière-plan de la section avec une opacité de 15 %, le séparateur n'est pas visible sur la section supérieure, mais devient visible dans la section ci-dessous et sur la ligne superposée. Et parce que nous avons donné à la rangée une ombre de boîte, cela crée un design unique.

Je suis allé de l'avant et j'ai mis à jour quelques-unes des images d'arrière-plan pour avoir une meilleure idée de ce à quoi ressemblerait le design avec différentes images.

Voici la conception finale.

L'un des avantages de la mise en page à cinq colonnes est que vous obtenez une belle mise en page à deux colonnes sur tablette.

Et voici à quoi cela ressemble sur smartphone.

Dernières pensées

J'adore explorer la puissance de Divi pour créer des mises en page réactives. Le défi d'une mise en page à cinq colonnes est qu'il n'y a vraiment pas beaucoup de place pour le contenu à moins que vous n'utilisiez les bonnes techniques pour espacer votre contenu de manière appropriée afin de bien l'adapter à toutes les tailles de navigateur. J'espère que cette conception a été utile pour introduire quelques possibilités d'utilisation d'une disposition à cinq colonnes pour votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!