Point culminant du plugin Divi – Grille de portefeuille Divi

Divi comprend un module de portfolio qui affiche votre portfolio en pleine largeur ou une disposition en grille et comprend toutes les fonctions de base que vous attendez d'un module Divi – arrière-plans, polices, couleurs, bordures, superpositions, icônes, etc. Et si vous voulez un mise en page différente, telle qu'une conception à plusieurs colonnes, ou de nouvelles fonctionnalités telles qu'un bouton personnalisable ? Vous pourriez être intéressé par un plugin tiers appelé Divi Portfolio Grid.

Divi Portfolio Grid est un plugin tiers de Divi Theme Store. Il vous offre non seulement les fonctionnalités standard du module Divi, mais fournit également une disposition en 2, 3 et 4 colonnes avec de nouvelles fonctionnalités de style afin que vous puissiez créer des portefeuilles uniques. Il ajoute également un bouton avec des effets de texte et de survol pour changer les couleurs.

Dans cet aperçu, nous examinerons Divi Portfolio Grid à l'aide d'un exemple de portfolio que j'ai créé. Toutes les images utilisées dans les portfolios et les arrière-plans ont été prises sur Unsplash.com.

Installation du plugin Divi Portfolio Grid

Avant de pouvoir télécharger le plugin, vous devez décompresser le fichier de téléchargement. Dans le fichier zippé, vous trouverez le fichier de plugin zippé ainsi qu'un guide rapide PDF. Le guide rapide est un document qui vous guide tout au long de l'installation et vous donne un aperçu de l'utilisation du module. Téléchargez le fichier de plug-in compressé qui se trouve dans le fichier de téléchargement, installez-le et activez-le normalement.

Fonctionnalités du module de portefeuille personnalisé

Le plugin ajoute un nouveau module au Divi Builder appelé Custom Portfolio Module. Le module fonctionne comme n'importe quel autre module Divi Builder à partir du backend – vous pouvez donc le faire glisser et le déposer dans n'importe quelle ligne et ajuster le contenu, la conception et les paramètres avancés.

Personnalisez la couleur d'arrière-plan, choisissez une image d'arrière-plan, sélectionnez une mise en page, créez un texte de bouton personnalisé, choisissez le nombre de publications à afficher, sélectionnez la catégorie, affichez la méta, choisissez les couleurs, etc.

Toutes les caractéristiques de conception standard sont également présentes. Ajustez les couleurs, les polices, les boutons, les icônes, les superpositions, etc.

Exemples – Utilisation du module Divi Custom Portfolio

Pour mes exemples, j'ai créé une page, ajouté un arrière-plan pour lui donner une touche visuelle, fait la pleine largeur de la ligne et ajouté le module Portfolio Grid. Avant de l'examiner, jetons un coup d'œil rapide au module de portefeuille standard de Divi Building à titre de comparaison.

Module de portefeuille Divi standard

Voici un aperçu de la page utilisant le module portfolio standard de Divi. Je l'ai défini sur la disposition en grille et défini la couleur de la police sur la lumière. Toutes les autres fonctionnalités sont définies par défaut. Il comprend également des superpositions de survol avec des icônes (en mode grille), des bordures, un arrière-plan, une méta et un style de police.

L'image vedette du projet est affichée avec le titre et la catégorie du projet sous l'image. En cliquant sur le titre, vous accédez au projet. Cliquer sur le titre de la catégorie ouvre une page de catégorie pour cette catégorie. Il comprend également des effets de survol avec des options de couleur et d'icône de superposition lors de l'utilisation de la disposition en grille.

Exemples de modules de portefeuille personnalisés

Il comprend trois mises en page au choix, vous pouvez donc définir vos portefeuilles en 2, 3 ou 4 colonnes. Examinons chacune des mises en page avec diverses personnalisations et fonctionnalités.

Voici un aperçu de la disposition en 2 colonnes. Il affiche l'image vedette du projet, inclut le titre et la catégorie cliquables dans une barre sous l'image et place un bouton avec du texte sur l'image et la barre. Ce sont les caractéristiques et les couleurs par défaut.

L'image comprend les mêmes effets de survol que le module portfolio standard, mais le bouton comprend également des effets de survol. Vous pouvez voir dans cet exemple que les paramètres par défaut du bouton changent le fond violet en rouge.

