Cum să stilizați pictogramele Blurb ca accente de design pentru conținut în Divi

Utilizarea pictogramelor blurb ca accente de design poate oferi aspectului paginii dvs. un design unic la care nu v-ați mai gândit niciodată. În plus față de poziționarea pictogramei unui modul blurb pentru a suprapune un modul text, puteți utiliza fundalul și marginea modulului text pentru a stiliza pictograma. Acest lucru creează un accent de design frumos care încadrează conținutul, oferind în același timp icoanelor dvs. un design complet unic.

În acest tutorial, vă voi arăta cum să stilizați pictogramele blurb ca accente de design pentru conținutul dvs. în Divi.

Hai să ne scufundăm!

Trage cu ochiul

Iată câteva exemple de design pe care le vom construi în acest tutorial.

Descărcați exemplele de machete pentru acest tutorial

Pentru a pune mâna pe aspectul gratuit al designului accentului al modulului blurb, 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șierul

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!

Noțiuni introductive despre construirea designului de la zero

Pentru a începe, creați o pagină nouă și dați-i paginii un titlu. Apoi implementați constructorul Divi pe partea frontală. Adăugați o secțiune obișnuită cu un rând cu o coloană. Înainte de a adăuga primul dvs. modul, actualizați setările rândului cu următoarele:

Utilizați lățimea personalizată a jgheabului: DA
Lățime personalizată a jgheabului: 1

Acest lucru va scăpa de orice margini personalizate între module.

Crearea modulului de text

Apoi adăugați un modul text în interiorul rândului.

Actualizați modulul text cu următorul text de completare:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

Stilul modulului text

Acum actualizați restul setărilor modulului Text după cum urmează:

Culoare fundal: #ffffff

