5 modele creative Divi Blurb Module

În această postare, vom explora una dintre cele mai populare caracteristici ale lui Divi, Blurb Module. Deși aparent simplu în afara porții, are multe caracteristici personalizabile care pot aduce la viață elementele site-ului dvs. web. În general, modulul Blurb este utilizat pentru lucruri precum servicii, beneficii, informații de contact etc., dar cu Divi, posibilitățile sunt nelimitate.

Hai să ne distrăm!

Trage cu ochiul

Iată o scurtă prezentare a celor 5 stiluri de module blurb pe care le voi crea în acest tutorial.

5 modele creative Divi Blurb Module

Abonați-vă la canalul nostru Youtube

Noțiuni de bază

Pentru a începe, va trebui să creați o nouă pagină. Din tabloul de bord WordPress, navigați la Pagini> Adăugați un nou. Apoi acordați titlului paginii dvs. și implementați constructorul vizual. Selectați opțiunea „Build From Scratch”. Odată ce constructorul vizual se încarcă pe pagină, sunteți gata să începeți proiectarea.

Acest tutorial este conceput pentru a face mai ușoară crearea fiecăruia dintre aceste modele de stil blurb în mod individual, așa că nu ezitați să treceți pe post pe designul pe care doriți să îl construiți. Cu alte cuvinte, nu trebuie să începeți cu primul.

1. Pop-Out Blurbs cu liste de funcții

În acest prim exemplu, ne vom distra puțin cu extinderea blurbs în afara rândului pentru a crea un efect pop-out. Apoi putem folosi coloanele adiacente de lângă fiecare pentru a adăuga câteva blurbs cu pictograme aliniate la stânga pentru a servi ca elemente de listă recomandate.

Pentru a începe, creați o nouă secțiune și un rând cu o structură cu patru coloane.

Apoi continuați și actualizați setările rândului după cum urmează:

Culoare fundal: # 2e3858
Faceți acest rând lățime completă: DA
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA
Marjă personalizată: 5vw sus, 5vw jos
Împletire personalizată: 0 px sus, 0 px jos

Salvează setările.

Apoi, în prima coloană, adăugați primul dvs. modul blurb.

Scoateți ultima propoziție din caseta de conținut pentru a scurta puțin cantitatea de text. Apoi selectați să utilizați o pictogramă în locul unei imagini și alegeți o pictogramă (oricine o va face).

Apoi actualizați următoarele:

Culoare fundal: # df4570
Culoare pictogramă: #ffffff
Orientare text: centru
Titlu Font: Encode Sans Semi Condensed
Titlu Stil Font: TT
Spațierea literelor de titlu: 2 px
Marjă personalizată (desktop): -5vw sus, -5vw jos
Marja personalizată (tabletă): 0 px sus, 0 px jos
Căptușeală personalizată: 5vw sus, 5vw jos, 3vw stânga, 3vw dreapta
Box Shadow: vezi captura de ecran
Puterea neclarității umbrei cutiei: 80 px

Folosind opțiunea de meniu clic dreapta sau tastele scurte cmd + c și cmd + v, copiați modulul pe care tocmai l-ați creat și lipiți-l în coloana 3. Apoi actualizați setările noului modul blurb cu o altă culoare de fundal strălucitoare (dar gratuită):

Culoare fundal: # 24c4a3

Acum a venit timpul să adăugăm elementele de listă blurbs adiacente la elementele de tip pop-out pe care tocmai le-am creat.

Pentru a face acest lucru, adăugați un text nou în coloana 2. Apoi scoateți textul fals în caseta de conținut, astfel încât să rămână doar textul titlului. Apoi adăugați o pictogramă pentru a vă înlocui imaginea la fel ca înainte. Apoi actualizați setările de proiectare după cum urmează:

Culoare pictogramă: # df4570
Plasare imagine / pictogramă: stânga
Titlu Font: Encode Sans Semi Condensed
Căptușeală personalizată: 20 px sus, 20 px jos, 3vw stânga, 3vw dreapta

Duplicați blurb-ul de două ori, astfel încât să obțineți trei blurbs din listă în coloană. Apoi utilizați funcția Multiselect Divi pentru a selecta toate cele trei blurbs și apoi copiați-le și lipiți-le în coloana 4.

De asemenea, puteți utiliza multiselectarea pentru a selecta toate cele trei blurbs din coloana 4 și a edita în bloc setările elementului pentru a schimba culoarea pictogramei tuturor celor trei la # 24c4a3.

Asta e! Crearea de blur-uri pop-out este o modalitate distractivă de a face blur-urile să iasă în evidență.

Iată rezultatul final.

2. Blurb promoțional cu imagine de fundal personalizată.

