Fare clic sul W per tornare alla Dashboard e creare un nuovo sito web!
Quindi sei un nuovo WebFlow, eh? Tuffiamoci in.

Guida Visuale Web Design

Questa guida visiva vi guiderà attraverso importanti concetti di progettazione reattivo web e modalità di attuazione visivamente dentro WebFlow. 

# 1 Il modello box

Capire struttura del sito web

Tutti gli elementi di questa pagina sono tutti i blocchi all'interno di altri blocchi (alias "Box Girl"). Quando si trascina elementi web, li trascina da un blocco e cadere in un altro. Ecco come funziona HTML!

Super PIANO

$ 75 / mon

Perfetto per qualsiasi azienda con 20 o più dipendenti. 

  • 500GB di archiviazione
  • 1 milione di  pagine visualizzate
  • 20 Collaboratori
  • 50 Reti Sociali
  • Premium Support
quello che vedi
Nota:  Potrai capire come progettare qualcosa di simile con i concetti di seguito.
Quali  blocchi  E 'fatta di
Div Block
Div Block

H2 Rubrica eccellente PIANO

Testo Blocco 75 $ / mon

Il paragrafo Perfetto per qualsiasi azienda con 20 o più dipendenti. 

Lista
  • List Item
    500GB  di archiviazione
  • List Item
    1 milione di  pagine visualizzate
  • List Item
    20  Collaboratori
  • List Item
    50  Reti Sociali
  • List Item
    Premium  Support

prova tu

Trascina questo paragrafo ...

Tutte le caratteristiche senza limitazioni. tutto quello che puoi mangiare. (Questo è un elemento di paragrafo)

SUGGERIMENTO:  Fare clic e trascinare l'elemento sopra il paragrafo e rilasciarlo sotto il prezzo di destra. È inoltre possibile utilizzare le scorciatoie come copia e incolla (ctrl + c, ctrl + v), copiare mentre trascinate (tenendo alt), ed eliminare (eliminare la chiave). 
Nel blocco viola ...

Super PIANO

$ 75 / mon
INFORMAZIONI:  Questo è come funziona HTML e web struttura - elementi pila sotto l'altro o uno dentro l'altro. Questo è il modo migliore per costruire un sito web fluida e reattiva.
# 2 ELEMENTI LAYOUT

Elementi di base di layout

Aggiungere elementi al tuo sito web, cliccando sull'icona [+] nell'angolo in alto a sinistra. Qui di seguito sono alcuni degli elementi più basilari della struttura nel web design - sezioni, contenitori e colonne. 

Una Sezione occupa il 100% della larghezza della finestra del browser se si aggiunge al corpo (la tela di un sito web).
E 'fantastico per i grandi sezioni orizzontali di un sito web.

Sezione Element

Un contenitore è un blocco 960px centrata nel mezzo del browser. Di solito più contenuto del sito viene aggiunto all'interno di un contenitore in modo che sia centrato. I contenitori sono solitamente aggiunti al corpo o un elemento di sezione.

Contenitore Elemento

Aggiunta di colonne sono il modo più veloce per costruire un layout sito web unico. Per modificare il numero di colonne che si desidera in diversi dispositivi, è sufficiente fare clic sull'icona ingranaggio nell'angolo in alto a destra per accedere alle impostazioni degli elementi.

Colonne Responsive
# 3 Progettare con i CSS

Styling gli elementi

Selezionare un elemento e aggiungere una classe nel riquadro giusto stile (Pennello icona). In questo pannello è possibile aggiungere testo e gli stili grafici come il colore del carattere, altezza della linea, gradienti, bordi, ombre e altro ancora. Visual Web design è il modo più divertente di codifica giusto?

