# CSS personalizado no Elementor: 3 níveis para aplicar O CSS personalizado no Elementor funciona em três níveis: elemento, página e site. Segundo a documentação oficial do Elementor (2026), o recurso é exclusivo do Elementor Pro e usa a palavra selector para mirar o elemento atual. A escolha errada do nível causa estilo que vaza ou some após o cache. Use o nível mais específico que resolve o problema. O CSS personalizado no Elementor é o código que você injeta para ajustar espaçamento, cor, tipografia ou comportamento que os controles visuais não alcançam. No Elementor Pro 3.x ele aparece em três lugares distintos: na Aba Avançada de cada widget, nas configurações da página e no Site Settings. Saber qual nível usar é o que separa um ajuste limpo de um layout que quebra na próxima atualização. Este guia mostra onde fica cada campo, como a palavra selector evita vazamento e por que o cache às vezes apaga seu estilo. Para o panorama do construtor, veja o hub de artigos de Elementor da FULL. --- ## Primeiros passos: Os 3 níveis de CSS personalizado O CSS personalizado no Elementor existe em 3 níveis de alcance, e escolher o errado é a causa número um dos tickets de "estilo que não cola" no suporte da FULL. O nível de elemento afeta um widget só; o de página, uma URL; o de site, o tema todo. A regra prática: use o menor alcance que resolve, porque regra global colide mais com o tema.
CSS personalizado no Elementor: onde fica cada nível e quando usar
Nível Caminho no painel Quando usar
Elemento Widget > Aba Avançada > Custom CSS Ajuste pontual em um botão, caixa ou seção
Página Configurações da página > Custom CSS Regra que vale só para uma URL específica
Site Site Settings > Custom CSS Estilo global recorrente em todo o site
Os três campos aceitam a mesma sintaxe, mas só o de elemento entende a palavra selector. Essa diferença é o que vamos detalhar a seguir. --- ## Por que o CSS personalizado exige o Elementor pro O CSS personalizado nativo é exclusivo do Elementor Pro, confirmado na central de ajuda do Elementor: nenhum dos 3 níveis (elemento, página e site) aparece na versão gratuita, que não traz o campo Custom CSS na Aba Avançada nem no Site Settings. Quem usa só o plugin gratuito recorre ao Personalizar do tema (Aparência > Personalizar > CSS adicional) ou a um plugin externo. A diferença não é só de localização. O CSS personalizado no Elementor Pro vive junto do elemento que estiliza, o que mantém o estilo acoplado ao widget mesmo ao duplicar a seção ou exportar o template. Já o CSS do tema fica solto. Boa parte dos casos de "estilo sumiu ao copiar a seção" que vemos no suporte vem de quem escreveu o CSS personalizado no tema, e não no Elementor. Se você ainda avalia o plugin, o artigo por que o Elementor Pro vale a pena detalha o que muda. --- ## Como a palavra selector evita vazamento de estilo A palavra selector é o coração do CSS personalizado no nível de elemento: ela representa o próprio widget em edição, sem você precisar do ID ou da classe que o Elementor gerou. A sintaxe oficial é `selector { propriedade: valor; }`. Em um botão, `selector { border: 2px solid #e63946; }` aplica a borda só àquele botão, e a nenhum outro. Omitir o selector é o erro técnico mais comum, e o efeito colateral é previsível. Custom CSS de elemento sem a palavra selector + uma regra global escrita com classe genérica (como `.elementor-button`) resulta em CSS vazando para todos os widgets idênticos da página. O sintoma são botões mudando de cor "sozinhos" em seções que você nem tocou. O selector cria o escopo automático que evita isso. Para a base por trás, o guia o que é CSS e quando usá-lo no WordPress cobre especificidade e cascata. --- ## Passo a passo: Aplicar CSS personalizado em um elemento Aplicar CSS personalizado em um único widget leva menos de um minuto e segue quatro etapas dentro da Aba Avançada do Elementor Pro 3.x. O caminho é sempre o mesmo: selecionar o elemento, abrir a aba certa, escrever a regra com selector e validar no preview antes de publicar. Os passos abaixo usam um botão como exemplo, mas valem para qualquer widget, coluna ou container.

Legenda: o campo Custom CSS só aparece na Aba Avançada quando o Elementor Pro está ativo.

