Mais cedo ou mais tarde cada compilação Elementor atinge uma parede os controles do painel não podem subir: um efeito de hover a guia Estilo não oferece, ou uma animação de quadro-chave que você encontrou em um tutorial Elementor mantém CSS personalizado por elemento atrás de uma licença Pro O Css personalizado extensão em Complementos Mestres para Elementor remove essa parede: um editor CSS em cada seção, contêiner, coluna e widget, no editor gratuito.
Aqui está no editor O CSS pousa na caixa, e os cartões de testemunho começam a deslizar pela tela no mesmo segundo:
O que a extensão Custom CSS faz #
Uma vez habilitado, cada elemento do editor Elementor recebe um Css personalizado seção sob seu Avançado guia. Dentro fica um editor de código com realce de sintaxe e números de linha O que quer que você escreva lá se aplica apenas a esse elemento, e a tela visualiza ao vivo, para que você assista a regra entrar em vigor enquanto você digita.
O editor suporta o seletor palavra-chave, que significa o próprio invólucro do elemento Escreva selector { } e a regra tem como alvo exatamente esta seção ou widget, sem procurar os nomes de classe gerados pelo Elementor Os seletores de crianças também funcionam: selector .some-class alcança dentro do elemento.
Antes de começar #
- WordPress com Elementor instalado e ativo A versão gratuita é suficiente.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- Custom CSS é uma extensão gratuita, portanto, nenhuma licença Pro é necessária.
- Alguns CSS. Até mesmo trechos copiados funcionam, já que a palavra-chave do seletor remove a parte difícil.
Como ativar a extensão Custom CSS #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. CSS personalizado fica no Utilitários Widgets grupo com crachá Popular, ao lado de Custom JS e Duplicador de postagem/página. Clique em sua alternância para que fique roxo e depois bata Salvar alterações e aguarde o verde “Configurações salvas com sucesso no aviso de”.
Abra o editor Custom CSS em um elemento #
Selecione qualquer elemento no editor Elementor, um contêiner inteiro na demonstração e abra o Avançado guia. Role para o Css personalizado seção com o emblema MA roxo e expanda-o Um editor de código vazio aparece, com uma dica abaixo dele: use a palavra-chave “selector” para direcionar o elemento wrapper.
Escreva ou cole o CSS #
A demonstração transforma uma linha estática de cartões de depoimento em uma marquise móvel com uma animação de quadro-chave:
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}Cole-o e a tela obedece imediatamente: os cartões começam a deslizar da direita para a esquerda, invertem-se no final e fazem um loop, exatamente como mostra o GIF no topo desta página Não há nada para salvar ou atualizar primeiro O selector a palavra-chave fixa a animação neste contêiner, para que nada mais na página seja tocado.
O resultado na página #
Bate Publicar e a extremidade frontal executa a mesma animação: a linha de testemunho desliza pela janela de visualização, pausa a direção em cada extremidade e continua pedalando sozinha.
Um hábito que vale a pena manter: o CSS vive no elemento, não em uma folha de estilo global Duplique a seção em outra página e a animação viaja com ela.
Onde o CSS personalizado por elemento ajuda #
- Animações de quadros-chave. Marquises, botões pulsantes, crachás flutuantes, qualquer coisa que os controles do painel não possam expressar.
- Hover estados.
selector:hoverregras para elevadores, sombras e mudanças de cor em cartões. - Correções de snippet. Aquela resposta Stack Overflow que resolve seu bug de layout, aplicada exatamente onde o bug está.
- Ajustes responsivos. Uma consulta de mídia em uma seção em vez de uma edição de folha de estilo em todo o site.
- Projete experimentos. Teste uma regra ao vivo na tela antes de promovê-la no CSS do seu tema.
Vídeo Tutorial #
Observe todo o fluxo, desde habilitar a extensão até os cartões animados em execução na página publicada.
Perguntas frequentes #
Como adiciono CSS personalizado no Elementor sem Pro?
Habilite a extensão Custom CSS na guia Master Addons Extensions, selecione qualquer elemento no editor e abra Custom CSS na guia Advanced Escreva ou cole CSS no editor de código e ele se aplica a esse elemento com uma visualização ao vivo, sem necessidade de licença Pro.
O que faz a palavra-chave selector?
Ele significa o wrapper do elemento que você está editando Uma regra como seletor {cor: vermelho; } tem como alvo exatamente esta seção ou widget sem conhecer os nomes de classe gerados pelo Elementor, e o seletor .child atinge elementos dentro dele.
O CSS se aplica a todo o site ou apenas a um elemento?
Apenas o elemento que o carrega Cada seção, coluna ou widget tem sua própria caixa CSS Personalizada, portanto, as regras permanecem com escopo Duplicando o elemento copia seu CSS junto com ele, o que mantém os efeitos portáteis entre as páginas.
Posso executar animações CSS com esta extensão?
Sim. O editor aceita CSS completo, incluindo @keyframes, consultas de mídia e pseudoclasses como hover. A demonstração nesta página executa uma animação de marca de quadro-chave em uma linha de depoimentos, visualizada ao vivo no editor antes da publicação.
A extensão Custom CSS é gratuita?
Sim. CSS personalizado vem com a versão gratuita de Master Addons para Elementor, no grupo Utilities Widgets da guia Extensões A página de preços cobre o que os planos Pro adicionam.
Embrulhando #
A extensão Custom CSS dá ao Elementor livre a escotilha de escape que todo projeto real eventualmente precisa: um editor CSS com escopo em qualquer elemento, com visualização ao vivo e uma palavra-chave seletora que poupa você da arqueologia de nome de classe. Emparelhe-o com o Extensão de fundo de gradiente animado (Pro) para movimento sem escrever quadros-chave e navegue pelo conjunto completo de Widgets e extensões Master Addons para o resto da caixa de ferramentas.
