Stăpânirea raportului de aur în proiectare

Designul tău arată aproape corect, dar ceva se simte. Distanța pare incomodă. Proporțiile nu funcționează. Reglați marjele și căptușeala, dar acel sentiment neplăcut de dezechilibru rămâne. Piesa lipsă ar putea fi raportul de aur.

Acest principiu matematic a ghidat un design excelent timp de secole. Și, ochii noștri preferă în mod natural aceste raporturi specifice. Cei mai mulți designeri sări peste raporturile de aur sau le aplică greșit din cauza cât de greu este să crăpa. Cu toate acestea, cu un constructor de pagini precum Divi 5, puteți aplica proporții perfecte fără calcule complexe.

Să aflăm mai multe.

Care este raportul de aur?

Raportul de aur este egal cu aproximativ

1.618.

De unde a venit? Obțineți acest număr atunci când împărțiți o linie în două părți, unde partea mai lungă împărțită la partea mai scurtă este egală cu întreaga linie împărțită la partea mai lungă.

Puteți calcula raportul de aur folosind secvența Fibonacci. Începeți cu 0 și 1. Adăugați -le pentru a obține 1. Apoi adăugați 1 și 1 pentru a obține 2. Continuați să adăugați ultimele două numere: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Când împărțiți un număr mai mare la numărul precedent, vă apropiați de 1.618.

Acest raport apare peste tot în natură. Urmează spiralele de semințe de floarea soarelui. Învelișurile nautilus cresc folosind aceste proporții. Chiar și fața ta urmează probabil măsurători ale raportului de aur între caracteristicile tale. Când ceva urmează acest raport, creierul tău îl recunoaște ca fiind plăcut în mod natural.

Imagini amabilitate: Lucas și Dynamic Wang pe Unsplash și Milena Carolina Dos Santos Mangueira

Simbolul φ (Phi) reprezintă un raport matematic unic pe care grecii antici au descoperit -o în jurul anului 300 î.Hr. Ei s -au referit la ea drept „proporția divină”, crezând că a dezvăluit un echilibru vizual și o frumusețe speciale.

De ce contează: de la clădiri vechi la design web

Grecii au folosit acest raport pentru templul Parthenon, iar piramidele egiptene urmează aceste măsurători. Artiști precum Leonardo da Vinci au studiat aceste proporții ani de zile. Da Vinci a atras faimosul „om vitruvian”, arătând raporturile de aur în corpul uman.

Imagine reprezentativă

Designerii bine stabiliți încă folosesc acest lucru. Logo -ul Apple folosește proporțiile raportului de aur. Logo -ul de pasăre Twitter a urmat aceste măsurători. Revistele plasează conținut important la pete de raport de aur în loc de chiar în centru.

Imagini curtoazie: Widewalls & Design Shack

Oamenii de știință au studiat de ce oamenilor le plac formele raportului de aur. Scanările creierului arată mai multă activitate în zonele de plăcere când oamenii privesc dreptunghiurile raportului de aur. Acest lucru este inerent oamenilor, deoarece acest lucru se întâmplă în toate culturile și vârstele.

Creierul dvs. procesează aceste proporții mai repede decât alte raporturi, ceea ce înseamnă o experiență mai bună a utilizatorului. Când proporțiile site -ului web ajung prea departe de 1.618, vizitatorii se simt inconfortabili și pleacă mai devreme.

Raportul creează echilibru fără a fi perfect. Simetria perfectă poate arăta plictisitoare pe site -urile web. Raportul de aur oferă doar suficientă asimetrie pentru a crea un interes vizual, menținând în același timp utilizatorii curat și cu aspect profesional.

De ce design -urile dvs. se simt „oprit” (și cum remediază raporturile)

Tocmai ai petrecut ore întregi perfecționându -ți aspectul. Culorile sunt corecte. Fonturile lucrează împreună. Dar ceva se simte încă. Bara laterală pare prea largă. Antetul pare un pic înghesuit. Zona de conținut nu curge cu restul.

Aceasta este o experiență comună. Mulți designeri ajustează dimensiuni pe baza a ceea ce se simte corect în acest moment. Poate că ați setat conținutul principal la 70 la sută și bara laterală la 30 la sută. Aceste numere par rezonabile, dar nu arată întotdeauna natural.

Ochii noștri caută echilibru și modele familiare. Când proporțiile nu sunt tocmai corecte, întregul design se simte penibil, chiar dacă nu puteți explica de ce. S -ar putea să nu fie o mare greșeală, ci doar un mic detaliu care te dezamăgește.

