Torna al supporto Contenuti ed elementi multimediali Blocchi Blocco Media e testo

Blocco Media e testo

Il blocco Media e testo consente di posizionare un’immagine o un video a sinistra o a destra del testo.

Aggiunta del blocco Media e testo

Per aggiungere il blocco Media e testo, fai clic sull’icona + per l’inserimento del blocco e cerca “media”. Fai clic sul blocco per aggiungerlo all’articolo o alla pagina.

💡

Tramite la tastiera, puoi anche digitare /media su una nuova riga e premere Invio per aggiungere rapidamente un nuovo blocco Media e testo.

Aggiunta di un blocco Media e testo con lo strumento di inserimento della barra.

Per saperne di più sull’aggiunta dei blocchi, dai un’occhiata a queste istruzioni dettagliate.

Aggiunta di contenuti al blocco

Quando aggiungi per la prima volta il blocco Media e testo in un articolo o in una pagina, apparirà come segue:

Blocco Media e testo senza contenuto personalizzato.

Per aggiungere i tuoi contenuti multimediali e di testo, fai clic in ciascuna delle corrispondenti sezioni numerate, come illustrato di seguito.

  1. Carica: fai clic qui per caricare una nuova immagine o un nuovo video dal computer al blocco Media e testo.
  2. Seleziona elemento multimediale: consente di scegliere tra le immagini o i video caricati in precedenza nella tua Libreria multimediale oppure di scegliere da Google Foto, dalla libreria di Foto gratuite di Pexels o da Openverse.
  3. Contenuto: fai clic qui e digita il contenuto di testo che vuoi aggiungere in questa area. Il contenuto immesso verrà automaticamente aggiunto a un blocco Paragrafo. Puoi anche digitare / per scegliere qualsiasi altro blocco che vorresti utilizzare in questa sezione, non limitato al solo testo.

Di seguito è riportato un esempio di come potrebbe apparire il blocco Media e testo dopo aver aggiunto i contenuti desiderati e averlo personalizzato. L’aspetto finale dipenderà dal tema del tuo sito.

Blocco Media e testo con il contenuto personalizzato aggiunto.
Esempio del blocco Media e testo con il contenuto personalizzato aggiunto.

Barra degli strumenti del blocco

Quando fai clic sul blocco, sopra di esso viene visualizzata una barra degli strumenti con varie opzioni:

Barra degli strumenti del blocco Media e testo.

Nella barra degli strumenti del blocco Media e testo sono disponibili le seguenti opzioni:

📌

Se non vedi l’opzione per modificare la larghezza del blocco su largo o larghezza intera e il tuo tema supporta queste opzioni, è possibile che il blocco sia stato aggiunto a un blocco Gruppo. Puoi scoprire di più sul blocco Gruppo qui.

Impostazioni del blocco

Selezionando un blocco, troverai impostazioni del blocco aggiuntive nella barra laterale destra. Se non vedi la barra laterale, potresti dover fare clic sull’icona Impostazioni nell’angolo in alto a destra per visualizzare le impostazioni. Questa icona ha l’aspetto di un quadrato con due colonne irregolari:

L'icona delle impostazioni nell'Editor con la descrizione comando "Impostazioni" sotto di essa.
Fai clic sull’icona Impostazioni per aprire le impostazioni del blocco
Stack su mobile

Nei dispositivi mobili, questa opzione consente di disporre gli elementi multimediali e il testo uno sopra l’altro.

Negli schermi stretti di questi dispositivi, infatti, se gli elementi multimediali e il testo del blocco venissero disposti affiancati, potrebbero risultare troppo piccoli per essere visualizzati. Se abiliti l’opzione Stack su mobile, il contenuto a sinistra verrà invece visualizzato sopra il contenuto a destra. Questo consente di offrire una migliore esperienza per i visitatori che utilizzano dispositivi mobili.

Ritaglia l’immagine per riempire l’intera colonna

Se l’immagine non si adatta alla larghezza e all’altezza della rispettiva metà di colonna, puoi attivare questa opzione per ritagliare automaticamente l’immagine in modo che riempia l’intera parte di colonna.

Dopo aver attivato questa opzione, nella parte superiore dell’immagine contenuta nella barra laterale destra verrà visualizzato un cerchio rosso, che rappresenta il cosiddetto Selettore del punto focale. Facendo clic sul cerchio e trascinandolo, potrai selezionare la sezione dell’immagine che dovrà risultare centrata dopo il ritaglio.

Alt Text (testo alternativo)

Aggiungi un testo alternativo all’immagine per descrivere di cosa tratta. È utile sia per l’accessibilità (ad esempio, per le utilità per la lettura dello schermo) sia per l’ottimizzazione dei motori di ricerca (SEO, Search Engine Optimization).

