6 tehnici Divi pentru crearea de web design plat cu Divi

Designul web plat este popular datorită valorilor sale de bază. Se concentrează pe utilizare și prioritizează mai întâi experiența utilizatorului. Asta, în combinație cu un design elegant și modern, face un site web bun. Fiecare element de design de pe un site web plat ar trebui să fie bine gândit înainte de a fi adăugat la o pagină. De asemenea, ar trebui să se concentreze pe simplitatea, dar frumoasa și implicarea în același timp. Să nu uităm, ar trebui să atragă atenția vizitatorilor și să-i facă curioși să afle despre ce este vorba despre compania ta.

În această postare, vom împărtăși câteva tehnici de creare a designului web plat cu Divi. Acesta este al treilea post din seria de posturi în care gestionăm 4 stiluri de site-uri web diferite și cum să le realizăm folosind Divi:

1. Curat și abstract
2. Minim
3. Apartament
4. Îndrăzneț și colorat

Să ajungem la asta!

1. Păstrați secțiunea Hero curată și de înțeles

După cum sa menționat în introducerea acestei postări, utilizabilitatea este un aspect foarte important al stilului de design web plat. Vă permite să ajungeți la subiect și să împărtășiți informații relevante vizitatorilor fără a le supraîncărca. În același timp, utilizați un aspect superb care se potrivește cu brandul companiei dvs.

Există multe modalități de a crea modele web plate, dar lucrul pe care l-am observat aproape peste tot este simplitatea secțiunii erou. Și designul simplu nu înseamnă cu siguranță plictisitor. Înseamnă că nu trebuie să bateți în jurul tufișului. Puteți ajunge la subiect fără a fi nevoie să exagerați designul pe care îl creați pentru a încerca să impresionați vizitatorii.

2. Accentuați structurile cutiei

Un alt lucru care este tipic în stilurile de design web plat este utilizarea structurilor de cutie. Dacă vă cunoașteți drumul în jurul Divi, știți că puteți găsi structuri de cutii practic peste tot în cadrul constructorului. Ele oferă o anumită structură site-ului dvs. web și vă permit să construiți un cadru în avans.

În cadrul proiectelor plate, structurile cutiei sunt de obicei accentuate. Acest lucru permite oamenilor să navigheze cu ușurință și să găsească ceea ce caută într-o chestiune de timp.

3. Alegeți 3 culori strălucitoare

Am menționat până acum utilizarea structurilor de cutii și a unei secțiuni simple de eroi. În teorie, sună plictisitor, nu? Pentru a echilibra acest factor de utilizare pe site-ul dvs. web, îl puteți aduce la viață utilizând o paletă de culori strălucitoare. Puteți alege două sau trei culori strălucitoare care vă vor personaliza site-ul web și îl vor face să se potrivească cu valorile companiei dvs.

4. Utilizați combinații de culori cu gradient foarte subtil

Un alt lucru care vă poate ajuta să întrerupeți ciclul este utilizarea combinațiilor de culori de gradient foarte subtile. Utilizați aceeași culoare, dar o nuanță diferită pentru ambele culori degradate. Una dintre ele trebuie să fie mai strălucitoare, în timp ce cealaltă are o senzație mai profundă. Acestea nu vor părea imediat ca un gradient pentru oameni, dar vă vor ajuta să oferiți site-ului dvs. un pic mai multă profunzime și detalii.

5. Combinați un standard cu o familie de fonturi elegantă

De obicei, multe site-uri web folosesc o familie de fonturi mai elegantă pentru titluri și una standard pentru textul corpului. De ce să nu schimbăm lucrurile? Acest lucru va face cu siguranță o schimbare. În plus, oamenii au tendința de a omite descrierile și de a citi doar titluri. Dacă acesta este cazul, doriți ca titlurile dvs. să fie cât mai ușor de citit, nu? O combinație excelentă de familii de fonturi utilizează Arial pentru titluri și Georgia pentru textul corpului. Georgia este încă foarte ușor de citit, doar un pic mai sofisticată și oferă contrastul necesar site-ului dvs. web.

6. Joacă-te cu Heights

Ultimul sfat este să te joci cu înălțimea elementelor de design de pe paginile tale. Ați fi surprins cât de mult poate contribui la aspectul general al site-ului dvs. web. Încă mențineți structura cutiei recomandată pentru designurile plate, dar, în același timp, oferiți și interacțiunii vizitatorilor.

previzualizare

Am văzut mai multe tehnici în partea anterioară a postării, acum este timpul să punem în practică sfaturile. Vom crea pas cu pas următorul rezultat uimitor:

Să începem să creăm: Adăugați secțiunea standard nr. 1

Setări secțiune

Fundal de gradient

Începeți prin crearea unei pagini noi și adăugarea unei secțiuni la pagina respectivă. Fără a adăuga încă rânduri, deschideți setările secțiunii. Folosim un fundal de gradient subtil cu următoarele setări:

