Cum să înfășurați textul în jurul imaginilor în Divi (3 moduri)

Înfășurarea textului în jurul imaginilor este o tehnică comună de proiectare întâlnită cel mai frecvent în presa scrisă, cum ar fi revistele și ziarele. Dar puteți găsi acest lucru și pe web, în ​​special pentru postările de pe blog. Înfășurarea textului în jurul unei imagini este de fapt o parte destul de standardă a WordPress care implică o simplă ajustare a alinierii pe editorul WYSIWYG. Singura problemă este că este dificil să personalizați stilul paginii dvs. utilizând editorul WordPress implicit. Acolo poate ajuta Divi!

În acest tutorial, vă voi arăta 3 moduri în care puteți utiliza Divi pentru a înfășura text în jurul imaginilor. Acest lucru vă va permite să creați machete clasice de tipărire cu puterea lui Divi pentru a vă ajuta cu designul. Iată ce vom acoperi:

1. Cum se înfășoară textul în jurul imaginilor (și al citatelor bloc) în interiorul unui modul de text cu editorul WYSIWYG
2. Cum să înfășurați text în jurul unei imagini prin plutirea unui modul de imagine lângă un modul de text în Divi
3. Cum se înfășoară textul în jurul unei imagini centrate pentru un aspect unic cu două coloane

Deși acest tutorial se va concentra pe imagini, puteți utiliza de fapt același proces pentru a înfășura text în jurul oricărui modul din Divi.

Trage cu ochiul

Iată o scurtă privire asupra proiectului principal pe care îl vom construi astăzi.

Să începem!

Abonați-vă la canalul nostru Youtube

Descărcați GRATUIT textul de înfășurare în jurul imaginilor

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, tot ce aveți nevoie este Divi și câteva imagini.

• Divi - Asigurați-vă că tema Divi este instalată și activă. Vom crea proiectele noastre de la zero folosind Divi Builder de pe partea frontală (constructor vizual).
• Imagini - De asemenea, asigurați-vă că aveți cel puțin o imagine de 400 x 250 de pixeli pe care să o utilizați pentru tutorial.

Când sunteți gata, accesați tabloul de bord WordPress și navigați la Pagini> Adăugați un nou. Acordați titlului noii pagini și implementați Divi Builder în partea frontală. Selectați opțiunea „Construiți de la zero”. Acum ești gata să pleci!

Cum se înfășoară textul în jurul imaginilor și al citatelor bloc în interiorul unui modul de text cu editorul WYSIWYG

WordPress facilitează înfășurarea textului în jurul imaginilor folosind editorul implicit WordPress (WYSIWYG). Și pentru că modulul text Divi are același editor WordPress WYSIWYG încorporat, putem folosi aceeași metodă pe care au folosit-o întotdeauna utilizatorii WordPress pentru a înfășura text în jurul imaginilor.

Iată cum să o faci.

Creați o secțiune obișnuită cu un rând cu o coloană și apoi adăugați un modul text la rând.

Actualizați conținutul modulului text cu copia dvs. Deocamdată folosesc câteva paragrafe din lorem ipsum.

Acum, dacă nu ați făcut-o deja, selectați fila vizuală din editorul de conținut. Apoi, asigurați-vă că dați clic pe partea de sus a zonei de conținut în care doriți să adăugați o imagine și faceți clic pe butonul Adăugați suport media.

În fereastra pop-up a bibliotecii media, selectați imaginea pe care doriți să o utilizați. Și sub setările afișajului atașamentului alegeți stânga sau dreapta pentru opțiunea de aliniere. Pentru acest exemplu, vreau să poziționez imaginea spre stânga.

WordPress va adăuga o clasă la imaginea dvs. (numită „alignleft”), care va pluti imaginea spre stânga. Proprietatea float care este adăugată va permite textului să se înfășoare în jurul imaginii. WordPress va adăuga, de asemenea, un tampon în jurul imaginii folosind margini pentru a crea o distanță mică între imagine și textul din jur.

