Cum să construiți blocuri de aspect imagine reutilizabile pentru adăugarea de imagini în stil Divi la postările Gutenberg

Blocul Layout Divi poate fi folosit ca un bloc de aspect imagine reutilizabil pentru adăugarea de imagini în stil Divi la postările de pe blogul Gutenberg. Aceasta combină opțiunile puternice de design și funcționalitatea Divi (pentru a crea imagini frumoase) cu comoditatea de a scrie postări (și de a adăuga blocuri) cu Gutenberg.

În acest tutorial, vom arăta cum să utilizați blocul de aspect Divi pentru a proiecta câteva aspecte de imagine uimitoare. Apoi vom adăuga acele machete ca blocuri reutilizabile în Gutenberg. Cu această tehnică, vom putea adăuga aproape orice caracteristică de design Divi la imaginile noastre (fundaluri, casetă lightbox, filtre, animații, efecte de derulare și multe altele). Apoi, putem folosi acel design fabulos ca șablon de imagine convenabil pentru adăugarea de imagini la postările viitoare create cu Gutenberg.

Să începem!

Trage cu ochiul

Descărcați GRATUIT blocurile de aspect imagine reutilizabile

Pentru a pune mâinile pe blocurile de aspect din acest tutorial, va trebui mai întâi să le 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!

Cum se folosește descărcarea pentru a importa aceste blocuri de aspect pe site-ul dvs.

Pentru a importa aceste blocuri reutilizabile Divi Image Layout pe site-ul dvs., mai întâi, trebuie să dezarhivați fișierul descărcat. Acolo veți găsi cele trei fișiere JSON pe care va trebui să le importați pe site-ul dvs.

Mergeți pentru a edita o postare folosind editorul implicit (Gutenberg). Deschideți meniul „Mai multe instrumente și opțiuni” din partea dreaptă sus a paginii și selectați „Gestionați toate blocurile reutilizabile”.

Apoi faceți clic pe butonul Import din JSON. Alegeți unul dintre fișierele JSON din folderul de descărcare și faceți clic pe butonul de import.

Repetați acest proces pentru a importa toate cele trei fișiere JSON.

După ce ați terminat, adăugați un bloc nou în Gutenberg. Vom putea găsi blocurile de aspect reutilizabile importate sub comutarea opțiunii Reutilizabile. Pur și simplu faceți clic pe cel pe care doriți să îl adăugați la postarea dvs.

Asta e!

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

Ce trebuie să începem

Pentru a începe, va trebui să facem următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o postare nouă în WordPress și utilizați editorul implicit (Gutenberg) pentru a adăuga conținut fals (titlu, titluri, paragrafe, imagine prezentată etc.). Practic, avem nevoie de un post de testare pentru a construi blocurile de aspect imagine Divi.

După aceea, suntem gata să începem.

Partea 1: Crearea imaginii cu lățime completă cu blocul de layout Divi reutilizabil

Adăugați un bloc de aspect Divi

Pentru a începe, adăugați un bloc de aspect Divi la postarea dvs.

Apoi faceți clic pe „Construiți un aspect nou”.

Proiectarea aspectului imaginii Divi

În Editorul de blocuri de aspect, începeți proiectarea aspectului prin adăugarea unui rând cu o coloană.

Modulul de imagine

Adăugați un modul de imagine pe rând.

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

• Deschideți în Lightbox: DA

Aceasta va permite ca imaginea noastră să se afișeze într-o casetă lightbox la clic.

• Suprapunere imagine: ACTIVATĂ
• Culoarea pictogramei suprapuse: #ffffff
• Hover Overlay Color: rgba (120,47,130,0,57)

Pentru a crea spațiu în jurul imaginii noastre, actualizați setările rândului după cum urmează:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime: 90%
• Lățime maximă: 90%
• Căptușeală: 5% sus, 5% jos

Acest lucru ne va oferi 5% din spațiul în jurul imaginii. Acesta va fi și spațiul care va afișa gradientul de fundal pe care îl vom adăuga la secțiune.

