Point culminant du plugin Divi – Extras du blog Divi

Divi comprend un module de blog pour afficher vos articles en pleine largeur ou en grille. C'est un bon module et fait le travail. Et si vous vouliez des mises en page et des fonctionnalités différentes ? Cela peut être fait avec CSS, mais un plugin tiers appelé Divi Blog Extras rend la tâche beaucoup plus facile.

Divi Blog Extras est un plugin tiers de Divi Extended qui ajoute un nouveau module au Divi Builder avec plusieurs nouvelles fonctionnalités pour afficher vos articles de blog. Il comprend six modèles de mise en page différents et ajoute une fonction de chargement AJAX avec un bouton Charger plus. Les messages se chargent au fur et à mesure que vous faites défiler et le chargement est rapide. Vous pouvez modifier le texte des boutons Lire plus et Charger plus.

Dans ce point culminant du plugin, nous allons jeter un œil à Divi Blog Extras et avoir quelques idées de ce qui peut être fait avec ce plugin. Les images de ces exemples ont été prises sur Unsplash.com.

Installation et paramètres des extras du blog Divi

Téléchargez et activez normalement. Un nouveau module nommé Divi Blog Extras sera alors disponible dans le Divi Builder. Pour l'utiliser, déposez-le simplement dans une rangée comme n'importe quel module. Étant donné que les options sont les mêmes que les modules Divi Builder standard, l'utilisation de ce module est intuitive.

Les paramètres de contenu incluent les options familières et proposent six choix de mise en page, une longueur d'extrait, des couleurs de catégorie, charger plus de texte de bouton, une superposition d'image en vedette, lire plus de texte de bouton et des options de couleur de texte. Les paramètres de conception incluent l'en-tête, la méta, le corps du texte et le style des bordures. La disposition Block Extended ajoute la position de l'image et Classic ajoute des icônes sociales. Regardons de plus près chacune des mises en page.

Grille étendue

La mise en page par défaut, Grid Extended, affiche les articles de blog avec des images et du texte en alternance. Les images s'éclaircissent au survol. Les noms de catégorie sont placés dans une boîte. en mode réactif, les images sont placées au-dessus.

Dans cet exemple, j'ai ajouté une superposition de survol, une icône de survol, modifié le texte en savoir plus, limité l'extrait à 100 caractères et modifié le texte de la catégorie et les couleurs d'arrière-plan. L'animation de survol s'affiche lorsque vous survolez n'importe quelle partie de la publication.

Boîte étendue

Box Extended place l'extrait dans un cadre qui chevauche l'image et supprime le cadre autour du nom de la catégorie. L'image de l'auteur est ajoutée à la section méta. Les images et le texte alternent. C'est l'une des mises en page de blog les plus élégantes.

Dans cet exemple, j'ai modifié la police de la catégorie et les couleurs d'arrière-plan, limité la longueur de l'extrait à 150 caractères et changé la police en bleu et modifié le texte du bouton Lire la suite. Le survol par défaut éclaircit l'image comme dans l'image du haut ci-dessus.

Pleine largeur

Pleine largeur place les images à gauche et l'extrait à droite, en ajoutant une date stylisée à l'extrême gauche. Chaque poste est séparé par une ligne. Le nom de la catégorie est placé dans meta.

Cet exemple désactive la date et les métadonnées. Le texte utilise des couleurs personnalisées. J'ai modifié le texte du bouton Lire la suite et charger plus de texte. L'extrait est limité à 200 caractères.

Toutes les mises en page sont responsives. Voici un aperçu du look réactif de Full Width. Cela montre deux modules côte à côte dans une rangée de 2 colonnes.

Bloc étendu

Block Extended est une grille de blog qui ajoute le nom de la catégorie sur l'image et la méta au bas de la carte. L'image s'agrandit lorsque vous survolez n'importe quelle partie de la carte. J'aime ce type de micro-interaction car il montre que la carte est cliquable.