Problema reală este adesea proporțională. Când machetele ignoră ceea ce se simte echilibrat, creierul tău observă. Ceva se simte, chiar dacă nu poți pune degetul pe el.

Cât de greșite rapoartele sabotajează experiența utilizatorului

Proporțiile proaste fac lucrurile să pară ciudate. Creierul tău se așteaptă ca anumite forme și dimensiuni să meargă bine împreună. Imaginează -ți o secțiune de eroi care ocupă exact jumătate din ecranul tău. Pare rigid și incomod.

Acum, luați în considerare unul care folosește 43 % sau 67 la sută din spațiu. Arată dezechilibrat și dezordonat.

Acest lucru vă poate răni site -ul. Oamenii decid foarte repede dacă au încredere în ceea ce văd. Dacă pagina privește, s -ar putea să creadă că afacerea dvs. este de încredere. Designul dezordonat îi face pe oameni să creadă că munca ta nu este bună.

Raportul de aur poate ajuta la rezolvarea acestui lucru. În loc să faceți secțiunea dvs. de erou 70 la sută, încercați 61,8 la sută, lăsând următoarea secțiune 38,2 la sută vizibilă.

Aceste numere nu sunt aleatorii. Ei urmează un model special numit 1.618 pe care îl vedeți în natură, ca în flori și scoici. Ochii tăi știu acest model și se simt calmi când îl văd.

Trucul este modul în care părțile se raportează între ele. Totul se simte corect dacă dimensiunea antetului tău se potrivește cu zona de conținut folosind raportul de aur. Subsolul, meniul și conținutul dvs. încep să se potrivească în loc să pară că se luptă pentru spațiu.

Cum se calculează proporțiile raportului de aur

Nu ai nevoie de matematică fantezistă. Amintiți -vă doar 62 și 38. Aceste numere se adaugă până la 100, astfel încât funcționează ca procente.

Împărțiți orice spațiu oferind 62% în partea mai mare și 38% în partea mai mică. Site -ul dvs. este lățime de 1000 de pixeli. Faceți conținutul principal 620 pixeli. Puneți -vă bara laterală la 380 de pixeli. Raport de aur perfect.

Am o secțiune de 500 de pixeli înălțime. Zona dvs. principală primește 310 pixeli. Restul primește 190 de pixeli.

Reguli rapide pentru piesele site -ului

Secțiunea Erou ar trebui să ia aproximativ 60% din ceea ce oamenii văd mai întâi. Restul se adresează previzualizării principale a conținutului. Faceți cărți cu 60% la fel de înalți pe cât sunt largi. Un card de 300 de pixeli devine o înălțime de 180 de pixeli.

Butoanele funcționează la fel. O lățime de 100 de pixeli înseamnă o înălțime de 60 de pixeli. Coloana dvs. de text are o lățime de 600 de pixeli. Nu mai adăugați conținut în jur de 370 de pixeli în jos. Apoi adăugați următoarea secțiune.

Arată bine?

Pas înapoi de pe ecran. Părțile ar trebui să se simtă echilibrate acum. Ochiul curge lin de la secțiune la secțiune. Dacă continuați să priviți într -un loc, proporțiile ar putea fi oprite.

Site -urile populare folosesc aceleași 62/38 despărțiri peste tot. Veți începe să vedeți modelul odată ce știți ce să căutați. Matematica rămâne ascunsă, dar armonia vizuală iese în evidență imediat.

Greșeli comune de raport de aur fac pe care le fac designerii

Majoritatea proiectanților știu că raportul de aur există și vor să -l folosească. Iată unde se luptă în mod obișnuit.

Cea mai mare greșeală este aplicarea raporturilor la întâmplare fără un sistem. Utilizați raporturi de aur pentru antetul dvs., treimi pentru grila de conținut și procente aleatorii pentru subsol. Alegeți o abordare și folosiți -o în mod constant pe designul dvs.

Mulți designeri rotind 1.618 până la numere ușoare precum 1,5 sau 1,7. Creierul dvs. observă diferența dintre 62% și 60%, iar acest mic decalaj afectează armonia vizuală pe care o lucrați pentru a crea.

O altă problemă comună este elementele raportului de nepotrivire. De exemplu, s -ar putea să creați o secțiune erou perfect proporțională, dar apoi să adăugați o galerie de imagini care utilizează raporturi de distanțare complet diferite. Deconectarea vizuală rupe fluxul pe care l -ați stabilit.

Unii designeri aplică raportul de aur la text, fără a lua în considerare confortul de citire. O lungime de linie care urmează proporții matematice perfecte ar putea depăși lățimea de citire confortabilă. Leazibilitate are prioritate față de precizia matematică.

