O bloco Imagens da galeria de produtos permite inserir facilmente as imagens da galeria de produtos do WooCommerce em modelos de produto único. Ele exibe a galeria de imagens completa do produto — incluindo a imagem principal e miniaturas — e oferece controles para personalizar o botão de zoom, as bordas das imagens e as bordas das miniaturas de acordo com o 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 de ter publicado produtos com imagens da 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:
Passo 1: Adicione 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
Depois de adicionar, clique no bloco Imagens da galeria de produtos para abrir suas configurações. Na guia Conteúdo, você encontrará as seguintes opções.
Botão Zoom:
- Posição superior: defina a posição vertical do botão de zoom em relação à parte superior 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 a curvatura 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 a 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 guia Avançado, você pode personalizar ainda mais a aparência do seu bloco Imagens da galeria de produtos.
Fronteira:
- Estilo da borda: defina o estilo da borda do bloco — Sólida, Pontilhada ou Tracejada.
- Cor da borda: defina a cor da borda do bloco.
- Largura da borda: defina a espessura da borda em cada lado do bloco.
- Raio da borda: defina a arredondamento dos cantos do bloco.
Espaçamento:
- Margem: defina o espaçamento externo ao redor do bloco nos quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: defina o espaçamento interno dentro do bloco wrapper nos quatro lados, com controles por dispositivo.
Atributos:
- Classe personalizada: adicione uma ou mais classes CSS personalizadas ao invólucro do bloco para obter um estilo específico.
- 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 personalizados.
- 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 na área de trabalho: alterne para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no tablet: alterne para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no celular: Alterne para ocultar o bloco quando visualizado em telas de celular.
Efeitos de animação:
- Efeito de rolagem: aplique uma animação acionada pela rolagem ao bloco, incluindo opções de rolagem vertical e horizontal com controles de direção, velocidade e deslocamento da janela de visualização.
- Efeito do mouse: aplique um efeito de paralaxe acionado pelo movimento do mouse ao bloco.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco 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 posicionamento do botão de zoom, estilo da borda da imagem e apresentação da borda da miniatura, você pode criar uma galeria de produtos sofisticada que oferece aos clientes uma visão completa e visualmente atraente de tudo o que você vende.