Como Adicionar Facilmente Marcadores e Listas Numeradas no WordPress

Criar conteúdo bem organizado com marcadores e listas numeradas pode parecer básico, mas descobrimos que muitos usuários têm dificuldade em fazê-los parecerem exatamente como desejam. 📋

Após explorar vários métodos de formatação no editor de blocos, descobrimos as maneiras mais fáceis de criar listas limpas e consistentes.

Através de testes extensivos em nossos ambientes de demonstração, identificamos vários métodos para adicionar e estilizar listas no WordPress, desde simples marcadores até listas personalizadas.

O ótimo é que você não precisa de nenhum conhecimento de codificação para fazer suas listas parecerem profissionais.

Neste guia para iniciantes, mostraremos exatamente como adicionar e formatar marcadores e listas numeradas no WordPress.

Quando Adicionar Marcadores e Listas Numeradas no WordPress

Você deve adicionar listas ao seu conteúdo sempre que precisar apresentar informações em um formato estruturado e fácil de escanear. O segredo é escolher o tipo certo de lista para o seu conteúdo.

Use uma lista numerada quando a ordem dos itens for importante. Isso é ideal para tutoriais passo a passo, rankings de top 10 ou qualquer processo que siga uma sequência específica.

Use uma lista com marcadores quando a ordem dos itens não importar. Isso é ótimo para listar recursos de produtos, exemplos ou um grupo de ideias relacionadas.

Usar listas corretamente ajuda os visitantes a entenderem seu conteúdo rapidamente, mesmo que a informação seja complexa. Isso melhora a experiência do usuário e pode manter as pessoas em seu site WordPress por mais tempo.

Com isso em mente, vamos ver como você pode adicionar marcadores e listas numeradas no WordPress. Basta usar os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Method 1: Using the Built-in WordPress List Block (Easy)
• Método 2: Usando Shortcodes Ultimate (Listas com Ícones Personalizados)
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• Perguntas Frequentes Sobre Adicionar Marcadores e Listas Numeradas no WordPress

Método 1: Usando o Bloco de Lista Integrado do WordPress (Fácil)

A maneira mais fácil de adicionar marcadores e listas numeradas é usando o bloco de Lista e o editor de blocos Gutenberg do WordPress.

Isso permite que você crie listas simples numeradas ou com marcadores sem instalar um plugin WordPress separado. Dito isso, este bloco padrão tem apenas algumas opções de personalização.

Se você deseja ajustar suas listas com ícones personalizados, layouts horizontais, cores diferentes e mais, recomendamos usar um dos outros métodos deste artigo.

Para começar, basta abrir o editor de blocos para a postagem ou página do WordPress onde você deseja adicionar uma lista. Ou, você pode abrir o editor de widgets para adicionar a lista de marcadores a uma área de widget, como uma barra lateral.

Você pode então escolher se deseja criar uma lista com marcadores ou uma lista numerada.

Como Criar uma Lista com Marcadores no WordPress

Para criar uma lista com marcadores, clique no ícone de ‘+’ para adicionar um novo bloco do WordPress.

Na janela pop-up que aparece, digite ‘Lista’.

Quando o bloco correto aparecer, clique para adicioná-lo à página.

Isso cria o primeiro item de uma lista com marcadores. Simplesmente digite o texto que você deseja usar para o primeiro item da lista.

Com isso feito, pressione a tecla ‘Enter’ no seu teclado para ir para a próxima linha. O WordPress criará o segundo marcador automaticamente.

Agora você pode prosseguir e digitar o texto que deseja usar para o segundo marcador. Simplesmente repita esses passos para adicionar mais itens à lista.

Se você quiser criar uma lista aninhada, clique no botão ‘Recuar’. Isso move o cursor um passo para a direita, pronto para você digitar o texto recuado.

Você pode clicar no botão ‘Recuar’ novamente para criar dois níveis de marcadores aninhados.

Como você pode ver na imagem a seguir, cada nível usa um ícone diferente.

Para diminuir o recuo, clique no botão ‘Diminuir Recuo’.

Isso move o cursor um passo para a esquerda, pronto para você começar a digitar.

Ao pressionar os botões ‘Recuar’ e ‘Diminuir Recuo’, você pode criar listas aninhadas com vários níveis diferentes.

