Cum se suprapun orizontal frontierele rândurilor cu Divi

Crearea proiectelor de pagini care interacționează nu este întotdeauna o sarcină ușoară. Pe lângă concentrarea pe experiența utilizatorului, principiile de proiectare și tendințele de proiectare, trebuie să creați ceva care să se potrivească cu brandul companiei dvs. și să vă fascineze vizitatorii la prima vedere.

Dacă căutați pe blogul nostru, veți găsi o mulțime de moduri creative de a aborda designul dvs. web utilizând opțiunile încorporate versatile Divi și Divi. Astăzi, adăugăm o altă abordare creativă la lista respectivă. Vă vom arăta cum să suprapuneți creativ marginile rândurilor pentru a crea un design uimitor. Ne asigurăm că avem același tip de design pe toate dimensiunile ecranului.

Să ajungem la asta!

Abonați-vă la canalul nostru Youtube

previzualizare

Vom crea un exemplu de la zero, dar înainte să ne aruncăm cu el, să aruncăm o privire asupra rezultatului final pe diferite dimensiuni de ecran.

Descărcați fontul gratuit Mightype

Primul lucru pe care va trebui să-l faceți este să descărcați fontul gratuit Mightype cu litere manuale de la AF studio. Accesați următorul link și activați descărcarea gratuită prin e-mail.

Adăugați o secțiune nouă

Spațiere

După ce ați descărcat fontul gratuit menționat în pasul anterior, puteți merge mai departe și puteți crea o pagină nouă. După ce faceți acest lucru, activați Visual Builder, deschideți prima secțiune a noii pagini și adăugați câteva umpluturi personalizate:

• Căptușeală superioară: 250 px
• Căptușeală inferioară: 250 px

Adăugați un rând nou

Structura coloanei

Vom avea nevoie de două rânduri în total. Vom începe cu prima și o vom clona după aceea, după ce se termină. Adăugați un rând nou în secțiunea dvs. utilizând următoarea structură de coloane:

Coloana 1 Gradient Background

Fără a adăuga încă module, deschideți setările rândurilor și adăugați următorul fundal de gradient al coloanei 1:

• Culoare 1: #ffffff
• Culoare 2: rgba (0,255,233,0,25)
• Tipul gradientului coloanei: radial
• Direcția radială a coloanei: stânga
• Poziția de început a coloanei: 59%
• Poziția finală a coloanei: 59%
• Coloana Plasează gradientul deasupra imaginii de fundal: Da

Coloana 1 Model de fundal

Continuați salvând următorul model pe computer și încărcându-l ca imagine de fundal a coloanei 1:

După ce ați încărcat modelul, utilizați următoarele setări ale imaginii de fundal:

• Dimensiunea imaginii de fundal a coloanei: dimensiunea reală
• Repetarea imaginii de fundal a coloanei: Spațiu

Alinierea rândurilor

Activați și alinierea dreaptă a rândurilor.

Dimensionare

De asemenea, folosim câteva setări de dimensionare personalizate pentru acest rând:

• Utilizați lățimea personalizată: da
• Lățime personalizată: 950 px

Spațiere

Acestea sunt valorile de spațiu pe care trebuie să le adăugați în continuare:

• Marja inferioară: 100 px
• Marja dreaptă: -30 px (tabletă și telefon)
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Nu în ultimul rând, adăugați o margine în partea de sus, stânga și jos a rândului:

• Lățimea chenarului: 14 px
• Culoare margine: # 000000
• Stilul marginii stângi: dublu

Adăugați un modul de text de titlu

Adăugați o copie H2

Acum putem începe să adăugăm modulele noastre! Adăugați un titlu Modul text și asigurați-vă că copia dvs. este H2.

Culoare de fundal

Vom întrerupe marginea din stânga a rândului nostru adăugând o culoare de fundal alb în modulul de text.

Încărcați fontul Mightype

