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.

Por que Usar Marcadores e Listas Numeradas no WordPress?

Marcadores e listas numeradas tornam seu conteúdo mais fácil de ler e escanear. Em vez de grandes blocos de texto, os leitores podem encontrar rapidamente as informações de que precisam.

Eles são especialmente úteis para tutoriais, guias passo a passo, listas de recursos e pontos importantes. Aqui estão alguns dos principais benefícios de usar listas no WordPress:

• Melhorar a Legibilidade: Listas quebram parágrafos longos e tornam o conteúdo mais fácil de seguir, especialmente para leitores que escaneiam a página.
• Manter os Visitantes Engajados: A formatação clara ajuda os leitores a se manterem focados e a continuarem rolando o seu conteúdo.
• Facilitar a Memorização de Informações: Pontos organizados são frequentemente mais fáceis de entender e lembrar do que texto denso.
• Ajudar no SEO: Conteúdo bem estruturado pode ajudar os motores de busca a entender melhor sua página e pode aumentar suas chances de aparecer em destaques de snippets.
• Melhorar a Acessibilidade: Listas formatadas corretamente funcionam melhor com leitores de tela e outras tecnologias assistivas.

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

Método 1: Como Adicionar Marcadores e Listas Numeradas Usando o Bloco de Lista Integrado do WordPress (Fácil)

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

Isso permite que você crie listas simples numeradas ou com marcadores sem instalar um plugin do 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 com 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 '+' 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 digitalizar e entender rapidamente.

Como Criar uma Lista Numerada no WordPress

Para criar uma lista numerada no WordPress, basta digitar a tecla '1' no seu teclado seguida por um ponto (.) e depois pressionar a barra de espaço.

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’.

Depois de criar uma lista, você pode alternar entre os formatos com marcadores e numerados selecionando o bloco de lista e clicando no ícone 'Lista com Marcadores' ou 'Lista Numerada' na barra de ferramentas do bloco.

Isso permite ajustes rápidos se a estrutura do seu conteúdo mudar.

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 o Shortcodes Ultimate. Este plugin permite criar listas com ícones personalizados usando shortcodes simples. Ele tem mais de 400.000 instalações ativas e uma classificação de 4,9/5 estrelas no WordPress.org.

Para isso, usaremos a versão gratuita do plugin, pois 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 de administração. 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 ir ao site do Fork Awesome para procurar ícones disponíveis. 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 tornar 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 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 ou site WordPress.

Veja como a lista aparece no front-end:

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

Se você quiser criar belas listas 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 visual único, sendo também uma ótima opção se você quiser adicionar listas a uma página inicial personalizada ou página de destino.

Confiável por mais de 1 milhão de sites, o SeedProd tem consistentemente recebido uma avaliação de 4,9/5 estrelas de milhares de usuários no WordPress.org. Testamos a ferramenta minuciosamente e descobrimos que seu editor intuitivo de arrastar e soltar a torna incrivelmente amigável para iniciantes.

Para saber mais, confira nossa análise do SeedProd.

A primeira coisa que você precisa fazer é instalar e ativar o SeedProd. Para mais detalhes, confira nosso guia passo a passo sobre como instalar um plugin do 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 modelos bonitos, organizados em diferentes categorias, como modelos de página 404 e páginas personalizadas de agradecimento 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 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 ícones de fontes, 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 clicar em 'Avançado' e ver algumas configurações adicionais. Já vimos como alternar entre layouts de lista vertical e horizontal, mas você também pode alterar a cor do texto e a fonte.

Para realmente destacar sua lista, 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, consulte 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 outro HTML, como tags de título.

Para estilização avançada, você normalmente usaria CSS em vez de incorporar elementos HTML estruturais como títulos diretamente em itens de lista.

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 começando com uma lista numerada e, em seguida, clicando no botão ‘Recuar’ para criar uma sublista aninhada. Por padrão, o WordPress manterá o mesmo tipo de lista, portanto, os itens aninhados também serão numerados.

Para transformar a lista aninhada em marcadores, basta selecionar o item de lista recuado e clicar no ícone ‘Lista com Marcadores’ na barra de ferramentas do bloco.

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.