À l’intérieur de ce tutoriel, nous allons voir comment créer un slider et l’ajouter à un site web construit sur Framework360. Un slider ést un contenu qui est généralement ajouté dans la première partie de la page d'accueil du site web. Le slider ést composé d'une image, d'un carrousel d'images ou d'une vidéo, et au-dessus du contenu multimédia se trouvent un titre et une description.
Étape 1 : Créons notre slider
Tout d'abord, allons créer notre slider en cliquant sur la sous-voix de la barre latérale de Framework360 “Slider” en suivant les étapes suivantes :
Site web > Slider
À ce stade, l'écran s'ouvrira avec tous les curseurs que nous avons réalisés. Pour créer un nouveau curseur, il suffit de cliquer sur le bouton vert en haut à droite “Ajouter”.
Une fois dans l'écran de création du curseur, nous allons ajouter le titre de notre curseur et définir les différentes options relatives au curseur présentes dans les sections situées sous la section dédiée au titre.
Analisons maintenant les différentes sections.
SECTION “OPTIONS”
Dans la section “Options”, nous définissons les paramètres généraux de notre curseur. Plus précisément, sous “Hauteur du curseur”, nous définissons la hauteur que notre curseur doit avoir. Sous “Autoplay”, si le curseur est composé d'un carrousel d'images, nous définissons si celles-ci doivent être changées automatiquement par le système après un temps choisi par nos soins ; en ne activant pas l'autoplay, ce sera le visiteur qui devra faire défiler les images insérées dans le curseur. Sous “ Loop” nous pouvons décider de relancer le carrousel d'images une fois qu'elles ont toutes été affichées ou de garder l'affichage de la dernière image. Dans la section “Flèches”, nous pouvons décider d'ajouter des flèches à droite et à gauche du slider afin que le visiteur puisse changer manuellement les images. Enfin, en cliquant sur le bouton “Ordre aléatoire”, nous pouvons faire afficher les images que nous avons insérées dans un ordre aléatoire ; sinon, l'affichage suivra l'ordre d'insertion.
SECTION “FOND”
En continuant à faire défiler la page de création du slider, dans la section “Fond”, nous insérons l'image qui composera notre slider. Dans cette section, sous “Taille”, nous définissons la taille que devra avoir l'image chargée dans le slider ; généralement, le mode utilisé est cover, qui permet de couvrir sur n'importe quel type d'écran la largeur entière de l'écran avec notre image. Dans la section “Répéter”, nous pouvons décider si l’image devra se répéter plusieurs fois jusqu'à couvrir toute la section ; généralement, en mettant le mode cover dans la section “Dimension”, ici nous insérons le mode no-repeat. Dans la section “Position”, nous pouvons décider de la position du slide ; généralement, à cette section est inséré le mode center-center. Dans la section “Attachement”, on laisse généralement le mode par défaut. Enfin, dans les sections “Image Desktop” et “Image Mobile”, nous téléchargeons notre image pour l'affichage respectivement sur PC et mobile. Si nous n'insérons pas l’image pour mobile, le système affichera l’image desktop même pour ce positionnement. Nous conseillons d'insérer également une image pour l'affichage mobile avec une dimension carrée afin d'alléger le chargement de la page lorsque l'utilisateur visualisera la page sans connexion Wi-Fi.
SECTION “VIDÉO”
Si, en revanche, nous souhaitons qu'un vidéo soit affichée dans notre diaporama et non une image, dans la section “Vidéo”, à l'option “Vidéo d'arrière-plan”, nous insérons le lien d'une vidéo YouTube ou Vimeo qui sera affichée comme arrière-plan sur notre diaporama. Toujours dans la section “Vidéo”, à l'option “À la fin de la vidéo”, nous définissons si, à la fin de la vidéo, la lecture doit redémarrer, cacher la vidéo ou l'arrêter sur le dernier cadre. Enfin, à l'option “Afficher sur”, nous pouvons décider d'afficher la vidéo sur desktop, tablette et mobile ou de cacher l'affichage de la vidéo dans l'un de ces emplacements.
SECTION “OVERLAY”
À l'intérieur de la section “Overlay”, nous pouvons décider d'appliquer un dégradé coloré sur l'image ou la vidéo que nous avons téléchargée. Ce choix peut être effectué via l'option “Dégradé”. Alternativement, nous pouvons sélectionner une couleur via l'option “Couleur”, qui sera superposée au contenu téléchargé. Ensuite, en utilisant l'option “Opacité”, nous pouvons réduire l'opacité de la couleur afin de faire apparaître l'image ou la vidéo en dessous.
SECTION “CONTENU”
À l’intérieur de la dernière section présente dans l’écran de création du slider, appelée “Contenu”, à l'aide du constructeur visuel classique de Framework360, ajoutons un titre et une description qui devront être affichés sur notre slider.
Une fois la réalisation du slider terminée, cliquons sur le bouton vert en haut à droite “Sauvegarder” pour enregistrer le travail.
Étape 2 : Ajoutons le slider à la page de notre site web
Après avoir réalisé notre slider, comme vu dans l'étape précédente, nous devons maintenant l'insérer dans la page de notre site web où nous souhaitons qu'il soit affiché. Pour ce faire, nous devons nous rendre dans la sous-rubrique de la barre latérale “Pages” en suivant les étapes suivantes :
Site Web > Pages
Dans l’écran de détail “Pages”, nous trouverons la liste des pages présentes sur notre site web. À ce stade, cliquons sur la page où nous souhaitons insérer le slider et, en utilisant le constructeur visuel, sélectionnons le bloc “Slider” et faisons-le glisser dans la section de la page web où nous voulons qu'il soit affiché, comme illustré dans l'image suivante :
Une fois le bloc inséré, nous allons séléctionner le slider que nous avons créé.
Enfin, cliquons sur le bouton en haut à droite “Sauvegarder” pour enregistrer l’insertion du slider.