Designerii web, de asemenea, de asemenea, trec cu vederea. Proporțiile desktop care arată echilibrate se pot simți înghesuite sau întinse pe ecrane mai mici. Raporturile de aur au nevoie de aplicații diferite pe dimensiunile dispozitivului.

Mulți constructori de pagini implicite pentru machete arbitrare care ignoră armonia proporțională. Grilele standard cu trei coloane folosesc 33/33/33 despărțiri în loc de mai multe raporturi naturale.

Cea mai limitată greșeală este abandonarea abordării după încercările inițiale. Raporturile de aur funcționează cel mai bine atunci când sunt aplicate sistematic pe structura de dispunere, nu ca ajustări izolate.

De ce mulți constructori de pagini ignoră raporturile de aur?

Constructorii de pagini au crescut în jurul gândirii programatorului. Dezvoltatorii adoră numerele care se împart curat. Doisprezece coloane, patru secțiuni, cincizeci și cincizeci de despărțiri.

Multe companii de constructor cred cu adevărat că utilizatorii ar trebui să -și controleze propriile alegeri de proiectare. Ei nu vor să împingă teorii estetice specifice asupra persoanelor care ar putea prefera abordări diferite. Unii designeri urăsc raportul de aur și preferă alte sisteme proporționale. De ce să forțezi un principiu matematic atunci când creativitatea prosperă pe opțiuni?

Adevărata problemă tehnică este mai dezordonată decât filozofia de design. Raporturile de aur creează zecimale ciudate care se rup pe dispozitivele mai vechi. Încercați să construiți o grilă receptivă în care o coloană are 61,8%. Procentele curate precum 25% sau 33% se comportă în mod previzibil pe fiecare dispozitiv.

Majoritatea companiilor de constructor de pagini au început ca soluții tehnice, nu instrumente de proiectare. Sunt construite în jurul unor machete sistematice, logice, care funcționează în mod fiabil.

Utilizatorii rareori se plâng de proporții. Ei se plâng de machete mobile rupte și timpi de încărcare lentă. Prioritățile companiei urmează feedback -ul real al utilizatorilor, nu teoria proiectării.

Unii constructori se îngrijorează de începătorii copleșitori. Noii utilizatori se confruntă deja cu zeci de opțiuni de aspect, iar adăugarea de considerente matematice ar putea speria oamenii care doresc doar ceva curat și profesionist.

Construirea proporțiilor perfecte cu Divi 5

Înainte de a ne scufunda în remedierea modului în care Divi 5 transformă designul raportului de aur de la o durere de cap matematică în simplitatea punct-and-clic, haideți să luăm un ocol scurt și să înțelegem ce face Divi să aleagă alegerea pentru designerii WordPress care doresc rezultate profesionale fără coșul de codificare.

Ce este Divi?

Divi este un constructor de pagini WordPress conceput pentru persoanele cărora le pasă de designul vizual fără a face compromisuri asupra caracteristicilor.

Puteți trage și arunca peste 200 de module în jur, puteți schimba textul și puteți alege culori noi. Totul se întâmplă chiar pe pagina dvs., așa că vedeți exact ce vor vedea vizitatorii.

Tema vine la pachet cu 2000+ machete pre-fabricate. Acestea nu sunt șabloane de bază, ci modele complete pentru restaurante, fotografi, consultanți și zeci de alte afaceri. Alegeți unul care se potrivește stilului dvs. și personalizați de acolo.

Dacă vindeți produse online, Divi include peste 20 de module realizate special pentru magazine. Paginile dvs. de produs vor arăta profesionist și vor ajuta de fapt la transformarea browserelor în cumpărători.

Construiți site -uri web fără dureri de cap

Constructorul de teme vă permite să proiectați fiecare parte a site -ului dvs. Puteți crea antete personalizate care să se potrivească cu marca dvs., să construiască machete unice de blog și chiar să vă faceți 404 de pagini să arate uimitor.

Divi Ai aduce comoditatea AI chiar în pânza de design. Puteți genera text,

imagini,

cod,

și secțiuni de pagini întregi folosind Divi AI.

Puteți edita chiar și fotografiile existente doar descriind ceea ce aveți nevoie.

Site -urile rapide Divi rezolvă cele mai mari probleme pe care le confruntă constructorii de site -uri: privind o pagină goală fără să știe de unde să înceapă. Puteți alege dintre site -urile de pornire profesionale, care au șabloane de site -uri profesionale, create de echipa noastră de proiectare și oferă imagini și lucrări de artă unice pe care nu le veți găsi nicăieri în altă parte.

