Como Adicionar CSS Personalizado no Elementor (5 Métodos)

Um dos maiores pontos de venda do uso de construtores de páginas como o Elementor é que você tem acesso a elementos de página pré-construídos, ou “widgets”. Os widgets do Elementor incluem muitas opções de customização e estilo. Entretanto, às vezes a única maneira de aplicar um estilo particular é com Folhas de Estilo em Cascata (CSS).

O CSS lhe dá um grau incrível de controle sobre cada componente do seu site. Adicioná-lo ao WordPress é simples, se você estiver familiarizado com o idioma. O Elementor também oferece várias opções para adicionar CSS personalizados.

Neste artigo, vamos falar sobre o que é CSS e como você pode adicionar um estilo personalizado no Elementor. Finalmente, vamos discutir algumas das melhores práticas para o uso do CSS no WordPress. Vamos começar!

O que é CSS?

CSS é o que chamamos de linguagem de “folha de estilo”. Você pode usar as folhas de estilo CSS para adicionar estilo personalizado aos documentos HTML ou XML. Usando CSS, você pode pegar uma página HTML básica e transformá-la em um design de aparência moderna.

Pense no CSS como uma linguagem que descreve como os elementos devem aparecer em um navegador. Ele funciona em todos os navegadores e é um dos principais idiomas da internet.

Por exemplo, este é o código CSS que você usaria para atribuir uma cor de fundo ao corpo de um documento HTML:

body {

background-color: red;

}

Você pode usar CSS para aplicar estilos a componentes específicos, classes e IDs em HTML. Por exemplo, o seguinte trecho aplicaria uma cor de texto específica e alinhamento a todos os H2s em uma página:

h2 {

color: black;

text-align: left;

}

Normalmente, quando você carrega uma página HTML, ela também carregará uma folha de estilo separada que inclui todo o código CSS. Isto significa que você pode reutilizar as folhas de estilo em várias páginas.

Você é livre para aplicar o código CSS diretamente em qualquer página HTML. Você também pode usá-lo “inline”. Este é um termo que se refere ao código CSS que se aplica a um único elemento HTML e reside dentro daquele arquivo.

Aqui está um exemplo de CSS em linha para um cabeçalho H2 específico:

<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>

É considerado melhor prática adicionar o CSS a uma folha de estilo separada. Entretanto, uma das muitas vantagens de usar o WordPress e Elementor é que você pode adicionar CSS sem editar arquivos manualmente. Vamos dar uma olhada de perto em como ele funciona.

Opções personalizadas de CSS no Elementor

Se você está familiarizado com o Elementor, você saberá que o construtor usa seções, colunas e widgets para ajudá-lo a montar as páginas. As seções contêm uma ou várias colunas, e cada coluna pode ter vários módulos:

Uma das melhores partes do uso do Elementor é que você pode adicionar código CSS separado no nível de seção, coluna e widget. Quando você passar o mouse sobre uma seção, você pode selecionar o ícone de seis pontos para abrir o menu Edit Section no lado esquerdo da tela:

Se você mudar para a aba Advanced dentro do menu Edit Section, você verá uma seção Custom CSS. Dentro, você encontrará um campo que permite que você adicione código para aquela seção específica:

Quando você edita colunas e widgets, você vai notar que você tem acesso às mesmas três abas em seus respectivos menus de configuração. As seções, colunas e widgets incluem todos layouts, estilo e configurações avançadas.

Para adicionar CSS personalizado a uma coluna, passe o mouse sobre ela e selecione o ícone de duas colunas no canto superior direito do elemento. Então, navegue até a opção Advanced e abra a seção Custom CSS:

Você pode seguir o mesmo processo para adicionar CSS personalizado a um widget do Elementor. Basta selecionar o widget que você deseja personalizar e ir diretamente para a aba Advanced > Custom CSS:

