Come avvolgere il testo intorno alle immagini in Divi (3 modi)
Pubblicato: 2019-05-27Avvolgere il testo attorno alle immagini è una tecnica di progettazione comune che si trova più comunemente nei supporti di stampa come riviste e giornali. Ma puoi anche trovarlo usato sul web, specialmente per i post del blog. Avvolgere il testo attorno a un'immagine è in realtà una parte piuttosto standard di WordPress che comporta una semplice regolazione dell'allineamento nell'editor WYSIWYG. L'unico problema è che è difficile personalizzare lo stile della tua pagina utilizzando l'editor WordPress predefinito. Ecco dove Divi può aiutarti!
In questo tutorial, ti mostrerò 3 modi in cui puoi utilizzare Divi per avvolgere il testo attorno alle immagini. Ciò ti consentirà di creare layout di stile di stampa classico con la potenza di Divi per aiutarti con il design. Ecco di cosa parleremo:
- Come avvolgere il testo attorno alle immagini (e alle virgolette) all'interno di un modulo di testo con l'editor WYSIWYG
- Come avvolgere il testo attorno a un'immagine facendo fluttuare un modulo immagine accanto a un modulo di testo in Divi
- Come avvolgere il testo attorno a un'immagine centrata per un layout a due colonne unico
Sebbene questo tutorial si concentri sulle immagini, puoi effettivamente utilizzare questo stesso processo per avvolgere il testo attorno a qualsiasi modulo in Divi.
Sbirciata
Ecco un'anteprima del design principale che costruiremo oggi.
Iniziamo!
Iscriviti al nostro canale Youtube
Scarica GRATUITAMENTE il layout del testo avvolgente intorno alle immagini
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, tutto ciò di cui hai bisogno è Divi e alcune immagini.
- Divi : assicurati che il tema Divi sia installato e attivo. Creeremo i nostri progetti da zero utilizzando Divi Builder sul front-end (visual builder).
- Immagini : assicurati inoltre di avere almeno un'immagine di 400 x 250 pixel da utilizzare per il tutorial.
Quando sei pronto, vai alla dashboard di WordPress e vai a Pagine> Aggiungi nuovo. Dai un titolo alla tua nuova pagina e distribuisci Divi Builder sul front-end. Seleziona l'opzione "Costruisci da zero". Ora sei pronto per partire!
Come avvolgere il testo attorno alle immagini e alle virgolette all'interno di un modulo di testo con l'editor WYSIWYG
WordPress semplifica la disposizione del testo attorno alle immagini utilizzando l'editor predefinito di WordPress (WYSIWYG). E poiché il modulo di testo di Divi ha lo stesso editor WYSIWYG di WordPress integrato, possiamo usare lo stesso metodo che gli utenti di WordPress hanno sempre usato per avvolgere il testo attorno alle immagini.
Ecco come farlo.
Crea una sezione regolare con una riga a una colonna e quindi aggiungi un modulo di testo alla riga.
Aggiorna il contenuto del modulo di testo con la tua copia. Per ora sto usando un paio di paragrafi di lorem ipsum.
Ora, se non l'hai già fatto, seleziona la scheda visiva nell'editor dei contenuti. Quindi assicurati di fare clic nella parte superiore dell'area del contenuto in cui desideri aggiungere un'immagine e fai clic sul pulsante Aggiungi media.
Nel popup della libreria multimediale, seleziona l'immagine che desideri utilizzare. E sotto le impostazioni di visualizzazione degli allegati scegli sinistra o destra per l'opzione di allineamento. Per questo esempio, voglio posizionare l'immagine a sinistra.
WordPress aggiungerà una classe alla tua immagine (chiamata "alignleft") che farà fluttuare l'immagine a sinistra. La proprietà float aggiunta consentirà al testo di avvolgere l'immagine. WordPress aggiungerà anche un buffer attorno all'immagine utilizzando i margini per creare poco spazio tra l'immagine e il testo circostante.
E, naturalmente, se dai all'immagine un allineamento corretto, l'immagine fluttuerà a destra consentendo al testo di avvolgere l'immagine.
Puoi anche usare una tecnica simile per avvolgere il testo attorno a un blockquote in un modulo di testo. Per fare ciò, crea un blockquote utilizzando l'editor dei contenuti.
Quindi modella il blockquote usando le impostazioni dei moduli di testo incorporati per un blockquote.
Quindi torna all'editor dei contenuti e passa alla scheda di testo. Quindi aggiungi uno stile in linea al tag blockquote per creare uno spazio attorno al blockquote e spostarlo a sinistra. Il tuo html blockquote dovrebbe assomigliare a questo.
<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>
Ora il testo si avvolgerà attorno al blockquote.
Come avvolgere il testo attorno a un'immagine facendo fluttuare un modulo immagine accanto a un modulo di testo in Divi
Per avvolgere il testo attorno a un modulo immagine, possiamo far fluttuare l'intero modulo immagine accanto a un modulo di testo. Questo potrebbe essere un metodo preferito per utilizzare l'editor di WordPress sopra perché ti consente il pieno controllo dello stile della tua immagine utilizzando le impostazioni del generatore Divi invece di aggiungere uno stile in linea o un css esterno a un tag immagine.
Ecco come farlo.
Crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi un modulo immagine alla riga con l'immagine di tua scelta. L'immagine che sto usando proviene dal Charity Layout Pack ed è 400px per 250px.
Quindi aggiungi un modulo di testo sotto il modulo immagine con del contenuto di testo fittizio.
Ora con entrambi i moduli in posizione, dobbiamo far fluttuare l'immagine a sinistra del modulo di testo. Per farlo, apri le impostazioni del modulo immagine e aggiungi il seguente CSS personalizzato all'elemento principale:
float:left;
Quindi aggiorna il margine personalizzato dell'immagine per creare il buffer di cui abbiamo bisogno per il testo che avvolge l'immagine:
Margine personalizzato: 2% in alto, 2% in basso, 2% a destra
Ecco il risultato.
E, se vuoi far fluttuare l'immagine a destra, apri le impostazioni del modulo immagine e sostituisci il css con quanto segue:
float:right;
E aggiorna la spaziatura dei margini come segue:
Margine personalizzato: 2% in alto, 2 $ in basso, 2% a sinistra
Ecco il risultato.
Usando questo design su più colonne
Puoi anche utilizzare questa configurazione in più colonne per creare un design di avvolgimento del testo per mostrare i tuoi servizi. Per fare ciò, cambia il layout delle colonne della tua riga in due colonne.
Quindi assegna all'immagine un valore percentuale di larghezza massima in modo che risponda a diverse larghezze del browser.
Larghezza massima: 33,33% (desktop), 100% (telefono)
Copia l'immagine e il modulo di testo dalla prima colonna e incollali nella colonna 2. Quindi aggiorna il contenuto e le immagini secondo necessità.
Questo è tutto. Ecco il risultato.
Come avvolgere il testo attorno a un'immagine o modulo centrato per un layout a due colonne unico
In questo esempio, ti mostrerò come avvolgere due colonne di testo attorno a un modulo immagine centrato. Ciò consente di creare un layout unico in stile rivista o giornale. Ma, poiché non esiste la proprietà css "float: center", avremo bisogno di essere un po' creativi con il layout affinché questo design funzioni.
Ecco come farlo.
Creazione del contenuto della riga superiore con un'immagine centrata
Per iniziare, crea una nuova sezione regolare con una riga di una colonna. Quindi aggiungi un modulo immagine alla tua riga. Carica un'immagine di 400 px per 250 px. Il dimensionamento deve essere esatto per questo design.
Quindi aggiorna le impostazioni di progettazione come segue:
Larghezza massima: 400 px (desktop), 100% (tablet)
Allineamento del modulo: centro
Imbottitura personalizzata: 2% in alto, 2% in basso, 2% a sinistra, 2% a destra
Quindi salva le tue impostazioni e apri le impostazioni della riga. Estrarre l'imbottitura inferiore della riga.
Imbottitura personalizzata: 0px in basso
Crea la riga di testo a due colonne
Sotto la riga contenente l'immagine, crea una nuova riga con un layout a due colonne.
Nella colonna 1, aggiungi un modulo di testo con del contenuto fittizio.
Quindi copia il modulo di testo e incollalo nella colonna 2 per una seconda colonna di testo.
Creare uno spazio vuoto con divisori flottanti
Per creare lo spazio di cui abbiamo bisogno per l'immagine, possiamo utilizzare i moduli divisori. Sulla colonna di sinistra creeremo un modulo divisore che è la metà delle dimensioni dell'immagine e lo sposteremo a destra in modo che il nostro modulo di testo si avvolga attorno al divisore. Quindi nella colonna di destra creeremo un altro divisore che è la metà delle dimensioni dell'immagine e lo sposteremo a sinistra.
Per fare ciò, crea un modulo divisore e posizionalo direttamente sopra il modulo di testo nella colonna 1.
Quindi aggiorna le impostazioni del modulo divisore come segue:
Mostra divisore: NO
Larghezza: 200 px
Altezza: 250 px
Assicurati che l'altezza sia la stessa dell'immagine che hai creato in precedenza e che la larghezza sia esattamente la metà della larghezza dell'immagine.
Per i dispositivi mobili, vogliamo disabilitare i divisori su tablet e telefono. Per fare ciò, aggiorna le impostazioni di visibilità per disabilitare il display del tablet e del telefono.
Ora che il nostro primo divisore è stato creato, copia il modulo divisore e incollalo sopra il modulo di testo nella colonna 2.
Successivamente, dobbiamo far galleggiare i nostri divisori. Per fare ciò, apri le impostazioni del divisore nella colonna 1 e aggiungi il seguente CSS personalizzato all'elemento principale:
float: right;
Quindi, apri le impostazioni per il modulo divisore nella colonna 2 e aggiungi il seguente CSS personalizzato all'elemento principale:
float: left;
Spostare l'immagine in posizione con margine personalizzato
Ora tutto ciò che dobbiamo fare è abbassare la nostra immagine nella prima riga in modo che si adatti allo spazio che abbiamo creato con i nostri divisori.
Apri le impostazioni del modulo immagine e aggiungi i seguenti margini personalizzati:
Margine personalizzato: -250 px in basso (desktop), 20 px (tablet)
Ecco il risultato finora.
Aggiunta di un titolo alla sezione
Quest'ultimo passaggio è facoltativo, ma se desideri aggiungere un titolo alla sezione, crea un modulo di testo e posizionalo sopra l'immagine.
Quindi aggiungi il seguente contenuto al modulo di testo:
<h2>Learn more about how to give</h2>
Quindi aggiorna le impostazioni del testo come segue:
Colore di sfondo: #000000
Intestazione 2 Carattere: Display Playfair
Intestazione 2 Allineamento del testo: centro
titolo 2 Colore testo: #ffffff
Intestazione 2 Altezza riga: 2em
Giustifica il testo per un design di avvolgimento del testo più pulito
Quando si avvolge il testo attorno alle immagini, specialmente se il testo è centrato in questo modo, è sempre una buona idea giustificare il testo circostante. In questo caso, tutto ciò che dobbiamo fare è cambiare l'orientamento del testo per giustificare entrambi i moduli di testo che contengono il nostro contenuto di testo a capo.
Risultato finale
Questo è il risultato finale.
Ed eccolo sul display del tablet e del telefono.
Pensieri finali
Sapere come avvolgere il testo attorno alle immagini in modo efficace può davvero rendere i tuoi contenuti professionali e facili da leggere. Il concetto è piuttosto semplice. Tutto quello che devi fare è spostare l'immagine a destra oa sinistra e quindi utilizzare la spaziatura personalizzata attorno all'immagine per il buffer. E quello che mi piace è che puoi far fluttuare qualsiasi modulo (non solo immagini) per avvolgere il testo attorno a qualsiasi tipo di contenuto in Divi. Spero che questo ti dia un po' di ispirazione per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!