Acest stil blurb este excelent pentru a include conținut și oferte promoționale, cum ar fi o carte gratuită. Ideea de bază este de a poziționa conținutul blurb în partea stângă a modulului pentru a face loc imaginii de fundal personalizate. Să ajungem la asta.

Mai întâi adăugați o secțiune obișnuită cu o structură de rând cu două coloane. În coloana din stânga adăugați un nou modul de blurb.

Actualizați textul titlului și scoateți ultima propoziție a conținutului simulat pentru a reduce cantitatea de text. Apoi actualizați imaginea cu o imagine de carte (sau o imagine a produsului dvs.). O pictogramă a unei cărți sau ceva va funcționa, de asemenea.

Folosesc elementele de imagine din pachetul de prezentare a blogului de călătorie, așa că nu ezitați să începeți proiectarea prin apucarea acelor imagini.

SFAT: Puteți adăuga, de asemenea, o adresă URL a modulului la acest modul pentru a face clic pe întregul modul, deoarece poate servi drept promoție.

Apoi, adăugați o imagine de fundal la modul. Asigurați-vă că imaginea de fundal este o imagine de tip antet, cu punctul focal al imaginii în partea dreaptă, astfel încât să puteți adăuga conținutul în stânga imaginii, cu fundalul care distrage atenția de la text.

Apoi adăugați un gradient de fundal pentru a servi ca o suprapunere parțială care se află în spatele conținutului și suprapune imaginea de fundal pentru a face textul mai lizibil. Pentru a adăuga gradientul de fundal actualizați următoarele:

Culoarea stânga a gradientului de fundal: rgba (255,255,255,0,8)
Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)
Direcția gradientului: 90 grade
Poziția inițială: 40%
Poziție finală: 70%
Plasați gradientul deasupra imaginii de fundal: DA

Apoi actualizați următoarele:

Image Box Shadow: vezi captura de ecran
Titlu Font: Noto Serif
Dimensiune text titlu: 26 px
Font corp: Noto Sans
Dimensiunea textului corpului: 16 px
Lățimea imaginii: 150 px
Lățimea conținutului (desktop): 60%
Lățimea conținutului: (smartphone): 80%
Căptușeală personalizată: 2vw jos, 2vw stânga, 2vw dreapta

Tehnica de proiectare cheie de aici oferă atât imaginii cât și conținutului o lățime personalizată, astfel încât conținutul să poată fi poziționat spre stânga mai târziu.

Acum trebuie să adăugăm o umbră de casetă în partea de sus a textului pentru a crea impresia că imaginea cărții se extinde deasupra modulului pentru un efect de suprapunere frumos. Pentru a face acest lucru, actualizați următoarele:

Box Shadow: Vedeți Captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: 50 px
Culoare umbră: #ffffff

Ultimul pas implică un scurt fragment de CSS personalizat necesar pentru a alinia conținutul blurb la partea stângă a modulului. Pentru a face acest lucru, accesați fila avansată și adăugați următorul CSS personalizat sub caseta de introducere a conținutului Blurb:

margin-left: 0;

Acum verificați rezultatul!

SFAT: Nu uitați de opțiunile de hover disponibile. Încercați să dați imaginii cărții o margine pentru a face lucrurile să prindă viață!

3. Stilul Circle Blurb folosind Gradientul de fundal

Acest stil simplu de blurb folosește gradiente de fundal pentru a servi drept fundal de cerc pentru conținutul dvs. de blurb. Aceasta este o alternativă distractivă pentru a vă transforma întregul modul blurb într-un cerc folosind CSS personalizat.

Începeți prin adăugați o nouă secțiune obișnuită cu o structură de rând pe trei coloane.

Apoi adăugați un modul de blurb în coloana din stânga.

Apoi scoateți ultima propoziție a conținutului pentru a reduce cantitatea de text. Este important pentru acest design să păstrați cantitatea de text oarecum mică, deoarece o veți încadra în interiorul unui cerc.

Apoi adăugați un gradient de fundal pentru a crea fundalul cercului după cum urmează:

Culoarea din stânga a gradientului de fundal: # fa7f28
Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)
Tipul de gradient: radial
Poziția inițială: 60%
Poziție finală: 0%
Plasați gradientul deasupra imaginii de fundal: DA

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

Orientare text: centru
Titlu Font: Oswald
Titlu Stil Font: TT
Spațierea literelor de titlu: 1 px
Font corp: robot
Greutatea fontului corpului: ușoară
Dimensiunea textului corpului: 16 px
Lățime (tabletă): 80%
Alinierea modulului: centru
Căptușeală personalizată (desktop): 20% sus, 25% jos, 20% stânga, 20% dreapta
Căptușeală personalizată (smartphone): 20% sus, 25% jos, 10% stânga, 10% dreapta