Dimensione dell’immagine

Il menu a discesa consente di scegliere la dimensione dell’immagine da caricare nel blocco Media e testo.

Larghezza dell’elemento multimediale

Fai clic su questa scala e trascinala per aumentare o diminuire la larghezza dell’elemento multimediale nel blocco. In funzione della larghezza impostata per l’elemento multimediale, verranno automaticamente aumentate o ridotte le dimensioni del lato del blocco con il contenuto/testo.

Avanzate

Le impostazioni avanzate ti consentono di aggiungere un’ancora HTML e ulteriori classi CSS per il blocco corrente.

Qui puoi scoprire di più sulle ancore HTML. Qui puoi anche ottenere maggiori informazioni sull’aggiunta di ulteriori classi CSS ai blocchi.

* Queste opzioni vengono visualizzate soltanto per le immagini aggiunte al blocco Media e testo. Non sono invece disponibili se utilizzi un video nella sezione degli elementi multimediali del blocco.

Stili del blocco

Fai clic sull’icona degli stili per accedere alle impostazioni di progettazione aggiuntive per il blocco.

Una freccia che punta all'icona degli stili su cui puoi fare clic per aprire la sezione degli stili del blocco.
Colore
Tipografia

Regola l’aspetto del testo del blocco con le seguenti impostazioni.

Se l’opzione desiderata non è visibile, fai clic sui tre puntini a destra dell’opzione Tipografia, come illustrato a destra. Puoi quindi scegliere l’opzione che desideri impostare:

  • Dimensione carattere
  • Tipo carattere
  • Aspetto
  • Altezza riga
  • Decorazione
  • Utilizzo di maiuscole/minuscole
  • Spaziatura tra lettere
Menu a discesa Tipografia
Menu a discesa Tipografia nella barra laterale delle impostazioni del blocco con le altre opzioni espanse.

Dimensione carattere consente di regolare la dimensione del testo. Puoi scegliere tra le dimensioni predefinite, ad esempio piccola, media e grande.

Puoi anche impostare un valore specifico facendo clic sull’icona slider direttamente al di sopra delle selezioni predefinite, contrassegnata dal numero 1 nello screenshot sottostante. Puoi modificare le unità nel punto contrassegnato dal numero 2 nello screenshot sottostante. Sono disponibili le opzioni pixel, em e rem.

Impostazioni della dimensione del carattere in Tipografia

Tipo carattere offre la possibilità di modificare lo stile del carattere usato. Scegli il tipo di carattere da un menu a discesa.

Aspetto consente di cambiare lo stile del testo da normale a corsivo e da sottile a grassetto accentuato.

Altezza riga consente di impostare la spaziatura sopra o sotto il testo. Se selezioni zero, ricordati di verificare l’aspetto del tuo sito sui dispositivi mobili.

Decorazione include le opzioni per sottolineare o barrare il testo.

Utilizzo di maiuscole/minuscole consente di impostare il testo in modo che sia tutto maiuscolo, che sia maiuscola solo la prima lettera o che sia tutto minuscolo.

Spaziatura tra lettere consente di impostare lo spazio tra ciascun carattere del testo. Puoi modificare le unità sostituendo quella predefinita (pixel) con percentuale, em, rem, vw e vh. Qui puoi ottenere ulteriori informazioni sulle unità relative.

Decorazione include le opzioni per sottolineare e barrare il testo.

Dimensioni

Su alcuni temi, il blocco includerà un’impostazione per Dimensioni, con opzioni per la spaziatura interna o il margine.

Una freccia indica il pulsante + accanto alle dimensioni, mostrando le opzioni selezionabili per la spaziatura interna e il margine.

Fai clic sull’icona + accanto a Dimensioni per selezionare e attivare le impostazioni delle dimensioni per Spaziatura interna e Margine.

L’impostazione Spaziatura interna influisce sullo spazio intorno al contenuto del blocco, all’interno dei suoi bordi.

L’impostazione Margine influisce sullo spazio esterno dei bordi del blocco selezionato.

Se desideri la stessa spaziatura intorno al blocco, puoi digitare un valore personalizzato nel campo di testo.

Per un controllo più specifico, fai clic sull’icona del link per impostare diversi valori di spaziatura per la parte superiore, destra, inferiore e sinistra del blocco.

Una freccia indica l'icona del link accanto a Spaziatura interna e Margine, che apre i controlli per le dimensioni della parte superiore, destra, inferiore e sinistra.

Per modificare l’unità per l’impostazione del margine o della spaziatura interna, fai clic su PX per visualizzare un menu a discesa con le altre unità supportate: %, EM, REM, VW e VH.

Una GIF animata mostra il processo che prevede il clic su PX per aprire un menu a discesa contenente le altre unità.
Copied to clipboard!