¿Desea agregar cuadros de funciones con hermosos íconos a su sitio de WordPress?
Los cuadros de características resaltan los puntos de venta importantes de sus productos y servicios. Son una forma muy eficaz de presentar características a nuevos clientes.
En este artículo, le mostraremos cómo agregar cuadros de funciones con íconos a su sitio de WordPress fácilmente.
¿Qué son los cuadros de funciones con iconos?
La mayoría de las personas no leen los sitios web palabra por palabra cuando los visitan, especialmente si tienen mucho texto. En cambio, sus visitantes escanearán la página para encontrar la información que están buscando.
Esto significa que, como propietario de un negocio, debe presentar información importante en un formato fácilmente escaneable y muy atractivo.
Es por eso que muchos sitios web comerciales populares suelen tener una imagen grande o un control deslizante en la parte superior de una página web con un botón de llamada a la acción.
Justo debajo de eso, puede usar cuadros de características para mostrar las características importantes de su producto o servicio.
Incluso puede incluir un botón de llamada a la acción debajo de los cuadros de características para dirigir a los usuarios a su producto o página de características.
He aquí un ejemplo de cómo WPForms utiliza cuadros de características con iconos para resaltar las características del producto.
Dicho esto, le mostraremos cómo agregar cuadros de funciones con íconos en WordPress usando dos métodos diferentes. Simplemente use los enlaces rápidos a continuación para saltar directamente al método que desea usar.
Método 1. Agregue cuadros de funciones con iconos usando el editor de bloques de WordPress
Puede usar el editor de bloques de WordPress para agregar cuadros de funciones con íconos a su sitio de WordPress. Si recién está comenzando con el editor de bloques, consulte nuestra guía sobre cómo usar el editor de bloques de WordPress.
Primero, debe abrir la página donde desea agregar los cuadros de funciones.
Luego, haga clic en el ícono de agregar bloque ‘Más’ para que aparezca el editor de bloques.
A continuación, busque ‘Columnas’ en el cuadro de búsqueda.
Luego, seleccione el bloque ‘Columnas’.
Esto abre una lista de bloques de columnas disponibles.
Seleccionaremos el bloque de columnas ’33/33/33′ ya que esto nos da tres columnas de igual ancho para agregar cuadros de características.
Después de eso, debe agregar íconos a sus columnas.
La forma más sencilla de hacerlo es con fuentes de iconos. Las fuentes de iconos son símbolos de tamaño variable que puede usar sin ralentizar su sitio web. Recomendamos usar fuente impresionanteya que ofrecen una de las mejores colecciones de fuentes de iconos de forma gratuita.
Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo agregar fuentes de iconos en su tema de WordPress.
Una vez que haya hecho eso, puede agregar fácilmente fuentes de íconos a sus columnas haciendo clic en el ícono de agregar bloque ‘Más’ en la primera columna.
Luego, busca el bloque ‘Shortcode’ y selecciónalo.
Después de eso, puede ingresar el siguiente código abreviado para el icono de Font Awesome.
[icon name="bus"]
Simplemente reemplace el "bus" con el nombre del icono que quieras. Para ver la lista completa de iconos disponibles, puede ir a la Biblioteca de iconos Font Awesome.
Cuando encuentre un icono que le guste, haga clic en él y tome nota del nombre del icono.
Luego, puede agregar el nombre a su bloque de shortcode y se mostrará automáticamente.
Nota: Si ya tiene sus íconos guardados como imágenes, puede agregar un bloque de imágenes en lugar de usar fuentes de íconos.
Para hacer esto, simplemente seleccione el bloque ‘Imagen’ en lugar del bloque de código abreviado.
Luego, puede cargar su ícono o seleccionar su ícono de su biblioteca de medios.
A continuación, puede agregar texto a su cuadro de características haciendo clic en el ícono de agregar bloque ‘Más’.
Luego, seleccione el bloque ‘Párrafo’.
Después de eso, puede hacer clic en el texto para cambiarlo.
Luego, simplemente siga los mismos pasos anteriores para personalizar las columnas restantes.
También puede crear otra fila de tres columnas debajo de la fila que acaba de crear.
Para hacer esto, haga clic en el bloque de columnas y seleccione el menú ‘Opción’ de tres puntos.
Luego, seleccione la opción ‘Duplicar’ de la lista desplegable.
Esto creará automáticamente una copia de la columna.
Todo lo que necesita hacer es seguir los mismos pasos anteriores para cambiar el icono y el texto.
Una vez que haya terminado de realizar cambios en sus cuadros de características, debe hacer clic en el botón ‘Actualizar’ o ‘Publicar’ en la parte superior de la página.
Ahora sus cuadros de características con íconos estarán activos en su sitio web.
Aquí hay un ejemplo de lo que verán sus visitantes.
Método 2. Agregue cuadros de funciones con íconos usando un complemento de WordPress Page Builder
Una de las formas más fáciles y amigables para principiantes de agregar cuadros de funciones con íconos a WordPress es usar el complemento de creación de páginas SeedProd.
SeedProd es el mejor generador de páginas de WordPress de arrastrar y soltar en el mercado utilizado por más de 1 millón de sitios web. Le permite crear fácilmente páginas personalizadas, páginas de destino, páginas 404 y más con el generador de arrastrar y soltar.
Tiene más de 100 plantillas prefabricadas que puede usar para acelerar el proceso de diseño. Además, incluye una biblioteca completa de íconos que puede agregar a su sitio web de WordPress con un solo clic.
Usaremos el complemento para agregar cuadros de funciones con íconos en WordPress, similar al editor de bloques anterior. Pero, con SeedProd, tiene más opciones de personalización y control sobre el diseño final.
Lo primero que debe hacer es instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.
Nota: Hay un versión gratuita de SeedProd disponible, pero usaremos la versión Pro ya que tiene las funciones de creación de páginas que necesitamos.
Tras la activación, debe visitar SeedProd » Ajustes e ingrese su clave de licencia.
Puede encontrar esta información en su cuenta en el sitio web de SeedProd.
Después de eso, debes ir a SeedProd » Páginas y luego haga clic en el botón ‘Agregar nueva página de destino’.
En la siguiente pantalla, se le pedirá que elija una plantilla. SeedProd tiene docenas de plantillas diseñadas profesionalmente para elegir.
Cada plantilla se puede personalizar completamente con el generador de arrastrar y soltar, así que elija un diseño de plantilla que coincida con sus objetivos.
Para este tutorial, usaremos la plantilla ‘En blanco’ para mostrarle cómo agregar cuadros de funciones con íconos en WordPress fácilmente.
Para elegir una plantilla, simplemente desplace el cursor sobre ella y haga clic en el icono ‘Marca de verificación’.
Esto abre una ventana emergente donde debe darle un nombre a su página. El nombre de la página también será la URL de la página.
Luego, haga clic en el botón ‘Guardar y comenzar a editar la página’.
Esto lo lleva a una pantalla con la interfaz del generador de arrastrar y soltar.
Como estamos usando la plantilla en blanco, seleccione uno de los diseños de columna en la sección «Elija su diseño:».
Después de eso, haga clic en el bloque ‘Icono’.
Luego, arrástrelo a su primera columna vacía.
A continuación, puede cambiar el icono predeterminado.
Simplemente haga clic en el ícono, luego haga clic nuevamente en el ícono en la columna de configuración a la izquierda.
Esto muestra toda la biblioteca de íconos con cientos de íconos para elegir. Puede utilizar la barra de búsqueda para buscar un tipo específico de icono o navegar por la lista completa.
Una vez que haya encontrado un ícono que le guste, simplemente coloque el cursor sobre él y haga clic en el botón «Más» para agregarlo a su página.
Para personalizar el icono, vuelva a hacer clic en él para que aparezcan las opciones del menú.
Luego, puede cambiar la alineación, el tamaño, el color y más.
Después de eso, puede agregar un texto debajo de su icono.
Simplemente haga clic en el bloque ‘Texto’ y arrástrelo debajo de su icono.
Para cambiar el texto, puede hacer clic en el bloque. Luego, puede agregar su propio texto al bloque de texto.
También puede cambiar el tamaño, el color, la fuente y más con el menú de la izquierda.
Para personalizar las otras columnas simplemente siga los mismos pasos que arriba.
Si desea agregar otra fila de cuadros de características con iconos, desplace el cursor sobre la sección y haga clic en el botón ‘Duplicar fila’.
Puedes duplicar la sección tantas veces como quieras.
Luego, siga los mismos pasos anteriores para agregar nuevos íconos y personalizar el texto.
Puede continuar personalizando su página agregando bloques adicionales y haciendo cambios en el menú de configuración.
Una vez que haya terminado de personalizar sus cuadros de características con íconos, haga clic en el botón ‘Guardar’, luego seleccione el menú desplegable ‘Publicar’ para que esté activo.
Aquí hay un ejemplo de lo que verán sus visitantes.
Esperamos que este artículo le haya ayudado a aprender cómo agregar cuadros de funciones con íconos en WordPress. También puede consultar nuestra guía sobre cómo registrar un nombre de dominio y nuestra comparación experta del mejor alojamiento web gratuito.
.