El bloque de Imágenes de Galería de Productos te permite insertar sin problemas las imágenes de la galería de tus productos de WooCommerce en las plantillas de Producto Único. Renderiza la galería de imágenes completa del producto —incluyendo la imagen principal y las miniaturas— y te ofrece controles para estilizar el botón de zoom, los bordes de las imágenes y los bordes de las miniaturas para que coincidan con tu diseño.
Este bloque está diseñado exclusivamente para usarse dentro de plantillas de Producto Único. Antes de empezar, asegúrate de tener WooCommerce instalado y de haber publicado productos con imágenes de galería asignadas.
Añadir el Bloque de Imágenes de Galería de Productos a tus Páginas
Sigue estos pasos para añadir un bloque de Imágenes de Galería de Productos a tu plantilla de Producto Único de SeedProd:
Paso 1: Añadir el Bloque
En Etiquetas de Plantilla de WooCommerce, arrastra y suelta el bloque Imágenes de Galería de Productos en la sección deseada de tu plantilla de Producto Único.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Imágenes de Galería de Productos para abrir su configuración. En la pestaña Contenido, encontrarás las siguientes opciones.
Botón de Zoom:
- Posición Superior: Establece la posición vertical del botón de zoom en relación con la parte superior de la imagen del producto (en píxeles).
- Posición Derecha: Establece la posición horizontal del botón de zoom en relación con el borde derecho de la imagen del producto (en píxeles).
- Tamaño de Fuente: Establece el tamaño del icono de zoom.
- Color del Icono: Establece el color del icono de zoom.
- Color de Fondo: Establece el color de fondo del botón de zoom.
- Radio del Borde: Ajusta la redondez de las esquinas del botón de zoom usando un deslizador.
Borde de la Imagen:
- Radio del Borde de la Imagen: Establece la redondez de las esquinas de la imagen principal del producto.
- Ancho del Borde de la Imagen: Establece el grosor del borde en cada lado de la imagen principal del producto.
Borde de las Miniaturas:
- Radio del Borde de las Miniaturas: Establece la redondez de las esquinas de las imágenes en miniatura debajo de la imagen principal del producto.
- Ancho del Borde de las Miniaturas: Establece el grosor del borde en cada lado de las imágenes en miniatura.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar aún más la apariencia de tu bloque de Imágenes de Galería de Productos.
Borde:
- Estilo del Borde: Establece el estilo del borde del contenedor del bloque — Sólido, Punteado o Discontinuo.
- Color del Borde: Establece el color del borde del contenedor del bloque.
- Ancho del Borde: Establece el grosor del borde en cada lado del contenedor del bloque.
- Radio del Borde: Establece la redondez de las esquinas del contenedor del bloque.
Espaciado:
- Margen: Establece el espaciado exterior alrededor del bloque en los cuatro lados, con controles independientes para escritorio, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Atributos:
- Clase personalizada: Añade una o más clases CSS personalizadas al contenedor del bloque para una estilización específica.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puedes usarlo para referenciar el bloque en CSS o JavaScript personalizado.
- Atributos personalizados: Añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato clave|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Activa para ocultar el bloque cuando se ve en pantallas de escritorio.
- Ocultar en tableta: Activa para ocultar el bloque cuando se ve en pantallas de tableta.
- Ocultar en móvil: Activa para ocultar el bloque cuando se ve en pantallas móviles.
Efectos de Animación:
- Efecto de desplazamiento: Aplica una animación activada por desplazamiento al bloque, incluyendo opciones de Desplazamiento Vertical y Desplazamiento Horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto del ratón: Aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Imágenes de Galería de Productos y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has agregado con éxito un bloque de Imágenes de Galería de Producto a tu plantilla de Producto Único! Con controles para la posición del botón de zoom, el estilo del borde de la imagen y la presentación del borde de las miniaturas, puedes crear una galería de productos pulida que ofrezca a los clientes una vista completa y visualmente atractiva de todo lo que vendes.