Se você está a construir um site com o Elementor e o texto „não respira bem“ ou os títulos ficam demasiado colados aos parágrafos, quase sempre se trata da interação entre line-height e margin. Ambos estão ligados, ambos são definidos separadamente na interface do Elementor — e ambos, na prática, são muitas vezes confundidos. Neste artigo percorro a lógica, mostro valores concretos que se revelaram eficazes em mais de 50 projetos e abordo as armadilhas típicas (sobretudo no mobile). Se você quiser aprofundar-se em geral no design com o Elementor, o meu artigo Top 10 dicas de design para o Elementor é o bom passo seguinte.
Requisito: Elementor 3.20+ ou mais recente. A maioria das dicas aplica-se também ao Elementor Pro — onde entram em jogo funcionalidades específicas do Pro, eu indico-o.
Line-height vs. margin: onde está a diferença
Dois conceitos relacionados, mas distintos:
O line-height é o espaço dentro de um bloco de texto — entre duas linhas do mesmo parágrafo. Se o seu body text parecer „comprimido“, o line-height é o parafuso a ajustar.
A margin é o espaço entre elementos — por exemplo entre um parágrafo e o título seguinte. Se dois parágrafos „estão colados“ ou um título „assenta sobre o parágrafo“, a margin é a alavanca.
Regras práticas que funcionam:
- Line-height do body text: 1.5–1.7 (por vezes em, por vezes sem unidade — o Elementor permite ambos)
- Line-height dos títulos: 1.1–1.3 (títulos grandes precisam de menos ar)
- Margin entre parágrafos: 1em–1.5em (ou seja, cerca de uma altura de linha)
- Margin entre título e texto seguinte: 0.5em (apertado, pertencem juntos)
- Margin entre parágrafo e novo título seguinte: 2em (distância, novo tema)
Estes valores não são um dogma — adapte-os à sua escolha tipográfica. Uma fonte serifada estreita (por ex. Lora) precisa de mais line-height, uma fonte grotesca larga (por ex. Inter, Source Sans) de menos.
Tipografia global: definir uma vez, usar em todo o lado
O maior erro que vejo em projetos Elementor: o line-height é definido por widget, em vez de globalmente. O resultado: 47 line-heights diferentes espalhados pelo site, nenhuma consistência, cada alteração torna-se um trabalho de Sísifo.
Em vez disso: use a tipografia global.
No Elementor → menu de hambúrguer no canto superior esquerdo → „Site Settings“ → „Typography“. Aí você define:
- Primary Heading (H1)
- Secondary Heading (H2)
- Text (body)
- Accent Text (por ex. textos de destaque)
Por estilo você define Font Family, Weight, Size, line-height e Letter-Spacing. Estes ficam depois aplicáveis num clique em cada widget — e se mais tarde alterar o line-height de 1.6 para 1.55, isso muda em todo o site, não apenas num ponto.
Valores predefinidos recomendados:
| Estilo | Font Size (Desktop) | Line-Height | Margin-Bottom |
|---|---|---|---|
| Primary Heading (H1) | 48 px | 1.15 | 0.5em |
| Secondary Heading (H2) | 32 px | 1.2 | 0.6em |
| Tertiary Heading (H3) | 24 px | 1.3 | 0.5em |
| Body Text | 17 px | 1.6 | 1.2em |
| Accent / Lead | 20 px | 1.5 | 1.5em |
Estes valores são um ponto de partida para sites tech/serviços modernos. Em revistas, blogs, textos de leitura mais longos eu colocaria o line-height do body em 1.7 ou até 1.8 — a fluidez de leitura supera a densidade.
Secção Pro: espaçamento entre linhas para headlines vs. body
As headlines toleram pouco line-height, porque entre as linhas não têm carácter de fluidez de leitura — são curtas, incisivas, devem manter-se juntas. Se você definir um H1 de duas linhas com line-height 1.6, parece que alguém escreveu duas frases separadas.
O body text, pelo contrário, é texto de leitura. Aqui as linhas precisam de espaço para respirar, para que o olho possa saltar para a linha seguinte sem perder a ligação. Regra prática: quanto mais longo o seu comprimento de linha, mais line-height. Uma coluna de texto com 800 pixels de largura e 65 caracteres por linha tolera 1.6 sem problemas; uma coluna estreita de 400 pixels com 35 caracteres por linha deve antes ter 1.4.
Truque prático: nas definições do widget do Elementor, em „Style“ → „Typography“, você vê um slider „Line Height“. Coloque-o em „Unit-less“ (o pequeno dropdown à direita do slider). O line-height sem unidade escala com o tamanho da fonte — se mais tarde alterar o font-size, o espaçamento entre linhas ajusta-se automaticamente. Com valores em „Em“ ou „px“ isso falha.
Spacing-widget vs. CSS margin: quando usar o quê?
O Elementor oferece três formas de criar espaçamento vertical:
- Margin no elemento (Style-Tab → Advanced → Margin)
- Padding no container (Layout-Tab → Padding)
- Spacer-widget (um widget próprio que se insere entre elementos)
Qual é a via correta? Depende do contexto.
A margin uso para:
- Espaçamentos padrão entre elementos de texto
- Consistência global (definida na tipografia global)
O padding uso para:
- Espaçamentos entre secções (padding em cima/em baixo no container)
- Quando o fundo/background tem um papel (o padding desloca o conteúdo, não a área colorida)
O spacer-widget uso para:
- Espaçamentos únicos, muito específicos, que não encaixam na lógica padrão
- Testes rápidos no modo de design
O que evito:
- Várias tags
vazias no editor de texto para criar espaço. É um hack HTML de 2007 — não semântico, mau para leitores de ecrã, comporta-se de forma diferente do esperado no responsive. - Spacers ao pixel em cada secção. Um spacer de 73 px fica exato no editor, mas é um pesadelo de manutenção.
Espaçamento entre linhas no mobile: o que corre mal no tablet/telemóvel
A armadilha de espaçamento mobile mais comum: no desktop você tem um H1 com tamanho de fonte 48 px e line-height 1.15. No telemóvel o font-size encolhe automaticamente para 32 px — mas o line-height 1.15 torna o bloco do título de repente demasiado apertado ali, porque os títulos no mobile muitas vezes quebram para a linha seguinte.
Solução: o Elementor permite valores responsivos por breakpoint. Clique no ícone do dispositivo ao lado de cada valor e defina:
- Desktop H1: line-height 1.15
- Tablet H1: line-height 1.2
- Mobile H1: line-height 1.25
Da mesma forma no body text:
- Desktop body: line-height 1.6
- Mobile body: line-height 1.55 (linhas mais curtas precisam de menos)
No mobile a margin deve ser mais pequena do que no desktop. Quem tem 2em entre H2 e parágrafo no desktop, deve no mobile descer para 1.2em — caso contrário, num ecrã de 5 polegadas o site parece que alguém separou cada secção com três linhas em branco.
Dica bónus para utilizadores Pro: com o Elementor Pro você pode definir breakpoints próprios em „Site Settings“ → „Layout“. Os padrão são Mobile (≤767 px), Tablet (768–1024 px), Desktop. Se o seu público tem muitos iPad Pro, compensa um breakpoint adicional em 1200 px.
Nota de performance: nada de orgias de CSS inline
Cada valor de espaçamento que você define no Elementor por widget acaba como classe CSS gerada no HTML — e pode acumular-se. Uma página com 200 widgets estilizados individualmente tem 200 regras CSS adicionais no head. Não é crime, mas é desnecessário.
Boas práticas para uma performance limpa:
- Definir tipografia global (ver acima) em vez de estilizar por widget.
- Reutilizar templates de secção pré-construídos em vez de estilizar cada secção de novo.
- Definir Custom CSS Classes (Elementor Pro) — por ex. uma classe
.spacing-mediumque define 2em de margin-bottom, e aplicá-la depois onde for preciso. - Desativar widgets não utilizados. O Elementor carrega CSS para cada widget ativado — mesmo que você não o use. Em „Settings“ → „Features“ você pode fazer limpeza.
Para dicas de performance mais aprofundadas sobre o Elementor, consulte o meu artigo Otimização de performance do Elementor. E se você está mesmo no início e quer aprender o Elementor de forma estruturada, o Tutorial Elementor para iniciantes é leitura obrigatória.
Forçar uma quebra de linha — sem novo parágrafo
Estreitamente ligada ao espaçamento entre linhas está a quebra de linha. Por vezes você quer quebrar uma linha sem começar um parágrafo inteiramente novo (com espaçamento adicional) — por exemplo num endereço, num slogan ou numa menção de várias linhas. No editor de texto do Elementor você controla isso assim:
- Shift + Enter cria uma quebra de linha simples (
<br>) — mesma altura de linha, sem espaçamento de parágrafo adicional. - Um Enter normal cria um novo parágrafo (
<p>) com o maior espaçamento de parágrafo, que você controla mais acima através da margin.
É precisamente esta distinção o tropeço mais frequente: quem carrega em Enter em todo o lado obtém demasiado espaço e admira-se com blocos de texto despedaçados. Com Shift+Enter você mantém o controlo — e combinado com a altura de linha certa lá de cima, o texto finalmente parece sereno.
Quer uma revisão de design ou uma formação?
Se o seu site Elementor „não bate certo“ ao nível do espaçamento, eu acompanho-o por 60 minutos e descubro as lacunas mais frequentes — normalmente basta uma hora para definir a tipografia de forma limpa e criar consistência. Escreva-me umas linhas e eu marco consigo um coaching 1:1 ou uma pequena auditoria.
→ Pedir coaching: Entrar em contacto
Etiquetas