Améliorez votre page de blog Divi avec un arrière-plan conçu pour la mise en page en grille

La création d'une mise en page en grille pour votre blog est un excellent moyen d'organiser vos articles. Divi rend cela extrêmement facile avec le module Blog. En quelques secondes, vous pouvez déployer une mise en page de grille de blog fonctionnelle sur votre page. Et vous pouvez même utiliser les nombreux paramètres de conception pour personnaliser l'apparence de la grille de votre blog de plusieurs manières. Mais aujourd'hui, je prends les choses à un autre niveau.

Dans ce didacticiel, je vais vous montrer comment créer plusieurs calques d'arrière-plan pour encadrer votre grille de blog à trois colonnes avec un design magnifique et symétrique. J'espère que vous pourrez utiliser ces techniques de conception pour créer une page de blog qui impressionnera à coup sûr.

Commençons.

Abonnez-vous à notre chaîne Youtube

Aperçu de la conception de la disposition en grille

Voici un aperçu de la conception.

Commencer

Tout ce dont vous avez besoin est Divi pour ce tutoriel. Une fois le thème Divi installé et actif, créez une nouvelle page et donnez-lui un titre. Déployez ensuite le Visual Builder. Sélectionnez « Choisir une mise en page prédéfinie », puis téléchargez la mise en page du blog du thérapeute sur votre page et publiez-la.

Assurez-vous d'avoir au moins 6 articles de blog avec du contenu et des images en vedette. Si vous ne le faites pas, les articles du blog n'apparaîtront pas sur la page.

Vous êtes maintenant prêt à commencer l'édition.

Ajouter le premier calque d'arrière-plan à la section

Le design personnalisé va être ajouté à la deuxième section de la mise en page contenant le module de blog. Pour créer notre premier calque d'arrière-plan, nous allons styliser les paramètres de la section comme suit :

Couleur d'arrière-plan : #5873dd
Rembourrage personnalisé (bureau): 4vw haut, 4vw bas, 7vw gauche
Rembourrage personnalisé (tablette): 0vw Gauche

Le rembourrage gauche personnalisé 7vw compense essentiellement le contenu de la section (la rangée) pour un look unique. Si vous voulez que tout soit joli et centré pour votre conception, vous pouvez laisser cela de côté.

Ajouter les deuxième et troisième calques d'arrière-plan à la ligne

Les deuxième et troisième calques d'arrière-plan seront créés en ajoutant une couleur d'arrière-plan à toute la ligne, puis un dégradé d'arrière-plan à la colonne à l'intérieur de la ligne.

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Couleur d'arrière-plan : rgba (255,255,255,0.3)
Couleur d'arrière-plan gauche de la colonne 1 : rgba(255,255,255,0,0)
Couleur d'arrière-plan de la colonne 1 : rgba(255,255,255,0.3)
Direction du gradient de la colonne : 90 degrés
Position de départ de la colonne : Position de départ de la colonne : 33,3 %
Position de fin de colonne : 0%

Notez que j'utilise une couleur blanche avec une opacité de 30% afin de créer un degré cohérent de couleurs de superposition blanches qui permettent à l'arrière-plan de la section bleue de transparaître. Comme chaque couleur se chevauche, l'utilisateur voit une version 30% plus claire de l'arrière-plan de la section bleue. De cette façon, si jamais vous souhaitez modifier le schéma de couleurs de la mise en page, il vous suffira de modifier la couleur d'arrière-plan de la section.

La définition de la position de départ du dégradé de la colonne sur 33,3% garantit que le dégradé se divisera juste entre la première et la deuxième colonne de la grille de mon blog. Mais cela ne semblera pas correct au départ, car nous devons encore donner à notre ligne une largeur personnalisée de 100%, entre autres.

Largeur personnalisée : 100 %
Largeur de gouttière : 4
Rembourrage personnalisé : 4 % en haut, 4 % en bas

Le rembourrage personnalisé expose les couches verticalement pour ajouter à la conception globale.

Enregistrer les paramètres.

Ajout de la quatrième couche d'arrière-plan à notre module de blog

