Come affiancare testo e immagini in Gutenberg

pubblicato in: Supporto | 2
Tempo di lettura: 5 minuti

Affiancare un’immagine a del testo è qualcosa di importante e spesso anche necessario. Per la felicità di tutti, questa operazione dovrebbe essere svolta senza troppe difficoltà o spiegazioni.

Purtroppo nel nuovo editor di WordPress questa funzione non è così semplice da applicare e non è nemmeno troppo intuitiva da comprendere.

Forse è una delle funzioni che il team di sviluppo di WordPress dovrebbe migliorare, anche se nella filosofia dello sviluppatore web, questa procedura è corretta. Perché ogni elemento che compone una pagina è un elemento contenuto all’interno di un altro elemento. Cambiamo il nome elemento in blocco e il gioco è fatto.

In Gutenberg, per inserire un’immagine, devi creare un blocco immagine all’interno di un blocco paragrafo. Così il blocco paragrafo è contenitore del blocco immagine

Come fare

Per affiancare un testo ad un’immagine, procedi in questo modo:

1. scrivi un paragrafo utilizzando il blocco paragrafo;

2. posiziona il cursore all’interno del blocco che stai scrivendo e fai click sull’icona + al centro del blocco per creare un blocco immagine all’interno del blocco paragrafo.
Se fai click sul pulsante + in alto a sinistra sulla barra degli strumenti, questa procedura non funziona, perché, invece di creare un blocco all’interno di un altro blocco, crei un blocco immagine autonomo.

3 seleziona il blocco immagine;

4. inserisci un’immagine a tua scelta.

blocco immagine allineamento

5. nel blocco immagine fai click sul pulsante Allinea a destra per inserire il blocco immagine all’interno del paragrafo che le sta al di sotto. Ora l’immagine è all’interno del paragrafo, ma sempre nel suo blocco;

blocco immagine ridimensiona

6. utilizzando i pulsanti sulla barra degli strumenti puoi allineare l’immagine dove preferisci e ancorando il mouse ad uno dei due pallini blu e trascinando, puoi ridimensionare l’immagine alla grandezza preferita.

blocco immagine come cancellarlo

7. per cancellare l’immagine, devi selezionarla e premere il tasto canc, Oppure puoi eliminare il blocco utilizzando il comando Rimuovi Blocco disponibile come ultima voce del menu tre pallini disposto sulla barra degli strumenti.

Altri metodi per affiancare testo ad un’immagine

Utilizzare il blocco colonne

Utilizzare il blocco colonne per inserire un’immagine che affianca del testo, non è come usare un blocco paragrafo, inoltre, il risultato si presenta in modo leggermente differente,

Bisogna ancora ricordare che le colonne sui piccoli schermi degli smartphone non si prsentano affiancate, ma si dispongono una sotto l’altra. Questo è il comportamento corretto dei contenuti responsive che devono addattarsi alle dimensioni delle viewport dei diversi dispositivi.

Quindi chi legge sotto una certa dimensione dello schermo, non ha percezione della disposizione a colonna dei contenuti.

Inserire testo e immagini in colonne separate

Il processo per inserire un’immagine in un blocco colonna, segue gli stessi principi visti per il blocco paragrafo.

In una colonna inserisci il testo, mentre, nell’altra colonna, procedi come per l’inserimento di un’immagine in un paragrafo, come appena descritto per il blocco paragrafo..

1 fai click su una delle colonne per posizionare il cursore al suo interno;

2. fai click sul pulsante + della colonna in cui vuoi inserire un’immagine e seleziona il blocco immagine;

3. nella colonna si presenta la finestra per inserire l’immagine. Procedi come di consueto,

Immagine e testo su due colonne

In questo caso ho inserito un blocco colonna e nella colonna di destra ho inserito due immagini ma se si vuole se ne può aggiungere una terza e così via.

L’importante e ricordare di creare sempre un nuovo blocco immagine all’interno del blocco colonna.

Colonna 1

