Présenter vos derniers articles de blog dans un superbe design mobile avec Divi

La façon dont vous présentez les articles de blog sur votre site Web a une grande influence sur le comportement de vos visiteurs lorsqu'ils les rencontrent lorsqu'ils naviguent sur votre site Web. Pour vous aider à être créatif et efficace, nous allons vous montrer comment présenter vos derniers articles de blog de manière époustouflante.

L'exemple que nous allons recréer sera particulièrement beau sur des écrans de plus petite taille tout en conservant une excellente apparence sur les ordinateurs de bureau et les tablettes. Nous espérons que ce didacticiel vous inspirera pour créer vos propres derniers designs de billets de blog personnalisés.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Commençons à recréer !

Ajouter une nouvelle section

Fond dégradé

Créez une nouvelle page ou ouvrez une page existante et ajoutez-y une section régulière. Ouvrez les paramètres et ajoutez ensuite un arrière-plan dégradé.

• Couleur 1 : #2e1b8f
• Couleur 2 : #ffffff
• Direction du gradient : 90 degrés
• Position de départ : 53,3 %
• Position finale : 53,3 %

Espacement

Ensuite, allez dans les paramètres d'espacement. Ici, nous allons réduire la taille du contenu de la section sur le bureau et éliminer progressivement cet espace sur des écrans plus petits.

• Marge supérieure : 100 pixels
• Marge inférieure : 100px
• Rembourrage gauche : 26vw (ordinateur de bureau), 13vw (tablette), 0vw (téléphone)
• Rembourrage droit : 22.8vw (ordinateur de bureau), 11.4vw (tablette), 0vw (téléphone)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Couleur d'arrière-plan de la colonne 2

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan à la deuxième colonne.

• Couleur d'arrière-plan de la colonne 2 : #f7f7f7

Colonne 3 Couleur d'arrière-plan

Ajoutez également cette même couleur à l'arrière-plan de la colonne 3. Nous utilisons la même couleur pour ces deux colonnes pour les connecter et les faire ressembler à une seule pièce. Plus tard dans l'article, nous l'utiliserons pour manipuler les largeurs de colonnes sur des écrans de plus petite taille.

• Couleur d'arrière-plan de la colonne 3 : #f7f7f7

Dimensionnement

Allez ensuite dans l'onglet conception et ouvrez les paramètres de dimensionnement. Ici, nous allons supprimer tout l'espace par défaut entre les colonnes.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Affichage

Maintenant, pour nous assurer que les trois colonnes apparaissent côte à côte sur des écrans de plus petite taille, nous devons ajouter une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter le module Blurb à la colonne 1

Sélectionnez l'icône

Il est temps de commencer à ajouter des modules ! Commencez avec un module Blurb dans la colonne 1 et sélectionnez une icône de votre choix.

Fond dégradé

Accédez aux paramètres d'arrière-plan du module et ajoutez un arrière-plan dégradé radial.

• Couleur 1: #5000ff
• Couleur 2: rgba(41,196,169,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 28 %
• Position finale : 28 %

Paramètres des icônes

Continuez en allant dans l'onglet conception et en modifiant les paramètres de l'icône.

• Couleur de l'icône : #ffffff
• Placement des images/icônes : en haut
• Utiliser la police de l'icône : Oui
• Taille de la police de l'icône : 22px

Espacement

Ajoutez ensuite un rembourrage supérieur et inférieur personnalisé.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 10px

Frontière

Et ajoutez une bordure inférieure subtile pour terminer la conception du module Blurb.

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #ffffff
• Style de bordure inférieure : en pointillé

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Le prochain et dernier module dont nous avons besoin dans la première colonne est un module de texte. Ajoutez du contenu de votre choix.

Paramètres de texte

Ensuite, allez dans l'onglet conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Didact Gothic
• Poids de la police de texte : gras
• Couleur du texte : #ffffff

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne ! Ici, le seul module dont nous aurons besoin est un module de texte. Entrez un contenu de votre choix.

Couleur de l'arrière plan

Passez aux paramètres d'arrière-plan et ajoutez une couleur d'arrière-plan complètement blanche.

• Couleur d'arrière-plan : #ffffff

Paramètres de texte

Nous modifions également l'apparence de notre contenu en modifiant les paramètres de texte dans l'onglet Conception.

• Police de texte : Source Serif Pro
• Poids de la police de texte : gras
• Couleur du texte : #000000
• Taille du texte : 13 pixels
• Orientation du texte : Centre

Dimensionnement

Comme mentionné précédemment, nous manipulons les structures de colonnes pour créer un design personnalisé sur des écrans de plus petite taille. Pour ce faire, vous devrez réduire la largeur du module de texte et vous assurer qu'il est aligné sur le côté gauche de la colonne.

• Largeur: 60%
• Alignement du module : à gauche

Espacement

Nous ajoutons ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 57px
• Rembourrage inférieur : 57px
• Rembourrage gauche : 20px
• Rembourrage droit : 20px

Boîte ombre

Avec une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.23)

Ajouter un module de texte à la colonne 3

Ajouter du contenu

Passons à la colonne suivante et dernière. Ajoutez un module de texte avec le titre H3 de votre article de blog et un lien. Ajoutez les détails de la publication dans le style de texte du paragraphe juste en dessous du titre.

Paramètres de texte

Accédez à l'onglet conception du module de texte et modifiez les paramètres de texte.

• Police de texte : Source Serif Pro
• Couleur du texte : #a8a8a8
• Taille du texte : 12 pixels

Paramètres de texte H3

Continuez en modifiant également les paramètres de texte H3.

• Police de la rubrique 3 : Didact Gothic
• Poids de la police de l'en-tête 2 : gras
• Titre 3 Taille du texte : 17px

Espacement

Enfin, nous devrons ajouter des valeurs d'espacement personnalisées. Vous remarquerez que nous ajoutons également une marge gauche négative au module. Il s'agit de la dernière étape vers la création d'un type différent de structure de colonnes sur des écrans de plus petite taille. Ainsi, bien que la structure des colonnes soit techniquement toujours la même, nous avons combiné les arrière-plans des colonnes, les largeurs des modules et la marge gauche négative pour créer un résultat différent.

• Marge supérieure : 35px
• Marge de gauche : -80px (ordinateur de bureau), -50px (tablette et téléphone)
• Rembourrage droit : 20px

Cloner la ligne deux fois

Une fois que vous avez terminé de modifier la ligne et tous ses modules, vous pouvez continuer et cloner la ligne entière autant de fois que vous le souhaitez, en fonction du nombre de derniers articles de blog que vous souhaitez publier.

Changer les icônes

Changez l'icône de chaque doublon.

Modifier le contenu et les liens

Avec le contenu et les liens qui sont impliqués et vous avez terminé !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Dernières pensées

Dans cet article, nous vous avons montré comment créer un superbe design mobile qui met en valeur vos derniers articles de blog. Le design que nous avons recréé étape par étape est principalement conçu pour les écrans de plus petite taille, mais il a également fière allure sur les tablettes et les ordinateurs de bureau. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!