Cum să proiectezi un aspect „Vitrină” cu cinci coloane responsive cu Divi

Proiectarea unui aspect cu cinci coloane cu suficient spațiu pentru conținutul dvs. poate fi o provocare. Ca să nu mai vorbim de provocarea mai mare de a vă asigura că se potrivește frumos pe toate dimensiunile browserului. În acest tutorial, vă voi arăta cum să maximizați spațiul necesar pentru a încadra conținutul într-un aspect cu cinci coloane, fără a compromite designul pe dimensiuni mai mici ale ecranului (cum ar fi tableta și smartphone-ul). Acest design este ideal pentru prezentarea produselor, serviciilor și proiectelor. Voi arunca chiar și câteva caracteristici de design bonus pentru puțină inspirație.

Să începem.

Trage cu ochiul

Tehnici receptive utilizate

Utilizați o lățime de rând personalizată și o lățime de jgheab

Cheia pentru ca un aspect cu cinci coloane să fie receptiv este mai întâi să oferiți coloanelor suficient spațiu pentru a conține conținut. În proiectarea acestui tutorial, voi da rândului care conține cele cinci coloane o lățime personalizată la 89%. Apoi, voi crea și mai mult spațiu setând lățimea jgheabului la 1, care practic elimină orice marjă între coloane. Pentru acest design, este important să utilizați o lățime personalizată de 89% în loc să setați rândul pe lățime completă, deoarece puteți seta lățimea jgheabului la 1 și păstrați totuși o marjă pe fiecare parte a rândului. Vei vedea la ce mă refer.

Utilizați unități de lungime vw pentru spațierea și textul titlului

O altă cheie pentru păstrarea sensibilității lucrurilor într-un aspect cu cinci coloane este spațierea conținutului dvs. folosind unități de lungime vw. Și este important să fiți în concordanță cu utilizarea vw pe toată spațiul dvs. Acest lucru vă va asigura că vă mențineți scalarea constantă a tuturor dimensiunilor browserului fără a face ca elementele să se rupă sau să sară în timp ce reglați lățimea ferestrei. Utilizarea unității de lungime vw pentru textul antet va fi, de asemenea, cheia, astfel încât textul să nu se rupă într-o nouă linie pe ferestrele mai mici ale browserului. Cu toate acestea, pentru textul cu antet, va trebui să alocăm o unitate px pentru tabletă și smartphone pentru a ne potrivi textului care se micșorează prea mult.

Partea 1: Noțiuni introductive

Tot ce aveți nevoie pentru acest tutorial este tema Divi. Vom folosi Visual Builder împreună cu aspectul paginii de start a firmei de arhitectură.

Deci, pentru a începe, creați o pagină nouă, dați un titlu paginii dvs. și implementați Visual Builder. Selectați opțiunea „Alegeți un aspect premade”. În fereastra pop-up de încărcare din bibliotecă, selectați pachetul de amenajare a designului interior și apoi încărcați aspectul paginii de start cu firma de arhitectură pe pagina dvs.

Partea 2: Crearea secțiunii titlu

Pentru început, copiați a doua secțiune care conține cele trei blurbs.

Avem nevoie de două secțiuni pentru acest design, deoarece secțiunea de sus va avea două scopuri. În primul rând, va deține titlul secțiunii noastre de mai jos. Și în al doilea rând, ne va permite să adăugăm un design unic folosind un separator de secțiuni.

Hai sa continuăm.

În secțiunea originală (nu duplicatul), ștergeți cele trei blurbs și schimbați structura coloanei rândului într-o singură coloană.

Apoi derulați în jos până la partea de jos a aspectului până la ultima secțiune și copiați modulul de text din coloana din stânga.

Apoi lipiți-l în rândul pe care tocmai l-ați creat și ștergeți tot conținutul textului sub titlul h2, astfel încât să rămână doar „Să construim ceva”.

Partea 3: Personalizarea Blurbs pentru un aspect cu cinci coloane

Acum este timpul să vizitați secțiunea pe care am copiat-o cu cele trei blurbs originale din interiorul rândului cu 3 coloane. În primul rând, să schimbăm structura rândului într-un aspect cu cinci coloane.

Deschideți setările de blurb ale modulului de blurb din prima coloană și apoi ștergeți imaginea utilizată ca pictogramă.

Apoi copiați modulul de blurb din prima coloană. Vom folosi două blurbs pe coloană pentru acest design, deoarece avem nevoie de blurb-ul de sus pentru a ne păstra imaginea de fundal.

Deschideți setările pentru blurbul superior din prima coloană și ștergeți textul corpului din caseta de conținut.

Adăugați o imagine de fundal și un gradient la modulul Blurb de sus

Apoi dați aceleiași imagini de fundal o imagine de fundal și adăugați un gradient pentru a suprapune imaginea după cum urmează:

Adăugați o imagine de fundal
Culoarea stânga a gradientului de fundal: rgba (255,255,255,0)
Culoarea dreaptă a gradientului de fundal: rgba (18,18,18,0,65)
Poziția inițială: 50%
Plasați gradientul deasupra imaginii de fundal: DA

