home > tutorial

3.2 Impaginare una foto

impaginazione-immagini01

Dopo che abbiamo caricato un'immagine nel nostro sito, possiamo se lo desideriamo modificarne l'impaginazione. Quando volete posizionare un'immagine a sinistra o a destra del testo posizionatela sempre sopra al testo stesso. Per prima cosa dobbiamo andare con il cursore sull'immagine. Appariranno i soliti bottoni di modifica, clicchiamo sulla goccia (1), e selezioniamo l'immagine sul menu a sinistra (2). Generalmente dopo aver cliccato sulla gocciolina possiamo selezionare l'immagine direttamente cliccandoci sopra, ma può capitare in alcuni che passando sopra all'immagine questa abbia altri elementi che la coprano (anche se non visibili).

Ora saranno apparsi i comandi di manipolazione delle dimensioni dei box (3), ovvero due quadratini uno a destra e uno sotto all'immagine. Questi sono formati da una freccina che può essere trascinata, un numero che può essere modificato cliccandoci sopra e l'unità di misura che può essere cambiata tra % e pixel. Il checkbox invece identifica se è stata impostata una dimensione oppure no. Se decidiamo di impostare solo la larghezza o solo l'altezza di un'immagine, l'altra misura verrà ricalcolata proporzionalmente alle dimensioni dell'immagine. Se impostiamo sia altezza che larghezza l'immagine verrà ritagliata delle dimensioni richieste. Quindi ridimensioniamo la larghezza al 40% e lasciamo l'altezza libera di riaddatarsi al formato dell'immagine. 

Attenzione: visto che ogni volta l'immagine deve essere ricaricata quando si modificano le dimensioni può succedere che ci voglia un po' di tempo prima che l'immagine riappaia. Se non dovesse riapparire riaggiornate la pagina e ricominciate.

impaginazione-immagini02

Ora che abbiamo l'immagine delle dmesioni corrette, dobbiamo dire che la vogliamo a sinistra. Sulla sinistra abbiamo la sidebar (box verticale bianco) con tutte le impostazioni degli stili che vogliamo modificare, andiamo su box (1) e premiamo in fondo su display selezionando a sinistra. Adesso l'immagine è impaginata correttamente, tuttavia il testo si troverà molto attaccato all'immagine stessa, per cui come ultima rifinitura diamo un po' di spazio tra i due elementi inserendo 20px di margine (3).

Una volta finite le modifiche grafiche ricordatevi sempre di salvarle!

grafica01