• Rubrica 2 Font: Nunito
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Stil font: TT
• Rubrica 2 Culoarea textului: # f24a5b
• Titlul 2 Dimensiune text: 42 px (desktop), 32 px (tabletă), 22 px (telefon)
• Titlul 2 Scrisoare Sp [acing: 16px
• Titlul 2 Înălțimea liniei: 1.3em

• Lățime: 500 px (desktop), 490 px (tabletă)
• Alinierea modulului: centru
• Împletire personalizată (desktop): 40 px sus, 40 px jos, 50 px stânga, 50 px dreapta
• Împletire personalizată (telefon): 20 px la stânga, 20 px la dreapta
• Lățimea chenarului: 10 px
• Culoare margine: #ffffff

Deoarece vom suprapune modulul text cu pictogramele blurb, trebuie să ne asigurăm că modulul text se află deasupra pictogramelor în ordinea spațiului z. Pentru a face acest lucru, trebuie mai întâi să adăugăm următorul fragment de CSS în caseta CSS a elementului principal al modulului Text:

position: relative;

Apoi setați valoarea indexului z la 1.

Acum acest modul text va sta deasupra oricăror alte module suprapuse, ceea ce este important pentru proiectare.

Crearea pictogramei Blurb

Acum suntem gata să creăm prima pictogramă blurb. Pentru a face acest lucru, trebuie mai întâi să adăugăm un modul blurb și să-l tragem în partea de sus a modulului text. Apoi ștergeți conținutul simulat (textul titlului și textul corpului) și faceți clic pentru a utiliza o pictogramă în locul unei imagini pentru blurb.

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

• Culoare pictogramă: # 2ea3f2
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 100 px
• Marjă personalizată: 0px jos (aceasta elimină marja inferioară implicită între module; nu este necesară dacă utilizați o lățime a jgheabului de rând de 1)

Apoi, deoarece nu folosim niciun text cu modulul (doar pictograma), putem scăpa de marginea inferioară implicită de sub pictograma blurb. Pentru a face acest lucru, adăugați următorul CSS personalizat în caseta Blurb Image CSS:

Blurb Image CSS:

margin-bottom: 0px

Duplicați pictograma Blurb

Înainte de a începe poziționarea blurbului, să mergem mai departe și să duplicăm modulul blurb și să trageți duplicatul sub modulul text. Acum ar trebui să aveți o pictogramă blurb deasupra și sub modulul text.

Poziționarea pictogramelor Blurb folosind Transform Translate

Pentru a poziționa pictogramele blurb, vom folosi opțiunile de transformare Divi care ne permit să plasăm modulul blurb cu pictograma oriunde dorim pe pagină.

Poziționarea pictograma Blurb # 1

Pentru a poziționa pictograma top blurb, deschideți setările modulului de blurb și actualizați următoarele:

• Transformă axa X tradusă (desktop): -242px
• Transformă axa Y tradusă (desktop): 50 px
• Transformă axa X tradusă (telefon): -170px

Poziționarea pictograma Blurb # 2

Înainte de a poziționa această pictogramă blurb, să o facem puțin mai mare. Pentru a face acest lucru, deschideți setările modulului blurb și schimbați dimensiunea fontului pictogramei la 150 px.

Apoi poziționați pictograma blurb actualizând următoarele opțiuni de transformare:

• Transformă axa X tradusă (desktop): 242 px
• Transformați axa Y tradusă (desktop): -100px
• Transformă axa X tradusă (telefon): 190 px

Crearea rândului cu două coloane

Pentru a crea următoarea coloană, copiați rândul existent și schimbați aspectul coloanei rândului într-un aspect cu două coloane (1/2 1/2).

Apoi, utilizați caracteristica multiselectare a Divi pentru a selecta toate cele trei module din coloana din stânga și apoi copiați-le și lipiți-le în a doua coloană.

Apoi, ștergeți pictograma blurb din partea de jos a coloanei unu.

Alinierea pictogramelor Blurb din coloana 2

Pentru pictogramele Blurb din coloana 2, trebuie să deplasăm pictograma de sus în stânga și pictograma de jos în dreapta. Putem face acest lucru pur și simplu prin schimbarea valorii axei X Transform Translate.

Deschideți setările modulului blurb pentru modulul top blurb din coloana 2 și actualizați următoarele:

• Transformă axa X tradusă (desktop): 242 px
• Transformă axa X tradusă (telefon): 170 px

Practic tot ceea ce faceți este să schimbați aceste valori de la negativ la pozitiv pentru a le deplasa în direcția opusă de-a lungul axei x.

Apoi, actualizați valoarea de traducere a transformării pentru modulul blurb inferior din coloana 2 după cum urmează:

• Transformă axa X tradusă (desktop): -242px
• Transformă axa X tradusă (telefon): -190px

Actualizați stilurile de modul text în al doilea rând

Al doilea rând de conținut servește ca un subset de servicii prezentate. Prin urmare, dorim ca dimensiunea fontului titlului să fie diferită și mai mică decât antetul nostru. Pentru a actualiza cele două module de text în același timp, utilizați multiselect pentru a selecta ambele module de text. Apoi actualizați următoarele:

Schimbați conținutul titlului h2 pentru a citi „Serviciu”.

• Titlul 2 Dimensiune text: 28 px (desktop), 22 px (tabletă), 18 px (telefon)

Salvează setările.

Acum deschideți setările modale pentru modulul text din coloana 2 și actualizați următoarele:

• Orientarea textului: dreapta

Reglarea spațiului aspectului

În acest moment există probabil un pic prea mult spațiu alb (sau negativ) între cele două rânduri de conținut. Pentru a îndepărta o parte din spațiul respectiv, putem adăuga o marjă de jos negativă la modulul de blurb de jos din rândul de sus, după cum urmează:

• Marjă personalizată: -100px jos

Rezultat final

Acum să aruncăm o privire asupra rezultatului final.

Încercarea altor icoane

Pentru a încerca diferite pictograme pentru aspectul dvs., puteți utiliza funcția de căutare și înlocuire. Deschideți setările de blurb pentru unul dintre blurbs care conține pictograma. Apoi faceți clic dreapta pe pictograma din setările modale și selectați Găsiți și înlocuiți.

În fereastra pop-up Găsiți și înlocuiți, actualizați următoarele:

• În cadrul: Această secțiune
• Înlocuiți cu: [selectați pictograma nouă]

După aceea, faceți clic pe butonul de înlocuire.

Acest lucru va schimba toate definițiile din secțiunea dvs. cu una nouă.

Iată câteva exemple de aspect folosind diferite pictograme.

Gânduri finale

Adăugarea de pictograme blurb ca accente de design la conținutul dvs. este un exemplu al modului în care două module pot fi combinate pentru a crea un design complet unic. În acest caz, fundalul și chenarul modulului de text servesc ca o suprapunere parțială pentru pictogramele din jur. Rezultatul este unic și deschide ușa pentru explorarea mai multor variante de design. Simțiți-vă liber să explorați diferite pictograme și combinații de culori pentru a crea ceva pentru propriile nevoi.

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

Noroc!