Sau lăsați Divi Ai să construiască machete personalizate pe baza descrierii afacerii dvs.

Acest site web generat AI nu este doar un cadru de fir. Acesta va conține titluri, copii și imagini relevante pentru descrierea dvs. Puteți solicita Divi AI să genereze toate imaginile, să utilizați una de la Unsplash sau să utilizați locații, astfel încât să le puteți înlocui singur.

Puteți chiar să vă selectați fonturile și culorile și să lăsați AI să alerge cu ele. Și, desigur, site -urile web rămân editabile la fel ca site -urile web obișnuite, astfel încât să puteți regla orice aveți nevoie după gustul dvs.

Obțineți divi

Divi 5: Următorul pas

Construirea site -urilor web ar trebui să se simtă naturale, cum ar fi schițarea ideilor pe hârtie. Aveți o viziune, iar instrumentele dvs. ar trebui să o ajute la viața fără a intra în cale. Exact asta ne -a determinat să reconstruim Divi de la sol complet.

Divi 5, disponibil astăzi ca alfa și gata de a fi utilizat pe site -urile noi , reprezintă ani de ascultare a ceea ce aveți nevoie atunci când creați site -uri web. Nu sunt clopote și fluiere sau caracteristici pe care nimeni nu le folosește cu adevărat, ci îmbunătățiri reale care îți fac munca mai rapidă și mai plăcută. Am păstrat tot ceea ce iubești la Divi și l -am dus la nivelul următor.

Am reconstruit totul de la zero folosind instrumente web noi. Paginile se încarcă mai repede acum, iar controalele funcționează mai bine. Puteți păstra design -urile la fel pe întregul site fără muncă suplimentară.

Ce s -a îmbunătățit? Ce este nou?

• Reconstrucția completă a cadrului scapă de coduri scurte vechi. Totul rulează pe un nou cod bazat pe bloc care se încarcă mai rapid și funcționează mai bine.
• Editarea cu un singur clic vă permite să faceți clic pe orice parte a paginii dvs. pentru a o edita imediat. Nu mai vânătoare pentru pictograme mici sau săpați prin meniuri.
• Punctele de întrerupere personalizabile vă oferă șapte dimensiuni ale ecranului pentru a funcționa în loc de trei. Puteți schimba fiecare pentru a se potrivi nevoilor dvs. exacte.
• Suportul unităților avansate vă permite să utilizați Calc (), Clamp (), Min (), Max () și toate noile unități CSS chiar în constructor.
• Variabilele de proiectare vă permit să salvați culori, fonturi, dimensiuni, imagini, text și link -uri într -un singur loc. Schimbați -le o dată și se vor actualiza peste tot pe site -ul dvs.
• Presetările de grupuri de opțiuni vă permit să salvați și să reutilizați stiluri pentru granițe, fonturi, umbre și distanțare. Acestea funcționează în diferite părți ale site -ului dvs.
• Rândurile cuibărite vă permit să puneți rânduri în alte rânduri. Puteți construi machete complexe fără secțiuni speciale.
• Grupurile de module combină mai multe module într -o singură unitate. Acest lucru face ca machetele complexe să fie mai ușor de gestionat. Puteți face, de asemenea, modulele personalizate.
• Spațiul de lucru cu mai multe panouri vă permite să plasați panouri unde le doriți. Puteți lucra cu mai multe setări deschise în același timp.
• Gestionarea atributelor vă oferă un control exact atunci când copiați, lipiți și resetați stiluri, conținut și presetări între diferite părți.
• Modul Light/Dark vă permite să alegeți tema care vă este mai ușor pe ochi în timp ce lucrați.
• Scalarea pânzei vă permite să vă redimensionați zona de lucru pentru a vedea cum arată site -ul dvs. pe diferite ecrane. Nu este nevoie să schimbați modurile de previzualizare.
• Îmbunătățirile performanței fac ca paginile să se încarce mai repede, să se afle mai repede și să se simtă mai lină atunci când construiți.

Încercați Divi 5 astăzi

Divi 5 este acum disponibil pentru proiecte de site -uri noi. L -am reconstruit de la sol pentru a vă face fluxul de lucru mai rapid și mai ușor. Descărcați publicul Alpha și încercați -l pe următorul dvs. site nou pentru a vedea îmbunătățirile. Este gratuit pentru toți membrii Divi, noi și vechi.

Vă sugerăm să -l utilizăm doar pentru site -uri noi, în timp ce îmbunătățim sistemul de migrație pentru site -urile Divi 4 existente. Dacă începeți proaspăt, acum este un moment minunat pentru a încerca interfața actualizată și performanța mai bună.

