Como criar um plano de fundo distorcido no elementor (Guia 2026)

Um fundo inclinado corta a borda de uma seção através da página em um ângulo em vez de deixá-la plana Ele quebra a pilha usual de faixas horizontais, e o olho segue a diagonal para baixo na próxima seção As páginas de destino e as páginas iniciais do SaaS usam-na constantemente.

Elementor ainda não tem “skew esta seção” alternar, então você faz isso com algumas linhas de CSS O problema é que o próprio campo Custom CSS da Elementor está bloqueado atrás do Pro. É por isso que este tutorial usa o gratuito Extensão CSS personalizada em Master Addons, que adiciona uma caixa CSS a cada elemento no Elementor livre.

Este guia foi reconstruído para saber como o Elementor realmente funciona em 2026. a versão original deste post foi escrita em Seções e Colunas Interiores, e ambas são legadas agora Tudo abaixo usa Contêineres Flexbox, elemento de layout padrão do Elementor desde 3.6 e a única estrutura que você obtém em uma nova página.

O que você precisa antes de começar

• Elementor livre (3.6 ou mais recente, então os contêineres estão ligados)
• Adições Mestres: instale-o gratuitamente no WordPress.org, então ligue a extensão Custom CSS
• Um recipiente com uma cor de fundo ou conjunto de imagens. Não pule isso. Skew transforma a caixa, então se a caixa não tiver nada visível nela, você não verá nenhuma mudança Um recipiente transparente é a razão número um pela qual as pessoas pensam que esse truque está quebrado.

Você não precisará do Elementor Pro em nenhum momento Se você já o tiver, seu campo nativo Custom CSS se comporta da mesma maneira, então cole o código lá em vez disso.

Compreendendo a inclinação antes de colar qualquer coisa

Skewing é uma transformada CSS. transform: skew(0deg, -10deg) inclina o elemento ao longo do eixo Y em dez graus, transformando suas bordas superior e inferior em diagonais.

O que faz as pessoas se animarem é que uma transformação se aplica ao elemento e tudo dentro dele. Incline um recipiente e você distorce seu fundo, com certeza, mas também distorce o título, o botão e a imagem que está nele Seu texto acaba inclinado.

Então você contra-inclina-se Aninhe um segundo recipiente dentro do primeiro e incline-o para trás na mesma quantidade na direção oposta O pai vai para menos dez graus, a criança vai para mais dez, e eles cancelam Fundo angular, conteúdo vertical.

Dois contentores, duas regras, valores opostos É tudo.

Passo 1: Construa a estrutura do contêiner

Abra sua página no Elementor e entre em a Recipiente. Defina sua largura para Largura Total Este é o externo, aquele que carrega o ângulo.

Agora arraste um segundo Recipiente dentro do primeiro. Esse contêiner aninhado contém o conteúdo real: título, texto, botão, imagem, para qualquer que seja a seção. Projete-o da maneira que desejar.

Então a estrutura é:

• Recipiente exterior: cor de fundo ou imagem, obtém a inclinação
• Recipiente interno: todo o seu conteúdo, obtém a contra-inclinação

Mantendo uma página mais antiga ainda construída em Seções e Seções Internas? a lógica é idêntica Elemento externo inclina, elemento interno não distorce Para qualquer coisa nova embora, use Contêineres Eles enviam muito menos DOM, o que se soma se você se preocupa com Velocidade da página do elementador.

Passo 2: Adicione o CSS distorcido ao recipiente externo

Selecione o recipiente externo, vá para o Avançado tab, e encontre o MA CSS personalizado caixa que Master Addons adiciona Cole isso em:

selector {
  padding: 400px 0;
  margin-top: -200px;
  transform: skew(0deg, -10deg);
  overflow: hidden;
}

Aqui está o que cada linha está fazendo, para que você possa ajustá-la em vez de apenas esperar:

