El Bloque de Lista te permite crear listas basadas en iconos para resaltar características, beneficios o cualquier conjunto de elementos en tu página. Cada elemento de la lista combina un icono personalizable con texto enriquecido, dándote control total sobre cómo se presenta tu contenido.
Ya sea que estés mostrando las características de un producto, resumiendo puntos clave o creando una lista de comparación, el Bloque de Lista facilita la creación de listas visualmente atractivas que coinciden con tu marca, sin necesidad de código.
Añadir el Bloque de Lista a tus Páginas
Sigue estos pasos para añadir un Bloque de Lista a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Lista 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 Lista para abrir su configuración. En la pestaña Contenido, crea tus elementos de lista y configura la apariencia general.
Lista:
- Elementos: Cada elemento de la lista tiene un icono y un campo de texto. Haz clic en un elemento para expandir su configuración y editar el Texto (usando el editor de texto enriquecido para negrita, cursiva, enlaces y más) y elegir un Icono usando el selector de iconos. Puedes arrastrar elementos para reordenarlos, duplicar un elemento o eliminarlo.
- Añadir Nuevo Elemento: Haz clic en este botón para añadir otro elemento a tu lista.
- Color del Icono: Establece el color aplicado a todos los iconos de la lista.
- Tamaño de Fuente: Controla el tamaño del texto para todos los elementos de la lista, de 10px a 72px.
- Espacio Entre: Ajusta el espaciado entre los elementos de la lista. Admite valores por dispositivo para escritorio, tableta y móvil.
- Alineación: Establece la alineación horizontal de la lista: Izquierda, Centro o Derecha. Admite alineación por dispositivo.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu Bloque de Lista.
Estilos:
- Diseño de Lista: Elige entre Vertical (elementos apilados uno encima del otro) u Horizontal (elementos mostrados en fila uno al lado del otro).
- Tipografía: Personaliza la familia de fuentes, el grosor, el tamaño, la altura de línea, el espaciado entre letras y la transformación del texto para el texto de tu lista.
- Color del Texto: Establece el color del texto de los elementos de la lista.
- Sombra del Texto: Añade una sombra al texto de tu lista. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, X Grande o 2X Grande.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu Bloque de Lista (Superior, Derecho, Inferior, Izquierdo).
- Relleno: Ajusta el espaciado interior dentro de tu Bloque de Lista (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 Lista, 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: Añade cualquier atributo HTML al elemento contenedor de la lista. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de Lista en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de Lista en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de Lista 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 Lista aparezca en la vista, como Rebote, Fundido de entrada, Zoom de entrada, Girar entrada y muchos más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Lista y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Lista a tu página! El bloque de Lista es una forma versátil de presentar características, beneficios o cualquier conjunto de puntos en un formato visualmente atractivo. Experimenta con diferentes iconos, diseños, colores y tipografía para crear una lista que se ajuste perfectamente a tu página.