Prova 4

qui sotto    MEDIA GRID:
media grid incasella le foto in quadrati della stessa dimensione, ritagliando la foto per incasellarla

c’è l’opzione: display stile:
1 – mostra tutto (fa vedere tutte le foto che ho caricato)
2 – load more button (fa vedere solo alcune delle foto che ho caricato, e per vedere le altre si deve cliccare sul bottone “load more” cioè “carica altro”
3 –  lazy loading (non ho capito bene cosa comporti, il significato letterale è “caricamento pigro”
4 – pagination (si può suddividere l’articolo in più pagine automaticamente). Se l’articolo è lungo appariranno dei pallini sotto le foto, un pallino per ogni pagina, e si potrà cliccare sul pallino per vedere le altre pagine.
Poi c’è l’opzione: “items per page”, che è a scelta libera, che significa il numero di foto che voglio vedere in quel blocco di articolo.
Poi c’è l’opzione: “grid elements per row ” che può essere 1- 2 -3 -4 – 6, cioè quante foto vedere per riga, relativamente a quel blocco di articolo
Poi c’è il Gap  che è la distanza da una foto all’altra = 0-1-2-3-4-5-10-15-20-25-30-35
Poi c’è Item Design =
– Basic grid = default
– Basic grid = scale in with rotation
– basic grid = fade with side content
– basic grid = slide bottom with icon
– basic grid = vertical flip
– basic grid = no animation
– basic grid = go top slideout
– basic grid = text first
– basic grid = slide from left
– basic grid = slide from top
– Masonry grid = default
– Masonry grid = Fade in
– Masonry grid = icon slide out
– Masonry grid = slide from left
– Masonry grid = Go top
– Masonry grid = overlay with rotation
– Masonry grid = blur out
– Masonry grid = scale with rotation
– Masonry grid = slide out from right
– Masonry grid = with side content
– Media grid =  default
– Media grid = simple overlay
– Media grid = fade in with icon
– Media grid =  bordered scale with title
– Media grid = scale with rotation
– Media grid = slide out caption
– media grid = horizontal flip with fade
– media grid = blur with content block
– media grid = slide in title
– media grid = scale in with icon
– masonry grid = default
– masonry grid =  bordered scale
– masonry grid = solid blur out
– masonry grid = scale with rotation light
– masonry grid = slide with title and caption
– masonry grid = scale with content block
– masonry grid = simple overlay
– masonry grid = slide top
– masonry grid = simple blur with scale

qui sotto Media grid –   Mostra tutto    – 6 foto per riga   – una sola colonna – 16 foto totali

qui sotto Media grid –  Load more button  – 6 foto per riga   – una sola colonna – 16 foto totali

qui sotto   Media Grid  –  Lazy Loading (caricamento pigro)  –  6 foto per riga  – una sola colonna – foto totali 16

qui sotto  Media Grid – Pagination (mi suddivide in più pagine se ci sono tante foto o tante parole scritte, mettendo dei pallini in basso, un pallino per ogni pagina. Cliccando sul pallino vado alla pagina successivo) –  6 foto per riga – una sola colonna
– Si può scegliere in “pagination”: item per page (è un numero libero, in questo caso ho scelto 10, cioè 10 foto per blocco di articolo) – grid elements per row: 1 -2 -3 – 4 – 6 (in questo caso ho scelto 6) – e ho caricato 30 foto, quindi mi ha messo 30 foto che però se vedono solo a dieci per volta in ogni pagina che sfoglio e in due righe da sei per riga.
Pagination = opzioni:
1) arrows design:  (frecce desgin)
2) arrows position (posizione della freccia): inside o outside
3) arrows color: colore
4) pagination style: nessuno/ square dots/ radio dots/ point dots/fill square dots/ rounded fill square dots/ pagination default/ outline default dark/ outline default light/pagination rounded/ outline rounded dark/ outline rounded light/pagination square/ outline square dark/ outline square light/pagination rounded square/outline rounded square dark/oultine rounded square light/stripes dark/ stripes light
5) pagination color
6) Loop page = a ciclo continuo
7) animazioni in  e animazioni out = ce ne sono tante