Gradientul este necesar pentru a ajuta textul titlului nostru să devină mai lizibil cu imagini de fundal mai deschise.

Utilizați unitățile VW pentru textul și spațiul titlului

Apoi actualizați setările filei de proiectare după cum urmează:

Dimensiune text titlu: 2.7vw (desktop), 46px (tabletă), 36px (smartphone)
Spațiere litere titlu: -3px
Marja personalizată: 1,5vw stânga, 1,5vw dreapta
Căptușeală personalizată: 35vw sus, 2vw jos, 1vw stânga, 1vw dreapta

Salvează setările.

Căptușeala superioară personalizată de 35vw este cea care creează un design unic de imagine verticală lungă. Textul titlului primește o valoare de 2,7vw pentru a menține scalarea textului în mod constant pe diferite lățimi ale browserului. Restul spațierii va avea mai mult sens odată ce adăugăm mai mult spațiu pe rândul nostru mai târziu.

Personalizarea blurbului de jos

Apoi deschideți setările celui de-al doilea modul blurb dedesubt în prima coloană și ștergeți textul titlului. Apoi actualizați următoarele:

Alinierea textului corpului: stânga
Culoarea textului corpului: # 666666
Căptușeală personalizată: 2vw sus, 2vw jos, 2vw stânga, 2vw dreapta

Acum că avem cele două blurbs proiectate în prima noastră coloană. Copiați-le pe ambele și lipiți-le în fiecare dintre coloanele rămase. Mai întâi va trebui să ștergeți mai întâi modulele de blurb originale din coloanele 2 și 3. Acum, designul dvs. ar trebui să arate astfel.

Partea 4: Personalizarea setărilor secțiunii

Acum să actualizăm setările secțiunii noastre pentru a avea un fundal alb și o umbră de casetă în partea de jos, care va crea un spațiu pentru rândul nostru să se suprapună.

Culoare fundal: #ffffff
Împletire personalizată: implicit Sus, 5vw Jos, implicit Stânga, implicit Dreapta
Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: -200px
Puterea neclarității umbrei cutiei: 0 px
Culoare umbră: # 121212

Partea 5: Personalizarea setărilor de rând

Acum să revenim la rândul nostru și să actualizăm setările după cum urmează:

Imagine de fundal: #ffffff
Alinierea rândurilor: centru
Lățime personalizată: 89%
Lățimea jgheabului: 1
Marja personalizată: -10vw
Căptușeală personalizată: 3vw sus, 3vw jos, 1,5vw stânga, 1,5vw dreapta
Box Shadow: vezi captura de ecran
Puterea neclarității umbrei cutiei: 80 px

După cum sa menționat mai devreme în tutorial, lățimea personalizată și lățimea jgheabului sunt esențiale pentru crearea spațiului de conținut de care avem nevoie pentru un aspect cu cinci coloane.

În acest moment, structura de bază a designului este terminată. Iată cum arată designul până acum.

Partea 6: Adăugarea ultimelor atingeri

Acum putem adăuga alte câteva modificări de design pentru a finaliza.

Scandalizând Blurbs

Mai întâi, haidem să înălțăm înălțimea imaginilor de fundal, diminuând căptușirea câtorva. Deschideți setările modulului de blurb superior din al doilea rând și actualizați căptușeala după cum urmează:

Căptușeală personalizată: 28vw Top

Și pentru blurbul superior din a treia coloană, schimbați umplutura superioară la 30vw.

Adăugați un divizor de secțiune pentru a adăuga textura la rândul dvs. cu cinci coloane

O tehnică de proiectare interesantă este de a adăuga un separator de secțiune de sus la secțiunea de deasupra secțiunii cu cele cinci coloane. Fundalul divizorului se va afișa pe fundalul rândului cu cinci coloane, chiar dacă se suprapune secțiunii de mai sus. Pentru a face acest lucru, accesați secțiunea care conține titlul „Să construim ceva” și acordați-i un separator după cum urmează:

Deoarece culoarea divizorului este aceeași culoare a fundalului secțiunii cu o opacitate de 15%, divizorul nu este vizibil în secțiunea de sus, dar devine vizibil în secțiunea de mai jos și pe rândul suprapus. Și pentru că am dat rândului o umbră de cutie, acest lucru creează un design unic.

Am continuat și am actualizat câteva dintre imaginile de fundal pentru a-mi face o idee mai bună despre cum ar arăta designul cu diferite imagini.

Iată designul final.

Unul dintre lucrurile minunate despre aspectul în cinci coloane este că obțineți un aspect frumos în două coloane pe tabletă.

Iată cum arată pe smartphone.

Gânduri finale

Îmi place să explorez puterea lui Divi pentru a crea machete receptive. Provocarea unui aspect cu cinci coloane este că nu există într-adevăr prea mult spațiu pentru conținut, cu excepția cazului în care utilizați tehnicile potrivite pentru a vă spația conținutul în mod corespunzător, pentru a le scala pe toate dimensiunile browserului. Sper că acest design a fost util pentru a introduce câteva posibilități de utilizare a unui aspect cu cinci coloane pentru următorul dvs. proiect.

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

Noroc!