Wix Pro Gallery : Personnaliser le design de votre galerie
Temps de lecture : 8 min
Faites ressortir votre galerie sur votre site en ajoutant quelques personnalisations de design. Vous pouvez donner à votre galerie une touche professionnelle en personnalisant la mise en page, les couleurs, les polices et bien d'autres choses encore.
Pour personnaliser le design de votre Pro Gallery :
- Cliquez sur la Wix Pro Gallery dans votre Éditeur.
- Cliquez sur Paramètres.
- Cliquez sur l'onglet Design.
- Choisissez ce que vous souhaitez personnaliser :
Superposition et icônes
Une superposition se trouve au-dessus d'une image et ajoute un effet supplémentaire lorsque vous survolez une image avec votre souris. Vous pouvez personnaliser cet effet ainsi que vos icônes.
- Cliquez sur Superposition et icônes .
- Choisissez entre une superposition complète ou partielle et personnalisez-la à l'aide des options disponibles :
- Superposition complète : La superposition couvre l'ensemble de l'élément de la galerie.
- Dégradé : Cliquez sur le curseur pour activer la superposition d'un dégradé.
- Couleur et opacité 1 et 2 : Cliquez sur la case de couleur correspondante pour personnaliser les couleurs du dégradé. Faites ensuite glisser le curseur pour ajuster l'opacité des couleurs.
- Direction du dégradé : Faites glisser le curseur pour ajuster la direction de la superposition du dégradé.
- Couleur de l'icône : Cliquez sur la case de couleur pour modifier la couleur des icônes de la galerie qui apparaissent lors du survol.
- Couleur de superposition : Cliquez sur la case de couleur pour choisir une couleur. Faites ensuite glisser le curseur pour modifier la transparence de la superposition de couleur.
- Couleur de l'icône : Cliquez sur la case de couleur et sélectionnez une nouvelle couleur pour les icônes de votre galerie.
- Dégradé : Cliquez sur le curseur pour activer la superposition d'un dégradé.
- Superposition partielle : La superposition ne couvre qu'une partie de l'élément de la galerie.
- Définir la taille sur : Gérez la taille de votre superposition en pourcentages ou en pixels.
- Taille : Faites glisser le curseur ou saisissez une valeur pour choisir une taille de superposition.
- La superposition commence à partir : Choisissez l'endroit où votre superposition est positionnée.
- Marge intérieure : Faites glisser le curseur pour ajuster l'espace entre la bordure de la galerie et votre superposition.
- Dégradé : Cliquez sur le curseur pour activer la superposition d'un dégradé.
- Couleur et opacité 1 et 2 : Cliquez sur la case de couleur correspondante pour personnaliser les couleurs du dégradé. Faites ensuite glisser le curseur pour ajuster l'opacité des couleurs.
- Direction du dégradé : Faites glisser le curseur pour ajuster la direction de la superposition du dégradé.
- Couleur de l'icône : Cliquez sur la case de couleur pour modifier la couleur des icônes de la galerie qui apparaissent lors du survol.
- Couleur de superposition : Cliquez sur la case de couleur pour choisir une couleur. Faites ensuite glisser le curseur pour modifier la transparence de la superposition de couleur.
- Couleur de l'icône : Cliquez sur la case de couleur et sélectionnez une nouvelle couleur pour les icônes de votre galerie.
- Superposition complète : La superposition couvre l'ensemble de l'élément de la galerie.
- Choisissez un effet de superposition parmi les options disponibles :
- Aucun : La superposition n'a aucun effet.
- Fondu : La superposition apparaît graduellement au survol.
- Allonger : La superposition s'étend lors du survol.
- Glisser haut : La superposition glisse lors du survol.
- Glisser droite : La superposition glisse à droite lors du survol.
Textes
Vous pouvez personnaliser le design du titre et du texte de description, à condition de choisir de les afficher dans l'onglet Mise en page. Si vous ne voyez pas les options Texte (étape 1 ci-dessous), allez à l'onglet Mise en page, cliquez sur Personnaliser la mise en page et cochez les cases situées à côté du Titre et de Description pour les afficher.
- Cliquez sur Textes.
- Personnalisez le texte en utilisant les options ci-dessous :
- Informations à afficher : Cochez la case en regard de l'information que vous souhaitez afficher (titre, description, compteur de diapositives).
Remarque : L'option Compteur de diapositives n'est disponible dans la mise en page Diaporama que si vous avez activé la fonction Diapositives automatiques. - Style et couleur titre : sélectionnez la police et la couleur du texte du titre.
- Style et couleur de la police description : sélectionnez la police et la couleur du texte de description.
- Alignement horizontal : Choisissez d'aligner le texte horizontal soit à gauche, soit au centre, soit à droite.
- Alignement vertical : Choisissez d'aligner le texte vertical soit à gauche, soit au centre, soit à droite.
- Remplissage vertical du texte : Faites glisser le curseur pour modifier l'espace entre le texte vertical et la bordure.
- Remplissage horizontal du texte : Faites glisser le curseur pour modifier l'espace entre le texte horizontal et la bordure.
- Informations à afficher : Cochez la case en regard de l'information que vous souhaitez afficher (titre, description, compteur de diapositives).
Style de l'élément
Chaque image ou vidéo de la galerie est un élément. Vous pouvez modifier l'aspect des éléments pour le mode normal et le mode survol.
- Cliquez sur Style de l'élément.
- Personnalisez l'affichage régulier de l'article sous Style de l'élément :
- Largeur et couleur bordure : Faites glisser le curseur pour modifier la largeur de la bordure et cliquez sur la case de couleur pour sélectionner une couleur.
- Rayon d'angle : Faites glisser le curseur pour ajuster le rayon d'angle.
Remarque : Les options Largeur et couleur de la bordure et Rayon d'angle ne sont disponibles que si vous choisissez de recadrer vos miniatures dans les paramètres de votre mise en page. - Ombre : Cliquez sur le curseur pour activer ou désactiver l'ombre :
- Activé : L'élément de la galerie est entouré d'une ombre. Personnalisez l'opacité, la couleur, le flou, la direction et la taille de l'ombre.
- Désactivé : L'élément de la galerie n'a pas d'ombre autour de lui.
- Choisissez ce qui se passe lorsque quelqu'un survole l'élément de la galerie avec sa souris :
- Aucun : Aucun effet n'est appliqué lors du survol.
- Zoome avant : Zoom sur l'image lors du survol.
- Flou : L'image est floue lors du survol.
- Gris : L'image devient noir et blanc lors du survol.
- Réduire : L'image devient plus petite lors du survol.
- Retourner : La couleur de l'image est inversée lors du survol.
- Recolorer : L'image passe du noir et blanc à la couleur lors du survol.
- Assombrir : L'image devient légèrement plus sombre lors du survol.
- Choisissez ce qui se passe lors du chargement de l'image :
- Floue : Une version floue de l'image apparaît lors du chargement.
- Espace réservé aux couleurs : Un espace réservé aux couleurs apparaît lors du chargement de l'image.
Effets de défilement
Ajoutez un effet animé qui apparaît lorsque les visiteurs font défiler votre galerie. Vous pouvez personnaliser davantage l'animation choisie en ajoutant un style de transition et en ajustant sa durée.
Remarques :
- Les animations disponibles dépendent de la mise en page de la galerie que vous choisissez.
- La personnalisation des paramètres d'animation n'est disponible que dans les mises en page avec un défilement horizontal.
Ajouter une animation de défilement :
- Cliquez sur Effet de défilement.
- Choisissez ce qui se passe lorsque les visiteurs font défiler votre galerie :
- Aucun : Aucun effet n'est appliqué au cours du défilement.
- Fondu : Les images apparaissent progressivement au cours du défilement.
- Gris : L'image devient noir et blanc au cours du défilement.
- Glisser : La superposition glisse au cours du défilement.
- Agrandissement : L'image devient plus grande au cours du défilement.
- Rétrécir : L'image devient plus petite au cours du défilement.
- Dézoomer : L'image fait un zoom arrière au cours du défilement.
- Une couleur : Une seule couleur est appliquée aux images lors du défilement.
Personnaliser votre animation :
- Cliquez sur Personnaliser les animations
- Personnalisez vos paramètres d'animation :
- Style de transition : Cliquez sur le menu déroulant pour appliquer un effet de mouvement aux éléments de votre galerie. Cet effet est appliqué lors du défilement, lorsque les visiteurs passent d'un élément à l'autre.
- Durée : Faites glisser le curseur pour ajuster la durée de votre animation.
Boutons
Cette section apparaîtra si vous avez choisi d'afficher le bouton En voir plus dans l'onglet Mise en page.
Ici, vous pouvez modifier le texte, la police, la couleur et le rayon de la bordure du bouton En voir plus.
Ici, vous pouvez modifier le texte, la police, la couleur et le rayon de la bordure du bouton En voir plus.
- Cliquez sur Boutons.
- Personnalisez les boutons à l'aide des options ci-dessous :
- Texte du bouton : Saisissez le texte qui apparaît sur le bouton.
- Style et couleur police : Sélectionnez la police et la couleur du bouton.
- Couleur et opacité bouton : Faites glisser le curseur pour modifier la couleur et l'opacité du bouton et cliquez sur la case de couleur pour sélectionner une couleur.
- Largeur et couleur bordure : Faites glisser le curseur pour modifier la largeur de la bordure et cliquez sur la case de couleur pour sélectionner une couleur.
- Rayon des angles : Faites glisser le curseur pour modifier le rayon des angles.
Flèches de navigation
Vous pouvez activer les flèches de navigation dans les mises en page Miniatures, Slider, Diaporama et Colonne. Vous pouvez personnaliser leur positionnement, leur taille et leur couleur pour aider les visiteurs de votre site à naviguer facilement dans votre galerie.
- Cliquez sur Flèches de navigation.
- Cliquez sur le curseur pour activer les flèches dans votre galerie.
- Personnalisez les flèches à l'aide des options suivantes :
- Style de flèche : Cliquez pour sélectionner un modèle de flèche, ou cliquez sur l'icône Ajouter
pour télécharger le vôtre. - Arrière-plan de la flèche : Cliquez sur la liste déroulante pour sélectionner un arrière-plan d'ombre, de boîte ou sans arrière-plan.
- Ombre : Ajoutez une légère ombre autour de la flèche.
- Boîte : Ajoutez une boîte autour de la flèche. Cliquez sur la boîte de couleur pour modifier la couleur de la boîte, et faites glisser les curseurs correspondants pour ajuster sa transparence et arrondir ses angles.
- Aucun : Aucun arrière-plan n'est ajouté à la flèche.
- Taille des flèches de navigation : Faites glisser le curseur pour augmenter ou diminuer la taille des flèches de navigation.
- Couleur des flèches de navigation : Cliquez sur la case de couleur pour sélectionner la couleur de la flèche de navigation. Sélectionnez une couleur parmi les couleurs de votre site ou choisissez la vôtre.
- Position des flèches de navigation : Cochez la case correspondante pour afficher les flèches de navigation sur ou en dehors de la galerie. Remarque : L'affichage de flèches de navigation sur votre galerie peut couvrir une partie des éléments de votre galerie.
- Centrer les flèches sur : Choisissez de centrer vos flèches de chaque côté de la galerie, de ses images ou de son texte.
- Remplissage horizontal : Faites glisser le curseur pour ajuster l'espace entre vos flèches et la bordure de votre galerie.
Mode agrandissement
Cette section apparaît si vous avez choisi "Ouvrir en mode agrandissement" dans le panneau des paramètres de la Pro Gallery, lorsqu'un utilisateur clique sur un élément de la galerie. À partir de là, vous pouvez personnaliser le mode agrandissement de votre galerie pour l'adapter au design et à la marque de votre site.
- Cliquez sur Mode agrandissement.
- Cliquez sur Personnaliser le mode agrandissement et personnalisez le mode agrandissement de la galerie à l'aide des options suivantes :
- Quelles informations sont affichées ? Choisissez d'afficher un titre, une description et/ou un lien.
- Où apparaît-il ? Choisissez où vous souhaitez positionner les informations :
- Sur le côté : Les informations apparaissent à droite de l'élément de la galerie.
- En bas : Les informations apparaissent sous l'élément de la galerie.
- Quand s'affiche-t-il ? Choisissez le moment où les informations s'affichent :
- Toujours : Les informations sont toujours affichées.
- Lorsque vous cliquez sur l'icône d'information : Les informations n'apparaissent que lorsqu'un visiteur clique sur l'icône d'information dans le coin supérieur gauche du mode agrandissement.
- Autoriser le plein écran : Cliquez sur ce bouton pour permettre aux visiteurs d'afficher les éléments de la galerie en mode plein écran.
- Couleur d'arrière-plan : Cliquez sur la case de couleur pour sélectionner une couleur d'arrière-plan pour le mode agrandissement. Choisissez parmi les couleurs de votre site ou ajoutez une couleur.
- Couleur de l'icône : Cliquez sur la case de couleur pour sélectionner une couleur pour les icônes en mode agrandissement. Choisissez parmi les couleurs de votre site ou ajoutez une couleur.
- Style du titre :
- Cliquez sur le menu déroulant pour personnaliser la police, le style et la taille à partir du sélecteur de polices.
- Cliquez sur la case de couleur pour modifier la couleur du texte du titre.
- Style de la description :
- Cliquez sur le menu déroulant pour personnaliser la police, le style et la taille à partir du sélecteur de polices.
- Cliquez sur la case de couleur pour modifier la couleur du texte de la description.
- Alignement du texte : Sélectionnez l'alignement du texte : À gauche, au centre ou à droite.
Suggestion :
Vous pouvez masquer les flèches de navigation dans votre Pro Gallery avec un défilement horizontal.
Cela vous a-t-il aidé ?
|