qui sotto  Masonry Media Grid:
Masonry media grid, non ritaglia la foto per incasellarla, ma la lascia a grandezza normale, sembrano mattoni incastrati fra loro
c’è l’opzione: display stile:
1 – mostra tutto (fa vedere tutte le foto che ho caricato)
2 – load more button (fa vedere solo alcune delle foto che ho caricato, e per vedere le altre si deve cliccare sul bottone “load more” cioè “carica altro”
3 –  lazy loading (non ho capito bene cosa comporti, il significato letterale è “caricamento pigro”
Poi c’è l’opzione: “items per page”, che è a scelta libera, che significa il numero di foto che voglio vedere in quel blocco di articolo.
Poi c’è l’opzione: “grid elements per row ” che può essere 1- 2 -3 -4 – 6, cioè quante foto vedere per riga, relativamente a quel blocco di articolo
Poi c’è il Gap  che è la distanza da una foto all’altra = 0-1-2-3-4-5-10-15-20-25-30-35
– Basic grid = default
– Basic grid = scale in with rotation
– basic grid = fade with side content
– basic grid = slide bottom with icon
– basic grid = vertical flip
– basic grid = no animation
– basic grid = go top slideout
– basic grid = text first
– basic grid = slide from left
– basic grid = slide from top
– Masonry grid = default
– Masonry grid = Fade in
– Masonry grid = icon slide out
– Masonry grid = slide from left
– Masonry grid = Go top
– Masonry grid = overlay with rotation
– Masonry grid = blur out
– Masonry grid = scale with rotation
– Masonry grid = slide out from right
– Masonry grid = with side content
– Media grid =  default
– Media grid = simple overlay
– Media grid = fade in with icon
– Media grid =  bordered scale with title
– Media grid = scale with rotation
– Media grid = slide out caption
– media grid = horizontal flip with fade
– media grid = blur with content block
– media grid = slide in title
– media grid = scale in with icon
– masonry grid = default
– masonry grid =  bordered scale
– masonry grid = solid blur out
– masonry grid = scale with rotation light
– masonry grid = slide with title and caption
– masonry grid = scale with content block
– masonry grid = simple overlay
– masonry grid = slide top
– masonry grid = simple blur with scale

qui sotto masonry media grid – mostra tutto – 12 foto  – una sola colonna

qui sotto Masonry Media Grid  –   Load More Button –      12 foto   – una sola colonna
stile 3D   – square

qui sotto Masonry Media Grid  –    Lazy Loading  (caricamento pigro)   – 12 foto – una sola colonna

pag 4 di 6

vai a prova 5

Prova 3

Qui sotto il Carosello:

Qui sotto Galleria immagini:

Qui sotto:  galleria immagini.
La galleria permette di avere 4 tipi di agganci alla foto linkata:
1) nessuno (non c’è nessuna ancora) 2) link to large image  (si apre la foto grande come metto di solito io nel sito) 3) apri con modale (si apre le foto grande e per sfogliarle c’è una freccia laterale) . 4) apri con link personalizzato (credo significhi che posso linkare la url di una pagina del sito). La traduzione è questa: Inserire collegamenti per ogni diapositiva (Nota : i collegamenti dividere con interruzione di linea ( Invio) ) .

Nella galleria immagini, si  vedere un rettangolo fisso con una sola foto dentro, poi ci sono dei puntini sotto il riquadro e cliccando sui puntini passa alle foto successive contenute nella galleria. Il riquadro della galleria immagini, a differena del carosello,  non ritaglia la foto per adattarla al riquadro, ma mostra la foto delle sue dimensioni (più alta o più larga).

• mettere slides per view = 1, altrimenti deve incasellare nel riquadro tante foto e le foto sono di un centimetro e  non si distinguono.
• non posso mettere  una sola colonna per riga perchè la foto viene enorme e sgranatissima, si deve quindi scegliere una riga di sei colonne, a meno che la dimensione originale della foto che importo non sia grande, in quel caso forse bastano 4 colonne per riga.

qui sotto: galleria immagini – tipo galleria: flex slider in dossolvenza,  auto rotate = 5 – click on action: nessuno

qui sotto: galleria immagini – tipo galleria: flex slider a scorrimento – auto rotate = 3  – click on action:  link to large image

qui sotto: galleria immagini – tipo galleria: Nivo slider (appare una casella nera che copre purtroppo la parte sotto della foto e dove viene scritto il nome della foto – la foto ha anche una cornice ombrata) ci sono anche dei puntini sotto la foto che rappresentano le foto all’interno della galleria – auto rotate = 3   – click on action:  apri con modale.

qui sotto: galleria immagini – tipo galleria: immagine a griglia  – auto rotate = 3 –  click on action:  apri con modale

• qui ho fatto una riga con una sola colonna, quindi le foto sono una di fianco all’altra

qui sotto: galleria immagini – tipo galleria: immagine a griglia  – auto rotate = 3 –  click on action:  apri con modale.

Questa invece è una riga con 6 colonne e quindi la griglia mette le foto una di sotto all’altra. Non va bene, usare come sopra una sola colonna per riga nelle immagini a griglia

qui sotto: galleria immagini – tipo galleria: immagini a griglia – click on action: apri con modale.
16 foto in una sola colonna

qui sotto: galleria immagini – tipo galleria: immagini a griglia – click on action: nessuno.
16 foto in una sola colonna

qui sotto: galleria immagini –   tipo galleria: immagine a griglia    –  click on action: apri con link to large image
16 foto in una sola colonna

pagina 3 di 6

avanti a Prova 4

Prova 2

qui sotto solo mmagini singole:

QUi sotto:
Immagini singole –  On click action :    nessuno   – CSS: dall’alto in basso

qui sotto: immagine singola – on click action: Link to large image   –  CSS: appari dal centro

