Personyze Wiki Personyze Wiki docs
Español
  • English
  • Español
  • Français
  • Deutsch
  • Italiano
  • Nederlands
  • Português
  • Polski
  • 日本語
  • العربية
Open Personyze
Documentación/ Plantilla: slider Overlay con el texto sobre la imagen

Plantilla: slider Overlay con el texto sobre la imagen

Un carrusel de imágenes a sangre con el nombre, el subtítulo y el precio sobre la foto — un aspecto editorial para catálogos de moda, hogar y estilo de vida.

3 min read Actualizado hace 39 minutos

Un carrusel de imágenes a sangre con el nombre del producto, el subtítulo y el precio directamente sobre la foto, encima de un degradado que mejora la legibilidad — un aspecto editorial premium para catálogos de moda, hogar y estilo de vida.

Comparte motor con el Product Slider: los mismos cuatro Style accents, insignias, efectos al pasar el ratón, reproducción automática, zoom de la imagen, segunda imagen al pasar el ratón y los ajustes centrales de formato de precio y moneda. Dos ajustes definen su identidad: Show Text on Image y Show Gradient Overlay, los dos activados de forma predeterminada, con un lienzo de foto más alto y tres tarjetas por vista. Desactive Text on Image y se convierte en un slider clásico de tarjetas con el texto debajo de la imagen.

Cómo funciona esta plantilla

Esta familia de plantillas se basa en cuatro ideas:

  • Style accents. El primer ajuste, Style accent (light, gold, bold, ocean), cambia a la vez el color de las tarjetas, las insignias, los botones, los precios, los puntos y las barras de desplazamiento en un clic. Después, cada color se puede seguir sobrescribiendo por separado en su propio campo de estilo.
  • Catalog Fields en un solo lugar. La sección Catalog Fields (la segunda del menú) asigna todas las columnas de producto que usa la plantilla — imágenes, URL, título, marca, las dos columnas de precio, valoración, descripción, inventario, porcentaje de descuento, fechas y campos personalizados. Las asignaciones son globales: definir una columna ahí actualiza todos los elementos que la usan. Las tiendas con feeds totalmente personalizados pueden reconfigurar todo el widget desde esta única sección.
  • Modo de demostración en vivo. Mientras diseña, aparecen automáticamente productos de demostración realistas (los visitantes nunca los ven). La primera tarjeta de demostración es un escaparate en vivo: haga clic en cualquier elemento para darle estilo, y cada interruptor — insignias, Añadir al carrito, capas superpuestas, estadísticas, descripción, precio por unidad — responde visiblemente sobre ella.
  • Precios centralizados. La sección Pricing tiene un único selector Price Format (standard / european / rounded / rounded-european) y un único par de campos de símbolo de moneda que se aplican en todos los lugares donde aparecen precios, incluida la capa superpuesta sobre la imagen. Los productos sin precio no muestran nada — ningún símbolo de moneda suelto.

Conviene saber

  • Los elementos por dispositivo responden al contenedor, no solo a la pantalla. El número de elementos visibles (escritorio / tableta / móvil) se aplica a partir del ancho del propio widget, así que funciona correctamente en la vista previa por dispositivo del editor, en móviles reales e incluso dentro de barras laterales estrechas.
  • Text on Image elimina los duplicados automáticamente. Mientras la capa superpuesta está activada, el título, la línea de marca y el precio de debajo de la foto se ocultan solos.
  • Los estilos de hover son campos aparte. Si cambia el color base de un botón, repítalo en el campo Hover Style correspondiente para que el hover sea coherente.
  • Las tarjetas de plantilla guardadas congelan su código. Si guarda su propia copia en sus plantillas, las acciones creadas a partir de ella usan el código tal como estaba al guardarla — vuelva a guardar la tarjeta después de las actualizaciones importantes.
Did this page answer your question?
Thank you — that goes to whoever maintains this page.