Clique no W para voltar ao Painel e criar um novo site!
Então você é novo para Webflow, eh? Vamos mergulhar na.

Guia de design Visual Web

Este guia visual o guiará através de importantes conceitos de design responsivo web e como implementá-los visualmente dentro Webflow. 

# 1 O modelo de caixa

estrutura do site Understanding

Todos os elementos desta página são todos os blocos dentro de outros blocos (aka "Box Model"). Ao arrastar elementos da web, você arrastá-los a partir de um bloco e soltá-los em outro. É assim que funciona HTML!

Super PLANO

$ 75 / mon

Perfeito para qualquer negócio com 20 ou mais empregados. 

  • 500GB de armazenamento
  • 1 milhão de  visualizações de página
  • 20 Colaboradores
  • 50 Redes Sociais
  • premium Suporte
O que você vê
Nota:  Você vai entender como projetar algo como isto com os conceitos abaixo.
Qual  Blocos  É feito de
div Bloco
div Bloco

H2 rubrica super-PLAN

Text Block $ 75 / mon

Parágrafo Perfeito para qualquer negócio com 20 ou mais empregados. 

Lista
  • lista de Itens
    500GB  de armazenamento
  • lista de Itens
    1 milhão de  visualizações de página
  • lista de Itens
    20  Colaboradores
  • lista de Itens
    50  Redes Sociais
  • lista de Itens
    premium  Suporte

tente você mesmo

Arraste este ponto ...

Todos os recursos sem as limitações. Tudo o que conseguires comer. (Este é um elemento parágrafo)

DICA:  Clique e arraste o elemento parágrafo acima e deixá-la sob o preço à direita. Você também pode usar atalhos como copiar e colar (ctrl + c, ctrl + v), copiar enquanto arrasta (alt holding), e excluir (apagar chave). 
Para o bloco roxo ...

Super PLANO

$ 75 / mon
INFO:  Esta é a forma como a estrutura HTML e web funciona - elementos da pilha sob um ao outro ou dentro do outro. Essa é a melhor maneira de construir um site de fluido e responsivo.
# 2 elementos de layout

elementos de layout básicos

Adicionar elementos ao seu site, clicando no ícone [+] no canto superior esquerdo. Abaixo estão alguns dos elementos mais básicos da estrutura em web design - seções, recipientes e colunas. 

A Seção ocupa 100% da largura da janela do navegador se você adicioná-lo ao corpo (a tela de um site).
É ótimo para as seções horizontais grande de um website.

seção Elemento

A Container é um bloco de 960 centrado no meio do browser. Normalmente, a maioria conteúdo do site é adicionado para dentro de um recipiente de modo que seja centrado. Os contentores são geralmente adicionado ao corpo ou um elemento Seção.

Elemento Container

Incluindo colunas são a maneira mais rápida de construir um layout único site. Para editar quantas colunas você quer em diferentes dispositivos, basta clicar no ícone de engrenagem no canto superior direito para acessar as configurações do elemento.

Colunas Responsive
# 3 Designing com CSS

Styling seus elementos

Selecione um elemento e adicionar uma classe no painel estilo certo (Brush Ícone). Neste painel, você pode adicionar texto e estilos gráficos, como cor da fonte, altura da linha, gradientes, bordas, sombras e muito mais. Visual web design é muito mais divertido do que de codificação certo?

exemplo de projeto botão
Adicionar ao carrinho ➜
Denominá-lo a si mesmo
Texto do botão ➜
DICA:  Este botão já tem um "botão" classe com alguns estilos básicos. Selecione o botão e tente adicionar o gradiente, borda, cantos arredondados, dentro / fora sombras, passe estilos de estado e de transição para os estilos em foco - todos usando o painel de estilo.
O que você criou
Texto do botão ➜
aplicar a classe 'botão'
Texto do botão
DICA:  Na web design você pode aplicar uma classe de muitos elementos para fazê-los parecer o mesmo. Aplicar a classe "Button" que denominou o link acima, clicando no [+] na parte superior do painel de Estilo e digitando "Button" para encontrar essa classe. 
Form Design exemplo

Obrigado!

Seu rock minhas meias!