C'est là que tout se met en place. La quatrième et dernière couche sera un dégradé de fond ajouté à notre module de blog. Ensuite, avec l'espacement exact ajouté, le module de blog s'alignera parfaitement avec nos calques d'arrière-plan. J'ajouterai également quelques ajustements de style aux cartes de blog pour ajouter quelques touches finales.

Accédez aux paramètres du module de blog et mettez à jour les éléments suivants :

Couleur d'arrière-plan des carreaux de grille : rgba (255,255,255,0.7)

Pour ajouter le dégradé d'arrière-plan, vous pouvez accéder aux paramètres de ligne et copier le dégradé d'arrière-plan de la colonne 1, puis revenir aux paramètres du blog et le coller à l'aide des options du clic droit.

Ensuite, mettez à jour les éléments suivants :

Position de départ : 66,6 %

Marge personnalisée : 4% en haut, 4% en bas
Rembourrage personnalisé : 4 % en haut, 4 % en bas, 4 % à gauche, 4 % à droite

Comme vous pouvez le voir, la valeur de longueur de 4% est utilisée partout pour donner un espacement égal à notre conception. Et il y a plus à cette valeur de 4% qu'il n'y paraît. Si vous vous en souvenez, nous avons défini notre ligne pour avoir une largeur de gouttière personnalisée de 4. Dans Divi, si vous ajoutez un module de blog avec une disposition en grille à une ligne avec une largeur de gouttière de 4, les colonnes de votre grille de blog seront séparées horizontalement de 8% de marge. Ainsi, l'ajout des 4% de rembourrage gauche et droit au module créera l'espacement exact dont nous avons besoin.

À ce stade, nous avons terminé avec la conception de l'arrière-plan. Découvrez ce que nous avons jusqu'à présent.

Il ne nous reste plus qu'à ajouter quelques touches finales au module de blog.

Touches finales

Sous l'onglet de conception des paramètres du module de blog, mettez à jour les éléments suivants :

Couleur du corps du texte : rgba(0,0,0,0.8)
Couleur du méta-texte : rgba(0,0,0,0.5)
Style de police de pagination : Souligné
Couleur de soulignement de la pagination : rgba(166 221 217 0,39)
Couleur du texte de pagination : #ffffff
Taille du texte de pagination : 3 vw (ordinateur de bureau), 40 px (tablette), 30 px (smartphone)

Si vous souhaitez donner un peu plus de texture à votre conception, vous pouvez ajouter des arrière-plans de séparation à votre section.

Haut de séparation : voir la capture d'écran
Couleur du diviseur: rgba (88,115,221,0,5)
Hauteur du diviseur : 32vw
Répétition horizontale du diviseur : 0.3X

Diviseur inférieur : voir la capture d'écran
Couleur du diviseur: rgba (88,115,221,0,5)
Hauteur du diviseur : 43vw
Répétition horizontale du diviseur : 0.3X

Découvrez maintenant le résultat final…

Conception réactive

Les couches qui encadrent les colonnes de la grille s'adaptent parfaitement à toutes les tailles de navigateur de bureau.

Bien que les calques d'arrière-plan ne s'ajustent pas pour deux colonnes sur tablette et une colonne sur smartphone, le résultat est toujours très symétrique et fournit une conception de grille brisée subtile qui fonctionne bien.

Voici à quoi cela ressemblera sur mobile…

Dernières pensées

Cette technique d'arrière-plan en couches est vraiment un moyen de créer l'impression d'avoir trois arrière-plans de colonnes où il n'y a en fait qu'une seule colonne (puisque le module de blog se trouve dans une colonne). Bien sûr, cela est possible de le faire en CSS personnalisé au niveau du module de blog, mais j'ai pensé qu'il serait plus utile de donner une solution créative en utilisant le Divi Builder. Et les variations de la conception peuvent également être utilisées comme toile de fond pour d'autres contenus.

J'ai essayé d'expliquer le raisonnement derrière certains styles utilisés dans ce didacticiel, mais si vous avez des questions, je suis tout ouïe. Et, pour ceux d'entre vous qui espèrent pimenter la mise en page de votre grille de blog, j'espère que cet article vous donnera au moins quelques conseils de conception pour y parvenir.

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

À votre santé!