Mettre en évidence le plug – in Divi – Owl Carousel pro

Avez – vous déjà voulu utiliser Divi Builder pour voir des messages, des projets, des types de messages personnalisés et des images dans un carrousel? Les messages et les images sont généralement affichés dans un curseur qui affiche un message ou une image à la fois, mais que se passe – t – il si vous voulez qu’un vrai Carrousel affiche plusieurs messages en même temps? Vous pouvez le faire facilement avec un plug – in appelé Owl Carousel pro. Owl Carousel pro est un plug – in tiers qui ajoute deux nouveaux modules à Divi Builder. Le premier affiche les types de messages tels que les éléments, les messages et les types de messages personnalisés. Le deuxième est la rotation d’image, en concurrence avec l’éditeur visuel, pour ajouter tout type de contenu que vous voulez.
Une version gratuite du plugin est disponible. Je suis en train de regarder la version pro, qui a ajouté plusieurs nouvelles fonctionnalités, y compris: Custom post type display Custom Query Fields change the size of the Miniature change the number of images displayed the lightbox opened images, for example, from unsplash. Com. Installer Owl Carousel pro Charger et activer le plug – in normalement. Vous verrez ensuite deux nouveaux modules dans Divi Builder: DP Owl Carousel et DP Owl image Carousel. Les couleurs des modules diffèrent de celles des modules Divi standard pour les aider à se démarquer. C’est ma préférence pour les modules tiers parce qu’ils sont plus faciles à trouver.
DP Owl Carrousel DP Owl Carousel affiche les messages personnalisés, les éléments et les types de messages dans le Carrousel. Il affichera vos 10 derniers messages ou la catégorie ou l’étiquette de votre choix. Son onglet Contenu comprend les paramètres du contenu et du projet. L’onglet conception comprend le texte, le texte du titre de l’article, le texte du chapitre, le texte extrait de l’article, le texte d’archive personnalisé, l’espacement, les flèches, les contrôles et les vignettes. L’onglet avancé contient les paramètres CSS Prev
Flèche rouge ESO, augmente la taille du contrôle et devient violet, augmente la taille de la vignette, réduit la marge à 0 et définit pour afficher 3 images. La deuxième couleur du contrôle est la version plus foncée de la couleur que j’ai sélectionnée. La deuxième couleur est fournie par le plug – in. Dans cet article, j’ai ajouté l’arrière – plan au module lui – même et j’ai modifié les marges des éléments pour que l’arrière – plan apparaisse entre les messages. J’ai également changé la couleur de la police, cette fois j’ai ajusté la hauteur et l’espacement des lignes. Chaque écran affiche 4 messages et j’ai réduit la taille des vignettes. J’ai réglé la flèche à grande et le contrôle à petite.
Lorsque vous changez la taille de la vignette, elle ne correspond qu’au nombre de messages que vous affichez. Par conséquent, si vous voulez une image plus grande, vous devez réduire manuellement le nombre de messages affichés. Convoyeur d’images DP Owl Le Carrousel d’images DP Owl affiche les images dans le Carrousel. Vous permet d’ajouter des images, des flèches de vue et des contrôles. Les paramètres de conception comprennent le texte, le texte du titre de l’image, le texte du contenu de l’image, l’espacement, les flèches, les contrôles et les vignettes. Le tableau avancé est le même que le module de Carrousel DP Owl.
Vous pouvez ajouter n’importe quel nombre d’images, ouvrir l’image dans la boîte lumineuse et utiliser l’image originale ou une copie de l’image. J’ai choisi des images de différentes tailles pour voir comment ça marche. Ces photos sont jolies. J’aime que vous puissiez lier à des URL ou les ouvrir dans une boîte lumineuse. J’aimerais voir les superpositions ajoutées à l’image, car cela améliorera encore l’expérience. Exemple de Carrousel d’image DP Owl Voici comment le formulaire apparaît sur la page lorsque vous utilisez les paramètres par défaut. J’ai ajouté un arrière – plan dans cette section pour le faire ressortir. Dans cet exemple, j’ai ajouté un titre et du texte à l’image. Ho – an.
Définissez une grande couleur pour chaque couleur et modifiez les flèches et les contrôles sur la couleur. Ceci montre 4 images. J’ai augmenté la taille de l’image et réduit les marges des éléments de 8 à 4. J’ai ensuite redimensionné et coloré les caractères, les flèches et les contrôles. Les caractères de titre augmentent l’espacement. Ceci utilise un fond foncé avec une nouvelle couleur pour les caractères, les contrôles et les flèches. C’est à ça que ressemble une image lorsqu’elle est allumée dans une boîte lumineuse. L’animation de défilement fonctionne toujours en arrière – plan.
Type de poste personnalisé Dans le module Owl Carousel pro, assurez – vous que les requêtes personnalisées sont désactivées (seulement si vous voulez créer votre propre filtre personnalisé au lieu de sélectionner une catégorie dans la liste) et sélectionnez votre type de message sous le nom de type de message personnalisé. J’ai installé woocommerce et maintenant je peux choisir de générer automatiquement. Chacune de mes catégories de produits est automatiquement ajoutée à la liste des catégories. Je peux maintenant faire défiler vers le bas et sélectionner les produits à afficher dans le Carrousel. Le produit sera affiché, mais pour afficher le prix, je dois activer les champs personnalisés, sélectionner les champs à afficher et ajouter des étiquettes pour afficher le symbole de devise désiré. Faites défiler vers le bas et activez l’affichage des champs personnalisés. Ajoutez le prix au nom du champ personnalisé et le dollar à l’étiquette du champ personnalisé. Maintenant, j’a I un produit de Carrousel qui affiche la catégorie woocommerce que j’ai sélectionnée. J’ai choisi d’afficher 4 articles, d’augmenter la taille de l’image, de changer la couleur de police du titre, des méta – champs et des champs personnalisés, et d’augmenter la taille de police du titre et des champs personnalisés. Dans cet exemple, je ne montre que la date de la méta, mais comme pour les messages normaux, je peux afficher n’importe quelle méta – information et extrait. Utiliser Owl Carousel pro avec extra et plug – in