Cheia aici este să reglați corect umplutura personalizată, astfel încât cercul de fundal să fie aliniat cu conținutul din centru. Poate fi necesar să ajustați aceste setări în funcție de cantitatea de conținut pe care o aveți.

Acum puteți copia și lipi modulul în coloanele rămase.

Apoi actualizați setările rândurilor astfel încât să aibă o lățime personalizată de 80% și o lățime a jgheabului de 1.

Pentru a finaliza designul, puteți adăuga o imagine de fundal și un gradient în secțiunea dvs. după cum urmează:

Adăugați o imagine de fundal
Culoarea stânga a gradientului de fundal: rgba (2,0,76,0.51)
Culoarea dreaptă a gradientului de fundal: rgba (2,0,76,0.84)
Plasați gradientul deasupra imaginii de fundal: DA

Asta e! Verificați designul final!

Pentru spațiu suplimentar, puteți reduce oricând dimensiunea pictogramei blurb la ceva de genul 50px, pentru a împiedica coliziunea cercurilor pe lățimi mai mici ale browserului. Când efectuați ajustări, nu uitați să profitați de funcția Multiselect Divi pentru a face editări în bloc la toate modulele simultan.

Sfat bonus: transformarea întregului modul Blurb într-un cerc cu CSS personalizat

Dacă ați dorit să transformați întregul modul într-un cerc (în loc să utilizați gradientul de fundal), înlocuiți gradientul cu o culoare de fundal obișnuită și adăugați acest CSS personalizat sub fila Avansată a setărilor modulului de blurb:

În caseta Element principal:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

În caseta Blurb Content:

margin: auto;

Acest CSS personalizat înlocuiește setul de umplere din setările modulului blurb, astfel încât este posibil să trebuiască să scoateți fragmentul respectiv dacă doriți să reveniți la controlul acestor setări. De asemenea, acest css folosește flex pentru a centra conținutul blurb în interiorul cercului. Acest lucru va fi util.

Va arăta cam așa dacă se aplică tuturor celor trei module.

4. Blurb încadrat cu margini și umbre de cutie

Una dintre caracteristicile mele de design Divi preferate din toate timpurile cu care să mă distrez este umbrele de cutie. Am prezentat deja o utilizare creativă pentru umbre de cutie în designul blurb al promovării mai devreme, unde am creat efectul de suprapunere. Dar puteți utiliza, de asemenea, umbrele casetei ca modalitate creativă de a vă încadra conținutul cu modele de grilă rupte. În acest design, vă voi arăta cum să combinați marginile și umbrele de cutie într-un mod unic.

Pentru a începe, adăugați o nouă secțiune obișnuită cu o structură pe trei coloane. Apoi adăugați modulul blurb în prima coloană.

Adăugați o imagine la blurb. Apoi, dați imaginea blurb o margine și o umbră de casetă, actualizând setările de proiectare după cum urmează:

Lățimea marginii superioare a imaginii: 8 px
Culoare margine superioară a imaginii: # 2f3854
Lățimea marginii stânga a imaginii: 8 px
Culoare margine stânga a imaginii: # 2f3854

Casetă de imagine Shadow: Vedeți Captura de ecran
Poziție orizontală a umbrei cutiei: -20px
Box Shadow Vertical Position: -30px
Culoare umbră: # f89da9

Apoi actualizați fontul și spațiul Title și Body astfel:

Titlu Font: Yeseva One
Font corp: Montserrat
Marjă personalizată: 50 px jos
Căptușeală personalizată: 2vw jos

În cele din urmă, dați modulului dvs. de blurb o margine personalizată și o umbră de cutie pentru a echilibra designul cadrului după cum urmează:

Lățimea marginii drepte: 15 px
Culoare margine dreaptă: # 2f3854
Lățimea marginii inferioare: 15 px
Culoarea chenarului inferior: # 2f3854

Casetă de imagine Shadow: Vedeți Captura de ecran
Poziție orizontală a umbrei cutiei: 20 px
Box Shadow Vertical Position: 35 px
Culoare umbră: #dddddd

Acum copiați și lipiți modulul din coloanele 2 și 3 și actualizați imaginile blurb pentru a finaliza designul.

Iată rezultatul final.

5. Styling Blurbs ca listă curbată

Următorul design este o modalitate distractivă de a crea liste folosind blurbs. Folosind unele margini personalizate, puteți curba elementele listei de blurburi pentru a înfășura elemente de pe pagina dvs. În acest exemplu, voi curba lista pentru a înfășura partea dreaptă a unei pictograme mari. Și poți deveni puțin creativ

