Entao rápido Você é Novo Pará Webflow, hein? Vamos mergulhar em.

Guia Visual Web Design

Este Guia IRA visuais Orienta-lo atraves de IMPORTANTES Conceitos de web design responsivo e Como IMPLEMENTAÇÃO-los visualmente Dentro Webflow.

# 1 O modelo de Caixa

Estrutura website Entendimento

De Todos os Elementos Desta page São de Todos os blocos Dentro de Outros blocos (aka "Box Modelo"). Ao arrastar Elementos da web, rápido você arrasta-los de hum bloco e Deixa-los em Outro. E ASSIM Que Funciona HTML!

Super plano

$ 75 / mon

Perfeito parágrafo QUALQUÉR 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 rápido Você Vê

Nota: Voce vai entendre Como Projetar algo ASSIM COM OS Conceitos Abaixo.

O Que Blocos E Feito de

Div Bloco

Rubrica H2 super-PLAN

Text Block $ 75 / mon

Paragrafo Perfeito de para QUALQUÉR NEGOCIO COM Empregados MAIS 20 OU.

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 como characteristics sem limitações quanto. Tudo Que rápido você PODE comer. (Este e Um elemento de Paragrafo)

DICA: . Clique e arraste o elemento Paragrafo Acima e Deixa-la soluço o Preço à Direita rápido 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 soluço hum Ao Outro Dentro OU Do Outro Essa è A Melhor Maneira de Construir site da UM e fluido e responsivo.

# 2 Elementos de esquema

Elementos Básicos de disposição

Seu site de Elementos Adicionar ao, Clicando nenhuma Ícone [+] no Canto esquerdo superior. Abaixo estao Alguns dos Elementos Básicos Mais Estrutura em web design - Seções, Recipientes e Colunas.

A Seção Ocupa 100% da Largura da Janela do Navegador rápido você se adicioná-lo Ao Corpo (uma tela de hum local).
E Ótimo parágrafo Os Grandes Seções Horizontais de hum local.

Seção Elemento

Um Recipiente e Um bloco 960px CENTRADO nenhuma Meio do Navegador. Normalmente, a maioria Conteúdo do site de e adicionado Dentro de hum 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 hum disposição de local exclusivo. Para Editar Quantas Colunas rápido Você Quer em Diferentes Dispositivos, basta Clicar Sobre o Ícone da Engrenagem não Canto direito superior, parágrafo Acessar como configurações do elemento.

Colunas Responsive

# 3 Projetar com CSS

Styling SEUS Elementos

Selecione hum elemento e adicionar Uma classe não Painel estilo Direito (Ícone de pincel). Neste Painel, rápido você PODE adicionar o texto e Estilos Gráficos Como cor de fonte, altura da Linha, gradientes, Fronteiras, sombras, e MUITO MAIS. web design Visual E MUITO MAIS divertido fazer that de codificação Certo?

Botão Exemplo de Projeto

Adicionar Ao Carrinho ➜

Denominador-lo Você Mesmo

Texto do Botão ➜

DICA: . "Button" Este Botão Já TEM UM 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 parágrafo OS Estilos em foco - Tudo utilizando o Painel de estilo.

O QUE CRIOU rápido você

Texto do Botão ➜

aplicar uma classe "Botão"

Texto do Botão

DICA: . Na web design rápido você PODE aplicar Uma classe de muitos elementos para Torna-los o MESMO Olhar Aplicar uma classe "botão" que rápido você estilo PARA O elo Acima Clicando no [+] na parte Superior do Painel de Estilo e Digitando "Botão "para Encontrar ESSA classe.

Design faça Exemplo Formulário

Obrigado!

Seu Minhas rocha Meias!

