Comment styliser le module de curseur de publication de Divi comme le curseur de publication de Facebook Newsroom

Les curseurs de publication sont une solution élégante pour présenter une variété de contenus à vos lecteurs. Les messages mis en évidence peuvent être organisés de différentes manières, des catégories à ce jour. Dans le projet d'aujourd'hui, nous examinons un exemple de la page de blog de Facebook Newsroom qui présente une catégorie de messages appelée « Top Stories ». C'est un curseur très attrayant qui met l'accent sur le titre du message et l'image en vedette. Nous allons recréer l'apparence de ce slider à l'aide du module Post Slider de Divi.

Avant & Après : le module Divi Post Slider

La première image ci-dessous montre le module divi post slider avec ses paramètres par défaut, tandis que la seconde est une modification créée avec quelques ajustements dans les paramètres et quelques CSS personnalisés.

Avant

Après

Le concept et l'inspiration

Comme mentionné, le modèle pour le style de curseur de publication d'aujourd'hui provient de Facebook Newsroom. Il s'agit d'un blog d'actualités dédié, comme vous l'avez peut-être deviné, à tout ce qui concerne Facebook. Alors que la plupart d'entre nous connaissent Facebook comme le géant des médias sociaux, un rapide coup d'œil à ce blog élargira votre perspective. Avec 8,8 milliards de dollars de revenus au dernier trimestre et 1,23 milliard d'utilisateurs actifs par jour, le curseur de publication de blog sur la page Facebook Newsroom fournit un modèle valable pour le projet d'aujourd'hui.

Préparation des éléments de conception

Pour préparer cette conception, vous aurez besoin de quelques articles de blog avec des images en vedette. Si vous n'êtes pas habitué à définir des images en vedette pour vos publications, vous trouverez le paramètre sur la page de modification de la publication en bas à droite de la page.

Cette conception de curseur fonctionnera mieux si chacune des images présentées est de 600px x 400px, mais la taille exacte n'est pas critique.

Vous pouvez également ajouter un extrait de texte pour chacun de vos messages dans la zone de saisie "Extrait" située en bas de la page de l'éditeur de messages. La publication affichera votre extrait de publication si vous en avez un, mais utilisera une partie de votre contenu réel si vous ne l'avez pas.

Mettre en œuvre le design avec Divi

Abonnez-vous à notre chaîne Youtube

Si vous suivez et n'avez pas encore de configuration de page pour afficher votre curseur de publication, créez simplement une nouvelle page et cliquez sur "Utiliser Visual Builder" pour commencer à apporter les modifications nécessaires.

Nous commençons par ajouter une section régulière avec une ligne de structure à 1 colonne.

Ajoutez ensuite le module Post Slider à la ligne.

Nos modifications commencent par les paramètres de « Contenu », où vous vous trouvez par défaut après l'ajout de tout nouveau module dans le Visual Builder.

Apportez les modifications suivantes aux paramètres de contenu par défaut :

Définissez « Numéro de publication » sur le nombre de publications que vous souhaitez. Pour cet exemple, j'utilise 3.

Ensuite, définissez « Utiliser l'extrait de publication si défini » sur oui et définissez « Longueur automatique de l'extrait » sur 180.

Nous sommes maintenant prêts à passer aux paramètres de conception en cliquant sur l'onglet en haut du modal des paramètres du module.

Apportez les modifications suivantes aux paramètres de conception :

