Se você é como eu, provavelmente tem muitas ideias para o seu site que gostaria de ver ganhar vida. E embora o Elementor facilite a criação de designs exclusivos com recursos de arrastar e soltar e elementos predefinidos, às vezes nada substitui o poder do CSS puro. Neste artigo, vamos abordar como adicionar CSS personalizado no Elementor para que você possa levar o design do seu site ainda mais longe!
3 maneiras populares de adicionar CSS personalizado no Elementor
Existem várias maneiras de adicionar CSS personalizado no Elementor. Vamos dar uma olhada nas nossas 3 principais maneiras de fazer isso.
- Use o personalizador do WordPress
- Use um plugin CSS
- Usando widget HTML
Utilize o personalizador do WordPress.
Para adicionar código CSS personalizado no Elementor, siga estes passos:
- Acesse Aparência > Personalizar
- No personalizador do WordPress, clique em CSS adicional.
- A seção CSS Adicional será aberta. Você pode adicionar código aqui colando-o na caixa de texto ou clicando no botão Adicionar CSS Personalizado para procurar o arquivo no seu computador.
Use um plugin de CSS
Existem vários plugins disponíveis no mercado, como Simple CSS, Custom CSS Pro e CSS Hero, que permitem adicionar CSS personalizado ao Elementor.
Para começar, acesse CSS e JS personalizados > Adicionar CSS personalizado e clique em Adicionar código CSS.
Um editor CSS básico aparecerá à esquerda. Você pode optar por carregar o código CSS internamente ou em uma folha de estilo externa usando as opções de configuração à direita. Além disso, você pode escolher se o código deve ser exibido no cabeçalho ou no rodapé
Após concluir a edição do código CSS, clique no Publicar .
Nota: Alterne para a visualização do front-end para ver o código em ação.
Usando widget HTML
Você pode usar um widget HTML para adicionar CSS personalizado ao Elementor. Para isso, basta arrastar e soltar o widget HTML e adicionar seu código CSS dentro de uma tag `<style>`.
O CSS personalizado é uma forma de adicionar código personalizado ao seu site. Ele pode ser usado para diversas finalidades, desde alterar a aparência do seu site até adicionar funcionalidades extras.
Agora que você sabe como adicionar CSS personalizado, pode usá-lo em seus sites seguindo estes passos:
- Abra a janela do editor do Elementor e clique no ícone '+' no canto superior esquerdo
- Clique em 'Código personalizado' e cole este trecho de código: `.elementor-custom-css{display:none;}`. Você pode encontrar essa opção em Configurações > CSS personalizado ou Aparência > Opções do tema > CSS personalizado (dependendo da versão do WordPress que você está usando).
Conclusão
Agora que você sabe como adicionar CSS personalizado, pode aproveitar a flexibilidade do Elementor. Da próxima vez que algo não estiver funcionando como esperado, tente adicionar um código CSS em vez de corrigir o problema com um plugin ou alteração de tema!
Conteúdo relevante
- O que é um framework CSS?
- Como remover CSS não utilizado no WordPress?