Ops! Aconteceu hum Erro ao enviar o Formulário :(

Denominador-lo Você Mesmo

! Obrigado Sua SUBMISSÃO recebida foi!

Ops! Aconteceu hum Erro ao enviar o Formulário :(

DICA: . aulas CRIAR Primeira parágrafo OS campos de texto e Botão (aplicar uma MESMA classe parágrafo Ambos OS campos) Em SEGUIDA, change Estilos de borda, cor de Fundo e adicionar Estilos de para a pairar & ESTADOS pressionados. de: Não se esqueça de pentear o estado "Sucesso" para o elemento de Formulário, Encontrado sem Painel de configurações (Ícone de Engrenagem não Canto direito Superior).

Exemplo Tipografia

Lakewood Stout

A cerveja Escura de Lakewood, Colorado

O stout lendário Nasceu fóruns fazer matrimonio bonita de um homem de montanha e Seu amado Coisa Mais, A Cidade de Lakewood, Colorado nenhum. O homem da Montanha also amava Seu Machado EO Seu Único tiro rifle Remington, Mas Não tanto Quanto ELE amava SUA Cidade . He sonhava com SEUS rios flowy e majestosas Montanhas. ASSIM, ELE nomeou Seu Maior stout Atrás dela. ASSIM, o glorioso stout Nasceu fóruns do Coração de um homem da Montanha.

"Eu trabalhada ESTA gloriosa cerveja parágrafo expressar meu amor eterno Por minha bela Cidade".

- Homem Montanha

Denominador-lo Você Mesmo

Lakewood Stout

A cerveja Escura de Lakewood, Colorado

O stout lendário Nasceu fóruns fazer matrimonio bonita de um homem de montanha e Seu amado Coisa Mais, A Cidade de Lakewood, Colorado nenhum. O homem da Montanha also amava Seu Machado EO Seu Único tiro rifle Remington, Mas Não tanto Quanto ELE amava SUA Cidade . He sonhava com SEUS rios flowy e majestosas Montanhas. ASSIM, ELE nomeou Seu Maior stout Atrás dela. ASSIM, o glorioso stout Nasceu fóruns do Coração de um homem da Montanha.

"Eu trabalhada ESTA gloriosa cerveja parágrafo 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 rápido você adicionar Estilos de tipografia parágrafo hum pai bloco, todos OS SEUS Elementos de texto Filhos herdarão aqueles Estilos de texto Em CSS ESSE Comportamento E Chamado "cascata" de.

# 4 de esquema com CSS

Layouts Edificio da web com CSS

Semelhante a adicionar um estilo hum elemento, Change to the posição de hum Primeiro elemento de adicionar Uma classe e, em SEGUIDA, como Editar Propriedades de posição. Voce vai Aprender Sobre Margem, Enchimento, Display, Float, estouro, e posição.

Margem & Enchimento Exemplo

Últimas Notícias

Agentes Federais Raid Gunshop, Encontrar armas

Proprietário da Loja Steve Witmere anteriormente detidos parágrafo Negociação bazuca blackmarket. Confessa uma Participação na máfia russa.

Entre Numerosas como bazucas encontrados não Gunshop were dezenas de milhares de pinturas obtidos ilegalmente sem valor de Pelo Menos US $ 10,000. ISSO e hum Preço Muito alto um Pagar POR essas pinturas idiotas.

Descrição: Margem e preenchimento PODE Ser encontrada na paleta Posição do Painel de Estilo. Adicionando Margem IRA adicionar Espaço fóruns de hum bloco, e adicionando Padding IRA adicionar Espaço Dentro de hum bloco.

Adicionar espaçamento-se

Últimas Notícias

Agentes Federais Raid Gunshop, Encontrar armas

Proprietário da Loja Steve Witmere anteriormente detidos parágrafo Negociação bazuca blackmarket. Confessa uma Participação na máfia russa.

Entre Numerosas como bazucas encontrados não Gunshop were dezenas de milhares de pinturas obtidos ilegalmente sem valor de Pelo Menos US $ 10,000. ISSO e hum Preço Muito alto um Pagar POR essas pinturas idiotas.

DICA: COMECE POR adicionar preenchimento de Todos os Lados do diretor cinza bloco (elemento pai). Em SEGUIDA, adicione Margem parágrafo inferior adicionar espaçamento between OS Elementos de texto indivíduos (Crianças Elementos). Dica: segure a tecla Shift enquanto a Tecla estiver usando o Controle Margem de / estofo parágrafo aplicar-se a todos OS Lados e ALT parágrafo aplicar TAMBÉM PARA O Lado oposto.

'display: block' examples

This exibição Rubrica ESTÁ Definido parágrafo: Bloco

Este Paragrafo E Definido parágrafo display:. Bloco ASSIM, ELE preenche uma Largura da Janela pai e empilha em Cima de página Outros blocos.

Botão exibição com: bloco Botão com display: block ligação Este visor ESTÁ Definido parágrafo: Bloco ligação Este visor ESTÁ Definido parágrafo: Bloco

Descrição: configuracao Indicação ajuste "elementos para Bloco Fara com that they Pilha Em Cima uns dos Outros e Encher 100% da Largura de Seu bloco pai. A maioria dos Elementos Realmente TEM ESSA configuracao POR Padrão.

Torna-los "display: block 'a si MESMO

Este e Um Botão Este e Um Botão Os liga São exibição: inline POR Padrão Os liga São exibição: inline POR Padrão

Dica: ESCOLHA Estes Elementos (Alguns São em Linha Bloco E Alguns São in-line) e Torna-los display: block Para Que enguias Pilha Em Cima uns dos Outros.

"Display: inline-block 'Exemplo

Baixe Editar apagar

Descrição: configuracao Visor ajuste "Elementos de inline-block Fara uma Largura do Bloco em conformidade com a Largura do conteudo nenhuma interior Seu. ISSO Significa Que, se o Seu Conteúdo E suficientemente Pequeno Que PODE empilhar Ao lado do Outro. rápido Você PODE Copiar e colar OS BOTÕES Acima e Editar o texto para Dentro para Ver Como Funciona ELE.

Torna-los inline-bloco-se

Baixe Editar

DICA: Selecione OS Elementos Acima e faze-los display: inline-block Para Que enguias Pilha Ao lado do Outro. rápido Você Verá como that Imagens da Pilha Ao lado dos BOTÕES. Dica: Soltando OS BOTÕES e Imagens em blocos Separados Div Fara com that enguias Pilha Em Cima uns dos Outros (Porque exibição São Div Blocos: Bloco POR Padrão).

Exemplo Float

! Obrigado Sua SUBMISSÃO recebida foi!

Ops! Aconteceu hum Erro ao enviar o Formulário :(

Descrição: Definir display:. inline-bloco OU flutuante (Exemplo Neste) São como Formas Mais Comuns parágrafo empilhar Elementos Lado a Lado Neste Exemplo eu vou LHE Mostrar Como algo a flutuar.

Float-lo Sozinho

! Obrigado Sua SUBMISSÃO recebida foi!

Ops! Aconteceu hum Erro ao enviar o Formulário :(

DICA: Primeiro, selecione o campo de texto, FAÇA-float: esquerda e dar-LHE Uma Largura percentual. (ex: 60%) Em SEGUIDA, DeFina o Botão parágrafo float: left Bem E Definir Outra Largura percentual (ex: 40% ) Modo de that Ambos somam 100%. Essa E UMA Maneira parágrafo manual do FORCAR parágrafo QUALQUÉR elemento empilhar Lado a Lado.

Posição Absoluta Exemplo

Meu copo de Joe

Este e Um texto de legenda da foto.

Destaque

Descrição: Se rápido você Definir uma posição absoluta de hum elemento, Voce vai Ser Capaz de posicioná-lo em Qualquer Lugar Dentro de Seu bloco pai. Para escolher qua dos pais parágrafo posicionar Dentro de, Definir a posição do elemento pai Como Relativo. Nota: QUANDO OS Elementos São ABSOLUTOS posicionado enguias flutuam Acima de Outros Elementos.

Estilo It Yourself

Meu copo de Joe

This E UMA legenda da foto parágrafo o meu copo favorito de Joe.

Destaque

DICA: . Primeiro selecione o elemento Wrapper Imagem e Definir uma posição Relativa Em SEGUIDA, selecione a legenda, arrasta-lo para à Imagem Definida E uma posição absoluta e escolher o Sétimo predefinido. Para posicionar o emblema Destaque PARA O Correto locais escolher um Segunda e preset Manualmente posicioná-lo.

# 5 Cascading Style

Utilizando Estilos em Cascata

E possivel CRIAR UM fácilmente Elemento de Variações atraves de da adição de aulas Adicionais Em Cima uns dos Outros e adicionando Diferentes Estilos em dessas classes. Confira o Exemplo Abaixo, Onde TEMOS Diferentes Variações de hum 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 do Botão e clique no [+] Ao lado da classe Para adicionar Outra classe . rápido Você PODE Chamá-lo de "Green" . Em SEGUIDA, dar-LHE Diferentes Estilos ESSES Estilos Vao substituir OS Estilos de base de da Primeira classe. Em SEGUIDA, CRIE o Botão Vermelho.

# 6 Consultas de Mídia

Projetando parágrafo Diferentes Dispositivos

Em Webflow rápido você Projetar Seu Site em Primeiro Lugar para Dispositivos de área de trabalho e, em SEGUIDA, Fazer alterações nºs Dispositivos Móveis (Acessar Icones OS não Dispositivo na barra Superior). Adicionando Estilos em Um Dispositivo Móvel IRA substituir OS Estilos de desktop.

Exemplo Rubrica Responsive

Este e Um texto de título that FICA menor em Dispositivos Móveis.

Descrição: . This Rubrica E Realmente Grande Nenhuma ambiente de Trabalho, mas NÓS Queremos Que ELA SEJA menor em Dispositivos Móveis Dispositivos camarilha Nós na Barra para ver superiores that o texto TAMANHO fazer eA Linha de altura foi reduzida.

Corrigi-lo Sozinho

Faca de este grandioso texto de título Menores ficam EM Dispositivos Móveis.

DICA: Selecione ESTA Rubrica nenhuma Dispositivo Tablet e Fazer o TAMANHO da fonte e altura da Linha menor. FACA o MESMO parágrafo Dispositivos Paisagem e Retrato Telefone Telefone. rápido Você PODE ver that o

Botão Exemplo Responsive

Texto do Botão

Descrição: . Este Botão E Feito Para Ser Pequena em Telas da área de Trabalho Porque É Fácil de carregar com o cursor do mouse fazer o Nós fizemo-lo em Dispositivos Móveis Maior 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 O Que Você faz ELE IRA substituir OS Estilos Anteriores fixadas no Ambiente de Trabalho e em Cascata Dispositivos Para Todos OS Abaixo Tablet.

Colunas Exemplo Responsive