Introduction
Utilisation de Sitely
Éléments
Comment faire
Il s'agit d'un bloc de mise en page spécial conçu pour ajouter facilement du contenu vidéo et image à votre page dans une structure de type grille..
Commencez par ajouter l'élément à votre canevas Sitely et ajoutez le contenu image ou vidéo. Vous faites cela depuis le panneau de style pendant que l'élément de grille Image/Vidéo est sélectionné sur le canevas. L'option ressemble à ceci :
Bien que la grille, lorsqu'elle est placée pour la première fois sur le canevas, ne montre qu'une grille d'une seule rangée de trois espaces réservés, elle s'agrandira pour accueillir autant de contenu que vous en ajoutez. Par exemple, si vous ajoutez six images, vous verrez la grille s'étendre à trois colonnes et deux rangées - si vous ajoutez douze images, votre grille s'agrandira à trois colonnes sur quatre rangées. Pour ajouter du contenu depuis votre disque, cliquez sur le bouton Ajouter Image/Vidéos. Pour ajouter du contenu hébergé sur YouTube ou Vimeo, cliquez sur les boutons appropriés. Vous avez également la possibilité d'ajouter des pages PDF - plus sur cette option dans un instant. Après avoir ajouté du contenu, la grille ressemblera à quelque chose comme ceci :
Vous pouvez maintenant ajuster les cellules de la grille individuellement pour créer un aspect plus esthétique à votre grille. Sélectionnez chaque cellule de la grille tour à tour, soit directement sur le canevas, soit depuis le panneau des calques. Assurez-vous de sélectionner la cellule de la grille et non l'image elle-même. La différence peut être vue ci-dessous. Les poignées de périmètre blanches indiquent que l'image a été sélectionnée. Les 'X' gris pâles indiquent que la cellule est sélectionnée.
La modification de l'image affectera l'image dans la cellule individuelle, la modification de la cellule affecte généralement toutes les cellules, car leurs paramètres d'arrière-plan sont communs. Il est possible de modifier l'arrière-plan d'une cellule individuelle, via l'option Modifier les arrière-plans -> Cellule sélectionnée, mais ce n'est pas le défaut.
Avec la cellule sélectionnée, allez dans le panneau de style et définissez le nombre de lignes et/ou de colonnes que vous souhaitez que cette cellule occupe. Voici à quoi ressemble l'option :
Dans l'exemple ci-dessus, la première cellule a été configurée pour s'étendre sur 2 colonnes et 1 rangée. Continuez à parcourir chaque cellule jusqu'à ce que votre grille soit stylisée à votre goût. Dans notre exemple de grille ci-dessous, nous avons modifié la grille et l'avons stylisée avec des couleurs de fond et des bordures pour qu'elle ressemble à ceci - nous avons montré les étendues de cellules pour chaque cellule de la grille afin que vous puissiez mieux comprendre comment elle a été créée.
En plus de la grille simple, un élément de grille image/vidéo peut être disposé en curseur horizontal, ou en modes Flow et Carrousel. Les modes curseur rassemblent toutes les cellules de la grille sur une seule rangée horizontale. Les modes Flow et Carrousel affichent les cellules avec deux effets de perspective 3D différents, tandis que le mode Galerie les affiche sans aucune perspective.
En mode curseur, la grille dispose d'un certain nombre d'options spécifiques :
Par défaut, cliquer sur n'importe quelle image de la grille l'ouvre dans une lightbox. En général, l'image s'agrandit au-dessus d'un arrière-plan assombri, que l'on peut fermer en cliquant n'importe où sur l'arrière-plan ou sur un bouton de fermeture sur l'image (comme les images sur cette page). Toutefois, avec la Grille Image/Vidéo, vous avez également la possibilité de créer un diaporama à partir du contenu de votre grille. Concrètement, cliquer sur n'importe quel contenu de la grille ouvrira une lightbox comme d'habitude, mais avec la possibilité supplémentaire de faire défiler l'ensemble du contenu de la grille pendant que la lightbox est ouverte. Voici à quoi cela ressemble sur une page web :
Vous avez remarqué les flèches de défilement gauche et droite ? Elles sont ajoutées en activant les options du diaporama dans le panneau de style. Avec la Grille Image/Vidéo sélectionnée sur le canevas, veillez à cocher les options pertinentes pour que cette fonctionnalité fonctionne. Le panneau de style proposera de nombreuses options pour styliser votre grille, les cellules et la lightbox, alors n'hésitez pas à toutes les explorer.
Grâce à la capacité de Sitely d'importer des documents PDF dans le bloc de mise en page Image/Vidéo, vous pouvez désormais réaliser des choses qui étaient auparavant assez difficiles à obtenir. Par exemple, vous pouvez importer une brochure multipage ou une copie PDF d'une présentation Keynote. Ce faisant, votre grille sera remplie avec chaque page de votre document (1 page par cellule de grille). Il est évident que cela peut créer de nombreuses cellules de grille que vous ne souhaitez pas forcément montrer aux visiteurs de votre site. À la place, vous voudrez peut-être qu'ils ne voient que la première page, puis les laisser ouvrir le diaporama pour consulter les autres pages. C'est facile à faire dans Sitely. Ci-dessous se trouve un exemple d'une présentation de 20 pages exportée depuis Keynote en tant que fichier PDF multipage. Nous voulons seulement que les utilisateurs voient la diapositive d'ouverture, et qu'ils ne voient le reste que lorsqu'ils ouvrent le diaporama. Pour ce faire, nous modifions les tailles et la mise en page de la grille. Voici à quoi ressemble notre grille après avoir appliqué un peu de style.
Le résultat ci-dessus a été obtenu en réglant les cellules à 50 px de largeur, 50 px de hauteur, et des espacements vertical et horizontal de 10 px — le tout défini dans le panneau de style.
La première cellule a été sélectionnée et configurée pour s'étendre sur 20 colonnes et 9 rangées. Cela crée l'illusion d'une image principale avec un ensemble de vignettes en dessous, comme illustré ci-dessus. Bien que les vignettes puissent rester visibles, vous pouvez souhaiter les masquer afin que seule l'image principale soit visible. Les personnes qui voient les vignettes peuvent simplement supposer que l'image principale changera lorsqu'on clique sur une vignette, ce qui n'est peut-être pas l'impression que vous souhaitez donner. Pour masquer les vignettes, sélectionnez chaque cellule de vignette à tour de rôle et définissez-la pour NE PAS s'afficher sur cet appareil dans le panneau ARRANGER. Désormais, lorsqu'on clique sur l'image principale, le diaporama démarre, permettant aux utilisateurs de naviguer en avant et en arrière dans la présentation. Essayez-le dans l'exemple en direct ci-dessous.
Cliquez pour commencer la présentation
La raison pour laquelle nous réduisons la taille des vignettes est simplement de maintenir le bloc de mise en page à une hauteur qui nous permet d'ajouter du contenu sous la présentation sans avoir à superposer ce contenu à l'intérieur du bloc de mise en page lui-même. Au lieu de cela, la présentation reste à l'intérieur de son propre bloc de mise en page, qui peut être déplacé sur la page sans interférer avec les éléments environnants. De plus, si les vignettes n'étaient pas réduites en taille, le bloc de mise en page pourrait atteindre une hauteur bien supérieure à celle du contenu de votre page, provoquant l'apparition d'un grand espace blanc au bas de votre page Web.
Cette technique peut également être utilisée pour afficher une brochure PDF de plusieurs pages. Clairement, vous ne voulez pas que les utilisateurs voient toute une grille de pages de brochure individuelles, donc en faisant disparaître efficacement les pages supplémentaires, vous vous retrouverez avec juste une couverture de brochure sur laquelle les utilisateurs peuvent cliquer pour lire toute la publication. De même, vous pouvez avoir un grand nombre de vidéos que vous souhaitez montrer au monde, mais ne voulez pas nécessairement les afficher sous forme d'une grande grille de vidéos individuelles sur la page. Dans ce cas d'utilisation, vous créeriez généralement une grande image d'affiche vidéo invitant les utilisateurs à consulter votre galerie de vidéos. Cette image serait définie comme votre première grande diapositive, s'étendant sur un plus grand nombre de colonnes de la grille. Cela garde votre page libre de tout encombrement tout en donnant aux utilisateurs l'accès à toute une bibliothèque de contenu vidéo. Si vous souhaitez autoriser la sélection individuelle de vidéos et/ou d'images, vous pouvez créer des vignettes plus grandes et les garder visibles sur la page. Celles-ci apparaîtront sur une ou plusieurs rangées sous la plus grande image de la page.
Les tailles des cellules de la grille sont définies appareil par appareil. Vous devrez donc très probablement ajuster les tailles en conséquence pour chaque appareil pour lequel vous concevez. Il est également important de noter que sur les appareils de type smartphone, il n'y aura pas de flèches de chaque côté de la présentation du diaporama. À la place, les utilisateurs utiliseront le geste de balayage courant pour naviguer dans votre présentation. Il n'est guère nécessaire de concevoir spécifiquement pour un smartphone en mode paysage. La rotation du téléphone agrandira automatiquement la présentation pour s'adapter à l'orientation paysage.
Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !
Mis à jour pour Sitely 6
Droits d'auteur ©2025 Crinon SRL
Ce site utilise des cookies.
Veuillez consulter notre politique de confidentialité pour en savoir plus.