• Culoare 1: # 5214ff
• Culoare 2: # 420fc1
• Tipul gradientului: liniar
• Direcția gradientului: 146 grade
• Poziția inițială: 30%

Spațiere

Adăugăm și câteva secțiuni de sus și de jos la secțiunea noastră:

• Căptușeală superioară: 55 px
• Căptușeală inferioară: 130 px

Adăugați rândul # 1

Setări rând

Structura coloanei

Continuați adăugând primul rând. Această secțiune va consta, în total, din trei rânduri diferite. Pentru primul rând, folosim următoarea structură de coloane:

Dimensionare

Deschideți imediat setările rândului și activați opțiunea „Faceți acest rând lățime completă” în setările de dimensionare.

Adăugați un modul text de titlu

Setări text H1

Va trebui să adăugăm doar un modul de text H1 la acest rând. După ce ați adăugat conținutul (și v-ați asigurat că este H1), deschideți setările de text H1 și aplicați următoarele modificări:

• Font de titlu: Arial
• Alinierea textului antet: stânga
• Culoare text antet: #FFFFFF
• Dimensiune text antet: 86 px (desktop), 65 px (tabletă), 45 px (telefon)
• Înălțimea liniei de direcție: 1.2em

Adăugați rândul # 2

Setări rând

Structura coloanei

Să trecem la rândul următor. Din nou, folosim un rând cu o singură coloană.

Dimensionare

Înainte de a adăuga module, deschideți setările de rând și aplicați următoarele setări de dimensionare:

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

Adăugați un modul divizor

Culoare

Continuați prin adăugarea unui modul divizor în coloana dvs. Folosim „# edf000” ca culoare separatoare.

Dimensionare

Urmează să ajustăm setările de dimensionare ale modulului nostru divizor în continuare:

• Greutatea divizorului: 10 px
• Lățime: 64%
• Alinierea modulului: dreapta

Adăugați rândul # 3

Setări rând

Structura coloanei

Nu în ultimul rând, adăugați un rând cu două coloane.

Dimensionare

Deschideți setările de rând și activați opțiunea „Faceți acest rând întreg lățime” în setările de dimensionare.

Spațiere

Eliminați umplutura personalizată a rândului adăugând „0px” la umplutura de sus și de jos.

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

Setări text

Continuați adăugând o descriere Text Module în a doua coloană folosind următoarele setări de text:

• Font text: Georgia
• Culoarea textului: #FFFFFF
• Dimensiune text: 27 px (desktop), 22 px (tabletă), 18 px (telefon)
• Înălțimea liniei textului: 1.9em
• Alinierea textului: dreapta

Adăugați un modul buton la coloana 2

Aliniere buton

Aliniați rândul la dreapta și în setările de aliniere ale modulului de text.

Setări buton

Următorul și ultimul modul pe care va trebui să îl adăugăm la secțiunea erou este un modul buton. După ce adăugați copia, aplicați următoarele setări ale butonului:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 27 px
• Culoarea textului butonului: # 303030
• Culoarea fundalului butonului: # edf000
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Georgia

Adăugați secțiunea standard nr. 2

Setări secțiune

Spațiere

Putem trece la a doua secțiune! Deschideți setările secțiunii și utilizați următoarea padding:

• Căptușeală superioară: 155 px
• Căptușeală inferioară: 200 px

Adăugați rândul # 1

Setări rând

Structura coloanei

Primul rând pe care îl vom adăuga va conține cercul nostru roșu. Alegeți următoarea structură de coloane pentru rândul dvs.:

Coloana 1 Gradient Background

În loc să încărcăm un modul de imagine, vom folosi un fundal cu gradient radial al coloanei 1. Folosim culoarea roșie în paleta noastră de culori în combinație cu o culoare complet transparentă.

• Culoare 1: # ff3233
• Culoare 2: rgba (255,255,255,0)
• Coloana 1 Tip de gradient: Radial
• Coloana 1 Poziția de start: 45%
• Coloana 1 Poziție finală: 45%

Dimensionare

Continuați modificând 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

Adăugați un modul divizor

Ascundeți divizorul

Pentru a ne asigura că fundalul coloanei noastre apare, vom adăuga un modul divizor în prima coloană. Cu toate acestea, nu vrem să apară divizorul. De aceea vom dezactiva opțiunea „Afișează divizorul”.

Spațiere

Și pentru ca fundalul gradientului de colum să se afișeze, vom adăuga următoarea marjă la modulul divizor:

• Sus: 150 px (desktop), 200 px (tabletă și telefon)
• Partea de jos: 150 px (desktop), 200 px (tabletă și telefon)

Reveniți la Setări rând

Adăugați spațiu

Vom face ca acest cerc roșu să se suprapună ambelor secțiuni de pe pagina noastră. Pentru a face acest lucru, vom redeschide setările rândurilor și vom adăuga o marjă negativă:

