15+ excellents exemples de curseurs WordPress (vitrine)

Vous cherchez de l'inspiration pour votre slider WordPress ? Les curseurs permettent aux propriétaires de sites Web de présenter leur contenu le plus important dans un diaporama attrayant et interactif, afin que les utilisateurs puissent voir les faits saillants et agir immédiatement. Il n'est pas étonnant que tant de sites utilisent des sliders avec tout ce qu'ils peuvent faire !

• Diffusez du contenu efficacement et avec style
• Emballez beaucoup d'informations dans un petit espace
• Ajoutez de l'interaction à votre site Web
• Dirigez les visiteurs vers les promotions et les pages importantes

Dans cet article, nous vous montrerons plus de 15 excellents exemples de curseurs WordPress. Nous vous montrerons également comment créer rapidement un magnifique slider pour votre propre site Web.

Vitrine d'inspiration Slider

Voici quelques-uns des meilleurs exemples de curseurs pour votre inspiration. Les critères que nous avons utilisés pour choisir ces curseurs étaient 1) la créativité et 2) la convivialité. Certains modèles ont les deux, et certains n'ont qu'un seul aspect.

CNBC Premier

Le curseur de CNBC est lisible et facile à utiliser. Ils utilisent une police épaisse pour les titres des émissions, donc c'est facile à lire. La coloration du texte l'aide également à se démarquer de l'arrière-plan.

SCS

Le curseur de CBS utilise des images convaincantes avec une grande police et beaucoup d'espace blanc pour le rendre facile à lire et à utiliser. Les grosses puces indiquent très clairement ce qui se passera lorsque vous cliquerez.

Universal Orlando

Le curseur d'Universal a un objectif simple : vous inciter à visiter leur parc d'attractions. Bien que les CTA fassent des offres alléchantes, les photos parlent d'elles-mêmes.

Colombe de Saville Côtes

Saville's utilise une élégante police serif associée à des photos qui mettent en valeur la qualité et le savoir-faire de leurs colombes. Ils expliquent également leur connaissance approfondie des colombes, afin que vous puissiez être sûr que vous achetez les meilleures maisons absolues pour vos amis à plumes.

Boulangerie Magnolia

Magnolia Bakery est un excellent exemple de curseur d'image uniquement. Quand vous avez de délicieuses pâtisseries, qui a besoin de bavarder ? Ces trois mini-curseurs ont l'air tout simplement délicieux sur cette page Web.

Gorge Flamboyante

Flaming Gorge est une attraction populaire de l'Utah. Les gros titres de leur galerie en disent long : vous pouvez profiter de l'étendue de la vue sans la bousculer au complexe Flaming Gorge.

Thèmes d'avancement

Headway Themes fait un usage créatif du curseur. Au lieu du curseur de haut de page typique, ils ont placé le leur plus bas et l'utilisent pour présenter les sites Web qui utilisent leurs thèmes. Intelligent!

Galerie Smithsonian Freer Sackler

Smithsonian Freer Sackler utilise un simple curseur de navigation pour vous diriger vers les pages clés du site Web. L'apparence simple et nette du curseur, entourée d'espaces blancs qui vous attirent vers les images, est parfaite pour une galerie d'art.

Planète seule

Le curseur de Lonely Planet devient fantaisiste avec une image plein écran rotative et des animations accrocheuses. Non seulement il s'agit d'un curseur magnifique, mais il est également facile de naviguer vers n'importe quel endroit qui vous plaît.

Baie Est

Le curseur de Converse met toute l'attention là où elle devrait être : sur le produit. Les détails et les textures sont si clairs dans ce curseur que vous pourriez presque tendre la main et toucher le tissu.

Feuillez

Le curseur de Sheetz utilise des couleurs vives et amusantes avec des boutons avant interactifs qui glissent lorsque vous les survolez. Des curseurs comme celui-ci ne demandent qu'à être joués avec.

Xbox

Le curseur de Xbox opte pour la simplicité avec des images de produits propres, peu de mots et beaucoup d'espaces blancs. C'est définitivement un cas où moins c'est plus.