Cum se folosește raporturi de aur folosind Divi 5

A spus suficient. Haideți să facem o scufundare profundă și să vedem cum putem implementa raporturi de aur pe site -ul dvs. web folosind DIVI 5 și, mai bine, cum pot fi standardizate, astfel încât să nu trebuie să vă plimbați cu matematica de fiecare dată când creați o nouă secțiune sau o pagină.

Variabilele de proiectare vă permit să salvați și să reutilizați valorile pe site -ul dvs. Acestea formează ADN -ul de identitate vizuală a site -ului dvs. Divi 5 are șase tipuri: culori, fonturi, imagini, șiruri de text, link -uri și numere. Fiecare are un rol specific:

• Variabilele de culoare dețin culori ale mărcii, fundaluri, culori de text și alte nuanțe utilizate la nivel de site.
• Variabilele de fonti păstrează fonturi consecvente pentru titluri, textul corpului și elemente speciale.
• Variabilele de imagine stochează grafice comune, cum ar fi logo -uri sau modele de fundal pentru utilizare ușoară.
• Variabilele de șiruri de text Salvați conținut reutilizabil, cum ar fi sloganuri, contacte și note legale.
• Variabilele de legătură păstrează adresele URL pe care le utilizați adesea, cum ar fi rețelele de socializare sau paginile cheie.
• Numărul variabilelor gestionează măsurătorile în pixeli, procente, EMS, REM și unități de viewport și lucrează cu funcții CSS precum Calc () pentru a menține proporțiile chiar pe orice ecran.

Configurarea variabilelor dvs. de raport de aur

Deschideți tabloul de bord DIVI 5 și găsiți pictograma managerului variabil în bara laterală din stânga.

Faceți clic pe acesta pentru a deschide panoul Variables. Adăugați culorile, fonturile, imaginile, textul și variabilele de legătură.

Apoi, accesați fila numere pentru a crea variabilele dvs. de raport de aur. Începeți prin adăugarea acestor variabile de număr:

Variabile de tipografie

• Dimensiune H1: Clemă (47px, 4.7VW, 76px)
  • 47px minim: chiar și pe cele mai mici telefoane (320px lățime), H1 -ul dvs. rămâne suficient de mare pentru a stabili ierarhia. Orice mai mic pierde impactul ca rubrică principală.
  • 4.7VW Valoare mijlocie: Această unitate de lățime a vizorului face ca scala de text să fie fără probleme. La 1000px Lățimea ecranului, 4.7VW = 47px. La 1600px, crește la 75px
  • 76px maxim: obținem acest lucru înmulțind 18px × 1.618 de trei ori (18 × 1.618 × 1.618 × 1.618 = 76.244px)
• Dimensiune H2: Clemă (29px, 3.5VW, 47px)
  • 29px minim: păstrează H2 vizibil mai mic decât H1 pe mobil, în timp ce rămâneți citit
  • Scalare 3.5VW: scalare proporțional mai mică decât H1 pentru a menține ierarhia
  • 47px maxim: exact 76px ÷ 1.618 = 47.122px
• Dimensiune H3: Clemă (18px, 2.9VW, 29px)
  • Minim 18px: se potrivește cu dimensiunea textului corpului pe mobil pentru a economisi spațiu vertical
  • Scalare 2.9VW: crește mai ușor decât rubricile mai mari
  • 29px maxim: precis 47px ÷ 1.618 = 29.124px
• Dimensiune H4: Clemp (14px, 2.2VW, 22.4px): Continuați împărțirea ~ 29px ÷ 1.618 = 17.994px, dar stabilim minim la 22,4px pentru lizibilitate
• Dimensiune H5: Clemă (13px, 1.8VW, 18px): dimensiunea fontului nostru de bază de 18px se potrivește perfect la scară aici
• Dimensiunea textului corpului: Clamp (16px, 1.6VW, 18px): bază standard 18px din care toate calculele provin din

Funcția Clamp () permite textul redimensionat fără probleme între ecrane. Este nevoie de trei valori: cea mai mică dimensiune pentru telefoane, valoarea mijlocie pentru scalare și cea mai mare pentru desktop. Folosim Lățimea Viewportului (VW) la mijloc, deoarece face ca textul să crească treptat pe măsură ce ecranele devin mai mari. Fără salturi bruște între dimensiuni.

