El bloque de Icono 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 apoyen tu contenido, ya sea un icono de redes sociales, una flecha direccional, un indicador de características o un acento decorativo.
Cada icono puede tener su tamaño, color, alineación y, opcionalmente, enlazarse a cualquier URL, lo que lo convierte en un bloque de construcción versátil para botones, listas de características, llamadas a la acción y más.
Añadir el Bloque de Icono a tus Páginas
Sigue estos pasos para añadir un bloque de Icono a tu página de 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 de Icono para abrir su configuración. En la pestaña Contenido, configura la apariencia y el enlace del icono.
Icono:
- Icono: Haz clic en el selector de iconos para buscar y seleccionar entre miles de iconos de Font Awesome disponibles. Busca por palabra clave para encontrar rápidamente el icono que necesitas.
- Alineación: Establece la alineación horizontal del icono dentro de su sección: Izquierda, Centro o Derecha. Admite valores por dispositivo para escritorio, tableta y móvil.
- Color: Establece el color del icono usando el selector de color.
- Tamaño: Establece el tamaño del icono de 10 a 150px usando el deslizador.
- Enlace: Opcionalmente, introduce una URL para hacer del icono un enlace clicable. Haz clic en el icono de configuración junto al campo de enlace para mostrar opciones de enlace adicionales.
- Abrir en una ventana nueva: Marca esta opción para abrir la URL enlazada en una nueva pestaña del navegador.
- No seguir: Marca esta opción para añadir un atributo
rel="nofollow"al enlace, indicando a los motores de búsqueda que no pasen la autoridad del enlace al destino.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar el estilo de sombra y el espaciado de tu bloque de Icono.
Estilos:
- Sombra de Texto: Añade un efecto de sombra al icono. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extra Grande o Doble Extra Grande para dar al icono profundidad y énfasis visual.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Icono (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de Icono (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de Icono, creado automáticamente por SeedProd para estilos personalizados o segmentación por JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculta el bloque de Icono en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque de Icono en dispositivos tableta.
- Ocultar en Móvil: Oculta el bloque de Icono 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 Icono aparezca en la vista, como Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchos más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Icono y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Icono a tu página! Los iconos son una forma sencilla pero potente de añadir claridad visual a tu contenido: guían la vista, refuerzan el significado y hacen que las páginas se sientan más pulidas. Experimenta con diferentes iconos, tamaños y colores para encontrar la combinación que mejor se adapte a tu diseño.