Comment concevoir une zone de widget de messages récents défilant dans Divi

Le module de barre latérale de Divi est un outil extrêmement utile pour intégrer des zones de widgets personnalisées dans votre conception. Cela vous permet d'afficher n'importe quel widget WordPress dans une mise en page Divi. Dans ce tutoriel, je vais vous montrer comment créer une zone de widget de publications récentes défilante dans Divi. Je vais concevoir une section « De notre blog » avec la zone de widget de messages récents sur le côté droit d'un module de blog. Ce sera parfait pour présenter quelques-uns de vos articles de blog les plus récents sur une page d'accueil ou une page de destination.

Commençons!

Aperçu

Voici un petit aperçu du design que nous allons construire dans ce tutoriel.

Téléchargez GRATUITEMENT la mise en page des articles récents défilant

Pour mettre la main sur la conception de la mise en page des articles récents à défilement de ce didacticiel, vous devez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Abonnez-vous à notre chaîne Youtube

Création de la zone de widget Messages récents

Puisque nous allons ajouter un widget de publications récentes à notre mise en page Divi, la première chose que nous devons faire est de créer une nouvelle zone de widgets (avec le widget de publications récentes) à utiliser avec le module Sidebar de Divi.

Pour créer la zone de widget de publications récentes, accédez à Apparence > Widgets. Créez ensuite une nouvelle zone de widgets en donnant un nom à la zone de widgets (appelez-la « messages récents » si vous le souhaitez) et en cliquant sur le bouton Créer. Actualisez la page pour voir la nouvelle zone de widgets disponible.

Ouvrez la bascule du widget Articles récents fourni avec WordPress sur la gauche de la page. Choisissez ensuite la zone de widget « messages récents » dans la liste et cliquez sur Ajouter un widget pour ajouter le widget à la zone de widget.

Ouvrez ensuite la zone du widget Articles récents et mettez à jour le widget Articles récents avec un titre. Définissez le nombre de publications à afficher sur un grand nombre afin que nous ayons suffisamment de publications à faire défiler une fois notre conception terminée.

Maintenant que notre zone de widgets est en place, nous pouvons commencer notre conception Divi.

Création de la section « De notre blog » avec une zone de widget de messages récents défilant

Conception de la section d'en-tête

Créez une nouvelle section régulière avec une ligne à une colonne.

Avant d'ajouter un module, mettez à jour la section avec les éléments suivants :

Couleur d'arrière-plan : #333333
Rembourrage personnalisé : 0px en bas

Ensuite, supprimez également le rembourrage inférieur de la ligne en mettant à jour les paramètres de la ligne :

Rembourrage personnalisé : 0px en bas

Ajoutez ensuite un module de texte à la ligne.

Mettez ensuite à jour les paramètres de texte suivants :

Pour le contenu, ajoutez l'en-tête h2 html suivant :

<h2>From our Blog</h2>

Mettez ensuite à jour les paramètres de texte suivants :

Police de titre 2 : Roboto
Titre 2 Style de police : TT
Titre 2 Couleur du texte : #ffffff
Titre 2 Taille du texte : 40 px
Espacement des lettres de l'en-tête 2 : 2px

Cela prend en charge l'en-tête de notre mise en page. Il est maintenant temps de créer le reste de la mise en page à l'aide d'une section spécialisée.

Création de la section de spécialité

L'utilisation d'une section spécialisée distincte pour le reste de la mise en page nous permettra d'avoir une barre latérale dédiée à droite pour notre zone de widgets déroulants. De plus, cela nous permettra de dimensionner et de styliser nos lignes sur le côté gauche de la section séparément de la zone de la barre latérale.

Allez-y et ajoutez une section spécialisée avec une disposition de colonne dans la barre latérale droite comme suit :

Ajoutez ensuite une ligne d'une colonne à la section.

Avant d'ajouter un module, mettons à jour nos paramètres de section et de ligne.

Personnaliser les paramètres de la section

Ouvrez les paramètres de la section de spécialité et mettez à jour les éléments suivants :

Couleur d'arrière-plan : #333333
Largeur de gouttière : 2
Rembourrage personnalisé : 0px en haut
Remplissage personnalisé de la colonne 2 : 0px en haut, 0px en bas

Personnaliser les paramètres de ligne

Ensuite, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Hauteur : 640px
Largeur de la bordure supérieure : 8px
Couleur de la bordure supérieure : #444444
Largeur de la bordure inférieure : 8px
Couleur de la bordure inférieure : #444444

