¿Desea agregar un cuadro de función con hermosos iconos en la página principal de su sitio de WordPress? Estas cajas 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 características con íconos en su sitio de WordPress.
¿Qué es un cuadro de características con iconos?
La mayoría de las personas cuando visitan sitios web en realidad no los leen. Como 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ácil de escanear y altamente atractivo.
Es por eso que los sitios web de negocios más populares generalmente tienen una imagen grande o un control deslizante en la parte superior con un botón de llamada a la acción.
Justo debajo, puede usar un cuadro de características que le permite mostrar las características importantes de su producto o servicio. Cada cuadro de características 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:
Agregar cuadros de características con iconos en su página de inicio de WordPress
Lo primero que debe hacer es instalar y activar el plugin Columnas de WP avanzadas. Después de la activación, debe visitar Configuraciones »Columnas WP avanzadas para configurar el plugin
Simplemente desplácese hacia abajo a 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.
A continuación, necesitará un complemento para insertar hermosos iconos de SVG en sus cajas de características. Instale y active el complemento WP SVG Icons.
Ahora está listo para crear sus cajas de características.
Comience editando la página donde desea agregar los cuadros de características.
Notarás dos botones nuevos en la pantalla del editor de publicaciones. El primero es el botón Agregar ícono ubicado justo encima del editor. El segundo botón se ubica como el último elemento en el menú del editor visual.
Si su editor visual solo muestra una fila de botones, entonces necesita hacer clic en el botón de la barra de herramientas para expandirlo.
En primer lugar, debe hacer clic en el botón Columnas de WP avanzadas. Aparecerá una ventana emergente en la que debe hacer clic Vacío y luego seleccione la cantidad de columnas que desea agregar.
Después de eso, debe hacer clic en cada columna para agregar texto. Si no agrega un texto ahora, será difícil ver las columnas en el editor de entradas. 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 principio 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 iconos.
Ahora debe hacer clic en el botón Agregar icono, que mostrará una ventana emergente como esta:
Desde allí, puede seleccionar el icono que desea usar haciendo clic en él. A continuación, debe hacer clic en el botón de extensión, para que su icono quede envuelto en elemento.
Finalmente, haga clic en el botón Insertar. Ahora verá el código corto para el icono de SVG en su editor de publicaciones. Dependiendo del nombre del ícono que seleccionó, se verá algo como esto:
[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 terminaste, pero si previsualizas tu página, verás que los íconos son demasiado pequeños y tus cuadros de características apenas se notan.
Tendrá que agregar un poco de CSS para resolver este problema. Simplemente agregue este fragmento de CSS en la hoja de estilo de su tema o tema secundario.
span.wp-svg-rocket.rocket {
tamaño de fuente: 100 px;
}
span.wp-svg-cloud.cloud {
tamaño de fuente: 100 px;
}
span.wp-svg-headphones.headphones {
tamaño de fuente: 100 px;
}
.mycolumns {
borde: 1px sólido #eee;
min-height: 250px;
padding-top: 20px! importante;
}
No olvide ajustar el CSS para que coincida con los nombres de los íconos que está utilizando.
Esperamos que este artículo te haya ayudado a agregar una hermosa sección de cuadros de características en tu página de inicio.