Adicionar CSS personalizado a elementos específicos dentro do construtor de páginas do Elementor é muito simples. No entanto, tenha em mente que o estilo só se aplicará a esses elementos. Se você quiser adicionar CSS personalizados que afetem todo o seu site, você precisará usar uma abordagem diferente.

Como adicionar CSS personalizados usando o Elementor (5 Métodos)

Nesta seção, vamos explorar outras formas de adicionar o CSS personalizado do Elementor. Cobriremos métodos que aplicam CSS em todo o seu site, a páginas específicas, e a widgets do Elementor.

Método 1: Use o Widget HTML do Elementor

O Elementor permite que você adicione CSS personalizado a qualquer um de seus widgets. No entanto, em alguns casos, você pode querer adicionar elementos manualmente usando HTML e CSS. Nesses casos, você precisará usar o widget HTML:

O widget HTML pode analisar HTML, CSS, e JavaScript. Você pode adicionar qualquer código que quiser dentro do campo Código HTML e se for válido, o Elementor irá exibi-lo como um widget:

O widget HTML suporta tanto o CSS inline quanto o CSS autônomo. Qualquer código que você adicionar usando o widget só afetará esse elemento único.

Método 2: O menu de configurações do Site Elementor

O Elementor inclui uma coleção de configurações globais que se parecem com as opções que você pode encontrar no Personalizador WordPress. Para acessar o menu Site Settings, abra o editor e clique no menu hambúrguer no canto superior esquerdo da tela:

Na página seguinte, selecione a opção Site Settings:

Dentro você verá uma coleção de configurações que permitem que você personalize o estilo do seu site. Qualquer mudança que você fizer dentro deste menu será aplicada a todo o seu site, mesmo que você esteja tecnicamente editando apenas uma única página.

Você pode ler sobre como usar o menu Site Settings para personalizar a sua página no site oficial do Elementor. Por enquanto, a única seção que nos interessa é a aba Custom CSS. Abra-a e você verá um campo que se parece exatamente com as opções Custom CSS para seções, widgets e colunas:

Qualquer CSS personalizado que você adicionar aqui irá afetar todo o seu site. Se você pretende apenas personalizar elementos específicos, recomendamos que você use uma abordagem mais direcionada (como a adição de CSS diretamente a um widget).

Método 3: Use o customizador do WordPress

O WordPress Customizer também permite que você adicione CSS personalizados em todo o site. Para fazer isso, vá em Appearance > Customize e selecione a opção Additional CSS no menu do lado esquerdo:

Entretanto, vale a pena notar que os campos de código do Elementor são mais amigáveis do que os campos disponíveis no Customizer. Se você já está usando o Elementor para a construção do site, não há razão para adicionar CSS personalizados através do Customizer.

Método 4: Arquivos CSS personalizados Enqueue

Se você está confortável para editar arquivos WordPress e acessar seu site através de um cliente FTP (File Transfer Protocol), você pode consultar uma folha de estilo CSS para carregar com o Elementor. Esta abordagem exige que você adicione código ao arquivo functions.php do WordPress.

Para acessar o arquivo functions.php , conecte-se ao seu site via FTP e vá para a pasta raiz do WordPress. Abra a pasta, encontre o arquivo functions.php e edite-o.

Aqui está um exemplo do código que você quer adicionar ao arquivo:

add_action( 'elementor/frontend/before_enqueue_scripts', function() {

wp_enqueue_script(

'custom-stylesheet',

get_stylesheet_uri()

);

} );

Esse código usa o before_enqueue_scriptshook para carregar uma folha de estilo chamada custom-stylesheet. Nós também usamos a função get_stylesheet_urifunction para apontar para a localização da folha de estilo no servidor.

Idealmente, você adicionará a folha de estilo personalizada dentro do diretório do seu child theme ou na própria pasta Temas. A folha de estilos pode conter qualquer código CSS do Elementor que você quiser. O snippet que você adicionou ao functions.php garante que o código só será carregado quando o Elementor estiver ativa em seu site.

