Recentemente, um de nossos leitores que não tinha a versão Pro do Elementor nos desafiou sobre como ele poderia adicionar CSS personalizado ao seu site.
Como o problema é um pouco mais complexo, pensamos que vários usuários podem enfrentar esse problema. Então decidimos fornecer um artigo detalhado sobre como chegar lá.
Neste artigo, mostraremos como adicionar CSS personalizado facilmente a uma página ou site do Elementor.
As três maneiras de adicionar CSS personalizado a uma página ou site do Elementor são as seguintes:
- Adicione o código CSS por meio do elemento HTML.
- Através do plugin Código de trecho.
- Usando o Customizador de Tema do Elementor
Método 1: Adicionar código CSS do elemento HTML do Elementor
Use este método se desejar adicionar CSS apenas a uma única página.
Etapa 1: arraste e solte o elemento HTML Elementor
Você pode colocar esse elemento HTML em qualquer lugar da página e ele funcionará perfeitamente.
Etapa 2: Clique no ícone Editar HTML
Clique no ícone Editar html à direita do elemento HTML Elementor. Clicar nele abrirá uma caixa de ferramentas de edição de HTML no lado esquerdo da tela.
Etapa 3: adicione seu código CSS
- Clique na aba Conteúdo e abra a lista suspensa Código HTML.
- Coloque seu código CSS no balizas.
Método 2: CSS personalizado para Elementor por meio do plug-in Code Snippets
Benefícios de usar o plug-in Code Snippets:
- Se você deseja alterar ou atualizar seu tema WordPress, o CSS sempre será aplicado.
- Esta é a maneira mais conveniente e eficiente de adicionar código CSS porque você pode ativar ou desativar o código CSS como plug-ins.
Etapa 1: Abra o menu de extensões em seu painel
Etapa 2: adicionar um novo plug-in
Clique no botão adicionar »Para acessar a página para adicionar novos plug-ins.
- Procure o plugin " trechos de código "
- Instale clicando no botão instalar agora uma vez que os resultados da pesquisa são positivos.
Etapa 3: ativar o plugin
Clique no botão ativar »Assim que a instalação for concluída para ativar o plugin Partes de codigo.
Etapa 4: abra a página do plug-in e adicione um snippet de código
- Abra o menu Extratos do seu painel
- Clique no botão Nouveau para adicionar um novo trecho de código
Etapa 5: crie um snippet e ative-o
- Dê um nome ao seu snippet de código.
- Dentro da tag, escreva seu código. Este código está disponível abaixo para cópia.
- Clique no botão Salvar alterações Para salvar o trecho de código.
- Após salvar o CSS, clique em " ativar Para ativar o código CSS.
Copiar código
add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );Método 3: usar o personalizador de tema Elementor
Observação: Tenha cuidado antes de usar este método porque se você mudar o tema você perderá este CSS personalizado.
Etapa 1: Abra o personalizador de tema
Vá para o seu site e clique na opção personalizar na barra de navegação superior. Isso abrirá uma janela de personalização do tema.
Etapa 2: Clique na guia CSS adicional
Isso abrirá a página de entrada do CSS.
Etapa 3: adicione seu código CSS
Bom ! Agora você sabe como adicionar CSS personalizado facilmente a uma página ou site do Elementor. Isso tornará o design de páginas da web exclusivas no Elementor Free mais flexível.
Obtenha o Elementor Pro agora!
Descubra também alguns plugins premium do WordPress
Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.
Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.
1. FileBird
Você já se esforçou para gerenciar milhares de arquivos de imagem, vídeo ou documento que você carregou no seu FTP do WordPress? sim ou não, não importa, o importante é saber que o WordPress Plugin FileBird irá ajudá-lo a gerenciar seus arquivos de mídia com facilidade e trazer mais poder à sua biblioteca.
Sua interface de usuário perfeita e menu de contexto permitem que os usuários arrastem e soltem arquivos em pastas ou tenham os direitos necessários para criar, renomear ou excluir rapidamente pastas da mesma maneira que você faz no seu computador.
Com este plugin em mãos, seus arquivos de mídia serão sistematicamente organizados e você pode facilmente selecionar uma imagem para inserir em uma página ou publicá-la. Além disso, este plug-in é totalmente compatível com os plug-ins mais populares, especialmente com WooCommerce, e também suporta um grande número de idiomas.
Para saber mais, descubra Como gerenciar arquivos e pastas WordPress
Então, se você quiser dar um impulso ao gerenciando sua biblioteca de mídia, o WordPress Plugin FileBird pode ser sua arma secreta.
Descarregar | Demo | hospedagem na web
2. Categorias expansíveis finais do WooCommerce
Ce WordPress Plugin permite que você modifique facilmente as longas listas de categorias chatas do WooCommerce e as substitua por diferentes níveis de subitens em um menu de acordeão.
As suas principais funcionalidades são: a possibilidade de o activar e finalmente funcionar de forma automática (sem necessidade de parâmetros!), O suporte a vários níveis de categorias (categorias, subcategorias, etc.), o realce de a categoria ativa, a abertura de todas as categorias pai se a categoria atual estiver dentro, compatibilidade com qualquer Tema WooCommerce, sensível ao desejo, atualizações gratuitas e um suporte ao cliente muito ativo.
Descarregar | Demo | hospedagem na web
3. WavePlayer
Como você pode imaginar pelo nome, WavePlayer é um plugin de reprodutor de áudio que usa a forma de onda do arquivo de áudio reproduzido. Com este plugin você poderá hospedar faixas ou simplesmente integrá-las a outros serviços.hospedagem na nuvem, como SoundCloud.
Também pode ser usado para fins de podcasting e oferece outros recursos como: suporte a HTML5, layout responsivo, integração com WooCommerce, etc ...
Você também poderá criar visualmente uma lista de reprodução antes de publicá-la. Outra característica essencial é sua velocidade e eficiência.
Descarregar | Demo | hospedagem na web
Recursos Recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- Como comprimir e redimensionar imagens em WordPress
- Como ter um endereço de e-mail com o seu WordPress hospedagem
- Como renomear imagens em um blog WordPress
- Como encontrar o link para a página de login do WordPress
Conclusão
Aqui ! É isso para este tutorial, esperamos que ajude você a adicionar CSS personalizado ao Elementor gratuitamente. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.
Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.
...
