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
Vá para Site na navegação principal
Clique no ícone de configurações para abrir Configurações do site
Clique na aba Cabeçalho no topo
Encontre o controle Espaço acima e arraste para ajustar o espaço acima do conteúdo do cabeçalho
Encontre o controle Espaço abaixo e arraste para ajustar o espaço abaixo do conteúdo do cabeçalho
Cada controle varia de Menos a Mais
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:
Veja o site ao vivo para conferir o resultado
Verifique páginas diferentes para garantir consistência
Teste no celular - o espaçamento afeta os celulares de forma diferente
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!
