Cómo agregar cuadros de características con íconos en WordPress

Mira cualquier sitio web de negocios exitoso y es probable que veas cuadros de características con íconos que resaltan sus ofertas clave.

Es un patrón de diseño probado que hemos utilizado innumerables veces porque funciona. Ayuda a los visitantes a ver rápidamente qué hace que su negocio sea especial sin leer grandes bloques de texto.

Habiendo guiado a muchos usuarios de WordPress a través de mejoras en el sitio, sabemos que crear estos cuadros de características de aspecto profesional puede parecer una molestia.

Pero esto es lo que la mayoría de la gente no se da cuenta: no necesitas ser un diseñador o desarrollador para agregar hermosos cuadros de características a tu sitio.

En esta guía, compartiremos las formas más sencillas de crear cuadros de características con íconos en WordPress. Yo

¿Qué son los cuadros de características con íconos?

La mayoría de las personas no leerán cada palabra de tu sitio web de WordPress, especialmente si una página tiene mucho texto.

En cambio, los visitantes escanearán la página para encontrar la información que buscan, rápidamente. Esto significa que debes presentar la información importante de una manera que sea escaneable y atractiva, por eso tantos sitios web usan cuadros de características.

En la siguiente imagen, puedes ver cómo WPForms utiliza cuadros de características para resaltar los puntos de venta más importantes del plugin.

Incluso puedes agregar un botón de llamada a la acción para que los usuarios puedan obtener más información sobre una característica en particular.

Dicho esto, te mostraremos cómo agregar cuadros de características con íconos en WordPress. Simplemente usa 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 de WordPress (no se requiere plugin)
• Método 2: Agregar cuadros de características con íconos usando un plugin de constructor de páginas (recomendado)

Método 1: Agregar cuadros de características con íconos usando el editor de bloques de WordPress (no se requiere plugin)

Puedes agregar cuadros de características con íconos a tu sitio de WordPress usando el editor de contenido estándar y el bloque de columnas. Esto significa que no necesitas instalar un nuevo plugin de WordPress, por lo que es un método rápido y fácil.

Para empezar, abre la página donde deseas agregar un cuadro de características. Luego, haz clic en el ícono de agregar bloque ‘+’.

A continuación, escribe ‘Columnas’ en el cuadro de búsqueda.

Cuando aparezca el bloque correcto, haz clic para agregarlo a la página.

WordPress ahora mostrará todos los diferentes bloques de columnas. Los números indican cuánto espacio ocupa cada columna en el bloque. Por ejemplo, ’50/50′ crea dos columnas que ocupan el 50% del ancho disponible cada una.

Como ejemplo, seleccionaremos el bloque de columnas ’33/33/33′ ya que esto nos da tres columnas de igual ancho, pero puedes usar el diseño que prefieras.

Después de eso, estarás listo para agregar íconos a las columnas.

La forma más fácil de hacer esto es con fuentes de íconos destacadas, que son símbolos redimensionables que no ralentizarán tu sitio web. Recomendamos usar Font Awesome ya que tienen una de las colecciones más grandes de íconos gratuitos.

Una vez que hayas agregado fuentes de íconos en tu tema de WordPress, es fácil mostrarlos en tus columnas usando código corto.

Simplemente haz clic en el ícono ‘+’ de la columna y escribe ‘Shortcode’. Cuando aparezca el bloque correcto, haz clic para agregarlo a tu diseño.

Después de eso, puedes ingresar el siguiente código corto, pero asegúrate de reemplazar 'bus' con el nombre del ícono que deseas usar:

[icon name="bus"]

Para ver una lista completa de los íconos disponibles, simplemente ve a la biblioteca de íconos de Font Awesome.

Cuando encuentres un ícono que te guste, haz clic en él para ver el nombre de ese ícono.

Por ejemplo, en la siguiente imagen, estamos viendo un ícono llamado 'address-book'.

Ahora puedes agregar este nombre al código corto.

Para obtener más información sobre cómo trabajar con shortcodes, consulta nuestra guía para principiantes sobre cómo agregar un shortcode en WordPress.

Si prefieres usar una imagen de la biblioteca de medios de WordPress, puedes agregar un bloque de imagen en lugar de usar una fuente de iconos.

Para hacer esto, simplemente haz clic en el '+' en la primera columna y luego agrega un bloque de 'Imagen' en lugar de un bloque de shortcode.

Ahora puedes elegir una imagen de la biblioteca de medios o subir un nuevo archivo desde tu computadora.

Una vez que hayas agregado todos tus iconos, el siguiente paso es agregar texto al cuadro de características.

Para hacer esto, haz clic en el botón '+' dentro del bloque de Columnas. Luego, agrega un bloque de Párrafo.

Después de eso, simplemente escribe tu texto en el bloque de párrafo.

Puedes agregar iconos y texto a las otras columnas repitiendo el mismo proceso.

¿Quieres que tu cuadro de características tenga varias filas?

Simplemente haz clic en el bloque de Columnas y luego selecciona los tres puntos en la barra de herramientas. Luego puedes seleccionar 'Duplicar'.

Esto creará una copia del bloque de Columnas.

Ahora, simplemente sigue el mismo proceso descrito anteriormente para agregar contenido a la segunda fila.

Cuando estés satisfecho con el cuadro de características, puedes agregar otro contenido a la página, como una imagen del producto o categorías y etiquetas.

