Cuando lanzamos la versión 7 del Editor de GemPages, fue un gran salto adelante, no solo en rendimiento, sino en cómo los comerciantes construyen. Pero detrás de cada página de destino, cada tarjeta de producto y cada diseño de paquete subyace una constante: Configuración de Elementos.
Y con el tiempo, esas configuraciones comenzaron a mostrar su antigüedad.
Durante el año pasado, hemos hablado con comerciantes, y algo seguía surgiendo: sabían qué construir, pero las configuraciones lo hacían más difícil de lo que debería ser. Así que nos preguntamos:
¿Cómo se vería la Configuración de Elementos si estuviera diseñada en torno a cómo piensa , no solo a cómo funciona el código?
Este lanzamiento, publicado el 29 de julio de 2025, es nuestra respuesta.
Nos hemos centrado en hacer que la construcción sea más fluida e intuitiva, con actualizaciones clave en nuevo patrón de UI y nuevo comportamiento de configuraciones. Están diseñadas para reducir la fricción en las tareas diarias y para apoyar mejor la forma en que los comerciantes construyen.
Aquí están las actualizacionnes que transformarán la experiencia de construcción dentro de GemPages, para mejor:
1. Separación más clara de los controles de estilo y diseño
Durante mucho tiempo, el Panel de Propiedades en GemPages utilizó un sistema de dos pestañas: una para estilo, otra para personalizar cómo aparece el elemento en la página. Funcionaba, pero no siempre estaba claro por dónde empezar. Algunos usuarios omitían configuraciones clave simplemente porque no estaban presentadas de la forma que esperaban.
Cómo lo hemos mejorado:
En esta actualización, hemos mantenido la estructura de dos pestañas, pero aclaramos sus funciones.
- La pestaña Configuración ahora se enfoca únicamente en la presentación visual de un elemento, incluyendo tipografía, color, fondos, bordes e imágenes. Estos controles se aplican al área de contenido principal del elemento.
- La pestaña Avanzada gestiona cómo se comporta el elemento y encaja dentro del diseño, incluyendo espaciado, alineación, posicionamiento, visibilidad y visualización responsive. Estos se aplican al contenedor exterior o cuadro delimitador, del elemento.
Qué significa esto para usuarios:
Al separar claramente el diseño visual de la ubicación estructural, esta actualización brinda mayor claridad y control a su flujo de trabajo.
Ya no necesita adivinar dónde vive una configuración o alternar entre pestañas para hacer cambios relacionados. El estilo visual, como tipografía, colores e imágenes, está agrupado donde corresponde. Los controles relacionados con espaciado, alineación y visibilidad están organizados lógicamente y se mantienen fuera del camino hasta que los necesite.
Esta estructura mejorada ayuda a reducir la carga cognitiva, minimiza el retrabajo y le permite concentrarse en crear páginas que sean tanto visualmente consistentes como estructuralmente sólidas.
2. Nueva interfaz de usuario con un patrón de escaneo más legible
| Diseño antiguo | Rediseño |
 |
 |