Deschideți setările secțiunii și actualizați designul cu un gradient de fundal, după cum urmează:

• Culoare stânga de fundal degradat: # 782f82
• Culoare dreaptă de fundal degradat: # fe756b
• Direcția gradientului: 90 grade

Pentru ca imaginea să se extindă puțin dincolo de containerul de conținut al postărilor de blog, putem oferi secțiunii o lățime personalizată după cum urmează:

• Lățime: 110%
• Lățime maximă: 100%
• Marja: -5% rămas
• Căptușeală: 0 px sus, 0 px jos

În cele din urmă, dați secțiunii o notă creativă adăugând o umbră interioară, după cum urmează:

• Box Shadow: vezi captura de ecran
• Poziție orizontală a umbrei cutiei: 5vw
• Box Shadow Vertical Position: 5vw
• Culoare umbră: rgba (255,255,255,0,7)

Dacă dorim să avem un aspect al imaginii fără subtitrare, ne putem opri aici, dar pentru a adăuga o legendă la aspectul imaginii, adăugați un modul de text sub imagine.

Apoi adăugați un conținut de umplere pentru a servi ca text al subtitrării.

Apoi actualizați următoarele setări de text:

• Font text: Montserrat
• Greutatea fontului textului: Semi Bold
• Culoarea textului textului: #ffffff
• Lățime: 80%
• Alinierea modulului: corect
• Marja: 5% top

Când ați terminat, asigurați-vă că salvați aspectul cu Ctrl + S sau deschideți bara de setări din partea de jos și faceți clic pe „Salvați și ieșiți”.

Adăugarea aspectului imaginii la blocurile reutilizabile

Pentru a adăuga aspectul blocurilor reutilizabile, faceți clic pe meniul „Mai multe opțiuni” de deasupra blocului și selectați „Adăugați la blocuri reutilizabile”.

Dați un nume blocului reutilizabil și faceți clic pe „Salvare”.

Acum, imaginea cu lățime completă cu aspectul subtitrării a fost adăugată blocurilor reutilizabile și va fi disponibilă din lista de blocuri la construirea unui post.

Nu uitați să actualizați / salvați postarea pentru a salva modificările.

Partea 2: Crearea imaginii din stânga cu blocul de layout Divi reutilizabil

Acum, imaginea cu lățime completă cu aspectul subtitrării a fost adăugată blocurilor reutilizabile, putem folosi acel bloc pentru a crea imaginea din stânga cu aspectul subtitrării.

Conversia blocului reutilizabil în bloc regulat

Pentru a începe, deschideți meniul „Mai multe opțiuni” din partea de sus a blocului reutilizabil care conține aspectul imaginii cu lățime completă. Apoi selectați „Convert to Regular Block”.

Nu vă faceți griji, acest lucru nu va elimina blocul de aspect pe care tocmai l-am creat din blocurile reutilizabile (există totuși o opțiune pentru asta). Acest lucru va face pur și simplu blocul reutilizabil un bloc obișnuit, astfel încât să putem edita și utiliza blocul pentru o singură instanță.

Actualizați aspectul

Odată ce blocul este regulat, faceți clic pe butonul Editați aspectul de deasupra blocului.

În editorul de aspect, deschideți setările secțiunii și actualizați lățimea după cum urmează:

• Lățime: automată
• Lățime maximă: 500 px

Asta este tot ce trebuie să facem în editorul de aspect. Asigurați-vă că salvați și ieșiți din aspect.

Cu blocul selectat, deschideți bara laterală a setărilor principale și selectați fila bloc pentru a afișa setările blocului. Sub comutarea avansată, adăugați următoarea clasă:

• Adăugare CSS Class: alignleft

Această clasă este nativă pentru WordPress și va pluti blocul spre stânga, care va pluti și imaginea noastră la stânga conținutului din postarea noastră.

