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

Guia Visual Web Design

Este guia visual irá orientá-lo através de importantes conceitos de web design responsivo e como implementá-las 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 Model"). Ao arrastar elementos da web, você arrastá-los a partir 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

Texto Bloco $ 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 ...

Todos os recursos sem as limitações. Tudo 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), copiar enquanto arrasta (segurando alt) e delete (tecla delete).

Into the bloco roxo ...

Super plano

$ 75 / mon

INFO: Isto é como HTML e web estrutura funciona - elementos da 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 layout básico

Adicione elementos para o 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 website.

Seção Elemento

A Container é um bloco 960px centrado no meio do browser. Normalmente, a maioria conteúdo do site é adicionado dentro de um recipiente de forma 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 no ícone da 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 (ícone de pincel). Neste painel, você pode adicionar o 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 a codificação certo?

botão exemplo de projeto

Adicionar ao carrinho ➜

Estilo it yourself

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, fronteira, cantos arredondados, dentro / fora, sombras pairam 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 torná-los o mesmo olhar. Aplicar a classe "Button" que você estilo para o link acima, clique 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 :(

Estilo it yourself

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 estilizar 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

A stout lendário nasceu do belo matrimônio de um homem e sua montanha mais amado coisa, a cidade de Lakewood, no Colorado. O homem da montanha também adorava o seu machado e seu single-shot Remington rifle, mas não tanto quanto ele amava sua cidade. Ele sonhava com seus rios flowy e majestosas montanhas. 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

Estilo it yourself

Lakewood Stout

A cerveja escura de Lakewood, Colorado

A stout lendário nasceu do belo matrimônio de um homem e sua montanha mais amado coisa, a cidade de Lakewood, no Colorado. O homem da montanha também adorava o seu machado e seu single-shot Remington rifle, mas não tanto quanto ele amava sua cidade. Ele sonhava com seus rios flowy e majestosas montanhas. 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 adicionar tipografia e estilos personalizada para o fundo. Ponta fria: Se você adicionar estilos de tipografia para um bloco pai, todos os seus elementos de texto filhos herdarão esses estilos de texto. Em CSS esse comportamento é chamado de "cascata".

# 4 de layout com CSS

Layouts Edifício web com CSS

Semelhante ao 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.

Margin e Padding exemplo

Últimas Notícias

Agentes federais Raid Gunshop, encontrar armas

Proprietário da loja Steve Witmere sido detido para negociação blackmarket bazuca. Confessa envolvimento na máfia russa.

Entre as inúmeras 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 essas pinturas idiotas.

Descrição: Margin 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.

Adicione-se o espaçamento

Últimas Notícias

Agentes federais Raid Gunshop, encontrar armas

Proprietário da loja Steve Witmere sido detido para negociação blackmarket bazuca. Confessa envolvimento na máfia russa.

Entre as inúmeras 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 essas pinturas idiotas.

DICA: Comece por adicionar o 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 número está 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 do 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 As ligações são display: inline por padrão Os links são display: inline por padrão

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

"Display: inline-block 'exemplo

Baixe Editar Excluir

Descrição: Configuração Indicação Ajuste "elementos de Inline-bloco fará a largura do bloco em conformidade com a largura do conteúdo no seu interior. Isso significa que o seu teor é suficientemente pequeno podem 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 torná-los display: inline-block para que eles pilha ao lado do outro. Você vai 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-Block ou flutuante (neste exemplo) são as formas mais comuns de empilhar elementos lado a lado. Neste exemplo, eu vou lhe mostrar como a flutuar algo.

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 outro largura percentual (ex: 40%), de modo que ambos somam 100%. Essa é uma maneira manual para forçar qualquer elemento para empilhar lado a lado.

Absolute Position Exemplo

My Cup of 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 para Relativa. 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 o sétimo pré-definido. Para posicionar o emblema Destaque para o local correto escolher o segundo pré-definida e posicioná-lo manualmente.

# 5 de estilo em cascata

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 sobre essas classes. Confira o exemplo abaixo, onde temos diferentes variações de um botão.

Partilhada exemplo estilos de botão

Projete os botões você 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 base da primeira classe. Em seguida, crie o botão Vermelho.

# 6 consultas de mídia

Projetando para diferentes dispositivos

Em Webflow você projeta o seu primeiro site para dispositivos de 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: Este título é muito grande na área 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 e 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 telefone e Retrato Phone. Você pode ver que o

Exemplo Botão Responsive

Texto do Botão

Descrição: Este botão é feito para ser pequena em telas de desktop, porque é fácil de carregar 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 tablet e aumentar o preenchimento do botão. Quando você faz o que ele irá substituir os estilos anteriores estabelecidos na área de trabalho e vai em cascata para todos os dispositivos abaixo Tablet.

Colunas Responsive exemplo