Găsiți fontul Mightype pe computerul următor și încărcați-l în biblioteca de fonturi făcând clic pe butonul de încărcare din lista dvs. de fonturi.

Selectați fișierul de fonturi Mightype, dați un nume fontului dvs. și încărcați-l în biblioteca de fonturi.

Setări text H2

După ce ați adăugat noul font, continuați și faceți alte modificări la setările de text H2:

• Titlul 2 Font: Mightype
• Culoare text antet: # 000000
• Titlul 2 Dimensiune text: 150 px (desktop), 100 px (tabletă), 60 px (telefon)

Spațiere

Pentru fiecare dintre modulele pe care doriți să le suprapuneți marginilor rândurilor, va trebui să adăugați marjă negativă. Această marjă negativă va afecta doar modulul în cauză, nu rândul în care a fost plasat. Marja negativă pe care va trebui să o adăugați depinde de numărul de caractere utilizate în copie.

• Marja superioară: 200 px
• Marja inferioară: 100 px
• Marja stângă: -35%
• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px

Blend Mode

Și pentru a vă asigura că culoarea de fundal a modulului de text afectează doar marginea rândului, și nu fundalul coloanei 1, activați modul de amestecare „Multiplicare” în setările Filtre.

Adăugați un modul de descriere

Culoare de fundal

Chiar sub titlul Modul text, continuați și adăugați o descriere Modul text cu o culoare de fundal alb.

Setări text

Accesați setările de text și efectuați câteva modificări:

• Dimensiune text: 22 px (desktop), 18 px (tabletă), 15 px (telefon)
• Înălțimea liniei textului: 1,8em
• Orientare text: centru

Dimensionare

Reduceți dimensiunea acestui modul text la '96% 'în continuare.

Spațiere

Adăugați și câteva spații:

• Marja inferioară: 200 px
• Marja stângă: -50%
• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px

Blend Mode

Și utilizați și modul de amestecare „Multiplicare”.

Clone Row

Am terminat de modificat primul rând! Să creăm același rezultat, dar pe cealaltă parte a paginii. Pentru a ne economisi ceva timp, vom clona rândul pe care îl avem deja și vom face unele modificări pe parcurs.

Schimbați setările rândului

Coloana 1 Gradient Background

Primul lucru pe care va trebui să îl modificați este fundalul de gradient al coloanei 1:

• Culoare 2: rgba (255.187,0,0.33)
• Direcția radială a coloanei: dreapta

Alinierea rândurilor

Vrem ca rândul să apară pe cealaltă parte, de aceea vom alege Alinierea rândului din stânga.

Spațiere

Reglăm și setările de spațiere:

• Marja stângă: -25% (tabletă și telefon)

Frontieră

Eliminați marginea din stânga care a fost aplicată rândului dvs. și aplicați-o în partea dreaptă:

• Lățimea marginii drepte: 14 px
• Culoare margine dreaptă: # 000000
• Stilul chenarului drept: dublu

Modificați setările modulului textului titlului

Spațiere

Modificați setările de spațiere ale titlului dvs. Modulul de text în continuare:

• Marja stângă: 52% (desktop și tabletă), 58% (telefon)
• Marja dreaptă: -52% (desktop și tabletă), 58% (telefon)

Schimbați Setările textului de descriere

Spațiere

Nu în ultimul rând, modulul de descriere Text are nevoie și de alte valori de spațiere:

• Marja stângă: 50%
• Marja dreapta: -50%

previzualizare

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

Gânduri finale

Suprapunerea marginilor rândurilor folosind opțiunile încorporate ale Divi poate aduce site-ului dvs. personalizarea și personalizarea pe care ar fi putut să le căutați. În această postare, v-am arătat exact cum să faceți asta. Am recreat un exemplu frumos de la zero. Acest exemplu arată excelent pe toate dimensiunile ecranului și am folosit doar opțiunile încorporate 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!