En versiones anteriores del Panel de Propiedades, la estructura de los controles variaba de una configuración a otra. Algunas usaban pilas verticales, otras combinaban etiquetas y valores de formas inconsistentes. A medida que se agregaban más configuraciones, el panel se volvía más difícil de escanear, especialmente cuando se trabajaba a velocidad o editando múltiples elementos seguidos.
Cómo lo resolvimos:
Un patrón de escaneo consistente de izquierda a derecha.
Cada configuración en esta pestaña ahora sigue un patrón claro de izquierda a derecha: Etiqueta → Valor.
A primera vista, es un pequeño cambio. Pero cuando está editando docenas de elementos, esa consistencia genera confianza. No tiene que reaprender cómo están estructuradas las configuraciones de un bloque al siguiente. Su ojo sabe a dónde ir.
Este patrón no solo mejora la escalabilidad a medida que se introducen más configuraciones, también entrena a los usuarios a navegar el Editor de manera más eficiente, ayudando tanto a principiantes como a equipos experimentados a moverse más rápido, con menos errores.
Configuraciones anidadas dentro de ventanas emergentes.
Algunas configuraciones no se detienen en un solo valor: se abren en conjuntos completos de controles relacionados. En el pasado, estas opciones adicionales se mostraban en línea, lo que rápidamente expandía el panel de Configuración y hacía que la interfaz se sintiera abarrotada.
Para abordar esto, introdujimos una nueva estructura: configuraciones anidadas dentro de ventanas emergentes.
Hacer clic en una configuración como "Borde" abre una ventana emergente limpia y enfocada, un modal flotante junto al panel, que muestra solo los controles relevantes. Estas ventanas emergentes pueden incluir hasta 3 niveles de profundidad, con cada grupo hijo abriéndose solo cuando sea necesario.
Qué significa esto para usuarios:
- It Mantiene el panel principal de Configuración ordenado, mostrando solo opciones de nivel superior por defecto.
- It Reduce la abrumación, especialmente para usuarios nuevos que no necesitan cada configuración avanzada de antemano.
Al ocultar la complejidad hasta que se necesita, el Editor se vuelve más fácil de escanear y más rápido de navegar, sin sacrificar potencia.
3. Nuevo comportamiento de configuraciones
Esta actualización a la versión 7 introduce nuevos tipos de configuraciones y refina cómo se comportan algunas existentes, haciendo las interacciones más rápidas, claras y fáciles de controlar.
Muchas configuraciones ahora siguen un patrón de hacer clic para agregar, hacer clic para eliminar. En lugar de comenzar desde un campo vacío, hacer clic en un control insertará automáticamente un valor predeterminado. Desde allí, puede ajustarlo o eliminarlo con un solo clic.
Este simple cambio de interacción ayuda a reducir el esfuerzo manual a menudo involucrado en la configuración. Le da un punto de partida claro sin conjeturas, para que pueda concentrarse en ajustar, no en construir desde cero.
Por qué es importante
Al aplicar automáticamente valores predeterminados, el Editor elimina pasos innecesarios y mantiene su flujo de trabajo en movimiento.
Tomará decisiones más rápido, reducirá la entrada repetitiva y evitará ralentizarse por configuraciones que no necesitan personalización profunda.
¿Qué ha cambiado en el panel de Configuración?
| Configuración | Diseño antiguo | Rediseño |
|---|---|---|
| Diseño: Las configuraciones anidadas ahora están agrupadas dentro de una ventana emergente, mostrando solo la etiqueta principal y su valor actual. |
 |
  |
| Fondo: La configuración de Fondo actualizada le da más flexibilidad al agregar video como una nueva opción, junto con color e imagen. |
 |
 |
| Forma: Las configuraciones de Borde se ajustan dentro de una Ventana Emergente, incluyendo configuraciones:
|
 |
|
| Relleno: En la versión antigua, el Relleno a veces se colocaba en la pestaña Configuración o en la pestaña Avanzada. En esta actualización, el Relleno se movió a la pestaña Configuración. |
|
|
| Alineación: La configuración de Alineación ahora se encuentra en la parte inferior del panel del editor, debajo de Tamaño y Fondo. |
 |
 |
Explorar la configuración de elementos por tipo
Para ayudarle a navegar más rápido, aquí hay una lista categorizada de todos los elementos compatibles en el Editor actualizado.
Cada enlace le lleva a un artículo dedicado con detalles sobre cómo funciona el elemento y cómo configurar sus ajustes.
1. Elementos básicos
2. Elementos interactivos
3. Elementos multimedia
4. Elementos del producto
- Producto
- Lista de Productos
- Botón del Carrito de Producto
- Título de Producto
- Precio de Producto
- Comparación de Precio de Productos
- Descripción del producto
- Ver Más de Producto
- Pago dinámico del producto (Product Dynamic Checkout)
- Cantidad de Producto
- Proveedor de Producto
- SKU de Producto
- Imagen de Producto
- Variantes y muestras del producto
- Insignia de Producto
- Etiqueta de descuento de producto
- Contador de existencias del producto
- Añadir al carrito fijo (Sticky Add to Cart)
- Carga de Archivo de Producto
- Paquete de productos
- Campo personalizado del producto
5. Elementos del artículo
- Lista de artículos
- Imagen del artículo
- Título del artículo
- Pasaje del artículo
- Contenido del artículo
- Fecha del artículo
- Autor del artículo
- Categoría del artículo
- Etiqueta de artículo
- Leer más sobre el artículo
6. Elementos del formulario
- Formulario de Contacto
- Boletín informativo
- Menú Desplegable
- Casilla de verificación
- Botón de Envío
- Campo de Correo Electrónico
- Campo de Texto
- Área de texto
gracias por tus comentarios