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

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: block botão com display: block Este link está definido como display: block Este 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ão Este é um botão As ligações são display: inline por padrão As 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

Baixar Editar Apagar

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

baixar Editar

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

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

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.

Destaque

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.

Destaque

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

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