L’editor di WordPress denominato Gutenberg, fornisce molte funzionalità per la gestione di testi e immagini. Per alcune particolari esigenze bisogna però ingegnarsi inserendo piccole porzioni di codice html.
Gestire l’allineamento tra il testo scritto e le immagini per tutte le esigenze di leggibilità e stile è una di quelle situazioni in cui bisogna ricorrere a questo trucco.
Vediamo quindi attraverso alcuni rapidi passi, illustrati da immagini esaustive, come allineare al meglio i testi e le immagini dentro Worpress.
Inseriamo un nuovo blocco di testo
Inseriamo un nuovo blocco di testo in un articolo di Worpress, l’immagine sottostante lo rappresenta.
Inseriamo una immagine del blocco di testo
Creato il nuovo blocco di testo, clicchiamo con il puntatore del mouse al suo interno, quindi scegliamo dal menù del blocco “immagine in linea”.
Ecco qui sotto come appare il nostro blocco di testo con l’immagine appena inserita.
Inseriamo del codice html per migliorare l’allineamento dell’immagine
Sempre dopo aver cliccato con il puntatore del mouse all’interno del blocco, dal suo stesso menù, dall’icona con tre puntini scegliamo “Modifica come HTML”
Qui sotto potete vedere come appare lo stesso blocco di testo in formato html. Inseriamo il codice html “float: left;”.
Torniamo in modalità “Modifica visivamente” dall’omonima opzione del menù.
Ecco ora apparire di nuovo il nostro blocco di testo ma questa volta con l’mmagine allineata a sinistra!
Gestire i blocchi di WordPress con il codice Html
Se sono necessari altri aggiustamenti dell’immagine, con le stesse modalità qui sopra descritte, vi elenchiamo altri pezzi di codice html utili.
- float: center;
Allineamento al centro - float: right;
Allineamento a destra - padding: 20px;
Per inserire una cornice di 20 pixel tutta intorno all’immagine - padding-right: 20px
per distanziare di 20px il testo a destra dell’immagine (idem per: left, top o bottom)
Se ti è stato utile questo articolo o vuoi chiedere altri consigli per WordPress e Html commenta l’articolo in fondo alla pagina.