Site Web Wix de Scratch - Grid Gallery

• Mai 21, 2024

Dans ce didacticiel, nous ajouterons une galerie à notre site Web Wix, que nous avons créée à partir d'un modèle vierge. Partir de zéro est un excellent moyen d'apprendre les bases.

Contrairement aux modèles Wix qui ne sont pas interchangeables, vous pouvez changer de type de galerie à tout moment pour un nouveau look. Il existe de nombreux types de galeries, de la grille de maçonnerie au nid d'abeille. Chaque galerie a ses propres caractéristiques. Jetons un coup d'œil à la galerie de base de Grid (portrait).

1. Cliquez sur l'icône Plus dans le menu de gauche et choisissez Galerie dans la liste.
   
   
2. Passez la souris sur chaque vignette de la galerie pour voir un aperçu et une description.
   
   
3. Faites maintenant glisser la galerie de la grille sur la page.
   
   
4. Utilisez les poignées de redimensionnement pour redimensionner la grille comme vous le souhaitez. J'ai redimensionné la grille à la largeur de 980 pages.
   
   À ce stade, la galerie contient des images d'espace réservé. Gardons-les pour l'instant et travaillons sur la personnalisation des paramètres de la galerie pour nos besoins.
   
   Paramètres de la galerie de grille
   
   Mise à l'échelle de l'image - Vous avez la possibilité de recadrer ou de mettre à l'échelle votre image pour qu'elle tienne dans le cadre. Le paramètre Autocrop recadrera automatiquement les images pour les adapter au cadre et l'option Ajuster redimensionnera l'image pour qu'elle s'adapte au cadre.
   
   Lorsque vous cliquez dessus - Vous avez trois options pour ce qui se passe lorsque vous cliquez sur une image de galerie. Une option pour que rien ne se passe. La seconde consiste à ouvrir l'image sous forme de fenêtre contextuelle. Le troisième est d'ouvrir un lien. La plupart du temps, la fenêtre contextuelle est un bon choix car l'image est affichée dans une taille plus grande. Mais si vous souhaitez envoyer le visiteur vers une autre page, utilisez l'option Un lien s'ouvre.
   
   
5. Sélectionnez la galerie et cliquez sur l'icône Paramètres dans le menu contextuel.
   
   
6. Dans la fenêtre Paramètres de la grille, recherchez la section Comportement des images. Choisissez Autocrop ou Fit.
   
   
7. Dans la section Lorsque vous cliquez dessus, définissez l'une des trois options.
   
   Conception de la galerie
   
   Comme mentionné ci-dessus, vous pouvez changer de conception de galerie à tout moment. Mais continuons en personnalisant la conception de notre grille. Pour la conception de la grille, nous pouvons personnaliser la bordure, les coins, l'ombre et le texte.
   
   
8. La galerie étant toujours sélectionnée, cliquez sur l'icône Conception (pinceau).
   
   
9. Pour les paramètres de bordure, nous pouvons changer la couleur, l'opacité et la largeur de la bordure. Gardons le paramètre par défaut de la largeur à 0 et donc pas de bordure.
   
   
10. Rayon d'angle - Cliquez sur l'icône du rayon d'angle et définissez le rayon d'angle supérieur gauche comme vous le souhaitez. Comme l'icône du lien indique que les trois autres coins seront mis à jour pour correspondre.
    
    
11. Ombre - Sélectionnez l'icône Ombre. Pour ajouter une ombre portée, cliquez sur le bouton Activer l'ombre et définissez l'angle, la distance, la taille, le flou et la couleur / l'opacité de l'ombre.
    
    
12. Texte - Cliquez sur l'icône T pour définir les options des paramètres de titre, description et autres textes. Modifions le texte par défaut à notre thème de texte Paragraphe 1. Répétez l'opération pour le texte de description.
    
    Paramètres de mise en page
    
    Pour la conception de la galerie de grille, nous pouvons contrôler le nombre de colonnes et de lignes pour les miniatures. Nous pouvons également contrôler l'espacement entre les miniatures et la façon dont le texte est affiché sur l'image.
    
    
13. La galerie étant toujours sélectionnée, cliquez sur l'icône Mise en page dans le menu contextuel.
    
    
14. Utilisez le curseur pour définir le nombre de colonnes et de lignes. L'ajout de colonnes et de lignes supplémentaires entraînera des images miniatures plus petites dans la grille.
    
    
15. Vous pouvez utiliser le curseur Espacement pour augmenter la quantité de pixels entre les miniatures. Ajouter plus d'espace réduira la taille des vignettes.
    
    
16. Sous les curseurs se trouve la section d'alignement du texte. Vous avez la possibilité d'afficher le texte à gauche, à droite ou au centre.
    
    

Captures d'écran utilisées avec l'autorisation de Wix.com, Inc.

Instructions Vidéo: Adding A Custom Photo Gallery To Your Wix Website - Wix com Tutorial - Wix My Website (Mai 2024).