El bloque Icon te permite añadir un único icono escalable a cualquier página de SeedProd. Con acceso a miles de iconos de Font Awesome, puedes colocar rápidamente símbolos visuales que complementen tu contenido, ya sea un icono de redes sociales, una flecha direccional, un indicador de características o un acento decorativo.
Cada icono se puede redimensionar, colorear, alinear y, opcionalmente, vincular a cualquier URL, lo que lo convierte en un elemento versátil para botones, listas de características, llamadas a la acción y mucho más.
Añadir el bloque de iconos a tus páginas
Sigue estos pasos para añadir un bloque de iconos a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastra y suelta el bloque Icono en la sección deseada de tu página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque Icono para abrir su configuración. En la pestaña Contenido, configura la apariencia y el enlace del icono.
Icono:
- Icono: Haga clic en el selector de iconos para explorar y seleccionar entre miles de iconos Font Awesome disponibles. Busque por palabra clave para encontrar rápidamente el icono que necesita.
- Alineación: establece la alineación horizontal del icono dentro de su sección: izquierda, centrada o derecha. Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Color: Establezca el color del icono utilizando el selector de color.
- Tamaño: Establezca el tamaño del icono entre 10 y 150 píxeles utilizando el control deslizante.
- Enlace: opcionalmente, introduzca una URL para que el icono sea un enlace en el que se puede hacer clic. Haga clic en el icono de configuración situado junto al campo del enlace para mostrar opciones de enlace adicionales.
- Abrir en una nueva ventana: Marque esta opción para abrir la URL vinculada en una nueva pestaña del navegador.
- No seguir: Marque esta opción para añadir un
rel="nofollow"atribuir al enlace, indicando a los motores de búsqueda que no transfieran la autoridad del enlace al destino.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el estilo de la sombra y el espaciado de tu bloque de iconos.
Estilos:
- Sombra del texto: añade un efecto de sombra al icono. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extragrande o 2X Extragrande para dar profundidad y énfasis visual al icono.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque de iconos (superior, derecho, inferior, izquierdo). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Relleno: ajusta el espacio interior dentro del bloque de iconos (superior, derecho, inferior, izquierdo). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
Atributos:
- CSS ID: Muestra el identificador único generado automáticamente para tu bloque Icon, creado automáticamente por SeedProd para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de iconos en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque de iconos en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque de iconos en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elige un efecto de animación que se reproduzca cuando el bloque de iconos aparezca en pantalla, como Rebotar, Aparecer gradualmente, Acercar, Girar y muchos más.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Icon y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de iconos a tu página! Los iconos son una forma sencilla pero eficaz de añadir claridad visual a tu contenido: guían la vista, refuerzan el significado y hacen que las páginas parezcan más pulidas. Prueba con diferentes iconos, tamaños y colores para encontrar la combinación que mejor se adapte a tu diseño.