{"id":51292,"date":"2022-07-18T05:39:51","date_gmt":"2022-07-18T08:39:51","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=51292&preview=true&preview_id=51292"},"modified":"2025-01-20T07:05:56","modified_gmt":"2025-01-20T10:05:56","slug":"css-personalizado-elementor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/","title":{"rendered":"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)"},"content":{"rendered":"

Um dos maiores pontos de venda do uso de construtores de p\u00e1ginas<\/a> como o Elementor \u00e9 que voc\u00ea tem acesso a elementos de p\u00e1gina pr\u00e9-constru\u00eddos, ou “widgets”. Os widgets do Elementor incluem muitas op\u00e7\u00f5es de customiza\u00e7\u00e3o e estilo. Entretanto, \u00e0s vezes a \u00fanica maneira de aplicar um estilo particular \u00e9 com Folhas de Estilo em Cascata (CSS)<\/a>.<\/p>\n

O CSS lhe d\u00e1 um grau incr\u00edvel de controle sobre cada componente do seu site. Adicion\u00e1-lo ao WordPress \u00e9 simples, se voc\u00ea estiver familiarizado com o idioma. O Elementor tamb\u00e9m oferece v\u00e1rias op\u00e7\u00f5es para adicionar CSS personalizados.<\/p>\n

Neste artigo, vamos falar sobre o que \u00e9 CSS e como voc\u00ea pode adicionar um estilo personalizado no Elementor<\/a>. Finalmente, vamos discutir algumas das melhores pr\u00e1ticas para o uso do CSS no WordPress. Vamos come\u00e7ar!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que \u00e9 CSS?<\/h2>\n

CSS \u00e9 o que chamamos de linguagem de “folha de estilo”. Voc\u00ea pode usar as folhas de estilo CSS para adicionar estilo personalizado aos documentos HTML ou XML<\/a>. Usando CSS, voc\u00ea pode pegar uma p\u00e1gina HTML b\u00e1sica e transform\u00e1-la em um design de apar\u00eancia moderna<\/a>.<\/p>\n

Pense no CSS como uma linguagem que descreve como os elementos devem aparecer em um navegador. Ele funciona em todos os navegadores e \u00e9 um dos principais idiomas da internet.<\/p>\n

Por exemplo, este \u00e9 o c\u00f3digo CSS que voc\u00ea usaria para atribuir uma cor de fundo ao corpo de um documento HTML:<\/p>\n

body {\n\nbackground-color: red;\n\n}<\/code><\/pre>\n
Voc\u00ea pode usar CSS para aplicar estilos a componentes espec\u00edficos, classes e IDs em HTML. Por exemplo, o seguinte trecho aplicaria uma cor de texto espec\u00edfica e alinhamento a todos os H2s em uma p\u00e1gina:<\/p>\n
h2 {\n\ncolor: black;\n\ntext-align: left;\n\n}<\/code><\/pre>\n
Normalmente, quando voc\u00ea carrega uma p\u00e1gina HTML, ela tamb\u00e9m carregar\u00e1 uma folha de estilo separada que inclui todo o c\u00f3digo CSS. Isto significa que voc\u00ea pode reutilizar as folhas de estilo em v\u00e1rias p\u00e1ginas.<\/p>\n
Voc\u00ea \u00e9 livre para aplicar o c\u00f3digo CSS diretamente em qualquer p\u00e1gina HTML<\/a>. Voc\u00ea tamb\u00e9m pode us\u00e1-lo “inline”. Este \u00e9 um termo que se refere ao c\u00f3digo CSS que se aplica a um \u00fanico elemento HTML e reside dentro daquele arquivo.<\/p>\n
Aqui est\u00e1 um exemplo de CSS em linha para um cabe\u00e7alho H2 espec\u00edfico:<\/p>\n
<h2 style=\"color:black;text-align:center;\">This is where the heading text goes<\/h1><\/code><\/pre>\n
\u00c9 considerado melhor pr\u00e1tica adicionar o CSS<\/a> a uma folha de estilo separada. Entretanto, uma das muitas vantagens de usar o WordPress e Elementor<\/a> \u00e9 que voc\u00ea pode adicionar CSS sem editar arquivos manualmente. Vamos dar uma olhada de perto em como ele funciona.<\/p>\n\n
Op\u00e7\u00f5es personalizadas de CSS no Elementor<\/h2>\n
Se voc\u00ea est\u00e1 familiarizado com o Elementor, voc\u00ea saber\u00e1 que o construtor usa se\u00e7\u00f5es, colunas e widgets para ajud\u00e1-lo a montar as p\u00e1ginas. As se\u00e7\u00f5es cont\u00eam uma ou v\u00e1rias colunas, e cada coluna pode ter v\u00e1rios m\u00f3dulos:<\/p>\n
\"Colunas
Colunas e m\u00f3dulos no Elementor<\/figcaption><\/figure>\n
Uma das melhores partes do uso do Elementor \u00e9 que voc\u00ea pode adicionar c\u00f3digo CSS separado no n\u00edvel de se\u00e7\u00e3o, coluna e widget. Quando voc\u00ea passar o mouse sobre uma se\u00e7\u00e3o, voc\u00ea pode selecionar o \u00edcone de seis pontos para abrir o menu Edit Section<\/strong>\u00a0<\/strong>no lado esquerdo da tela:<\/p>\n
\"Adicionar
Adicionar c\u00f3digo CSS separado no n\u00edvel de se\u00e7\u00e3o, coluna e widget<\/figcaption><\/figure>\n
Se voc\u00ea mudar para a aba Advanced <\/strong>dentro do menu Edit Section<\/strong>, voc\u00ea ver\u00e1 uma se\u00e7\u00e3o Custom CSS.<\/strong>\u00a0Dentro, voc\u00ea encontrar\u00e1 um campo que permite que voc\u00ea adicione c\u00f3digo para aquela se\u00e7\u00e3o espec\u00edfica:<\/p>\n
A op\u00e7\u00e3o Custom CSS \u00e9 encontrada sob a aba “Advanced”<\/figcaption><\/figure>\n
Quando voc\u00ea edita colunas e widgets, voc\u00ea vai notar que voc\u00ea tem acesso \u00e0s mesmas tr\u00eas abas em seus respectivos menus de configura\u00e7\u00e3o. As se\u00e7\u00f5es, colunas e widgets incluem todos layouts, estilo e configura\u00e7\u00f5es avan\u00e7adas.<\/p>\n
Para adicionar CSS personalizado a uma coluna, passe o mouse sobre ela e selecione o \u00edcone de duas colunas no canto superior direito do elemento. Ent\u00e3o, navegue at\u00e9 a op\u00e7\u00e3o Advanced <\/strong>e abra a se\u00e7\u00e3o Custom CSS<\/strong>:<\/strong><\/p>\n
\"Adicionar
Adicionar CSS personalizado a uma \u00fanica coluna<\/figcaption><\/figure>\n
Voc\u00ea pode seguir o mesmo processo para adicionar CSS personalizado a um widget do Elementor. Basta selecionar o widget que voc\u00ea deseja personalizar e ir diretamente para a aba Advanced > Custom CSS:<\/strong><\/p>\n
\"Voc\u00ea
Voc\u00ea tamb\u00e9m pode adicionar CSS em um widget<\/figcaption><\/figure>\n
Adicionar CSS personalizado a elementos espec\u00edficos dentro do construtor de p\u00e1ginas do Elementor \u00e9 muito simples. No entanto, tenha em mente que o estilo s\u00f3 se aplicar\u00e1 a esses elementos. Se voc\u00ea quiser adicionar CSS personalizados que afetem todo o seu site, voc\u00ea precisar\u00e1 usar uma abordagem diferente.<\/p>\n
Como adicionar CSS personalizados usando o Elementor (5 M\u00e9todos)<\/h2>\n
Nesta se\u00e7\u00e3o, vamos explorar outras formas de adicionar o CSS personalizado do Elementor. Cobriremos m\u00e9todos que aplicam CSS em todo o seu site, a p\u00e1ginas espec\u00edficas, e a widgets do Elementor.<\/p>\n
M\u00e9todo 1: Use o Widget HTML do Elementor<\/h3>\n
O Elementor permite que voc\u00ea adicione CSS personalizado a qualquer um de seus widgets. No entanto, em alguns casos, voc\u00ea pode querer adicionar elementos manualmente usando HTML<\/a> e CSS. Nesses casos, voc\u00ea precisar\u00e1 usar o widget HTML:<\/b><\/p>\n
\"Use
Use o widget HTML<\/figcaption><\/figure>\n
O widget HTML <\/strong>pode analisar HTML, CSS, e JavaScript<\/a>. Voc\u00ea pode adicionar qualquer c\u00f3digo que quiser dentro do campo C\u00f3digo HTML <\/strong>e se for v\u00e1lido, o Elementor ir\u00e1 exibi-lo como um widget:<\/p>\n
\"Adicione
Adicione qualquer c\u00f3digo dentro do widget<\/figcaption><\/figure>\n
O widget HTML <\/strong>suporta tanto o CSS inline quanto o CSS aut\u00f4nomo. Qualquer c\u00f3digo que voc\u00ea adicionar usando o widget s\u00f3 afetar\u00e1 esse elemento \u00fanico.<\/p>\n
M\u00e9todo 2: O menu de configura\u00e7\u00f5es do Site Elementor<\/h3>\n
O Elementor inclui uma cole\u00e7\u00e3o de configura\u00e7\u00f5es globais que se parecem com as op\u00e7\u00f5es que voc\u00ea pode encontrar no Personalizador WordPress. Para acessar o menu Site Settings<\/strong>, abra o editor e clique no menu hamb\u00farguer no canto superior esquerdo da tela:<\/p>\n
\"Clique
Clique no menu hamb\u00farguer dispon\u00edvel<\/figcaption><\/figure>\n
Na p\u00e1gina seguinte, selecione a op\u00e7\u00e3o Site Settings<\/strong>:<\/strong><\/p>\n
Clique na op\u00e7\u00e3o “Site Settings”<\/figcaption><\/figure>\n
Dentro voc\u00ea ver\u00e1 uma cole\u00e7\u00e3o de configura\u00e7\u00f5es que permitem que voc\u00ea personalize o estilo do seu site. Qualquer mudan\u00e7a que voc\u00ea fizer dentro deste menu ser\u00e1 aplicada a todo o seu site, mesmo que voc\u00ea esteja tecnicamente editando apenas uma \u00fanica p\u00e1gina.<\/p>\n
Voc\u00ea pode ler sobre como usar o menu Site Settings<\/strong><\/a>\u00a0para personalizar a sua p\u00e1gina no site oficial do Elementor. Por enquanto, a \u00fanica se\u00e7\u00e3o que nos interessa \u00e9 a aba Custom CSS.<\/strong>\u00a0Abra-a e voc\u00ea ver\u00e1 um campo que se parece exatamente com as op\u00e7\u00f5es Custom CSS para se\u00e7\u00f5es, widgets e colunas:<\/p>\n
\"A
A adi\u00e7\u00e3o de CSS personalizados aqui afetar\u00e1 todo o site<\/figcaption><\/figure>\n
Qualquer CSS personalizado que voc\u00ea adicionar aqui ir\u00e1 afetar todo o seu site. Se voc\u00ea pretende apenas personalizar elementos espec\u00edficos, recomendamos que voc\u00ea use uma abordagem mais direcionada (como a adi\u00e7\u00e3o de CSS diretamente a um widget).<\/p>\n
M\u00e9todo 3: Use o customizador do WordPress<\/h3>\n
O WordPress Customizer tamb\u00e9m permite que voc\u00ea adicione CSS personalizados em todo o site. Para fazer isso, v\u00e1 em Appearance > Customize<\/strong>\u00a0<\/strong>e selecione a op\u00e7\u00e3o Additional <\/strong>CSS <\/strong>no menu do lado esquerdo:<\/p>\n
\"Use
Use o Personalizador WordPress para adicionar CSS<\/figcaption><\/figure>\n
Entretanto, vale a pena notar que os campos de c\u00f3digo do Elementor s\u00e3o mais amig\u00e1veis do que os campos dispon\u00edveis no Customizer. Se voc\u00ea j\u00e1 est\u00e1 usando o Elementor para a constru\u00e7\u00e3o do site, n\u00e3o h\u00e1 raz\u00e3o para adicionar CSS personalizados atrav\u00e9s do Customizer.<\/p>\n
M\u00e9todo 4: Arquivos CSS personalizados Enqueue<\/h3>\n
Se voc\u00ea est\u00e1 confort\u00e1vel para editar arquivos WordPress e acessar seu site atrav\u00e9s de um cliente FTP (File Transfer Protocol)<\/a>, voc\u00ea pode consultar uma folha de estilo CSS para carregar com o Elementor. Esta abordagem exige que voc\u00ea adicione c\u00f3digo ao arquivo functions.php <\/strong>do WordPress.<\/p>\n
Para acessar o arquivo functions.php <\/strong>, conecte-se ao seu site via FTP e v\u00e1 para a pasta raiz <\/strong>do WordPress. Abra a pasta, encontre o arquivo functions.php <\/strong>e edite-o.<\/p>\n
Aqui est\u00e1 um exemplo do c\u00f3digo que voc\u00ea quer adicionar ao arquivo:<\/p>\n
add_action( 'elementor\/frontend\/before_enqueue_scripts', function() {\n\nwp_enqueue_script(\n\n'custom-stylesheet',\n\nget_stylesheet_uri()\n\n);\n\n} );<\/code><\/pre>\n
Esse c\u00f3digo usa o before_enqueue_scriptshook <\/strong>para carregar uma folha de estilo chamada custom-stylesheet<\/strong>. N\u00f3s tamb\u00e9m usamos a fun\u00e7\u00e3o get_stylesheet_urifunction <\/strong>para apontar para a localiza\u00e7\u00e3o da folha de estilo no servidor.<\/p>\n
Idealmente, voc\u00ea adicionar\u00e1 a folha de estilo personalizada dentro do diret\u00f3rio do seu child theme ou na pr\u00f3pria pasta Temas<\/b>. A folha de estilos pode conter qualquer c\u00f3digo CSS do Elementor que voc\u00ea quiser. O snippet que voc\u00ea adicionou ao functions.php <\/strong>garante que o c\u00f3digo s\u00f3 ser\u00e1 carregado quando o Elementor estiver ativa em seu site.<\/p>\n
M\u00e9todo 5: Use um plugin CSS<\/h3>\n
Existem v\u00e1rios plugins que permitem que voc\u00ea adicione CSS personalizados ao seu site sem usar o Customizer ou os construtores de p\u00e1ginas<\/a>. Uma de nossas ferramentas favoritas para o trabalho \u00e9 chamada de Simple Custom CSS and JS<\/a>:<\/p>\n
\"Simple
Simple Custom CSS and JS<\/figcaption><\/figure>\n
Com o Simple Custom CSS e JS, voc\u00ea tem a op\u00e7\u00e3o de adicionar c\u00f3digo diretamente aos elementos de cabe\u00e7alho e rodap\u00e9 do seu tema. Para come\u00e7ar, v\u00e1 para Custom CSS & JS > Add Custom CSS <\/strong>e clique em Add CSS Code<\/strong>.<\/p>\n
Um editor CSS b\u00e1sico aparecer\u00e1 \u00e0 esquerda. Para a direita, voc\u00ea pode configurar se deseja carregar o c\u00f3digo CSS em uma folha de estilo externa<\/a> ou internamente. Voc\u00ea tamb\u00e9m pode decidir se o c\u00f3digo deve ir no cabe\u00e7alho ou no rodap\u00e9:<\/p>\n
\"Carregar
Carregar c\u00f3digo em uma folha de estilo externa<\/figcaption><\/figure>\n
Quando voc\u00ea terminar de editar o c\u00f3digo CSS, pressione o bot\u00e3o Publish<\/strong>. Voc\u00ea pode precisar mudar para uma vis\u00e3o front-end para ver o c\u00f3digo em a\u00e7\u00e3o.<\/p>\n
Melhores pr\u00e1ticas para criar CSS personalizado no Elementor<\/h2>\n
Sempre que voc\u00ea estiver lidando com CSS personalizado ou adicionando qualquer tipo de c\u00f3digo ao seu site, voc\u00ea far\u00e1 bem em manter as seguintes melhores pr\u00e1ticas em mente. Vamos come\u00e7ar com o uso de um child theme.<\/p>\n
Use um child theme do WordPress<\/h3>\n
Se voc\u00ea quiser mudar qualquer parte do estilo do seu tema<\/a> usando CSS, recomendamos que voc\u00ea use um child theme<\/a>. Um tema “crian\u00e7a” \u00e9 um modelo que herda todos os estilos de um tema designado.<\/p>\n
Desta forma, se voc\u00ea fizer qualquer mudan\u00e7a no tema original, elas n\u00e3o ter\u00e3o impacto nas customiza\u00e7\u00f5es que voc\u00ea adiciona \u00e0 crian\u00e7a. Al\u00e9m disso, quando voc\u00ea atualizar seu tema, ele ir\u00e1 manter estas mudan\u00e7as.<\/p>\n
Use um pr\u00e9-processador de c\u00f3digo para uma escrita mais f\u00e1cil<\/h3>\n
Um dos maiores desafios de adicionar c\u00f3digo dentro do WordPress ou usar o Elementor \u00e9 que voc\u00ea n\u00e3o tem acesso a todas as funcionalidades que os editores de c\u00f3digo modernos oferecem. Ao inv\u00e9s de usar c\u00f3digo usando editores b\u00e1sicos no local, n\u00f3s recomendamos que voc\u00ea use o seu pr\u00e9-processador favorito<\/a>. Ent\u00e3o, voc\u00ea pode simplesmente copiar e colar seu c\u00f3digo no WordPress.<\/p>\n
Considere o uso de um site de teste<\/h3>\n
Sempre que voc\u00ea estiver planejando fazer grandes mudan\u00e7as no WordPress, n\u00f3s recomendamos que voc\u00ea use um site de teste. Sites de testes permitem que voc\u00ea teste as mudan\u00e7as de estilo e funcionalidade sem o risco de quebrar nada no seu site ao vivo.<\/p>\n
Alguns web hosts fornecem a voc\u00ea acesso \u00e0 funcionalidade de teste a partir do seu painel de controle. Se voc\u00ea usa Kinsta, voc\u00ea pode selecionar seu site usando o painel MyKinsta<\/a> e alternar entre os ambientes produ\u00e7\u00e3o e de teste:<\/p>\n
\"O
O ambiente de teste no MyKinsta<\/figcaption><\/figure>\n
Caso seu provedor de hospedagem n\u00e3o oferece funcionalidade de teste<\/a>, voc\u00ea pode usar um ambiente de desenvolvimento WordPress local, como o DevKinsta<\/a>, para fins de teste. Alternativamente, voc\u00ea pode querer considerar mudar de provedor de hospedagem.<\/p>\n\n
Resumo<\/h2>\n
Adicionar CSS personalizado no Elementor \u00e9 mais f\u00e1cil do que voc\u00ea pode imaginar. O construtor de p\u00e1ginas oferece v\u00e1rios m\u00e9todos para adicionar c\u00f3digo a se\u00e7\u00f5es, colunas, widgets e para todo o seu site.<\/p>\n
Recapitulando, aqui est\u00e3o cinco maneiras principais de adicionar CSS personalizados no Elementor (ou ao seu site em geral):<\/p>\n
    \n
  1. Use o Elementor HTML Widget.<\/li>\n
  2. Use o menu de configura\u00e7\u00f5es do site Elementor.<\/li>\n
  3. Use o Customizador do WordPress.<\/li>\n
  4. Solicite arquivos CSS personalizados.<\/li>\n
  5. Use um plugin CSS.<\/li>\n<\/ol>\n
    Em Kinsta, nossos planos s\u00e3o projetados para ajudar voc\u00ea a construir o site dos seus sonhos com construtores de p\u00e1ginas como o Elementor. Confira os nossos planos<\/a> ou fale com as vendas para encontrar o plano certo para voc\u00ea.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Um dos maiores pontos de venda do uso de construtores de p\u00e1ginas como o Elementor \u00e9 que voc\u00ea tem acesso a elementos de p\u00e1gina pr\u00e9-constru\u00eddos, ou …<\/p>\n","protected":false},"author":117,"featured_media":51293,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[390,452,701],"topic":[1026],"class_list":["post-51292","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-css","tag-elementor","tag-page-builder","topic-desenvolvimento-wordpress"],"yoast_head":"\nComo Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)<\/title>\n<meta name=\"description\" content=\"N\u00e3o tem certeza de onde adicionar o CSS personalizado no Elementor? Aprenda exatamente como adicionar CSS personalizado no Elementor e ajude a fazer seu site se destacar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)\" \/>\n<meta property=\"og:description\" content=\"N\u00e3o tem certeza de onde adicionar o CSS personalizado no Elementor? Aprenda exatamente como adicionar CSS personalizado no Elementor e ajude a fazer seu site se destacar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-18T08:39:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T10:05:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"N\u00e3o tem certeza de onde adicionar o CSS personalizado no Elementor? Aprenda exatamente como adicionar CSS personalizado no Elementor e ajude a fazer seu site se destacar.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)\",\"datePublished\":\"2022-07-18T08:39:51+00:00\",\"dateModified\":\"2025-01-20T10:05:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/\"},\"wordCount\":2264,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg\",\"keywords\":[\"css\",\"Elementor\",\"page builder\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/\",\"name\":\"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg\",\"datePublished\":\"2022-07-18T08:39:51+00:00\",\"dateModified\":\"2025-01-20T10:05:56+00:00\",\"description\":\"N\u00e3o tem certeza de onde adicionar o CSS personalizado no Elementor? Aprenda exatamente como adicionar CSS personalizado no Elementor e ajude a fazer seu site se destacar.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)","description":"N\u00e3o tem certeza de onde adicionar o CSS personalizado no Elementor? Aprenda exatamente como adicionar CSS personalizado no Elementor e ajude a fazer seu site se destacar.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)","og_description":"N\u00e3o tem certeza de onde adicionar o CSS personalizado no Elementor? Aprenda exatamente como adicionar CSS personalizado no Elementor e ajude a fazer seu site se destacar.","og_url":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2022-07-18T08:39:51+00:00","article_modified_time":"2025-01-20T10:05:56+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"N\u00e3o tem certeza de onde adicionar o CSS personalizado no Elementor? Aprenda exatamente como adicionar CSS personalizado no Elementor e ajude a fazer seu site se destacar.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Salman Ravoof","Tempo estimado de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)","datePublished":"2022-07-18T08:39:51+00:00","dateModified":"2025-01-20T10:05:56+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/"},"wordCount":2264,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg","keywords":["css","Elementor","page builder"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/","url":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/","name":"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg","datePublished":"2022-07-18T08:39:51+00:00","dateModified":"2025-01-20T10:05:56+00:00","description":"N\u00e3o tem certeza de onde adicionar o CSS personalizado no Elementor? Aprenda exatamente como adicionar CSS personalizado no Elementor e ajude a fazer seu site se destacar.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/07\/elementor-custom-css.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/css-personalizado-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Adicionar CSS Personalizado no Elementor (5 M\u00e9todos)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/51292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=51292"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/51292\/revisions"}],"predecessor-version":[{"id":70855,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/51292\/revisions\/70855"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/es"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/en"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/translations\/dk"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51292\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/51293"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=51292"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=51292"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=51292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}