Pixpa vous donne beaucoup de contrôle sur la façon d'afficher les images dans vos galeries.
En utilisant les options de style de la galerie, vous pouvez contrôler entièrement l'affichage de vos images dans la galerie en conjonction avec la disposition de la galerie.
Astuce: Les options de style du site de la galerie sont automatiquement appliquées à toutes les nouvelles galeries que vous créez.
Voir aussi: Comment remplacer le style de galerie à l'échelle du site dans une galerie spécifique ?
Dans cet article :
Vous pouvez personnaliser les options de la galerie du site à partir de la section Design (1).
Une fois dans la section Design, cliquez sur l'onglet Galeries (2).
Alternativement, vous pouvez également utiliser l'option de recherche du studio.
- Entrer Galeries (1) dans la barre de recherche.
- À partir des résultats associés, cliquez sur le Conception – Galeries choix (2).
Disposition de la galerie
- Disposition : Choisissez une mise en page qui sera appliquée à la galerie.
Découvrez comment modifier la disposition de la galerie. - Largeur : Choisissez la largeur de la galerie.
- »Pleine largeur' affichera la galerie en couvrant toute la largeur sans laisser de marge.
- »Boxed' affichera la galerie tout en laissant une certaine quantité de rembourrage à droite et à gauche de l'écran.
- »Largeur du chantier' peut être spécifié dans la section de conception. Vous pouvez spécifier ici une largeur fixe.
Il affichera la galerie en respectant la largeur fixe spécifiée.
Grille style
- Espacement des grilles : Spécifiez l'espace de gouttière entre les images dans les dispositions de grille. (0 – 250 pixels)
- Rayon du coin de l'image : Appliquez un rayon de bordure pour arrondir les coins de l'image dans les grilles de la galerie.
Par exemple , la galerie d'accueil du thème Lantern a un espacement de grille de 142px.
Après avoir appliqué l'effet « Rayon des coins d'image », vous verrez des bords arrondis sur les images, comme dans le modèle Beyond .
Couleurs de la grille
Opacité de base : si vous avez sélectionné le type de survol comme couleur d’accentuation de l’image, définissez l’opacité de base de la grille à partir d’ici.
- Base: La couleur de base est utilisée pour la formation de la grille et n'est visible que momentanément avant le chargement des images. Vous avez deux options pour la couleur de base de la grille.
- Choisissez la couleur : Choisissez cette option pour définir une couleur spécifique pour la base de la grille. Spécifiez n'importe quelle couleur et opacité pour la base de la grille.
- Couleur d'accentuation : Utilisez des couleurs d'accent d'image pour la base de la grille. Cela donnera une grille multicolore utilisant les couleurs d'accentuation de chaque image.
- Opacité de base : Si vous avez sélectionné le type de base comme couleur d'accent, définissez l'opacité de la base de la grille à partir d'ici.
- Survolez : Cela affecte la grille lorsque le curseur passe sur l'image.
- Choisissez la couleur : Définissez la couleur de survol par défaut et son opacité si vous avez sélectionné Choisir la couleur pour vos images de grille.
- Couleur d'accentuation : Utilisez des couleurs d'accent d'image pour la base de la grille. Cela donnera une grille multicolore utilisant les couleurs d'accentuation de chaque image.
- Opacité du survol : Si vous avez sélectionné le type de survol comme couleur d'accent, définissez l'opacité de base de la grille à partir d'ici.
La couleur d'accentuation de l'image est la couleur dominante d'une image qui est sélectionnée lorsque vous téléchargez une image.
Effet de survol de la grille
L'effet de survol ne sera utilisé que dans la disposition de la grille. Vous pouvez afficher les options suivantes au survol en mode grille.
- Aucun effet – Pour aucun effet sur les images en mode grille.
- Couleur - Pour uniquement survoler la couleur de vos images en mode grille.
- Couleur et titre de l'image – Pour la couleur de survol de l'image avec le titre de l'image. Vous pouvez définir la couleur de survol et la couleur/la police/la taille/le poids du texte du titre de l'image dans le option suivante.
- Couleur et icône – Pour l'image, survolez la couleur avec une icône.
- Couleur, titre de l'image et icône - Pour la couleur de survol de l'image, le titre de l'image et l'icône. Vous pouvez également ajouter des icônes sur vos images comme plus, flèche, croix et œil.
Icône de survol
- Les icônes de survol ne sont utilisées que dans les dispositions en grille des galeries. Vous pouvez choisir d'afficher une icône sur vos images en mode grille.
- Les options sont – plus, flèche, croix et œil. Ceci n'est applicable que lorsque l'icône est sélectionnée dans le effet de survol menu déroulant.
Titre de l'image
- Ceci est appliqué lorsque vous choisissez d'afficher les titres des images au survol.
Bordure d'image
Pixpa propose une fonctionnalité de bordure d'image polyvalente qui vous permet d'améliorer l'attrait visuel de votre site web en ajoutant des bordures autour des images. Cliquez ici pour en savoir plus sur les bordures d'image.
Affichage Lightbox
1. Ouvrez la Lightbox
- Lorsque les images sont affichées dans une grille, cliquer sur une image l'ouvre en mode Lightbox (affichage plein écran).
- Vous pouvez l'activer ou le désactiver à partir d'ici.
Découvrez le mode Lightbox en action :
2. Activer le zoom
- Activer/désactiver le zoom sur les images en mode Lightbox.
- La fonction de zoom fonctionnera également sur les sites Web de bureau et mobiles.
3. Option d'affichage
- Choisissez comment vous souhaitez afficher vos images en plein écran.
- Vous pouvez choisir parmi afficher uniquement les images, image avec vignettes, image avec légendes en bas et image avec légendes à droite.
Par exemple , une galerie avec l'option « afficher uniquement l'image ».
Par exemple , une galerie affichant les images sous forme de vignettes.
Par exemple , une galerie avec une image et une légende en bas.
Par exemple , une galerie avec une image et une légende à droite.
4. Options de couleurs de superposition
La couleur de superposition est la couleur d'arrière-plan qui apparaît lorsque les images sont visualisées en mode lightbox. Ajuster cette couleur permet d'harmoniser l'apparence de vos images avec le design de votre site web et d'offrir une présentation soignée et cohérente en mode lightbox.
- Choisissez le Couleur personnalisée option permettant de définir une couleur d'arrière-plan spécifique pour toutes les images visualisées en mode lightbox. Vous pouvez définir votre couleur préférée dans le Couleur de superposition multiculturel. Apprendre encore plus.
- Choisissez Couleur accentuée pour appliquer une couleur unique à partir des tons d'accentuation de chaque image. Vous pouvez personnaliser cela individuellement pour chaque image comme vous le souhaitez. Apprendre encore plus.
- Si vous sélectionnez l'option Couleur d'accentuation, vous pouvez ajuster la Opacité (transparence) de la couleur de fond.
5. Affichage des images
Spécifiez le mode d'affichage pour la Lightbox -
- Échelle et ajustement – Les images seraient mises à l'échelle pour s'adapter à la zone de navigateur disponible afin que l'image complète soit visible.
- À fond perdu - Les images seraient dimensionnées pour remplir toute la zone de navigateur disponible - certaines parties de l'image peuvent être coupées lors de la réalisation de cet affichage en plein écran.
Par exemple , une galerie avec un mode d'échelle et d'ajustement permettant aux images de s'adapter à la hauteur disponible du navigateur.
Par exemple , une galerie en mode plein écran où les images seraient étirées pour remplir la largeur disponible du navigateur.
6. Les contrôles
Dans la vue Lightbox, choisissez la manière dont vous souhaitez afficher les commandes de navigation telles que l'icône d'informations sur l'image, l'icône d'informations sur la galerie, l'icône en forme de croix, l'icône d'ajustement du navigateur, etc. les options sont :
- Toujours visible (toujours afficher les commandes de navigation au-dessus des images)
- Afficher au survol (les commandes de navigation ne s'afficheront que lorsque vous déplacerez votre curseur sur l'écran)
- caché (les commandes de navigation ne seront jamais affichées).
Par exemple , une galerie avec des commandes de navigation toujours visibles.
Par exemple , une galerie avec des commandes de navigation s'affichant au survol de la souris.
Par exemple , une galerie avec des commandes de navigation cachées.
7. Style suivant/précédent
Dans l'affichage complet de l'image, choisissez comment vous souhaitez afficher vos flèches de navigation.
- Flottant : Les flèches de navigation flotteront. Déplacez votre curseur sur l'image et cliquez sur l'écran une fois que la flèche apparaît pour naviguer à travers les images.
- Chevron
- Flèches
- Afficher la flèche dans le cercle
- caché : Désactivez complètement les flèches de navigation.
8. Nom du fichier image
- Choisissez d'afficher le nom du fichier lorsque l'image est visualisée en mode lightbox.
Voir en action :
9. Taille maximale de l'image
Ce paramètre contrôle la résolution maximale à laquelle les images de votre galerie s'affichent en mode visionneuse. Vous pouvez choisir parmi les options suivantes :
- Auto - Adapte automatiquement la taille de l'image en fonction de l'écran et de la résolution de l'appareil. Le système sélectionne intelligemment la version la plus adaptée pour garantir une clarté et des performances optimales.
- Tailles fixes – 2048 px, 1500 px, 1000 px, 800 px ou 500 px. Choisir une taille fixe signifie que toutes les images Lightbox seront affichées à cette résolution maximale, selon l'appareil ou la taille de l'écran de l'utilisateur.
Si l'image originale que vous avez téléchargée a une résolution inférieure à la taille sélectionnée, elle sera affichée dans sa résolution d'origine . Elle ne sera ni agrandie ni mise à l'échelle.
Paramètres du diaporama
- Diaporama: Cliquez sur autoplay pour démarrer automatiquement le diaporama dans la visionneuse d'images complète. Vous pouvez également désactiver le diaporama.
- La vitesse : Sélectionnez la vitesse de transition. Vous pouvez choisir entre 1 et 10 secondes.
- Transition : Choisissez le style de transition du diaporama.
Voir le diaporama en action :
Options de teinte
Cette fonctionnalité permet d'utiliser la couleur d'accentuation des images comme arrière-plan lorsqu'elles sont visualisées en mode Lightbox . Cela améliore l'expérience visuelle en harmonisant l'arrière-plan avec la couleur d'accentuation de l'image.
- Utiliser la couleur d'accent comme teinte:
- Par défaut, le Couleur d'arrière-plan de la Lightbox sera appliqué lors de la visualisation des images en mode Lightbox.
- Lorsque vous activez cette option, le Couleur accentuée associé aux images sera utilisé comme couleur d'arrière-plan de la Lightbox, offrant un aspect plus dynamique et visuellement cohérent.
- Opacité de la teinte:
- Vous pouvez gérer l'opacité du Teinte de couleur d'accentuation en utilisant le curseur Teinte.
- Le réglage de l'opacité mélange les Couleur accentuée avec la couleur d'arrière-plan Lightbox, vous permettant d'obtenir une esthétique homogène et professionnelle.
Affichage mobile
- Montrer comme : Choisissez d'afficher la galerie en tant que Image Slider ou en mode grille dans la vue mobile.
- Colonnes de la grille : Choisissez parmi Affichage 1 colonne ou 2 colonnes pour l'affichage de la grille dans la vue mobile.
- Espacement des grilles : Mettez le gouttière entre les images dans vue mobile.
Articles connexes:
- Créer une galerie
- Téléchargez des articles dans votre galerie
- Meilleures pratiques pour nommer les fichiers image
- Ajouter des légendes d'image