O bloco de Imagens da Galeria de Produtos permite que você insira perfeitamente as imagens da galeria de produtos do WooCommerce em modelos de Produto Único. Ele renderiza a galeria completa de imagens do produto — incluindo a imagem principal e as miniaturas — e oferece controles para estilizar o botão de zoom, as bordas das imagens e as bordas das miniaturas para combinar com seu design.
Este bloco foi projetado exclusivamente para uso em modelos de Produto Único. Antes de começar, certifique-se de ter o WooCommerce instalado e produtos publicados com imagens de galeria atribuídas.
Adicionando o Bloco de Imagens da Galeria de Produtos às Suas Páginas
Siga estas etapas para adicionar um bloco de Imagens da Galeria de Produtos ao seu modelo de Produto Único do SeedProd:
Etapa 1: Adicionar o Bloco
Em Tags de Modelo do WooCommerce, arraste e solte o bloco Imagens da Galeria de Produtos na seção desejada do seu modelo de Produto Único.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Imagens da Galeria de Produtos para abrir suas configurações. Na aba Conteúdo, você encontrará as seguintes opções.
Botão de Zoom:
- Posição Superior: Defina a posição vertical do botão de zoom em relação ao topo da imagem do produto (em pixels).
- Posição Direita: Defina a posição horizontal do botão de zoom em relação à borda direita da imagem do produto (em pixels).
- Tamanho da Fonte: Defina o tamanho do ícone de zoom.
- Cor do Ícone: Defina a cor do ícone de zoom.
- Cor de Fundo: Defina a cor de fundo do botão de zoom.
- Raio da Borda: Ajuste o arredondamento dos cantos do botão de zoom usando um controle deslizante.
Borda da Imagem:
- Raio da Borda da Imagem: Defina o arredondamento dos cantos da imagem principal do produto.
- Largura da Borda da Imagem: Defina a espessura da borda em cada lado da imagem principal do produto.
Borda das Miniaturas:
- Raio da Borda das Miniaturas: Defina o arredondamento dos cantos das imagens em miniatura abaixo da imagem principal do produto.
- Largura da Borda das Miniaturas: Defina a espessura da borda em cada lado das imagens em miniatura.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar ainda mais a aparência do seu bloco de Imagens da Galeria de Produtos.
Borda:
- Estilo da Borda: Defina o estilo da borda do contêiner do bloco — Sólido, Pontilhado ou Tracejado.
- Cor da Borda: Defina a cor da borda do contêiner do bloco.
- Largura da Borda: Defina a espessura da borda em cada lado do contêiner do bloco.
- Raio da Borda: Defina o arredondamento dos cantos do contêiner do bloco.
Espaçamento:
- Margem: Defina o espaçamento externo ao redor do bloco em todos os quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: Defina o espaçamento interno dentro do wrapper do bloco em todos os quatro lados, com controles por dispositivo.
Atributos:
- Classe Personalizada: Adicione uma ou mais classes CSS personalizadas ao wrapper do bloco para estilização direcionada.
- ID CSS: O SeedProd gera automaticamente um ID CSS exclusivo para este bloco. Você pode usá-lo para referenciar o bloco em CSS ou JavaScript personalizado.
- Atributos Personalizados: Adicione atributos HTML personalizados ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato chave|valor.
Visibilidade do Dispositivo:
- Ocultar no Desktop: Ative para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no Tablet: Ative para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no Celular: Ative para ocultar o bloco ao ser visualizado em telas de celular.
Efeitos de Animação:
- Efeito de Rolagem: Aplique uma animação acionada por rolagem ao bloco, incluindo opções de Rolagem Vertical e Rolagem Horizontal com controles de direção, velocidade e deslocamento de visualização.
- Efeito do Mouse: Aplique um efeito de paralaxe ao bloco, acionado pelo movimento do mouse.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Imagens da Galeria de Produtos e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Imagens da Galeria de Produtos ao seu modelo de Produto Único! Com controles para o posicionamento do botão de zoom, estilo da borda da imagem e apresentação da borda das miniaturas, você pode criar uma galeria de produtos polida que oferece aos clientes uma visão completa e visualmente atraente de tudo o que você vende.