Galeries d'images

La galerie d'images de Sitely est plus qu'un simple diaporama d'images - ses utilisations potentielles vont bien au-delà de l'affichage d'une galerie d'images. C'est l'une des fonctionnalités les plus récentes de Sitely et elle représente un grand pas en avant dans la manière de présenter l'information sur une page Sitely. L'élément de galerie d'images prend désormais en charge à la fois les images et les PDF. L'une des questions souvent posées par les utilisateurs est de savoir comment intégrer un document PDF dans une page Web Sitely. Traditionnellement, la réponse était de faire ce que toutes les autres applications de conception Web font - ajouter du code à la page qui permettra au PDF d'être affiché dans un iframe. Clairement, ce n'est pas ce que les développeurs avaient en tête lorsqu'ils ont conçu Sitely comme un outil de conception Web sans code. Eh bien, tout cela appartient au passé. Le nouvel élément de galerie s'occupe de l'intégration des documents PDF dans votre page Web avec facilité et simplicité, et il ajoute quelques raffinements pour rendre la visualisation des images ou des pages PDF un plaisir pour les utilisateurs.

Lorsque l'élément de galerie est ajouté pour la première fois à une page, il ressemble à ceci. C'est un curseur d'aspect assez standard qui attend que vous ajoutiez du contenu.

Lorsqu'elle est utilisée comme une galerie d'images traditionnelle, vous ajouteriez des images jpg ou png via la section 'Galerie d'images' du panneau de style. Elle ressemble à ceci.

En cliquant sur le bouton Modifier, vous découvrirez un panneau de sélection d'images où vous pourrez ajouter votre contenu. Il suffit de cliquer sur le bouton Ajouter pour parcourir les images sur votre disque.

Vous pouvez également ajouter des pages PDF. Il peut s'agir de fichiers PDF d'une seule ou de plusieurs pages. Lorsque vous ajoutez des PDF, Sitely convertit chaque page en une image de haute qualité qui est intégrée dans la galerie. Cela facilite l'intégration de présentations ou de brochures dans votre page Web et rend vos documents complètement indépendants des polices. Combinées à la fonction de visionneuse (lightbox) de la galerie, les pages seront agrandies à l'écran pour une lecture facile. Dans l'exemple ci-dessous, une présentation Keynote a été exportée en fichier PDF et ajoutée à la galerie d'images. Cliquez sur la galerie pour voir la simplicité d'affichage du matériel de présentation sur une page Web.

Il existe de nombreuses façons créatives d'utiliser le nouvel élément de galerie d'images. Par exemple, vous pourriez créer une simple galerie de deux images et la faire jouer automatiquement en diaporama pour créer un appel à l'action accrocheur sur votre page. Voici un exemple.

‍Dans cet exemple, vous pourriez définir différentes actions au clic sur chaque image - une pour ouvrir un formulaire d'inscription dans une fenêtre contextuelle, l'autre pour ouvrir une fenêtre contextuelle différente qui explique l'offre plus en détail. Essayez-le sur cet exemple. - attendez que les images changent, puis cliquez dessus.

‍Vous n'avez pas besoin d'être un graphiste pour créer de simples bannières comme celle-ci. Vous pourriez simplement utiliser les outils Apple dont vous disposez. Cet exemple a été réalisé comme une présentation Keynote de deux pages (taille personnalisée), puis chaque diapositive a été exportée en tant qu'image. Vous pourriez également exporter les deux diapositives en un seul fichier PDF et l'utiliser pour remplir la galerie d'images.

Maintenant que nous avons vu ce que la nouvelle galerie d'images peut faire, examinons comment la configurer et la styliser. Comme presque tous les éléments dans Sitely, tout se configure dans le panneau Style. Nous avons vu ci-dessus à quel point il est simple d'ajouter du contenu, alors passons au style et aux options. La deuxième section du panneau de style vous permet de définir une action au clic pour chaque image individuelle. C'est une option très flexible qui vous permet d'ajouter différentes actions à différentes images. Toute action actuellement prise en charge dans Sitely peut être définie. L'action la plus courante pour une galerie serait probablement l'option 'Zoomer l'image dans la visionneuse'. Cela affichera les images à une plus grande échelle sur un fond estompé pour donner aux utilisateurs une meilleure vue. Si vous vouliez appliquer la même action au clic à toutes les autres images, cliquez sur l'icône des paramètres (trois points dans un cercle). Cela présentera l'option d'appliquer l'action à toutes les images. Si l'option 'Afficher l'étiquette' est cochée, votre diapositive sera superposée d'une étiquette de texte. Celle-ci peut être stylisée et déplacée comme vous le souhaitez - même sous la diapositive si nécessaire.

