{"id":465,"date":"2026-05-14T06:00:27","date_gmt":"2026-05-14T09:00:27","guid":{"rendered":"https:\/\/www.portanova.com.br\/?page_id=2"},"modified":"2026-05-21T11:02:32","modified_gmt":"2026-05-21T14:02:32","slug":"css-custom-text","status":"publish","type":"post","link":"https:\/\/www.portanova.com.br\/notebook\/css-custom-text\/","title":{"rendered":"[CSS] Margens e espa\u00e7amentos nos par\u00e1grafos"},"content":{"rendered":"<h2>\ud83d\udcd0 Melhorando a legibilidade \u2013 Margens e espa\u00e7amentos nos par\u00e1grafos<\/h2>\n<p>Uma boa experi\u00eancia de leitura come\u00e7a com o espa\u00e7amento correto entre os par\u00e1grafos e dentro de cada par\u00e1grafo. Nesta aula, voc\u00ea vai aprender a ajustar essas propriedades usando recursos nativos do WordPress (Customizer) e, como alternativa, o Elementor.<\/p>\n<p>O objetivo \u00e9 deixar o texto mais arejado, f\u00e1cil de ler e profissional.<\/p>\n<hr \/>\n<h3>\ud83c\udfaf Propriedades CSS que vamos usar<\/h3>\n<ul>\n<li><code>margin-bottom<\/code> \u2192 espa\u00e7amento entre um par\u00e1grafo e o pr\u00f3ximo.<\/li>\n<li><code>line-height<\/code> \u2192 espa\u00e7amento entre as linhas dentro do mesmo par\u00e1grafo.<\/li>\n<li><code>text-align<\/code> \u2192 alinhamento do texto (j\u00e1 vimos o <code>justify<\/code>).<\/li>\n<\/ul>\n<p>Valores recomendados para textos longos:<\/p>\n<ul>\n<li><code>margin-bottom: 1.5em;<\/code> (espa\u00e7o confort\u00e1vel entre par\u00e1grafos)<\/li>\n<li><code>line-height: 1.6;<\/code> (altura da linha ideal para leitura na web)<\/li>\n<\/ul>\n<hr \/>\n<h3>\ud83d\udccc M\u00e9todo 1: Personalizar (Customizer) \u2013 Prioridade m\u00e1xima<\/h3>\n<p>Este \u00e9 o m\u00e9todo mais simples e nativo do WordPress. As altera\u00e7\u00f5es s\u00e3o feitas em tempo real e voc\u00ea v\u00ea o resultado antes de publicar.<\/p>\n<ol>\n<li>No painel do WordPress, v\u00e1 em <strong>Apar\u00eancia \u2192 Personalizar<\/strong>.<\/li>\n<li>No menu lateral, clique em <strong>&#8220;CSS Adicional&#8221;<\/strong> (geralmente \u00e9 o \u00faltimo item).<\/li>\n<li>Cole o seguinte c\u00f3digo CSS:<\/li>\n<\/ol>\n<pre><code>p {\r\n    margin-bottom: 1.5em;\r\n    line-height: 1.6;\r\n    text-align: justify;\r\n}<\/code><\/pre>\n<ol start=\"4\">\n<li>Voc\u00ea ver\u00e1 as mudan\u00e7as aplicadas em tempo real na visualiza\u00e7\u00e3o do site.<\/li>\n<li>Ajuste os valores conforme preferir (ex: <code>margin-bottom: 2em;<\/code> para mais espa\u00e7o).<\/li>\n<li>Clique em <strong>&#8220;Publicar&#8221;<\/strong>.<\/li>\n<\/ol>\n<p>\u2705 <strong>Vantagens:<\/strong> Simples, visual, sem plugins, persistente enquanto o tema estiver ativo.<\/p>\n<p>\u26a0\ufe0f <strong>Aten\u00e7\u00e3o:<\/strong> Se voc\u00ea trocar de tema, o CSS adicional \u00e9 perdido (a menos que exporte e importe).<\/p>\n<hr \/>\n<h3>\ud83d\udccc M\u00e9todo 2: MU-Plugin (solu\u00e7\u00e3o definitiva, como sempre)<\/h3>\n<p>Para quem deseja que as configura\u00e7\u00f5es sobrevivam a qualquer troca de tema e fiquem centralizadas, o MU-Plugin \u00e9 a melhor escolha.<\/p>\n<ol>\n<li>Acesse o servidor via FTP ou File Manager.<\/li>\n<li>Navegue at\u00e9 <code>\/wp-content\/mu-plugins\/<\/code>.<\/li>\n<li>Crie um arquivo chamado <strong><code>legibilidade-paragrafos.php<\/code><\/strong>.<\/li>\n<li>Cole o conte\u00fado abaixo:<\/li>\n<\/ol>\n<pre><code>&lt;?php\r\n\/**\r\n * Plugin Name: Legibilidade para Par\u00e1grafos\r\n * Description: Ajusta margem inferior, altura da linha e alinhamento dos par\u00e1grafos.\r\n * Version: 1.0\r\n * Author: Reinaldo (Neodoor)\r\n *\/\r\n\r\nif ( ! defined( 'ABSPATH' ) ) exit;\r\n\r\nadd_action( 'wp_head', function() {\r\n    echo '&lt;style&gt;\r\n        p {\r\n            margin-bottom: 1.5em;\r\n            line-height: 1.6;\r\n            text-align: justify;\r\n        }\r\n    &lt;\/style&gt;';\r\n}, 100 );\r\n<\/code><\/pre>\n<ol start=\"5\">\n<li>Salve o arquivo. O estilo ser\u00e1 aplicado imediatamente a todo o site.<\/li>\n<\/ol>\n<p>\u2705 <strong>Vantagens:<\/strong> Funciona com qualquer tema, n\u00e3o se perde em atualiza\u00e7\u00f5es, \u00e9 leve e voc\u00ea tem controle total.<\/p>\n<hr \/>\n<h3>\ud83d\udccc M\u00e9todo 3: Usando o Elementor (segunda op\u00e7\u00e3o)<\/h3>\n<p>Se voc\u00ea prefere trabalhar visualmente dentro do Elementor, tamb\u00e9m \u00e9 poss\u00edvel ajustar esses espa\u00e7amentos de forma global.<\/p>\n<ol>\n<li>No painel, v\u00e1 em <strong>Elementor \u2192 Configura\u00e7\u00f5es<\/strong>.<\/li>\n<li>Clique na aba <strong>&#8220;Estilos&#8221; (Styles)<\/strong>.<\/li>\n<li>Selecione <strong>&#8220;Tipografia&#8221;<\/strong>.<\/li>\n<li>Expanda a se\u00e7\u00e3o <strong>&#8220;Par\u00e1grafo&#8221;<\/strong>.<\/li>\n<li>Voc\u00ea encontrar\u00e1 controles para <strong>Margem<\/strong> (geralmente apenas inferior) e <strong>Altura da Linha<\/strong> (Line Height).<\/li>\n<li>Ajuste os valores e clique em <strong>&#8220;Atualizar&#8221;<\/strong>.<\/li>\n<\/ol>\n<p>\u26a0\ufe0f <strong>Observa\u00e7\u00e3o:<\/strong> As configura\u00e7\u00f5es do Elementor afetam apenas os par\u00e1grafos exibidos por ele (conte\u00fado editado com Elementor). J\u00e1 o CSS do Customizer ou MU-Plugin afeta todos os par\u00e1grafos do site, inclusive os de posts antigos e widgets.<\/p>\n<hr \/>\n<h3>\ud83e\uddea Teste e ajuste fino<\/h3>\n<p>Ap\u00f3s aplicar qualquer um dos m\u00e9todos, acesse uma p\u00e1gina com texto longo (como um post ou a home). Verifique se o espa\u00e7amento entre par\u00e1grafos e linhas ficou confort\u00e1vel para leitura.<\/p>\n<p><strong>Sugest\u00f5es de valores:<\/strong><\/p>\n<ul>\n<li><code>margin-bottom: 1.5em<\/code> \u2192 padr\u00e3o confort\u00e1vel.<\/li>\n<li><code>line-height: 1.5<\/code> a <code>1.7<\/code> \u2192 intervalo ideal para web.<\/li>\n<li><code>text-align: justify<\/code> \u2192 j\u00e1 aplicado.<\/li>\n<\/ul>\n<p>Se quiser um espa\u00e7amento maior entre par\u00e1grafos, aumente <code>margin-bottom<\/code> para <code>2em<\/code>.<\/p>\n<hr \/>\n<h3>\u2705 Resumo e recomenda\u00e7\u00e3o<\/h3>\n<ul>\n<li><strong>Para iniciantes ou manuten\u00e7\u00e3o r\u00e1pida:<\/strong> use o <strong>Customizer (CSS Adicional)<\/strong>.<\/li>\n<li><strong>Para profissionais e projetos definitivos:<\/strong> adote o <strong>MU-Plugin<\/strong>.<\/li>\n<li><strong>Para quem vive dentro do Elementor:<\/strong> ajuste via <strong>Configura\u00e7\u00f5es do Elementor<\/strong> (apenas conte\u00fado gerenciado por ele).<\/li>\n<\/ul>\n<p>Com essas pequenas altera\u00e7\u00f5es, seu site ficar\u00e1 muito mais leg\u00edvel e agrad\u00e1vel para quem l\u00ea. Aproveite para registrar esta aula no seu caderno de estudos \u2013 \u00e9 um conhecimento que voc\u00ea usar\u00e1 em todos os seus projetos.<\/p>\n<p><strong>Arquivo final do MU-Plugin:<\/strong> <code>\/wp-content\/mu-plugins\/legibilidade-paragrafos.php<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcd0 Melhorando a legibilidade \u2013 Margens e espa\u00e7amentos nos par\u00e1grafos Uma boa experi\u00eancia de leitura come\u00e7a com o espa\u00e7amento correto entre os par\u00e1grafos e dentro de cada par\u00e1grafo. Nesta aula, voc\u00ea vai aprender a ajustar essas propriedades usando recursos nativos do WordPress (Customizer) e, como alternativa, o Elementor. O objetivo \u00e9 deixar o texto mais [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,2],"tags":[],"class_list":["post-465","post","type-post","status-publish","format-standard","hentry","category-extras","category-lessons"],"_links":{"self":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts\/465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/comments?post=465"}],"version-history":[{"count":0,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts\/465\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/media?parent=465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/categories?post=465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/tags?post=465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}