{"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-anadir-una-lista-de-iconos-en-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/es\/how-to-add-icon-list-in-wordpress\/","title":{"rendered":"C\u00f3mo a\u00f1adir una lista de iconos en WordPress"},"content":{"rendered":"

An icon list is a collection of visual elements displayed in a listicle format. They are used in various contexts to enhance the visual appeal and readability of your blog posts and page content.<\/p>\n\n\n\n

Icon lists are mostly used to showcase products\u2019 features, key points, benefits, etc., in a listical format. They break down the large content into small and scannable pieces so readers can understand them quickly and easily.<\/p>\n\n\n\n

In this blog post, we\u2019ll show you two easy methods how to add icon list in WordPress. Be with us till the end.<\/p>\n\n\n\n

\n
\n
\n
\n

Cree bonitas mesas <\/strong>
Con el editor de bloques<\/strong><\/p>\n\n\n\n

\n
Pruebe gratis<\/a><\/div>\n\n\n\n
Conseguir Pro<\/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: Utilizar bloques Ultimate<\/h2>\n\n\n\n

Ultimate Block<\/a> es un plugin de bloques Gutenberg con m\u00e1s de 25 bloques personalizados. La 'Lista con estilo' es un bloque prominente entre ellos. Aqu\u00ed, le mostraremos c\u00f3mo utilizar este bloque.<\/p>\n\n\n\n

Paso 1: Instalar el plugin Ultimate Blocks<\/h3>\n\n\n\n

Ir a Plugins > A\u00f1adir nuevo plugin<\/strong> desde el panel de control de WordPress. Encuentra el plugin escribiendo Ultimate Blocks en el cuadro de b\u00fasqueda. Instale<\/strong> y activar<\/strong> el plugin despu\u00e9s de que aparezca a continuaci\u00f3n.<\/p>\n\n\n\n

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

Paso 2: A\u00f1adir el bloque de lista estilizada al editor<\/h3>\n\n\n\n

Like any Gutenberg block, haga clic en el bot\u00f3n m\u00e1s (+)<\/strong> y type Styled List<\/strong> in the search box. When the block appears, add it to the editor<\/strong>.<\/p>\n\n\n\n

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

Paso 3: A\u00f1adir elementos al bloque de lista con estilo<\/h3>\n\n\n\n

You can see that the Styled List block is added to the editor. Now, it\u2019s time to add items to the list. You may list the features of your product.<\/p>\n\n\n\n

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

We have added some dummy text to the styled list block.<\/p>\n\n\n\n

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

Paso 4: Seleccionar el icono para el bloque de lista estilizada<\/h3>\n\n\n\n

Select the entire Styled List block<\/strong>. You will see the default Tick icon under the Settings tab. Click on the Tick Icon<\/strong>.<\/p>\n\n\n\n

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

A box, including a collection of icons, will open up. Select the icon you want. The icon will be applied over the entire styled list block.<\/p>\n\n\n\n

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

Paso 5: Personalizar el bloque de lista con estilo<\/h3>\n\n\n\n

Under the settings tab, you\u2019ll find several more options by which you can customize the block. They are:<\/p>\n\n\n\n

Icon size \u2013<\/strong> Increase or decrease the icon size.<\/p>\n\n\n\n

Number of columns \u2013<\/strong> Showcase listicle block in multiple columns.<\/p>\n\n\n\n

Number of columns in mobile \u2013<\/strong> Showcase listicle block in multiple columns in mobile.<\/p>\n\n\n\n

Item spacing (pixels)<\/strong> \u2013 Increase or decrease the space between the listicle items.<\/p>\n\n\n\n

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

Step 06: Stylize the Styled List Block<\/h3>\n\n\n\n

Next, come to the Styles tab<\/strong>. You can change the icon color, list text color, and list background color from this tab.<\/p>\n\n\n\n

After that, you can add padding and margin to give a block your desired layout.<\/p>\n\n\n\n

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

Thus, you can create an icon list using the Ultimate Blocks plugin.<\/p>\n\n\n

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

M\u00e9todo 2: Utilizar Tableberg<\/h2>\n\n\n\n

You may often want to add icon lists to your WordPress tables. But the default table block doesn\u2019t allow you to do this. So, install the Tableberg<\/a> plugin. You can create comprehensive and multipurpose tables for your site using it.<\/p>\n\n\n\n

Paso 1: Instalar el plugin TableBerg<\/h3>\n\n\n\n

Instale<\/strong> y activar<\/strong> el plugin Tableberg en su sitio.<\/p>\n\n\n\n

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

The process of creating tables with the plugin is almost the same as the default table block. Follow this guide to learn how to create tables with TableBerg<\/a>.<\/p>\n\n\n\n

Nota<\/strong>: La versi\u00f3n gratuita de Tableberg viene con un Bloque de lista<\/a>. Para utilizar el Bloque Lista estilizada<\/a>necesita obtener el versi\u00f3n pro<\/a><\/strong> de Tableberg.<\/p>\n\n\n\n

Paso 2: A\u00f1adir el bloque de lista estilizada a la tabla<\/h3>\n\n\n\n

Select the cell to which you want to add the icon list. Once the cell is selected, you\u2019ll see the plus (+) icon.<\/p>\n\n\n\n

Click the plus (+) icon<\/strong>. Find and add the Styled List block<\/strong> a la c\u00e9lula.<\/p>\n\n\n\n

\"A\u00f1adir<\/figure>\n\n\n\n

The Styled List block will instantly be added to the table.<\/p>\n\n\n\n

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

Paso 3: A\u00f1adir elementos al bloque de lista estilizada de la tabla<\/h3>\n\n\n\n

Add as many items as you want to the table.<\/p>\n\n\n\n

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

Step 04: Set an Icon for the Styled List Block<\/h3>\n\n\n\n

Select the entire Styled List block<\/strong>. Go to the Ficha Configuraci\u00f3n<\/strong> en la barra lateral derecha. Click the Tick icon<\/strong> under the Icon Settings option.<\/p>\n\n\n\n

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

A pop-up will open up with a collection of icons. Select the icon you like.<\/p>\n\n\n\n

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

The selected icon will be applied to the entire Styled List block.<\/p>\n\n\n\n

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

Paso 5: Personalizar el bloque de lista con estilo<\/h3>\n\n\n\n

Under the Icon Settings option, you find ways to customize the icon size and icon spacing.<\/p>\n\n\n\n

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

Step 06: Stylize the Styled List Block<\/h3>\n\n\n\n

Go to the Styles tab<\/strong>. You can change the icon color, text color, background color, and padding for the block. <\/p>\n\n\n\n

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

Thus, you can add and create icon lists on WordPress tables.<\/p>\n\n\n

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

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