Deci sunteți nou la Webflow, nu-i așa? Haideti sa patrundem in.

Acest ghid vizual vă va plimba prin concepte importante de web design receptiv și cum să le pună în aplicare în interiorul vizual Webflow.

Ghid vizual Web Design

# 1 Modelul cutie

Înțelegerea structura site-ul

Toate elementele de pe această pagină sunt toate blocurile din interiorul alte blocuri (aka "Caseta model"). Când glisarea elemente web, le trageți de la un bloc și fixați-le într-un alt. Asta e modul în care funcționează HTML!

super-PLAN

$ 75 / mon

Perfect pentru orice afacere cu 20 sau mai mulți angajați.

500GB de stocare
1 milion de Vizualizări
20 Colaboratori
50 Rețele sociale
Premium Suport

Ceea ce vedeți

Notă: Veți înțelege cum de a proiecta ceva de genul asta cu conceptele de mai jos.

Ce Blocuri E făcut din

Div bloc

H2 rubrica super-PLAN

Text Block $ 75 / mon

Punctul Perfect pentru orice afacere cu 20 sau mai mulți angajați.

Listă

Lista de Postul
500GB de stocare
Lista de Postul
1 milion de Vizualizări
Lista de Postul
20 Colaboratori
Lista de Postul
50 Rețele sociale
Lista de Postul
Premium Suport

încercați să-l singur

Trageți prezentul alineat ...

Toate caracteristicile, fără limitările. Cât poti mânca. (Acesta este un element paragraf)

SFAT: Faceți clic și glisați elementul paragraful de mai sus și plasați-l sub prețul de pe dreapta. Puteți utiliza, de asemenea, comenzi rapide, cum ar fi copy și paste (ctrl + c, ctrl + v), copia în timp ce trageți (țineți ALT), și șterge (șterge cheie).

În blocul violet ...

Super PLAN

$ 75 / mon

INFO: Acesta este modul în care funcționează HTML și web structura - elemente stivă sub ele sau în interiorul celuilalt. Asta e cel mai bun mod de a construi un site web fluid și receptiv.

# 2 elemente din plan

Elemente de bază aspect

Adaugă elemente la site-ul dvs., făcând clic pe [+] pictogramă în colțul din stânga sus. Mai jos sunt cateva dintre elementele cele mai de bază de structură în web design - secțiuni, containerele și coloane.

O secțiune ocupă 100% din lățimea ferestrei browser-ului, dacă adauga organismului (panza unui site web).
Este grozav pentru mari secțiuni orizontale ale unui site web.

Secțiunea Element

Un container este un bloc 960px centrat în mijlocul a browser-ului. De obicei, se adaugă cel mai conținutul site-ului în interiorul unui container, astfel că este centrat. Containere sunt de obicei adăugate la organismul sau un element de secțiune.

Container Element

Adăugarea Coloanele sunt cel mai rapid mod de a construi un site web unic aspect. Pentru a edita câte coloane doriți în diferite dispozitive, doar să faceți clic pe pictograma de viteze în colțul din dreapta sus pentru a accesa setările de elemente.

Coloane Responsive

# 3 Proiectare cu CSS

Styling elemente dvs.

Selectați un element și se adaugă o clasă în panoul din dreapta stil (Brush Icon). În acest panou puteți adăuga text și stiluri grafice, cum ar fi culoarea fontului, înălțimea liniei, pante, borduri, umbre, și mai mult. Web design vizual este mult mai distractiv decât de codificare corect?

Butonul exemplu de proiectare

Adaugă în coș ➜

Stilul it yourself

Butonul Text ➜

SFAT: Acest buton are deja o clasa "buton" cu unele stiluri de bază. Selectați butonul și încercați să adăugați gradientului, granița, colturi rotunjite, umbre interior / exterior, mutați stiluri de stat, și de tranziție pentru stiluri hover - toate cu ajutorul panoului de stil.

Ce ați creat

Butonul Text ➜

aplică clasa "butonul"

Butonul Text

SFAT: In web design, puteți aplica o clasă de multe elemente pentru a le face să arate la fel. Aplicați "buton" clasa pe care le stil la linkul de mai sus făcând clic pe [+] de la partea de sus a panoului Style și tastați "Button" pentru a găsi acea clasă.

Exemplu formă de proiectare

Mulțumesc!

Stâncă ta șosetele!

