Lista Avanzada

¿Qué es el Elemento Lista Avanzada?

GemPages ofrece dos elementos para mostrar contenido en una lista:

• Elemento Lista de Ítems: Diseñado para listas sencillas. Cada elemento comienza con un , que puedes seleccionar de la biblioteca de iconos de GemPages o cargar los tuyos propios. Este elemento es ideal para mostrar información breve, como beneficios del producto, características o aspectos destacados.
• Elemento Lista Avanzada: En lugar de limitarse a los iconos, le permite incluir imágenes junto a cada elemento de la listaEsto le brinda mayor control visual sobre el diseño. Esto lo hace ideal para casos de uso que requieren elementos visuales más completos, como mostrar las características del producto con imágenes, guías paso a paso o comparaciones visuales. 

Cómo Agregar el Elemento Lista Avanzada a su Página

Paso 1: En la sección Panel de Control de GemPages, seleccione su página para ingresar al Editor.

Paso 2: Dentro del Editor, localice el Lista avanzadaen la sección Lista de contenido Sección. Arrástrelo y suéltelo en la ubicación deseada en la página.

Haga clic en el elemento, encontrará la configuración revelada en la barra lateral izquierda. 

Configurar la Pestaña de Configuración

1. Gestión de ítems

Esta sección le permite agregar, eliminar o duplicar elementos de la lista.

• A agregar un nuevo elemento, haga clic en el botón Icono duplicado junto a un elemento existente. Aparecerá un nuevo elemento inmediatamente debajo del original.
• A eliminar un elemento, haga clic en el botón Icono de basura en el elemento que desea eliminar y luego confirme la eliminación.

2. Espaciado de ítems

El Espaciado de Artículos controla la distancia vertical entre cada elemento de la lista. Use el control deslizante o el valor de entrada para ajustar la distancia.

• Predeterminado: 12px
• Un espaciado mayor puede hacer que la lista sea más fácil de leer, mientras que un espaciado menor crea un diseño más compacto.

3. Estilo de ítem

Espacio entre iconos y texto : ajusta el espacio horizontal entre el ícono (o imagen) y el texto.

• Predeterminado: 12px
• Aumente el espacio para un diseño más abierto; redúzcalo para una apariencia más ajustada.

Relleno: Agrega espacio alrededor de cada elemento de la lista.

• Haga clic en Agregar relleno e ingrese el número de píxeles que desee.
• Esto garantiza que su contenido no toque los bordes del cuadro del artículo.

Fondo: Puede agregar un fondo de color detrás del elemento.

Borde, esquina y sombra: Estas opciones le permiten darle estilo al contenedor del artículo.

• Borde: Elija el estilo (sólido, discontinuo, punteado), el grosor y el color.
• Esquina: Ajuste el radio del borde para redondear las esquinas.
• Sombra: Añade sombras para crear profundidad o resaltar elementos.

4. Tamaño

Ancho: Controla el ancho del cuadro de contenido dentro del elemento:

• Ajustar al Contenido: El cuadro se ajusta automáticamente al tamaño del contenido.
• Completo: La caja se expande hasta el 100% del ancho del contenedor.

RellenoAjuste el espacio entre los bordes del cuadro de contenido y el contenido interior. Haga clic. Agregar relleno e ingrese el valor deseado en píxeles.

Arregle:Alinear el contenido dentro del cuadro: Izquierda, Centro, o Derecha.

• Esta configuración se ocultará si el ancho se establece en Automático.
• La alineación predeterminada es izquierda.

5. Fondo

También puedes establecer un fondo para el elemento de lista avanzada completo:

• Color:

• Imagen:

6. Forma

• Borde: Establezca el estilo, el grosor y el color del borde para el elemento general.
• Esquina: Redondea las esquinas del elemento con un radio de borde.
• Sombra: Aplique efectos de sombra para que la lista se destaque visualmente.

7. Alineación

Determine cómo se posiciona el elemento en su página. Hay tres opciones para elegir: alineado a la izquierda, centrado y alineado a la derecha.

Configurar la pestaña Avanzada

El pestaña Avanzada permite una mayor personalización:

• Agregar CSS para darle estilo a su lista de maneras que no están disponibles en la configuración predeterminada.
• Ajuste visibilidad por dispositivo para ocultar o mostrar la lista en el escritorio, tableta o dispositivo móvil.
• Aplicar animaciones o efectos de interacción para hacer su contenido más dinámico.

Para una personalización más detallada, navegue hasta la pestaña Avanzada y siga las instrucciones en este artículo.