Vai al contenuto principale

Esempi del componente immagine di storyblok

1. Hero Image

Hero image è un componente a parte da quello Image standard.

Contiene due campi:

  • "image": dove carichi il file dell'immagine. L'immagine viene mostrata in formato largo: con una larghezza di 1200px.

  • "title": dove inserisci il titolo (opzionale). Il titolo è in formato H1 (titolo principale della pagina).

Image Title

2. Full width

Per creare un'immagine che occupa l'intera larghezza dello schermo:

  • inserisci un Coral Container con "width" settato sull'opzione "fullWidth"

  • inserisci all'interno del container un componente Image, lasciando non compilato il campo di "width_override" di modo che l'immagine si adatti all'intera larghezza del suo container.

  • assicurati che l'immagine che scegli sia di una risoluzione abbastanza alta da poter essere mostrata su schermi grandi

3. Immagine centrata all'interno di un testo

Per inserire un'immagine centrata tra un paragrafo e l'altro
- inserisci un componente Immagine

- lascia vuoti i campi di width_override e height_override per mantenere le proporzioni originali dell'immagine

- seleziona l'opzione center nel campo image_alignment (opzionale, perché se non è selezionata nessun'opzione il comportamento di default è centrare l'immagine)

4. Immagine allineata a sinistra all'interno di un testo

Per inserire un'immagine allineata a sinistra tra un paragrafo e l'altro
- inserisci un componente Immagine

- assicurati che il file che inserisci abbia dimensioni minori del contenitore in cui viene inserito di modo da poter effettivamente visualizzare l'allineamento a sinistra

- lascia vuoti i campi di width_override e height_override per mantenere le proporzioni originali dell'immagine

- seleziona l'opzione left nel campo image_alignment

5. Immagine allineata a destra all'interno di un testo

Per inserire un'immagine allineata a destra tra un paragrafo e l'altro

- segui le indicazioni precedenti e seleziona l'opzione right nel campo image_alignment

6. Immagine con testo a lato

Per inserire un'immagine con testo di fianco puoi usare il componente Text and Media

- inserisci il componente Text and Media e usa il toggle Image first per avere l'immagine a sinistra del testo su desktop. Nota: In ogni caso l'immagine precederà il testo su vista mobile dove l'orientamento è verticale.

Grafico

Grafico

6. Immagine in una content card

All'interno del componente Content Card c'è un campo Immagine in cui caricare un'immagine se necessario. Quest'immagine non può essere configurata perché rispetta i vincoli della card di cui è parte

- l'immagine verrà visualizzata con le dimensioni di 348 x 232 pixel, quindi si consiglia di scegliere un'immagine con simili proporzioni per evitare che venga tagliata o stretta

App Octopus Energy
Octopus Energy Retail

Looking at tech screen
Kraken Technologies

Turbines
Octopus Energy Generation

7. Immagini SVG

Le immagini in formato svg sono supportate nel componente immagine.

- quando hai bisogno di creare un layout meno restrittivo della content card una soluzione può essere usare i componenti Stack per allineare immagini e contenuti in colonne senza card.

  • nota: assicurati di specificare un'altezza in height_override se usi l'immagine in contenitori che sono responsive se vuoi che le colonne abbiano immagini della stessa altezza.

Prezzi competitivi

Le nostre tariffe sono convenienti anche nel lungo periodo, non solo il primo anno.

Energia pulita

La nostra energia elettrica proviene da fonti rinnovabili ed è prodotta in Italia.

Servizio clienti superlativo

Il tuo tempo è prezioso: solitamente rispondiamo alle chiamate in meno di 1 minuto.

8. Immagine in una citazione

All'interno del componente Coral Blockquote c'è un campo Immagine in cui caricare un'immagine se necessario. Quest'immagine non può essere configurata perché rispetta i vincoli del componente di cui è parte

- l'immagine verrà visualizzata con le dimensioni di 150 x 150 pixel a forma circolare

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet efficitur ante. Sed facilisis et mi sit amet semper.

Cicerone

9. Immagine dentro un Accordion

è tecnicamente possibile inserire un'immagine (e altri componenti) all'interno del componente Accordion

- se non vengono specificati i pixel nei campi di height_override e width_override, l'immagine di default andrà ad occupare l'intera larghezza dell'accordion che la contiene (e l'altezza si adatterà di conseguenza per mantenere le proporzioni originarie).

- si può popolare il campo width_override con l'altezza voluta se si vuole modificare questo comportamento di default e avere l'immagine che occupi solo parte della scheda dell'accordion quando è aperto

- allo stesso modo, se il campo height_override viene popolato l'immagine prenderà l'altezza specificata (e aggiusterà la larghezza in modo da mantenere le proporzioni originarie dell'immagine)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet efficitur ante. Sed facilisis et mi sit amet semper.

10. Immagine con link

è ora possibile aggiungere un link al componente immagine

- il link può essere interno (un'altra "storia" di storyblok)
- o esterno (formato: https://octopusenergy.it/)

click on constantine to be redirected to an internal url 👆🏻

click on constantine to be redirected to an external url 👆🏻