Le contenu est ce qui incite vos visiteurs à venir sur votre site Web, mais les premières impressions sont également importantes : c’est ainsi que vous les accrochez en premier lieu. Bon le contenu mérite une belle présentation – l’exige, même. Si votre site Web semble rudimentaire, il peut sembler peu professionnel, quelle que soit la qualité de votre contenu.
C’est là qu’interviennent les curseurs. Dans le cas de ce didacticiel en particulier, le curseur des cartes WordPress. De manière générale, un curseur est un élément de conception dynamique utilisé pour afficher des images et des vidéos. En règle générale, il affiche une image ou une vidéo à la fois et change après un certain temps ou par l’action de l’utilisateur. Un curseur de cartes est un curseur dans lequel les images sont affichées et animées pour ressembler à un jeu de cartes, semblable à une galerie de cartes.
Dans ce tutoriel, nous allons vous montrer comment ajouter un curseur de cartes à votre site WordPress. Mais avant cela, nous aimerions prendre le temps de discuter des situations dans lesquelles un curseur de cartes peut améliorer votre site Web, et quand il vaut mieux l’éviter. Voici ce dont nous allons discuter :
Un curseur de cartes est voyant, donc, comme une galerie de cartes, vous pouvez l’utiliser comme un fonction vitrine pour les photos et les images.
Comme pour toute galerie, les cartes peuvent également avoir une fonctionnalité supplémentaire : vous pouvez y attacher un lien, et utilisez-les comme fonction de navigation. Dans le cadre d’un site Web de portfolio, chaque page pourrait être liée à un projet précédent. Par exemple, sur le site Web d’un projet de film, les images du curseur peuvent être des portraits de personnages liés aux pages de profil des acteurs ou similaires. Un curseur de cartes peut même être utilisé à la place d’un menu, si ce type de choix de conception audacieux peut fonctionner pour votre site Web.
Il y a un autre avantage supplémentaire à un curseur de cartes : étant animé et cliquable, il invite l’interaction de l’utilisateur, rendre votre site Web plus attrayant : cela donne à vos visiteurs quelque chose à faire.
Les curseurs sont ces fonctionnalités visuelles fantastiques, alors pourquoi ne pas les ajouter ? WordPress a tous ces superbes modules complémentaires et fonctionnalités, et il serait compréhensible pour un concepteur novice de simplement tout vider et l’évier de la cuisine sur le site Web.
Cette approche de la conception est généralement une mauvaise idée, mais dans le cas du curseur de cartes, vous devez prendre en compte une chose importante : taille de l’image. Une fonctionnalité de présentation utilisera probablement des images de haute qualité et haute résolution, et elles peuvent être lent à charger.
Site Internet la vitesse de chargement peut affecter votre taux de rebond (en raison du fait que les gens renoncent simplement à attendre qu’une page se charge complètement), et cela peut avoir un effet négatif sur vos positions SERP. Utilisez donc judicieusement les grandes fonctionnalités et optimisez vos images pour atténuer leurs effets néfastes.
Et maintenant, si vous êtes convaincu qu’un curseur de cartes peut améliorer votre site Web, passons aux choses sérieuses.
Avec nos propres modules complémentaires Qi pour Elementor, vous obtenez 60 nouveaux widgets conçus par des professionnels qui élargissent considérablement les capacités déjà impressionnantes d’Elementor. Pour les utiliser, vous devez avoir installé Elementor, le premier éditeur visuel pour WordPress – la version gratuite d’Elementor fera l’affaire. Ensuite, installez le plugin Qi Addons for Elementor, et vous aurez accès à tous ces nouveaux éléments de conception, le curseur de cartes parmi eux.
Et vous pouvez tout configurer en quelques minutes, comme dans la vidéo ci-dessous.
Vous pouvez cependant préférer vos tutoriels sous forme de texte. Si tel est le cas, lisez la suite. Pour commencer avec le curseur de cartes, recherchez le widget dans le menu de gauche et faites-le glisser là où vous le souhaitez sur la page.
Vous verrez que la version par défaut du widget a trois images. Ceux-ci sont répertoriés comme éléments dans le Général section de l’onglet contenu.
La première option est le Style de mélange d’images que vous pouvez utiliser pour changer la direction de votre « jeu » d’images. Vous avez le choix entre Mélanger à droite et Mélanger à gauche. Nous le laisserons à Mélanger à droite, la valeur par défaut.
Viennent ensuite les Éléments d’image. C’est ici que vous pouvez ajouter les images que vous voulez dans le curseur de vos cartes. La version par défaut du curseur contient trois images, mais vous pouvez en ajouter d’autres en cliquant sur le bouton + Ajouter un article bouton. Nous utiliserons trois images, nous n’en ajouterons donc plus. Vous pouvez également supprimer n’importe quel élément en cliquant sur le X ou copiez-le en cliquant sur le Copie bouton.
Pour ajouter une image à un élément, cliquez sur l’élément. Vous pouvez ajouter un lien vers l’image en le saisissant dans le champ Lien domaine. Un visiteur cliquant sur une image sera redirigé vers la page liée. Nous n’ajouterons pas les liens maintenant, mais nous ajouterons la marque # pour créer un lien vers le haut de la page sur laquelle se trouve l’image.
le Image de l’article boîte est l’endroit où vous ajoutez réellement votre image. Clique le Choisissez une image bouton tout en survolant le Image de l’article boîte.
Vous pouvez télécharger une nouvelle image ou sélectionner une image déjà dans la médiathèque. Une fois votre sélection effectuée, cliquez sur le bouton Insérer un média bouton.
Nous avons fait la même chose pour le reste de nos articles, en remplaçant les images d’espace réservé. Le contrôle final dans le Général la section est la Proportions d’image menu. C’est ici que vous choisissez la taille et les proportions de vos images. Vous pouvez choisir entre plusieurs options ici, y compris Miniature, Carré, Paysage, et Portrait. Nous sommes allés avec Original, en préservant la taille de nos images.
Passons à la Style onglet et son Style section, nous constatons qu’il n’y a qu’un seul contrôle : le Pas de décalage glissière. Vous pouvez l’utiliser pour afficher plus ou moins d’images qui ne sont pas au-dessus de votre jeu de cartes en faisant glisser ce contrôle ou en entrant le nombre de pixels. Nous sommes allés avec 50 pixels.
La dernière section est la Style de navigation du curseur, qui concerne l’apparence et le comportement de vos flèches de navigation. Voici où vous pouvez définir différentes icônes de flèche pour Flèches de navigation Précédent et Flèches de navigation Suivant en sélectionnant une flèche dans le Bibliothèque d’icônes ou vous pouvez télécharger le vôtre en cliquant sur le Télécharger SVG bouton qui apparaît au survol de la souris. Cela fonctionne de la même manière que l’ajout d’images à la galerie, et c’est ce que nous allons faire.
La section suivante de cet onglet régit les Normal et le Flotter états de vos flèches de navigation.
Dans le Normal section, ce qui apparaît d’abord sont les contrôles de couleur : le Couleur de la flèche de navigation et le Couleur d’arrière-plan de la flèche de navigation. Vous pouvez entrer une couleur pour l’un ou l’autre ou en choisir une dans le sélecteur. Nous opterons pour un gris très clair pour le Couleur de la flèche de navigation (#1e1e1e), mais nous ne toucherons pas au Couleur d’arrière-plan de la flèche de navigation.
Ensuite, nous avons le Taille de la flèche de navigation glissière. Vous pouvez saisir une valeur ou la faire glisser là où vous le souhaitez. Nous allons le mettre à 22 pixels.
le Hauteur du support de flèche de navigation et Poids du support de flèche de navigation les curseurs sont là au cas où vous souhaiteriez changer la taille de l’arrière-plan de la flèche de navigation. Nous ne les utiliserons pas dans ce tutoriel.
Finalement, le Marge de navigation en haut, décalage de navigation à gauche, et le Espace entre les flèches les curseurs sont utilisés pour changer la position des flèches par rapport aux images dans le curseur lui-même ou entre elles. nous allons mettre Haut de la marge de navigation à 6 pixels, la Décalage gauche de navigation à 2,7% et le Espace entre les flèches à 28 pixels.
Dans le Flotter section de l’onglet, qui régit le comportement au survol de vos flèches de navigation, vous pouvez voir qu’il a toutes les mêmes options de style de flèche que le Normal, avec un ajout important : le Activer le déplacement de la flèche de survol menu. Nous le laisserons sur sa valeur par défaut de Oui, ce qui signifie que la flèche se déplace au survol de la souris. Nous laisserons tous les autres contrôles tels quels.
Et voilà : votre slider est terminé.
Une vitrine élégante, et seulement l’une des nombreuses façons pratiquement illimitées de la configurer.
En conclusion
Avec Qi Addons for Elementor, il ne faut que quelques minutes pour ajouter un widget attrayant et attrayant comme un curseur de cartes à votre site Web WordPress. Si vous concevez un site Web qui pourrait utiliser ce type de fonctionnalité flashy et remarquable, vous savez maintenant que Qi Addons for Elementor vous couvre. Et si vous l’utilisez avec la version gratuite d’Elementor, toutes les fonctionnalités étonnantes d’Addons seront à portée de main entièrement gratuites.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
