Adding Feature Boxes In Wordpress With Icons

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

¿Desea agregar un cuadro de funciones con hermosos íconos a la página de inicio de su sitio de WordPress? Estas cajas presentan los principales puntos de venta de sus productos y servicios. Ha resultado ser una técnica muy interesante 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.

¿Qué son los cuadros de función con iconos?

La mayoría de las personas que visitan sitios web no los leen. Como seres humanos, nos convertimos 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 puede usar un cuadro de funciones que le permite presentar 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 Características En La Página De Inicio De Un Sitio Web Con Wordpress

Video tutorial

Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.

Agregue cuadros de funciones con íconos a 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 ella. Recuerde hacer clic en el botón Guardar cambios para guardar su configuración.
Agrega Una Clase Css Para Tus Columnas
Luego, 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 modificando la página en la que desea agregar las áreas de características. Notará 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 en la barra de herramientas para expandirlo.
Columnas Avanzadas Y Botones De Icono Svg En El Editor De Publicaciones
En primer lugar, debe hacer clic en el botón Columnas WP avanzadas. Esto abrirá una ventana emergente donde deberá hacer clic en Vaciar y luego seleccionar la cantidad de columnas que desea agregar.
Crear Columnas De Área De Características
Después de eso, debe hacer clic en cada columna para agregar 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. Ahora verá las columnas en su editor de publicaciones. El siguiente paso es agregar iconos sobre el texto. Mueva su mouse al inicio del cuadro de texto en la primera columna y haga clic en el botón Enter. Esto moverá el texto hacia abajo y dejará espacio para insertar sus iconos. 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 aquí puede seleccionar el icono que desea utilizar haciendo clic en él. Luego, debe hacer clic en el botón de intervalo para que su icono se envuelva dentro elemento. Finalmente, haga clic en el botón insertar. Ahora verá el código corto del 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 otras áreas 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 las áreas de funciones apenas son visibles.
Cajas De Características Con Iconos Pequeños Y Sin Estilo
Deberá agregar algo de CSS para solucionar este problema. Simplemente agregue este fragmento de CSS en la hoja de estilo de su tema o tema hijo. span.wp-svg-rocket.rocket {tamaño de fuente: 100px; } span.wp-svg-cloud.cloud {tamaño de fuente: 100px; } span.wp-svg-helmet.headphones {tamaño de fuente: 100px; } .micolumnas {borde: 1px sólido #eee; altura mínima: 250px; padding-top: 20px! importante; } Recuerde ajustar el CSS para que coincida con los nombres de los iconos que está utilizando.
Cajas Con Estilo Apropiado E Iconos Grandes
Esperamos que este artículo le haya ayudado a agregar una buena sección de cuadros de características a su página de inicio. También puede consultar nuestra guía de los 5 mejores creadores de páginas de arrastrar y soltar de WordPress, ya que muchos de estos creadores de páginas tienen esta función incorporada. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply