El bloque Caja de Iconos te permite combinar un icono de Font Awesome con un encabezado y texto descriptivo en un diseño único y unificado. Este bloque es ideal para resaltar características, beneficios, servicios o cualquier contenido que se beneficie de un símbolo visual acompañado de una breve explicación.
Con control total sobre el tamaño, color, alineación, espaciado y tipografía del icono, el bloque Caja de Iconos es uno de los bloques más versátiles para crear secciones de características y diseños de propuesta de valor.
Añadir el Bloque de Caja de Iconos a tus Páginas
Sigue estos pasos para añadir un bloque Caja de Iconos a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Caja de Iconos 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 Caja de Iconos para abrir su configuración. La pestaña Contenido está organizada en dos secciones: Icono/Imagen y Texto.
Icono:
- Icono: Haz clic en el selector de iconos para buscar y seleccionar entre miles de iconos de Font Awesome disponibles.
- 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.
- Espacio entre Icono: Establece el espaciado entre el icono y el contenido de texto de 10 a 150px.
- Alineación: Establece la alineación horizontal de toda la Caja de Iconos dentro de su sección: Izquierda, Centro o Derecha. Admite valores por dispositivo para escritorio, tableta y móvil.
- Alineación Vertical: Establece cómo se alinea el icono verticalmente en relación con el encabezado y el texto: Arriba, Medio o Abajo.
Texto:
- Texto del Encabezado: Introduce el encabezado de tu Caja de Iconos usando el editor de texto enriquecido. Admite negrita, cursiva, subrayado, tachado y enlaces en línea.
- Nivel: Elige la etiqueta de encabezado HTML para el encabezado: H1, H2, H3 o H4, para mantener la estructura adecuada del documento.
- Texto: Introduce el texto descriptivo del cuerpo de tu Caja de Iconos. Admite formato básico de texto enriquecido, incluyendo negrita, cursiva, subrayado, tachado y enlaces.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la tipografía, los colores y el espaciado de tu bloque Caja de Iconos.
Estilos:
- Tipografía del Encabezado: Ajusta la familia de fuentes, el grosor de la fuente, la altura de línea, el espaciado entre letras y la transformación del texto del encabezado. Admite valores por dispositivo para escritorio, tableta y móvil.
- Color del Encabezado: Establece el color del texto del encabezado usando el selector de color.
- Tipografía: Ajusta la familia de fuentes, el grosor de la fuente, la altura de línea, el espaciado entre letras y la transformación del texto del cuerpo. Admite valores por dispositivo para escritorio, tableta y móvil.
- Color: Establece el color del texto de la descripción del cuerpo usando el selector de color.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque Caja de Iconos (Arriba, Derecha, Abajo, Izquierda). Admite valores por dispositivo para escritorio, tableta y móvil.
- Relleno: Ajusta el espaciado interior dentro de tu bloque Icon Box (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 Icon Box, creado automáticamente por SeedProd para estilos personalizados o para apuntar con 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 Icon Box en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque Icon Box en dispositivos tableta.
- Ocultar en Móvil: Oculta el bloque Icon Box en dispositivos móviles.
Efectos de Animación:
- Animación de Entrada: Elige un efecto de animación que se reproduzca cuando el bloque Icon Box 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 Icon Box y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque Icon Box a tu página! Las cajas de iconos son una de las formas más efectivas de presentar características, beneficios y servicios en un formato escaneable y visualmente atractivo. Experimenta con las opciones de iconos, los niveles de encabezado y la configuración de tipografía para crear cajas de iconos que se alineen con tu marca y comuniquen tu valor claramente.