Para que el cuadro de características esté activo, simplemente haz clic en el botón 'Actualizar' o 'Publicar'.

Ahora puedes visitar tu sitio web, blog o tienda en línea para ver el cuadro de iconos de características en acción.

Aquí tienes un ejemplo de lo que verán las personas cuando visiten tu blog de WordPress.

Método 2: Agregar cuadros de características con íconos usando un plugin de constructor de páginas (recomendado)

Si quieres crear una caja de características simple, entonces el editor de bloques de WordPress es una buena opción. Sin embargo, si quieres crear una caja más avanzada con un diseño completamente personalizado, entonces necesitarás un plugin de constructor de páginas.

SeedProd es el mejor constructor de páginas de WordPress del mercado que te permite crear páginas personalizadas usando un editor de arrastrar y soltar.

Tiene más de 300 plantillas diseñadas profesionalmente que puedes usar para crear páginas hermosas rápidamente. También tiene una biblioteca completa de íconos que puedes agregar a tus cajas de características con un solo clic.

Aquí tienes un ejemplo de una caja de características creada usando los bloques e íconos listos para usar de SeedProd.

Hemos visto a nuestras marcas asociadas usar esta herramienta para crear sus sitios web, y han tenido una experiencia excelente. Para más detalles, consulta nuestra reseña de SeedProd.

Lo primero que necesitas hacer es instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Tras la activación, ve a SeedProd » Ajustes e introduce tu clave de licencia.

Puedes encontrar esta información iniciando sesión en tu cuenta de SeedProd.

Elige una plantilla diseñada profesionalmente

Para empezar, ve a SeedProd » Landing Pages y haz clic en ‘Agregar nueva landing page’.

En la siguiente pantalla, puedes elegir una plantilla. Puedes personalizar todas estas plantillas usando el constructor de arrastrar y soltar de SeedProd, pero aun así es una buena idea elegir una plantilla que coincida con tus objetivos.

Todas las plantillas de SeedProd están organizadas en diferentes tipos de campañas, como próximamente y campañas de captación de leads. Incluso puedes usar las plantillas de SeedProd para mejorar tu página 404.

Para esta guía, usaremos la 'Plantilla en blanco', pero puedes usar cualquier plantilla que desees.

Para elegir una plantilla, simplemente pasa el cursor sobre ella y luego haz clic en el icono de 'Marca de verificación'.

Esto abre una ventana emergente donde puedes darle un nombre a la página. SeedProd usa el nombre de la página en la URL, pero puedes cambiar este enlace si lo deseas. Por ejemplo, podrías querer mejorar tu SEO de WordPress incluyendo algunas palabras clave relevantes.

Después de eso, haz clic en el botón ‘Guardar y empezar a editar la página’.

Esto abre la plantilla en el editor de páginas de arrastrar y soltar de SeedProd.

Diseña tu caja de características

Dado que estás usando la plantilla en blanco, el primer paso es elegir un diseño. Para hacer esto, simplemente haz clic en cualquiera de los diseños de columnas.

Después de eso, busca el bloque 'Icono' en el menú de la izquierda.

Ahora puedes arrastrar y soltar este bloque en la primera columna vacía.

Esto agrega el bloque de icono a tu diseño, con un icono predeterminado ya seleccionado.

Para cambiar el icono, haz clic en él y luego selecciona el botón 'Elegir imagen'.

Esto abre la biblioteca de íconos con cientos de íconos para elegir. Puedes usar la barra de búsqueda para buscar un ícono específico o navegar por toda la lista.

Cuando encuentres una imagen que quieras usar, simplemente pasa el cursor sobre ella y luego haz clic en el botón '+' para agregarla a tu página.

Para personalizar el icono, haz clic para seleccionarlo.

Ahora puedes ajustar este icono usando la configuración en el menú de la izquierda, incluyendo cambiar su alineación, tamaño, color y más.

Para ver más opciones, haz clic en la pestaña 'Avanzado'.

Aquí, puedes cambiar el espaciado, agregar un borde e incluso agregar efectos de animación CSS.

Una vez que hayas hecho eso, agrega un bloque de 'Texto' debajo del icono.

Simplemente busca el bloque 'Texto' en el menú de la izquierda y luego colócalo debajo de tu icono usando arrastrar y soltar.

Para agregar texto, haz clic para seleccionar el bloque. Luego puedes escribir en el pequeño editor de texto en el menú de la izquierda.

Aquí, puedes agregar enlaces, cambiar la alineación del texto, cambiar el color del texto y más.

Para personalizar las otras columnas, simplemente sigue los mismos pasos que arriba.

Si deseas agregar otra fila de cuadros de características con íconos, coloca el cursor sobre la sección y luego haz clic en el botón ‘Duplicar fila’.

Puedes duplicar la sección tantas veces como quieras para crear rápidamente más cuadros de características con íconos.

Luego puedes agregar nuevos íconos y texto siguiendo el mismo proceso descrito anteriormente.

Puedes continuar trabajando en la página agregando más bloques y personalizando esos bloques en el menú de la izquierda.

Cuando estés satisfecho con el aspecto de la página, haz clic en el botón ‘Guardar’. Luego puedes seleccionar ‘Publicar’ para que esa página esté activa.

Esperamos que este artículo te haya ayudado a aprender cómo agregar cuadros de características con íconos en WordPress. También te puede interesar 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 obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.