Point culminant du plugin Divi – Module de blog personnalisé Divi

Le module de blog de Divi permet toutes sortes de personnalisations. Outre ses ajustements standard, tels que la mise en page, les styles de police, les bordures, les superpositions, le contenu, etc., vous pouvez l'ajuster encore plus avec CSS. Et si vous vouliez changer le look et ajouter des fonctionnalités sans avoir à coder les vôtres ? Un plugin tiers appelé Divi Custom Blog Module pourrait être ce dont vous avez besoin.

Le module de blog personnalisé Divi (maintenant appelé DTS Blog Module Pro) ajoute un nouveau module au Divi Builder qui fournit de nouveaux styles et fonctionnalités, notamment des balises de médias sociaux, des couleurs d'arrière-plan pour les méta et les catégories, etc. Il fonctionne à la fois dans les mises en page pleine largeur et en grille. Ajoutez votre propre CSS pour le personnaliser encore plus. Il ajoute 12 nouvelles options de personnalisation afin que vous puissiez ajuster les couleurs en temps réel. Il comprend également trois nouveaux widgets à placer dans vos barres latérales.

Dans cet article, nous examinons le plugin Divi Custom Blog Module et voyons ce qu'il peut faire. J'ai créé quelques exemples de billets de blog afin que nous puissions voir comment cela fonctionne. Les images des articles de blog proviennent d'Unsplash.com.

Installation et réglages

Téléchargez et activez le plugin comme n'importe quel plugin premium. Une fois activé, vous trouverez un nouvel élément de menu dans votre tableau de bord appelé Divi Custom Modules.

Ce menu vous permet de choisir les éléments supplémentaires qui peuvent être ajoutés aux extraits de blog.

Les options DCM vous permettent d'activer ou de désactiver les icônes de réseaux sociaux et d'e-mail qui s'affichent sur l'extrait de blog.

Options DCM – Méta personnalisée vous permet d'activer ou de désactiver les champs méta personnalisés pour l'auteur, la date et les commentaires.

J'ai inclus toutes ces options dans mes exemples.

Création d'une mise en page de blog

J'ai créé une page pour afficher mes exemples de billets de blog et placé le module. Notez qu'il existe désormais deux modules de blog – le module Divi d'origine (simplement appelé Blog) et un nouveau module appelé Custom – Blog. Sélectionnez Personnalisé - Blog.

Toutes les fonctionnalités de blog auxquelles vous êtes habitué sont ici, y compris la mise en page, le numéro de publication, les catégories, la méta, la pagination, le décalage, l'image en vedette, la superposition d'images, les styles de police, les bordures, les icônes, etc. Vous pouvez configurer la mise en page du blog et concevez-le de la même manière que le module de blog Divi standard avec le même niveau de contrôle.

Pour nous aider à voir les fonctionnalités ajoutées, je veux d'abord montrer le module de blog standard. J'ai sélectionné une disposition en grille et laissé tout le reste par défaut. Il comprend l'image en vedette, le nom de l'auteur, la date, la catégorie, le nombre de commentaires et un extrait de l'article. C'est propre et ça a l'air super.

Voici la mise en page du blog utilisant le module de blog personnalisé Divi avec les mêmes paramètres. Il déplace le nom de la catégorie dans le coin supérieur gauche, centre le nom de la publication et le place dans une zone de couleur, ajoute les boutons de partage social que j'ai sélectionnés dans le menu du tableau de bord et déplace les méta-informations sous l'extrait de publication.

Voici une vue rapprochée. Le survol des icônes sociales permute la couleur de l'icône et sa couleur d'arrière-plan - l'icône est donc maintenant blanche tandis que sa couleur d'arrière-plan est la couleur de la marque du réseau social. Dans cet exemple, je survole l'icône Google+. En cliquant sur le bouton, vous accédez à ce réseau social où vous pouvez partager l'article (comme n'importe quel bouton de partage social).

Voici la page d'accueil régulière (n'utilisant pas le Divi Builder) qui affiche uniquement les derniers articles. Il utilise la navigation verticale avec une image en arrière-plan, les publications WordPress standard et les widgets WordPress normaux dans la barre latérale. Je voulais montrer cela à titre de comparaison.

