Íconos en Elementor - Así los optimizas

Elementor te ofrece una variedad de herramientas para diseñar tu sitio de WordPress, uno de los componentes básicos es el icono. Los iconos no son solo elementos decorativos, también pueden mejorar la experiencia del usuario funcionalmente y ayudar a comunicar información importante de un vistazo. Aprende aquí cómo aplicar y personalizar iconos en Elementor para mejorar tu sitio web.

Principales conclusiones

• Los iconos son elementos versátiles que pueden cumplir funciones artísticas e informativas.
• Puedes personalizar los iconos individualmente, incluyendo color, tamaño, forma y animación.
• Una opción de enlace te permite utilizar los iconos de manera efectiva para la navegación.

Guía paso a paso

Paso 1: Añadir un icono

Para añadir un icono a tu sección, arrastra el widget de icono al área deseada de tu página. Verás una preselección, generalmente de un icono de estrella.

Paso 2: Cambiar el icono

Haz clic en el icono existente para abrir la ventana de selección. Aquí puedes elegir entre una variedad de iconos. Por ejemplo, elige un icono de taxi para asignar un tema específico a tu contenido.

Paso 3: Seleccionar el tipo de icono

Elementor ofrece tres tipos de iconos: iconos regulares, iconos sólidos e iconos de marca. Los iconos regulares suelen tener solo un contorno, mientras que los iconos sólidos están completamente rellenos. Los iconos de marca corresponden a logotipos conocidos, como los de Amazon o Apple.

Paso 4: Personalizar la configuración de visualización

Puedes ajustar la apariencia de tu icono de varias formas: mediante "Apilado" (completamente relleno), "Con marco" (con contorno) o "Predeterminado" (fondo mostrado). Elige la opción que mejor se adapte a la estética de tu sitio web.

Paso 5: Ajustar el tamaño y forma del icono

Otro aspecto importante es la forma del icono. Puedes elegir si debe ser circular o cuadrado. Un círculo suele ser percibido como más armonioso, mientras que un cuadrado crea otra impresión gráfica.

Paso 6: Configurar el enlace

Para añadir interactividad, puedes establecer un enlace. Por ejemplo, introduce la dirección de tu página de inicio para que los visitantes sean redirigidos allí al hacer clic en el icono.

Paso 7: Personalizar el estilo

Bajo la sección "Estilo", tienes la opción de ajustar el color primario y secundario. Para efectos al pasar el ratón, también puedes especificar cómo cambiarán los colores. Por ejemplo, cambia el color primario a rojo y el color secundario a negro.

Paso 8: Definir efectos al pasar el ratón

Si deseas intensificar la interactividad, también puedes agregar efectos de animación al elemento al pasar el ratón. Estos incluyen opciones como "Empujar" o "Agrandar". Elige un efecto deseado para mejorar la experiencia del usuario.

Paso 9: Definir tamaño y espacio

Puedes ajustar el tamaño del icono, mientras que el espacio, también conocido como relleno, determina cuánto espacio hay entre el icono y su marco interno. Experimenta con estos valores para encontrar el equilibrio deseado.

Paso 10: Vincular valores

Si deseas ajustes individuales para distintas esquinas de un icono, puedes vincular o ajustar los valores por separado. Los valores vinculados garantizan que los cambios se apliquen simultáneamente en todas las secciones.

Paso 11: Revisar configuraciones avanzadas

Bajo las configuraciones avanzadas encontrarás las mismas opciones que en las configuraciones básicas. Asegúrate de que todo esté configurado correctamente para garantizar una presentación consistente en tu página.

Resumen

En este tutorial has aprendido los pasos básicos para agregar y personalizar iconos en Elementor. Desde la selección del icono hasta el color, tamaño y enlace, con estas técnicas puedes diseñar sitios web que sean tanto estéticamente atractivos como funcionales.