Comment créer un enregistreur automatique de billets de blog en utilisant le module Divi post scroller

ACK, et d’autres ressources, conseils et astuces Divi gratuits étonnants. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Importer une disposition dans la Bibliothèque Divi pour importer une disposition de section dans la Bibliothèque Divi, allez à la Bibliothèque Divi.
Cliquez sur le bouton importer. Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet importer, puis sélectionnez les fichiers téléchargés à partir de votre ordinateur. Il s’agira d’un fichier json dans le dossier appelé mise en page des billets de blog (Divi Library). Puis cliquez sur le bouton importer. Une fois terminé, la disposition de la section est disponible dans Divi Builder. Importer un modèle de titre dans Divi Theme Builder si vous voulez importer un modèle de journal et ajouter un marqueur de journal dans le titre, vous devez naviguer vers Divi > Theme Builder. Ensuite, utilisez l’icône portabilité dans le coin supérieur droit de la page pour importer le fichier json. Il s’agira d’un fichier dans le dossier appelé modèle de titre de billet de blog et résumé de billet (générateur de thème).
Commençons le tutoriel. Que devez – vous commencer? Pour commencer, vous devez faire ce qui suit: si ce n’est pas déjà fait, installez et activez le thème Divi. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Sélectionnez l’option créer à partir de zéro. Ensuite, vous aurez une toile vierge à concevoir dans Divi. Créer un marqueur de billet de blog dans Divi créer une ligne pour commencer, nous créons une ligne à une colonne dans la section. Ensuite, mettez à jour les paramètres de conception de ligne comme suit:
Largeur du fossé latéral: 1 remplissage
Ian comme arrière – plan de chaque diapositive. Cependant, pour les sauvegardes, assurez – vous d’ajouter les couleurs de fond suivantes: Couleur de fond: # eeeeee Sur l’onglet conception, mettre à jour la couverture de fond et les couleurs des flèches comme suit: utiliser la couverture de fond: s couleur de la couverture de fond: rgba (2482828248,0.9) couleur des flèches: # FFFFFF (bureau), # ef51f7 (vol stationnaire) Le texte du titre met ensuite à jour le style du texte du titre comme suit: police du titre: poids de la police du titre Poppins: alignement moyen du texte du titre: couleur du texte du titre à gauche: # 333333 couleur du texte du titre (curseur de la souris): # ef51f7 taille du texte du Titre: 16 Px (bureau), 14 pixels (téléphone mobile) hauteur de la ligne de titre: 40 pixels titre texte ombres: voir capture d’écran ombres couleur du texte: transparent Espacement nous avons besoin d’espace pour le formulaire de texte d’en – tête post – ticker afin de placer le curseur post à droite. Pour ce faire, mettez à jour ce qui suit: marges: 175 Px à gauche (bureau et tablette), 0 Px à gauche (téléphone) Remplir: 0px en haut, 0px en bas, 0px à gauche, 0px à droite Le curseur post a des options d’intégration pour ajouter une animation automatique. Cela nous donnera une fonctionnalité de code stock dont nous avons besoin pour voir les messages sans cliquer sur la flèche de défilement. Ajouter une animation automatique comme suit:
Animation automatique: vitesse d’animation automatique: 3500 augmentez ou diminuez la vitesse à volonté selon vos meilleures idées. Les classes CSS de style avancé et CSS personnalisé à ce stade, post Slider est principalement un post – ticker de travail. Mais nous pouvons ajouter des changements avancés pour nettoyer la conception. D’abord, ajoutez une classe CSS
La personnalisation est la suivante: CSS Class: et post – ticker pour s’assurer que le titre du billet reste sur une ligne à l’intérieur du curseur \/ ticker et que le débordement est masqué par une ellipse, ajoutez le CSS suivant au titre de la diapositive: padding bottom: 0px;
Blanc: nowrap;
Débordement: caché;
Débordement de texte: Ellipses;
Pour spécifier plusieurs boutons pour les flèches coulissantes, ajoutez les CSS suivants à la flèche coulissante: hauteur: 40px;
Largeur: 40 Px;
Hauteur de la ligne: 40 Px;
Taille de la police: 28px;
Alignement du texte: centré;
Bord supérieur: – 20px;
Contexte: # 333; Attachez un CSS avec un module de code pour positionner les flèches de défilement la fonction par défaut des flèches sur la diapositive n’est affichée que lorsque vous passez le curseur et que les flèches sont placées à droite et à gauche de la diapositive. Pour améliorer l’expérience utilisateur et le rendre plus comme un post – ticker, nous pouvons toujours afficher la flèche et la placer sur le côté droit du curseur. Pour ce faire, ajoutez un nouveau formulaire de code sous le curseur post. Ensuite, collez le CSS suivant et assurez – vous qu’il est emballé avec les marques de style nécessaires. Et postquoter. Et \ u pb \ u Slider: Hover. Et pb flèche vers le haut,
– Oui. Et postquoter. Et pb flèche vers le Haut {
Droite: 40px! Important
Transparence: 1! Important
Gauche: automatique! Important
}
– Oui. Et postquoter. Et \ u pb \ u Slider: Hover. Et pb Arrow Next,
– Oui. Et postquoter. Et pb Arrow next
Droite: 0px! Important
Transparence: 1! Important
}
– Oui. Et postquoter. Et \ \ u pb \ \ u slide {
Remplissage: 0 84px 0 3%! Important
} Le résultat final ici est le résultat final sur la page en direct. Notez comment post – ticker gère le débordement de texte de titre. Voici comment post – ticker est bien installé sur l’écran de votre téléphone. Ajouter un marqueur de billet au titre du modèle de billet de blog un cas évident d’utilisation de ce marqueur de billet est qu’il affiche le billet le plus récent sur le titre réel du modèle de billet de blog. Voici comment vous pouvez le faire. Enregistrer les lignes dans
Simplifie la conception du module Divi Slider et apporte quelques modifications personnalisées aux flèches de navigation. N’oubliez pas que vous pouvez toujours facilement changer de style en utilisant toutes les options intégrées dans le curseur post. J’espère que cela sera utile à tous vos blogueurs et développeurs web. J’ai hâte d’entendre vos commentaires. Bonjour!