Pulsante esempio di progettazione
Aggiungi al carrello ➜
Stile da te
Testo pulsante ➜
SUGGERIMENTO:  Questo tasto ha già un "Button" classe con alcuni stili di base. Selezionare il pulsante e cercare di aggiungere il gradiente, confine, angoli arrotondati, interni / esterni, ombre hover stili di stato, e di transizione per gli stili hover - il tutto utilizzando il pannello di stile.
Che cosa si è creato
Testo pulsante ➜
applicare la classe 'pulsante'
Testo pulsante
SUGGERIMENTO:  Nel web design è possibile applicare una classe di molti elementi per farle sembrare la stessa. Applicare la classe "Button" che dallo stile al link qui sopra cliccando il pulsante [+] nella parte superiore del pannello Style e digitando "Button" per trovare quella classe. 
Esempio Form Design

Grazie!

La tua roccia miei calzini!

Oops! Qualcosa è andato storto durante l'invio del modulo :(

Stile da te

grazie! L'invio è stato ricevuto!

Oops! Qualcosa è andato storto durante l'invio del modulo :(

SUGGERIMENTO:  Prima di creare classi per i campi di testo e il pulsante (applicare la stessa classe per entrambi i campi). Poi cambiare stili di confine, il colore di sfondo, e aggiungere gli stili per il passaggio del mouse e stati premuti. Non dimenticare di stile allo stato "successo" per l'elemento form, che si trova nel pannello delle impostazioni (icona ingranaggio in alto a destra). 
Esempio Tipografia

Lakewood Stout

La birra scura di Lakewood, Colorado

Il robusto leggendario nasce dalla bellissima matrimonio di un uomo di montagna e la sua cosa più amata, la città di Lakewood, in Colorado. L'uomo di montagna anche amava la sua ascia e il suo scatto singolo Remington fucile, ma non tanto quanto amava la sua città. Sognava di suoi fiumi flowy e maestose montagne. Così ha chiamato il suo più grande dopo la sua robusta. Così la stout gloriosa, anch'esse dal cuore di un uomo di montagna.

"Ho Messo questa gloriosa birra per esprimere il mio eterno amore per la mia bella città."

- Mountain Man

Stile da te

Lakewood Stout

La birra scura di Lakewood, Colorado

Il robusto leggendario nasce dalla bellissima matrimonio di un uomo di montagna e la sua cosa più amata, la città di Lakewood, in Colorado. L'uomo di montagna anche amava la sua ascia e il suo scatto singolo Remington fucile, ma non tanto quanto amava la sua città. Sognava di suoi fiumi flowy e maestose montagne. Così ha chiamato il suo più grande dopo la sua robusta. Così la stout gloriosa, anch'esse dal cuore di un uomo di montagna.

"Ho Messo questa gloriosa birra per esprimere il mio eterno amore per la mia bella città."

- Mountain Man

SUGGERIMENTO:  Vai avanti e aggiungere tipografia costume e stili per lo sfondo. Punta fredda: se si aggiungono gli stili di tipografia a un blocco genitore, tutti i suoi elementi testuali bambini erediteranno questi stili di testo. In CSS questo comportamento è chiamato "a cascata". 
# 4 layout con i CSS

Layout Web Costruire con i CSS

Simili aggiungendo stile ad un elemento, per cambiare la posizione di un primo elemento di aggiungere una classe e quindi modificare le proprietà di posizione. Imparerete a conoscere margin, padding, display, Salvagente, Overflow, e posizione. 

Margine & Imbottitura esempio
Notizie Fresche

Gli agenti federali Raid Gunshop, Trova Armi

Proprietario di un negozio Steve Witmere precedentemente arrestato per lo scambio di mercato nero bazooka. Confessa di coinvolgimento nella mafia russa.

Tra i numerosi bazooka trovato nel Gunshop erano decine di migliaia di dipinti ottenuti illegalmente per un valore di almeno $ 10.000. Quello è un prezzo pesante da pagare per questi dipinti muti.

Descrizione:  Margine e imbottiture possono essere trovati nella tavolozza posizione del pannello Style. Aggiunta Margine aggiungerà spazio esterno di un blocco, e aggiungendo Padding aggiungerà spazio all'interno di un blocco.
Aggiungere spaziatura Yourself
Notizie Fresche

Gli agenti federali Raid Gunshop, Trova Armi

Proprietario di un negozio Steve Witmere precedentemente arrestato per lo scambio di mercato nero bazooka. Confessa di coinvolgimento nella mafia russa.

