Guia Visual Web Design

Então você é novo para Webflow, hein? Vamos mergulhar em.

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

# 1 O modelo de caixa

Estrutura website Entendimento

Todos os elementos desta página são todos os blocos dentro de outros blocos (aka "Box Modelo"). Ao arrastar elementos da web, você arrastá-los de um bloco e deixá-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
Prêmio de Apoio

O que você vê

Nota: Você vai entender como projetar algo assim com os conceitos abaixo.

O que Blocks É 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
Prêmio de Apoio

tente você mesmo

Arraste este ponto ...

Todas as características sem as limitações. Tudo o que você pode comer. (Este é um elemento de 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), enquanto arrasta copiar (segurando alt), e apagar (delete).

No bloco roxo ...

Super plano

$ 75 / mon

INFO: Isto é como HTML e web estrutura funciona - elementos pilha sob um ao outro ou dentro do outro. Essa é a melhor maneira de construir um site 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 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 os grandes seções horizontais de um site.

Seção Elemento

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

Container Elemento

Adicionando colunas são o caminho mais rápido para construir um layout de site exclusivo. Para editar quantas colunas você quer em diferentes dispositivos, basta clicar sobre o ícone da engrenagem no canto superior direito para acessar as configurações do elemento.

Colunas Responsive

# 3 projetar com CSS

Styling seus elementos

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

botão exemplo de projeto

Adicionar ao carrinho ➜

Denominá-lo você mesmo

Texto do botão ➜

DICA: Este botão já tem um "Button" classe com alguns estilos básicos. Selecione o botão e tente adicionar o gradiente, beira, cantos arredondados, dentro / fora, sombras pairam estilos de estado e transição para os estilos em foco - tudo utilizando 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 torná-los o mesmo olhar. Aplicar a classe "Button" que você estilo para o link acima clicando no [+] na parte superior do painel de Estilo e digitando "Button" para encontrar essa classe.

Design do formulário exemplo

Obrigado!

Seu rocha minhas meias!

Ops! Aconteceu um erro ao enviar o formulário :(

Denominá-lo você mesmo

Obrigado! Sua apresentação foi recebido!

Ops! Aconteceu um erro 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 (ícone de engrenagem no canto superior direito).

Exemplo Tipografia

Lakewood Stout

A cerveja escura de Lakewood, Colorado

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

"Eu trabalhada esta gloriosa cerveja para expressar meu amor eterno por minha bela cidade."

- Homem Montanha

Denominá-lo você mesmo

Lakewood Stout

A cerveja escura de Lakewood, Colorado

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

"Eu trabalhada esta gloriosa cerveja para expressar meu amor eterno por minha bela cidade."

- Homem Montanha

DICA: Vá em frente e adicione tipografia e estilos feitos sob encomenda para o fundo. Ponta fria: Se você adicionar estilos de tipografia para um bloco pai, todos os seus elementos de texto filhos herdarão aqueles estilos de texto. Em CSS esse comportamento é chamado de "cascata".

# 4 de layout com CSS

Layouts edifício da web com CSS

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

Margem & Padding exemplo

Últimas Notícias

Agentes federais Raid Gunshop, encontrar armas

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

Entre as numerosas bazucas encontrados no Gunshop 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 essas pinturas idiotas.

Descrição: Margem e padding pode ser encontrada na paleta Posição do painel de Estilo. Adicionando Margem irá adicionar espaço fora de um bloco, e adicionando Padding irá adicionar espaço dentro de um bloco.

Adicionar espaçamento-se

Últimas Notícias

Agentes federais Raid Gunshop, encontrar armas

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

Entre as numerosas bazucas encontrados no Gunshop 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 essas pinturas idiotas.

DICA: Comece por adicionar preenchimento de todos os lados do principal bloco cinza (elemento pai). Em seguida, adicione margem inferior para adicionar espaçamento entre os elementos de texto individuais (crianças elementos). Dica: 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 para 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 para display: block Este link está definido para display: block

Descrição: Configuração Indicação Ajuste "elementos para Block fará com que eles pilha em cima uns dos outros e encher 100% da largura de seu bloco pai. A maioria dos elementos realmente tem essa configuração por padrão.

Torná-los "display: block 'a si mesmo

Este é um botão Este é um botão Os links são display: inline por padrão Os links são display: inline por padrão

DICA: Escolha estes elementos (alguns são em linha Block e alguns são in-line) e torná-los display: block para que eles pilha em cima uns dos outros.

"Display: inline-block 'exemplo

Baixe Editar Apagar

Descrição: Configuração Visor Ajuste "elementos de inline-block fará a largura do bloco em conformidade com a largura do conteúdo no seu interior. Isso significa que, se o seu conteúdo é suficientemente pequeno 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

Baixe Editar

DICA: Selecione os elementos acima e fazê-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).

Float exemplo

Obrigado! Sua apresentação foi recebido!

Ops! Aconteceu um erro ao enviar o formulário :(

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

Float-lo sozinho

Obrigado! Sua apresentação foi recebido!

Ops! Aconteceu um erro ao enviar o formulário :(

DICA: Primeiro, selecione o campo de texto, faça-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.

Posição Absoluta Exemplo

Meu copo de Joe

Este é um texto de legenda da foto.

Destaque

Descrição: Se você definir a posição absoluta de um elemento, você vai 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 como Relativo. Nota: Quando os elementos são absolutos posicionado eles flutuam acima de outros elementos.

Estilo It Yourself

Meu copo de 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 posição absoluta e escolher o sétimo predefinido. Para posicionar o emblema Destaque para o local correto escolher a segunda preset e posicioná-lo manualmente.

# 5 Cascading Style

Utilizando Estilos em Cascata

É possível criar facilmente um elemento de variações através da adição de classes adicionais em cima uns dos outros e adicionando diferentes estilos em dessas classes. Confira o exemplo abaixo, onde temos diferentes variações de um botão.

Compartilhado exemplo estilos de botão

Projete os botões de si mesmo

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 vão substituir os estilos de base da primeira classe. Em seguida, crie o botão Vermelho.

# 6 consultas de mídia

Projetando para diferentes dispositivos

Em Webflow você projetar seu site em primeiro lugar para dispositivos de desktop e, em seguida, fazer alterações nos dispositivos móveis (acessar os ícones do dispositivo na barra superior). Adicionando 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 rubrica é realmente grande no ambiente de trabalho, mas nós queremos que ela seja menor em dispositivos móveis. Clique nos dispositivos na barra superior para ver que o tamanho do texto ea linha de altura foi reduzida.

Corrigi-lo sozinho

Faça este grande texto de 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 e Retrato Telefone Telefone. Você pode ver que o

Botão exemplo Responsive

Texto do Botão

Descrição: Este botão é feito para ser pequena em telas da área de trabalho porque é fácil de carregar com o cursor do mouse. Nós fizemo-lo 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 tablet e aumentar o preenchimento do botão. Quando você faz o que ele irá substituir os estilos anteriores fixadas no ambiente de trabalho e em cascata para todos os dispositivos abaixo Tablet.

Colunas Responsive exemplo