[CSS] Estilizando as Listas e as Citações

📋 Estilizando listas e citações para melhorar a leitura

Listas e citações são elementos muito comuns em posts e páginas. Por padrão, o WordPress (e a maioria dos temas) aplica estilos simples. Nesta aula, você vai aprender a deixar esses elementos mais bonitos, alinhados com a identidade visual do seu site.

🎯 O que vamos estilizar

• Listas não ordenadas (ul) – marcadores comuns (●, ○, ■).
• Listas ordenadas (ol) – numerais (1, 2, 3) ou letras.
• Citações (blockquote) – trechos destacados de textos externos ou depoimentos.

📌 Método 1: Personalizar (Customizer) – Prioridade máxima

Passo a passo:

1. No painel do WordPress, vá em Aparência → Personalizar.
2. Clique em “CSS Adicional”.
3. Cole o código abaixo (ou partes dele) e ajuste os valores como desejar.
4. Publique.

/* === ESTILOS PARA LISTAS === */
ul, ol {
    margin: 0 0 1.5em 1.5em;   /* espaçamento externo */
    padding: 0;
    line-height: 1.6;
}

ul li, ol li {
    margin-bottom: 0.5em;       /* espaçamento entre itens */
}

/* Marcadores personalizados para listas não ordenadas */
ul {
    list-style-type: square;    /* pode ser disc, circle, square, none */
}

/* Numerais personalizados para listas ordenadas */
ol {
    list-style-type: decimal;   /* decimal, lower-latin, lower-roman, etc. */
}

/* === ESTILOS PARA CITAÇÕES === */
blockquote {
    margin: 1.5em 0;
    padding: 0 0 0 2em;
    border-left: 4px solid #0073aa;
    font-style: italic;
    color: #333;
    line-height: 1.6;
}

blockquote p {
    margin-bottom: 0.5em;
}

blockquote cite {
    display: block;
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #666;
    font-style: normal;
}

📌 Método 2: MU-Plugin (solução definitiva, independente de tema)

Crie um arquivo na pasta /wp-content/mu-plugins/ chamado estilos-listas-citacoes.php com o seguinte conteúdo:

<?php
/**
 * Plugin Name: Estilos para Listas e Citações
 * Description: Aplica estilos personalizados a ul, ol e blockquote.
 * Version: 1.0
 * Author: Reinaldo (Neodoor)
 */

if ( ! defined( 'ABSPATH' ) ) exit;

add_action( 'wp_head', function() {
    echo '<style>
        ul, ol {
            margin: 0 0 1.5em 1.5em;
            padding: 0;
            line-height: 1.6;
        }
        ul li, ol li {
            margin-bottom: 0.5em;
        }
        ul {
            list-style-type: square;
        }
        ol {
            list-style-type: decimal;
        }
        blockquote {
            margin: 1.5em 0;
            padding: 0 0 0 2em;
            border-left: 4px solid #0073aa;
            font-style: italic;
            color: #333;
            line-height: 1.6;
        }
        blockquote p {
            margin-bottom: 0.5em;
        }
        blockquote cite {
            display: block;
            margin-top: 0.5em;
            font-size: 0.9em;
            color: #666;
            font-style: normal;
        }
    </style>';
}, 100 );

📌 Método 3: No Elementor (segunda opção)

Se você estiver editando uma página específica com o Elementor, pode aplicar os estilos diretamente nos widgets de texto ou usar o widget “HTML” para adicionar CSS personalizado apenas naquela página. No entanto, para estilos globais, o Customizer ou o MU-Plugin são mais recomendados.

🧪 Testando e personalizando

Após aplicar o CSS, crie um post de teste com uma lista e uma citação para ver o resultado. Você pode ajustar:

• list-style-type – experimente circle, disc, upper-roman, etc.
• border-left – mude a cor e a espessura da borda da citação.
• font-style – pode ser normal para citação sem itálico.
• margin-bottom nos itens da lista – controle o espaçamento vertical.

✅ Resumo

• Listas e citações ganham muito com um pequeno CSS.
• Você pode aplicar via Customizer (fácil) ou MU-Plugin (definitivo).
• O Elementor permite ajustes pontuais, mas não é ideal para estilos globais.

Arquivo MU-Plugin: /wp-content/mu-plugins/estilos-listas-citacoes.php

Agora suas listas e citações ficarão tão elegantes quanto o restante do conteúdo. Copie e cole no seu caderno de estudos! 🚀