Por padrão, o editor de blocos do WordPress usará o tamanho de fonte ‘Médio’, mas você pode alternar entre pequeno, grande e extra grande usando as configurações de ‘Tipografia’ nas opções de bloco do lado direito.

Você também pode adicionar links ou usar opções de formatação de texto padrão, como negrito e itálico. Isso torna suas listas ainda mais fáceis de escanear e entender rapidamente.

Como Criar uma Lista Numerada no WordPress

Para criar uma lista numerada no WordPress, basta pressionar a tecla ‘1’ no seu teclado seguida por um ponto (.)

O WordPress transformará automaticamente este texto no primeiro item de uma lista numerada.

Agora você está pronto para digitar o primeiro item da lista numerada.

Depois disso, basta pressionar a tecla ‘Enter’ no seu teclado, e o WordPress criará o próximo ponto numerado automaticamente.

Assim como com os marcadores, você pode criar listas aninhadas clicando nos botões ‘Recuar’ e ‘Diminuir Recuo’.

Isso cria um marcador recuado abaixo do marcador numerado.

Ao contrário das listas de marcadores, você só pode usar um único nível de recuo.

Quando estiver satisfeito com a aparência da lista, basta clicar no botão ‘Atualizar’ ou ‘Publicar’ para torná-la ativa em seu site WordPress.

Método 2: Usando Shortcodes Ultimate (Listas com Ícones Personalizados)

O bloco de Lista integrado é perfeito para criar listas baseadas em texto, mas às vezes, você pode querer criar uma lista com ícones personalizados. Dessa forma, você pode tornar suas listas mais visualmente atraentes e mais adequadas ao tema do seu conteúdo.

A maneira mais fácil de fazer isso é usando Shortcodes Ultimate. Este plugin permite que você crie listas com ícones personalizados usando shortcodes simples.

Para isso, usaremos a versão gratuita do plugin, pois ela já é suficiente para este método. Mas se você quiser recursos mais avançados, pode fazer um upgrade para um plano pago.

Para usar o Shortcodes Ultimate, prossiga e instale o plugin do WordPress em sua área administrativa. Depois disso, crie uma nova postagem ou edite uma existente no editor de blocos.

Agora, clique no botão ‘+’ em qualquer lugar da página e selecione o bloco ‘Shortcode’.

Nesta etapa, prossiga e cole o shortcode abaixo no bloco:

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

Este shortcode exibirá três itens de lista com marcadores e ícones de estrela amarelos, assim:

Para personalizar o ícone e a cor, você pode acessar o site Fork Awesome. É aqui que você verá todos os ícones que pode usar para suas listas com marcadores. Aqui, basta procurar um ícone que você deseja usar.

Por exemplo, usaremos o ícone ‘flag’. Agora, copie o nome do ícone e volte para o editor de blocos.

Uma vez lá, basta substituir star por ele. Então, em vez de icon: star, usaremos icon: flag.

Para alterar a cor, substitua o código HEX em icon_color="#ffde0f" pelo código HEX da cor desejada.

Portanto, se você quiser deixar o ícone verde, precisará digitar icon_color="#008000". Você pode aprender mais sobre como encontrar as cores certas em nosso artigo sobre como encontrar o esquema de cores perfeito para o seu site WordPress.

Agora, não se esqueça de substituir List item pelo seu próprio texto.

Veja como nosso código está agora:

Quando estiver satisfeito com a aparência da lista, você pode clicar no botão ‘Atualizar’ ou ‘Publicar’ para torná-la ativa em seu blog WordPress ou site.

Veja como a lista aparece no front-end:

Método 3: Usando um Plugin de Page Builder (Melhor para Landing Pages)

Se você deseja criar listas bonitas com estilo personalizado, talvez queira usar o SeedProd.

Este tema avançado do WordPress e plugin de construtor de páginas permite que você crie páginas com design profissional usando um editor simples de arrastar e soltar.

Ele também vem com um bloco de Lista pronto que permite ajustar cada parte do design da lista, incluindo alterar o espaço entre os itens individuais, substituir os marcadores padrão por ícones personalizados e muito mais.

Além disso, ele facilita o design de páginas independentes com um design exclusivo, portanto, esta também é uma ótima opção se você quiser adicionar listas a uma página inicial personalizada ou página de destino.

Testamos a ferramenta minuciosamente e descobrimos que ela é super fácil para iniciantes. Para saber mais, veja nossa avaliação do SeedProd.

