Fonctionnalités de Smart Slider 3
Importer et exporter des curseurs
Création intuitive de diapositives : choisissez des images, sélectionnez WordPress Posts ou ajoutez des vidéos YouTube et Vimeo
Superposition statique
Touchez glisser, faire défiler, navigation au clavier
Mise en page réactive pleine largeur et boxée
Animations à commutation de diapositives : horizontales, verticales, fondu
Animations d’arrière-plan des diapositives
Options de synchronisation de lecture automatique
Contrôles du curseur : Flèche, Balle, Autoplay, Barre, Vignette et Ombre
SEO optimisé
Couches : Image, En-tête, Texte, Bouton, Vimeo, YouTube
Snap de couche dans l’éditeur de diapositives visuelles
Dimensionnement de police de couche adaptative
Masquer les couches sur des appareils spécifiques
Diapositive image miniature
Compatible WordPress Multi Site
Points d’arrêt personnalisés et réactifs
One of the best alternatives if you’re thinking of taking your family on a one day hike in Carpathians.
Interface
Familiarisez-vous avec l’interface de Smart Slider 3.
Trier par défautTrier par ordre alphabétiqueTrier par popularitéTrier par Dernière mise à jour
- Tableau de bord
- Page de paramètres du curseur
- Éditeur de diapositives
- Groupe de curseurs
- Centre d’aide
- Nouveau projet
- Liste des calques
- Chronologie
- Poubelle
Tutoriels
Apprenez les bases de Smart Slider 3, notamment : la création et l’édition de curseurs.
- Édition de diapositives dans Smart Slider 3
- Qu’est-ce qui affecte la taille du curseur ?
- Tutoriels vidéos
- Points d’arrêt
- Comment définir votre image d’arrière-plan ?
- Comment ajouter une vidéo ?
- Comment masquer le curseur sur mobile ?
- Curseur de vitrine spéciale
- Curseur de logo avec animation continue
- Comment créer des modifications au survol ?
- Comment rendre le slider responsive ?
- Accéder aux diapositives suivantes/précédentes en cliquant sur le côté droit/gauche du curseur
- Comment avoir une image de l’appareil où l’image de l’écran change ?
The food we serve comes from Greece, where the people have a passion for eating, drinking and talking.
Monday – Sunday
Lunch: 12PM – 2PM
Dinner: 6PM – 10PM
58 Zeus Ave, Thessaloniki
+1 234 567 890
Contact us
58 Zeus Ave, Thessaloniki
+1 234 567 890
contact@example.com
Lorem ipsum dolor sit amet consectetur adipiscing elit accumsan auctor, commodo condimentum venenatis fusce dapibus rhoncus ultricies arcu.
Lorem ipsum dolor sit amet consectetur adipiscing elit accumsan auctor, commodo condimentum venenatis fusce dapibus rhoncus ultricies arcu.
Lorem ipsum dolor sit amet consectetur adipiscing elit accumsan auctor, commodo condimentum venenatis fusce dapibus rhoncus ultricies arcu.
Lorem ipsum dolor sit amet consectetur adipiscing elit dapibus nullam sodales, nisi ad posuere nascetur elementum risus in tempor. Mi quam sem nisi nostra tempus urna malesuada scelerisque, sodales himenaeos felis id suspendisse integer risus pharetra.
Owner, Chef
Co-owner, Chef
Waiter
Waiter
Paramètres du curseur
Le modèle Restaurant grec est un groupe qui contient 6 projets. Plus précisément, vous pouvez trouver 5 types de blocs et 1 type de curseur simple dans ce groupe. Les blocs sont des types spéciaux de projets qui ne peuvent afficher qu’une seule diapositive. Ils sont donc parfaits pour créer des en-têtes de héros.
Le premier bloc du modèle Restaurant grec utilise une mise en page pleine page . Les curseurs pleine page remplissent également l’écran verticalement et horizontalement. Par conséquent, ils constituent un excellent choix pour afficher du contenu au-dessus de la ligne de flottaison. Les autres curseurs et blocs sont pleine largeur , ils ne remplissent donc l’écran qu’horizontalement.
Couches
Vous pouvez trouver deux calques de titre sur tous les curseurs. L’un affiche le titre principal et l’autre le titre secondaire. La plupart des curseurs affichent également une image à l’aide du calque d’image. De plus, il existe un bouton CTA sur deux curseurs. L’un se trouve sur le premier curseur, qui utilise en fait un calque de colonne pour contenir le lien. Le deuxième bouton CTA se trouve sur le curseur À propos de nous, et celui-ci utilise le calque de bouton.
Animations
Comme la plupart des sliders du modèle Greek Restaurant sont des blocs, ils ne disposent pas d’animations de changement de diapositives sophistiquées. Cependant, comme ils comportent plusieurs calques, ils présentent de belles animations de calque. Par exemple, sur le premier slider, vous pouvez voir l’animation Reveal. Ce qui rend l’animation Reveal spéciale, c’est qu’elle introduit le calque en déplaçant une forme colorée dessus. En conséquence, l’animation Reveal a un aspect moderne et convient à tout type de site Web.
L’autre animation que vous pouvez repérer sur de nombreux sliders est la parallaxe des calques. Lorsque vous faites défiler la page, certains calques se déplacent à une vitesse différente, ce qui crée un effet spectaculaire. Vous pouvez retrouver cet effet sur l’image du premier et du cinquième slider ainsi que sur les cartes du deuxième slider.
Mise en page
Le menu du dîner est probablement la mise en page la plus intéressante du modèle de restaurant grec. Ce menu est en fait composé de deux curseurs différents. Un bloc qui contient le titre principal et le titre secondaire, et un curseur qui contient les puces de texte et les différentes diapositives. La même couleur d’arrière-plan est définie sur les deux curseurs, ce qui donne l’impression qu’il s’agit d’un seul curseur, mais en fait, ce n’est pas le cas.
Sensible
Smart Slider est un plugin de slider réactif qui vous permet de créer des sliders qui s’adaptent parfaitement à n’importe quel écran. De plus, il offre de nombreuses fonctionnalités réactives pour affiner le résultat sur les petits écrans. L’un des outils les plus utiles pour optimiser pour les appareils mobiles est le redimensionneur de police. Il vous permet de réduire (ou d’augmenter) la taille de la police pour les petits écrans, ce qui est très pratique.
Documentation associée : Animation de calque
Article connexe : 11 magnifiques exemples de curseurs pleine largeur
19
EXHIBITIONS
1400
PAINTINGS
680
STATUES
“The purpose of art is washing the dust of daily life off our souls.”
PABLO PICASSO
GUIDED TOUR
Greek Mythology: The Story of Apollo
Apollo is one of the most important and complex of the Olympian deities in classical Greek and Roman religion and Greek and Roman mythology. Apollo is the son of Zeus and Leto, and has a twin sister Artemis.
GUIDED TOUR
What's the story of how Picasso became famous?
Pablo Ruiz y Picasso, also known as Pablo Picasso, was a Spanish painter, sculptor, printmaker, ceramicist, stage designer, poet and playwright who spent most of his adult life in France.
GUIDED TOUR
The Origins of the 'Pharaoh's Curse' Legend
Since the mid-20th century, many authors and documentaries have argued that the curse is 'real' in the sense of being caused by scientifically explicable causes such as bacteria or radiation.
GUIDED TOUR
Modern Impressionist Paintings
Impressionism is an art movement characterized by relatively small, thin, yet visible brush strokes, open composition, emphasis on accurate depiction of light in its changing qualities, ordinary subject matter...
GUIDED TOUR
The Inventions of Leonardo Da Vinci
Leonardo Da Vinci is also renowned in the fields of civil engineering, chemistry, geology, geometry, hydrodynamics, mathematics, mechanical engineering, optics, physics, pyrotechnics, and zoology.
Visit
The Museum is closed 25 December and 1 January, but is open every other day of the year.
Nextend Street 36, YO 789887
Monday - Friday 7 a.m. - 10 p.m.
Saturday 9 a.m. - 10 p.m.
"We visited The Museum and so very glad we did. It's a humbling experience and spent several hours there digesting the facts and information available."
ARTHUR CALLEWAERT
“This Museum is a legend, and it never disappoints. It has an extensive collection of historical pieces, highlighting the Egyptian and Greek collection, and some lovely Italian and Spanish pieces.”
VERONICA PATTERSON
"If you love art this is a must. No matter what your taste you will find the masters to modern. I was selective due to time constrains but this is a Must for any art lover."
LESLIE NICHOLS
Paramètres
La page d’accueil du musée ne contient que des curseurs et des blocs. Avec Smart Slider, vous pouvez créer des pages entières comme dans cet exemple. Le curseur supérieur est un menu qui vous permet de naviguer vers des curseurs spécifiques. Si vous publiez ce groupe de curseurs, les curseurs et les blocs seront les uns sous les autres. Vous pouvez ajouter plus de curseurs à ce groupe, vous pouvez également en supprimer un si vous ne l’aimez pas. Vous pouvez également personnaliser entièrement tous les curseurs et les calques.
Couches
La page de destination utilise plusieurs types de calques. Vous pouvez y trouver des titres, des images, des textes et des boutons. Vous pouvez y trouver différentes actions de lien . La page commence par un menu et il y a une action de lien dans chaque titre, vous pouvez donc faire défiler des curseurs spécifiques. Le dernier curseur est un curseur de témoignage , ici les flèches sont des images et utilisent également des actions, qui vous permettent de naviguer vers les diapositives suivantes ou précédentes.
Animations
Vous pouvez voir plus de types d’animations dans ce curseur. Les calques sont dotés d’une animation de calque agréable à regarder . Le deuxième curseur de ce groupe a un mouvement supplémentaire sur leurs images d’arrière-plan de diapositive, il y a un effet Ken Burns dessus. Vous pouvez personnaliser l’effet Ken Burns sur chaque diapositive dans la fenêtre Calque, ou vous pouvez les supprimer et utiliser le même effet sur chaque diapositive. Pour cela, vous pouvez activer Ken Burns dans l’onglet Animations des paramètres du curseur.
Mise en page
Le bloc Visite a la disposition la plus spéciale dans cet exemple d’une page . Ici, vous pouvez voir une ligne avec 2 colonnes. La première colonne contient une couche d’en-tête et 3 couches de texte. La colonne de droite contient 3 couches d’image. Ces couches sont en position absolue . Vous pouvez utiliser ce positionnement si vous souhaitez placer des couches les unes au-dessus ou en dessous des autres et les utiliser comme élément de conception.
Sensible
La page d’accueil du musée est entièrement réactive . Les textes et les images sont plus petits sur tablette et mobile, et les lignes s’enroulent. Ainsi, toute la page s’affiche correctement sur tous les appareils.
Article connexe : Comment créer de belles pages de destination WordPress qui convertissent
Article connexe : 12 superbes exemples d’une page que vous devriez consulter
We roast our coffee locally in small batches to ensure you get the freshest beans around.
We pride ourselves on our helpful, friendly, and talented baristas who strive to make positive experience.
Our vision is that the Coffee has a clear taste profile, presenting as much of the coffees acidity.
Paramètres
La page de destination de Coffee ne contient que des curseurs et des blocs. Avec Smart Slider, vous pouvez créer une page entière avec des curseurs et les regrouper. Si vous publiez le groupe, les curseurs seront les uns sous les autres. De plus, vous pouvez entièrement personnaliser tous les curseurs, vous pouvez modifier les images, les textes, les supprimer, c’est à vous de décider ce que vous voulez.
Couches
Le bloc Café utilise des calques de base comme des images, des titres et des boutons, et possède des calques spéciaux comme le calque de légende et le calque de zone d’image. Le deuxième curseur possède 3 calques de légende. Si vous passez la souris sur les images, une courte description s’affiche sur l’image. Vous pouvez modifier la description dans l’onglet Contenu de la fenêtre des calques. Vous pouvez également modifier le type d’animation ici, le type Complet est désormais utilisé, mais vous pouvez le définir sur fondu ou simple, vous pouvez également définir la direction et l’échelle.
Animations
Lorsque vous consultez la page, vous pouvez remarquer l’ animation de révélation . Ce type d’animation anime une seule case colorée devant les calques.
Le curseur Haricots est spécial sur cette page de destination. Lorsque vous faites défiler vers le haut ou vers le bas, les images des haricots se déplacent. Ce type d’effet est la parallaxe de calque . Vous pouvez définir la direction du mouvement dans l’onglet Animations des paramètres du curseur. Vous pouvez également ajouter différentes valeurs aux calques dans l’onglet Style de la fenêtre des calques.
Mise en page
Vous pouvez rencontrer différents types de curseurs dans ce groupe. La page de destination commence par un curseur vidéo , comporte des blocs et des curseurs simples et 2 curseurs de type carrousel. Avec les curseurs de carrousel, vous pouvez afficher plus de diapositives en même temps. Il existe 2 façons de changer ces carrousels : vous pouvez déplacer l’ensemble du volet ou changer les diapositives une par une si vous activez l’option de changement unique dans l’onglet Animations des paramètres du curseur.
Sensible
L’ exemple d’une page de café est entièrement réactif . Il y a des calques qui sont cachés dans les vues plus petites, afin que les visiteurs puissent se concentrer sur le contenu. De plus, les textes sont plus petits. Pour définir la taille de la police en fonction de l’appareil, vous pouvez utiliser l’ option d’échelle du texte . Les lignes des curseurs s’enroulent généralement après 1 ou 2 colonnes dans les vues plus petites. Le premier curseur a une navigation, cette navigation s’enroule après 2 colonnes.
Article connexe : Pourquoi avez-vous besoin d’un curseur vidéo sur votre site Web ?
Article connexe : 12 superbes exemples d’une page que vous devriez consulter
Use your phone like never before
Iaculis eu donec ac morbi tincidunt aliquet lectus. Quis ultrices ut sed faucibus elit.
Cheyenne Saris
Marketing Manager, NETOS
At pharetra vulputate feugiat laoreet imperdiet semper nunc egestas vestibulum. Cursus eu non cras neque. Pulvinar mauris rutrum volutpat.
Risus, integer lectus id pellentesque. Volutpat faucibus aliquet amet, eu proin arcu. Dictum sit eu adipiscing enim turpis morbi elementum. Dignissim arcu feugiat commodo feugiat felis amet. Ipsum aenean odio turpis ut. Diam cursus nunc, consectetur id eget. Posuere mattis justo.
Quis lacus, ornare cursus consectetur sit at. Auctor arcu enim malesuada congue erat ornare. Augue sodales quis mauris et eu eget egestas. Et mauris euismod id sit commodo vivamus sed arcu. Et, volutpat at ac posuere id amet tellus. Ac pulvinar bibendum in quis mauris.
Seamless interface
Gravida pretium quam malesuada in pellentesque molestie magna pretium pellentesque.
Subscribe system
Euismod vel lacinia dictumst sollicitudin eu nibh et. Et non erat vel adipiscing risus faucibus.
Viverra sapien proin sagittis mauris est laoreet ut. Vitae sed volutpat lacus mi non.
End-to-end services
Mattis purus accumsan lectus quam risus, vitae faucibus. Suspendisse id donec quis enim at ullamcorper orci orci ipsum. Sociis mattis imperdiet fusce. Morbi eu lacinia velit sem lacus, id nunc.
Mobile & web applications
Nec dignissim fermentum quis fermentum orci. Sociis mattis imperdiet fusce nunc ipsum eu. Mattis purus accumsan lectus quam risus.
Fast like lightning
Dui, integer massa, condimentum arcu amet. Tincidunt odio neque lorem.
Works like a charm
Dui, integer massa, condimentum arcu amet. Tincidunt odio neque lorem.
Bright screen like the Sun
Dui, integer massa, condimentum arcu amet. Tincidunt odio neque lorem.
Limitless capacity
Dui, integer massa, condimentum arcu amet. Tincidunt odio neque lorem.
More buttons
Dui, integer massa, condimentum arcu amet. Tincidunt odio neque lorem.
Real deal
Dui, integer massa, condimentum arcu amet. Tincidunt odio neque lorem.
Alfonso Dorwart - CEO - Life & Lemon Co.
Meet our wonderful team
Gretchen Calzoni
Founder & CEO
Dapibus amet, elit risus aliquam augue ornare ultricies ultricies id. Arcu in sapien quam facilisis facilisis enim cras. Ornare cras id amet pulvinar aliquet augue massa, sed.
Talan Curtis
Product Manager
At amet, egestas tempus viverra risus, leo. In in lacinia morbi enim euismod scelerisque vitae ante. Cras nullam dui natoque in adipiscing urna, malesuada. Diam egestas libero egestas.
Paramètres du curseur
La page Nala Dark est un type de modèle spécial qui se compose de plusieurs curseurs. Vous pouvez les rassembler en les plaçant dans un groupe de curseurs. Mais garder les curseurs organisés n’est pas la seule chose qu’un groupe de curseurs fait. En fait, il vous permet également de publier vos curseurs groupés en une seule fois.
Couches
Les sliders utilisent de nombreuses couches intéressantes. Bien sûr, vous pouvez trouver les couches les plus populaires : titre, texte, image et bouton sur la plupart des diapositives. Ce sont les couches les plus basiques pour créer du contenu. Elles permettent d’ajouter des titres structurés, du texte long, des images et des CTA à vos sliders. Outre ces couches courantes, vous pouvez trouver une couche Compteur sur certaines diapositives. La couche Compteur est une couche spéciale qui compte à partir du numéro d’étoile jusqu’au numéro final que vous avez défini.
Animations
La page Nala Dark propose quelques effets étonnants. Le plus courant est l’animation de calque que vous pouvez trouver sur toutes les diapositives. Les animations de calque permettent de présenter vos calques de manière plus intéressante. En plus de rendre les diapositives plus intéressantes, elles contribuent également à leur donner vie.
L’autre effet intéressant que vous pouvez voir sur l’un des curseurs est le diviseur de forme. Les diviseurs de forme sont des conceptions graphiques qui aident à séparer les curseurs d’une manière plus intéressante.
Mise en page
Les mises en page sont très simples, mais il existe des solutions intéressantes. Par exemple, dans le premier curseur, vous pouvez voir un bouton personnalisé créé à l’aide d’une ligne à deux colonnes. La colonne de gauche a une couleur d’arrière-plan et contient une image. La colonne de droite ne contient qu’un calque d’en-tête. Ensuite, leur conteneur, la ligne, contient une lightbox qui ouvre une vidéo.
Sensible
Smart Slider est un slider réactif qui propose de nombreux outils pour garantir que votre contenu s’affiche parfaitement sur toutes les tailles d’écran. L’outil le plus populaire qui vous aide à optimiser votre slider pour les petits écrans est Font Resizer. Il vous permet de réduire (ou d’augmenter) la taille de la police sans affecter la vue d’un autre appareil.
Documentation associée : Où trouver la bibliothèque de diapositives ?
Article connexe : Smart Slider 3 – Bibliothèque de diapositives
Paramètres
Le Photo Story est un slider d’images pleine largeur , que vous pouvez facilement utiliser sur votre page de photographie . Chaque diapositive possède une image d’arrière-plan qui peut être votre photo, et vous pouvez créer un lien vers un story et accéder à votre blog.
Le curseur utilise la disposition pleine largeur afin de remplir la zone horizontale du navigateur. Lorsque vous changez de diapositive, l’image suivante apparaît en fondu. Cette animation de fondu provient de l’animation principale. Vous pouvez la définir ou la modifier dans les paramètres du curseur → onglet Animations.
Le curseur n’utilise aucun contrôle. Les flèches que vous pouvez voir sur celui-ci sont des calques d’image et sont liées à des actions de lien qui vous permettent de naviguer vers les diapositives suivantes ou précédentes.
Couches
Le curseur utilise des calques de base et simples : titres et images. Ils sont classés en lignes et en colonnes. Vous pouvez trouver tous les calques dans la liste des calques. Vous pouvez les personnaliser entièrement. Ces calques ont été ajoutés manuellement dans le curseur. Si vous souhaitez plus de 3 diapositives, vous pouvez remplacer « 03 » par « 04 », ce que vous pouvez facilement faire dans la fenêtre des calques.
Les calques jouent un rôle important dans le curseur. Ils ne contiennent pas seulement du contenu, mais vous pouvez également naviguer avec eux. Avec les 2 lignes où se trouvent les titres précédents et suivants, vous pouvez naviguer avec des actions de lien.
Animations
La meilleure fonctionnalité de ce slider est l’ animation du texte sur le gros titre en bas. Lorsque vous changez de diapositive, le texte se déplace avec une belle animation. Vous pouvez personnaliser cette animation en cliquant sur le calque → allez dans la fenêtre des calques → onglet Contenu. Vous trouverez ici une section d’animation de texte, où vous pouvez accéder au gestionnaire d’animation. Vous pouvez définir les modes dans lesquels le texte peut se déplacer, la durée ou la transformation.
Mise en page
À première vue, vous pourriez penser que le curseur utilise une disposition compliquée. Il y a beaucoup de lignes et de colonnes les unes dans les autres. La liste des calques peut vous aider à découvrir la structure. Vous pouvez également ouvrir ou fermer un groupe de lignes ou de colonnes avec les petites flèches à côté de leur nom, ce qui vous permet de simplifier la liste des calques.
Sensible
Le curseur est entièrement réactif. 2 colonnes sont masquées sur les appareils mobiles, vous ne pouvez donc voir que les images des flèches. Dans Smart Slider, la hauteur de votre diapositive est basée sur les calques et la hauteur de toutes les diapositives est basée sur votre diapositive la plus haute. Étant donné que ce curseur ne contient pas trop de calques, il sera petit. En utilisant des remplissages, vous pouvez augmenter la hauteur que vous pouvez définir dans les paramètres de la diapositive.
Article connexe : Comment créer une animation de texte sympa
Article connexe : Comment créer un magnifique curseur d’image réactif ?
💡 Les meilleures fonctionnalités de ce slider
- Diapositive précédente – pour la navigation
- Diapositive active
- Diapositive suivante – pour la navigation
- Arrière-plan du curseur, qui crée l’ effet estompé sur la diapositive suivante et précédente
Paramètres
Un curseur de couverture est un type spécial de curseur, qui affiche plusieurs diapositives les unes à côté des autres. Dans Smart Slider 3, vous pouvez créer un curseur de couverture à l’aide du type de curseur Showcase . Le type de curseur Showcase, comme les curseurs de couverture, affiche une seule diapositive au milieu et un nombre égal de diapositives sur ses côtés. En cliquant sur les diapositives sur les côtés, le curseur bascule vers la diapositive cliquée.
Les diapositives qui ne sont pas au milieu ont une opacité plus faible. Cela leur donne l’impression d’être légèrement atténuées. La configuration d’un tel effet est très simple et peut être effectuée en deux étapes seulement. Tout d’abord, définissez une couleur d’arrière-plan pour le curseur. Ensuite, réduisez l’opacité des diapositives Avant et Après.
Couches
Ce curseur se concentre sur les images et sur la façon dont il les affiche. Pour cette raison, chaque diapositive ne comporte que quelques calques. Le calque le plus évident est le calque de texte, qui affiche le texte de couleur blanche. Il accepte les codes HTML pour formater le contenu à l’intérieur. Nous avons donc mis en gras le texte « Jour X » sur chaque diapositive à l’aide de la balise HTML b.
Animations
L’animation la plus spectaculaire du curseur Cover Flow est l’effet Cover Flow réel. Bien que par défaut, le type de curseur Showcase ne ressemble pas à un curseur Cover Flow, il est facile de le configurer comme tel. Ce type de curseur dispose de nombreux paramètres d’animation intéressants, avec lesquels vous pouvez jouer pour créer un effet étonnant.
Il y a également une animation entrante de base sur le calque d’en-tête. L’effet s’estompe et se déplace dans le calque depuis la droite. Le mouvement est subtil, mais élégant.
Mise en page
Chaque diapositive comporte une ligne qui contient la couche de texte pour le contenu. Cette ligne sert à des fins de conception : elle possède un arrière-plan dégradé transparent à foncé. Par conséquent, elle contribue à augmenter la lisibilité du texte.
Sensible
Le curseur Cover Flow a subi deux modifications spécifiques aux appareils mobiles. Tout d’abord, la taille du texte a été réduite pour mieux s’adapter à la diapositive. Ensuite, nous avons ajusté les marges intérieures de la ligne et de la couche de contenu. Les marges intérieures sur les côtés de la ligne sont plus petites sur les appareils mobiles, ce qui permet au texte d’occuper plus d’espace horizontal. De plus, nous avons défini une marge intérieure supérieure sur la couche de contenu. Cela permet au curseur d’apparaître plus haut sur les appareils mobiles. Par conséquent, les diapositives semblent plus spacieuses.
Documentation associée : Comment créer une superposition pour les diapositives ?
Article connexe : Que devez-vous savoir sur les types de curseurs ?