Mai întâi, adăugați o nouă secțiune obișnuită cu o structură de două rânduri de coloane.

Înainte de a adăuga module de blurb, acordați rândului dvs. o lățime personalizată și o lățime a jgheabului, actualizând setările rândului după cum urmează:

Lățime personalizată: 700 px
Lățimea jgheabului: 2

Acum, să creăm pictograma blurb mare adăugând modulul blurb în coloana din stânga. Apoi scoateți textul și conținutul titlului. Și apoi alegeți pictograma becului. Acum, numai pictograma ar trebui să fie vizibilă. Apoi, actualizați culoarea și dimensiunea pictogramei după cum urmează:

Culoare pictogramă: # 96a6bd
Pictogramă Dimensiune font (desktop): 400 px
Pictogramă Dimensiune font (smartphone): 200 px

În coloana din dreapta, adăugați un nou modul de blurb. Acesta va fi primul dintre cele cinci blurbs totale care vor alcătui lista noastră. Apoi deschideți setările modulului și scoateți conținutul lăsând doar textul titlului. Apoi alegeți pictograma săgeată dreapta pentru blurb.

Următorul actualizează setările de proiectare după cum urmează:

Culoare fundal: # bb7860
Culoare pictogramă: #ffffff
Plasare imagine / pictogramă: stânga
Utilizați dimensiunea fontului pictogramei: DA
Pictogramă Dimensiune font: 30 px
Titlu Font: Raleway
Culoarea textului titlului: #ffffff
Dimensiune text titlu: 20 px
Înălțimea liniei de titlu: 1,5em
Marjă personalizată: 5% jos
Căptușeală personalizată: 3% sus, 10% stânga, 2% dreapta

Duplicați modulul de patru ori până când obțineți un total de cinci blurbs stivuite în coloana din dreapta.

Apoi acordați celei de-a doua blurburi o culoare nouă, margini personalizate pentru a o împinge spre dreapta și colțuri rotunjite creative după cum urmează:

Culoare fundal: # 393e56
Marjă personalizată (desktop): 10% stânga, -10% dreapta
Marjă personalizată (tabletă): 0% stânga, 0% dreapta
Colțuri rotunjite: 50 px sus dreapta, 50 px jos stânga

Înainte de a părăsi acest modul, copiați colțurile rotunjite făcând clic dreapta pe opțiunea din setările blurb.

Apoi salvați setările de blurb și faceți clic dreapta pe primul modul (de sus) pe care l-ați creat și lipiți colțurile rotunjite în stilul modulului.

Acum să continuăm să actualizăm ultimele trei module cu culori adecvate, spațiu și designuri de colț rotunjite.

Pentru a treia blurb din coloană, actualizați următoarele:

Culoare fundal: # 96a6bd
Marjă personalizată (desktop): 20% stânga, -20% dreapta
Marjă personalizată (tabletă): 0% stânga, 0% dreapta
Colțuri rotunjite: 50 px sus dreapta, 50 px jos dreapta

Pentru a patra blurb, actualizați următoarele:

Culoare fundal: # 393e56
Marjă personalizată (desktop): 10% stânga, -10% dreapta
Marjă personalizată (tabletă): 0% stânga, 0% dreapta
Colțuri rotunjite: 50 px sus în stânga, 50 px jos dreapta

Pentru al cincilea blurb, pur și simplu copiați colțurile rotunjite din al patrulea blurb și lipiți-le în.

Asta e! Să verificăm designul final.

Mai multă inspirație stil Blurb

Dacă sunteți interesat să explorați mai multe modele distractive de module blurb, consultați linkurile de mai jos:

• Puteți utiliza fundaluri curbate asimetric pentru blurbs.
• Puteți încadra modulele de blurb cu modele creative folosind separatoare de secțiuni.
• Puteți crea propria formă a imaginii de fundal pentru a construi un aspect geometric al grilei.
• Aflați cum să combinați pictogramele blurb pentru a crea un element grafic centrat pentru secțiunea dvs. de pe post pe umbre de cutie unilaterale.
• Și nu uitați să explorați schemele noastre premoditate gratuite Divi disponibile în Divi Builder pentru stiluri de inspirație și mai inspiraționale

Ei bine, sper că aceste exemple te-au inspirat să vezi ce este posibil cu modulul Divi Blurb! Cerul este limita aici. Acest modul este extrem de popular și va fi folosit probabil pe aproape fiecare site pe care îl construiți, deci este bine să aveți un set de idei versatil, astfel încât proiectele să nu înceapă să arate la fel. Uneori, doar schimbarea culorilor și a fonturilor le poate oferi acestora un aspect complet nou, așa că nu ezitați să luați aceste idei și să le faceți proprii!

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

Noroc!