Comment modéliser le module post – slider de Divi en tant que salle de presse Facebook post – Slider

Le curseur post est une solution élégante pour présenter une variété de contenu au lecteur. Les messages mis en évidence peuvent être organisés de différentes façons, de la catégorie à aujourd’hui. Dans le projet d’aujourd’hui, regardons un exemple de la page de blog de la salle de presse Facebook qui montre une catégorie de messages appelée \
Numéro un. Après Concept et inspiration Comme nous l’avons mentionné précédemment, les modèles de style de défilement des messages d’aujourd’hui proviennent de la salle de presse Facebook. C’est un blog de nouvelles, comme vous l’avez probablement deviné, qui se concentre sur tout ce qui concerne Facebook. Alors que la plupart d’entre nous savent que Facebook est un géant des médias sociaux, un coup d’oeil rapide à ce blog vous aidera à élargir vos horizons. Avec un chiffre d’affaires de 8,8 milliards de dollars le trimestre dernier et 1,23 milliard d’utilisateurs actifs par jour, le curseur de billets de blog sur la page de la salle de presse Facebook fournit un modèle précieux pour les projets d’aujourd’hui.
Préparation d’éléments de conception pour préparer ce design, vous aurez besoin de quelques billets de blog avec des images de premier plan. Si vous n’êtes pas familier avec la configuration d’une image de premier plan pour un message, vous pouvez trouver ce paramètre sur la page d’édition du message dans le coin inférieur droit de la page. Si chaque image de premier plan est de 600 pixels x 400 pixels, la conception du curseur fonctionne mieux, mais la taille exacte n’est pas importante. Vous pouvez également ajouter du texte extrait pour chaque message dans votre boîte de réception
Euh… Pour atteindre cet emplacement, cliquez sur l’icône paramètres de déploiement au milieu du bas de la page, puis cliquez sur l’icône configuration de la page. Si vous utilisez un moniteur plus grand, je vous recommande de déplacer le mode sur le côté du curseur post afin que vous puissiez voir ce que chaque bit de code fait lorsque vous ajoutez du Code. Cela vous aidera à mieux comprendre le CSS utilisé pour définir le style du module. Tout d’abord, nous allons traiter la taille et l’emplacement de l’image de fond (actuellement cachée derrière la couverture blanche), ainsi que le texte du curseur et l’emplacement de la couverture en ajoutant les CSS suivants à la zone de texte CSS personnalisée # FB post Slider. Et \ u pb \ u post \ u Slider 0. Et \ \ u pb \ \ u slide {
Taille du fond: 70%;
Position de fond: coin supérieur droit;
Remplissage à gauche: 0;
Débordement: visible! Important
}
FB post Slider. Et _ pb Slider with overlay. Et _ pb slide overlay Container {
Largeur: 30%;
Largeur minimale: 300px;
} Maintenant, nous allons travailler sur les métamessages cachés (à l’exception de la date) et déplacer la position de la date au – dessus du titre. Pour ce faire, ajoutez le code suivant à votre entrée de texte CSS personnalisée sous le Code que vous avez entré précédemment FB post Slider. Et _ pb slide content. Métadonnées post {
Hauteur: 0px;
Débordement: caché
}
FB post Slider. Et _ pb slide content. Publier des métadonnées. Publié {
Position: absolue;
En haut: 32px;
Gauche: 35px;
Couleur: # 898f9c;
Taille de la police: 16px
} Nous l’avons presque fait, à quelques petites exceptions près. Lorsque vous passez le curseur sur notre module post – curseur, vous remarquerez que le module affiche à la fois la flèche précédente et la flèche suivante. Seule la flèche suivante apparaît sur le curseur de la salle de presse Facebook. Pour ce faire, vous pouvez facilement ajouter les CSS suivants à votre entrée de texte CSS personnalisée sous le Code que vous avez entré précédemment FB post Slider. Et pb flèche vers le Haut {
Affichage: aucun
DOB Time