Mettre en évidence le plug – in Divi: Divi sensei avant après le curseur

Les curseurs avant et arrière sont un bon moyen de permettre aux visiteurs de comparer deux images. Comme son nom l’indique, il peut s’agir d’images avant et après le changement, comme la perte de poids, les images modifiées, les chambres décorées, les voitures peintes, etc. Bien sûr, ils sont plus utiles qu’avant et après la photo. Ils peuvent être utilisés pour comparer des graphiques, des produits, des destinations de vacances, etc. Dans cet article, nous examinerons les modules de curseur avant et arrière de Divi Builder, Divi sensei avant et après, nous examinerons ses fonctionnalités et vous aiderons à décider si vous avez besoin de ce plug – in tiers dans la boîte à outils de Divi.
Diviser sensei avant et après le module de défilement Charger et installer correctement Divi sensei avant et après le plug – in. Trois ne sont pas des paramètres à suivre. Une fois le plug – in chargé et activé, vous verrez un nouveau module nommé sensei avant et après Slider ajouté à Divi Builder. Le module affiche d’abord l’image à gauche, puis à droite. Une barre de défilement est affichée au milieu et vous pouvez la saisir et la glisser d’un côté à l’autre. Passez le curseur sur l’image pour afficher les étiquettes avant et après et ajouter une superposition. Vous pouvez contrôler la conception de chacun de ces éléments.
Regardons les caractéristiques et les options du curseur. Pour ces exemples, j’utilise des images dans unsplash. Com. Onglet Contenu L’onglet contenu vous permet d’ajouter des images avant, après et dans les étiquettes. Dans cet exemple, j’ai ajouté deux versions différentes de la même image pour créer l’image avant et après. Ceci est utile pour afficher les résultats d’une photo modifiée. Les options comprennent également des liens standard, des arrière – plans et des paramètres d’étiquette d’administrateur. Il fournit également des champs pour éditer le texte ETI
Ou 50% d’opacité. Il semble préférable de rendre l’image plus visible en vol stationnaire. Si vous utilisez une couleur claire ou foncée, la taille de l’opacité que vous définissez est déterminée par la couleur dans l’image et la façon dont vous utilisez la superposition. Par exemple, j’utilise un schéma de couleurs noir et blanc. Le texte du couvercle et de l’étiquette est blanc et l’élément de curseur est noir. J’ai réduit l’opacité de l’arrière – plan de l’étiquette pour l’assombrir. Je les garde par défaut.
Exemples de curseurs avant et après Divi sensei regardons quelques exemples de la façon dont les curseurs sont utilisés et comment ils apparaissent dans la disposition Divi. J’utilise des images non Flash et celles disponibles dans la mise en page gratuite de Divi qui sont intégrées dans Divi. Je vais déterminer la disposition Divi que j’utilise lorsque je continuerai. Comparaison graphique Pour ce faire, j’ai utilisé les éléments de conception du pack de mise en page du jeu vidéo Divi. J’ai désactivé la superposition, changé l’élément du curseur en vert et m’assurer que l’étiquette est toujours affichée. L’arrière – plan de l’étiquette est fixé en bleu. J’ai augmenté la taille de la police, changé la couleur, utilisé la famille de polices Rubik, créé le poids moyen de la police et l’ai mise en majuscules. Si vous possédez ou avez joué à ces systèmes de jeu et que vous savez pourquoi les graphiques de cette invention n’existent pas, félicitations. Voici l’apparence de l’intérieur de la disposition. Il est idéal pour comparer les graphiques de ces deux consoles. Services avant et après le portefeuille Cet exemple reproduit le concept de chambres avant et après la rénovation. Lorsque les deux images sont de tailles différentes, elles utilisent la taille d’une image plus grande et une image plus petite affiche un espace blanc. Il les placera de la même façon en hauteur ou en largeur et remplira le reste en blanc. Dans les ques
Par exemple, l’image de droite est plus courte que l’image de gauche. Bien qu’une image de la même taille fonctionne mieux, elle est toujours bonne pour une image de la même taille. J’ai ajouté des couleurs et des polices à mon paquet de mise en page d’appareils ménagers. Voici l’apparence intérieure d’une partie de la disposition. C’est l’apparence du revêtement. Je déplace le curseur d’un côté pour afficher plus que l’image précédente. À titre de référence, voici une image qui déplace la poignée pour afficher plus d’une image suivante. Comparaison des produits Dans cet exemple, je vais remplacer les trois images de thé dans la disposition du magasin de thé par trois curseurs ds b & A. Je vais utiliser les couleurs de mise en page pour les boutons et les commandes de curseur. Réglez le curseur central à vertical juste pour être différent. Outrepasser les couleurs de mise en page qui utilisent une opacité réduite. Voici comment ils apparaissent dans la mise en page. Il est idéal pour comparer les détails visuels de plus d’un produit, de plus d’un emplacement, de plus d’une couleur et de plus d’options à afficher (avec et sans options, etc.). Position comparative Dans cet exemple, j’utilise le curseur pour comparer les deux positions. Ils n’ont pas besoin d’être similaires, mais ils peuvent être comparés pour une raison ou une autre. J’ai ajouté des couleurs dans la mise en page pour les curseurs et les étiquettes, et j’ai ajouté des polices pour les étiquettes. J’ai aussi ajouté une ombre de cadre pour l’aider à se démarquer des autres images. Voici comment les couleurs de mise en page sont utilisées dans le paquet de mise en page siteseing. C’est un bon exemple que ces deux images ne devraient pas être avant ou après la même chose ou même quelque chose de similaire. C’est une bonne façon de montrer des endroits comme des mariages, des vacances, etc. Aider l’acheteur à choisir lui – même (ou rendre le choix plus difficile, mais je ne recommande pas de le cibler). Achats Vous pouvez acheter
Divi sensei avant et après l’état du curseur sur le marché Divi. L’accès illimité au site et les frais de soutien et de mise à jour pour une année sont de 5 $. Ce prix comprend une garantie de remboursement de 30 jours. Divi sensei les curseurs avant et arrière sont un module simple. Par exemple, le curseur n’a pas de contrôle de largeur et l’étiquette ne contient pas de bordure, d’ombre de cadre, de gradient, etc. Mais les paramètres le rendent facile à adapter au style de chaque mise en page que j’ajoute. Les niveaux de réglage sont significatifs en termes de prix et de fonctionnalité, et je peux facilement obtenir le design que je veux. Tous les contrôles sont intuitifs et je n’ai jamais pensé que j’avais besoin d’instructions. Vous pouvez également améliorer le référencement en utilisant différentes balises alt pour les images. Si vous êtes intéressé par l’utilisation de diapositives avant et après le site Divi, il vaut la peine d’envisager d’utiliser Divi sensei avant et après le diapositive. Nous aimerions avoir votre avis. Avez – vous essayé Divi sensei avant et après la barre de diapositives? Veuillez nous faire part de vos réflexions dans les commentaires ci – dessous. Photos en vedette prises par Switzerland \/ shutterstock. Com