Point culminant du plugin Divi : Curseur de témoignages DP

Les témoignages sont l'un des éléments les plus importants d'un site Web d'entreprise. Il existe plusieurs façons de créer des témoignages élégants avec Divi, notamment le module de témoignage, le module de présentation, des combinaisons de texte et d'images, etc. Une autre option consiste à utiliser un plugin tiers qui fournit une gestion des témoignages et des mises en page intégrées, telles que DP Testimonials Slider.

DP Testimonials Slider crée un nouveau type de publication personnalisé appelé jvt_testimonials. Il vous permet de créer vos témoignages dans un éditeur, puis fournit trois modules pour afficher ces témoignages. Vous pouvez choisir d'afficher tous les témoignages, de limiter le nombre affiché et d'afficher des catégories spécifiques. Chacun des modules comprend plusieurs mises en page parmi lesquelles choisir et vous pouvez les styliser.

Jetons un œil au plugin.

Témoignages de DP

Un nouvel élément de menu est ajouté au tableau de bord appelé Témoignages . En cliquant dessus, vous affichez la liste des témoignages que vous avez créés.

Sélectionnez Ajouter des témoignages et vous verrez l'éditeur dans lequel vous pouvez créer le témoignage. Il comprend du contenu, des catégories, des images et des témoignages. C'est l'éditeur que vous obtenez, que vous utilisiez Gutenberg ou l'éditeur classique.

Les catégories de témoignage fonctionnent exactement comme les catégories de publication. Ici, vous pouvez les créer et les modifier.

Modules Curseur Témoignages DP

Trois modules sont ajoutés au Divi Builder :

Vue de la grille des témoignages DP

Le DP Testimonial Grid View comprend des paramètres pour choisir la mise en page parmi 3 options, définir le nombre de témoignages qui affichent, afficher et styliser l'icône de citation, afficher l'image, afficher le lien de citation, choisir une catégorie, ajuster la couleur de pagination, le lien , etc.

Il comprend également les paramètres standard de conception et avancés. CSS vous permet de cibler le nom, le nom de l'entreprise et la description. Chacun des modules comprend ces paramètres.

Affichage de la liste des témoignages DP

La vue en liste des témoignages DP comprend 2 mises en page et ajoute une option Trier par , vous permettant de classer par âge du témoignage, titre ou au hasard.

Curseur de témoignage DP

Le curseur de témoignage DP comprend 56 mises en page et ajoute des commandes de curseur. Il comprend l'ordre par, la lecture automatique, la vitesse, la pagination, l'arrêt du glissement au survol de la souris et la limite de contenu d'affichage.

Exemples de vues de grille de témoignages DP

Ceci est la mise en page 1 montrant 3 témoignages. Il crée des images encerclées et affiche chaque témoignage dans une carte avec un effet d'ombre. J'ai laissé tout le reste à leurs paramètres par défaut.

Dans cet exemple, je travaille sur la mise en page 2. Elle ajoute un arrière-plan avec un dégradé. J'ai laissé cette valeur par défaut et j'ai ajusté les couleurs, les tailles et les poids du texte, ainsi que la couleur de l'icône. Je l'ai également configuré pour afficher les témoignages dans un ordre aléatoire.

Dans la vue publiée, les images sont circulaires et elles chevauchent la boîte qui contient le témoignage. Les images tournent lorsque vous les survolez, comme vous pouvez le voir ici.

Exemples d'affichage de liste de témoignages DP

Il s'agit de la disposition 1 pour la vue en liste . J'ai tout laissé à leurs paramètres par défaut.

La mise en page 2 réduit la taille des images et ajoute un élégant design de boîte avec deux coins circulaires. Il montre un effet d'ombre au survol.

Exemples de curseurs de témoignages DP

Pour le slider, j'ai dû utiliser le Classic Divi Builder. Contrairement aux deux autres modules, ce module n'apparaît pas lors de l'utilisation du New Divi Builder ou du Visual Builder. Il a 54 mises en page. Au lieu de les examiner tous, nous en examinerons quelques-uns.

Il s'agit de la mise en page 1. Elle crée des images encerclées et n'inclut pas la navigation pour les diapositives. Vous pouvez ajuster les couleurs des puces.

Il s'agit de la mise en page 2. J'ai ajouté l'ombre de la boîte pour qu'elle se démarque de l'arrière-plan et j'ai limité le texte à 50 caractères. Le style est la valeur par défaut.

Il s'agit de la mise en page 3. Elle supprime l'image. J'ai inclus l'ombre de la boîte et la limite de caractères de l'exemple précédent.

