{"id":2064,"date":"2025-04-12T16:42:25","date_gmt":"2025-04-12T16:42:25","guid":{"rendered":"https:\/\/tableberg.com\/?p=2064"},"modified":"2025-04-12T16:42:29","modified_gmt":"2025-04-12T16:42:29","slug":"como-adicionar-uma-lista-de-icones-no-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-add-icon-list-in-wordpress\/","title":{"rendered":"Como adicionar uma lista de \u00edcones no WordPress"},"content":{"rendered":"

Uma lista de \u00edcones \u00e9 uma cole\u00e7\u00e3o de elementos visuais exibidos em um formato de lista. Eles s\u00e3o usados em v\u00e1rios contextos para melhorar o apelo visual e a legibilidade das publica\u00e7\u00f5es do blog e do conte\u00fado da p\u00e1gina.<\/p>\n\n\n\n

As listas de \u00edcones s\u00e3o usadas principalmente para mostrar os recursos, os pontos principais, os benef\u00edcios etc. dos produtos em um formato de lista. Elas dividem o conte\u00fado extenso em partes pequenas e f\u00e1ceis de ler para que os leitores possam entend\u00ea-las com rapidez e facilidade.<\/p>\n\n\n\n

Nesta postagem do blog, mostraremos a voc\u00ea dois m\u00e9todos f\u00e1ceis de adicionar uma lista de \u00edcones no WordPress. Fique conosco at\u00e9 o fim.<\/p>\n\n\n\n

\n
\n
\n
\n

Criar mesas bonitas <\/strong>
Com o Block Editor<\/strong><\/p>\n\n\n\n

\n
Experimente gratuitamente<\/a><\/div>\n\n\n\n
Obter um profissional<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

M\u00e9todo 1: Usando o Ultimate Blocks<\/h2>\n\n\n\n

Bloco definitivo<\/a> \u00e9 um plugin de blocos do Gutenberg com mais de 25 blocos personalizados. O \"Styled List\" \u00e9 um bloco de destaque entre eles. Aqui, mostraremos a voc\u00ea como usar esse bloco.<\/p>\n\n\n\n

Etapa 1: Instale o plug-in Ultimate Blocks<\/h3>\n\n\n\n

Ir para Plug-ins > Adicionar novo plug-in<\/strong> em seu painel de controle do WordPress. Encontre o plug-in digitando Ultimate Blocks na caixa de pesquisa. Instalar<\/strong> e ativar<\/strong> o plug-in depois que ele aparecer abaixo.<\/p>\n\n\n\n

\"Instale<\/figure>\n\n\n\n

Etapa 2: Adicionar o bloco de lista com estilo ao Editor<\/h3>\n\n\n\n

Como qualquer bloco do Gutenberg, clique no bot\u00e3o de adi\u00e7\u00e3o (+)<\/strong> e tipo Styled List<\/strong> na caixa de pesquisa. Quando o bloco for exibido, adicione para o editor<\/strong>.<\/p>\n\n\n\n

\"Adicionar<\/figure>\n\n\n\n

Etapa 3: Adicionar itens ao bloco de lista com estilo<\/h3>\n\n\n\n

Voc\u00ea pode ver que o bloco Styled List foi adicionado ao editor. Agora, \u00e9 hora de adicionar itens \u00e0 lista. Voc\u00ea pode listar os recursos do seu produto.<\/p>\n\n\n\n

\"O<\/figure>\n\n\n\n

Adicionamos um texto fict\u00edcio ao bloco da lista estilizada.<\/p>\n\n\n\n

\"Itens<\/figure>\n\n\n\n

Etapa 4: Selecione o \u00edcone para o bloco de lista com estilo<\/h3>\n\n\n\n

Selecione todo o bloco Styled List<\/strong>. Voc\u00ea ver\u00e1 o \u00edcone padr\u00e3o Tick na guia Settings (Configura\u00e7\u00f5es). Clique no \u00edcone de tique<\/strong>.<\/p>\n\n\n\n

\"Selecione<\/figure>\n\n\n\n

Uma caixa, incluindo uma cole\u00e7\u00e3o de \u00edcones, ser\u00e1 aberta. Selecione o \u00edcone desejado. O \u00edcone ser\u00e1 aplicado em todo o bloco de lista estilizado.<\/p>\n\n\n\n

\"Selecione<\/figure>\n\n\n\n

Etapa 5: Personalizar o bloco de lista com estilo<\/h3>\n\n\n\n

Na guia settings (configura\u00e7\u00f5es), voc\u00ea encontrar\u00e1 v\u00e1rias outras op\u00e7\u00f5es para personalizar o bloco. S\u00e3o elas:<\/p>\n\n\n\n

Tamanho do \u00edcone -<\/strong> Aumentar ou diminuir o tamanho do \u00edcone.<\/p>\n\n\n\n

N\u00famero de colunas -<\/strong> Exiba o bloco de listas em v\u00e1rias colunas.<\/p>\n\n\n\n

N\u00famero de colunas no celular -<\/strong> Exiba o bloco de listas em v\u00e1rias colunas no celular.<\/p>\n\n\n\n

Espa\u00e7amento entre itens (pixels)<\/strong> - Aumentar ou diminuir o espa\u00e7o entre os itens da lista.<\/p>\n\n\n\n

\"Personalizar<\/figure>\n\n\n\n

Etapa 06: Estilizar o bloco de lista estilizada<\/h3>\n\n\n\n

Pr\u00f3ximo, v\u00e1 para a guia Styles (Estilos)<\/strong>. Voc\u00ea pode alterar a cor do \u00edcone, a cor do texto da lista e a cor do plano de fundo da lista nessa guia.<\/p>\n\n\n\n

Depois disso, voc\u00ea pode adicionar preenchimento e margem para dar a um bloco o layout desejado.<\/p>\n\n\n\n

\"Estilize<\/figure>\n\n\n\n

Assim, voc\u00ea pode criar uma lista de \u00edcones usando o plug-in Ultimate Blocks.<\/p>\n\n\n

<\/div><\/div><\/div>\n\n\n

M\u00e9todo 2: Usando o Tableberg<\/h2>\n\n\n\n

Muitas vezes, voc\u00ea pode querer adicionar listas de \u00edcones \u00e0s suas tabelas do WordPress. Mas o bloco de tabela padr\u00e3o n\u00e3o permite que voc\u00ea fa\u00e7a isso. Portanto, instale o bloco Tableberg<\/a> plugin. Com ele, voc\u00ea pode criar tabelas abrangentes e multifuncionais para o seu site.<\/p>\n\n\n\n

Etapa 1: Instalar o plug-in TableBerg<\/h3>\n\n\n\n

Instalar<\/strong> e ativar<\/strong> o plug-in Tableberg em seu site.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

O processo de cria\u00e7\u00e3o de tabelas com o plug-in \u00e9 praticamente o mesmo do bloco de tabelas padr\u00e3o. Siga este guia para aprender Como criar tabelas com o TableBerg<\/a>.<\/p>\n\n\n\n

Observa\u00e7\u00e3o<\/strong>: A vers\u00e3o gratuita do Tableberg vem com um Bloco de listas<\/a>. Para usar o Bloco de lista com estilo<\/a>voc\u00ea precisa obter o vers\u00e3o pro<\/a><\/strong> do Tableberg.<\/p>\n\n\n\n

Etapa 2: Adicionar o bloco de lista com estilo \u00e0 tabela<\/h3>\n\n\n\n

Selecione a c\u00e9lula \u00e0 qual voc\u00ea deseja adicionar a lista de \u00edcones. Quando a c\u00e9lula estiver selecionada, voc\u00ea ver\u00e1 o \u00edcone de mais (+).<\/p>\n\n\n\n

Clique no \u00edcone de mais (+)<\/strong>. Localizar e adicionar o bloco Styled List<\/strong> para a c\u00e9lula.<\/p>\n\n\n\n

\"Adicionar<\/figure>\n\n\n\n

O bloco Styled List ser\u00e1 adicionado instantaneamente \u00e0 tabela.<\/p>\n\n\n\n

\"O<\/figure>\n\n\n\n

Etapa 3: Adicionar itens ao bloco de lista estilizada na tabela<\/h3>\n\n\n\n

Adicione quantos itens voc\u00ea quiser \u00e0 tabela.<\/p>\n\n\n\n

\"Adicionar<\/figure>\n\n\n\n

Etapa 04: Definir um \u00edcone para o bloco de lista com estilo<\/h3>\n\n\n\n

Selecione todo o bloco Styled List<\/strong>. Ir para o Guia Configura\u00e7\u00f5es<\/strong> na barra lateral direita. Clique no \u00edcone Tick<\/strong> na op\u00e7\u00e3o Icon Settings (Configura\u00e7\u00f5es de \u00edcones).<\/p>\n\n\n\n

\"Definir<\/figure>\n\n\n\n

Uma janela pop-up ser\u00e1 aberta com uma cole\u00e7\u00e3o de \u00edcones. Selecione o \u00edcone de sua prefer\u00eancia.<\/p>\n\n\n\n

\"Selecione<\/figure>\n\n\n\n

O \u00edcone selecionado ser\u00e1 aplicado a todo o bloco Styled List.<\/p>\n\n\n\n

\"O<\/figure>\n\n\n\n

Etapa 5: Personalizar o bloco de lista com estilo<\/h3>\n\n\n\n

Na op\u00e7\u00e3o Icon Settings (Configura\u00e7\u00f5es de \u00edcones), voc\u00ea encontra maneiras de personalizar o tamanho e o espa\u00e7amento dos \u00edcones.<\/p>\n\n\n\n

\"Personalizar<\/figure>\n\n\n\n

Etapa 06: Estilizar o bloco de lista estilizada<\/h3>\n\n\n\n

V\u00e1 para a guia Styles (Estilos)<\/strong>. Voc\u00ea pode alterar a cor do \u00edcone, a cor do texto, a cor do plano de fundo e o preenchimento do bloco. <\/p>\n\n\n\n

\"Estilizar<\/figure>\n\n\n\n

Assim, voc\u00ea pode adicionar e criar listas de \u00edcones nas tabelas do WordPress.<\/p>\n\n\n

<\/div><\/div><\/div>\n\n\n

Tutorial em v\u00eddeo<\/h3>\n\n\n\n
\n