Hopa! Ceva a mers prost în timp ce depunerea formularului :(

Stilul it yourself

Multumesc! Trimiterea a fost primit!

Hopa! Ceva a mers prost în timp ce depunerea formularului :(

SFAT: În primul rând a crea clase pentru câmpurile de text și butonul (se aplică aceeași clasă a ambele domenii). Apoi schimba stiluri de frontieră, culoarea de fundal, și adăugați stiluri pentru planare si statele presate. Nu uitați să stil de stat "de succes" pentru elementul FORM, găsit în panoul Setări (Gear Icon în dreapta sus).

Exemplu Tipografie

Lakewood Stout

The Dark Beer de Lakewood, Colorado

Legendarul Stout sa născut din frumoasa Căsătoriei unui om de munte si lucru lui cel mai iubit, orașul Lakewood în Colorado. Omul de munte a iubit și toporul și single-shot Remington pusca, dar nu la fel de mult ca el a iubit orașul său. El a visat de râuri ei flowy și munți maiestuoși. Deci, el a numit cea mai mare robust lui după ea. Astfel, Stout glorios a fost nascut din inima unui om de munte de.

"Am artizanale aceasta bere glorios să-și exprime nemuritoare dragostea mea pentru orașul meu frumos."

- Mountain Man

Stilul it yourself

Lakewood Stout

The Dark Beer de Lakewood, Colorado

Legendarul Stout sa născut din frumoasa Căsătoriei unui om de munte si lucru lui cel mai iubit, orașul Lakewood în Colorado. Omul de munte a iubit și toporul și single-shot Remington pusca, dar nu la fel de mult ca el a iubit orașul său. El a visat de râuri ei flowy și munți maiestuoși. Deci, el a numit cea mai mare robust lui după ea. Astfel, Stout glorios a fost nascut din inima unui om de munte de.

"Am artizanale aceasta bere glorios să-și exprime nemuritoare dragostea mea pentru orașul meu frumos."

- Mountain Man

SFAT: Du-te și adăugați tipografie personalizate și stiluri de a fundal. Sfat rece: Dacă adăugați stiluri tipografie la un bloc parinte, toate elementele sale copii de text vor moșteni aceste stiluri de text. În CSS acest comportament se numește "în cascadă".

# 4 Layout cu CSS

Machete web clădire cu CSS

Similar cu adăugarea de stil la un element, pentru a schimba poziția unui prim element adăuga o clasă și apoi editați proprietățile de poziție. Veți afla despre Marja, Garniture, Display, Float, Overflow, și poziția.

Marja & Padding exemplu

Știri de ultimă oră

Agenți federali Raid Gunshop, găsit arme

Proprietar de magazin Steve Witmere arestat anterior pentru comercializare blackmarket bazooka. Mărturisește implicarea în mafia rusă.

Printre numeroasele bazookas găsite în gunshop au fost zeci de mii de picturi obținute ilegal în valoare de 10.000 de cel puțin $. Thats un preț greu să plătească pentru aceste picturi proaste.

Descriere: Marja și padding poate fi găsit în paleta Poziția panoului Style. Adăugarea Marja va adăuga spațiu în afara unui bloc, și adăugarea Padding va adăuga spațiu în interiorul unui bloc.

Adaugă spațiere te

Știri de ultimă oră

Agenți federali Raid Gunshop, găsit arme

Proprietar de magazin Steve Witmere arestat anterior pentru comercializare blackmarket bazooka. Mărturisește implicarea în mafia rusă.

Printre numeroasele bazookas găsite în gunshop au fost zeci de mii de picturi obținute ilegal în valoare de 10.000 de cel puțin $. Thats un preț greu să plătească pentru aceste picturi proaste.

SFAT: Începeți prin adăugarea padding pe toate laturile principal blocului gri (elementul părinte). Apoi se adaugă marja de jos pentru a adăuga distanța dintre elementele de text individuale (copii) elemente. Sugestie: Țineți SHIFT în timp ce utilizați controlul marja / padding să se aplice toate părțile și ALT să se aplice, de asemenea, la partea opusă.

"Arată: Bloc" exemple

Această rubrică este setat să afișeze: Bloc

Acest paragraf este setat să afișeze: Block. Deci, umple lățimea ferestrei părinte și stive pe partea de sus a altor blocuri.

Buton cu Display: Block Buton cu display: Blocați Această legătură este setat să afișeze: Bloc Această legătură este setat să afișeze: Bloc

Descriere: Stabilirea Setarea elemente "pentru a bloca le va face stiva pe partea de sus a reciproc și completați 100% lățimea bloc mamă. Cele mai multe elemente au de fapt această setare implicit.

Fă-i "Display: Block" te

Acesta este un buton Aceasta este un buton Link-uri sunt display: inline implicit Link-uri sunt display: inline implicit

SFAT: Selectați aceste elemente (unele sunt locuri aspect, iar unele sunt locuri) și să le afișa: bloc, astfel încât acestea stivă pe partea de sus a reciproc.

"Display: inline-block" exemplu

Descarcă Editează Șterge

Descriere: Stabilirea display Setare elemente "la Inline-Block va face lățimea blocului conforme cu lățimea conținutului în interiorul acestuia. Asta înseamnă că dacă conținutul lor este suficient de mic se poate stivă unul lângă altul. Puteți copia lipiți butoanele de mai sus și editați textul în interiorul pentru a vedea cum funcționează.

să le facă inline-block-te

Descarcă Editare

SFAT: Selectați elementele de mai sus și să le display: inline-block, astfel încât acestea stivă unul lângă altul. Veți vedea că imaginile stiva de lângă butoanele. Sfat: renunțarea la butoanele și imaginile în Div blocuri separate le va face stiva pe partea de sus a reciproc (deoarece Div Blocuri de display: bloc implicit).

Float exemplu

Multumesc! Trimiterea a fost primit!

Hopa! Ceva a mers prost în timp ce depunerea formularului :(

Descriere: Stabilirea display: inline-bloc sau plutitoare (acest exemplu) sunt cele mai comune modalități de a stiva elemente cot la cot. În acest exemplu vă voi arăta cum să plutească ceva.

Float it yourself

Multumesc! Trimiterea a fost primit!

Hopa! Ceva a mers prost în timp ce depunerea formularului :(

SFAT: Mai întâi selectați câmpul de text, face float: left și dau o lățime procent (ex: 60%). Apoi setați butonul pentru a float: left, precum și a stabilit un alt lățime procentaj (ex: 40%), astfel încât ambele adăuga până la 100%. Asta e un mod de manual pentru a forța orice element de a stiva cot la cot.

Absolută Poziția Exemplu

Cupa mea de Joe

Acesta este un text fotografie legendă.

Recomandate

Descriere: Dacă setați poziția de a Absolute pe un element, vei putea să-l poziționeze în oriunde în interiorul blocul părinte. Pentru a alege care parinte la poziția în interiorul, setați Poziția elementului părinte pentru a relativă. Notă: Când elemente sunt absolut poziționate plutesc deasupra altor elemente.

Stilul It Yourself

Cupa mea de Joe

Aceasta este o legendă fotografie pentru filmul meu preferat de Joe.

Recomandate

SFAT: Mai întâi selectați elementul de imagine Wrapper și setați poziția relativă. Următor selectați legenda, trageți-l în imaginea stabilit este poziția de a absolută și alegeți presetarea a 7. Pentru a poziționa insigna recomandate în locul corect alege a 2-a presetarea și poziția manual.

# 5 Stil Cascading

Utilizand Stiluri Cascading

Puteți crea cu ușurință variații de un element prin adăugarea clase suplimentare unul peste altul și adăugarea stiluri diferite pe aceste clase. Check out exemplul de mai jos, unde avem diferite variante a unui buton.

Comună exemplu stiluri de butoane

Proiecta butoanele tine

Buton verde

Butonul roșu

SFAT: Selectați al doilea buton și faceți clic pe [+] de lângă clasa pentru a adăuga o altă clasă. Puteți să-l numesc "Green". Apoi da stiluri diferite. Aceste stiluri va suprascrie stilurile de bază de la prima clasa. Apoi a crea butonul roșu.

# 6 interogări mass-media

Proiectare pentru diferite dispozitive

În Webflow să design site-ul dvs. prima pentru dispozitive desktop și apoi a face modificări pe dispozitive mobile (acces la icoane dispozitivului în bara de sus). Adăugarea stiluri într-un dispozitiv mobil va suprascrie stilurile desktop.

Exemplu Rubrica Responsive

Acest lucru este un text rubrică, care devine mai mică în dispozitive mobile.

Descriere: Această rubrică este foarte mare pe desktop, dar vrem să fie mai mici de pe dispozitive mobile. Faceți clic în dispozitivele din bara de sus pentru a vedea că dimensiunea textului și linia înălțimea a scăzut.

Fix It Yourself

Face acest text poziție de mare ajunge mai mică în dispozitive mobile.

SFAT: Selectați această poziție pe dispozitivul Tablet și de a face dimensiunea fontului și înălțimea liniei mai mici. Face același lucru pentru dispozitive Telefon Peisaj și telefon portret. Puteți vedea că

Responsive exemplu Button

Butonul Text

Descriere: Acest buton este menit să fie mică pe ecrane desktop, deoarece este ușor să faceți clic cu cursorul mouse-ului. Am făcut-o mai mare pe dispozitivele mobile, astfel încât este mai ușor să atingeți cu degetul

Butonul Text

Fix It Yourself

SFAT: Du-te la dispozitivul Tablet și de a crește padding a butonului. Când faci că va suprascrie stilurile anterioare stabilite pe Desktop și va cascadă în jos la toate dispozitivele de mai jos Tablet.

Coloane Responsive exemplu