Pe desktop, rămânem la raporturi de aur perfecte. Ecranele mobile au nevoie de ajustări minore pentru a menține textul lizibil. Calculele pure ar putea sugera 11px pentru unele rubrici, dar asta tulpină ochii vizitatorilor tăi. Setarea minimelor practice precum 14px păstrează armonia vizuală a raportului de aur, asigurându -se în același timp că toată lumea vă poate citi confortabil conținutul. Relațiile proporționale rămân intacte; Doar s -au schimbat ușor pentru lizibilitate.

Variabile de distanțare

Fiecare valoare se înmulțește anterior cu exact 1.618:

• Space XS: Clamp (8px, 1VW, 10px)
  • De ce baza 10px: Aceasta este cea mai mică tactilă confortabilă tactilă pe mobil. Înțelepciunea industriei recomandă ținte de atingere minimă de 44px, iar o umplutură de 10px pe toate părțile, plus conținutul te duce acolo. Mai mic de 10px face ca elementele să se simtă înghesuite.
  • De ce 8px minim: pe telefoane sub 360px lățime, chiar și 10px se pot simți prea spațioase. Renunțăm la 8px pentru a maximiza spațiul de conținut, păstrând elemente distincte.
  • De ce 1VW: crește distanța proporțională și vă oferă exact 10px la 1000px lățimea ecranului
• Spațiu mic: clemă (13px, 1.6VW, 16.18px): ideal pentru căptușirea butonului și distanțarea câmpului de formă.
• Mediu spațial: clemă (21px, 2.6VW, 26.18px): excelent pentru distanțarea dintre blocurile de conținut conexe.
• Spațiu mare: clemă (34px, 4.2VW, 42.36px): creează cameră de respirație între secțiuni majore în timp ce se scalează cu dimensiunea ecranului.
• Space XL: CLAMP (55px, 6.8VW, 68.54px): excelent pentru căptușeala de sus/inferioară pe secțiuni Hero și blocuri majore de caracteristici. Secțiunile de eroi au nevoie de o căptușeală substanțială chiar și pe mobil. Sub 50px, Hero Conținut se simte înghesuit pe margini.
• Spațiu XXL: CLAMP (89px, 11VW, 110.89px): Utilizați puțin. Poate pentru secțiuni speciale care au nevoie de cameră de respirație dramatică.

Variabile de aspect

• Lățimea primară a coloanei: 61,803%
  • Cum îl obținem: Împărțiți 1 cu 1.618 = 0,61803 (sau 61,803%)
  • Utilizați acest lucru pentru principala dvs. zonă de conținut în orice aspect cu două coloane
• Lățimea coloanei secundare: 38.197%
  • Folosiți pentru coloana dvs. din bara laterală în același rând
  • Derivat din 100% - 61,803% = 38,197%
• Container Lățime maximă: 1165px
  • Textul devine greu de citit atunci când liniile se întind dincolo de 72 de caractere,
    • și presupunând 10px ca dimensiune minimă a textului, lățimea optimă de citire (720px) × raport de aur (1.618) = 1165px
  • Aplicați la secțiunea principală sau rândul dvs. care vă deține conținutul
• Raport de înălțime de aur: Calc (100% / 1.618)
  • Aceasta poate fi utilizată ca valoare în înălțimi pentru grupuri de module/module, cum ar fi imagini, căsuțe de apel la acțiune, secțiuni de eroi, cărți de membru al echipei etc.
  • Acest lucru ar crea dreptunghiuri în loc de pătrate sau forme aleatorii. Creierul tău găsește aceste proporții atrăgătoare în mod natural, ca o fotografie perfect încadrată.
  • Cum obținem asta? Raportul de aur spune că, dacă lățimea = 1,618, atunci înălțimea = 1. Deci, dacă lățimea = 100%, atunci înălțimea = 100%÷ 1,618 = 61,8%. Această formulă face această matematică automat.

Salvați aceste variabile în managerul variabil al Divi 5. Apoi, folosiți-le oriunde făcând clic pe pictograma Variabile de lângă câmpurile de lățime, înălțime sau lățime maximă. După configurarea inițială, nu este necesară matematica. De asemenea, niciuna dintre aceste etichete variabile nu este fixată; Puteți schimba etichetele cu ceva care are sens.

Crearea unei secțiuni de erou cu raporturi de aur

Să construim o secțiune Hero pentru pagina de destinație a unei cărți, inspirată de unul dintre modelele colecției de site -uri de pornire, folosind variabilele raportului de aur pe care tocmai le -am creat. Și asta este partea distractivă. Puteți lua acele variabile calculate cu atenție și urmăriți cum afectează o secțiune de eroi adevărate.

Începeți prin crearea unei noi secțiuni în Visual Builder al Divi 5. Setați înălțimea folosind variabila raportului de înălțime de aur. Acest lucru face firesc ca creierul tău să recunoască ca fiind plăcut.