Ops! Algo deu errado ao enviar o formulário :(

Denominá-lo a si mesmo

Obrigado! Sua submissão foi recebida!

Ops! Algo deu errado ao enviar o formulário :(

DICA:  Primeira criar classes para os campos de texto e botão (aplicar a mesma classe para ambos os campos). Em seguida, mudar estilos de borda, cor de fundo, e adicionar estilos para a pairar & estados pressionados. Não se esqueça de pentear o estado "sucesso" para o elemento de formulário, encontrado no painel de configurações (engrenagem ícone no canto superior direito). 
exemplo tipografia

Lakewood Stout

A cerveja escura de Lakewood, Colorado

O stout lendário nasceu da bela matrimônio de um homem de montanha e sua coisa mais querida, a cidade de Lakewood, no Colorado. O homem da montanha também amava seu machado e seu único tiro Remington rifle, mas não tanto quanto ele amava a sua cidade. Sonhou de seus rios flowy e montanhas majestosas. Assim, ele nomeou seu maior stout atrás dela. Assim, o stout gloriosa nasceu fora do coração de um homem da montanha.

"Eu trabalhada esta cerveja gloriosa de expressar o meu amor por minha bela cidade."

- Mountain Man

Denominá-lo a si mesmo

Lakewood Stout

A cerveja escura de Lakewood, Colorado

O stout lendário nasceu da bela matrimônio de um homem de montanha e sua coisa mais querida, a cidade de Lakewood, no Colorado. O homem da montanha também amava seu machado e seu único tiro Remington rifle, mas não tanto quanto ele amava a sua cidade. Sonhou de seus rios flowy e montanhas majestosas. Assim, ele nomeou seu maior stout atrás dela. Assim, o stout gloriosa nasceu fora do coração de um homem da montanha.

"Eu trabalhada esta cerveja gloriosa de expressar o meu amor por minha bela cidade."

- Mountain Man

DICA:  Vá em frente e adicionar tipografia e estilos personalizada para o fundo. Dica legal: Se você adicionar estilos de tipografia a um bloco pai, todos os seus elementos de texto filhos herdarão esses estilos de texto. Em CSS esse comportamento é chamado de "cascata". 
# 4 layout com CSS

layouts edifício web com CSS

Semelhante a adicionar estilo a um elemento, para mudar a posição de um elemento primeiro adicionar uma classe e, em seguida, editar as propriedades de posição. Você vai aprender sobre Margin, Enchimento, Display, Float, Overflow, e posição. 

Margem & Preenchimento exemplo
Notícias de Última Hora

Agentes federais Raid Gunshop, encontrar armas

proprietário da loja Steve Witmere anteriormente detidos para negociação blackmarket bazuca. Confessa envolvimento na máfia russa.

Entre as numerosas bazucas encontrados na loja de armas foram dezenas de milhares de pinturas obtidos ilegalmente no valor de pelo menos US $ 10.000. Isso é um preço muito alto a pagar por estas pinturas mudos.

Descrição:  Margem e padding pode ser encontrado na paleta Posição do painel de Estilo. Adicionando Margem irá adicionar espaço fora de um bloco, e adicionando estofamento irá adicionar espaço dentro de um bloco.
Adicionar espaçamento-se
Notícias de Última Hora

Agentes federais Raid Gunshop, encontrar armas

proprietário da loja Steve Witmere anteriormente detidos para negociação blackmarket bazuca. Confessa envolvimento na máfia russa.

Entre as numerosas bazucas encontrados na loja de armas foram dezenas de milhares de pinturas obtidos ilegalmente no valor de pelo menos US $ 10.000. Isso é um preço muito alto a pagar por estas pinturas mudos.

DICA:  Comece por adicionar preenchimento de todos os lados do bloco de cinza principal (elemento pai). Em seguida, adicione margem inferior para adicionar espaçamento entre os elementos de texto individuais (crianças elementos). Sugestão: segure a tecla Shift enquanto estiver usando o controle de margem / estofo para aplicar-se a todos os lados e ALT para aplicar também para o lado oposto.
"display: block 'exemplos

Esta rubrica está definido como display: block

Este parágrafo é definido para display: block. Assim, ele preenche a largura da janela pai e empilha em cima de outros blocos. 

Botão com display: blockbotão com display: blockEste link está definido como display: blockEste link está definido como display: block
Descrição:  Definindo elementos Indicação Ajuste para Block fará com que eles pilha em cima uns dos outros e encher 100% da largura do seu bloco pai. A maioria dos elementos realmente tem esta configuração por padrão. 
Torná-los "display: block 'a si mesmo
Este é um botãoEste é um botãoAs ligações são display: inline por padrãoAs ligações são display: inline por padrão
DICA:  Escolha estes elementos (alguns são bloco alinhado e alguns são inline) e torná-los display: block para que eles pilha em cima uns dos outros. 
"Display: inline-block 'exemplo
Descrição:  Definindo elementos Indicação Ajuste de inline-block fará a largura do bloco estar de acordo com a largura do conteúdo dentro dela. Isso significa que, se o seu conteúdo é suficientemente pequena que pode empilhar ao lado do outro. Você pode copiar e colar os botões acima e editar o texto para dentro para ver como ele funciona.
torná-los inline-block-se
DownloadEdit
DICA:  Selecione os elementos acima e torná-los display: inline-block para que eles pilha ao lado do outro. Você verá que as imagens da pilha ao lado dos botões. Dica: Soltando os botões e imagens em blocos separados Div fará com que eles pilha em cima uns dos outros (porque Div blocos são display: block por padrão).
flutuar exemplo

Junte-se a nossa newsletter

Obrigado! Sua submissão foi recebida!

Ops! Algo deu errado ao enviar o formulário :(

Descrição:  Definir display: inline-bloco ou flutuante (neste exemplo) são as formas mais comuns para empilhar lado elementos a lado. Neste exemplo, eu vou lhe mostrar como a flutuar alguma coisa. 
Flutuar-lo sozinho

Junte-se a nossa newsletter

Obrigado! Sua submissão foi recebida!

Ops! Algo deu errado ao enviar o formulário :(

DICA:  Primeiro, selecione o campo de texto, torná-lo float: left e dar-lhe uma largura percentual (ex: 60%). Em seguida, defina o botão para float: left bem e definir outra largura percentual (ex: 40%), de modo que ambos somam 100%. Essa é uma maneira manual para forçar qualquer elemento para empilhar lado a lado. 
Absoluto Exemplo Posição

My Cup of Joe

Este é um texto legenda da foto.

Descrição:  Se você definir Posição para Absolute em um elemento, você será capaz de posicioná-lo em qualquer lugar dentro de seu bloco pai. Para escolher qual dos pais para posicionar dentro de, definir a posição do elemento pai para relativo. Nota: Quando os elementos são absolutos posicionado eles flutuam acima de outros elementos.
Estilo It Yourself

My Cup of Joe

Esta é uma legenda da foto para o meu copo favorito de Joe.

DICA:  Primeiro selecione o elemento Wrapper imagem e definir a posição relativa. Em seguida, selecione a legenda, arrastá-lo para a imagem definida a sua posição para Absolute e escolher a 7ª predefinido. Para posicionar o emblema Destaque para o local correto escolher o segundo pré-definida e posicioná-lo manualmente.
# 5  Cascading Style

Utilizando os estilos em cascata

Você pode facilmente criar variações de um elemento adicionando classes adicionais em cima do outro e adicionando estilos diferentes sobre essas classes. Confira o exemplo abaixo, onde temos diferentes variações de um botão. 

Compartilhado exemplo estilos de botão
Botão NORMAL
botão verde
botão vermelho
Botão NORMAL
Projetar os botões yourself
botão verde
botão vermelho
DICA:  Selecione o segundo botão e clique no [+] ao lado da classe para adicionar outra classe. Você pode chamá-lo de "Green". Em seguida, dar-lhe diferentes estilos. Esses estilos substituirão os estilos base da primeira classe. Em seguida, crie o botão Vermelho. 
# 6 consultas de mídia

Projetando para dispositivos diferentes

Em Webflow primeiro você projetar seu site para dispositivos desktop e, em seguida, fazer alterações em dispositivos móveis (acessar os ícones do dispositivo na barra superior). Adição de estilos em um dispositivo móvel irá substituir os estilos de desktop. 

exemplo rubrica Responsive

Este é um texto de título que fica menor em dispositivos móveis.

Descrição:  Esta posição é realmente grande no ambiente de trabalho, mas queremos que ele seja menor em dispositivos móveis. Clique nos dispositivos na barra superior para ver que o tamanho do texto e linha de altura foi reduzida.
Corrigi-lo sozinho

Faça deste texto grande título ficam menores em dispositivos móveis.

DICA:  Selecione esta rubrica no dispositivo Tablet e fazer o tamanho da fonte e altura da linha menor. Faça o mesmo para dispositivos Paisagem telefone e Retrato Phone. Você pode ver que o 
exemplo Botão Responsive
Texto do botão
Descrição:  Este botão é para ser pequena em telas de desktop, porque é fácil para clicar com o cursor do mouse. Fizemos isso maior em dispositivos móveis de modo que é mais fácil de tocar com o dedo
Texto do botão
Corrigi-lo sozinho
DICA:  Vá para o dispositivo de Tablet e aumentar o preenchimento do botão. Quando você faz isso ele irá substituir os estilos anteriores estabelecidas no ambiente de trabalho e em cascata para todos os dispositivos abaixo Tablet. 
Colunas Responsive exemplo

coluna 1

Este é um texto dentro de um bloco div.

coluna 2

Este é um texto dentro de um bloco div.

coluna 3

Este é um texto dentro de um bloco div.
Descrição:  As colunas de elemento em Webflow pode ser personalizado para cada dispositivo. Por colunas padrão pilha ao lado do outro em Desktop e pilha em cima uns dos outros em dispositivos móveis. 

coluna 1

Este é um texto dentro de um bloco div.

coluna 2

Este é um texto dentro de um bloco div.

coluna 3

Este é um texto dentro de um bloco div.
Corrigi-lo sozinho
DICA:  Selecione uma coluna ou elemento de linha acima (você também pode usar a barra de navegação na parte inferior ou no painel Navigator à direita para encontrá-lo), vá para as configurações do elemento (ícone de engrenagem no canto superior direito) e certifique-se a colunas pilha em dispositivos móveis.
# 7 Recursos

Precisa de mais ajuda?

Você entendeu! Há toneladas de pessoas aprendendo Webflow e web design todos os dias. Um ótimo lugar para começar é os tutoriais em vídeo. Em seguida, sobre a cabeça em centro de apoio ou fórum da comunidade. 

Tutoriais de vídeo

tutorials.webflow.com

(Você pode clicar nos links acima, entrando no modo de visualização - o ícone do olho no canto superior esquerdo)