Módulo de Icono

19 enero, 2023 - Claire Tourtoulou
17758 vistas

2 minutos

El módulo de Icono de SiteW te permitirá añadir un icono a tu sitio web con un solo clic: es muy útil para ofrecer una información clara y concisa a tus visitantes. También te permitirá mejorar la navegación y el diseño de tu sitio web.

Elige un icono

Empieza por arrastrar un módulo de Icono en tu sitio web utilizando el ratón en la página de creación de web. Luego elige el icono de tu elección entre las numerosas opciones disponibles en el administrador de archivos. Puedes seleccionar varios iconos (hasta 5).

agregar un icono en mi sitio web

Añadir un enlace

Agrega fácilmente uno o varios enlaces al icono haciendo clic en el botón Añadir un código de enlace en el panel azul en la izquierda de la pantalla.
Elige el tipo de enlace que necesitas, ingresa la información necesaria en el campo de entrada: sitio web externo, dirección de email, número de teléfono, página del sitio web, artículo de blog, producto, documento, imagen, o marca la opción "Ningún enlace”. Si varios iconos se han añadido, es posible agregar un enlace por icono. Puedes reemplazar el módulo Social con el módulo de Icono, seleccionando los iconos de redes sociales y añadiendo tus enlaces.

Personaliza el diseño del icono

Para modificar la apariencia del icono, haz clic en la pestaña Diseño, una vez que el módulo está seleccionado.

1- Selección del tamaño

Se puede elegir un tamaño estándar para el icono.

2- Selección del estilo

Se puede seleccionar un estilo predeterminado similar para todos los módulos que se pueden personalizar (Blog, FAQ, Texto, etc.) o crear un estilo personalizado sólo para el módulo de Icono.

  • Para utilizar un estilo predefinido, selecciona un estilo en la lista. El estilo se puede personalizar (la configuración se aplicará a todos los módulos que utilizan este estilo).
  • Para usar un estilo único, puedes:
    -Agregar una configuración directamente en el panel de Diseño, como con los estilos predefinidos.
    -Duplicar en un estilo predefinido: puedes copiar el estilo que acabas de crear en un estilo predeterminado (haciendo clic en el botón “Duplicar en un estilo predefinido”)
    -Copiar un estilo predefinido: por otra parte, también puedes inspirarte en un estilo ya existente (haciendo clic en el botón “Copiar un estilo predefinido ahí”)

 

3- Elige los colores

Selecciona el color de tu elección utilizando el selector de color. Puedes definir la transparencia del color utilizando la barra deslizante en la derecha. Puedes eligir el color de fondo del icono de la misma manera. Puedes elegir el color normal, así como el color al pasar por encima, si deseado.

cambiar el color del icono en mi sitio web

 

4- Espacio

Permite definir el espacio entre el icono y los bordes de fondo arrastrando el cursor a lo largo la barra deslizante.

5- Márgenes externos

Si añades varios iconos, puedes añadir un margen exterior.

6 - Esquinas redondeadas

Permite definir el radio de borde del fondo del icono arrastrando el cursor a lo largo de la barra deslizante. Podrás crear un icono con un fondo circular o cuadrado. Ten en cuenta que el fondo sólo es visible si se ha seleccionado un color de fondo.

7- Bordes

Puedes definir la anchura del borde, y elegir su estilo, utilizando la regleta y el menú desplegable.

8- Sombras

Puedes agregar una sombra interior o exterior al icono, y definir la distancia, la difusión, el color y el tamaño, utilizando las herramientas de configuración a tu disposición.

9- CSS personalizado

Puedes insertar CSS personalizado en el campo de entrada.

cambiar los colores al pasar el raton

El módulo de Icono te permitirá añadir elementos visuales efectivos a tu sitio web: botones de llamada a la acción, iconos de redes sociales, elementos gráficos…

Claire Tourtoulou
Responsable de Redes Sociales
Como apasionada de la Web y autodidacta, me encanta aprender cosas nuevas y compartir mis conocimientos con los demás. En paralelo, administro un blog sobre mi segunda pasión: los videojuegos. Aparte de eso, dedico gran parte de mi tiempo al deporte y a las mascotas. 🐶

Última actualización: 19 enero, 2023