Cómo añadir cuadros de características con iconos en WordPress

¿Quieres añadir una caja de características con hermosos iconos en la página de inicio de tu sitio de WordPress? Estas cajas de características muestran los puntos de venta importantes de sus productos y servicios. Ha demostrado ser una técnica muy atractiva para presentar las características a los nuevos clientes. En este artículo, le mostraremos cómo añadir fácilmente cajas de características con iconos en su sitio de WordPress.

¿Qué es Feature Boxes With Icons?

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

Esto significa que como propietario de un negocio, usted necesita presentar información importante en un formato fácilmente escaneable y altamente atractivo.

Es por eso que los sitios web de negocios más populares suelen tener una imagen grande o un deslizador en la parte superior con un botón de llamada a la acción.

Justo debajo de esto, usted puede usar una caja de características que le permite mostrar las características importantes de su producto o servicio. Cada caja de características puede tener su propio llamado a la acción que puede llevar a los usuarios a aprender más.

He aquí un ejemplo de nuestro sitio web de OptinMonster:

Adición de cuadros de características con iconos en la página principal de WordPress

Lo primero que debe hacer es instalar y activar el plugin Advanced WP Columns. Una vez activado, debe visitar Configuración ” Columnas WP avanzadas para configurar el plugin.

Simplemente desplácese hacia abajo hasta la opción’Clase de columna’ e introduzca las micolumnas junto a ella. No olvide hacer clic en el botón Guardar cambios para guardar su configuración.

A continuación, necesitará un plugin para insertar hermosos iconos SVG en sus cajas de características. Instale y active el plugin WP SVG Icons.

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

Comience por editar la página en la que desea agregar los cuadros de características.

Notarás dos nuevos botones en la pantalla del editor de mensajes. 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 sólo muestra una fila de botones, deberá hacer clic en el botón de la barra de herramientas para expandirla.

Primero, debe hacer clic en el botón Columnas avanzadas de la baliza. Esto mostrará una ventana emergente en la que deberá hacer clic en Vaciar y luego seleccionar el número de columnas que desea agregar.

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

Ahora verá las columnas en su editor de mensajes. El siguiente paso es añadir iconos sobre el texto.

Lleve el ratón al principio del área de texto en la primera columna y haga clic en el botón de entrada. Esto moverá el texto hacia abajo y dará espacio para insertar sus iconos.

Ahora tiene que hacer clic en el botón Agregar icono, que le mostrará una bonita ventana emergente como ésta:

Desde allí, puede seleccionar el icono que desea utilizar haciendo clic en él. A continuación, debe hacer clic en el botón span, para que su icono se encuentre dentro del elemento .

Finalmente, haga clic en el botón de insertar. Ahora verá el código abreviado para el icono SVG en su editor de mensajes. Dependiendo del nombre del icono que haya seleccionado, tendrá un aspecto parecido a este:

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

Repita el proceso para agregar iconos en otros cuadros de características 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 previsualiza su página, notará que los iconos son demasiado pequeños y las casillas de características apenas se notan.

Necesitará añadir un poco de CSS para resolver este problema. Simplemente agregue este fragmento de CSS en la hoja de estilo de su tema o tema infantil.

123456789101112131415span.wp-svg-rocket.rocket { font-size:100px; } span.wp-svg-cloud.cloud { font-size:100px; } span.wp-svg-audífonos.auriculares { font-size:100px; } .mycolumns { border:1px solid #eee;min-height:250px; padding-top:20px !importante;}

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

Valora el post

Deja un comentario