Point culminant du plugin Divi – Owl Carousel Pro

Avez-vous déjà voulu afficher des publications, des projets, des types de publications personnalisés et des images dans un carrousel à l'aide de Divi Builder ? Les publications et les images sont généralement affichées dans un curseur, qui affiche une publication ou une image à la fois, mais que se passe-t-il si vous vouliez un véritable carrousel qui affiche plusieurs publications à la fois ? Vous pouvez le faire facilement avec un plugin appelé Owl Carousel Pro.

Owl Carousel Pro est un plugin tiers qui ajoute deux nouveaux modules au Divi Builder. Le premier affiche les types de publication tels que les projets, les publications et les types de publication personnalisés. Le second est un carrousel d'images rivalisant avec un éditeur visuel pour ajouter tout type de contenu que vous souhaitez.

Une version gratuite du plugin est disponible. Je regarde la version pro, qui ajoute plusieurs nouvelles fonctionnalités dont :

• types de publication personnalisés
• afficher les champs personnalisés
• requête personnalisée
• changer la taille de la vignette
• changer le nombre d'images affichées
• ouvrir l'image dans la lightbox

Les images des exemples sont tirées de Unsplash.com.

Installation de Owl Carousel Pro

Téléchargez et activez le plugin comme d'habitude. Vous verrez alors deux nouveaux modules dans le Divi Builder : DP Owl Carousel et DP Owl Image Carousel. Les modules sont colorés différemment des modules Divi standard pour les aider à se démarquer. C'est ma préférence pour les modules tiers car cela les rend plus faciles à trouver.

DP Hibou Carrousel

DP Owl Carousel affiche les publications, les projets et les types de publication personnalisés dans un carrousel. Il affichera vos 10 derniers messages ou des catégories ou balises que vous sélectionnez. Son onglet de contenu comprend des paramètres pour le contenu et les éléments. L'onglet de conception comprend le texte, le texte du titre de l'article, le méta-texte de l'article, le texte de l'extrait de l'article, le texte classé personnalisé, l'espacement, la flèche, les commandes et les vignettes.

L'onglet avancé contient les paramètres CSS attendus, mais ajoute également une action de clic, une animation (détermine le moment du défilement), un arrière-plan et une visibilité. Les couleurs d'arrière-plan des deux modules sont d'une seule couleur, il n'y a donc pas de dégradés ou d'images disponibles. Normalement, je ne chercherais pas dans l'onglet avancé à moins que je ne veuille utiliser CSS, donc j'aurais manqué ces paramètres car je m'attendais à ce qu'ils soient dans l'onglet contenu.

Vous pouvez créer une requête personnalisée (exemples donnés sur le site Web) ou vous pouvez utiliser les paramètres du module pour contrôler ce qui est affiché. Il comprend plusieurs paramètres pour contrôler l'affichage, tels que le nombre de publications, un numéro de décalage, le nom du type de publication personnalisé, les catégories, les balises à inclure et les balises à exclure. Il a ajouté automatiquement mes types de publication personnalisés.

Des requêtes personnalisées sont ajoutées à votre thème enfant dans le code PHP (apportez toujours des modifications PHP dans un thème enfant et non dans le thème parent afin de ne pas perdre vos modifications lors de la mise à jour du thème). Le site Web du développeur comprend quelques exemples.

Remarque : essayez toujours le code sur un site de test avant de l'ajouter à votre site en ligne.

Exemples de carrousel DP Owl

C'est le design standard (j'ai ajouté un arrière-plan pour l'aider à se démarquer). Il affiche mes 10 derniers messages dans toutes les catégories. J'ai inclus l'en-tête Divi et la méta de publication pour montrer à quoi cela ressemble dans la page. En cliquant sur l'une des images, vous accédez à la publication.

Celui-ci ajoute le titre, la catégorie et la date. Vous pouvez également afficher des champs personnalisés si vous les avez configurés.

Celui-ci montre le titre et l'extrait du message en utilisant les 270 caractères par défaut.

Dans celui-ci, j'ai défini l'extrait de message à 70 caractères.

Dans celui-ci, j'ai désactivé les flèches et les commandes. L'animation fonctionne toujours, mais les utilisateurs ne peuvent pas parcourir les diapositives.

Dans celui-ci, j'ai modifié les tailles et les couleurs de la police, rendu les flèches rouges, augmenté la taille des contrôles et les ai rendus violets, augmenté la taille des vignettes, réduit la marge à 0 et configuré pour afficher 3 images. La deuxième couleur pour les contrôles est une version plus foncée de la couleur que j'ai choisie. La deuxième couleur est fournie par le plugin.

Dans celui-ci, j'ai ajouté un arrière-plan dans le module lui-même et modifié la marge de l'élément pour que l'arrière-plan apparaisse entre les messages. J'ai également changé les couleurs de police et cette fois j'ai ajusté la hauteur et l'espacement des lignes. Il affiche 4 messages par écran et j'ai réduit la taille des vignettes. J'ai réglé les flèches sur grandes et les commandes sur petites.

