Le immagini a capo automatico del testo sono una tecnica di progettazione comune, generalmente utilizzata 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 abbastanza standard di WordPress che comporta una semplice regolazione dell'allineamento nell'editor WYSIWYG. L'unico problema è che è difficile dare uno stile alla tua pagina usando l'editor predefinito di WordPress. È lì che Divi può aiutare !

Sebbene questo tutorial si concentri sulle immagini, puoi effettivamente utilizzare questo stesso processo per avvolgere il testo in qualsiasi modulo. Divi.

Panoramica

Ecco uno sguardo al progetto principale che costruiremo oggi.

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 una proprietà CSS "float: center", avremo bisogno di un po 'di creatività con il layout per far funzionare questo progetto.

Ecco come farlo.

Creazione di contenuti nella 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 pixel per 250 pixel. Le dimensioni devono essere esatte per questo design.

Quindi aggiornare i parametri di progettazione come segue:

Larghezza massima: 400px (desktop), 100% (tablet)
Allineamento del modulo: centro
Imbottitura personalizzata: 2% nella parte superiore, 2% nella parte inferiore, 2% a sinistra, 2% a destra

Quindi salvare le impostazioni e aprire le impostazioni della linea. Rimuovere l'imbottitura dalla parte inferiore della riga.

Imbottitura personalizzata: 0px nella parte inferiore

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 a contenuto manichino.

Quindi copia il modulo di testo e incollalo nella colonna 2 per una seconda colonna di testo.

Creare spazio vuoto con divisori fluttuanti

Per creare lo spazio di cui abbiamo bisogno per l'immagine, possiamo utilizzare i moduli di divisione. Nella colonna di sinistra, creeremo un modulo divisore della metà dell'immagine e lo sposteremo a destra in modo che il nostro modulo di testo si avvolga intorno al divisore. Successivamente, nella colonna di destra, creeremo un altro separatore che è la metà delle dimensioni dell'immagine e lo sposteremo a sinistra.

Per fare ciò, crea un modulo di separazione e posizionalo direttamente sopra il modulo di testo nella colonna 1.

Quindi aggiornare le impostazioni del modulo diviso come segue:

Mostra divisore: NO
Larghezza: 200px
Altezza: 250px

Assicurati che l'altezza sia la stessa di quella creata in precedenza e che la larghezza sia esattamente la metà della larghezza dell'immagine.

Per i dispositivi mobili, vogliamo disabilitare i separatori su tablet e telefono. Per fare ciò, aggiorna le impostazioni di visibilità per disattivare il display del tablet e del telefono.

Ora che viene creato il nostro primo separatore, copia il modulo di separazione 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 codice CSS personalizzato all'elemento principale:

float: right;

Successivamente, apri le impostazioni del modulo di divisione nella colonna 2 e aggiungi il seguente codice CSS personalizzato all'elemento principale:

float: left;

Sposta l'immagine in posizione con un margine personalizzato

Ora non ci resta che ridurre 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: basso -250px (desktop), 20px (tablet)

Ecco il risultato finora.

Aggiungi un titolo alla sezione

Quest'ultimo passaggio è facoltativo, ma se vuoi aggiungere un titolo alla sezione, crea un modulo di testo e posizionalo sopra l'immagine.

Quindi aggiungere il contenuto seguendo il modulo di testo:

Ulteriori informazioni su come dare

Quindi aggiornare le impostazioni del testo come segue:

Colore di sfondo: #000000
Titolo 2 Font: Playfair Display
Titolo 2 Allineamento del testo: Titolo centrale
Colore testo 2: #ffffff
Titolo 2 Altezza linea: 2em

Giustifica il testo per un design a capo automatico più pulito

Quando si circonda il testo con le immagini, specialmente se il testo è centrato in questo modo, è sempre una buona idea giustificare il testo circostante. In questo caso, cambia semplicemente l'orientamento del testo in giustificare il due moduli di testo contenenti il ​​ns contenuto di avvolgere il testo.

Risultato finale

Ecco il risultato finale.

Considerazioni finali

Sapere come circondare efficacemente il testo con le immagini può davvero rendere i tuoi contenuti professionali e facili da leggere. Il concetto è abbastanza semplice. Tutto quello che devi fare è spostare l'immagine a destra o a sinistra e quindi utilizzare la spaziatura personalizzata attorno all'immagine per il buffering. E quello che mi piace è che puoi utilizzare qualsiasi modulo (non solo immagini) per inserire testo in qualsiasi tipo di contenuto Divi. Spero che questo ti dia una piccola ispirazione per il tuo prossimo progetto.

Spero di sentirti nei commenti.