A primeira coisa que você precisa fazer é instalar e ativar o SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, você precisa inserir sua chave de licença.

Você pode encontrar essas informações em sua conta no site do SeedProd. Após adicionar a chave de licença, basta clicar em ‘Verificar Chave’.

Escolha um Modelo Projetado Profissionalmente

Depois disso, vá para SeedProd » Landing Pages e clique em ‘Adicionar Nova Landing Page’.

Na próxima tela, você será solicitado a escolher um modelo.

O SeedProd vem com mais de 300 belos modelos que são organizados em diferentes categorias, como modelos de página 404 e páginas de ‘agradecimento’ personalizadas do WooCommerce.

Simplesmente clique em qualquer aba para ver os diferentes modelos dentro dessa categoria.

Quando encontrar um modelo que deseja usar, passe o mouse sobre ele e clique no ícone de marca de seleção.

Estamos usando o modelo ‘Explosive Growth Webinar’ em todas as nossas imagens, mas você pode usar qualquer design que desejar.

Em seguida, você precisa dar um título à página.

O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterá-lo para o que quiser. Por exemplo, adicionar palavras-chave relevantes a um URL geralmente melhora seu SEO do WordPress e ajuda a página a aparecer nos resultados de pesquisa relevantes.

Para saber mais, consulte nosso guia sobre como fazer pesquisa de palavras-chave para o seu blog WordPress.

Quando estiver satisfeito com o título e o URL, basta clicar em ‘Salvar e Começar a Editar a Página’.

Construa o Layout da Sua Página Personalizada

O SeedProd agora abrirá seu modelo no editor de arrastar e soltar. À direita, você verá uma prévia ao vivo do design da página, com algumas configurações à esquerda.

O SeedProd vem com muitos blocos que você pode adicionar ao seu design, incluindo blocos que permitem adicionar botões de compartilhamento social, vídeos, formulários de contato e muito mais.

Para mais informações, consulte nosso guia sobre como criar uma página personalizada no WordPress.

Para adicionar uma lista ao seu design, encontre o bloco 'Lista' e arraste-o para a página.

Isso adiciona uma lista vertical à sua página com um espaço reservado 'Item 1'.

Se você quiser criar uma lista horizontal em vez disso, clique na aba 'Avançado' e depois selecione o botão 'Horizontal'.

Agora você está pronto para começar a construir sua lista selecionando a aba 'Conteúdo'.

Para substituir o texto padrão por sua própria mensagem, clique em 'Item 1' no menu à esquerda.

Agora você pode digitar seu item de lista no pequeno editor de texto que aparece.

Aqui, você também pode aplicar qualquer formatação que desejar usar, como negrito ou itálico.

Por padrão, o SeedProd usa uma marca de seleção para cada item da lista, mas ele tem uma biblioteca integrada de fontes de ícones, que inclui 1400 ícones do Font Awesome que você pode usar em vez disso.

Para substituir a marca de seleção, basta passar o mouse sobre ela e clicar em ‘Biblioteca de Ícones’ quando ela aparecer.

Isso abre um pop-up onde você pode escolher o ícone que deseja usar em vez disso.

Você pode usar ícones diferentes para itens individuais dentro da lista, então esta é uma ótima maneira de criar listas mais interessantes e chamativas.

Para criar mais itens na lista, basta clicar no botão ‘Adicionar Novo Item’.

Agora você pode adicionar texto e alterar o ícone padrão seguindo o mesmo processo exato descrito acima.

Após adicionar todos os itens à sua lista, você pode alterar o tamanho da fonte e o alinhamento usando as configurações no menu do lado esquerdo.

Você também pode aumentar ou diminuir o espaço entre os itens individuais da lista usando o controle deslizante ‘Espaço Entre’.

Depois disso, você pode querer alterar a cor dos ícones na lista. Mesmo que você esteja usando ícones diferentes, o SeedProd aplicará a mesma cor a cada item para que o design sempre pareça consistente.

Para fazer essa alteração, clique na área ‘Cor do Ícone’ e, em seguida, escolha uma nova cor no pop-up que aparece.

Com isso feito, você pode querer clicar em ‘Avançado’ e olhar algumas configurações adicionais. Já vimos como você pode alternar entre layouts de lista vertical e horizontal, mas você também pode alterar a cor do texto e a fonte.

Para realmente fazer sua lista se destacar, você pode até adicionar uma sombra de caixa ou animação CSS.

