Sommario
Hai bisogno di posizionare il testo attorno all'immagine in modo elegante? Scopri come farlo facilmente senza esperienza di programmazione e progettazione. L'editor Gutenberg offre più opzioni per avvolgere il testo attorno al testo in WordPress.
È possibile ottenere contemporaneamente un sito Web di bell'aspetto e una semplice routine di modifica dei contenuti. La scelta dell'editor Gutenberg per il tuo sito Web WordPress ti offre lo strumento migliore da una prospettiva a lungo termine. Avrai più opzioni per avvolgere il testo attorno alle immagini in modo diverso. Gutenberg offre molti vantaggi come codice sorgente più chiaro del sito Web, velocità, sicurezza e usabilità.
Come avvolgere il testo attorno all'immagine in WordPress?
L'editor e i blocchi di Gutenberg rendono il contenuto del sito Web più leggero, moderno e facilmente leggibile. Ti mostriamo altri modi per avvolgere il testo attorno all'immagine anche nelle pagine di WordPress, nei post e nei tipi di post personalizzati. Esistono diversi blocchi e puoi usarli anche in combinazione, come un insieme di parti e caratteristiche che ti danno opzioni aggiuntive per l'avvolgimento.
È possibile selezionare il blocco per il testo avvolto intorno all'immagine in base alla sottopagina e al suo tipo di contenuto. Puoi scegliere uno stile per la pagina di presentazione e un altro per un post sul blog. Inoltre, considera il tipo di contenuto che rappresenta l'immagine. È un'immagine descrittiva o un supporto più rappresentativo o di vendita?
Avvolgi il testo intorno all'immagine: blocca la selezione
Ci sono 4 blocchi che puoi usare per avvolgere un blocco di testo attorno a un'immagine. Li descriviamo tutti:
- Il blocco immagine e il blocco paragrafo trovano ulteriori informazioni di seguito
- Media e blocco di testo trovano ulteriori informazioni di seguito
- Blocco colonne nel singolo post
- Blocco a grappolo in singolo post (funzione disponibile solo con plug-in Citadela Pro)
Avvolgi testo e immagine per una migliore esperienza di lettura
Ci sono diversi motivi per cui dovresti usare questo blocco. Lo apprezzerai di più se scrivi post sul blog. Le immagini sono parte integrante della storia. Non importa se scrivi un blog di viaggio o una rivista sulle notizie IT. Quindi, quando aggiungi foto all'interno dei tuoi contenuti, pensa all'allineamento delle immagini. I lettori potranno capire meglio di cosa stai scrivendo.
In molti casi è necessario inserire immagine e testo fianco a fianco. Cosa è importante?
- Deve avere senso. L'immagine deve essere accanto al testo corretto.
- Deve essere ben allineato.
- Deve adattarsi all'intero layout del sito web.
Blocchi immagine e paragrafo
Mentre nel Editore classico potresti anche posizionare il testo accanto all'immagine, non puoi parlare di un buon allineamento. Soprattutto se l'immagine era piccola e ci metti più testo accanto. Il testo ha sovrastato l'immagine e non ha un bell'aspetto.
Editore di Gutenberg e il suo blocco immagine offre una grande funzionalità: il ridimensionamento delle immagini. Trascina i punti attorno all'immagine per modificarne automaticamente le dimensioni e l'allineamento del testo.
Blocco multimediale e di testo: WordPress allinea il testo accanto all'immagine
- Avvolgi testo e immagini con il blocco Media e testo
- Come aggiungere il blocco Media e testo nell'editor
- Come funziona questo blocco
- Impostazioni del blocco multimediale e di testo
- Cosa fa "Stack sul cellulare" Significare
- Bonus: come giustificare il testo in WordPress
Come allineare il testo accanto all'immagine?
Inizia ora
Inizia ora con una prova senza rischi. Nessuna carta di credito richiesta.
Il blocco multimediale e di testo è una funzionalità fantastica. Il blocco Media & Text risolve questo problema e garantisce un perfetto allineamento del testo all'immagine senza interrompere la composizione e il layout. Questo è il motivo per cui dovresti usare questo blocco.
Migliora anche il design del sito web sui dispositivi mobili. Questo blocco di wrapping aiuta il tema WordPress a coprire diversi layout mobili. Su smartphone ogni parte del sito web deve essere ben visibile e leggibile. Come apparirà il blocco Media & Text sui telefoni cellulari e la funzione "Stack on mobile" dei table handle che vedremo di seguito.
In breve tempo sarai in grado di utilizzare il blocco Media e testo nel nostro nuovo tema WordPress chiamato Citadela. Ulteriori informazioni sul tema Citadela in un articolo separato.
Come aggiungere il blocco Media e testo nell'editor di blocchi?
Aggiungere un blocco Media e testo è facile come aggiungere qualsiasi altro blocco. È un blocco principale, il che significa che non è necessario scaricare o installare nulla.
Utilizzando l'icona "+" nel pannello superiore o in qualsiasi punto dell'editor e selezionando Media e blocco di testo.
L'ultima opzione è digitare "/" e scrivere "media" in seguito. WordPress ti mostrerà automaticamente i blocchi selezionati che corrispondono a ciò che hai cercato.
Come funziona il blocco Media e testo?
Il blocco Media e testo raggruppa fondamentalmente 2 diversi tipi di contenuto in uno solo. Il primo è medio, ad esempio un'immagine o un video che puoi aggiungere tramite:
- Caricamento
- Libreria multimediale
- Trascina e rilascia
Il secondo è lo spazio per il contenuto testuale. Puoi scrivere paragrafi di testo, elenchi puntati o titolo. Puoi anche aggiungere lì Blocco pulsanti di cui parlavamo prima.
Il blocco multimediale e di testo allinea sempre l'immagine e il testo fianco a fianco, indipendentemente dalla quantità di testo che scrivi. Come funziona? L'immagine si regola automaticamente in base all'altezza del contenuto nella colonna di testo.
Impostazioni multimediali e blocco di testo
Impostazioni generali del blocco
1. Barra degli strumenti superiore
La barra degli strumenti sopra il blocco offre diverse opzioni. Se il tuo tema attivo lo supporta, puoi impostare il blocco Media e testo come largo o a larghezza intera. Puoi anche scegliere dove posizionare l'immagine o il video facendo clic su:
- Mostra i media a sinistra
- Mostra i media a destra
Nella barra degli strumenti in alto c'è anche un'icona per modificare il supporto dove puoi impostare Alt Text, Title, Caption o Description. Scopri di più sulla modifica delle immagini nel nostro articolo Lavorare con il blocco immagine di WordPress.
2. Barra laterale destra
La barra laterale destra offre impostazioni aggiuntive per il blocco Media e testo. È possibile aggiungere qui testo alternativo, impostare il colore di sfondo o aggiungere una classe CSS aggiuntiva. Puoi anche abilitare la funzione "Stack su cellulare".
Che cos'è Stack sul cellulare?
Grazie a questa funzione l'immagine e il testo vengono ben visualizzati sui dispositivi mobili. Se disabiliti "Stack su mobile", immagine e testo rimarranno affiancati e saranno difficilmente leggibili nella versione responsive.
Se abiliti questa funzione, sul cellulare il contenuto sul lato sinistro verrà visualizzato sopra il contenuto che si trova sul lato destro.
Allineamento del testo
Parte del blocco Media e testo è insieme all'immagine o al video anche il contenuto del testo. Può essere uno dei seguenti tipi di contenuto:
1. Paragrafo
Nella barra degli strumenti superiore è possibile impostare l'allineamento del testo, rendere il testo in grassetto, corsivo o aggiungere un collegamento URL.
Nella barra laterale sul lato destro puoi scegliere la dimensione del carattere, il colore del carattere o il colore del paragrafo. Caratteristica interessante è il "Capolettera" che evidenzierà il primo carattere del testo. È una bella funzionalità nei post di blocco per rendere il testo più interessante.
2. Intestazione
L'intestazione è molto simile al paragrafo. Puoi anche configurare il suo aspetto, rendere grassetto o corsivo e inserire il collegamento URL. La differenza è che puoi scegliere il tipo di intestazione: H2, H3, H4.
Altre dimensioni dell'intestazione e impostazioni di allineamento sono disponibili nella barra laterale sul lato destro.
3. Elenco
Se aggiungi un blocco elenco al tuo contenuto, può essere un elenco puntato, un elenco numerato o un elenco a più livelli. Puoi anche rendere il testo in grassetto, corsivo e aggiungere un collegamento URL.
4. Blocco pulsanti
Questo blocco che aggiunge pulsante al contenuto può essere adattato al design del sito web. Il colore e lo stile del pulsante o il colore di sfondo possono essere configurati nella barra laterale sul lato destro.
Non dimenticare di leggere l'articolo su Blocco pulsanti.
Passaggio da un tipo di blocco all'altro
Nel blocco Media e testo è possibile convertire un tipo di blocco di contenuto in un altro. Puoi anche modificare il blocco Media e testo in Blocco immagine e la parte di testo verrà eliminata.
Nel contenuto di testo è possibile modificare il blocco paragrafo in blocco intestazione o elenco.
Bonus: come giustificare il testo in WordPress
L'uso del testo giustificato ha i suoi lati positivi e negativi. Il testo giustificato si trova solitamente nei libri o nei giornali, ma non viene più utilizzato sui siti web. Perché?
Diversi anni fa la funzione Justify era integrata direttamente nell'editor di WordPress Classic. Testo giustificato utilizzato per causare problemi di visibilità in vari browser o dispositivi mobili. È anche correlato alla difficile leggibilità del testo giustificato. Questa funzione è stata pertanto deprecata e rimossa.
Questa particolare funzionalità non esiste nemmeno nel nuovo editor di blocchi (Gutenberg).
Quindi, come giustifichi il testo se lo desideri davvero?
La soluzione è aggiungere un semplice codice CSS in pochi passaggi:
- C'è un'impostazione per la classe CSS aggiuntiva del blocco paragrafo nella barra laterale sul lato destro
- Scrivi lì il nome della classe „giustificare“
- Pubblica una pagina o un articolo
- Se lo visualizzi in anteprima, fai clic su Personalizza nella barra principale in alto
- Sul lato sinistro c'è una nuova barra laterale con le impostazioni
- Fai clic su CSS aggiuntivo
- Inserisci il seguente codice CCS:
p.justify { text-align: justify; }
Fatto. D'ora in poi il testo nel tuo blocco multimediale e di testo è giustificato.
WordPress è diventato più utilizzabile senza page builder di terze parti, grazie all'editor Gutenberg. Ha un valore eccellente per il tuo sito web da un punto di vista a lungo termine e durante la creazione o la riprogettazione di un sito web. I blocchi Gutenberg offrono una vasta gamma di stili, tuttavia potresti trovare la mano Codice WordPress per avvolgere il testo attorno alle immagini.
Qual è la tua opinione su Media e blocco di testo? Lo hai già utilizzato? Come ti piace lavorarci? Fateci sapere nei commenti qui sotto.
Generalmente mi piace il sistema a blocchi ma, a meno che non manchi qualcosa, questo è un passo indietro. Al momento sto cercando di far fluttuare semplicemente un'immagine a sinistra oa destra e ottenere il testo da avvolgere come dovrebbe essere davvero così facile da fare, ma sembra che WordPress non voglia che ciò accada. Perché no? L'utilizzo del blocco multimediale e immagine funziona solo se il testo è della giusta lunghezza. Una pagina come questa, ad esempio, non vuole essere rifatta con una spaziatura dispari tra i paragrafi se il testo non è esattamente della lunghezza giusta per la dimensione dell'immagine.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Ciao,
Grazie mille per il tuo feedback. Sembra un'ottima idea, quindi vorrei chiederti di dedicarci un minuto del tuo tempo per rispondere a 4 semplici domande: https://aitthemes.typeform.com/to/vc7arn che possono aiutare il nostro team a realizzare prodotti migliori con caratteristiche uniche più velocemente.
Grazie mille per il tuo tempo e la tua comprensione.
Cordiali saluti!
Zlatko
squadra dell'AIT
Sì, non riesco a mandare a capo il testo. Questa combinazione di blocchi di testo sembra essere inutile.
Questa idea fa schifo come unico modo per inserire immagini in un blog: non riesco a far avvolgere bene il testo e non ha le stesse dimensioni, qualunque cosa faccia. Buona idea per CERTE situazioni, ma non per tutto. A volte vuoi solo un'immagine con i paragrafi che la avvolgono, piuttosto che dire qualcosa sull'immagine.
Come aggiungere il wrapper e utilizzare il contenuto in tutta la larghezza yar seriamente come coprirlo completamente con poi prendere il contenitore in esso .. builder è molto confuso come aggiungere il contenitore avvolgere l'editor pessimo yar
Ciao,
grazie per i tuoi complimenti. Sentiti libero di dare un'occhiata alla nostra pagina del blog https://www.ait-themes.club/blog/ dove troverai molti consigli utili su come scrivere post accattivanti e utili.
Cordiali saluti!
Zlatko
squadra dell'AIT
Ciao Abdur,
Grazie mille per il tuo feedback, è molto apprezzato dal nostro team!
Distinti saluti.
Zlatko
squadra dell'AIT
Sto avendo la stessa difficoltà di molte altre persone su questo thread. in passato, ero in grado di avvolgere facilmente il testo attorno a un'immagine come nella nostra pagina "chi siamo" dove abbiamo foto e biografie. forse stavo usando il vecchio editor. non ricordo. ma ora sto cercando di aggiornare il nostro sito con nuove foto e biografie e non sono riuscito a trovare un modo per avvolgere facilmente il testo come nelle nostre precedenti combinazioni bio/foto. Ho provato a passare all'editor classico, ma il sito mi ha avvertito che avevo sezioni "nuovo editor di blocchi" e dovevo rimanere con la nuova modalità di modifica. puoi dirmi come fare in modo che le nostre nuove biografie e immagini assomiglino ai nostri post precedenti? Grazie.
Ehilà,
Se desideri disabilitare Gutenberg e continuare con il classico editor di WordPress, prendi in considerazione un plug-in del core team di WordPress che ti consente di farlo con "Classic Editor Plugin".
Distinti saluti!
Zlatko
squadra dell'AIT
Per coloro che vogliono solo un semplice testo che avvolge l'immagine, puoi farlo inserendo il blocco di testo classico (basato nella prima parte dei blocchi quando fai clic su Sfoglia. Puoi utilizzare l'editor classico in un singolo blocco e sì , che ti consente di inserire un'immagine e quindi scegliere l'opzione di avvolgimento Problema risolto 🙂
GRAZIE London SEO Guy!!! Una soluzione semplice ma l'avevo trascurata!
E poi... usa semplicemente l'opzione Converti in blocchi.
Poiché funziona, l'Editor blocchi ha la capacità ma non riesce a trovare come configurarlo correttamente. Nel frattempo questo fudge funziona.
Stesso problema qui. Questa nuova versione è orribile: non c'è modo di avvolgere correttamente il testo o persino di ridurre le dimensioni della foto, a meno che tu non voglia solo ritagliare.
Sono in grado di avvolgere il mio testo attorno a un'immagine nell'editor di blocchi di WordPress. Sembra proprio come voglio che appaia in "Anteprima". Tuttavia, quando pubblico il mio blog e WordPress lo invia tramite e-mail ai miei follower, lo ricevono con l'immagine in alto e il testo sotto l'immagine. Questo accade anche sui computer desktop, non solo sui piccoli telefoni cellulari. Lo voglio avvolto, non impilato.
Ciao,
Grazie per averci scritto. Il blocco non avvolgerà il testo attorno all'immagine in WordPress come ti aspetteresti. Dai un'occhiata alle seguenti istruzioni perché potresti trovarle utili: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Distinti saluti!
Zlatko
squadra dell'AIT
Faccio tutto questo e il mio blog si avvolge perfettamente in Anteprima. Quando lo pubblico, sta benissimo sulla pagina del mio blog. Ma quando WordPress lo invia per e-mail ai miei follower e loro aprono quell'e-mail, non lo vedono impacchettato. Le foto sono in cima al testo. Ha un aspetto molto poco professionale. Non ho mai avuto questo problema con il vecchio editor classico. Ora che sto usando l'editor a blocchi, non mi permette di tornare all'editor classico anche se c'è un'opzione classica su cui fare clic.
Ciao,
Grazie per averci scritto.
Vorremmo gentilmente chiederti di controllare la nostra knowledge base e/o la documentazione con video tutorial:
https://www.ait-themes.club/ait-themes-documentation/
Oppure sentiti libero di pubblicare domande tecniche direttamente nel nostro sistema di ticket di supporto dedicato. Accedi al tuo account su https://system.ait-themes.club/support/add-question.
L'assistenza clienti viene fornita durante i giorni lavorativi dalle 8:00 alle 17:00, ora dell'Europa centrale.
Inoltre, esiste un plug-in che ti consente di utilizzare l'editor precedente. Dovresti installare e attivare "Editor classico".
Cordiali saluti!
Zlatko
squadra dell'AIT
Non sono d'accordo, questo è superiore all'editing classico, perché le opzioni sono più limitate. Trovo che questo blocco, poiché utilizza caratteri diversi ed è più largo di un blocco di testo, sia visivamente stridente. Essere in grado di avvolgere il testo in modo uniforme attorno a un'immagine mantenendo lo stesso carattere, dimensioni e impostazioni dei margini offre la professionalità di una pagina di rivista. Questo è solo un esempio del motivo per cui sono profondamente deluso da questa versione di wordpress.
Ciao Terenzio
grazie per la tua opinione. Hai provato la nostra versione di prova Citadela? Abbiamo alcuni blocchi unici che potrebbero aiutarti a regolare testo e immagini. Ad ogni modo, puoi provare la versione completa - tutte le funzionalità, gratuitamente.
Buona giornata.