Vous pouvez également voir un bel effet de survol qui crée une ombre derrière la carte sur laquelle vous survolez. Le titre s'affiche sous forme d'info-bulle. La superposition de survol est également une fonctionnalité par défaut, elle n'a donc pas besoin d'être activée. La transition de l'effet de survol affiche une ombre plus épaisse jusqu'à ce que la transition soit terminée.

Voici un aperçu de la disposition en 3 colonnes. Dans cet exemple, j'ai changé la couleur de l'arrière-plan et du texte du bouton, et modifié le texte pour afficher mon propre message.

Le bouton inclut également l'effet de survol de l'ombre. Dans cet exemple, je survole uniquement le bouton, donc l'image n'affiche pas son effet de survol. L'arrière-plan et le texte du bouton ont changé de couleur.

Cet exemple utilise la disposition à 4 colonnes. J'ai défini le rayon du bouton sur 0 et modifié tous les styles de police.

L'effet de survol place une superposition bleue avec une opacité de 47% (désolé pour le nombre impair mais c'est là que ma souris s'est arrêtée donc je l'ai suivi), et une icône de case à cocher en rouge. Le bouton passe du gris foncé avec un texte de tabulation clair au blanc cassé avec du texte gris foncé.

Dans cet exemple, j'ai ajouté un arrière-plan qui apparaît derrière le titre et la méta. J'ai ajouté une bordure rouge d'une largeur de 2 pixels (donc c'est facile à voir dans l'image). J'ai ajusté toutes les polices et couleurs, et changé la couleur d'arrière-plan du bouton, la couleur du survol et la couleur de l'icône. J'ai laissé la couleur de superposition de survol par défaut pour afficher le contraste entre la zone d'image en vedette et l'image d'arrière-plan derrière le titre et la méta-section.

Le bouton ne s'affiche que si vous affichez le titre. Cet exemple affiche uniquement la catégorie.

Cet exemple affiche uniquement le titre du projet. Puisque le titre s'affiche, le bouton s'affiche également.

Dans cet exemple, j'ai placé une superposition rouge avec une opacité de 66. J'ai modifié l'icône de survol et personnalisé le bouton et ses effets de survol. Une image de fond (d'un ciel gris) est placée derrière le titre. Celui-ci utilise différentes catégories de projets. Le rayon du bouton est défini sur 10.

Divi Portfolio Grid – Responsive

Le plugin est responsive. Voici la disposition en 3 colonnes sur un iPad (émulée dans les outils de développement de Chrome) en mode portrait. Pour en savoir plus sur les outils de développement Google Chrome, consultez l'article Pourquoi vous devriez commencer à utiliser les outils de développement Chrome dès maintenant.

C'est la même mise en page en mode paysage.

C'est la même disposition sur un Galaxy S5 en mode portrait.

Et voici la mise en page à l'aide d'un Galaxy S5 en mode paysage.

Licence, mises à jour et documentation

La licence couvre une utilisation illimitée et comprend des mises à jour à vie. La documentation est fournie dans le fichier PDF fourni dans le dossier zippé. C'est un document court et fournit une procédure pas à pas avec des images pour vous aider à démarrer. C'est un plugin facile à utiliser et j'ai trouvé que tout était intuitif. Si vous avez l'habitude d'utiliser des modules Divi, vous devriez vous sentir comme chez vous avec ce module.

Divi Portfolio Grid peut être acheté dans le Divi Theme Store.

Dernières pensées

Divi Portfolio Grid est facile à utiliser et offre suffisamment de fonctionnalités supplémentaires par rapport au module de portefeuille Divi standard que de nombreux utilisateurs le trouveront essentiel. Il comprend des dispositions à 2, 3 et 4 colonnes, ajoute un bouton avec des effets de survol, des superpositions d'icônes et tous les styles de module que vous attendez, y compris des fonctionnalités CSS avancées pour que vous puissiez le personnaliser avec votre propre code. Si vous souhaitez un portefeuille avec des fonctionnalités au-delà du module de portefeuille Divi standard, Divi Portfolio Grid pourrait être le module dont vous avez besoin.

Nous aimerions vous entendre! Avez-vous essayé Divi Portfolio Grid ? Faites-nous part de votre expérience dans les commentaires ci-dessous.

Image en vedette via 2RAL / shutterstock.com