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

¿Desea agregar un cuadro de características con hermosos íconos en la página de inicio de su sitio de WordPress? Estos cuadros de características muestran importantes puntos de venta de sus productos y servicios. Ha demostrado ser una técnica muy atractiva para presentar funciones a nuevos clientes. En este artículo, le mostraremos cómo agregar fácilmente cuadros de funciones con iconos en su sitio de WordPress.

Agregar cuadros de funciones en WordPress con iconos

¿Qué son los cuadros de funciones con iconos?

La mayoría de las personas cuando visitan sitios web en realidad no los leen. Como seres humanos, nos estamos convirtiendo en escáneres profesionales.

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 los sitios web comerciales más populares suelen tener una imagen grande o un control deslizante en la parte superior con un botón de llamada a la acción.

Justo debajo de eso, puede usar un cuadro de características que le permite mostrar las características importantes de su producto o servicio. Cada cuadro de funciones puede tener su propia llamada a la acción que puede llevar a los usuarios a obtener más información.

Aquí hay un ejemplo de nuestro sitio web OptinMonster:

Ejemplo de cuadros de funciones en la página de inicio de un sitio web con WordPress

Tutorial en video

Suscríbete a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Agregar cuadros de funciones con iconos en su página de inicio de WordPress

Lo primero que debe hacer es instalar y activar el complemento Advanced WP Columns. Tras la activación, debe visitar Configuración »Columnas WP avanzadas para configurar el complemento.

Simplemente desplácese hacia abajo hasta la opción ‘Clase de columna’ e ingrese mycolumns junto a él. No olvide hacer clic en el botón Guardar cambios para almacenar su configuración.

Agregar clase CSS para sus columnas

A continuación, necesitará un complemento para insertar hermosos iconos SVG en sus cuadros de funciones. Instale y active el complemento WP SVG Icons.

Ahora está listo para crear sus cuadros de características.

Comience por editar la página donde desea agregar los cuadros de funciones.

Notarás dos nuevos botones en la pantalla del editor de publicaciones. El primero es el botón Agregar icono ubicado justo encima del editor. El segundo botón se encuentra como último elemento en el menú del editor visual.

Si su editor visual solo muestra una fila de botones, debe hacer clic en el botón de alternancia de la barra de herramientas para expandirlo.

Columnas avanzadas y botones de icono svg en el editor de publicaciones

Primero, debe hacer clic en el botón Columnas WP avanzadas. Esto abrirá una ventana emergente donde debe hacer clic en Vacío y luego seleccione la cantidad de columnas que desea agregar.

Crear columnas de cuadros de características

Después de eso, debe hacer clic en cada columna para agregar algo de texto. Si no agrega texto ahora, será difícil ver las columnas en el editor de publicaciones. Una vez que haya terminado, haga clic en el botón Agregar columnas en la parte inferior.

Verá las columnas en su editor de publicaciones ahora. El siguiente paso es agregar iconos sobre el texto.

Lleve su mouse al comienzo del área de texto en la primera columna y haga clic en el botón Enter. Esto moverá el texto hacia abajo y dará espacio para insertar sus íconos.

Ahora debe hacer clic en el botón Agregar icono, que mostrará una ventana emergente agradable como esta:

Agregar iconos a cuadros de características en WordPress

Desde allí, puede seleccionar el icono que desea usar haciendo clic en él. A continuación, debe hacer clic en el botón de intervalo, por lo que su icono está envuelto dentro elemento.

Finalmente, haga clic en el botón insertar. Ahora verá el código corto para el icono SVG en su editor de publicaciones. Dependiendo del nombre del icono que seleccionó, se verá así:

[wp-svg-icons icon=”rocket” wrap=”span”]

Repita el proceso para agregar iconos en otros cuadros de funciones también.

Una vez que haya terminado, simplemente haga clic en el botón Actualizar para guardar su página.

Ya casi ha terminado, pero si obtiene una vista previa de su página, notará que los iconos son demasiado pequeños y los cuadros de funciones apenas se notan.

Cajas de características con iconos pequeños y sin estilo

Deberá agregar un poco de CSS para resolver este problema. Simplemente agregue este fragmento de CSS en su tema o en la hoja de estilo del tema hijo.

span.wp-svg-rocket.rocket { 
font-size:100px; 
} 

span.wp-svg-cloud.cloud { 
font-size:100px; 
} 
span.wp-svg-headphones.headphones { 
font-size:100px; 
} 
.mycolumns { 
border:1px solid #eee;
min-height:250px; 
padding-top:20px !important;
}

No olvide ajustar el CSS para que coincida con los nombres de los iconos que está utilizando.

Cajas de características con estilo adecuado e íconos grandes.

Esperamos que este artículo le haya ayudado a agregar una hermosa sección de cuadros de características en su página de inicio. Es posible que también desee ver nuestra guía sobre los 5 mejores creadores de páginas de WordPress de arrastrar y soltar porque muchos de esos creadores de páginas tienen incorporada esta funcionalidad de cuadro de características.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Botón volver arriba