Il s'agit de la mise en page 4 utilisant ses paramètres par défaut. Je vais voir ce que je peux faire avec le style.

Lorsque vous choisissez une mise en page, les options de style de cette mise en page s'affichent dans les paramètres de couleur. Vous pouvez choisir une mise en page différente, ajuster ses paramètres et revenir à n'importe quelle mise en page et ses paramètres sont toujours là.

J'ai ajouté un fond pour que les couleurs ressortent un peu plus.

Il s'agit de la mise en page 5. J'ai ajouté un arrière-plan légèrement gris à la section et le curseur prend cet arrière-plan.

Il s'agit de la mise en page 6. Elle montre deux témoignages par diapositive.

Ceci est la mise en page 7. Je montre le texte de témoignage complet. J'aime l'image qui chevauche la boîte de témoignage.

C'est la mise en page 8. J'aime ce design.

Il s'agit de la mise en page 9. Elle est similaire à 8 dans sa mise en page, mais elle a ses propres files d'attente de conception.

Il s'agit de la mise en page 10. Elle crée un joli cadre autour de l'auteur et ajoute deux ensembles de guillemets.

Pour cet ensemble, j'utilise une disposition à deux colonnes pour afficher deux modules. Celle de gauche est la mise en page 11 et celle de droite est la mise en page 12. La mise en page 11 ajoute une navigation de style standard.

Il s'agit de la mise en page 14. Elle comprend également les boutons de navigation de publication.

Voici une autre disposition à deux colonnes avec la disposition 53 à gauche et la disposition 54 à droite. La mise en page 54 a une animation intéressante pour le curseur - la diapositive se rétrécit, se déplace rapidement sur le côté tandis qu'une autre se met en place, et la nouvelle diapositive s'agrandit pour remplir l'espace.

Il s'agit de la mise en page 55. Elle ajoute un style de coin et crée une bannière pour le nom. J'aime l'utilisation de la couleur. Celui-ci comprend la même animation que la mise en page 54.

Il s'agit de la mise en page 56. Elle supprime les images et crée une jolie boîte avec une bannière pour les noms.

Intégration des formulaires Caldera

Le site de l'éditeur comprend un modèle pour Caldera Forms pour créer un formulaire de soumission de témoignage. Il est inclus dans la documentation téléchargeable et contient des instructions pour l'utiliser.

En utilisant ce formulaire, n'importe qui peut soumettre un témoignage via le formulaire et il est enregistré en tant que brouillon pour que vous puissiez l'examiner. Il envoie également un e-mail à l'administrateur avec toutes les informations.

Licence et documentation

Le curseur de témoignages de DP est disponible sur le site Web du développeur. Trois licences sont disponibles :

• 1 emplacement – ​​30 $
• 5 emplacements – 40 $
• Sites illimités – 50 $

La documentation est fournie sous forme de fichier téléchargeable sur la page de vente du plugin. Il comprend une procédure pas à pas pour utiliser le plugin, des instructions pour l'utiliser avec Caldera Forms et le modèle Caldera Forms.

Mettre fin aux pensées

DP Témoignages Slider crée des témoignages élégants. La création de témoignages et l'utilisation des trois modules sont intuitives. Les modules de grille et de vue de liste fonctionnaient très bien dans le nouvel éditeur backend. Pour le module slider, j'ai dû utiliser le constructeur classique. Les trois plugins fonctionnent très bien dans le constructeur classique, donc si vous y avez accès, c'est ce que je recommande jusqu'à ce que la fonctionnalité frontale soit ajoutée au module de curseur.

Même l'utilisation du modèle Caldera Forms était pratiquement sans effort. Je viens d'importer le fichier JSON et cela a fonctionné du premier coup.

Les seuls problèmes que j'avais étaient d'obtenir un arrière-plan à afficher dans les modules. Les arrière-plans des sections et des lignes affichés avec les témoignages sans problème. De plus, il n'était pas clair où les liens sociaux seraient utilisés dans les témoignages. Ils n'apparaissent pas non plus dans les démos sur le site Web de l'éditeur.

Je suis impressionné par le nombre de mises en page du module de curseur. J'aime aussi leurs animations. Beaucoup glissent sur le côté, mais il y a beaucoup d'autres animations glissantes, y compris de haut en bas, rétrécissement, croissance, etc. Une prochaine mise à jour ajoutera un widget et un shortcode.

Si vous souhaitez gérer vos témoignages et les afficher avec un module, DP Testimonials Slider vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé le curseur de témoignages DP ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via Blan-k / shutterstock.com