Adăugați variabila Space XL la căptușeala de sus și de jos. Aceasta oferă suficient spațiu de respirație pe mobil, în timp ce se extinde corespunzător pe desktop.

Pentru fundalul secțiunii, aveți două opțiuni principale folosind variabilele dvs. de proiectare:

Opțiunea 1: fundal de culoare solidă

• Faceți clic pe câmpul de culori de fundal și selectați variabila de culoare primară din meniul vertical. Acest lucru menține secțiunea dvs. de eroi în concordanță cu identitatea de marcă. Dacă culoarea dvs. principală este prea ușoară pentru contrastul textului, utilizați în schimb variabila de culoare secundară. Asigurați -vă că orice culoare pe care o alegeți oferă un contrast suficient pentru ca textul dvs. să rămână lizibil. Ținând pasul cu inspirația noastră, vom adăuga un gradient al fundalului și al culorilor primare cu o oprire de 72% și la 90 °.

Opțiunea 2: fundal de imagine

• Aplicați variabila de imagine Hero (dacă ați creat una) prin câmpul de imagine de fundal. Faceți clic pe pictograma Variabile de lângă setarea imaginii de fundal și selectați variabila de imagine salvată. Când utilizați imagini de fundal, adăugați o suprapunere pentru lizibilitatea textului. Setați culoarea de suprapunere la variabila de culoare primară și reglați opacitatea la 40-60%. Acest lucru întunecă imaginea suficient pentru a face textul alb crocant și lizibil.
• Puteți utiliza, de asemenea, variabila de culoare secundară pentru suprapunere, dacă contrastează mai bine imaginea de fundal aleasă.

Crearea aspectului cu două coloane

Adăugați un rând cu două coloane.

Setați lățimea coloanei din stânga la variabila de lățime a coloanei primare și coloana din dreapta la variabila de lățime a coloanei secundare. De asemenea, vom activa opțiunea „Egalizați înălțimea coloanei”. Apoi, variabila de lățime maximă a containerului va fi aplicată pentru a menține conținutul citit pe ecrane mai mari. Acest lucru împiedică liniile de text să se întindă prea larg, în special pe ecrane mai largi.

De asemenea, vom activa „Utilizarea lățimii personalizate a jgheabului” și o vom seta la 1. Acest lucru ne va ajuta să folosim distanțe de raport de aur între modulele noastre.

Aplicați variabila medie a spațiului la dreapta primei coloane și a căptușelii stângi a celei de -a doua coloane pentru a adăuga spațiu de respirație între coloane. Acest lucru creează suficientă separare între coloane, fără a le face să se simtă deconectate.

Coloana mai mare va ține mesajul principal și apelul la acțiune. Coloana mai mică poate conține o imagine erou simplă sau poate rămâne goală pentru un design curat, axat pe text.

Configurarea tipografiei care curge

În coloana principală, adăugați două module de rubrică.

Setați primul pe H5 și aplicați variabila de mărime H5. În acest exemplu, acest modul de text poartă conținutul „cel mai vândut autor”. De asemenea, vom folosi culoarea secundară pentru acest text și vom aplica un stil de font majuscule. De asemenea, vom aplica fontul corpului pe text pentru a -l face distinct și pentru a -și crește greutatea la BOLD.

Setați al doilea pe H1 și aplicați variabila de dimensiune H1. Acesta devine principalul tău titlu. În acest exemplu, vom folosi numele autorului, care a fost adăugat mai devreme, ca variabilă de proiectare. Dacă aveți idei scurte, puteți utiliza Divi AI pentru a vă ajuta cu un text excelent.

Mai jos, adăugați un modul de text pentru paragraful dvs. de susținere. Aplicați variabila dimensiunii textului corpului și variabila de culoare. Păstrați acest lucru la 2-3 propoziții care explică propunerea dvs. de valoare de bază. Pentru acest exemplu, vom adăuga o scurtă introducere autorului nostru. Puteți utiliza, de asemenea, Divi AI pentru a vă ajuta cu copia aici.

Spați aceste elemente folosind mediul spațial ca marjă dintre titlu și paragraf.

Apoi, adăugați un modul de buton sub textul dvs. Aplicați -vă culorile. Folosim variabila primară de design de culoare și textul butonului.

Adăugați variabila medie a spațiului la căptușeala stângă și dreapta și spațiul mic în partea de sus și de jos pentru dimensiunile butonului. Acest lucru creează un buton proporțional cu textul dvs. fără a fi supradimensionat. Folosiți spațiul dvs. variabilă mare ca marjă de sus pentru a o separa de paragraf.