Lorsque vous modifiez la taille de la vignette, elle s'ajustera uniquement au nombre de publications que vous diffusez. Donc, si vous voulez que les images soient plus grandes, vous devrez réduire manuellement le nombre de messages qui s'affichent.

Carrousel d'images de hibou DP

Le carrousel d'images DP Owl affiche des images dans un carrousel. Il vous permet d'ajouter des images et d'afficher les flèches et les commandes. Les paramètres de conception incluent le texte, le texte du titre de l'image, le texte du contenu de l'image, l'espacement, la flèche, les commandes et les vignettes. L'onglet avancé est le même que le module DP Owl Carousel.

Vous pouvez ajouter autant d'images que vous le souhaitez, les ouvrir dans une lightbox et l'utiliser pour utiliser une version copiée de l'image ou de l'image originale. J'ai volontairement choisi des images de différentes tailles pour voir comment cela fonctionne.

Les images s'affichent bien. J'aime que vous puissiez créer un lien vers une URL ou les ouvrir dans une lightbox. J'aimerais voir des superpositions ajoutées aux images car cela améliorerait encore l'expérience.

Exemples de carrousel d'images DP Owl

Voici à quoi ressemble le module sur la page en utilisant les paramètres par défaut. J'ai ajouté un arrière-plan dans la section pour l'aider à se démarquer.

Dans cet exemple, j'ai ajouté des titres et du texte aux images. J'ai également défini les flèches et les commandes sur des couleurs larges et modifiées pour chacun.

Celui-ci affiche 4 images. J'ai augmenté la taille de l'image et diminué la marge de l'élément de 8 à 4. Ensuite, j'ai ajusté les tailles et les couleurs des polices, des flèches et des contrôles. Les polices de titre ont un espacement accru.

Celui-ci utilise un fond sombre avec de nouvelles couleurs pour les polices, les contrôles et les flèches.

Voici à quoi ressemblent les images lorsque vous les ouvrez dans une lightbox. L'animation de défilement fonctionne toujours en arrière-plan.

Types de publication personnalisés

Dans le module Owl Carousel Pro, assurez-vous que la requête personnalisée est désactivée (cela n'est utilisé que si vous souhaitez créer vos propres filtres personnalisés au lieu de choisir des catégories dans la liste) et choisissez votre type de publication sous Nom du type de publication personnalisé. J'ai installé WooCommerce et j'ai maintenant automatiquement Product en option.

Chacune de mes catégories de produits est automatiquement ajoutée à la liste des catégories. Maintenant, je peux faire défiler vers le bas et sélectionner les produits que je veux afficher dans le carrousel.

Les produits s'afficheront, mais pour afficher les prix, je dois activer le champ personnalisé, choisir le champ à afficher et ajouter une étiquette pour afficher le symbole de devise souhaité. Faites défiler vers le bas et activez Afficher les champs personnalisés. Ajoutez _price aux noms de champs personnalisés et $ aux étiquettes de champs personnalisés.

J'ai maintenant un carrousel de produits qui présente les catégories WooCommerce que j'ai sélectionnées. J'ai choisi d'afficher 4 articles, augmenté la taille de l'image, modifié les couleurs de police des champs titre, méta et personnalisés, et augmenté la taille de la police des champs titre et personnalisés. Dans cet exemple, je n'affiche que la date de la méta, mais tout comme les publications normales, je pourrais montrer n'importe quelle méta information et un extrait.

Utiliser Owl Carousel Pro avec Extra et le plugin Divi Builder

Owl Carousel Pro fonctionne également très bien avec Extra. C'est le carrousel d'images.

Voici un aperçu du plugin avec le plugin Divi Builder installé sur le thème WordPress Twenty Seventeen. Celui-ci affiche mes produits WooCommerce.

Licence

Le plugin peut être utilisé sur un nombre illimité de sites Web pour vous et vos clients. Il comprend 1 an de mises à jour et de support.

Dernières pensées

Owl Carousel Pro ajoute deux modules intéressants au Divi Builder qui vous permet d'afficher des publications, des projets, des types de publications personnalisés et des images dans un carrousel personnalisable. La plupart des personnalisations attendues du module Divi sont incluses ainsi que quelques nouvelles fonctionnalités pour contrôler l'affichage.

J'ai trouvé que presque toutes les fonctionnalités et tous les paramètres étaient intuitifs. J'ai trouvé les filtres personnalisés déroutants pour l'utilisateur moyen. J'aimerais voir plusieurs exemples complets de création de filtres, car cela démontrerait les vastes capacités de ce plugin. Même si vous ne voulez pas vous occuper du code, la version pro ajoute suffisamment de fonctionnalités pour que cela mérite d'être considéré.

Nous aimerions vous entendre. Avez-vous essayé Own Carousel Pro ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via gst / shutterstock.com