Utilizarea modulului de text Divi pentru a crea elemente de blocare în proiectarea paginii dvs. Divi

Modulele de text sunt o parte vitală a oricărui design de pagină pe care îl creați cu Divi, sunt sigur că acest lucru este cu toții de acord. În mod normal, sunt utilizate pentru a afișa textul într-un mod simplu. Dar puteți utiliza modulele text pentru a crea și elemente de design uimitoare. În postările de blog anterioare, v-am arătat deja cum să utilizați textul pentru a vă îmbunătăți designul web.

În acest tutorial, vom continua să adăugăm opțiuni pentru a alege dintre proiectarea unei pagini și utilizarea modulelor de text. După cum știți sau nu, există mai multe tipuri de text diferite pe care le puteți combina în același modul de text. În plus, un modul poate conține mai multe titluri, paragrafe, linkuri și multe altele. În această postare, vom folosi toate aceste tipuri de text în avantajul nostru pentru a crea elemente de bloc uimitoare în proiectarea paginii noastre.

Să ajungem la asta!

previzualizare

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

Să începem!

Adăugați o nouă secțiune regulată

Culoare de fundal

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați în prezent. Apoi, deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # 000000

Spațiere

Accesați setările de spațiere ale secțiunii dvs. și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 280 px (desktop), 150 px (tabletă și telefon)
• Căptușeală inferioară: 280 px (desktop), 150 px (tabletă și telefon)

Adăugați un rând nou

Structura coloanei

După ce ați terminat modificarea setărilor secțiunii, adăugați un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga module, deschideți setările rândului și faceți rândul să ocupe întreaga lățime a ecranului în setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

În cele din urmă, adăugați câteva umpluturi personalizate în setările Spațiu.

• Coloana 1 Padding stânga: 100 px (desktop și tabletă), 50 px (telefon)
• Coloana 2 Căptușeală personalizată: 50 px
• Coloana 3 Împletire personalizată: 50 px

Adăugați modulul de text al titlului în coloana 1

Casetă de conținut

Este timpul să începeți adăugarea diferitelor module! Primul modul de care vom avea nevoie în prima coloană este un modul de text. Adăugați conținut H2 în caseta de conținut.

Setări text H2

Apoi, accesați setările de text H2 și efectuați câteva modificări:

• Rubrica 2 Font: Source Code Pro
• Titlul 2 Stil font: majuscule
• Rubrica 2 Culoarea textului: #ffffff
• Rubrica 2 Dimensiune text: 100 px
• Rubrica 2 Spațierea literelor: 24 px

Spațiere

Reduceți spațiul din partea de sus folosind o marjă de sus negativă.

• Marja superioară: -50 px

Adăugați modulul de descriere text în coloana 1

Setări text

Al doilea modul necesar în prima coloană este o descriere Modul text. După adăugarea conținutului, accesați setările de text și efectuați câteva modificări:

• Font text: Source Code Pro
• Culoarea textului: #ffffff
• Orientare text: justificați

Dimensionare

Reduceți și lățimea modulului de text.

• Lățime: 68%

Spațiere

Și nu în ultimul rând, creați un spațiu între acest modul de text și cel anterior în setările Spațiu.

• Marja superioară: 200 px (desktop), 100 px (tabletă și telefon)
• Marja inferioară: 100 px (tabletă și telefon)

Adăugați modulul de blocare a textului în coloana 2

Casetă de conținut

E timpul să treceți la a doua coloană! Aici vom folosi Module de text pentru a crea elemente de bloc. O parte esențială a acestui lucru este structurarea corectă a casetei de conținut. În ecranul de imprimare de mai jos, puteți vedea că folosim un titlu H3, un titlu H4, un paragraf și un link. Între titlul H4 și paragraf, ne asigurăm că mai există și un spațiu suplimentar.

Culoare de fundal

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

• Culoare fundal: # 000000

Setări text

Vom modifica fiecare tip de text în mod individual. Începeți prin modificarea setărilor de paragraf.

• Font text: Source Code Pro
• Orientare text: stânga
• Culoarea textului: deschis

Setări text link

Apoi, efectuați câteva modificări suplimentare la setările linkului.

• Stilul fontului de legătură: majuscule și subliniate
• Culoare subliniere link: #ffffff
• Culoare text link: # edf000
• Dimensiune text link: 16 px
• Spațiere scrisoare link: 3 px

Rubrica 3 Setări text

Titlul H3 din caseta noastră de conținut are nevoie de următoarele setări:

• Titlul 3 Stilul fontului: majuscule
• Rubrica 3 Dimensiune text: 33 px

Titlul 4 Setări text

Continuați deschizând setările de text H4 și faceți și câteva modificări acolo.

• Titlul 4 Culoare text: # 4f4f4f
• Titlul 4 Dimensiune text: 19 px
• Titlul 4 Spațierea literelor: -1 px

Dimensionare

Pentru a crea forma exactă dorită, vom reduce lățimea modulului de text în continuare.

• Lățime: 88% (desktop), 60% (tabletă), 90% (telefon)

Spațiere

Va trebui să schimbăm și setările de spațiu.

• Marja stângă: 200 px (tabletă)
• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Apoi, adăugați o margine subtilă la modulul text.

• Lățimea chenarului: 2 px
• Culoare margine: # 424242

Box Shadow

Și pentru a termina, adăugați o umbră colorată.

• Poziție orizontală a umbrei cutiei: 19 px
• Box Shadow Vertical Position: 16 px
• Puterea răspândirii umbrei cutiei: -4px
• Culoare umbră: # f2ff00

Clonați blocul textului modulului de două ori și plasați-l în coloana 3

Pentru a economisi timp, vom clona blocul Text Module pe care l-am creat de două ori și vom plasa ambele duplicate în a treia coloană a rândului.

Modificări ale modulului de text roșu

Schimbați culoarea textului linkului

Deschideți primul modul de text din a treia coloană și schimbați culoarea linkului.

• Culoare text link: # e02b20

Schimbați spațiul

Apoi, accesați setările Spațiu și adăugați o marjă de sus.

• Marja superioară: -150 px (desktop), -20 px (tabletă), 50 px (telefon)

Schimbați culoarea umbrelor

Schimbați culoarea umbrei casetei în aceeași culoare care este utilizată pentru textul linkului.

• Culoare umbră: # e02b20

Modificări ale modulului de text albastru

Schimbați culoarea textului linkului

Schimbați și culoarea linkului celui de-al doilea modul de text din a treia coloană.

• Culoare text link: # 0ff3ff

Schimbați dimensiunea

Schimbați apoi setările de dimensionare.

• Dimensiune: 67% (Desktop), 60% (Tabletă), 90% (Telefon)

Schimbați spațiul

Și pentru a crea o anumită suprapunere între acest modul și celelalte două module de text, jucați-vă cu valorile de marjă personalizate.

• Marja superioară: -20 px (desktop), -30 px (tabletă), 50 px (telefon)
• Marja stângă: -160 px (desktop), 200 px (tabletă), 0 px (telefon)

Schimbați culoarea umbrelor

Pentru a termina, schimbați culoarea umbrei casetei în aceeași culoare albastră folosită pentru textul linkului și ați terminat!

• Culoare umbră: # 0ff3ff

previzualizare

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

Gânduri finale

Ați fi uimit de câte modele unice puteți realiza folosind module de text în combinație cu opțiunile integrate Divi. Nu este necesar un cod CSS suplimentar. În această postare, v-am arătat cum să utilizați diferite tipuri de text pentru a crea elemente de bloc uimitoare pe designul paginii dvs. Divi. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!