După ce clasa a fost adăugată, deschideți meniul „Mai multe opțiuni” al blocului și faceți clic pe „Adăugați la blocuri reutilizabile.

Dați un nume blocului reutilizabil (adică „Imagine stângă cu subtitrare”) și faceți clic pe Salvați.

Acum, imaginea din stânga cu blocul de aspect Subtitrare a fost adăugată la lista blocurilor reutilizabile pentru acces ușor.

Partea 3: Crearea blocului de aspect Divi reutilizabil „Imagine corectă cu subtitrare”

Până în prezent avem o imagine cu lățime completă cu un bloc de aspect de subtitrare și o imagine din stânga cu un bloc de aspect de subtitrare. Acum putem adăuga imaginea potrivită cu blocul de aspect al subtitrării.

Conversia blocului reutilizabil în bloc regulat

Pentru a face acest lucru, deschideți meniul „Mai multe opțiuni” din imaginea din stânga cu legenda bloc reutilizabil. Apoi selectați „Convert to Regular Block”.

Actualizați aspectul

Odată ce blocul este un bloc de aspect obișnuit, faceți clic pentru a edita aspectul.

Apoi deschideți setările secțiunii și scoateți marginea din stânga.

Salvați și ieșiți din editorul de aspect.

Apoi actualizați clasa CSS suplimentară a blocului cu următoarele:

• Clasa CSS suplimentară: alignright

După ce Clasa a fost adăugată, adăugați blocul de aspect la Blocuri reutilizabile.

Și dați un nume blocului reutilizabil (adică „Imagine corectă cu subtitrare”) și salvați-l.

Acum faceți clic pe una dintre pictogramele albastre plus sub un bloc din postare pentru a adăuga un bloc nou. Apoi, în fereastra pop-up a listei de blocuri, deschideți comutatorul reutilizabil. Acum avem cele trei blocuri de aspect imagine reutilizabile gata pentru a fi utilizate.

Partea 4: Utilizarea blocurilor de aspect imagine reutilizabile pe o postare.

Deși avem blocurile de aspect ale imaginii create, ele există (în scopurile noastre) doar ca șablon pentru a începe procesul de adăugare a unei imagini la o postare. Prin urmare, de fiecare dată când dorim să adăugăm o imagine reală la o postare folosind aceste blocuri de aspect, va trebui mai întâi să o convertim într-un bloc obișnuit înainte de a adăuga imaginea și subtitrarea la aspect.

Iată cum să o faci.

Pasul 1: Adăugați blocul de aspect reutilizabil

Adăugați unul din blocurile de aspect imagine reutilizabile Divi la postare.

Pasul 2: convertiți-l într-un bloc obișnuit

Deschideți meniul „Mai multe opțiuni” și selectați „Convertiți în bloc normal”.

Pasul 3: Editați blocul de aspect cu o nouă imagine și subtitrare

Odată ce blocul este regulat, faceți clic pentru a edita aspectul.

Actualizați aspectul cu o imagine la alegere.

Apoi actualizați textul subtitrării din modulul text.

Pasul 4: Salvați blocul de aspect

După ce ați terminat, salvați și ieșiți din editorul de aspect.

Continuați același proces pentru a adăuga celelalte două aspecte de imagine la postare.

Rezultat final

Gânduri finale

Odată ce avem acces la blocul de aspect Divi, devine evident cât de valoros poate fi pentru viața blogului nostru. În această postare, am prezentat cum să utilizați blocul de aspect pentru a adăuga imagini Divi destul de interesante într-o postare pe blogul Gutenberg. Trucul este să salvați mai întâi aspectele ca bloc reutilizabil. Apoi, când suntem gata să adăugăm imagini la o postare pe blog, putem converti cu ușurință blocul reutilizabil într-un bloc obișnuit, astfel încât să putem adăuga imaginea și legenda noastră.

Sperăm că acest lucru vă va oferi o inspirație pentru a duce imaginile blogului dvs. la un nivel cu totul nou.

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

Noroc!