![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/15-3-1024x548.jpg\")
<\/figure><\/div>M\u00e9todo 1: Utilizar a funcionalidade CSS personalizada incorporada no WordPress<\/h3>
O WordPress tem uma op\u00e7\u00e3o incorporada para adicionar CSS personalizado diretamente no painel de controlo. \u00c9 ideal para pequenos ajustes e \u00e9 f\u00e1cil para principiantes.<\/p>
- Aceda ao Personalizador<\/strong>
- Inicie sess\u00e3o e v\u00e1 para Apar\u00eancia > Personalizar<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-524.png\")
<\/figure><\/div>- Selecione \"CSS adicionais\"<\/strong>
- Na barra lateral esquerda, clique em CSS adicional<\/strong>. Aparecer\u00e1 uma caixa de texto onde pode introduzir o seu c\u00f3digo CSS.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-526.png\")
<\/figure><\/div>- Adicione o seu CSS personalizado<\/strong>
- Introduza o seu c\u00f3digo. Por exemplo:<\/li><\/ul><\/li><\/ol>
- Pr\u00e9-visualizar e publicar<\/strong>
- Ver\u00e1 uma pr\u00e9-visualiza\u00e7\u00e3o em direto das altera\u00e7\u00f5es. Quando estiver satisfeito, clique em Publicar<\/strong>.<\/li><\/ul><\/li><\/ol>
Melhor para<\/strong>: Ajustes simples, sem necessidade de editar o ficheiro do tema.<\/p>
M\u00e9todo 2: Utilizar o ficheiro Style.css do tema filho<\/h3>
\u00c9 prefer\u00edvel utilizar a fun\u00e7\u00e3o style.css<\/strong> para altera\u00e7\u00f5es mais significativas. Desta forma, as suas edi\u00e7\u00f5es permanecem seguras mesmo ap\u00f3s as actualiza\u00e7\u00f5es do tema.<\/p>
- Ativar um tema infantil<\/strong>
- Se ainda precisar de come\u00e7ar a utilizar um, crie ou instale um tema infantil. Plug-ins como Configurador de temas infantis<\/strong> torne-o f\u00e1cil.<\/li><\/ul><\/li><\/ol>
<\/figure>
- Aceda ao ficheiro Style.css<\/strong>
- Em Apar\u00eancia > Editor de ficheiros de temas<\/strong>selecione o tema filho do seu style.css<\/mark> ficheiro.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-533.png\")
<\/figure><\/div>- Adicione o seu CSS<\/strong>
- Adicione o seu CSS personalizado no fundo<\/strong> do ficheiro. Exemplo:<\/li><\/ul><\/li><\/ol>
.custom-header { background-color: #2c3e50; color: #ffffff; }\n.custom-button { background-color: #e74c3c; color: #ffffff; padding: 10px 20px; border-radius: 5px; }<\/code><\/pre>- Guardar altera\u00e7\u00f5es<\/strong>
- Clique em Atualizar ficheiro<\/strong> para poupar.<\/li><\/ul><\/li><\/ol>
Melhor para<\/strong>: Altera\u00e7\u00f5es de estilo maiores que devem manter-se ap\u00f3s as actualiza\u00e7\u00f5es.<\/p>
M\u00e9todo 3: Adicionar CSS personalizado com um plug-in<\/h3>
Se preferir evitar a edi\u00e7\u00e3o de ficheiros ou temas infantis, os plug-ins podem gerir o CSS personalizado. Isto \u00e9 \u00f3timo para gerir o CSS em v\u00e1rias p\u00e1ginas.<\/p>
- CSS e JS personalizados simples<\/a><\/strong>: Leve e f\u00e1cil de adicionar CSS e JavaScript.<\/li>\n\n
- C\u00f3digo WPC<\/a><\/strong>: Adiciona CSS em todo o s\u00edtio ou por p\u00e1gina.<\/li>\n\n
- CSS do SiteOrigin<\/a><\/strong>: Editor visual para principiantes.<\/li><\/ul>
Exemplo de utiliza\u00e7\u00e3o do WPCode:<\/h4>
- Instale o WPCode<\/strong>
- Aceda a Plugins > Adicionar novo<\/strong> Plugin<\/strong>, procure por C\u00f3digo WPC<\/mark>, instale e active.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-535.png\")
<\/figure><\/div>- Crie um Novo snippet CSS<\/mark><\/strong>
- Dirija-se a Snippets de c\u00f3digo > Adicionar snippet<\/strong>. Escolha Snippet de CSS<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-536.png\")
<\/figure><\/div>- Escolha a coloca\u00e7\u00e3o<\/strong>
- Para que o CSS funcione em todo o s\u00edtio, selecione Cabe\u00e7alho de todo o site<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-537-1024x514.png\")
<\/figure><\/div>Melhor para<\/strong>: Gest\u00e3o f\u00e1cil de CSS sem tocar nos ficheiros do tema.<\/p>
M\u00e9todo 4: Adicionar CSS personalizado atrav\u00e9s de Construtores de P\u00e1ginas (Elementor, Divi)<\/h3>
Os construtores de p\u00e1ginas como o Elementor e o Divi t\u00eam normalmente op\u00e7\u00f5es de CSS incorporadas, o que simplifica a gest\u00e3o dos estilos.<\/p>
No Elementor:<\/h4>
- Selecione o elemento e o acesso Avan\u00e7ado<\/mark> Defini\u00e7\u00f5es<\/strong>
- No Elementor, selecione um elemento, v\u00e1 para Avan\u00e7ado<\/strong> defini\u00e7\u00f5es, e encontre CSS personalizado<\/strong> (Elementor Pro<\/mark>).<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-539.png\")
<\/figure><\/div>- Introduza o c\u00f3digo CSS<\/strong>
- Utilize a palavra-chave seletor para direcionar o elemento. Exemplo:<\/li><\/ul><\/li><\/ol>
seletor { background-color: #333; color: #fff; }<\/code><\/pre>Em Divi:<\/h4>
- Aceda \u00e0s Op\u00e7\u00f5es do tema<\/strong>
- Navegue at\u00e9 Divi > Op\u00e7\u00f5es do tema > CSS personalizado<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/1730364592936.png\")
<\/figure>- Introduza e guarde o c\u00f3digo CSS<\/strong>
- Adicione o seu CSS personalizado e guarde.<\/li><\/ul><\/li><\/ol>
Melhor para<\/strong> Os que j\u00e1 utilizam construtores de p\u00e1ginas com acesso f\u00e1cil a CSS personalizadas.<\/p>
M\u00e9todo 5: Adicionar CSS diretamente atrav\u00e9s de FTP ou Editor de C\u00f3digo<\/h3>
Se estiver familiarizado com o FTP e quiser ter controlo total, pode editar ficheiros CSS diretamente no servidor.<\/p>
Passos:<\/h4>
- Ligue-se atrav\u00e9s de FTP<\/strong>
- Utilize um cliente FTP (como o FileZilla) para se ligar ao seu s\u00edtio.<\/li><\/ul><\/li>\n\n
- Navegue at\u00e9 \u00e0 pasta de temas<\/strong>
- Aceda a wp-content\/themes\/your-child-theme\/ e abra style.css.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-542.png\")
<\/figure><\/div>- Editar e carregar<\/strong>
- Adicione o seu CSS personalizado, guarde e carregue.<\/li><\/ul><\/li><\/ol>
Melhor para<\/strong>: Utilizadores avan\u00e7ados que necessitam de um controlo total.<\/p>
Perguntas mais frequentes<\/h3>
1. Porque \u00e9 que o meu CSS personalizado n\u00e3o est\u00e1 a funcionar?<\/strong><\/p>
Limpar o seu browser cache<\/strong> ou quaisquer plug-ins de cache do site, pois o cache pode estar a bloquear as actualiza\u00e7\u00f5es.<\/p>
2. Como posso evitar que o CSS se perca durante as actualiza\u00e7\u00f5es?<\/strong><\/p>
Utilize um tema infantil<\/mark><\/strong> ou plugin para armazenar CSS em vez de modificar os ficheiros do tema principal.<\/p>","protected":false},"excerpt":{"rendered":"
O CSS personalizado d\u00e1-lhe controlo sobre o estilo do seu site WordPress, permitindo-lhe ajustar tudo, desde tipos de letra e cores a esquemas. Aqui tem um guia sobre como...<\/p>","protected":false},"author":10,"featured_media":5197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,85],"tags":[425,253],"class_list":["post-5165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-extensions","category-customized-content-type-cpt","tag-css-for-beginners","tag-wordpress-customization",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/5165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/comments?post=5165"}],"version-history":[{"count":1,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/5165\/revisions"}],"predecessor-version":[{"id":5198,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/5165\/revisions\/5198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media\/5197"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media?parent=5165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/categories?post=5165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/tags?post=5165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Adicione o seu CSS personalizado, guarde e carregue.<\/li><\/ul><\/li><\/ol>
- Editar e carregar<\/strong>
- Aceda a wp-content\/themes\/your-child-theme\/ e abra style.css.<\/li><\/ul><\/li><\/ol>
- Ligue-se atrav\u00e9s de FTP<\/strong>
- Adicione o seu CSS personalizado e guarde.<\/li><\/ul><\/li><\/ol>
- Introduza e guarde o c\u00f3digo CSS<\/strong>
- Navegue at\u00e9 Divi > Op\u00e7\u00f5es do tema > CSS personalizado<\/strong>.<\/li><\/ul><\/li><\/ol>
- Aceda \u00e0s Op\u00e7\u00f5es do tema<\/strong>
- Utilize a palavra-chave seletor para direcionar o elemento. Exemplo:<\/li><\/ul><\/li><\/ol>
- Introduza o c\u00f3digo CSS<\/strong>
- No Elementor, selecione um elemento, v\u00e1 para Avan\u00e7ado<\/strong> defini\u00e7\u00f5es, e encontre CSS personalizado<\/strong> (Elementor Pro<\/mark>).<\/li><\/ul><\/li><\/ol>
- Selecione o elemento e o acesso Avan\u00e7ado<\/mark> Defini\u00e7\u00f5es<\/strong>
- Para que o CSS funcione em todo o s\u00edtio, selecione Cabe\u00e7alho de todo o site<\/strong>.<\/li><\/ul><\/li><\/ol>
- Escolha a coloca\u00e7\u00e3o<\/strong>
- Dirija-se a Snippets de c\u00f3digo > Adicionar snippet<\/strong>. Escolha Snippet de CSS<\/strong>.<\/li><\/ul><\/li><\/ol>
- Crie um Novo snippet CSS<\/mark><\/strong>
- Aceda a Plugins > Adicionar novo<\/strong> Plugin<\/strong>, procure por C\u00f3digo WPC<\/mark>, instale e active.<\/li><\/ul><\/li><\/ol>
- C\u00f3digo WPC<\/a><\/strong>: Adiciona CSS em todo o s\u00edtio ou por p\u00e1gina.<\/li>\n\n
- CSS e JS personalizados simples<\/a><\/strong>: Leve e f\u00e1cil de adicionar CSS e JavaScript.<\/li>\n\n
- Clique em Atualizar ficheiro<\/strong> para poupar.<\/li><\/ul><\/li><\/ol>
- Guardar altera\u00e7\u00f5es<\/strong>
- Adicione o seu CSS personalizado no fundo<\/strong> do ficheiro. Exemplo:<\/li><\/ul><\/li><\/ol>
- Adicione o seu CSS<\/strong>
- Em Apar\u00eancia > Editor de ficheiros de temas<\/strong>selecione o tema filho do seu style.css<\/mark> ficheiro.<\/li><\/ul><\/li><\/ol>
- Aceda ao ficheiro Style.css<\/strong>
- Se ainda precisar de come\u00e7ar a utilizar um, crie ou instale um tema infantil. Plug-ins como Configurador de temas infantis<\/strong> torne-o f\u00e1cil.<\/li><\/ul><\/li><\/ol>
- Ativar um tema infantil<\/strong>
- Ver\u00e1 uma pr\u00e9-visualiza\u00e7\u00e3o em direto das altera\u00e7\u00f5es. Quando estiver satisfeito, clique em Publicar<\/strong>.<\/li><\/ul><\/li><\/ol>
- Pr\u00e9-visualizar e publicar<\/strong>
- Introduza o seu c\u00f3digo. Por exemplo:<\/li><\/ul><\/li><\/ol>
- Adicione o seu CSS personalizado<\/strong>
- Na barra lateral esquerda, clique em CSS adicional<\/strong>. Aparecer\u00e1 uma caixa de texto onde pode introduzir o seu c\u00f3digo CSS.<\/li><\/ul><\/li><\/ol>
- Selecione \"CSS adicionais\"<\/strong>
- Inicie sess\u00e3o e v\u00e1 para Apar\u00eancia > Personalizar<\/strong>.<\/li><\/ul><\/li><\/ol>