Tim Horton

Le curseur de Tim Hortons est un exemple classique d'excellente photographie culinaire au travail. Mettez l'eau à la bouche, associez-le à de bonnes affaires et BOOM ! Vous avez un curseur auquel il est extrêmement difficile de résister.

Sony Craquelé

Crackle sticks avec une palette de couleurs blanche et orange simple qui attire l'attention sur le curseur rotatif. Les petits textes de présentation sur chaque diapositive vous donnent envie d'allumer le tube et de regarder des émissions de télévision.

Institut Smithsonien

Le curseur du Smithsonian utilise de grandes flèches bien visibles pour que vous puissiez revenir à une diapositive précédente que vous avez manquée. C'est important dans ce cas, car il y a beaucoup de texte à lire sur chaque diapositive.

Persienne

Le curseur du Louvre est exactement ce à quoi vous vous attendez : historique et élégant. C'est grâce aux nombreux espaces blancs, à la police serif et au fondu au noir simple mais dramatique dans les images. L'autre grande chose à propos de ce curseur est le bouton lecture/pause dans le coin inférieur droit.

Comment créer votre propre slider WordPress

Maintenant, vous vous demandez peut-être : « Ces curseurs sont géniaux, mais comment puis-je en créer un pour mon propre site Web ?

Eh bien, heureusement, c'est en fait assez simple grâce au plugin Soliloquy pour WordPress.

Tout d'abord, vous devez installer et activer le plugin Soliloquy Slider. Pour plus de détails, consultez ce guide étape par étape sur la façon d'installer un plugin dans WordPress.

Ensuite, il est temps de créer votre premier slider. Allez dans Soliloquy » Add New pour ajouter un slider. Vous pouvez sélectionner des fichiers sur votre ordinateur si vous avez besoin de télécharger des images. Si vous avez déjà téléchargé des images sur votre site Web, sélectionnez des fichiers provenant d'autres sources.

Continuez à faire défiler vers le bas. Vous verrez les images que vous avez sélectionnées pour votre slider. À partir de là, vous pouvez cliquer sur l'icône en forme de crayon pour modifier les images ou cliquer sur le X rouge pour supprimer des images de votre curseur.

Vous pouvez également configurer d'autres détails sur votre slider en sélectionnant l'onglet Config sur la gauche. Vous pouvez définir la taille de l'image, le thème du curseur et la vitesse de transition des diapositives. La position de votre légende de texte peut également être modifiée ici. Vérifiez ces paramètres.

Une fois que vous êtes satisfait de vos paramètres, jetez un œil à l'onglet Mobile . Cela vous permettra de tester à quoi ressemble votre site Web sur un appareil mobile et d'ajuster vos paramètres de résolution mobile si nécessaire.

(Consultez également l'onglet Divers pour importer ou exporter votre curseur.)

Ajouter un curseur à une page ou à un article

Vous avez fini de créer votre slider ! Il est maintenant temps de l'ajouter à la publication ou à la page de votre choix. Modifiez une publication ou une page, cliquez sur le bouton Ajouter un curseur et sélectionnez votre curseur. N'oubliez pas de publier ou de mettre à jour votre article/page pour enregistrer les modifications.

Votre curseur sera désormais en ligne sur votre site Web :

C'est ça! Vous avez maintenant votre propre slider WordPress. Nous espérons que cet article vous a inspiré avec plus de 15 excellents exemples de curseurs WordPress et vous a aidé à créer votre premier curseur.

Vous pouvez également consulter toutes les fonctionnalités avancées que vous pouvez utiliser lors de la conception de vos curseurs. Les possibilités de personnalisation de votre curseur sont pratiquement infinies, alors lancez-vous avec Soliliquy dès aujourd'hui ! Voici quelques exemples de ce que vous pouvez faire avec un curseur Soliloquy.

• Créer un curseur d'image pleine largeur dans WordPress
• Changer le temps du curseur dans WordPress
• Créer un curseur vidéo réactif dans WordPress

Si vous aimez cet article, suivez-nous sur Facebook et Twitter pour plus de tutoriels WordPress gratuits.