Cum să fii creativ cu fundalul pictogramei tale în Divi

Modulele Blurb sunt unele dintre cele mai versatile elemente pe care le puteți găsi în Divi. În această postare, vă vom arăta cum să faceți un pas mai departe și să fiți creativi cu fundalul pictogramei blurb. Vom folosi o combinație de module blurb, module text și module call to action. Aceste modele unice sunt perfecte pentru paginile de servicii și paginile categoriilor de produse. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului tuturor celor trei exemple pe diferite dimensiuni de ecran.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Exemplul nr. 3

Desktop

Mobil

Descărcați exemplele de fundal pentru pictograma Blurb GRATUIT

Pentru a pune mâinile pe exemplele gratuite de fundal ale pictogramei, 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!

Abonați-vă la canalul nostru Youtube

Pași generali

Adăugați o secțiune nouă

fundal

Pentru a recrea aceste modele creative de fundal, deschideți o pagină nouă sau adăugați o nouă secțiune la o pagină existentă. Înainte de a adăuga un rând, adăugați o culoare de fundal la secțiunea dvs.

• Culoare fundal: # f7f7f7

Spațiere

Adăugați și câteva secțiuni de umplere personalizate, de sus și de jos.

• Căptușeală superioară și inferioară: 120 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Înainte de a adăuga module, reglați dimensiunea rândului.

• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Apoi, reglați umplutura în setările de spațiere.

• Căptușeală superioară: 8vw
• Căptușeală inferioară: 15vw
• Garnitura stânga și dreapta: 12vw

Coloana 1

După ce ați terminat modificarea setărilor rândului, efectuați câteva modificări la prima coloană.

fundal

Mai întâi, adăugați un fundal alb.

• Culoare fundal: alb #ffffff

Frontieră

Apoi, adăugați o rază de margine.

• Colțuri rotunjite: 2vw toate cele patru colțuri

Box Shadow

În cele din urmă, adăugați o umbră de cutie.

• Box-Shadow: Prima opțiune
• Rezistență la estompare cutie-umbră: 47 px

Clone Row de două ori

Mai rămâne un ultim pas înainte de a începe să adăugăm module. Clonați rândul de două ori.

Recreați exemplul nr. 1

Adăugați Blurb Module la coloana 1

Ștergeți conținutul prestabilit

Acum că ne-am configurat rândurile și coloanele, putem începe să adăugăm module la coloana 1 a primului rând. Mai întâi, adăugați un modul de blurb și ștergeți tot titlul implicit și textul corpului.

Alege pictograma

Apoi, alegeți o pictogramă în locul unei imagini.

• Pictogramă: Link

fundal

Adăugați o culoare de fundal neagră la modulul blurb.

• Culoare fundal: negru # 000000

Setări pictograme

Apoi, modificați setările pictogramei.

• Culoare pictogramă: Galben # edf000
• Plasarea pictogramelor: sus
• Pictogramă Dimensiune font:
  • Desktop: 3vw
  • Tabletă: 11vw
  • Telefon: 13vw

Dimensionare

Continuați ajustând dimensiunea modulului.

• Lățimea conținutului: 100%
• Lăţime:
  • Desktop: 11vw
  • Tabletă: 19vw
  • Telefon: 22vw

Spațiere

Adăugați și câteva valori de spațiere.

• Marja superioară: -5vw
• Marja inferioară: 0vw
• Marja stângă: -1vw
• Căptușeală superioară și căptușeală inferioară: 4vw

Frontieră

Pentru a da pictogramei o formă unică, adăugați o rază de margine la fiecare dintre colțuri, cu excepția celei din stânga jos.

• Colțuri rotunjite: 50vw, 0vw în colțul din stânga jos.

Box Shadow

În cele din urmă, adăugați o umbră de cutie.

• Box-Shadow: Prima opțiune
• Rezistență la estompare cutie-umbră: 50 px

CSS personalizat

Pictograma are, în mod implicit, o marjă inferioară atașată. Pentru a scăpa de asta, vom adăuga o singură linie de cod CSS în caseta CSS personalizată de imagine blurb.

• Blurb Image: margin-bottom: 0px;

margin-bottom: 0px;

Adăugați un modul de text în coloana 1

Adăugați conținut H3

