Lista de Artículos

¿Qué es el Elemento Lista de Artículos en GemPages?

El elemento Lista de Artículos le permite presentar información en formato de lista, con cada elemento comenzando con un icono. Puede elegir iconos de la biblioteca de iconos de GemPages para mantener la coherencia visual, o, si prefiere iconos o imágenes personalizados, utilice el elemento Lista Avanzada .

Este elemento es ideal para:

• Destacar características de productos
• Enumerar beneficios o puntos de servicio
• Presentar procesos paso a paso
• Crear contenido compacto y fácil de escanear

Cómo agregar el elemento Lista de Artículos a su página

Para agregar el elemento Lista de Artículos a su página, siga los pasos a continuación:

Paso 1: Desde su Panel de Control de GemPages, seleccione la página que desea editar y ábrala en el Editor.

Paso 2: Dentro del Editor, vaya a la sección de Lista de Contenido en la barra lateral izquierda o busque "Item list" en la barra de búsqueda.

Paso 3: Arrastre y suelte el elemento Lista de Artículos en la ubicación deseada en la página.

Configurar el Elemento Lista de Artículos

Una vez que el elemento esté en su página, haga clic en el elemento. La barra lateral izquierda mostrará dos pestañas principales: Configuración y Avanzado:

La Pestaña Configuración

1. Gestión de ítems

Esta sección le permite agregar, eliminar o reordenar elementos de la lista:

• Agregar un artículo: Pase el cursor sobre un elemento existente y haga clic en el icono Duplicar para crear una copia exacta.
• Eliminar un artículo: Haga clic en el icono Basura del elemento que desea eliminar y luego confirme.
• Reordenar artículos:Pase el cursor sobre el elemento que desea mover, Haga clic y mantenga presionado el mouse, luego arrástrelo hacia arriba o hacia abajo Para cambiar su posición en la lista, suelte el botón del ratón cuando el elemento esté en el orden deseado.

2. Icono

• Tipo de icono: Tipo de iconos de cada elemento en el elemento Lista de Artículos. Hay 2 opciones de tipo de icono:

Iconos coincidentes: Todos los iconos en el elemento Lista de Artículos serán iguales.

Iconos diferentes: Cada artículo en el elemento Lista de Artículos tiene un icono individual.

• Fuente de icono: Seleccione el icono a mostrar

Si tipo de icono = Iconos coincidentes: Todos los iconos en el elemento Lista de Artículos serán iguales.

Si tipo de icono = Iconos diferentes: Cada artículo en el elemento Lista de Artículos tiene un icono individual.

El usuario selecciona manualmente cada icono para cada artículo.

• Tamaño de ícono: Ingrese su tamaño preferido para el icono. El tamaño de icono predeterminado es 16px.

• Color del icono: Elija el color para su icono desde la paleta o ingrese el código hexadecimal del color en el cuadro..

• Posición: Posición del icono en relación al texto en cada artículo de la lista. Hay 2 opciones de posición: Alinear arriba, Alinear al centro.

• Relleno: Ajuste el espacio dentro del contenedor del icono. Esto controla qué tan cerca se encuentra el icono de los bordes de su contenedor. Aumente el relleno para más espacio de respiro alrededor del icono; disminúyalo para un ajuste más ceñido.

• Fondo: Agregue un fondo detrás del icono.

Color: Seleccione un color de fondo sólido o degradado.

Imagen: Cargue una imagen para que aparezca detrás del icono.

• Borde: Agregue un borde alrededor del contenedor del icono. Puede configurar:

Estilo de borde (sólido, discontinuo, punteado)

Grosor del borde (en píxeles)

Color del borde

• Esquina: Ajuste la redondez de las esquinas del contenedor del icono configurando un radio de borde.

3. Estilo de texto

En este punto, tiene la capacidad de editar la tipografía del texto. Aquí están las opciones disponibles:

• Estilos: Seleccione su estilo deseado de las opciones predefinidas, que incluyen 6 estilos de encabezado y 3 estilos de párrafo.
• Fuente: Elija la fuente que desea usar para el texto. Si desea usar una fuente que no está listada, puede consultar la guía proporcionada sobre cómo agregar una fuente personalizada en el Editor ver 7.
• Tamaño: Ajuste el tamaño de la fuente especificando un valor en píxeles.
• Color: Modifique el color del texto según su preferencia.

Haga clic en el botón "Mostrar más" para revelar más opciones de personalización:

• Grosor de Fuente:Elija su grosor de fuente deseado del menú desplegable proporcionado.
• Altura de LíneaAjuste la altura del texto especificando un valor porcentual.
• Espacio entre letras:Modifique el espaciado entre letras ingresando un valor en píxeles.
• Transformación de texto: Transforme el texto de una de las siguientes maneras: Sin transformación aplicada, Mayúsculas, Minúsculas, Mayúscula inicial.

4. Espaciado entre artículos

Ajuste el espaciado vertical entre los artículos de la lista usando el deslizador.

Predeterminado: 12px.

5. Estilo de artículos

Espacio entre icono y texto - Controla el espacio horizontal entre el icono y el texto.

Predeterminado: 8px.

6. Fondo

• Color: Haga clic en el selector de color para elegir un color de fondo sólido o degradado.
  
• Imagen Cargue una imagen de fondo desde su dispositivo. El tamaño recomendado depende del diseño de su diseño.

7. Tamaño

• Ancho: Ingrese un valor numérico (px) o elija:

Contenido ajustado: Ajuste el ancho al tamaño del contenido.

Completo: Se extiende al ancho completo del contenedor.

• Relleno: Ajuste el espaciado interno entre el contenido y el borde del elemento.
• Ordenar : Alinee todo el elemento a la Izquierda, al Centro o a la Derecha.

8. Forma

• Borde: Agregue un borde, elija el estilo (sólido, discontinuo, punteado), establezca el grosor y el color.
• Esquina: Redondee las esquinas estableciendo un valor de radio (por ejemplo, 5px para un redondeo ligero, 50px para completamente redondeado).
  
• Sombra: Agregue efectos de sombra para profundidad; ajuste el desenfoque, la expansión y el color.

9. Alineación

• Si ancho = 100%, la alineación está fija y no se puede cambiar.
  
• De lo contrario, la alineación predeterminada es Izquierda, pero puede cambiar a Centro o Derecha según sea necesario.

La Pestaña Avanzada

Para personalización avanzada, vaya a la pestaña Avanzada. Aquí puede:

• Agregar CSS personalizado para un estilo único.
• Controlar la visibilidad por tipo de dispositivo.
• Aplicar animaciones y efectos de interacción.

Para instrucciones detalladas, consulte nuestro artículo sobre Configuración Avanzada .