Cómo agregar cuadros de características con iconos en WordPress
¿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 eficiente de demostrar la funcionalidad a nuevos clientes.
En este artículo, le mostraremos cómo agregar fácilmente cuadros de funciones con íconos a su sitio de WordPress.
¿Qué es un cuadro de función con un icono?
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 en busca de la información que están buscando.
Esto significa que, como propietario de un negocio, debe presentar información importante en un formato atractivo y fácil de escanear.
Esta es la razón por la que muchos sitios web comerciales populares suelen tener una imagen grande o un control deslizante con un botón de llamada a la acción en la parte superior de la página.
Debajo de esto, puede usar cuadros de características para mostrar características importantes de su producto o servicio.
Incluso puede agregar un botón de llamada a la acción debajo del cuadro de funciones para dirigir a los usuarios a su producto o página de funciones.
Este es un ejemplo de cómo WPForms puede usar cuadros de características con íconos para resaltar las características del producto.
Habiendo dicho eso, permítanos mostrarle 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 el cuadro 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 mostrará 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 funciones.
Después de eso, debe agregar íconos a la columna.
La forma más fácil es usar una fuente de icono. Las fuentes de iconos son símbolos de tamaño variable que puede usar sin ralentizar su sitio web. Recomendamos Font Awesome ya 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 a su tema de WordPress.
Una vez que haya hecho esto, puede agregar fácilmente fuentes de íconos a las columnas haciendo clic en el ícono de agregar bloque “más” en la primera columna.
Luego, busca el bloque “Código corto” y selecciónalo.
Después de eso, puede ingresar el siguiente código abreviado para el icono de Font Awesome.
[icon name="bus"]
solo reemplaza "bus" Utilice el nombre del icono que desee. Para ver la lista completa de íconos disponibles, puede visitar la biblioteca de íconos de Font Awesome.
Cuando encuentre un icono que le guste, haga clic en él y anote el nombre del icono.
Luego, puede agregar el nombre a su bloque de shortcode y aparecerá automáticamente.
notas: Si ha guardado su ícono como una imagen, puede agregar un bloque de imagen en lugar de usar la fuente del ícono.
Para hacer esto, simplemente seleccione el bloque “imagen” en lugar del bloque de código abreviado.
A continuación, puede cargar su icono o elegir su icono de la biblioteca de medios.
A continuación, puede agregar texto a su cuadro de función 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 hacer cambios.
Luego, solo siga los mismos pasos que arriba para personalizar las columnas restantes.
También puede crear una fila adicional 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ú Opciones de tres puntos.
Luego, seleccione la opción “Copiar” 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 el cuadro de características, deberá hacer clic en el botón Actualizar o Publicar en la parte superior de la página.
El cuadro de características con el icono ahora aparecerá en su sitio web.
Aquí hay un ejemplo de lo que verán sus visitantes.
Método 2. Agregue cuadros de funciones con iconos usando el complemento 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 creador de páginas de WordPress de arrastrar y soltar utilizado por más de un millón de sitios web en el mercado. Le permite crear fácilmente páginas personalizadas, páginas de inicio de sesión, páginas 404 y más utilizando 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 completa biblioteca de íconos que puedes agregar a tu sitio de WordPress con solo un clic.
Usaremos este complemento para agregar cuadros de funciones con íconos en WordPress, similar al editor de bloques anterior. Sin embargo, con SeedProd tienes 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 complementos de WordPress.
notas: SeedProd tiene una versión gratuita, pero usaremos la versión Pro porque tiene las funciones de creación de páginas que necesitamos.
Después de la activación, debe acceder SeedProd » Ajustes e ingrese su clave de licencia.
Puede encontrar esta información en el sitio web de SeedProd en Cuenta.
Después de eso, debes ir a SeedProd » Página Luego haga clic en el botón “Agregar nueva página de inicio de sesión”.
En la siguiente pantalla, se le pedirá que elija una plantilla. SeedProd tiene docenas de plantillas diseñadas profesionalmente para elegir.
Cada plantilla es totalmente personalizable con el generador de arrastrar y soltar, así que elija un diseño de plantilla que coincida con sus objetivos.
En este tutorial, le mostraremos cómo agregar fácilmente cuadros de funciones con íconos en WordPress usando la plantilla “en blanco”.
Para seleccionar una plantilla, simplemente coloque el cursor sobre ella y haga clic en el icono de “marca de verificación”.
Aparecerá una ventana emergente en la que deberá asignar un nombre a la 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 llevará a una pantalla con una interfaz de construcción de arrastrar y soltar.
Como estamos usando una plantilla en blanco, elija un diseño 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 barra de configuración a la izquierda.
Esto abre una biblioteca de íconos completa con cientos de íconos para elegir. Puede utilizar la barra de búsqueda para buscar un tipo específico de icono o explorar la lista completa.
Una vez que encuentre 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 mostrar las opciones del menú.
Luego puede cambiar la alineación, el tamaño, el color y más.
Después de eso, puede agregar texto debajo del icono.
Simplemente haga clic y arrastre el bloque “Texto” debajo de su icono.
Para cambiar el texto, puede hacer clic en el bloque. A continuación, puede agregar su propio texto al bloque de texto.
También puede usar el menú de la izquierda para cambiar el tamaño, el color, la selección de fuente y más.
Para personalizar otras columnas, solo siga los mismos pasos que arriba.
Si desea agregar otra fila de cuadros de funciones con iconos, desplace el cursor sobre la sección y haga clic en el botón “Copiar fila”.
Puedes duplicar esta sección tantas veces como quieras.
Luego, siga los mismos pasos anteriores para agregar un nuevo ícono y personalizar el texto.
Puede continuar personalizando la página agregando otros bloques y haciendo cambios en el menú de configuración.
Cuando haya terminado de personalizar el cuadro con iconos, haga clic en el botón Guardar y seleccione el menú desplegable Publicar para que surta efecto.
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.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
