El bloque Imágenes de la galería de productos te permite insertar fácilmente las imágenes de la galería de productos de WooCommerce en las plantillas de productos individuales. Muestra la galería completa de imágenes del producto, incluidas la imagen principal y las miniaturas, y te ofrece controles para personalizar el botón de zoom, los bordes de las imágenes y los bordes de las miniaturas para que se adapten a tu diseño.
Este bloque está diseñado exclusivamente para su uso 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 la galería de productos a tus páginas
Siga estos pasos para añadir un bloque de imágenes de la galería de productos a su plantilla SeedProd Single Product:
Paso 1: Añadir el bloque
En Etiquetas de plantilla de WooCommerce, arrastra y suelta el bloque Imágenes de la 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 Imágenes de la 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 con respecto al 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: Ajuste la redondez de las esquinas del botón de zoom mediante un control deslizante.
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 miniaturas:
- Radio del borde de las miniaturas: Establece la redondez de las esquinas de las imágenes en miniatura que aparecen 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: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar aún más la apariencia de tu bloque Imágenes de la galería de productos.
Frontera:
- 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 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 espacio exterior alrededor del bloque en los cuatro lados, con controles independientes para ordenador, 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 aplicar un estilo específico.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puede utilizarlo para hacer referencia al bloque en CSS o JavaScript personalizados.
- Atributos personalizados: añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato clave|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Activa esta opción para ocultar el bloque cuando se vea en pantallas de escritorio.
- Ocultar en tableta: Activa esta opción para ocultar el bloque cuando se vea en pantallas de tableta.
- Ocultar en dispositivos móviles: Activa esta opción para ocultar el bloque cuando se vea en pantallas de dispositivos móviles.
Efectos de animación:
- Efecto de desplazamiento: aplica una animación activada por desplazamiento al bloque, incluyendo opciones de desplazamiento vertical y horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto ratón: aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Imágenes de la galería de productos y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de imágenes de galería de productos a tu plantilla de producto único! Con controles para el posicionamiento del botón de zoom, el estilo del borde de las imágenes y la presentación del borde de las miniaturas, puedes crear una galería de productos pulida que ofrezca a los clientes una visión completa y visualmente atractiva de todo lo que vendes.