Sub pictogramă, adăugați un modul text cu un conținut H3 la alegere.

fundal

Accesați setările de fundal și adăugați un fundal degradat.

• Fundal: Gradient
• Culoarea unu: transparent
• Culoarea a doua: galben # edf000
• Direcția gradientului: 180 grade
• Poziția inițială și finală: 74%

Textul titlului

Apoi, stilizați textul H3.

• Nivelul titlului textului titlului: H3
• H3 Font: Josefin Sans
• Alinierea H3: centru
• Culoarea fontului H3: Negru #oooooo
• Dimensiunea textului H3:
  • Desktop: 2.4vw
  • Tabletă: 3.4vw
  • Telefon: 4.8vw
• Distanța între litere H3: 0em

Dimensionare

În setările de dimensionare, reglați lățimea pentru tabletă și telefon.

• Lăţime:
  • Tabletă: 50%
  • Telefon: 60%

Spațiere

Continuați accesând setările de spațiere și ajustând valorile marjei.

• Marja stânga și dreapta: 5vw
• Căptușeală superioară: 1vw

Transforma

În cele din urmă, rotiți modulul cu opțiunile de transformare.

• Transformă traducerea:
  • axa x: -20vw
  • axa y: 13vw
• Transform Rotate: prima opțiune, 280 grade

Adăugați modulul Apel la acțiune în coloana 1

Eliminați conținutul implicit al titlului, adăugați butonul și conținutul text

Următorul și ultimul modul de care avem nevoie în coloana 1 este un modul de îndemn. Adăugați un conținut la alegere și eliminați copia titlului.

Adăugați un link

Adăugați un link relevant la buton.

fundal

Asigurați-vă că fundalul nu are culoare.

Corpul textului

Apoi, accesați fila de proiectare și modificați setările pentru textul corpului.

• Font corp: Text Crimson
• Alinierea textului corpului: stânga
• Culoarea textului corpului: Gri închis # 666666
• Dimensiunea textului corpului:
  • Desktop: 1.2vw
  • Tabletă: 2.6vw
  • Telefon: 3.1vw
• Înălțimea liniei corpului: 1,8em

Buton

Modificați și stilurile de butoane.

• Dimensiune text buton:
  • Desktop: 1vw
  • Tabletă: 2vw
  • Telefon: 3vw
• Culoare text buton: Foarte gri închis # 3f3f3f
• Culoarea chenarului butonului: Foarte gri închis # 3f3f3f
• Buton Font: Josefin Sans
• Marja butonului: 3vw
• Căptușeala butonului superior și inferior: 1vw
• Buton Căptușeala stânga și dreapta: 3vw

Spațiere

Completați setările modulului adăugând niște umpluturi la stânga și la dreapta.

• Garnitura stânga și dreapta: 7vw

Ștergeți coloana doi și clonați coloana 1

Ajustați setările din coloana 2

Acum, reveniți la setările de rând și ștergeți a doua coloană. Imediat după aceea, clonați prima coloană. În pașii următori, vom ajusta câteva setări în coloana duplicat.

Modul Blurb

Începeți prin schimbarea culorii pictogramei modulului blurb.

• Culoare pictogramă: Aqua # 00ffd4

Modul text

Schimbați fundalul de gradient și copiați modulul text în continuare.

• Culoare fundal: Aqua # 00ffd4
• Schimbați conținutul

Recreați exemplul nr. 2

Adăugați Blurb Module la coloana 1

Ștergeți conținutul implicit

Trecem la al doilea exemplu! Adăugați un modul blurb în coloana 1 și ștergeți tot conținutul implicit.

Alege pictograma

Apoi, alegeți o pictogramă.

fundal

Acum, adăugați o culoare de fundal galbenă.

• Culoare fundal: Galben # edf000

Pictogramă

Continuați modificând setările pictogramei din fila Design.

• Culoare pictogramă: alb #ffffff
• Plasarea pictogramelor: sus
• Pictogramă Dimensiune font:
  • Desktop: 3vw
  • Tabletă: 11vw
  • Telefon: 12vw

Dimensionare

După ce culoarea și fundalul sunt stilate, reglați dimensiunea modulului.

• Lățimea conținutului: 100%

Spațiere

Modificați și setările de spațiere.