Tra i numerosi bazooka trovato nel Gunshop erano decine di migliaia di dipinti ottenuti illegalmente per un valore di almeno $ 10.000. Quello è un prezzo pesante da pagare per questi dipinti muti.

SUGGERIMENTO:  Iniziare con l'aggiunta di imbottitura su tutti i lati del principale blocco grigio (elemento principale). Quindi aggiungere margine inferiore per aggiungere spaziatura tra i singoli elementi di testo (elementi bambini). Suggerimento: Tenere premuto MAIUSC mentre si utilizza il margine di controllo / padding da applicare a tutti i lati e ALT per applicare anche al lato opposto.
'display: block' esempi

Questa rubrica è impostato su display: block

Questo paragrafo è impostata su display: block. Così riempie la larghezza della finestra genitore e pile sopra altri blocchi. 

Pulsante con display: block Button con display: block Questo collegamento è impostata su display: block Questo collegamento è impostata su display: block
Descrizione:  Elementi di taratura 'Display Impostazione a Block li renderà impilare uno sopra l'altro e riempire il 100% la larghezza del suo blocco padre. La maggior parte degli elementi di realtà hanno questa impostazione predefinita. 
Renderli 'display: block' te stesso
Si tratta di un pulsante Questo è un Button Links sono display: inline per impostazione predefinita Link sono display: inline di default
SUGGERIMENTO:  selezionare questi elementi (alcuni sono Inline Block e alcuni sono in linea) e li rendono display: block in modo che impilano uno sopra l'altro. 
'Display: inline-block' esempio
Descrizione:  Elementi di taratura 'Display Impostazione di Inline-Block farà la larghezza del blocco conforme alla larghezza del contenuto al suo interno. Ciò significa che se il loro contenuto è abbastanza piccoli da poter impilare uno accanto all'altro. È possibile copiare incollare i bottoni sopra e modificare il testo dentro per vedere come funziona.
li rendono inline-block te
Scarica Edit
SUGGERIMENTO:  Selezionare gli elementi di cui sopra e farli display: inline-block così che vengano impilate accanto all'altro. Vedrete che le immagini pila accanto ai pulsanti. Suggerimento: Eliminazione i pulsanti e le immagini in blocchi separati Div li farà impilare uno sopra l'altro (perché i blocchi sono Div display: block per impostazione predefinita).
Float esempio

Iscriviti alla nostra Newsletter

grazie! L'invio è stato ricevuto!

Oops! Qualcosa è andato storto durante l'invio del modulo :(

Descrizione:  Impostazione Display: inline-block o galleggiante (questo esempio) sono i modi più comuni per impilare elementi affiancati. In questo esempio, vi mostrerò come galleggiare qualcosa. 
Float da te

Iscriviti alla nostra Newsletter

grazie! L'invio è stato ricevuto!

Oops! Qualcosa è andato storto durante l'invio del modulo :(

SUGGERIMENTO:  Per prima cosa selezionare il campo di testo, rendono float: left e dargli una larghezza percentuale (es: 60%). Quindi impostare il pulsante per float: left, come bene e impostare un altro larghezza percentuale (es: 40%), in modo che entrambi aggiungere fino a 100%. Questo è un modo manuale per forzare qualsiasi elemento di impilare fianco a fianco. 
Absolute Position Esempio

My Cup of Joe

Questo è un testo foto didascalia.

Descrizione:  Se si imposta posizione per Absolute su un elemento, sarete in grado di posizionarlo in qualsiasi punto all'interno del suo blocco padre. Per scegliere quale genitore per posizionare all'interno, impostare posizione dell'elemento genitore relativa. Nota: Quando gli elementi sono assoluti posizionato galleggiano sopra altri elementi.
Stile It Yourself

My Cup of Joe

Questa è una foto didascalia per la mia tazza preferita di Joe.