Curabitur varius, nisi id pulvinar scelerisque, lectus tellus pulvinar arcu, eu volutpat est lorem non dui. Suspendisse purus neque, tincidunt a posuere a, egestas vel felis.
Cras finibus risus lectus, vitae dignissim turpis lobortis et. Maecenas ut tempus mauris. Donec commodo neque mi, quis congue ligula placerat quis. Aliquam erat volutpat. Nulla turpis quam, fermentum nec felis vitae, venenatis pulvinar lorem. In cursus libero magna, sed facilisis lacus vestibulum cursus.

Phasellus nunc erat, egestas nec finibus in, lobortis at nisl. Praesent enim neque, sagittis ut nulla facilisis, dapibus imperdiet enim. Suspendisse efficitur massa vel turpis euismod bibendum a et ligula. Donec sit amet hendrerit metus. Quisque arcu magna, suscipit quis ultricies feugiat, gravida in quam.

Colonna 2

La particolarità del blocco colonne, è che se all’interno di una colonna inserisci un nuovo blocco colonna, si avranno tre colonne, perché la prima colonna fa da contenitore per il nuovo blocco che inserisce sempre due colonne come valore predefinito.

Se si vogliono quattro colonne è sufficiente inserire un nuovo blocco colonne anche nell’altra colonna.

Due colonne di testo e immagine su terza colonna

Colonna 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Phasellus nunc erat, egestas nec finibus in, lobortis at nisl. Praesent enim neque, sagittis ut nulla facilisis, dapibus imperdiet enim. Suspendisse efficitur massa vel turpis.

Colonna 2

Quisque posuere libero vestibulum neque egestas fermentum.

Praesent enim neque, sagittis ut nulla facilisis, dapibus imperdiet enim. Suspendisse efficitur massa vel turpis euismod bibendum a et ligula. Donec sit amet hendrerit metus.

Colonna 3

Phasellus nunc erat, egestas nec finibus in, lobortis at nisl. Praesent enim neque, sagittis ut nulla facilisis, dapibus imperdiet enim. Suspendisse efficitur massa vel turpis euismod bibendum a et ligula.

pietroborga
Vista dal Pietraborga




Blocco Media e testo

Un altro metodo per inserire un’immagine affiancata al testo, è utilizzando il blocco Media e testo. I

n questo tipo di blocco, il testo che affianca l’immagine di solito è un testo breve, descrittivo o un collegamento. Il testo lungo scritto nell’esempio, serve solo per evidenziare la qualità del blocco Media e testo.

blocco media e testo

Il blocco media e testo è facile da capire.
Su un lato si inserisce il testo. e sull’altro si carica un’immagine. Facendo click sull’immagine, si possono variare le sue dimensioni, l’allineamento del testo a destra o a sinistra rispetto all’immagine.
Nelle impostazioni del blocco, si trovano nella colonna a destra dell’area di editazione, si trovano le impostazioni per il testo.
Qui puoi ridimensionare il testo e scegliere se usare o no il capolettera
Puoi ancora applicare un colore di sfondo ed un colore per il testo

Per ora mi fermo qui, ma vi terrò aggiornati sugli sviluppi ed aggiornamenti del nuovo editor di Gutenberg.

Se hai suggerimenti o trucchi sul nuovo editor Gutenberg e vuoi farceli conoscere, puoi farlo utilizzando il modulo contatti.

Seguici su:

2 Risposte

  1. Giuseppe Migliore
    | Rispondi

    Ciao Roberto,
    effettivamente non è molto intuitivo anche se non sembra difficile, però il tuo tutorial ci può aiutare molto!
    Grazie del tuo impegno costante nella community nonostante non si riscontri l’interesse che meriterebbe, almeno all’interno del nostro Istituto 🙁

  2. Meyer
    | Rispondi

    Grazie a te. Ogni tanto un commento fa piacere, se non altro, ripaga l’impegno e rinfranca lo spirito, perchė, come sottolinei anche tu, nel nostro istituto questa attività non è supportata a nessun livello.

    Strano però, visto che nel resto del pianeta, il blog, come attività didattica e di espressione personale, è considerato uno strumento di valore.

    Ma si sa, ė più comodo pensare, ma io e il computer siamo mondi separati, piuttosto che spendere un po’ di tempo, nei termini di qualche ora, per imparare ad usare un nuovo metodo.

    Chissà che questa risposta al tuo commento non riesca a sollevare un po’ di polvere.

Lascia un commento

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