Cum să creați un titlu al modului Split Blend cu Divi

Nu este un secret faptul că modurile de amestecare vă pot ajuta să acordați o atenție suplimentară esteticii designului la care lucrați. În trecut, am acoperit sfaturile și trucurile modului de amestecare care vă ajută să creați câteva modele unice și superbe. Acum, de când a apărut actualizarea coloanei, există câteva lucruri suplimentare pe care le puteți face cu aceste moduri de amestecare. Unul dintre aceste lucruri este crearea unui titlu al modului de amestecare divizat. În această postare, vă vom arăta cum puteți obține un rezultat uimitor prin combinarea modurilor de amestecare a modulelor și a coloanelor, culorile de fundal ale coloanelor și marginile negative. 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 pe diferite dimensiuni de ecran.

Descărcați secțiunea Hero Split Blend Mode GRATUIT

Pentru a pune mâna pe secțiunea erou a modului de amestecare gratuit, va trebui mai întâi să o 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

Să începem să recreăm!

Adăugați o secțiune nouă

Spațiere

Adăugați o nouă secțiune obișnuită la pagina la care lucrați și eliminați toate umpluturile implicite, sus și jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Box Shadow

Treceți la opțiunile de umbră a casetei și adăugați o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 70 px
• Culoare umbră: rgba (0,0,0,0.07)

Adăugați un rând nou

Structura coloanei

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

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și aplicați un fundal de gradient. În următorul pas al acestei postări, vom îmbina fundalul de gradient cu o imagine de fundal folosind un mod de amestecare.

• Culoare 1: # 00cbff
• Culoare 2: # bf35ff
• Direcția gradientului: 96 grade

Imagine de fundal

Adăugați o imagine de fundal pe rând și utilizați-o în combinație cu următoarele setări ale imaginii de fundal:

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: ecran

Dimensionare

Accesați setările de dimensionare următoare și permiteți rândului să ocupe întreaga lățime a containerului secțiunii.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos ale rândului următor. Acest lucru vă va asigura că culoarea de fundal a coloanei 2, pe care o adăugăm mai târziu în această postare, atinge marginea de sus și de jos a containerelor de rânduri și secțiuni.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Afişa

Pentru a ne asigura că ambele coloane apar una lângă cealaltă pe dimensiuni de ecran mai mici, vom adăuga o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Setări coloana 2

Culoare de fundal

După ce ați finalizat setările generale de rând, continuați și deschideți setările celei de-a doua coloane. Începeți prin adăugarea unei culori de fundal alb.

• Culoare fundal: #FFFFFF

Filtre

Treceți la fila de proiectare și adăugați un mod de amestecare la întreaga coloană.

• Blend Mode: ecran

Adăugați un modul divizor în coloana 1

Vizibilitate

E timpul să începeți să adăugați module! Singurul modul de care avem nevoie în prima coloană este un modul divizor. Acest modul ne va ajuta să creăm spațiu în prima coloană fără să apară un modul. Asigurați-vă că opțiunea „Afișați divizorul” este dezactivată.

• Show Divider: Nu

Spațiere

Treceți la setările de spațiere și adăugați o margine de jos pentru a crea spațiu în prima coloană.

• Marja inferioară: 50vw

Adăugați modulul de text nr. 1 în coloana 2

Adăugați titlul H1

Trecem la a doua coloană! Aici, vom începe cu modulul de text principal. Introduceți un conținut H1 la alegere.

Setări text H1

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font de titlu: Poppins
• Greutatea fontului de titlu: Bold
• Culoare text antet: #FFFFFF
• Dimensiune text antet: 12vw
• Distanța între litere: -0,2vw

Spațiere

De asemenea, creăm spațiu în jurul modulului și îl împingem spre stânga prin aplicarea unor valori de marjă personalizate. Marja stângă negativă joacă un rol important în crearea modului de amestecare divizată. Permite ca o parte a copiei să apară sub prima coloană care nu conține nicio culoare de fundal.

• Marja superioară: 18vw
• Marja inferioară: 2vw
• Marja stângă: -27,3vw

Filtre

Acum, în următorul pas, magia se va întâmpla! Combinăm un modul de amestecare cu modul și coloană pentru a permite afișarea fundalului rândului. Asigurați-vă că selectați următorul mod de amestecare pentru modulul de text:

• Blend Mode: Diferență

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

La al doilea modul! Adăugați un conținut la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Poppins
• Alinierea textului: justificați
• Culoarea textului: # 000000
• Dimensiune text: 0,8vw (desktop), 1,5vw (tabletă), 2,3vw (telefon)
• Înălțimea liniei de text: 2.5em (desktop și tabletă), 2.2em (telefon)

Spațiere

Adăugați câteva valori de marjă personalizate în continuare.

• Marja inferioară: 1vw
• Marja stângă: 5vw
• Marja dreaptă: 14vw (desktop), 4vw (tabletă), 5vw (telefon)

Adăugați modulul divizor în coloana 2

Vizibilitate

Treceți la modulul următor, care este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Treceți la fila de proiectare și modificați setările de linie în consecință:

• Culoare linie: #FFFFFF
• Stilul liniei: solid
• Poziția liniei: sus

Dimensionare

Modificați și setările de dimensionare ale divizorului.

• Greutatea divizorului: 0,7vw
• Lățime: 9%
• Înălțime: 0px

Spațiere

Și adăugați câteva valori de spațiere personalizate.

• Marja superioară: 2vw (desktop), 5vw (tabletă și telefon)
• Marja inferioară: 3vw (desktop), 6vw (tabletă și telefon)
• Marja stângă: 5vw

Filtre

Nu în ultimul rând, aplicați un mod de amestecare pentru a permite afișarea imaginii de fundal și a gradientului rândului.

• Blend Mode: Diferență

Adăugați un modul buton la coloana 2

Adăugați o copie

Treceți la următorul și ultimul modul, care este un modul buton. Introduceți o copie la alegere.

Aliniere

Treceți la fila de proiectare și asigurați-vă că alinierea butonului este setată la stânga.

• Aliniere buton: stânga

Setări buton

Modificați și setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Culoarea textului butonului: # 000000
• Raza chenarului butonului: 0 px
• Buton Font: Poppins

Spațiere

Și, în cele din urmă, adăugați niște valori de marjă și umplere personalizate la setările de spațiere.

• Marja inferioară: 10vw (desktop), 15vw (tabletă și telefon)
• Marja stângă: 5vw
• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw
• Garnitura stânga: 3vw
• Garnitura dreapta: 3vw

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

În această postare, v-am arătat cum să utilizați noile opțiuni ale coloanei Divi pentru a crea titluri uimitoare în modul de amestecare divizat. Acest tutorial arată doar cât de versatile sunt opțiunile încorporate ale Divi și cum, cu fiecare actualizare Divi, software-ul de proiectare terță parte devine inutil. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.