¿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 OptinMonster sitio web:
Tutorial en video
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 Columnas WP avanzadas plugin. Tras la activación, debe visitar Configuración »Columnas WP avanzadas para configurar el plugin.
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.
A continuación, necesitará un plugin para insertar hermosos iconos SVG en sus cuadros de funciones. Instalar y activar Iconos de WP SVG plugin.
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.
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.
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:
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 del elemento .
Finalmente, haga clic en el botón insertar. Ahora verá el shortcode 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.
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 de su tema secundario.
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.
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 esta funcionalidad de cuadro de características incorporada.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
.
Fuente: wpbeginner