La mayoría de los visitantes escanean una página antes de decidir si la leerán. Si tus beneficios clave están enterrados en párrafos de texto, muchas personas pueden irse sin verlos nunca.
Los cuadros de características resuelven esto al emparejar cada beneficio con un pequeño icono y una breve descripción, para que los visitantes comprendan lo que ofreces de un vistazo. También puedes agregar un botón de llamada a la acción a cada cuadro para dirigir a los lectores a más detalles.
En esta guía, te mostraremos cómo agregar cuadros de características con iconos en WordPress usando el editor de bloques integrado o un plugin de page builder.
¿Qué método debes usar para agregar cuadros de características?
Si estás agregando una o dos secciones de características a una página o publicación existente, usa el método del editor de bloques. Es gratuito, está integrado en WordPress 7.0 y versiones posteriores, y no requiere otro plugin.
Si estás diseñando una página de destino completa desde cero, un page builder es la mejor opción. Obtienes plantillas listas para usar y más opciones de estilo para cada icono.
Puedes usar los enlaces rápidos a continuación para saltar directamente al método que deseas usar:
Método 1: Agregar cuadros de características con íconos usando el editor de bloques (Gratis)
El editor de bloques de WordPress construye páginas a partir de bloques, que son piezas individuales de contenido como un párrafo, una imagen o un botón.
WordPress 7.0 agregó un bloque de Icono integrado que te permite insertar iconos SVG sin un plugin. SVG es un formato de imagen hecho de código, por lo que los iconos permanecen nítidos a cualquier tamaño y cargan rápidamente.
Si estás en una versión anterior de WordPress, no encontrarás el bloque de Icono en el editor. Necesitarás actualizar WordPress antes de seguir este método.
Paso 1: Agregar un bloque de columnas
Comienza agregando un bloque de Columnas. Primero, abre la página donde deseas agregar tus cuadros de características. Luego, haz clic en el icono + Agregar bloque, busca Columnas y haz clic en el bloque Columnas para agregarlo.
WordPress te mostrará varios diseños de columnas. Los números indican cuánto espacio ocupa cada columna. Por ejemplo, 50 / 50 crea dos columnas de igual ancho.
Seleccionaremos 33 / 33 / 33 para crear tres columnas iguales, pero puedes elegir cualquier diseño que funcione para tu contenido.
Paso 2: Agregar íconos a tus cuadros de características
A continuación, haz clic en el botón + dentro de la columna y busca Icono. Cuando aparezca el bloque de Icono, haz clic en él para agregarlo.
WordPress agregará automáticamente un icono de Información a la columna. Haz clic en el botón 'Reemplazar' para elegir un icono diferente.
Esto abre la biblioteca de iconos. Puedes escribir un nombre, como foto o tienda, en la barra de búsqueda, o desplazarte por los iconos disponibles.
Cuando encuentres el icono que deseas, haz clic en él para agregarlo a tu columna.
Luego puedes personalizar el icono usando la configuración del bloque. Dependiendo de tu tema y configuración, puedes cambiar el color del icono, el color de fondo, las dimensiones y el borde. También puedes usar la barra de herramientas para centrar el icono.
Paso 3: Agregar texto a tus cuadros de características
Una vez que tus iconos estén en su lugar, haz clic en el botón + debajo del icono en la primera columna y agrega un bloque de Encabezado para el nombre de la característica.
Luego, agrega un bloque de Párrafo debajo y escribe una breve descripción de la característica. Usualmente, una o dos oraciones son suficientes.
Repite el mismo proceso para las otras columnas.
Paso 4: Crear más filas de cuadros de características (Opcional)
Si deseas agregar más de una fila de cuadros de características, selecciona el bloque de Columnas y haz clic en el menú de tres puntos en la barra de herramientas. Luego, selecciona Duplicar.
Esto crea una copia de toda la fila. Luego puedes reemplazar los íconos y el texto con contenido nuevo usando los mismos pasos anteriores.
Paso 5: Publicar tus cuadros de características con iconos
Cuando estés satisfecho con tus cuadros de características, haz clic en el botón Guardar o Publicar para activarlos.
Luego, puedes visitar tu sitio web para ver los cuadros de características en acción:
Método 2: Agregar cuadros de características con íconos usando un constructor de páginas
El editor de bloques funciona bien cuando deseas agregar una sección de características a una página existente. Pero si estás diseñando una página de destino completa y deseas un mayor control sobre el diseño y el estilo, un constructor de páginas de arrastrar y soltar puede brindarte más flexibilidad.
Usaremos SeedProd para este método porque lo usamos en nuestros propios sitios. La mayoría de los constructores de páginas de arrastrar y soltar, como Elementor, ofrecen un elemento de cuadro de íconos y una biblioteca de íconos incorporada. Para obtener más información, consulta nuestra reseña de SeedProd.
Paso 1: Instalar y configurar el Page Builder
Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Nota: Existe una versión gratuita del plugin, pero usaremos la versión de pago porque el bloque Icon Box y la biblioteca de íconos solo están disponibles en los planes con licencia.
Una vez que actives el plugin, ve a SeedProd » Configuración e ingresa tu clave de licencia. Puedes encontrar tu clave iniciando sesión en tu cuenta de SeedProd.
Paso 2: Elige una Plantilla de Página de Destino
A continuación, ve a SeedProd » Páginas de destino y haz clic en ‘+ Agregar nueva página de destino’.
Luego, ingresa un nombre para tu página. SeedProd también usará este nombre para crear la URL de la página, pero puedes editar la URL si es necesario.
En la siguiente pantalla, elegirás una plantilla. Cada plantilla se puede personalizar con arrastrar y soltar, pero elegir una que coincida con tu objetivo puede ahorrarte tiempo.
Para esta guía, usaremos la Plantilla en blanco. Pasa el cursor sobre ella y haz clic en el ícono de marca de verificación para seleccionarla.
Luego, haz clic en ‘Guardar y comenzar a editar la página’.
Paso 3: Crear tus cuadros de características con iconos
Dado que comenzamos con una plantilla en blanco, el primer paso es elegir un diseño. Aquí, elijamos el diseño de una sola columna para diseñar el área del encabezado encima de tus cuadros de características.
Luego, puedes arrastrar el bloque Encabezado desde el menú de la izquierda a la página. Selecciona el bloque para editar su texto y ajustar su formato usando las opciones en el panel de la izquierda.
Repite el proceso con el bloque de Texto.
También puedes personalizar el encabezado agregando una imagen de fondo o cambiando su formato. Para más opciones, haz clic en la pestaña ‘Avanzado’ para ajustar el espaciado, agregar un borde, agregar efectos de animación y más.
Una vez que termines con el encabezado, puedes crear los cuadros de características. Arrastra el bloque Columna desde el panel de la izquierda al editor y colócalo justo debajo del área del encabezado.
Después de eso, puedes elegir un diseño. Para este ejemplo, usaremos la opción con tres columnas iguales.
Luego, busca el bloque Icon Box en el menú de la izquierda y arrástralo a la primera columna.
El bloque incluye un ícono, encabezado y texto de ejemplo predeterminados que puedes personalizar.
Para cambiar el ícono, busca la sección Icono/Imagen en el panel izquierdo. Luego, pasa el cursor sobre el ícono actual y haz clic en el botón para reemplazarlo.
Esto abre la biblioteca de íconos. Puedes buscar un ícono específico o explorar las opciones disponibles. Cuando encuentres uno que te guste, haz clic en él para agregarlo a tu cuadro de características.
Una vez que hayas seleccionado un ícono, haz clic en él para abrir su configuración en el menú de la izquierda. Aquí, puedes cambiar su alineación, tamaño y color.
Paso 4: Personalizar el contenido de tu cuadro de características
A continuación, selecciona el texto en tu Icon Box para abrir su configuración en el menú de la izquierda.
Puedes reemplazar el encabezado y la descripción de ejemplo con tu propio texto de características. También puedes agregar enlaces o cambiar la alineación y el color del texto.
Repite estos pasos para las otras columnas, agregando un ícono y texto de características diferente a cada una.
Paso 5: Publicar tu página de destino
Si deseas agregar otra fila de cuadros de características, pasa el cursor sobre la sección y haz clic en el botón Duplicar fila. Luego, reemplaza los íconos y el texto con tu nuevo contenido.
También puedes personalizar el resto de tu página de destino agregando imágenes, botones de llamada a la acción u otros bloques. El proceso es similar: arrastra el bloque que deseas al editor y personalízalo desde el panel de la izquierda.
Cuando estés satisfecho con tu página de destino, haz clic en el botón 'Guardar' y luego selecciona 'Publicar' para que esté activa. Ahora puedes ver la página de destino en acción:
Preguntas frecuentes sobre cuadros de características con iconos
Aquí tienes algunas preguntas frecuentes sobre cómo agregar cuadros de características con íconos en WordPress:
¿Cómo agrego íconos en WordPress?
Si estás en WordPress 7.0 o posterior, puedes usar el bloque Icono incorporado, que te permite buscar la biblioteca de íconos de WordPress por nombre. Para conjuntos de íconos más grandes como Font Awesome, necesitarás un plugin o un constructor de páginas con su propia biblioteca de íconos.
¿Cómo agrego íconos personalizados a WordPress?
El bloque Icono solo muestra íconos de la biblioteca de WordPress, por lo que no puedes subir los tuyos a través de él. En su lugar, puedes subir tu ícono como un archivo PNG usando el bloque Imagen.
Esperamos que este artículo te haya ayudado a aprender cómo agregar cajas de características con iconos en WordPress. También te puede interesar ver nuestra guía sobre cómo personalizar los colores en tu sitio de WordPress y formas de crear un sitio de WordPress compatible con dispositivos móviles.
Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
micahel
Artículo muy bueno y me ayudó a resolver mi problema. Pero aquí está mi pregunta.
-¿Cómo creas las barras laterales tan bonitas que se ven en esta publicación, como cómo iniciar un blog, plano del sitio web, necesito ayuda con..., guías útiles de WordPress, Ofertas y cupones
-Realmente necesito ayuda para crear estas barras laterales, ya que estoy leyendo cómo crear un blog
Ashutosh Panda
Fue un artículo increíble..
Me ayudó mucho
Rob
Hola. Mis íconos no se centran en la columna en sí. ¿Hay algún parámetro que podamos agregar para asegurar que se centren? 2 de mis íconos se centran bien, pero 2 solo se alinean a la izquierda, incluso si los alineo al centro usando el formato en el editor de formato de Wordpress (usando un plugin).
Gracias.
Hassan NAITALI
Gran artículo, me encanta,
Entonces, tengo una pregunta, ¿puedo hacer cambios en estos íconos y hacerlos más grandes haciendo cambios en el tema padre gráficamente y sin tocar el código CSS?
¡¡Gracias!!
Soporte de WPBeginner
Hola Hassan,
Aún necesitarías algo de CSS.
Administrador
Chris
Intenté todo lo que se dijo en el tutorial, pero en lugar de que se establezca en columnas, todo se establece en una sola columna. Mientras que los íconos están al lado de las palabras. Quería crear tres columnas y todo está debajo de uno en una columna. ¿Por qué es eso?
Roshni
¡Gracias. Muy útil!
Paul
¿Tienes un tutorial sobre cómo hacer esto con CSS, HTML y PHP sin tener que usar un plugin? He buscado pero no encuentro nada.
john
¿Cómo hago para que el ícono se centre sobre el contenido?
Evan herman
Para cualquiera que use WP SVG Icons y no se sienta cómodo escribiendo CSS, en realidad puede ajustar el tamaño del ícono pasando un parámetro size=”#px” al shortcode wp-svg-icons.
Ejemplo:
[wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]
Eso establecerá el ícono en 100px y evitará el paso de escribir CSS personalizado. Es posible que aún necesites ajustar el relleno.
Andre Page
¡Eso fue muy útil Evan, gracias!!
Roshni
Gracias, Evan. Eso funcionó.
Bobby
Buen artículo sobre una característica importante para tu sitio. Sin embargo, el plugin recomendado no se ha actualizado en 2 años. Soy relativamente nuevo en WordPress y me dijeron que evitara los plugins que no se hubieran actualizado en el último año. Supongo que depende, ya que tú sabes mucho de WordPress y destacaste el plugin en este artículo. Hazme saber tus opiniones.
Soporte de WPBeginner
Bobby, el plugin funciona bien, lo probamos. También nos hemos puesto en contacto con el autor del plugin para que lo actualice.
Idealmente deberías instalar plugins que se hayan actualizado recientemente. Sin embargo, hay muchos plugins de WordPress que no necesitan actualizaciones. Los autores de plugins sienten que, dado que un plugin no está roto y funciona muy bien, no hay necesidad de que lo actualicen.
Administrador
Bobby
Ok, eso es bueno saberlo. Gracias de nuevo.
arun
Gran publicación, yo también tengo un blog de WordPress. Aplicaré estos íconos en mi blog, gracias por compartir.
Hemang Rindani
Buen artículo. WordPress es una excelente solución de gestión de contenido empresarial que puede satisfacer cualquier requisito comercial complejo y desarrollar sitios web potentes. Contiene miles de temas, módulos y plugins flexibles, personalizables y receptivos que se pueden utilizar para diseñar múltiples sitios web sin esfuerzo. La creciente competencia exige un sitio web interactivo y atractivo, y por lo tanto, es importante incluir una variedad de herramientas que animen a los visitantes a permanecer más tiempo en una página. Los plugins en WordPress agregan valor a la página web, especialmente al hacerla más interesante. Utilizar las herramientas adecuadas como los botones de llamada a la acción y los botones de inicio de sesión y compartir en redes sociales con el contenido de la página ayuda a mejorar la experiencia del usuario. El artículo resaltó acertadamente el punto de que seleccionar la herramienta adecuada y utilizar sus poderes permite a un desarrollador de CMS tener un mejor control sobre el sitio web.