Block Extended a trois options pour afficher les images. Cet exemple place l'image en vedette en arrière-plan avec le texte en superposition.

Cet exemple alterne l'image d'arrière-plan entre les deux premiers choix.

Arrière-plan pleine largeur

L'arrière-plan pleine largeur affiche une version recadrée de l'image en pleine largeur et place l'extrait avec méta dans une superposition sur l'image. Le placement de l'extrait alterne. Meta est séparé de l'extrait par une ligne.

Cet exemple utilise une superposition sombre sur l'image pour montrer que la superposition de l'extrait n'utilise pas la même superposition au survol. L'arrière-plan de la section est rouge pour cet exemple. Remarquez que le rouge apparaît au survol. J'ai également ajouté mon propre texte de bouton Lire plus et une bordure de 2 pixels.

Classique

La mise en page classique affiche les articles de blog avec des images en taille réelle et des extraits en pleine largeur sous les images. La catégorie et la date sont placées au-dessus du titre. Le titre comprend un séparateur de ligne court pour le distinguer de l'image. Sous l'extrait se trouve le nom de l'auteur et le nombre de commentaires séparés par une barre. Un séparateur de ligne plus fin et plus large sépare les poteaux les uns des autres.

Cette mise en page a une option pour afficher des icônes sociales. Cliquer sur Charger plus (ou comme je l'ai étiqueté - Voir plus d'articles) affiche le prochain ensemble de messages, qui est égal au nombre de messages que j'ai sélectionné pour afficher. Dans cet exemple, j'affiche deux messages. Charger plus charge les 2 prochains messages.

Créer une mise en page unique avec les extras du blog Divi

Plusieurs modules peuvent être utilisés ensemble pour créer des mises en page de magazines. Cette disposition simple comprend quatre modules affichant la disposition Gird Extended. Chaque module affiche différentes catégories. Les deux au milieu affichent deux messages chacun.

Cela crée une mise en page de magazine avec différentes catégories pour les différentes sections. Cet exemple montre à quoi ressemble la grille étendue comme réactive.

Il s'agit de la même disposition Divi Builder mais utilise l'arrière-plan pleine largeur. Les superpositions couvrent presque complètement les images en mode réactif.

Cet exemple utilise la disposition classique pour le module supérieur et la grille étendue pour les deux modules suivants. Chacun des modules affiche différentes catégories et a son propre style pour le texte de la catégorie. Le module supérieur n'affiche pas d'extrait.

Cela crée une mise en page de magazine intéressante. J'ai également défini les lignes pour qu'elles s'affichent en pleine largeur. Vous pouvez mélanger et assortir les mises en page pour obtenir un design unique. J'ai créé les mises en page avec différentes catégories pour chaque module. Dans une future mise à jour, le module aura une fonction de décalage afin que vous puissiez utiliser plusieurs modules dans la même catégorie.

Licence

Un seul site coûte 15 $. La licence étendue coûte 30 $ et peut être utilisée sur un nombre illimité de sites pour vous et vos clients. Il comprend des mises à jour à vie.

Ce plugin ne fonctionne pas avec Extra.

• Vous pouvez acheter ce plugin sur le site Web de Divi Extended.

Dernières pensées

Divi Blog Extras ajoute de jolies fonctionnalités de style et de conception pour donner du peps à votre module de blog. Il ajoute également la possibilité de styliser les arrière-plans et le texte des catégories. Il utilise AJAX pour le chargement et comprend un nouveau bouton de chargement. Vous pouvez même ajouter votre propre texte pour charger plus et lire plus de boutons. Chacune de ces conceptions est idéale pour donner à votre blog un look unique par rapport au blog standard. Si vous souhaitez une conception de blog qui va au-delà du module de blog standard Divi Builder, Divi Blog Extras pourrait être le module que vous recherchez.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Blog Extras ? Faites-nous part de votre expérience dans les commentaires ci-dessous.

Image en vedette via pulsar011 / shutterstock.com