Și, bineînțeles, dacă dați imaginii o aliniere corectă, imaginea va pluti spre dreapta, permițând textului să se înfășoare în jurul imaginii.

Puteți utiliza, de asemenea, o tehnică similară pentru a înfășura textul în jurul unui blockquote într-un modul de text. Pentru a face acest lucru, creați o cotare bloc utilizând editorul de conținut.

Apoi stilizați blockquote utilizând setările modulelor de text încorporate pentru un blockquote.

Apoi reveniți la editorul de conținut și treceți la fila text. Apoi adăugați un stil în linie la eticheta blockquote pentru a crea o distanță în jurul blockquote și flotați-o spre stânga. HTML-ul dvs. blockquote ar trebui să arate cam așa.

<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>

Acum textul se va înfășura în jurul blocului.

Cum se înfășoară textul în jurul unei imagini prin plutirea unui modul de imagine lângă un modul de text în Divi

Pentru a înfășura text în jurul unui modul de imagine, putem pluti întregul modul de imagine lângă un modul de text. Aceasta poate fi o metodă preferată față de utilizarea editorului WordPress de mai sus, deoarece vă permite un control deplin asupra stilului imaginii dvs. utilizând setările constructorului Divi în loc să adăugați un stil inline sau css extern la o etichetă de imagine.

Iată cum să o faci.

Creați o nouă secțiune obișnuită cu un rând cu o coloană. Apoi adăugați un modul de imagine pe rând cu imaginea pe care o alegeți. Imaginea pe care o folosesc este din pachetul Charity Layout Pack și are o rezoluție de 400 x 250 px.

Apoi adăugați un modul de text sub modulul de imagine cu un conținut de text simulat.

Acum, cu ambele module în poziție, trebuie să plutim imaginea în stânga modulului de text. Pentru aceasta, deschideți setările modulului de imagine și adăugați următoarele elemente CSS personalizate la elementul principal:

float:left;

Apoi actualizați marginea personalizată a imaginii pentru a crea tamponul de care avem nevoie pentru înfășurarea textului în jurul imaginii:

Marja personalizată: 2% sus, 2% jos, 2% dreapta

Iată rezultatul.

Și, dacă doriți să flotați imaginea spre dreapta, deschideți setările modulului de imagine și înlocuiți css cu următoarele:

float:right;

Și actualizați spațiul de marjă la următoarele:

Marja personalizată: 2% sus, 2 $ jos, 2% stânga

Iată rezultatul.

Folosind acest design pe mai multe coloane

De asemenea, puteți utiliza această configurație în mai multe coloane pentru a crea un design de ambalare a textului pentru a vă prezenta serviciile. Pentru aceasta, schimbați aspectul coloanei rândului în două coloane.

Apoi dați imaginii o valoare procentuală de lățime maximă, astfel încât să răspundă la diferite lățimi ale browserului.

Lățime maximă: 33,33% (desktop), 100% (telefon)

Copiați modulul imagine și text din prima coloană și lipiți-le în coloana 2. Apoi actualizați conținutul și imaginile după cum este necesar.

Asta e. Iată rezultatul.

Cum se înfășoară textul în jurul unei imagini sau a unui modul centrat pentru un aspect unic cu două coloane

În acest exemplu, vă voi arăta cum să înfășurați două coloane de text în jurul unui modul de imagine centrat. Acest lucru vă permite să creați un aspect unic al revistei sau al ziarului. Dar, întrucât nu există proprietate CSS „float: center”, va trebui să devenim puțin creativi cu aspectul pentru ca acest design să funcționeze.

Iată cum să o faci.

Crearea conținutului rândului de sus cu o imagine centrată

Pentru a începe, creați o nouă secțiune obișnuită cu un rând de o coloană. Apoi adăugați un modul de imagine la rândul dvs. Încărcați o imagine de 400 x 250 px. Dimensiunea trebuie să fie exactă pentru acest design.

Apoi actualizați setările de proiectare după cum urmează:

Lățime maximă: 400 px (desktop), 100% (tabletă)
Alinierea modulului: centru
Căptușeală personalizată: 2% sus, 2% jos, 2% stânga, 2% dreapta