### Selecione o elemento e abra a aba avançada Clique no widget que você quer estilizar e, no painel esquerdo, mude da aba Estilo para a Aba Avançada. O campo Custom CSS fica no final dessa aba, abaixo de Motion Effects e Responsivo. Se o campo não aparecer, o site está no Elementor gratuito, e o CSS personalizado nativo não está disponível ali. ### Escreva a regra usando selector No campo Custom CSS, comece sempre pela palavra selector para mirar o elemento atual. Exemplo: `selector { padding: 24px; border-radius: 8px; }`. Use selector como raiz e adicione `:hover` ou descendentes quando precisar (`selector:hover { background: #1d3557; }`). Nunca escreva o ID gerado pelo Elementor na mão, porque ele muda a cada exportação de template. ### Valide no preview e ajuste a especificidade Antes de publicar, clique no ícone de visualização e confira o resultado em desktop e mobile. Se o estilo não aparecer, o problema costuma ser especificidade: uma regra do tema com peso maior está sobrescrevendo. Aumente a especificidade encadeando o selector (`selector.elementor-button { ... }`) em vez de recorrer a `!important`, que vira dívida técnica difícil de rastrear depois. ### Publique e limpe o cache na ordem certa Depois de publicar, limpe o cache do plugin de cache e do CDN, nessa ordem. O CSS personalizado do Elementor é regenerado nos arquivos de CSS do site, então um cache antigo pode servir a versão sem o seu estilo. Em sites com cache agressivo, force a regeneração em Elementor > Ferramentas > Regenerar CSS antes de testar. --- ## Erros de CSS personalizado que mais geram ticket 3 padrões de erro concentram a maior parte dos chamados de CSS personalizado no suporte da FULL, e todos têm causa técnica clara. O mais frequente é o estilo que some após limpar o cache: Custom CSS escrito no editor de tema em vez da Aba Avançada do Elementor Pro, somado a cache de página ativo, gera estilo que desaparece ao limpar o cache, sem erro visível. O segundo padrão é o conflito de especificidade. Custom CSS no nível de site duplicando uma regra do tema filho, com especificidade igual, produz estilo intermitente que muda conforme a ordem de carregamento dos arquivos. O sintoma é cruel: funciona numa página, falha em outra idêntica. O terceiro é o uso de JavaScript inline misturado ao CSS, que o Elementor não processa no mesmo campo. Se o site está pesado, o artigo sobre Elementor lento mostra como CSS e scripts mal posicionados degradam o tempo de render. --- ## Aproveite o Elementor pro no bundle da FULL O Elementor Pro sozinho custa a partir de US$59 por ano por site no plano individual, o que pesa para quem mantém vários projetos ao mesmo tempo. No plano PRO da FULL, por R$849, o Elementor Pro entra junto de outros 16 plugins premium, e a conta cai para cerca de R$85 por site quando você distribui o valor pelos sites do plano. Para uma agência que cuida de dez clientes, é a diferença entre dez licenças avulsas renovadas uma a uma e uma assinatura só, com tudo no mesmo painel. Veja os detalhes em FULL.services/planos ou conheça o Elementor Pro na FULL. A gente vê no suporte que o ponto de virada costuma ser o terceiro site: a partir dali, o custo por site do bundle compensa o avulso com folga. --- ## Onde o CSS personalizado nativo perde para alternativas O CSS personalizado nativo do Elementor Pro compete por proximidade ao elemento, mas perde terreno em 3 cenários. Quando o estilo precisa sobreviver fora do builder (ao migrar para o construtor nativo do WordPress), o CSS do tema filho compete por persistência: continua valendo sem o Elementor ativo, enquanto o CSS de elemento some junto com o plugin. O segundo cenário é o de quem não quer escrever código: addons como widgets do Happy Addons e do Ultimate Addons competem por controles visuais que entregam gradientes, sombras e animações sem uma linha de CSS. O terceiro é manutenção em escala: em sites com mais de 300 regras de CSS personalizado por elementos individuais, o Elementor injeta cada bloco em um post_meta separado e o render do editor cresce de forma perceptível. Aí tende a valer consolidar o que é global no Site Settings. Para layouts complexos, o guia do Flexbox Container reduz a necessidade de CSS manual. ---

Perguntas frequentes sobre CSS personalizado no Elementor

Por que meu CSS personalizado para de funcionar depois de limpar o cache?

Porque ele provavelmente foi escrito no editor do tema, não na Aba Avançada do Elementor Pro. O CSS do tema com cache de página ativo é servido de um arquivo que o cache regenera, e a versão antiga volta sem o seu estilo. A correção é mover a regra para o campo Custom CSS do Elementor e regenerar o CSS em Elementor > Ferramentas. Isso resolve a maioria dos casos de estilo intermitente.

É possível adicionar CSS personalizado no Elementor sem ter o Pro?

Não pelo campo nativo: o Custom CSS na Aba Avançada e no Site Settings é exclusivo do Elementor Pro, segundo a documentação oficial. No Elementor gratuito, o caminho é o CSS adicional do Personalizar do WordPress (Aparência > Personalizar) ou um plugin externo de CSS. Funciona, mas o estilo fica solto do widget, e não acoplado a ele como no Pro.

Qual a diferença entre CSS no elemento, na página e no site no Elementor?

O nível de elemento estiliza um único widget e aceita a palavra selector; o de página vale para uma URL inteira; o de site aplica a regra ao tema todo via Site Settings. A diferença prática é o alcance: quanto mais global, maior o risco de colidir com o tema. A regra é usar o menor nível que resolve. Os três usam a mesma sintaxe CSS, mas só o de elemento entende selector.

Quanto custa o Elementor Pro por site para liberar o CSS personalizado?

Avulso, o Elementor Pro começa em US$59 por ano por site. No plano PRO da FULL, por R$849, ele entra no bundle com mais 16 plugins premium, o que dá cerca de R$85 por site quando o valor é distribuído. Para quem mantém vários projetos, o bundle reduz o custo por site de forma relevante a partir do terceiro site, segundo o que vemos no suporte.

O que a palavra selector faz dentro do campo Custom CSS?

A palavra selector representa o próprio elemento que você está editando, sem precisar do ID gerado pelo Elementor. Você escreve selector { propriedade: valor; } e a regra mira só aquele widget. Isso cria escopo automático e evita que o CSS vaze para outros elementos idênticos da página. É o recurso que torna o CSS de elemento mais seguro que uma classe global escrita à mão.

--- ## Próximos passos para dominar o CSS no Elementor Dominar o CSS personalizado no Elementor é menos sobre saber muitas propriedades e mais sobre escolher o nível certo: elemento para ajustes pontuais com selector, página para regras de URL e site para estilos globais. Comece pelo menor alcance, valide com o cache limpo e prefira aumentar especificidade a usar !important. Esse hábito evita a maior parte dos conflitos que enchem os tickets de suporte. Se você está começando agora, o tutorial de Elementor para iniciantes e os 5 métodos de CSS personalizado no Elementor ampliam o repertório. Para continuar aprendendo, o FULL Academy reúne tutoriais, guias e reviews de WordPress em um só lugar.