A maioria das configurações na aba ‘Avançado’ são autoexplicativas, então vale a pena explorá-las para ver quais efeitos você pode criar.

Com isso feito, você pode continuar trabalhando no design da sua página adicionando mais blocos e, em seguida, personalizando-os usando as configurações no menu do lado esquerdo.

Quando estiver satisfeito com a aparência da página, basta clicar no menu suspenso no botão ‘Salvar’ e selecionar ‘Publicar’.

Agora você pode visitar esta página para ver a lista ao vivo em sua loja online ou site.

Método 4: Usando Código para Adicionar Marcadores e Listas Numeradas (Avançado)

Você também pode criar listas usando o editor de código integrado do WordPress e HTML.

Embora o editor de blocos seja mais fácil, usar o editor de código oferece controle preciso sobre a estrutura HTML, o que pode ser útil para solucionar problemas ou colar listas complexas e pré-formatadas.

Para mais informações sobre este tópico, veja nosso guia sobre como editar HTML no editor de código do WordPress.

Para começar, abra a página ou post onde você deseja exibir a lista. Em seguida, clique no ícone de três pontos no canto superior direito e selecione ‘Editor de código’.

Os próximos passos variarão dependendo se você deseja adicionar uma lista com marcadores ou uma lista numerada.

Como Criar uma Lista com Marcadores Usando Código

Para criar uma lista com marcadores, comece digitando o seguinte:

<!-- wp:list -->
<ul>

O ul significa ‘unordered list’ (lista não ordenada), o que significa que a lista não tem números, e o wp:list informa ao WordPress que você está criando um bloco de Lista manualmente.

Em seguida, pressione a tecla ‘Enter’ para ir para uma nova linha e criar seu primeiro item de lista:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Aqui, li significa ‘list item’ (item de lista), e estamos fechando a linha com /li.

Você pode repetir este processo para criar mais itens de lista. Por exemplo:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Quando terminar, feche o bloco de código com outra flag de ‘unordered list’:

</ul>
<!-- /wp:list -->

Isso nos dá o seguinte código de lista:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Como você pode ver na imagem a seguir, isso cria uma lista muito simples, mas você pode personalizá-la adicionando outros HTML, como tags de título.

Como Criar uma Lista Numerada Usando Código

Para criar uma lista numerada, basta digitar o seguinte:

<!-- wp:list {"ordered":true} -->

Você pode então digitar ol, que significa lista ordenada:

<!-- wp:list {"ordered":true} -->
<ol>

Depois disso, adicione cada item da lista seguindo o mesmo processo descrito acima:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Finalmente, feche a lista ordenada usando uma tag /ol e wp:list.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Perguntas Frequentes Sobre Adicionar Marcadores e Listas Numeradas no WordPress

Aqui estão algumas perguntas que nossos leitores frequentemente fizeram sobre como adicionar marcadores e listas numeradas no WordPress:

Como você cria uma lista com marcadores e numeração?

Você pode criar uma lista mista usando o botão ‘Recuar’. Comece uma lista numerada e, quando quiser adicionar um item de sublista com marcador, basta clicar no botão ‘Recuar’ na barra de ferramentas. Isso criará um marcador aninhado sob seu item numerado.

Qual é o atalho para marcadores no WordPress?

O principal atalho de teclado para iniciar uma lista com marcadores no editor de blocos do WordPress é digitar um asterisco (*) seguido pela barra de espaço. Para uma lista numerada, digite 1. seguido pela barra de espaço.

Como você pode fazer uma lista numerada a) dl b) ol c) list d) ul?

Você pode fazer uma lista numerada usando a opção (b), a tag <ol> em HTML. ‘ol’ significa “ordered list” (lista ordenada), que é usada quando a sequência dos itens é importante. A tag <ul> é usada para listas não ordenadas (com marcadores).

É melhor usar listas ou divs?

É sempre melhor usar tags de lista apropriadas (como <ul> ou <ol>) para conteúdo de lista em vez de tags <div>. As tags de lista fornecem significado semântico, o que é crucial para SEO e para ferramentas de acessibilidade, como leitores de tela, entenderem a estrutura do seu conteúdo.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar marcadores e listas numeradas no WordPress. Você também pode querer aprender como adicionar colaboração no editor de blocos do WordPress e nossas principais escolhas dos melhores plugins de blocos Gutenberg para WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.