Textul butonului ar trebui să utilizeze variabila de dimensiune a textului corpului pentru a menține consecvența cu textul paragrafului. De asemenea, vom aplica variabila de proiectare a link -ului butonului pe care am adăugat -o mai devreme.

Stilând coloana din dreapta

Coloana din dreapta poate ține orice de la o imagine la un formular de bord. Dacă utilizați o imagine în coloana mai mică, păstrați -o simplă. O fotografie a echipei dvs., a biroului dvs. sau a unei ilustrații curate funcționează bine. Nu răsturnați plasarea imaginii: centrați -o în mod normal în coloană. Pentru acest exemplu, vom include variabila de design de imagine a unei cărți recente. Și, de asemenea, adăugați o umbră de cutii pentru a o face să iasă în evidență.

De asemenea, vom ajusta lățimea imaginii pentru a fi în jur de 90%, astfel încât să pară mai aliniat.

Pentru consultanța site -urilor web, uneori, lăsarea coloanei din dreapta, creează un aspect mai curat, mai profesional, care pune accentul pe mesajul dvs.

Rezultatul

Următorul este rezultatul:

Utilizați scalarea pânzei Divi 5 pentru a testa aspectul eroului dvs. pe diferite dimensiuni ale ecranului. Funcțiile Clamp () din variabilele dvs. ar trebui să gestioneze automat receptivitatea.

În timp ce variabilele raportului de aur oferă o armonie proporțională excelentă, este posibil să aveți nevoie de ajustări minore în funcție de conținutul dvs. specific. Titlurile lungi ar putea avea nevoie de text ușor mai mic. Etichetele scurte și perforate ar putea gestiona dimensiuni mai mari. Unele stiluri de marcă apelează la o distanță mai strânsă sau mai slabă.

Frumusețea variabilelor de design este că aceste modificări au doar două clicuri. Deschideți managerul variabil, reglați -vă dimensiunea H1 sau spațiul variabil mare și urmăriți schimbarea aplicată instantaneu pe întregul site.

H1 -ul dvs. ar trebui să rămână proeminent, dar lizibil pe mobil (minimum 47px). Distanța dvs. ar trebui să se simtă generoasă, dar nu excesivă pe orice dimensiune a ecranului. Split-ul cu două coloane vă oferă un aspect clasic, profesionist, care funcționează bine pentru întreprinderile de servicii în care încrederea și claritatea contează mai mult decât elemente de design strălucitoare.

Menținerea raporturilor de aur la nivel de site cu presetări de grupuri de opțiuni

Variabilele de proiectare gestionează numerele, dar presetările grupurilor de opțiuni se asigură că sunt utilizate în mod constant pe întregul site.

Construiește -ți prima secțiune folosind variabilele pe care le -am creat. Obțineți tipografia, distanțarea și aspectul exact corect. Apoi faceți clic pe pictograma presetată de lângă fiecare grup de styling (tipografie, distanțare, graniță etc.) și salvați -le ca presetări de grupuri de opțiuni.

Acest lucru creează blocuri de design reutilizabile care conțin deja proporții de raport de aur. În loc să porniți de la zero, aplicați aceste presetări de fiecare dată când adăugați o nouă secțiune sau un modul.

Când trebuie să ajustați proporțiile la nivel de site, schimbați variabila o dată. Fiecare presetare folosind instantaneu actualizări pe întregul site. Fără vânătoare prin pagini individuale pentru a face schimbări.

Raporturile tale de aur rămân consecvente fără munca manuală.

Matematică pentru design frumos, Divi 5 îl face ușor

Sentimentul acela neplăcut atunci când machetele arată „aproape corect” are sens în sfârșit. Nu ați fost picant: creierul vostru a luat relații proporționale care s -au simțit.

Raporturile de aur vă oferă un punct de plecare fiabil, dar majoritatea constructorilor te fac să faci matematica de fiecare dată. Variabilele de proiectare Divi 5 se schimbă complet. Calculați -vă o dată proporțiile 1.618, salvați -le ca variabile, apoi faceți clic pentru a le aplica oriunde pe site -ul dvs.

Trebuie să ajustați distanțarea pe cincizeci de pagini? Schimbați o variabilă în loc să editați fiecare pagină individual. Doriți o tipografie consecventă care urmează raporturile de aur? Setați -vă valorile Clamp () o dată și urmăriți -le scala perfectă pe toate dispozitivele.

Matematica funcționează peste tot, dar Divi 5 face de fapt practic utilizarea constantă.