• Marja inferioară: 0vw
• Marja stânga și dreapta: 3vw
• Căptușeală superioară și inferioară: 2vw

Frontieră

Adăugați o anumită rază de margine la fiecare colț următor.

• Colțuri rotunjite: 2vw toate cele patru colțuri

Box Shadow

Completați designul modulului adăugând o umbră de casetă subtilă.

• Box-Shadow: Prima opțiune

Eliminați umbra cutiei și culoarea de fundal a coloanei 1

Deschideți apoi setările coloanei 1 și eliminați culoarea de fundal și umbra casetei.

CSS personalizat

Eliminați marja de jos implicită aplicată pictogramei blurb adăugând o singură linie de cod CSS în fila avansată.

• Blurb Image: margin-bottom: 0px;

margin-bottom: 0px;

Adăugați modulul Call to Action în coloana 1

Adăugați conținut titlu, conținut corp și conținut buton

Sub modulul blurb, adăugați un modul call to action și introduceți un conținut la alegere.

Adăugați un link

Adăugați un link la butonul următor.

fundal

Continuați adăugând un fundal alb.

• Culoare fundal: alb #ffffff

Textul titlului

În fila Design, stilizați textul titlului H3.

• Titlu Nivel antet: H3
• Font H3: Josefin Sans
• Culoarea fontului H3: gri foarte închis # 3f3f3f
• Dimensiune H3:
  • Desktop: 2vw
  • Tabletă: 4vw
  • Telefon: 6vw
• Înălțimea liniei H3: 2.3em

Corpul textului

Apoi, stilizați textul corpului.

• Font corp: Text Crimson
• Alinierea textului corpului: stânga
• Culoarea textului corpului: Gri închis # 666666
• Dimensiunea textului corpului:
  • Desktop: 1.1vw
  • Tabletă: 2.2vw
  • Telefon: 3.1vw
• Înălțimea liniei corpului: 1,8em

Buton

Treceți la setările butonului și stilizați butonul după cum urmează:

• Dimensiune text buton:
  • Desktop: 1vw
  • Tabletă: 2vw
  • Telefon: 3vw
• Culoare text buton: Foarte gri închis # 3f3f3f
• Buton Font: Josefin Sans
• Lățimea chenarului butonului: 2-x
• Culoarea chenarului butonului: Foarte gri închis # 3f3f3f
• Buton sus și jos Marjă: 3vw
• Căptușeala butonului superior și inferior: 1vw
• Buton Căptușeala stânga și dreapta: 3vw

Spațiere

Acum, reglați spațiul.

• Marja inferioară: -1vw
• Căptușeală superioară: 6vw
• Garnitura stânga și dreapta: 7vw

Frontieră

Apoi, rotunjiți colțurile din setările de margine.

• Colțuri rotunjite: 2vw

Box Shadow

În cele din urmă, adăugați o umbră de cutie.

• Box-Shadow: Prima opțiune
• Rezistență la estompare cutie-umbră: 50 px

Ștergeți coloana doi și clonați coloana 1

Ajustați setările din coloana 2

Similar cu exemplul anterior, accesați setările rândului și ștergeți a doua coloană. Duplicați prima coloană și reglați câteva setări.

Modul Blurb

Schimbați fundalul modulului blurb din galben în acvatic.

• Culoare pictogramă fundal: Aqua # 00ffd4

Modulul Call To Action

Schimbați și conținutul modulului de apel la acțiune și linkul.

• Schimbați conținutul titlului
• Schimbați legătura

Recreați exemplul nr. 3

Adăugați Blurb Module la coloana 1

Ștergeți conținutul implicit

Trecem la următorul și ultimul exemplu! Adăugați un modul blurb în coloana 1 și ștergeți conținutul implicit.

Alege pictograma

Alege o pictograma.

fundal

Adăugați un fundal galben strălucitor la modul.

• Culoare fundal: Galben # f7f426

Pictogramă

Faceți pictograma neagră și reglați plasarea acesteia

• Culoare pictogramă: Negru # 000000
• Plasarea pictogramelor: stânga
• Pictogramă Dimensiune font:
  • Desktop: 3vw
  • Tabletă + telefon: 8vw

Dimensionare

Continuați modificând lățimea și înălțimea modulului.

• Lățimea conținutului: 100%
• Înălțime: 23vw

Spațiere