Qui sotto: immagini singole –  on click action: da sinistra a destra  – CSS: apri con modale

qui sotto: immagini singole – on click action: apri con link personalizzato ( + url del link)  per collegarsi dalla foto che clicco ad una pagina del mio sito – CSS: nessuno

qui sotto  immagine singola –  on click action: zoom (la foto in primo piano è della dimensione che le dò medium o thumbnail, ma la foto ancorata dietro viene zummata, quindi se ne vede un pezzo per volta ma più in grande, bisogna quindi spostare il puntatore per vederne zummata un’altra parte della foto  –  CSS: no

qui sotto: immagine singola – image style: default   – on click action: nessuno – CSS: dall’alto in basso

qui sotto: immagine singola – image style: rounded (arrotonda i bordi della foto) – on click action: nessuno – CSS: dall’alto in basso

qui sotto: immagine singola – image style: border ( blu) – on click action: nessuno – CSS: dall’alto in basso

qui sotto: immagine singola – image style: outline (rosso), cioè fuori dalla foto mette una cornica bianca, con una piccola cornica del colore che indico io- on click action:  nessuno – CSS: no

qui sotto: immagine singola – image style: shadow (aggiunge una piccolissima ombra bianca nel contorno della foto)  – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: bordered shadow (aggiunge una piccolissima ombra bianca nella cornice del contorno della foto) – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: 3D shadow  (quella che piace a me, e che mi crea un effetto tridimensionale alla foto, usando l’ombra nella parte bassa della foto) – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: round (la foto non è più quadrata ma tonda) – on click action:  nessuno – CSS: no

qui sotto: immagine singola – image style: round border (grigio) aggiunge un contorno grigio alla foto tonda – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: round outline (la foto è tonda e la cornice tonda si trova all’esterno della foto) – on click action: nessuno – CSS: no

qui sotto. immagine singola – image style: round shadow (la foto è tonda e ha una piccola ombra nel contorno appena appena visibile) – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: round border shadow (la foto è tonda e ha una piccola cornice attorno alla foto tonda, con una piccola ombra appena visibile) – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: circle  – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: circle border (grigio) – on click action: nessuno – CSS: no

qui sotto. immagine singola – image style: circle outline (grigio) – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: circle shadow- on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: circle border shadow  – on click action: nessuno – CSS: no

qui sotto: immagine singola – image style: circle border (grigio) – on click action: nessuno – CSS: no
image source: featured image (anzichè elenco media del mio sito), però non capisco come si fa ad inserire la foto

pagina 2 di 6

avanti a Prova 3

Prova 1

qui sotto immagini singole:

Qui sotto le gallerie immagini

qui sotto: galleria immagini – flex slider in dissolvenza – apri con modale:
è una casella di sei colonne, altrimenti viene troppo sgranata

qui sotto: galleria immagini – flex slider a scorrimento – apri con modale:
é una casella di sei colonne, altrimenti viene troppo sgranata

qui sotto: galleria immagini – nivo slider – apri con modale, è una casella con sei colonne, altrimenti viene troppo sgranato:

qui sotto   galleria immagini  “immagine a griglia”   –  apri con modale:
sono 16 foto  in una sola colonna

qui sotto  galleria immagini   “immagine a griglia “     – apri con “nessuno”
16 foto in una sola colonna

qui sotto  galleria immagini   “immagine a griglia ”     – apri con “link to large image”
16 foto in una sola colonna

Qui sotto Immagini Carosello:

Carosello immagini:     apri con “modale”  –   “slides per view ”  1
una sola colonna

Carosello immagini:     apri con “modale” –  slides per view  3
una sola colonna – partial view

qui sotto    MEDIA GRID:

qui sotto Media grid –   Mostra tutto    – 6 foto per riga   – una sola colonna

qui sotto Media grid –  Load more button  – 6 foto per riga   – una sola colonna

qui sotto   Media Grid  –  Lazy Loading   –  6 foto per riga  – una sola colonna

qui sotto  Media Grid – Pagination  –  6 foto per riga – una sola colonna

qui sotto  Masonry Media Grid:

qui sotto masonry media grid – mostra tutto – 12 foto  – una sola colonna

qui sotto Masonry Media Grid  –   Load More Button –      12 foto   – una sola colonna
stile 3D   – square

qui sotto Masonry Media Grid  –    Lazy Loading    – 12 foto – una sola colonna

pagina 1 di 6

vai avanti a prova 2

CLAUDIA RIVELLI

e Pierre Clement

Torna a Claudia Rivelli e i partner

CLAUDIA RIVELLI

e Kirk Morris

Torna a Claudia Rivelli e i partner

CLAUDIA RIVELLI

e Alex Damiani

Torna a Claudia Rivelli e i partner

CLAUDIA RIVELLI

e Riccardo Bonacchi

Torna a Claudia Rivelli e i partner

CLAUDIA RIVELLI

e Max Delys

torna a Claudia Rivelli partner

CLAUDIA RIVELLI

e Franco Dani

torna a Claudia Rivelli partner