Cómo agregar un cuadro de icono de WordPress a su contenido (3 complementos gratuitos)

¿Le gustaría agregar un cuadro de icono de WordPress a su sitio? ¿O un cuadro de características, como a veces se los conoce? Los cajas de iconos son una base de diseño que facilita su presentación o características, servicios, habilidades, etc. De su producto en esta publicación, le mostraré cómo agregar un cuadro de icono flexible a su sitio de WordPress sin la necesidad de código. Podrá elegir fácilmente cientos de iconos y personalizar el texto como desee. Si no está seguro de lo que hablamos, aquí hay un ejemplo rápido del tipo de cuadro de iconos que podrá crear hasta que termine este tutorial:

Para ayudarlo a descubrir el mejor método para su sitio, le mostraré cómo configurar el cuadro de iconos usando tres diferentes, todo gratuito:
Plugin para páginas Generador Elementor
Editor nativo de WordPress Block
Editor de WordPress “Classic” más antiguo (TinyMCE)
Cómo agregar un cuadro de icono elemental para la forma más flexible de configurar un cuadro de características/iconos de WordPress, puede usar el complemento gratuito de constructor de páginas, que es el complemento para el generador de páginas que usamos aquí en Wplift. Elementor es un poco exagerado si solo desea agregar un cuadro de icono como pequeña parte de una página regular de WordPress.
Sin embargo, si crea una página de destino u otro tipo de página de estilo, creo que le gustará la flexibilidad de las ofertas de deslizamiento y colocación. Básicamente, en esta situación, todas las otras cosas más allá del cuadro de iconos son útiles. Empezar:

El artículo continúa a continuación
Instale y active el complemento elemental gratuito en wordpress.org. Abra el editor de WordPress para publicar o página donde desea agregar el cuadro de icono.
Haga clic en el botón Editar con Elementor para iniciar la interfaz de diseño visual, deslizando y colocando.
En la interfaz elemental, debería ver una vista previa en vivo de su contenido a la derecha y una barra lateral a la izquierda. Para agregar su caja, busque “icono de caja” a la barra lateral y luego dibuje el cuadro de iconos en una vista previa en vivo:
Por lo general, querrá mostrar cuadros con iconos en un cierto tipo de cuadrícula, que el elemento facilita. Todo lo que tiene que hacer es hacer clic en el icono más y seleccionar cuántas columnas desea. Entonces puede agregar más widgets de caja de iconos para crear un efecto como este:

En la configuración del cuadro de icono de widget en la barra lateral, puede:

Elija diferentes íconos de fuentes increíbles
Cambiar el texto
Inicie sesión en su caja en otro lugar
Cambiar todas las opciones de estilo y mirar
Si bien la característica del cuadro de iconos está disponible en la versión gratuita de Elementor, Elementor Pro agrega muchas otras funciones útiles: puede averiguar sobre ellas en nuestra revisión primaria completa.

Cómo agregar un cuadro de icono Usando el editor de bloques de WordPress Si no desea confiar en el generador de páginas completo para su cuadro de icono, también puede encontrar complementos dedicados para el editor de bloques de WordPress. Estos bloques facilitan la adición de una caja con iconos en el contenido ordinario. Si los combina con el bloque de columnas, puede crear fácilmente su propia sección de características. No hay un bloque de iconos en el editor base, pero puede encontrar más complementos que agregan cuadros de iconos dedicados. El artículo continúa a continuación
Para este tutorial, usaré los complementos gratuitos de los complementos Ultimate para Gutenberg, porque es el más popular y proviene del mismo desarrollador que el tema Astra popular.

Sin embargo, algunos de los otros complementos gratuitos para bloques de caja de iconos incluyen:

Anciano

Gutenor
Gutenbee
Ultimate Blocks (con el bloque de “caja de estilo”)
Si prefiere la apariencia de uno de estos otros complementos, no dude en usarlo. Los pasos básicos serán casi los mismos: el nombre del bloque puede ser diferente. Para iniciar, instale y active los complementos gratuitos Ultimate Addons para Gutenberg en wordpress.org (o cualquier complemento que haya elegido).
Abra el editor para publicar o página donde desea agregar el cuadro y haga clic en el icono más para abrir la herramienta de inserción de bloque. Luego busque “cuadro de información”, que es lo que el complemento llama al bloque:
¡Y voilá! Tienes un cuadro de icono:
Para personalizar el texto, puede hacer clic y escribir.

Para personalizar el icono, los colores y otros elementos de diseño, puede usar la barra lateral. O bien, los complementos finales para Gutenberg también incluyen su propio bloque de columnas que le brinda un poco más de flexibilidad llamada “columnas avanzadas”:
El artículo continúa a continuación
Cómo agregar un cuadro de icono usando el clásico editor de WordPress Finalmente, ¿qué pasa si no desea usar Elementor y aún usar el editor TinyMCE más antiguo? En este caso, la mejor opción que encontré es la exhibición de caja de servicio gratuita. Después de instalar y activar el complemento, puede acceder al cuadro de servicio → Agregar nuevo cuadro de servicio desde el tablero. Allí, puede elegir entre dos aspectos diferentes (en la versión gratuita, más en Pro). A continuación, puede personalizar el contenido y el icono para cada cuadro. El complemento usa Font Awesome para sus íconos, lo que le brinda mucha flexibilidad.

También puede usar la configuración de la barra lateral para personalizar los colores y el estilo de sus cajas:


A continuación, el complemento le brinda un código corto que puede agregar al editor clásico (o en cualquier lugar de su sitio):

Si se siente limitado por las opciones de diseño del complemento, es posible que desee regresar y usar Elementor, ya que le dará mucha más flexibilidad. ¡Crea tu propia caja de iconos de WordPress hoy y aquí! Tres formas gratuitas en que puede agregar un cuadro de icono a su sitio de WordPress. Así es como resumiría estas opciones:
Elementor: la mejor opción si desea una flexibilidad de diseño total tanto para el cuadro de iconos como para el resto del contenido.Es perfecto para páginas de destino u otras páginas importantes. Siguiendo complementos para Gutenberg, la mejor opción si desea que algo funcione en el nuevo editor de bloques de WordPress.

Service Box Showcase: una opción sólida si todavía usa el editor Classic TinyMCE y no desea usar Elementor.En general, sin embargo, no parece tan flexible como los otros dos métodos.

¿Todavía tiene alguna pregunta sobre cómo agregar un cuadro de iconos a su sitio de WordPress?¡Pregunte en la sección de comentarios!