El bloque Lista te permite crear listas basadas en iconos para resaltar características, ventajas o cualquier conjunto de elementos de tu página. Cada elemento de la lista combina un icono personalizable con texto enriquecido, lo que te ofrece un control total sobre cómo se presenta tu contenido.
Ya sea que desees mostrar las características de un producto, resumir los puntos clave o crear una lista comparativa, el bloque Lista te permite crear fácilmente listas visualmente atractivas que se ajustan a tu marca, sin necesidad de programar.
Añadir el bloque Lista a tus páginas
Sigue estos pasos para añadir un bloque Lista a tu página 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 Lista para abrir su configuración. En la pestaña Contenido, crea los elementos de la lista y configura el aspecto general.
Lista:
- Elementos: cada elemento de la lista tiene un icono y un campo de texto. Haga clic en un elemento para expandir su configuración y editar el texto (utilizando el editor de texto enriquecido para negrita, cursiva, enlaces y más) y elija un icono utilizando el selector de iconos. Puede arrastrar elementos para reordenarlos, duplicar un elemento o eliminarlo.
- Añadir nuevo elemento: Haga clic en este botón para añadir otro elemento a su lista.
- Color del icono: Establece el color que se aplicará a todos los iconos de la lista.
- Tamaño de fuente: controla el tamaño del texto de todos los elementos de la lista, desde 10 píxeles hasta 72 píxeles.
- Espacio entre: Ajusta el espacio entre los elementos de la lista. Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Alineación: Establece la alineación horizontal de la lista: izquierda, centrada o derecha. Admite la alineación por dispositivo.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el aspecto visual de tu bloque Lista.
Estilos:
- Diseño de la lista: Elige entre Vertical (elementos apilados uno encima de otro) u Horizontal (elementos mostrados en una fila uno al lado del otro).
- Tipografía: personaliza la familia tipográfica, el grosor, el tamaño, la altura de línea, el espaciado entre letras y la transformación del 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, Muy fina, Pequeña, Mediana, Grande, Muy grande o 2 veces más grande.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque Lista (superior, derecho, inferior, izquierdo).
- Relleno: ajusta el espacio interior dentro del bloque Lista (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 Lista, 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 de la lista. 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 Lista en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque Lista en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque 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 Lista se desplaza a la vista, como Rebotar, Aparecer gradualmente, Acercar, Girar y muchos más.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Lista y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque Lista a tu página! El bloque Lista es una forma versátil de presentar características, ventajas o cualquier conjunto de puntos en un formato visualmente atractivo. Experimenta con diferentes iconos, diseños, colores y tipografías para crear una lista que se adapte perfectamente a tu página.