Sito Web Wix da Scratch - Grid Gallery

• Potrebbe 18, 2024

In questo tutorial, aggiungeremo una galleria al nostro sito Web Wix, che abbiamo creato da un modello vuoto. Iniziare da zero è un ottimo modo per imparare le basi.

A differenza dei modelli Wix che non sono intercambiabili, puoi cambiare i tipi di galleria per un nuovo look in qualsiasi momento. Esistono molti tipi di gallerie, dalla griglia in muratura a nido d'ape. Ogni galleria ha le sue caratteristiche. Diamo un'occhiata alla galleria Grid (ritratto) di base.

1. Fai clic sull'icona Più nel menu a sinistra e scegli Galleria dall'elenco.
   
   
2. Passa il mouse sopra ogni anteprima della galleria per visualizzare un'anteprima e una descrizione.
   
   
3. Ora trascina la galleria Grid sulla pagina.
   
   
4. Utilizzare le maniglie di ridimensionamento per ridimensionare la griglia come desiderato. Ho ridimensionato la griglia alla larghezza di 980 pagine.
   
   A questo punto la galleria ha alcune immagini segnaposto. Conserviamoli per ora e lavoriamo sulla personalizzazione delle impostazioni della galleria per le nostre esigenze.
   
   Grid Gallery Settings
   
   Ridimensionamento immagine: è possibile ritagliare o ridimensionare l'immagine per adattarla alla cornice. L'impostazione di ritaglio automatico ritaglia automaticamente le immagini per adattarle alla cornice e l'opzione Adatta ridimensionerà l'immagine per adattarla alla cornice.
   
   Quando si fa clic: sono disponibili tre opzioni per ciò che accade quando si fa clic su un'immagine della galleria. Un'opzione per non accadere nulla. Il secondo è di aprire l'immagine come pop-up. Il terzo è aprire un collegamento. Il più delle volte, il pop-up è una buona scelta perché l'immagine viene visualizzata con dimensioni maggiori. Ma se vuoi inviare il visitatore a un'altra pagina, usa l'opzione A Apri link.
   
   
5. Seleziona la Galleria e fai clic sull'icona Impostazioni nel menu a comparsa.
   
   
6. Nella finestra Impostazioni griglia, trova la sezione Comportamento delle immagini. Scegli Ritaglio automatico o Adatta.
   
   
7. Nella sezione Quando cliccato, imposta una delle tre opzioni.
   
   Galleria di design
   
   Come accennato in precedenza, puoi cambiare design di galleria in qualsiasi momento. Ma continuiamo personalizzando il nostro design della griglia. Per la progettazione della griglia, possiamo personalizzare il bordo, gli angoli, l'ombra e il testo.
   
   
8. Con la galleria ancora selezionata, fai clic sull'icona Design (pennello).
   
   
9. Per le impostazioni del bordo, possiamo cambiare il colore, l'opacità e la larghezza del bordo. Manteniamo l'impostazione predefinita della larghezza impostata su 0 e quindi nessun bordo.
   
   
10. Raggio dell'angolo: fai clic sull'icona del Raggio dell'angolo e imposta il raggio dell'angolo superiore sinistro come preferisci. Come l'icona del collegamento indica che gli altri tre angoli si aggiorneranno per corrispondere.
    
    
11. Ombra: selezionare l'icona Ombra. Per aggiungere un'ombra discendente, fai clic sul pulsante Attiva ombra e imposta Angolo, Distanza, Dimensione, Sfocatura e Colore / Opacità per l'ombra.
    
    
12. Testo: fare clic sull'icona T per impostare le opzioni per le impostazioni di Titolo, Descrizione e Altro testo. Cambiamo il testo dal predefinito al nostro tema di testo del paragrafo 1. Ripetere l'operazione per il testo della descrizione.
    
    Impostazioni di Layout
    
    Per la progettazione della galleria Grid, possiamo controllare il numero di colonne e righe per le anteprime. Possiamo anche controllare la spaziatura tra le anteprime e la modalità di visualizzazione del testo sull'immagine.
    
    
13. Con la galleria ancora selezionata, fai clic sull'icona Layout dal menu a comparsa.
    
    
14. Utilizzare il dispositivo di scorrimento per impostare il numero di colonne e righe. L'aggiunta di più colonne e righe comporterà immagini di miniature più piccole nella griglia.
    
    
15. Puoi usare il cursore Spaziatura per aumentare la quantità di pixel tra le anteprime. L'aggiunta di più spazio ridurrà la dimensione delle anteprime.
    
    
16. Sotto i cursori si trova la sezione di allineamento del testo. Hai la possibilità di visualizzare il testo a sinistra, a destra o al centro.
    
    

Schermate utilizzate su autorizzazione di Wix.com, Inc.

Istruzioni Video: How To Create A Dynamic Gallery In Wix - Wix Code Tutorial - Wix For Beginners 2018 (Potrebbe 2024).