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 Elementor HTML. Ao clicar nele, uma caixa de ferramentas de edição HTML aparecerá à esquerda da tela.

Etapa 3: adicione seu código CSS

  1. Clique na aba Conteúdo e abra a lista suspensa Código HTML.
  2. 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.

  1. Procure o plugin " trechos de código "
  2. Instale clicando no botão instalar agora uma vez que os resultados da pesquisa são positivos.

Etapa 3: ativar o plugin

CSS personalizado no Elementor

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

  1. Abra o menu Extratos do seu painel
  2. Clique no botão Nouveau para adicionar um novo trecho de código

Etapa 5: crie um snippet e ative-o

  1. Dê um nome ao seu snippet de código.
  2. Dentro da tag, escreva seu código. Este código está disponível abaixo para cópia.
  3. Clique no botão Salvar alterações Para salvar o trecho de código.
  4. 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

CSS personalizado no Elementor

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

CSS personalizado no Elementor

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

FilebirdGenericName

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.

DescarregarDemo | hospedagem na web

2. Categorias expansíveis finais do WooCommerce

Categorias de woocommerce expansíveis

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.

Plug-ins Wordpress premium do Waveplayer para adicionar reprodutor de áudio

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.

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.

...  

Pin It on Pinterest