Changez la "Couleur de superposition d'arrière-plan" en blanc (#ffffff).

Remplacez « Dot Nav Custom Color » par #576d90.

Changez la "Couleur du texte" en Sombre.

Maintenant, mettez la "Police de l'en-tête" en gras, définissez la "Taille de la police de l'en-tête" sur 34px, définissez la "Couleur du texte de l'en-tête" sur #3b5998 et la "Hauteur de la ligne de l'en-tête" sur 42px.

Définissez maintenant la "Couleur du texte du corps" sur #141924 et la "Hauteur de la ligne du corps" sur 24px.

Maintenant, cliquez sur "Utiliser des styles personnalisés pour le bouton" pour le changer en oui. Modifiez la "Taille du texte du bouton" sur 16px, la "Largeur de la bordure du bouton" sur 0px, la "Couleur du texte du survol du bouton" sur #666666 et la "Couleur de l'arrière-plan du survol du bouton" sur rgba(0,0,0,0).

Cliquez maintenant sur l'onglet "Avancé" en haut du modal des paramètres du module. Dans la saisie de texte sous CSS ID, ajoutez "fb-post-slider". Cela nous permet d'ajouter des styles à ce module spécifique sans avoir d'effet sur les autres modules de publication qui peuvent être affichés sur la page.

Ajoutez maintenant du code CSS aux différents éléments comme suit :

Avant

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Élément principal

border-radius: 3px;
border:1px solid #dedede; 

Après

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

Description de la diapositive

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

Titre de la diapositive

font-family: 'Alegreya Sans', sans-serif;

Bouton Glisser

padding:0!important;
margin-top:0;

Contrôleurs de diapositives

margin-bottom:-55px;

Faites glisser les flèches

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

Enregistrez maintenant les paramètres du module en cliquant sur la coche dans le coin inférieur droit du modal.

Vous pouvez voir dans le Visual Builder qu'il reste encore du chemin à parcourir pour que notre curseur de publication ressemble à celui de la page Facebook Newsroom.

Ce n'est rien qu'un peu de CSS ne peut pas prendre en charge, et nous pourrons le voir prendre forme en ajoutant le code restant aux paramètres de la page directement à partir de Visual Builder. Pour y accéder, cliquez sur l'icône Développer les paramètres en bas au centre de la page, puis cliquez sur l'icône « Paramètres de la page ».

Si vous travaillez sur un moniteur plus grand, je suggère de déplacer le modal sur le côté du curseur de publication afin que vous puissiez voir ce que fait chaque bit de code au fur et à mesure que nous l'ajoutons. Cela vous aidera à mieux comprendre le CSS utilisé pour styliser notre module.

Tout d'abord, nous allons nous occuper de la taille et de la position de l'image d'arrière-plan (actuellement masquée derrière la superposition blanche), ainsi que de la position du texte du curseur et de la superposition en ajoutant le CSS suivant à la zone de texte « CSS personnalisé ».

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

Nous allons maintenant nous occuper de masquer notre méta de publication, à l'exception de la date, et de déplacer la position de la date au-dessus du titre. Pour ce faire, ajoutez le code suivant à l'entrée de texte CSS personnalisé juste en dessous du code précédemment entré.

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

Nous sommes à peu près là avec seulement quelques exceptions mineures. Vous remarquerez lorsque vous survolez notre module Post Slider, que les flèches précédente et suivante apparaissent. Sur le curseur de la salle de rédaction Facebook, seule la flèche suivante apparaît. Cela est facilement résolu en ajoutant le CSS suivant à la saisie de texte CSS personnalisée juste en dessous du code précédemment entré.

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

Nous devons maintenant repositionner les points de navigation sous le curseur avec le code suivant. À propos, vous remarquerez également que la définition de la propriété de débordement du curseur sur visible révèle l'effet 3D que nous avons créé précédemment pour la balise « Top Stories » qui entoure le coin supérieur droit.

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

Enfin, ce dernier morceau de code modifiera l'animation de notre slider pour qu'elle corresponde plus étroitement à notre slider de modèle. Bien que ce ne soit pas une correspondance parfaite, c'est le plus proche que je puisse obtenir sans entrer dans les solutions jQuery. Il existe également des requêtes multimédias pour rendre notre curseur un peu plus réactif.

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

Vous pouvez maintenant enregistrer la page en cliquant sur le bouton Enregistrer dans le coin inférieur droit de votre écran. Une fois la page enregistrée, quittez le générateur visuel pour voir le curseur de publication terminé, inspiré du curseur de publication sur la page Facebook Newsroom.

Dernières pensées

Eh bien, que vous ayez trouvé cette conception particulière utile ou non, j'espère qu'elle a fourni un aperçu détaillé de certains des paramètres les plus avancés du module Post Slider de Divi, ainsi que piqué votre imagination quant à ce qui est possible.