Slider de recomendaciones de productos — tarjetas Dark Premium
Tipo de acción: Recomendaciones de productos. Se configura desde: el menú de la acción — sin código.
El slider Dark Premium presenta las recomendaciones en tarjetas casi negras con fotos de producto a sangre, texto claro y detalles dorados — el precio, el punto de paginación activo y el botón Añadir al carrito toman el dorado. Al pasar el ratón por una tarjeta, esta se eleva con una sombra luminosa profunda. Encaja con electrónica, artículos de lujo, moda, videojuegos y cualquier sitio con un diseño oscuro o de alto contraste.
Qué define este aspecto
- Paneles de tarjeta oscuros (
#16181d, radio de 12px, borde sutil) con la foto llenando la parte superior de borde a borde (background-size: cover— funciona con cualquier estilo de foto, incluidas las fotos de ambiente). - Texto claro sobre fondo oscuro debajo de la imagen: el título casi en blanco, una fila atenuada de vistas/vendidos con el número de vendidos en dorado, y el precio en dorado y negrita (
#d4af6a). Las secciones Product Title, Site Statistics y Pricing están activadas de forma predeterminada. - Añadir al carrito en dorado con texto oscuro, activado de forma predeterminada, que aparece al pasar el ratón mientras la tarjeta se eleva con una sombra luminosa.
- Insignias vivas — la insignia naranja de Best Seller, las azules de Popular/New y las rojas de stock y descuento se mantienen deliberadamente brillantes; destacan con fuerza sobre las tarjetas oscuras.
- Flechas circulares oscuras con chevrones dorados que se invierten a dorado sólido al pasar el ratón, además de un punto de paginación activo dorado y una barra de desplazamiento oscura — todo el conjunto de controles combina con el tema.
El detalle dorado
El dorado (#d4af6a) aparece en cinco lugares, cada uno con su propio campo en el menú, así que cambiar el acento al color de su marca solo requiere unas pocas ediciones:
- Sale / Regular Price Style — sección Pricing
- Purchases Icon Style — sección Site Statistics
- Button Style + Hover — sección Add to Cart
- Active Dot Style — sección Pagination Dots
- Side Arrow Custom Style + Hover — sección Slider Arrows
Sustituya #d4af6a por el color de su marca en esos campos y el tema lo seguirá.
Inicio rápido
- Añada la acción y elija la plantilla de slider Dark Premium Cards.
- Haga que Main Product Image Column (Card Image Style) apunte al campo de imagen de su catálogo. Si todavía no hay ningún catálogo conectado, aparecen en el editor seis productos de demostración con un aviso — los visitantes nunca los ven, y desaparecen en cuanto se carga su catálogo.
- Defina el número de elementos visibles en escritorio / tableta / móvil en Slider & Items Per View.
- Compruebe el widget sobre el fondo de su página: las tarjetas oscuras funcionan tanto en páginas claras como oscuras, pero en una página oscura quizá quiera aclarar Card Border Color o añadir un fondo en Container Style para separarlas.
- Previsualice en los tres tamaños de dispositivo y publique.
Trabajar en el editor
2 El aviso de productos de demostración, que solo se muestra mientras no hay ningún catálogo conectado. Los visitantes reales nunca ven las tarjetas de demostración ni este aviso.
3 Click to edit — al hacer clic en cualquier elemento de la vista previa se salta directamente a su opción, así que no tiene que buscarla en la barra lateral.
4 y 5 Las insignias se apilan automáticamente en las esquinas sin solaparse — aquí, Popular y un aviso rojo de poco stock en la misma tarjeta.
Hay dos formas de llegar a las opciones: elegir una sección en la barra lateral, o hacer clic en el elemento directamente en la vista previa para que se desplieguen sus ajustes. Para desarrolladores, Código HTML (avanzado) se abre en la parte inferior. Previsualice como Móvil, Tableta o Escritorio para comprobar cada breakpoint antes de publicar.
Cambiar de estilo sin cambiar de plantilla
Las tres plantillas de slider solo se diferencian en sus valores predeterminados, así que esta se puede transformar desde el menú:
- Cambie el color de las tarjetas a blanco con texto oscuro y tendrá el aspecto Clean Catalog.
- Active Show Text on Image junto con Gradient Overlay y desactive los bloques de debajo de la imagen para el aspecto Overlay.
Use la plantilla que empiece más cerca de lo que busca — es menos trabajo que transformar una que empieza lejos.
Preguntas frecuentes
El texto del título es invisible.
Probablemente está previsualizando después de cambiar el fondo de la tarjeta a un color claro — los textos predeterminados son claros sobre oscuro. Cambie el color de Title Text Style, de la fila de estadísticas y de los estilos de precio a la vez que el fondo de la tarjeta.
Las fotos con fondo blanco parecen cajas blancas sobre la tarjeta oscura.
Es lo que pasa con las fotos recortadas sobre superficies oscuras. Use fotos de ambiente, o cambie Card Box Style a background-size: contain con background-color: #ffffff para un aspecto de foto enmarcada dentro de la tarjeta oscura.
¿Puedo usar otro color de acento en lugar del dorado?
Sí — consulte El detalle dorado más arriba; son cinco campos del menú.
¿Se muestran alguna vez los productos de demostración a visitantes reales?
No. Solo se muestran en el editor y en los enlaces de vista previa, y solo mientras no hay ningún catálogo conectado.
Relacionados
- Slider de recomendaciones Overlay Card — la referencia completa de opciones del motor compartido.
- Tarjetas Clean Catalog — la versión en modo claro.
- Todas las plantillas
- Configurar el feed de productos