SUGGERIMENTO:  Prima selezionare l'elemento wrapper immagine e impostare la sua posizione a relativa. Avanti selezionate il sottotitolo, trascinarlo nell'immagine impostato la sua posizione di assoluta e scegliere il 7 preset. Per posizionare il badge in vetrina nel posto giusto scegliere la seconda preselezione e posizionare manualmente.
# 5  di stile CSS

Utilizzando stili Cascading

È possibile creare facilmente variazioni di un elemento con l'aggiunta di ulteriori classi uno sopra l'altro e l'aggiunta di stili diversi in tali classi. Scopri l'esempio seguente dove abbiamo diverse varianti di un pulsante. 

In comune stili di pulsanti esempio
Pulsante NORMALE
Pulsante VERDE
Pulsante ROSSO
Pulsante NORMALE
Progettare i pulsanti te
Pulsante VERDE
Pulsante ROSSO
SUGGERIMENTO:  Selezionare il secondo pulsante e cliccare sul [+] accanto alla classe di aggiungere un'altra classe. Si può chiamare "Verde". Poi dare stili diversi. Questi stili sostituiranno gli stili di base della prima classe. Quindi creare il pulsante rosso. 
# 6 media query

Progettare per i vari dispositivi

In WebFlow prima di progettare il vostro sito per dispositivi desktop e quindi apportare modifiche su dispositivi mobili (accedere alle icone dei dispositivi nella barra in alto). Aggiunta di stili in un dispositivo mobile sarà sovrascrivere gli stili desktop. 

Responsive esempio Intestazione

Questo è un titolo di testo che diventa sempre più nei dispositivi mobili.

Descrizione:  Questa rubrica è davvero grande sul desktop, ma vogliamo che sia più piccolo su dispositivi mobili. Fare clic nei dispositivi nella barra in alto per vedere che le dimensioni del testo e la linea di altezza è stata ridotta.
Fix It te

Fanno di questo grande testo rubrica si fanno più piccoli nei dispositivi mobili.

SUGGERIMENTO:  selezionare questa rubrica sul dispositivo Tablet e rendere la dimensione del carattere e altezza della linea più piccoli. Fare lo stesso per i dispositivi paesaggio Phone e ritratto del telefono. Si può vedere che la 
Responsive esempio Button
Testo pulsante
Descrizione:  Questo tasto è destinato ad essere piccolo su schermi desktop perché è facile fare clic con il cursore del mouse. Ce l'abbiamo fatta più grande su dispositivi mobili in modo che è più facile toccare con il dito
Testo pulsante
Fix It te
SUGGERIMENTO:  Vai al dispositivo Tablet e aumentare l'imbottitura del pulsante. Quando fate che avrà la precedenza degli stili precedenti impostati sul desktop e si cascata verso il basso per tutti i dispositivi sotto Tablet. 
Colonne Responsive esempio

Colonna 1

Questo è un testo all'interno di un blocco div.

Colonna 2

Questo è un testo all'interno di un blocco div.

Colonna 3

Questo è un testo all'interno di un blocco div.
Descrizione:  Le Colonne Element in WebFlow possono essere personalizzate per ciascun dispositivo. Con colonne predefinite impilare accanto all'altro su desktop e impilare uno sopra l'altro su dispositivi mobili. 

Colonna 1

Questo è un testo all'interno di un blocco div.

Colonna 2

Questo è un testo all'interno di un blocco div.

Colonna 3

Questo è un testo all'interno di un blocco div.
Fix It te
SUGGERIMENTO:  selezionare una colonna o elemento riga sopra (è anche possibile utilizzare la barra di navigazione in basso o il pannello Navigatore sulla destra per trovarlo), andare alle impostazioni elemento (icona ingranaggio nell'angolo in alto a destra) e assicurarsi che il colonne impilano su dispositivi mobili.
# 7 Risorse

Serve ancora aiuto?

Avete capito bene! Ci sono tonnellate di persone che apprendono WebFlow e web design ogni giorno. Un ottimo punto di partenza è il video tutorial. Poi andate su oltre al centro di supporto o un forum della comunità. 

(È possibile fare clic sui link qui sopra per entrare in modalità Anteprima - sull'icona occhio nell'angolo in alto a sinistra)