Come allineare testo e immagini in WordPress

di | 12 Dicembre 2019
Allineare testo e immagini con gutenberg
Allineamento perfetto con Gutember

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.

inserire paragrafo di testo
Step 1: inserisci paragrafo di testo

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”.

inserire immagine in linea
Step 2: inserisci immagine in linea

Ecco qui sotto come appare il nostro blocco di testo con l’immagine appena inserita.

ecco come appare l'immagine
Step 3: immagine 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”

modificare il paragrafo in html
Step 4: andare in Modifica come HTML

Qui sotto potete vedere come appare lo stesso blocco di testo in formato html. Inseriamo il codice html “float: left;”.

Inserimento codice html float
Step 5: inserire float

Torniamo in modalità “Modifica visivamente” dall’omonima opzione del menù.

Modifica visiva con wordpress
Step 6: tornare in Modifica visivamente

Ecco ora apparire di nuovo il nostro blocco di testo ma questa volta con l’mmagine allineata a sinistra!

Allineamento a sinistra
Step 7: l’immagine è ora 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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *