Ir para conteúdo principal

Ajustando espaçamento do cabeçalho (inclui: espaçamento superior, espaçamento inferior)

Controle o espaçamento e a altura do cabeçalho do site para combinar com suas preferências de design.

Ajustando espaçamento do cabeçalho (inclui: espaçamento superior, espaçamento inferior)

Controle o espaçamento e a altura do cabeçalho do site para combinar com suas preferências de design.
​

O espaçamento do cabeçalho controla o espaço acima e abaixo do conteúdo do cabeçalho. Ajustá-lo muda quanto respiro seus nomes, logo e data do casamento têm, afetando a aparência geral do site!
​

O que é o espaçamento do cabeçalho?

Espaçamento é o espaço entre o conteúdo do cabeçalho (nomes ou logo, data do casamento e botão de RSVP) e as bordas da área do cabeçalho. O menu de navegação e a imagem do cabeçalho ficam fora dessa área e não são afetados.
​

Espaçamento superior: Espaço acima do conteúdo do cabeçalho
​

Espaçamento inferior: Espaço abaixo do conteúdo do cabeçalho
​

Mais espaçamento = cabeçalho maior e mais amplo
Menos espaçamento = cabeçalho compacto e enxuto
​

Por que ajustar o espaçamento do cabeçalho?

Equilíbrio visual. Alguns cabeçalhos parecem apertados, outros espaçosos demais.
​

Combine com seu estilo. Casamentos elegantes podem pedir mais espaço; casamentos descontraídos, menos.
​

Otimização para celular. O espaçamento acompanha a largura da tela, então fica automaticamente menor nos celulares.
​

Tamanho do logo. Se você tem um logo, mais espaçamento dá espaço para ele respirar.
​

Preferência pessoal. Talvez você simplesmente goste de como fica uma certa quantidade de espaçamento!
​

Como ajustar o espaçamento do cabeçalho

  1. Vá para Site na navegação principal

  2. Clique no ícone de configurações para abrir Configurações do site

  3. Clique na aba Cabeçalho no topo

  4. Encontre o controle Espaço acima e arraste para ajustar o espaço acima do conteúdo do cabeçalho

  5. Encontre o controle Espaço abaixo e arraste para ajustar o espaço abaixo do conteúdo do cabeçalho

  6. Cada controle varia de Menos a Mais

  7. Clique em Salvar alterações

O espaçamento do cabeçalho atualiza imediatamente!
​

Valores de espaçamento

O espaçamento é definido como uma porcentagem da largura da tela, e não em pixels. Cada controle se move em 12 passos, de nenhum espaçamento em Menos até cerca de 30% da largura da tela em Mais.
​

Perto de Menos: Compacto, mínimo
​

No meio: Confortável, padrão
​

Perto de Mais: Amplo, um cabeçalho de impacto
​

Ajustando superior e inferior de forma independente

Superior e inferior são definidos separadamente, então você pode usar valores diferentes:
​

Mais em cima, menos embaixo: Empurra o conteúdo para baixo a partir do topo
​

Mais embaixo, menos em cima: Cria espaço antes de o conteúdo da página começar
​

Iguais: Visual centralizado e equilibrado
​

Diferentes: Assimétrico, pode criar efeitos interessantes
​

Experimente para ver o que fica melhor!
​

Quando usar mais espaçamento

Logos grandes: Dê espaço para eles brilharem
​

Designs minimalistas: Espaço em branco extra transmite elegância
​

Visualização no computador: Telas maiores comportam mais espaçamento
​

Para causar impacto: Muito espaçamento cria um visual ousado e confiante
​

Quando usar menos espaçamento

Celulares: Economize espaço em telas pequenas
​

Sites com muito conteúdo: Chegue ao conteúdo mais rápido
​

Temas minimalistas: Alguns temas são pensados com pouco espaçamento
​

Testando o espaçamento

Depois de ajustar:
​

  1. Veja o site ao vivo para conferir o resultado
    ​

  2. Verifique páginas diferentes para garantir consistência
    ​

  3. Teste no celular - o espaçamento afeta os celulares de forma diferente
    ​

  4. Peça opiniões - pergunte a alguém se parece equilibrado
    ​

Ajustes de espaçamento para celular

Não há uma configuração separada para celular. Como o espaçamento é uma porcentagem da largura da tela, a mesma configuração gera um cabeçalho amplo nos computadores e um menor nos celulares, automaticamente.
​

Espaçamento com imagens de cabeçalho

A imagem do cabeçalho fica acima da área com espaçamento, então o espaçamento não altera o tamanho dela. Se você adicionou um Fundo do cabeçalho, ele preenche a área com espaçamento; assim, mais espaçamento mostra mais do fundo ao redor dos seus nomes.
​

Espaçamento com menus de navegação

O menu de navegação é separado do cabeçalho, então o espaçamento do cabeçalho não o altera.
​

Design responsivo

O espaçamento do cabeçalho é responsivo em todos os temas: é uma porcentagem da largura da tela, então se ajusta automaticamente ao tamanho da tela.
​

Peso visual

O espaçamento afeta quão "pesado" o cabeçalho parece:
​

Mais espaçamento = mais leve, mais arejado
​

Menos espaçamento = mais denso, mais compacto
​

Combine com a sensação que você quer que os convidados tenham ao visitar seu site!
​

Alinhamento e centralização

O espaçamento trabalha junto com o alinhamento para criar o visual do cabeçalho:
​

Conteúdo centralizado + muito espaçamento: Elegante, formal
​

Conteúdo alinhado à esquerda + pouco espaçamento: Moderno, limpo
​

Centralizado + pouco espaçamento: Compacto, eficiente
​

Erros comuns de espaçamento

Demais: O cabeçalho ocupa metade da tela antes de os convidados verem qualquer conteúdo
​

De menos: O cabeçalho parece apertado e difícil de ler
​

Desequilibrado: Espaçamentos superior e inferior muito diferentes sem motivo
​

Não testar no celular: Fica ótimo no computador e péssimo nos celulares
​

Unidades de espaçamento

Os controles não mostram uma unidade. Por trás, o espaçamento é uma porcentagem (%) da largura da tela, e é por isso que ele se ajusta em telas menores.
​

Espaçamento vs. margem

Espaçamento: Espaço dentro do cabeçalho (ao redor do conteúdo)
​

Margem: Espaço fora do cabeçalho (entre o cabeçalho e outros elementos)
​

Esses controles ajustam o espaçamento, ou seja, o espaço dentro do cabeçalho. Não há configuração de margem do cabeçalho.
​

Espaçamento padrão

Se estiver em dúvida:
​

Comece pela configuração atual
​

Ajuste aos poucos (um ou dois passos do controle por vez)
​

Anote onde os controles estavam no início, já que não há botão para redefini-los
​

Cabeçalhos fixos e espaçamento

O espaçamento do cabeçalho permanece o mesmo enquanto os convidados rolam a página.
​

Acessibilidade

O espaçamento não altera o tamanho de botões ou links, então não deixa nada mais difícil de tocar
​

Espaçamento demais empurra o conteúdo para baixo, fazendo os convidados rolarem mais nos celulares
​

Equilibre estética e usabilidade!
​

O espaçamento do cabeçalho é um detalhe sutil que faz uma grande diferença em quão caprichado e profissional o site parece. Vale a pena dedicar alguns minutos para acertar!
​

Artigos relacionados

Isto respondeu à sua pergunta?