Voici un aperçu de la mise en page normale des articles WordPress avec les modules personnalisés Divi actifs. Même si cette page n'a pas été créée avec Divi Builder, elle affiche toujours les publications à l'aide du module de blog personnalisé Divi dans une mise en page pleine largeur avec le même contenu supplémentaire.

Les publications sont empilées verticalement avec l'image à gauche, le titre sans arrière-plan stylisé, les boutons de suivi social et l'extrait. La catégorie se trouve dans le coin supérieur gauche et les méta-informations en bas, tout comme l'utilisation du module.

Trois nouveaux widgets

Le plugin ajoute également trois nouveaux widgets :

DCM-About – nom, titre, position, image, description et réseaux sociaux.

Divichild Derniers messages – titre, nombre de messages, catégorie.

Publications populaires Divichild – titre, nombre de publications, catégorie.

Comme le module de blog personnalisé Divi, les widgets peuvent être stylisés avec le personnalisateur de thème.

Voici un aperçu des widgets lorsqu'ils sont placés sur la page d'accueil standard de WordPress. Les widgets sont entourés des couleurs du module. Le widget À propos utilise une conception de mise en page similaire à celle du module lorsqu'il est affiché dans une grille.

Personnalisateur de thème

Bien sûr, les polices et les couleurs peuvent être modifiées à votre guise et vous pouvez ajouter des superpositions d'icônes tout comme le module de blog standard. Nous pouvons faire encore plus de personnalisations en utilisant le personnalisateur de thème.

Une nouvelle personnalisation est ajoutée au personnalisateur de thème appelé Divi Custom Blog Layout. Ici, vous pouvez ajuster les couleurs des balises, des arrière-plans, des polices, des icônes et des liens pour le module et les widgets. Vous pouvez ajuster les widgets individuellement ou tous ensemble.

Dans cet exemple, j'ai ajusté les couleurs d'arrière-plan, d'icône et de police. Vous pouvez voir tous les ajustements en temps réel.

Voici un aperçu du module de blog en pleine largeur avec tous les ajustements que j'ai effectués dans le personnalisateur de thème. Celui-ci utilise la mise en page pleine largeur. Les ajustements incluent la couleur de la balise de catégorie, l'arrière-plan du module méta et les couleurs de la police, l'arrière-plan du titre de la publication, les couleurs de l'arrière-plan du widget et des icônes sociales, ainsi que la couleur du titre de tous les widgets.

Celui-ci utilise la disposition en grille. Les deux styles de cartes de blog ont fière allure.

Licence

La licence permet au plugin d'être utilisé sur des sites Web illimités pour vous et vos clients aussi longtemps que vous le souhaitez. Le module de blog personnalisé Divi est si facile à utiliser qu'il ne nécessite pas de documentation. Si vous pouvez utiliser un module Divi et le Personnalisateur de thème, vous pouvez utiliser ce plugin tiers.

• Ceci est un plugin premium. Suivez ce lien pour acheter : Module de blog personnalisé Divi

Dernières pensées

Tous les éléments supplémentaires donnent un nouveau look aux extraits de publication, mais ce n'est pas seulement visuel. Les ajouts sont vraiment utiles. Et bien sûr, vous pouvez ajuster les couleurs et les polices pour qu'elles correspondent parfaitement à votre image de marque ou à votre sujet.

J'aime particulièrement les boutons de partage social ajoutés à chaque publication et le widget À propos avec les boutons de suivi social. Les widgets Derniers articles et Articles populaires ajoutent encore plus d'éclat, vous permettant de faire correspondre le style ou de les styliser individuellement.

Le module de blog personnalisé Divi est simple, mais entre le module et les widgets, il ajoute un peu de personnalisation pour que n'importe quel blog ait fière allure. Si vous souhaitez ajouter de nouvelles fonctionnalités à votre page de blog ou à vos barres latérales, ce plugin vaut le détour.

Nous aimerions vous entendre! Avez-vous essayé le module de blog personnalisé Divi ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via hanss / shutterstock.com