Método 5: Use um plugin CSS

Existem vários plugins que permitem que você adicione CSS personalizados ao seu site sem usar o Customizer ou os construtores de páginas. Uma de nossas ferramentas favoritas para o trabalho é chamada de Simple Custom CSS and JS:

Com o Simple Custom CSS e JS, você tem a opção de adicionar código diretamente aos elementos de cabeçalho e rodapé do seu tema. Para começar, vá para Custom CSS & JS > Add Custom CSS e clique em Add CSS Code.

Um editor CSS básico aparecerá à esquerda. Para a direita, você pode configurar se deseja carregar o código CSS em uma folha de estilo externa ou internamente. Você também pode decidir se o código deve ir no cabeçalho ou no rodapé:

Quando você terminar de editar o código CSS, pressione o botão Publish. Você pode precisar mudar para uma visão front-end para ver o código em ação.

Melhores práticas para criar CSS personalizado no Elementor

Sempre que você estiver lidando com CSS personalizado ou adicionando qualquer tipo de código ao seu site, você fará bem em manter as seguintes melhores práticas em mente. Vamos começar com o uso de um child theme.

Use um child theme do WordPress

Se você quiser mudar qualquer parte do estilo do seu tema usando CSS, recomendamos que você use um child theme. Um tema “criança” é um modelo que herda todos os estilos de um tema designado.

Desta forma, se você fizer qualquer mudança no tema original, elas não terão impacto nas customizações que você adiciona à criança. Além disso, quando você atualizar seu tema, ele irá manter estas mudanças.

Use um pré-processador de código para uma escrita mais fácil

Um dos maiores desafios de adicionar código dentro do WordPress ou usar o Elementor é que você não tem acesso a todas as funcionalidades que os editores de código modernos oferecem. Ao invés de usar código usando editores básicos no local, nós recomendamos que você use o seu pré-processador favorito. Então, você pode simplesmente copiar e colar seu código no WordPress.

Considere o uso de um site de teste

Sempre que você estiver planejando fazer grandes mudanças no WordPress, nós recomendamos que você use um site de teste. Sites de testes permitem que você teste as mudanças de estilo e funcionalidade sem o risco de quebrar nada no seu site ao vivo.

Alguns web hosts fornecem a você acesso à funcionalidade de teste a partir do seu painel de controle. Se você usa Kinsta, você pode selecionar seu site usando o painel MyKinsta e alternar entre os ambientes produção e de teste:

Caso seu provedor de hospedagem não oferece funcionalidade de teste, você pode usar um ambiente de desenvolvimento WordPress local, como o DevKinsta, para fins de teste. Alternativamente, você pode querer considerar mudar de provedor de hospedagem.

Resumo

Adicionar CSS personalizado no Elementor é mais fácil do que você pode imaginar. O construtor de páginas oferece vários métodos para adicionar código a seções, colunas, widgets e para todo o seu site.

Recapitulando, aqui estão cinco maneiras principais de adicionar CSS personalizados no Elementor (ou ao seu site em geral):

1. Use o Elementor HTML Widget.
2. Use o menu de configurações do site Elementor.
3. Use o Customizador do WordPress.
4. Solicite arquivos CSS personalizados.
5. Use um plugin CSS.

Em Kinsta, nossos planos são projetados para ajudar você a construir o site dos seus sonhos com construtores de páginas como o Elementor. Confira os nossos planos ou fale com as vendas para encontrar o plano certo para você.

Salman Ravoof

Salman Ravoof é um desenvolvedor web autodidata, escritor, criador e grande admirador de Software Livre e de Código Aberto (FOSS). Além de tecnologia, ele se entusiasma com ciência, filosofia, fotografia, artes, gatos e comida. Saiba mais sobre ele em seu site e conecte-se com Salman no X.

• Site
• LinkedIn
• Twitter