Apoi salvați setările și deschideți setările rândului. Scoateți căptușeala inferioară a rândului.

Căptușeală personalizată: 0 px de jos

Creați rândul de text cu două coloane

Sub rândul care conține imaginea, creați un rând nou cu un aspect cu două coloane.

În coloana 1, adăugați un modul text cu un conținut fals.

Apoi copiați modulul de text și lipiți-l în coloana 2 pentru a doua coloană de text.

Crearea spațiului gol cu ​​separatoare plutitoare

Pentru a crea spațiul de care avem nevoie pentru imagine, putem folosi module de divizare. În coloana din stânga vom crea un modul divizor care are jumătate din dimensiunea imaginii și o vom flota spre dreapta, astfel încât modulul nostru text să se înfășoare în jurul divizorului. Apoi, în coloana din dreapta, vom crea un alt separator care are jumătate din dimensiunea imaginii și o vom flota spre stânga.

Pentru a face acest lucru, creați un modul divizor și plasați-l direct deasupra modulului de text din coloana 1.

Apoi actualizați setările modulului divizor după cum urmează:

Show Divider: NU
Lățime: 200 px
Înălțime: 250 px

Asigurați-vă că înălțimea este aceeași înălțime a imaginii pe care ați creat-o mai devreme și că lățimea este exact jumătate din lățimea imaginii.

Pentru mobil, dorim să dezactivăm separatoarele de pe tabletă și telefon. Pentru aceasta, actualizați setările de vizibilitate pentru a dezactiva afișajul tabletei și al telefonului.

Acum că a fost creat primul nostru separator, copiați modulul divizor și lipiți-l deasupra modulului text din coloana 2.

Apoi, trebuie să ne plutim separatoarele. Pentru aceasta, deschideți setările divizorului din coloana 1 și adăugați următorul CSS personalizat la elementul principal:

float: right;

Apoi, deschideți setările pentru modulul divizor din coloana 2 și adăugați următorul CSS personalizat la elementul principal:

float: left;

Mutarea imaginii în loc cu margine personalizată

Acum tot ce trebuie să facem este să ne dăm jos imaginea în primul rând, astfel încât să se potrivească în spațiul pe care l-am creat cu separatoarele noastre.

Deschideți setările modulului de imagine și adăugați următoarele margini personalizate:

Marjă personalizată: -250 px în partea de jos (desktop), 20 px (tabletă)

Iată rezultatul de până acum.

Adăugarea unui titlu la secțiune

Acest ultim pas este opțional, dar dacă doriți să adăugați un titlu la secțiune, creați un modul text și poziționați-l deasupra imaginii.

Apoi adăugați următorul conținut la modulul text:

<h2>Learn more about how to give</h2>

Apoi actualizați setările de text după cum urmează:

Culoare fundal: # 000000
Titlul 2 Font: Playfair Display
Titlul 2 Aliniere text: centru
titlul 2 Culoarea textului: #ffffff
Titlul 2 Înălțimea liniei: 2em

Justificați textul pentru un design mai curat de ambalare a textului

Când înfășurați text în jurul imaginilor, mai ales dacă textul este centrat astfel, este întotdeauna o idee bună să utilizați justificarea textului din jur. În acest caz, tot ce trebuie să facem este să schimbăm orientarea textului pentru a justifica ambele module de text care conțin conținutul nostru de text.

Rezultat final

Iată rezultatul final.

Și aici este pe afișajul tabletei și al telefonului.

Gânduri finale

Știind cum să înfășurați textul în jurul imaginilor în mod eficient, puteți face ca conținutul dvs. să pară profesional și ușor de citit. Conceptul este destul de simplu. Tot ce trebuie să faceți este să flotați imaginea spre dreapta sau spre stânga și apoi să utilizați spațiere personalizată în jurul imaginii pentru tampon. Și ceea ce îmi place este că poți pluti orice modul (nu doar imagini) pentru a înfășura text în jurul oricărui tip de conținut din Divi. Sper că acest lucru vă va oferi puțină inspirație pentru următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!