• Marja superioară: -350px (desktop), -400px (tabletă și telefon)
• Marja stângă: -250 px (desktop și telefon), -400 px (tabletă)

Adăugați rândul # 2

Setări rând

Structura coloanei

Să trecem la al doilea rând. Acest rând va conține un titlu Modul text și divizor. Alegeți următoarea structură de coloane:

Spațiere

Reduceți spațiul pe care îl creează acest rând utilizând „0px” pentru căptușeala superioară.

Adăugați un modul text de titlu

Setări text H2

Acum putem adăuga modulele noastre. Începeți prin adăugarea unui nou modul de text H2 cu următoarele setări de text:

• Titlul 2 Font: Arial
• Titlul 2 Aliniere text: centru
• Culoare text antet: # 303030
• Titlul 2 Dimensiune text: 50 px (desktop), 45 px (tabletă), 32 px (telefon)
• Titlul 2 Înălțimea liniei: 1.3em

Adăugați un modul divizor

Culoare

Chiar sub modulul text, adăugați un modul divizor. De data aceasta, vrem ca divizorul să apară. Dă-i codul de culoare „# 5214ff”.

Dimensionare

Modificați setările de dimensionare ale modulului divizor în continuare:

• Greutatea divizorului: 10 px
• Lățime: 30%
• Alinierea modulului: centru

Adăugați rândul # 3

Setări rând

Structura coloanei

Este timpul să ne creăm ultimul rând folosind patru coloane.

Copiați fundalul gradientului secțiunii

Vom folosi același fundal de gradient ca și pentru secțiunea erou. Deci, pentru a ne economisi ceva timp, pur și simplu vom copia acele setări.

Lipiți fundalul gradientului în coloanele 1 și 3

Și lipiți-le în coloana unu și trei.

Dimensionare

Accesați setările de dimensionare următoare și faceți rândul să ocupe întreaga lățime a ecranului.

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

Spațiere

Vom schimba și setările de spațiu:

• Marja superioară: 100 px
• Căptușeală superioară și inferioară: 0 px

Adăugați un modul Blurb

Selectați pictograma

Acum că am terminat cu setările rândurilor, putem începe să adăugăm modulele noastre! Vom avea nevoie de patru module Blurb, unul pentru fiecare coloană. În loc să le creăm separat, vom crea una și o vom copia ulterior. Odată ce ați adăugat conținutul blurb, continuați și selectați o pictogramă la alegere.

Setări pictograme

Deschideți setările pictogramei în continuare și utilizați culoarea pictogramei „# edf000”.

Setări text

Continuați utilizând următoarele setări de text:

• Orientare text: centru
• Culoarea textului: deschis

Setări text titlu

Deschideți apoi setările pentru textul titlului și efectuați câteva modificări:

• Titlu Font: Arial
• Dimensiune text titlu: 31 px
• Înălțimea liniei de titlu: 2.6em

Setări text corp

La fel, vom face ca textul corpului să se potrivească cu aspectul pe care îl creăm:

• Font corp: Georgia
• Dimensiunea textului corpului: 18 px
• Înălțimea liniei corpului: 2.2em

Spațiere

Și, în sfârșit, pentru a oferi modulului Blurb un spațiu pentru a respira, adăugați următoarea căptușeală personalizată:

• Căptușeală superioară și inferioară: 50 px
• Căptușeala stânga și dreapta: 20 px

Clonați și modificați modulul Blurb

Clonați modulul Blurb & Place în coloana 2

Clonați modulul Blurb pe care tocmai l-ați creat și plasați duplicatul în a doua coloană.

Schimbă iconița

Primul lucru pe care va trebui să îl schimbați este pictograma.

Schimbați culoarea pictogramei

Schimbați și culoarea pictogramei în „# ff3233”.

Schimbați culoarea textului

Deoarece avem de-a face cu o culoare de fundal alb, va trebui să schimbați culoarea textului în „Întunecat” în setările de text.

Spațiere

Ne jucăm cu înălțimea modulelor Blurb pentru a face totul să apară un pic mai mult. Pentru aceasta, deschideți setările de spațiere și utilizați următoarele valori de marjă superioară:

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

Box Shadow

În plus, vom adăuga și o umbră foarte subtilă:

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: rgba (0,0,0,0.11)

Clonați ambele module Blurb și plasați-le în coloanele rămase

Module de clonare

Acum avem cele două module Blurb pe care le vom reutiliza pentru coloanele rămase. Clonează fiecare dintre ele o dată.

Plasați în coloanele 3 și 4

Plasați modulele Blurb duplicat în coloana lor corespunzătoare și ați terminat!

previzualizare

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

Gânduri finale

În această postare, am împărtășit câteva sfaturi și tehnici cu privire la crearea de design web plat cu Divi. Designul web plat este foarte popular în zilele noastre, deoarece permite vizitatorilor să navigheze cu ușurință prin pagini și să proceseze informațiile mai rapid. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!