Mai mult, reglați setările de spațiere.

• Marja stângă: 3vw
• Marja dreapta: 25vw
• Căptușeală superioară: 2vw
• Căptușeală stângă: 1vw

Frontieră

Adăugați și o rază de margine.

• Colțuri rotunjite: 2vw pe toate colțurile

Box Shadow

Apoi, adăugați o umbră de cutie.

• Box-Shadow: Prima opțiune

Transforma

În cele din urmă, repoziționați modulul folosind valori de traducere transformate personalizate.

• axa x: -6vw
• axa y: 1vw

Eliminați culoarea de fundal și umbra casetei din coloana 1

Accesați setările coloanei 1 și eliminați culoarea de fundal și umbra casetei.

Adăugați modulul Apel la acțiune în coloana 1

Adăugați conținut pentru titlu, corp și buton

Sub modulul blurb, adăugați un modul call to action. Adăugați un conținut la alegere.

Adăugați un link

Apoi, adăugați un link la buton.

fundal

Pentru a stiliza modulul de îndemn, începeți prin a adăuga o culoare de fundal neagră.

• Culoare fundal: Negru #oooooo

Textul titlului

Reglați apoi setările textului H3.

• Titlu Nivel antet: H3
• H3 Font: Josefin Sans
• Culoarea fontului H3: Galben strălucitor # f7f426
• Dimensiunea fontului H3:
  • Desktop: 2vw
  • Tabletă: 4vw
  • Telefon: 6vw
• Înălțimea liniei H3: 2.3em

Corpul textului

Modificați și setările pentru textul corpului.

• Font corp: Text Crimson
• Alinierea textului corpului: stânga
• Culoarea textului corpului: alb # 000000
• Dimensiunea textului corpului:
  • Desktop: 1.2vw
  • Tabletă: 2.2vw
  • Telefon: 3.1vw
• Înălțimea liniei corpului: 1,8em

Buton

Apoi, stilizați butonul după cum urmează.

• Dimensiune text buton:
  • Desktop: 1vw
  • Tabletă: 2vw
  • Telefon: 3vw
• Culoarea textului butonului: Aqua # 00ffd4
• Culoarea chenarului butonului: Aqua # 00ffd4
• Buton Font: Josefin Sans
• Marja butonului superior și inferior: 3vw
• Căptușeala butonului superior și inferior: 1vw
• Buton Căptușeala stânga și dreapta: 3vw

Dimensionare

Treceți la setările de dimensionare și faceți câteva modificări.

• Lățime: 90%
• Alinierea modulului: centru

Spațiere

Modificați și setările de spațiere.

• Marja superioară: -9vw
• Căptușeală superioară: 5vw
• Garnitura stânga și dreapta: 7vw

Frontieră

Deschideți apoi setările de margine și adăugați o rază de margine la fiecare dintre colțuri.

• Colțuri rotunjite: 2vw

Box Shadow

Folosim și o umbră de cutie subtilă.

• Box Shadow: Prima opțiune

Transformă Traducere

În cele din urmă, repoziționați modulul de chemare la acțiune modificând setările de traducere a transformării.

• axa y: -18vw

Ștergeți coloana doi și clonați coloana 1

Ajustați setările din coloana 2

Acum că prima coloană este gata, o vom șterge pe a doua și o vom duplica pe prima. Ulterior, vom ajusta unele detalii despre conținut și culoare.

Modul Blurb

În setările modulului blurb, schimbați fundalul din galben în acvatic.

• Culoare pictogramă fundal: Aqua # 00ffd4

Modulul Call To Action

În setările modulului de îndemn, modificați conținutul titlului, culoarea titlului și culoarea butonului. Nu uitați să schimbați și linkul butonului și ați terminat!

• Culoare text titlu: Aqua # 00ffd4
• Conţinut
• Culoare buton: # 00ffd4

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Exemplul nr. 3

Desktop

Mobil

Concluzie

Așa cum ați văzut în această postare, fundalurile pictogramelor blurb pot face designurile dvs. blurb mult mai interesante. Prin utilizarea modulelor blurb asociate cu un modul de îndemn și text, există multe posibilități creative. Aceste stiluri de design sunt perfecte pentru vitrine de servicii sau secțiuni de produse. Ce crezi? Spune-ne în comentarii.