Los iconos y el texto, cada uno por derecho propio, tienen puntos fuertes y defectos que los convierten en la pareja perfecta a la hora de crear un sitio web. Un icono por sí solo puede resultar demasiado ambiguo, sin contexto ni significados fijos. El texto puede parecer insípido y ciertamente no atraerá tanta atención. Junte los dos y obtendrá lo mejor de ambos mundos. A menudo, verá el emparejamiento cuando enumere características, servicios o cualquier otro elemento que deba mostrarse como distinto, pero como parte del grupo.
Este emparejamiento es tan frecuente que muchos temas premium vienen con un código abreviado para insertar rápidamente un icono con texto como elemento de diseño. Si su tema no lo hace, no se preocupe. Gracias a Qi Addons para Elementor, la colección más grande de complementos de Elementor gratuitos de la web, podrá agregar todos los íconos con el texto que necesita en poco tiempo. Todo lo que necesita es Elementor y el widget Icono con texto.
¿Necesitas inspiración para empezar? No hay problema. Aquí hay un video que muestra cómo puede crear fácilmente un grupo de íconos con texto como el que tenemos en la página del widget:
Si prefiere leer sobre él, este artículo lo guiará a través de los pasos que tomamos para crear una buena visualización de íconos con texto. ¡Con suerte, usará lo que lee aquí para crear algunos diseños increíbles en su propio sitio web!
Cubriremos:
El primer paso para agregar íconos con texto en WordPress usando el complemento Qi Addons para Elementor es descargar e instalar Elementor. Como uno de los creadores de páginas más importantes del mundo, es posible que ya lo tenga, pero si no lo tiene, simplemente descárguelo y actívelo.
El siguiente paso sería descargar y activar Qi Addons para Elementor. Puedes hacerlo yendo a Complementos> Agregar nuevo, buscándolo, instalándolo y activándolo una vez que lo vea en los resultados.
Una vez hecho esto, la mejor manera de familiarizarse con el widget sería navegar a una página donde podría considerar agregar un ícono con texto y acceder a él. Por nuestra parte, creamos una sección de tres columnas porque terminamos creando tres íconos con texto. Simplemente buscando el widget y arrastrándolo a la columna más a la izquierda funcionó: teníamos nuestro primer icono con texto listo para editar.
La sección Contenido de la opción del complemento tiene muchas pestañas, pero no se preocupe, solo significa que podrá personalizar su diseño con todo lujo de detalles. La primera pestaña, General, es donde puede ir para elegir el diseño del ícono y el texto, si desea agregar un enlace al ícono y algunas opciones asociadas.
Aquí también es donde elegirá el tipo de icono que desea usar, si usar un separador o no, así como algunas reglas de respuesta de columna. El primer cambio que hicimos fue cambiar al diseño superior. Cambiamos el ícono al ícono Cog que estaba incluido en la biblioteca de íconos, y estábamos listos para seguir adelante.
La pestaña Contenido es donde puede cambiar el mosaico del texto en la columna, o eliminarlo por completo, así como cambiar el texto en sí y aplicar algunas opciones de estilo limitadas. También tendrás la oportunidad de elegir la alineación del texto.
El título que le dimos a esta combinación de ícono y texto fue «Opciones ilimitadas». Hemos cambiado el texto a «Cientos de fuentes para elegir y opciones para usar íconos personalizados o SVG».
Las pestañas Botón e Ícono de botón son donde podrá elegir cómo desea que se vea su botón, qué tan grande debe ser, si debe tener un ícono y dónde, así como a qué enlace debe apuntar.
La opción más interesante en estas dos pestañas es la opción Texto del botón en la pestaña Botón. Al borrar el texto, puede eliminar completamente el botón. Así lo hicimos.
Las pestañas restantes en las opciones de Contenido tratan con el separador y la animación que aparece. Podrá elegir el diseño del separador, su posición, la imagen del borde y el icono. También tendrá la opción de cambiar entre diferentes estilos de animación y establecer sus retrasos.
Dado que no usamos un separador para crear nuestro ícono con texto, y no queríamos incluir animación, no nos queda nada para mostrarle en la sección Contenido y podemos continuar para ver las opciones de Estilo.
Al diseñar su icono con texto, la pestaña Estilo será la primera en aparecer. Las opciones que encontrará allí le permitirán elegir la etiqueta del título, el color normal del título y el color al pasar el mouse, así como las opciones de tipografía del título, como la fuente, el tamaño y el peso. Para el texto, podrás elegir el color y la opción tipográfica.
Hemos realizado algunos cambios mínimos en los valores predeterminados aquí. Hemos cambiado la etiqueta del título a H5, el color del título a negro usando el código hexadecimal # 000000, y hemos establecido el tamaño del título en 21 píxeles.
En la pestaña Estilo de espaciado, se trata de establecer márgenes. Podrá elegir el margen superior del título, el margen superior del texto, el margen alrededor del icono y, si tiene un botón, el margen superior del botón.
Nuevamente optamos por un cambio mínimo aquí al establecer el margen superior del título en 22 píxeles.
En la pestaña Estilo de icono, las opciones que verá variarán en gran medida si desea poner su icono en un cuadro o no. Si lo hace, podrá elegir una variedad de opciones para la forma, el tamaño y el color de la caja. Si no lo hace, estará limitado a las opciones que se ocupan del icono en sí: su tamaño, color y animación al pasar el mouse.
Hemos optado por no poner nuestro icono en una caja. Sin embargo, cambiamos el tamaño de nuestro icono a 60 píxeles y su color a #ececec. Al pasar el mouse, le hemos dado un ligero movimiento vertical.
Las pestañas restantes le permiten hacer grandes cosas con el aspecto y el estilo de los botones, iconos de botones, bordes, subrayados, separadores e iconos separadores. Hemos optado por no utilizar ninguno de esos elementos en nuestro diseño., pero si elige una ruta diferente, sepa que aquí encontrará todas las opciones de tamaño, color, margen y desplazamiento que necesitará para hacer que los botones y separadores de su ícono y texto aparezcan.
El toque final implica duplicar el diseño que hemos creado y hacerle algunos cambios. Esta capacidad de simplemente duplicar un diseño con todas sus opciones es excelente después de haber pasado horas perfeccionando la configuración en un elemento, y luego debe repetirlo en un par de otros, pero con ligeras modificaciones.
Para duplicar el diseño, hicimos clic derecho sobre él, elegimos las opciones duplicadas y lo hicimos una vez más. Elementor apilará estos duplicados debajo del original, simplemente arrástrelos a sus columnas.
Lo que queda por hacer es cambiar los iconos, los títulos y el texto. Hemos cambiado el ícono del medio a Marcador de mapa alt, su título a «Totalmente ajustable» y su texto a «Responsive and mobile-friendly, this widget will be a star on the page». El tercero recibió una etiqueta para su ícono, “Estilos flexibles” para el título y “Elija diferentes colores, estilos, aparezcan animaciones y más con este widget” para el texto.
¡Vamos a envolverlo!
Gracias a Qi Addons para Elementor, agregar diseños interesantes y útiles a su sitio web, como el ícono con texto, puede ser fácil e interesante. Hay una variedad de opciones entre las que puede elegir, muchas más de las que hemos explorado en esta demostración, y debe sentirse libre de explorarlas todas y encontrar la mejor combinación de elementos que ofrece este complemento.
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
