Point culminant du plugin Divi : Portfolio filtrable DTS Grid Pro

Le module de portfolio filtrable de Divi vous permet de créer un portfolio en plein écran ou dans une grille. Et si vous vouliez un look différent qui ajoute un bouton et des choix pour 3 ou 4 colonnes dans la grille ? C'est exactement ce que fait un plugin tiers appelé DTS Filterable Portfolio Grid Pro.

DTS Filterable Portfolio Grid Pro ajoute un nouveau module au Divi Builder. Le plugin donne un nouveau look à votre portefeuille et propose des options pour 3 ou 4 colonnes dans une grille. Il affiche les types de publication de projet. Il comprend un texte de bouton personnalisé et des options avancées personnalisées.

Le plugin est disponible sur le site Web du développeur.

Dans ce point culminant du plugin, nous examinerons DTS Filterable Portfolio Grid Pro et verrons ce qu'il peut faire. Les images sont prises sur Unsplash.com.

Installation de Portfolio Grid Pro filtrable DTS

Téléchargez et activez le plugin comme d'habitude. Une fois le plug-in activé, accédez à Paramètres dans le tableau de bord et sélectionnez DTS Filterable Portfolio Grid Pro Activation . Entrez votre clé API et votre e-mail et enregistrez les modifications.

Paramètres du module

Le plugin ajoute un nouveau module au Divi Builder. C'est bleu, donc c'est difficile à manquer.

Les paramètres de contenu incluent le nombre de publications, la sélection de catégories, l'affichage du titre, les catégories, la pagination, l'arrière-plan et le texte du bouton personnalisé.

L'onglet Conception comprend des paramètres pour la mise en page, les couleurs, les polices, les icônes, les superpositions, les bordures et l'animation.

Exemples – Grille

Les paramètres par défaut utilisent une grille à 3 colonnes. Vous pouvez voir l'animation de survol dans la tuile centrale. Les tuiles comprennent l'image avec la section titre et un bouton placé au centre. Le bas montre la catégorie. Les tuiles affichent une ombre qui s'éloigne au survol. Comme vous pouvez le deviner, chacun de ces éléments est personnalisable.

Dans cet exemple, j'ai modifié la grille en 4 colonnes et ajusté la couleur d'arrière-plan du bouton, la couleur de survol de l'arrière-plan du bouton et la couleur de survol de la police du bouton. La disposition à quatre colonnes modifie les tailles d'image pour qu'elles correspondent.

Dans celui-ci, j'ai réduit le rayon du bouton, augmenté la taille de la police des boutons, modifié l'icône de survol et sa couleur, et changé la couleur de superposition du survol. Tous ces réglages sont simples et intuitifs.

Dans cet exemple, j'ai pris le rayon de la bordure à 0 pour créer des coins carrés pour le bouton. J'ai augmenté les tailles de police pour le texte du bouton, le texte du titre et modifié les styles de police. J'ai également rendu la superposition de survol noire avec suffisamment d'opacité pour que l'image soit visible et j'ai modifié l'icône de survol.

Celui-ci diminue la hauteur de ligne pour le titre. J'ai également assombri la couleur de la police et augmenté l'espacement des lettres. J'ai remis la police de catégorie par défaut et l'ai mise en italique. Le rayon du bouton est défini sur 100 et j'ai ajouté mon propre texte de bouton. J'ai également changé la couleur de superposition et sélectionné une icône différente et changé sa couleur en blanc. Cet exemple utilise également une bordure, qui est définie sur rouge et 2 pixels de large. Les options de bordure incluent la couleur, la largeur et le style.

Le module a une option de couleur de texte pour la lumière et l'obscurité, au cas où vous utilisez un arrière-plan sombre derrière le titre, mais actuellement il n'y a pas d'option pour changer l'arrière-plan derrière le titre. Je soupçonne que c'est une fonctionnalité à venir.

Les paramètres d'arrière-plan (la couleur standard, le dégradé, l'image et la vidéo) s'appliquent derrière le module. Les cartes touchent le bord de la couleur d'arrière-plan et il n'y a aucun réglage de remplissage dans le module.

Cela rendrait l'arrière-plan gênant, mais il existe quelques solutions simples. Vous pouvez ajouter un remplissage à la section ou à la ligne, comme je l'ai fait dans toutes les images de cet article, ou vous pouvez utiliser CSS pour ajouter du remplissage au module.

Voici le CSS que j'ai ajouté à l'onglet Avancé dans la section Élément principal du module. Il indique simplement à Divi d'ajouter un rembourrage aux 4 emplacements. Les valeurs s'appliquent dans le même ordre que les champs de remplissage des lignes et des modules : haut, droite, bas, gauche. Cela signifie que j'ai donné au rembourrage supérieur une valeur de 40, le rembourrage droit une valeur de 30, le rembourrage inférieur est 20 et le rembourrage gauche est 30.

Le résultat est exactement ce que je voulais – différents niveaux de rembourrage sur les quatre côtés. Cela rend la fonctionnalité d'arrière-plan plus utilisable et est facile à mettre en œuvre.

Exemples – Filtre

Puisqu'il s'agit d'un portefeuille filtrable, il va de soi que le filtre serait également personnalisable. Comme prévu, il y a des ajustements pour le style de police, la taille, l'alignement, la couleur, l'espacement et la hauteur. Jusqu'à présent, nous avons vu le filtre avec ses paramètres par défaut.

Cet exemple utilise la police Amatic SC en rouge. J'ai augmenté la taille de la police mais j'ai laissé l'espacement et la hauteur à leurs valeurs par défaut.

Celui-ci utilise une police appelée Bevan. J'utilise un rouge plus foncé. La taille de la police est la même que la police précédente.

Celui-ci utilise Arvo. J'ai réduit la taille de la police et sélectionné une couleur gris foncé.

Animations

Les animations de Divi sont également disponibles dans les paramètres du module. Choisissez aucun, fondu, glisser, rebondir, zoomer, retourner, plier et rouler. Vous pouvez également ajuster l'animation pour qu'elle ne se répète qu'une seule fois ou en boucle, choisissez la direction, la durée, le délai, l'intensité, l'opacité de départ et la courbe de vitesse.

Cet exemple utilise Roll. J'ai laissé tout le reste par défaut.

Utilisation de la grille de portfolio dans une mise en page

DTS Filterable Portfolio Grid Pro a fière allure dans une mise en page. Voici un exemple de mise en page de photographie avec blog, portfolio et formulaire de contact. J'utilise les paramètres par défaut pour la grille de portefeuille et cela se mélange bien.

Utilisation de la grille de portefeuille avec extra

DTS Filterable Portfolio Grid Pro est également compatible avec Extra. Voici un aperçu d'une mise en page similaire à la mise en page Divi ci-dessus. Cela utilise également les paramètres par défaut. J'utilise une grille à 3 colonnes avec des tailles d'image incompatibles. C'est une solution facile - utilisez simplement des images de la même taille.

Licence

Vous avez le choix entre deux options de licence : site unique et étendue. Les deux incluent des mises à jour à vie et 6 mois de support.

Dernières pensées

DTS Filterable Portfolio Grid Pro est facile à utiliser et offre de nombreux styles élégants pour faire ressortir votre portefeuille. Il y a quelques fonctionnalités que j'aimerais voir ajoutées, telles que les couleurs de titre et de méta d'arrière-plan, mais elle fournit toujours suffisamment de fonctionnalités qu'il est facile de recommander. Si vous êtes intéressé par un module de grille d'arrière-plan filtrable avec un style au-delà du module Divi standard, DTS Filterable Portfolio Grid Pro vaut le détour.

Nous voulons de vos nouvelles! Avez-vous essayé DTS Filterable Portfolio Grid Pro ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via AF studio / shutterstock.com