• selector é a abreviação de Elementor para “este elemento específico.” Master Addons escopa para você, então a regra não pode vazar para outros contêineres.
• padding: 400px 0 dá ao recipiente espaço vertical suficiente para as bordas angulares irem a algum lugar Esfregue um recipiente curto e você apenas corta os cantos.
• margin-top: -200px puxa o recipiente para cima no que está acima dele para que a diagonal se sobreponha, em vez de deixar um triângulo branco para trás Metade do valor do preenchimento é uma relação inicial decente.
• transform: skew(0deg, -10deg) é o ângulo em si. Negativo inclina-se para um lado, positivo para o outro.
• overflow: hidden evita que os cantos inclinados se espalhem para fora de lado Deixe-o desligado e você terá uma barra de rolagem horizontal, à qual voltarei.

Uma coisa que vale a pena sinalizar: se você também tocou no Transformar controles na aba Avançado do próprio Elementor, eles vão brigar com esse CSS, já que ambos escrevem para o mesmo transform a propriedade e a última a carregar ganha Escolha um lugar para definir o ângulo e deixe o outro em paz.

A versão 2020 deste tutorial listou quatro linhas prefixadas pelo fornecedor (-webkit-, -moz-, -ms-, -o-). Excluí-los. Não prefixado transform já funciona em todos os navegadores há cerca de uma década, e essas linhas extras tornam a caixa CSS mais difícil de ler.

Passo 3: Contra-inclinar o recipiente interno

Neste ponto seu conteúdo é inclinado junto com o plano de fundo Selecione o recipiente interno, abra sua guia Avançado e cole isso no MA Custom CSS:

selector {
  transform: skew(0deg, 10deg);
}

Mesmo número, sinal oposto. Recipiente externo em -10deg significa recipiente interno em 10deg. Mude um sem alterar o outro e seu texto fica em um ângulo leve que os leitores percebem mesmo que não possam dizer o porquê.

Salvar e visualizar Você deve ter um fundo angular com conteúdo reto sentado em cima dele Se o editor ainda mostra inclinado, recarregue a guia editor; CSS personalizado ocasionalmente fica atrasado no iframe de visualização.

Passo 4: Corrija o estouro do celular (não pule isso)

A maioria dos tutoriais para na etapa 3, e é por isso que seções distorcidas são retiradas de sites ao vivo uma semana depois.

Desvie um elemento de largura total e seus cantos empurrem para fora após a borda da janela de visualização, No desktop, ninguém percebe Em um telefone, essa saliência dá-lhe uma barra de rolagem horizontal e a página começa a deslizar lateralmente sob o polegar do usuário lê-se como quebrado, porque é.

Duas coisas impedem:

1. Mantenha overflow: hidden no recipiente inclinado, como no código acima.
2. Reduza o ângulo em telas pequenas. Uma inclinação de 10 graus que parece nítida em um monitor de 1440 px se transforma em uma diagonal áspera em um telefone de 375 px, e come em sua manchete.

Adicione isto por baixo do código na caixa CSS do recipiente exterior:

@media (max-width: 767px) {
  selector {
    padding: 200px 0;
    margin-top: -100px;
    transform: skew(0deg, -4deg);
  }
}

E a inversão correspondente no recipiente interno:

@media (max-width: 767px) {
  selector {
    transform: skew(0deg, 4deg);
  }
}

Agora o efeito diminui em vez de destruir o layout Teste-o em um telefone real, não apenas na visualização responsiva do editor, já que o painel de visualização nem sempre reproduz o estouro Se você executar pontos de interrupção personalizados em vez dos padrões do Elementor, o Extensão de pontos de interrupção personalizados permite combinar essas consultas de mídia com as larguras reais do dispositivo.

A alternativa moderna: clip-path, sem nenhuma contra-inclinação

Skew-and-counter-skew funciona, e é o que o tutorial original ensinou Há uma maneira mais limpa agora embora, e para uma nova construção é geralmente aquele que EU alcançaria.