Lorsque l'option de visionneuse (lightbox) est choisie comme action au clic, le panneau de style vous présentera un certain nombre d'options supplémentaires. Celles-ci sont présentées ci-dessous et sont largement explicites.

Désélectionner la case Diaporama supprimera les flèches gauche et droite, à la fois sur le canevas et lorsque le diaporama s'ouvre dans une visionneuse. Cependant, une fois la visionneuse ouverte, les diapositives peuvent toujours être avancées en utilisant des gestes de balayage. Cela peut être une option utile si vous voulez forcer les utilisateurs à ouvrir la galerie dans une visionneuse avant de pouvoir faire défiler les images. Effectivement, la première image restera statique sur la page. Bien sûr, vous devrez ajouter une superposition d'action sur l'image pour informer les gens qu'elle peut être agrandie.

‍L'ensemble d'options suivant vous permet de styliser les différents éléments des boutons de navigation du diaporama, y compris la couleur standard des flèches, ainsi que les couleurs au survol et au clic de la souris.

‍Le bouton de fermeture est l'icône affichée en haut à droite du diaporama qui permet aux utilisateurs de quitter le diaporama et de revenir à la page. Vous avez le choix entre plusieurs styles, chacun pouvant avoir des couleurs différentes appliquées en fonction de l'état du bouton.

‍La superposition d'action est l'endroit où vous sélectionnez une icône à superposer sur vos images de galerie pour faire savoir aux gens que les images sont zoomables. Cette superposition peut être définie diapositive par diapositive et comprend des versions en noir et en blanc, en fonction de la couleur de fond de vos images. Si toutes vos images ont un fond similaire, comme dans notre présentation Keynote ci-dessus, vous pouvez appliquer une superposition d'action uniquement à la première diapositive, puis définir 'appliquer l'action à toutes les images' à côté de l'option 'zoomer l'image dans la visionneuse'.

‍Les options finales vous donnent le contrôle sur la façon dont votre galerie sera affichée. L'option letterbox est conçue pour permettre l'inclusion d'images de différents rapports d'aspect. Si vos images sont réglées sur 'ADAPTER', leur taille sera ajustée pour s'adapter aux limites de la galerie. Cela peut entraîner un effet letterbox, soit à gauche et à droite des images hautes, soit au-dessus et en dessous des images larges. Vous pouvez utiliser cette option pour définir une couleur de fond pour cet espace vide autour de vos images. Si cette option est réglée sur 'REMPLIR', vos images seront zoomées pour remplir la boîte de la galerie. Cela peut entraîner le rognage de certaines images.

‍Les options de bordure, d'arrondi et d'ombre appliquent l'effet à toutes les diapositives, mais pas aux vignettes, si elles sont présentes.

‍L'option Transition vous permet de définir la vitesse des transitions que vous appliquez à votre diaporama. Les options permettent également un fondu enchaîné des images, ou un effet de glissement. Notez que l'option de fondu enchaîné ne fonctionnera que dans la version de la galerie sur le canevas - la version en visionneuse aura toujours une transition de glissement.

‍La sélection de la case à cocher Vignettes vous offrira des options supplémentaires pour afficher une grille de vignettes sous ou au-dessus de votre galerie. Cela permettrait aux utilisateurs de cliquer sur les vignettes pour naviguer dans votre galerie. En alternative, vous pourriez choisir d'avoir des points à la place.

‍La fonction Diaporama automatique fera avancer automatiquement votre diaporama sans aucune interaction de l'utilisateur. Les diapositives peuvent être mises en pause pendant une période de temps spécifique avant de passer à la suivante. Vous pouvez également faire en sorte que le diaporama se mette en pause au survol de la souris.

Couleur et dégradés