¿Deseas agregar cuadros de iconos de WordPress a tu sitio web? ¿O deseas agregar un cuadro de características, como a veces se les conoce? Los cuadros de íconos son elementos básicos de diseño que facilitan mostrar las características, servicios, habilidades, etc., que ofrecemos a nuestros clientes y usuarios.
En esta publicación de Ayuda Hosting, les mostraremos cómo agregar cuadros de iconos flexibles a nuestro sitio de WordPress sin necesidad de códigos. Podremos elegir fácilmente entre cientos de iconos y personalizar los textos a nuestro gusto y estilo.
Índice
Cómo agregar cuadros de iconos en WordPress
A continuación, mostramos una captura de pantalla como ejemplo de un cuadro de iconos como el que hemos descrito. Este es un ejemplo sencillo del tipo de cuadro de iconos que podremos crear cuando terminemos este tutorial:
Para ayudar a descubrir el mejor método para nuestro sitio, mostraremos cómo configurar nuestro cuadro de iconos utilizando tres métodos diferentes, en el que todos los plugins empleados son gratuitos:
- Un plugin generador de páginas (Elementor).
- El editor de bloques nativo de WordPress.
- El antiguo editor de WordPress clásico (TinyMCE).
1. Crear un cuadro de iconos con Elementor
Para la configuración más flexible de un cuadro de características o cuadro de iconos de WordPress, podemos usar el plugin gratuito de creación de páginas Elementor. Este es un plugin desarrollado para la creación o generación de páginas web.
Agregar un cuadro de iconos usando Elementor es solo una pequeña parte de lo que puede hacer este plugin en una página normal de WordPress.
Sin embargo, si estamos creando una página de destino u otro tipo de página con estilo, nos asombrará la flexibilidad de arrastrar y soltar que Elementor nos ofrece. Básicamente, en esa situación, todas las demás cosas más allá del cuadro de iconos son muy útiles.
Para comenzar:
- Instalamos y activamos el plugin gratuito Elementor de WordPress.
- Abrimos el editor de WordPress para la publicación o página donde deseamos agregar nuestro cuadro de iconos.
- Hacemos clic en el botón Editar con Elementor para iniciar la interface de diseño visual de arrastrar y soltar de este plugin.
En la interface de Elementor, deberíamos tener una vista previa en vivo de nuestro contenido a la derecha y una barra lateral a la izquierda. Para agregar nuestro cuadro, buscamos Cuadro de icono en la barra lateral y luego arrastramos el widget Cuadro de icono a la vista previa en vivo:
Por lo general, vamos a querer mostrar cuadros de iconos en algún tipo de cuadrícula, lo que Elementor facilita plenamente. A continuación, hacemos clic en el ícono más y seleccionamos la cantidad de columnas que deseamos. Luego, podemos agregar múltiples widgets de Cuadro de iconos para crear un efecto como el siguiente:
En la configuración del widget Cuadro de iconos en la barra lateral, podemos:
- Elegir diferentes iconos de Font Awesome.
- Cambiar el texto.
- Vincular nuestro cuadro o caja con otro lugar.
- Cambiar todas las opciones de estilo y diseño.
Si bien la función de cuadro de iconos está disponible en la versión gratuita de Elementor, Elementor Pro agrega muchas otras características útiles.
2. Añadir un cuadro de iconos usando el editor de bloques de WordPress
Si no confiamos en el creador de páginas completo de Elementor para la creación de nuestro cuadro de iconos, podemos encontrar plugins de bloques de cuadros de iconos dedicados para el editor de bloques de WordPress.
Estos bloques facilitan agregar un cuadro de icono en nuestro contenido. Si los combinamos con el bloque Columnas, podemos crear fácilmente nuestra propia sección de características.
No existe un bloque de iconos en el editor principal. Sin embargo, podemos encontrar varios plugins dedicados que agregan bloques de cuadros de iconos.
Para este tutorial, utilizaremos el plugin gratuito Ultimate Addons for Gutenberg debido a que es el más popular y proviene del mismo desarrollador que el conocido tema Astra.
Sin embargo, entre algunos de los otros plugins de bloques de cuadros de iconos gratuitos se incluyen:
- Getwid.
- Gutentor.
- GutenBee.
- Ultimate Blocks (con el bloque Styled Box).
Si hemos preferido el aspecto de uno de esos otros plugins, no dudemos en emplearlo. Los pasos básicos serán más o menos los mismos, solo cambia el nombre del bloque.
Para comenzar, instalamos y activamos el plugin gratuito Ultimate Addons for Gutenberg de WordPress (o el plugin que elijamos).
Seguidamente, abrimos el editor de la publicación o página donde deseamos agregar nuestro cuadro y hacemos clic en el icono más para abrir el insertador del bloque. Luego, buscamos el Cuadro de información, que es como el plugin llama al bloque:
Y con esto, ya tenemos un cuadro de icono donde podremos:
- Personalizar el texto haciendo clic en la opción para comenzar a escribir.
- Personalizar el icono, los colores y otros elementos de diseño. Podemos usar la barra lateral Bloque.
Si deseamos agregar varios cuadros de iconos en una cuadrícula, podemos anidarlos dentro del bloque de columnas nativo. También, Ultimate Addons para Gutenberg incluye su propio bloque de columnas que nos brinda un poco más de flexibilidad llamado Columnas avanzadas:
3. Agregar un cuadro de iconos usando el editor clásico de WordPress
Para finalizar, ¿qué ocurre si no deseamos emplear Elementor y seguimos empleando el antiguo editor Classic TinyMCE?
En ese caso, la mejor opción que hemos encontrado es el plugin gratuito Service Box Showcase de WordPress.
Una vez que instalamos y activamos el plugin, podemos ir a Service Box -> Add New Service Box en nuestro tablero del administrador de WordPress.
Allí, podemos elegir entre dos diseños diferentes, la versión gratuita y la versión Pro. Además de eso, podemos personalizar el contenido y el ícono para cada cuadro. El plugin utiliza Font Awesome para nuestros iconos, lo que nos brinda mucha flexibilidad.
También, podemos usar la configuración de la barra lateral para personalizar los colores y el estilo de nuestros cuadros:
Además, el plugin nos proporciona un código corto que podemos agregar al editor clásico o en cualquier otro lugar de nuestro sitio web:
Si pensamos que estamos limitados por las opciones de diseño del plugin, es posible que deseemos retroceder y usar Elementor en su lugar, ya que nos dará mucha más flexibilidad.
Conclusión
Y estas fueron las tres formas gratuitas de agregar un cuadro de iconos a nuestro sitio de WordPress.
Así es como resumiríamos estas opciones:
- Elementor: La mejor opción si deseamos flexibilidad de diseño total tanto para nuestro cuadro de iconos como para el resto de nuestro contenido. Es perfecto para las páginas de destino u otras páginas importantes.
- Ultimate Addons for Gutenberg: La mejor opción si deseamos algo que funcione en el nuevo editor de bloques de WordPress.
- Service Box Showcase: Esta es una opción sólida si todavía usamos el editor Classic TinyMCE y no deseamos usar Elementor. Sin embargo, en general, consideramos que esta opción no es tan flexible como los otros dos métodos.
Esperamos que este artículo sobre cómo agregar cuadros de iconos en WordPress, les haya resultado útil. Más información sobre este y otros temas en Ayuda Hosting.
