O bloco Guias de dados do produto exibe a descrição do produto WooCommerce, informações adicionais e avaliações de clientes em um layout com guias nos seus modelos de produto único. Em vez de apresentar todas as informações do produto em um único bloco com rolagem, a interface com guias organiza-as em seções claramente identificadas, nas quais os compradores podem navegar com um único clique.
Este bloco foi projetado exclusivamente para uso em modelos de produto único e requer a instalação do WooCommerce. Você pode personalizar totalmente a aparência das guias e dos painéis de conteúdo — incluindo cores, tipografia, bordas, espaçamento e sombras — para combinar com o design da sua loja.
Adicionando o bloco de guias de dados do produto às suas páginas
Siga estas etapas para adicionar um bloco de guias de dados do produto ao seu modelo de produto único do SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos > Tags de modelo do WooCommerce, arraste e solte o bloco Guias de dados do produto 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 Guias de dados do produto para abrir suas configurações. A guia Conteúdo é dividida em duas seções recolhíveis — Guias e Painel — onde você pode definir o estilo dos botões das guias e da área de conteúdo abaixo deles.
Guias:
- Normal: ative para revelar as configurações de cor das guias em seu estado padrão (não selecionado). Defina a cor do texto, a cor de fundo e a cor da borda para guias inativas.
- Ativo: ative para revelar as configurações de cor da guia selecionada no momento. Defina a cor do texto, a cor de fundo e a cor da borda para o estado da guia ativa, permitindo que ela se destaque claramente das guias inativas.
- Tipografia da guia: defina a família de fontes, tamanho, espessura, altura da linha e espaçamento entre letras para o texto do rótulo da guia.
- Raio da borda: defina o arredondamento dos cantos (0–100 px) dos botões das guias. Aumente esse valor para criar guias em forma de comprimido ou arredondadas.
Painel:
- Cor do texto: defina a cor padrão do texto para o conteúdo exibido dentro da área do painel.
- Tipografia do painel: defina a família, o tamanho, a espessura e o estilo da fonte para o texto do corpo em cada painel.
- Cor do título: defina a cor para quaisquer elementos de título (h2, h3, etc.) exibidos no conteúdo do painel.
- Tipografia do título: defina a família, o tamanho, a espessura e o estilo da fonte para o texto do título do painel.
- Preenchimento do painel: defina o espaçamento interno ao redor do conteúdo dentro da área do painel.
- Sombra do painel: adicione um efeito de sombra à área do painel — escolha entre tamanhos de sombra predefinidos para dar profundidade ao painel e separá-lo do fundo da página.
Etapa 3: Personalizar o design
Na guia Avançado, você pode refinar as bordas, o espaçamento e a visibilidade do seu bloco Guias de dados do produto.
Borda do painel:
- Raio da borda do painel: defina o arredondamento dos cantos da área de conteúdo do painel.
- Largura da borda do painel: defina a espessura da borda para cada lado do painel (superior, direito, inferior, esquerdo).
- Estilo e cor da borda do painel: escolha um estilo de borda (sólida, pontilhada ou tracejada) e defina uma cor de borda para a área do painel.
Borda do bloco:
- Raio da borda: defina o arredondamento geral dos cantos para todo o bloco Guias de dados do produto.
- Largura da borda: defina a espessura da borda por lado para o invólucro do bloco externo.
- Estilo e cor da borda: escolha um estilo e uma cor para a borda do bloco externo.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco Guias de dados do produto (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre as guias e os elementos ao redor na página.
- Preenchimento: ajuste o espaçamento interno dentro do bloco Guias de dados do produto (superior, direito, inferior, esquerdo). Isso cria um espaço entre o conteúdo das guias e as bordas do bloco.
Atributos:
- ID CSS: exibe o identificador exclusivo gerado automaticamente para o seu bloco de guias de dados do produto. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação JavaScript.
- Classe personalizada: adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos personalizados: adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-section|tabs).
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculte o bloco Guias de dados do produto nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco de guias de dados do produto em dispositivos tablet.
- Ocultar no celular: Oculte o bloco Guias de dados do produto em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha entre vários efeitos de animação que são reproduzidos quando o bloco Guias de dados do produto é exibido. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Guias de dados do produto e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de guias de dados do produto ao seu modelo de produto único! O bloco extrai automaticamente a descrição do produto, informações adicionais e avaliações de clientes do WooCommerce e as organiza em uma interface limpa com guias. Use as configurações de cor das guias para diferenciar os estados ativo e inativo e ajuste a tipografia e as bordas do painel para criar uma experiência de página de produto coesa que mantenha os compradores envolvidos.