La hauteur personnalisée de 640 pixels est donnée pour correspondre à la hauteur de la zone de widget de messages récents défilant que nous ajouterons à la barre latérale de notre section spécialisée. cela garantira que les deux auront la même hauteur pour un design plus esthétique.

Ajout du module de blog

Dans la rangée à une colonne à gauche, ajoutez un module de blog.

Mettez ensuite à jour les paramètres du module de blog comme suit :

Nombre de messages : 2

Disposition : Grille
Police du titre : Roboto
Police Meta : Roboto
Poids de la police Meta : Légère
Style de police méta : TT
Police de pagination : Roboto
Style de police de pagination : TT
Couleur du texte de pagination : #ffffff
Taille du texte de la pagination : 18px
Espacement des lettres de pagination : 2px

Ajout de la zone de widget de messages récents défilants

Enfin, il est temps d'ajouter les articles récents défilants à notre mise en page. Pour ce faire, ajoutez un module de barre latérale à la zone de barre latérale de la section de spécialité sur la droite.

Sélectionnez ensuite la zone de widgets « messages récents » que vous avez créée précédemment en la sélectionnant dans la liste déroulante Zone de widgets sous l'onglet Contenu.

Mettez ensuite à jour la conception du titre et du corps du texte comme suit :

Police du titre : Roboto
Style de police du titre : TT
Couleur du texte du titre : #ffffff
Espacement des lettres du titre : 2px
Police de caractère : Roboto
Style de police du corps : Souligné

Ensuite, masquez le séparateur de bordure comme suit :

Afficher le séparateur de bordure : NON

Donnez ensuite au module de barre latérale une hauteur maximale et un rembourrage personnalisé comme suit :

Hauteur maximale : 640 px
Rembourrage personnalisé : 30 pixels en haut, 30 pixels en bas, 5 % à droite

La hauteur maximale de 640px correspond à la hauteur personnalisée de 640px donnée à la ligne adjacente.

Maintenant que nous avons donné au module de barre latérale une hauteur maximale de 640px, nous devons définir le débordement vertical pour faire défiler afin d'obtenir notre fonctionnalité de défilement. Pour ce faire, allez dans l'onglet Avancé et mettez à jour les éléments suivants :

Débordement vertical : défilement

Résultat final

C'est ça! Voyons maintenant le résultat final.

Option bonus : ajout de CSS personnalisé à la barre de défilement de conception (non pris en charge par tous les navigateurs)

Le style d'une barre de défilement dans WordPress est un peu pénible si vous voulez une prise en charge multi-navigateur. Donc, dans la plupart des cas, vous voudrez laisser les styles par défaut du navigateur et l'appeler un jour. Mais si vous souhaitez personnaliser la barre de défilement pour qu'elle corresponde au design de votre page, vous pouvez ajouter du CSS personnalisé. Malheureusement, la prise en charge du navigateur est limitée aux navigateurs qui prennent en charge les propriétés CSS préfixées :: webkit (essentiellement Safari et Chrome). Voici comment procéder.

Ouvrez les paramètres de la section spécialité et ajoutez la classe CSS suivante :

Classe CSS : cust-scroll

Ensuite, ouvrez le modal des paramètres de la page et ajoutez le CSS personnalisé suivant à la page.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

Cela modifie la largeur de la barre de défilement à 8px et ajuste les couleurs de la piste et de la poignée. N'hésitez pas à expérimenter vous-même avec plus de designs et de couleurs.

Et au cas où vous vous poseriez la question, la solution de repli pour les autres navigateurs sera le style par défaut des navigateurs pour les barres de défilement.

Dernières pensées

L'ajout de défilement vertical au contenu est utile chaque fois que vous souhaitez donner aux utilisateurs la possibilité d'afficher plus de contenu dans un espace confiné. Une zone de widget de messages récents défilant est un excellent exemple de la façon dont le défilement vertical peut très bien fonctionner. Bien sûr, vous pouvez remplacer le module de barre latérale utilisé dans ce didacticiel par un module de texte et ajouter un défilement vertical à tout contenu que vous souhaitez. La même personnalisation s'appliquera à n'importe quel module.

En ce qui concerne le style de la barre de défilement, je suis sûr qu'il existe d'autres plugins ou solutions Javascript qui donneraient une solution plus multi-navigateur. Si vous en connaissez de bonnes, n'hésitez pas à les partager avec nous.

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

À votre santé!