clip-path corta uma forma para fora do elemento em vez de transformá-lo Uma vez que ele clipa em vez de girar, o conteúdo dentro nunca se move, então não há contêiner aninhado e nenhum segundo valor para manter em sincronia.

Um recipiente, uma regra:

selector {
  padding: 160px 0;
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}

Essas quatro coordenadas são os cantos, no sentido horário a partir do canto superior esquerdo. Empurre as porcentagens para mudar o ângulo: aumente o 6% para um corte mais íngreme, deixe-o cair em direção 0 para algo mais sutil Você também pode inclinar apenas a borda inferior e deixar a parte superior plana, que é o padrão usual para um herói.

Qual método você deve usar?

Cada navegador atual lida com ambos Verifique o tabelas de suporte de clip-path no MDN se você está preso apoiando algo incomum.

Pule totalmente o CSS: importe o modelo pronto

Não quer tocar no código? o layout de fundo distorcido é fornecido como um modelo Edite qualquer página com o Elementor, clique no Biblioteca de modelos de complementos mestres ícone ao lado do botão add-element, e procure o modelo de fundo distorcido Importe-o, em seguida, troque em seu próprio texto e cores.

Mesma técnica, já ligada A Biblioteca de modelos de complementos mestres tem páginas, seções, cabeçalhos e rodapés prontos construídos da mesma maneira, e o Kits de modelos vá mais longe com designs completos de sites de várias páginas.

Onde fundos distorcidos realmente funcionam

Vale a pena dizer, porque este efeito fica usado em excesso: seções angulares ganhar o seu manter quando eles marcam uma transição Herói em recursos, características em preços, preços em depoimentos Eles dão uma página longa algum ritmo.

Eles param de funcionar quando cada seção é inclinada Nada mais parece uma transição e a página parece ocupada. Em uma longa página de destino, duas ou três bordas angulares geralmente são suficientes.

Se você quiser mais profundidade sem a geometria, outros efeitos camada bem no topo. Fundos gradientes animados adicione movimento lento de cores, partículas adicione uma camada interativa e glassmorfismo dá aos cartões um aspecto fosco que se assenta bem contra um painel inclinado O Transforma extensão também coloca controles de rotação, escala e inclinação na UI do Elementor, se preferir arrastar um controle deslizante do que graus de tipo.

Solução de problemas

• Nada mudou. O recipiente não tem fundo Defina uma cor ou imagem e olhe novamente.
• A página inteira rola lateralmente. Adicionar overflow: hidden para o recipiente distorcido, verifique se o seu pai não está transbordando também.
• O texto ainda está inclinado. A contra-inclinação está no elemento errado, ou o sinal está errado Se o recipiente externo for negativo, o interno tem que ser positivo.
• Lacuna branca acima da seção. Aumentar o negativo margin-top portanto, o ângulo puxa ainda mais para a seção acima.
• O ângulo salta imprevisivelmente. Os controles integrados do Transform do Elementor são definidos no mesmo elemento e estão substituindo seu CSS. Limpe-os.
• Nenhuma caixa CSS personalizada MA na guia Avançado. A extensão está desligada - Master Addons, depois Configurações, depois Extensões, e activá - la.

Perguntas frequentes

Embrulhando

Criar um fundo distorcido no Elementor se resume a duas regras em duas caixas CSS: distorcer o contêiner externo, distorcer o interno. Adicionar overflow: hidden, alivie o ângulo no celular e ele se manterá em dispositivos reais, e não apenas no editor. Em uma nova compilação, clip-path dá a você o mesmo visual com metade da configuração.

Tudo ele roda em Elementor gratuito, desde então Adições Mestres é o que coloca a caixa Custom CSS lá para começar Se você quiser mais tarde o resto do kit de ferramentas (Theme Builder, Popup Builder, o conjunto completo de extensões), é isso Pro capas, mas nada neste tutorial precisa.

Leitura relacionada: Efeitos de animação elementar, como adicionar efeitos flutuantes no Elementor, e como criar um cabeçalho pegajoso no Elementor.