O Bloco de Abas de Dados do Produto exibe a descrição do seu produto WooCommerce, informações adicionais e avaliações de clientes em um layout de abas em seus Modelos de Produto Único. Em vez de apresentar todas as informações do produto em um único bloco de rolagem, a interface de abas as organiza em seções claramente rotuladas que os compradores podem navegar com um único clique.
Este bloco foi projetado exclusivamente para uso em Modelos de Produto Único e requer que o WooCommerce esteja instalado. Você pode personalizar completamente a aparência das abas e seus 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 Abas de Dados do Produto às Suas Páginas
Siga estas etapas para adicionar um bloco de Abas de Dados do Produto ao seu Modelo de Produto Único SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > Tags de Modelo do WooCommerce, arraste e solte o bloco Abas de Dados do Produto 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 Abas de Dados do Produto para abrir suas configurações. A aba Conteúdo é dividida em duas seções recolhíveis — Abas e Painel — onde você pode estilizar os botões das abas e a área de conteúdo abaixo deles.
Abas:
- Normal: Ative para revelar as configurações de cores para as abas em seu estado padrão (não selecionado). Defina a Cor do Texto, Cor de Fundo e Cor da Borda para as abas inativas.
- Ativa: Ative para revelar as configurações de cores para a aba atualmente selecionada. Defina a Cor do Texto, Cor de Fundo e Cor da Borda para o estado da aba ativa, permitindo que ela se destaque claramente das abas inativas.
- Tipografia da Aba: Defina a família da fonte, tamanho, peso, altura da linha e espaçamento entre letras para o texto do rótulo da aba.
- Raio da Borda: Defina o arredondamento dos cantos (0–100px) para os botões das abas. Aumente este valor para criar abas em formato de pílula 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 da fonte, tamanho, peso e estilo para o texto do corpo dentro de cada painel.
- Cor do Título: Defina a cor para quaisquer elementos de título (h2, h3, etc.) exibidos dentro do conteúdo do painel.
- Tipografia do Título: Defina a família da fonte, tamanho, peso e estilo 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 aba Avançado, você pode refinar as bordas, o espaçamento e a visibilidade do seu bloco de Abas de Dados do Produto.
Borda do Painel:
- Arredondamento da Borda do Painel: Defina o arredondamento dos cantos para a área de conteúdo do painel.
- Espessura da Borda do Painel: Defina a espessura da borda para cada lado do painel (Superior, Direita, Inferior, Esquerda).
- 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:
- Arredondamento da Borda: Defina o arredondamento geral dos cantos para todo o bloco de Abas de Dados do Produto.
- Espessura da Borda: Defina a espessura da borda por lado para o contêiner externo do bloco.
- Estilo e Cor da Borda: Escolha um estilo e cor de borda para o contêiner externo do bloco.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Abas de Dados do Produto (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre as abas e os elementos circundantes na página.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Abas de Dados do Produto (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo das abas e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Abas de Dados do Produto. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por 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 contêiner do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-section|abas).
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Abas de Dados do Produto em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de Abas de Dados do Produto em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de Abas 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 de Abas de Dados do Produto entra na visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Abas de Dados do Produto e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Abas de Dados do Produto ao seu Modelo de Produto Único! O bloco busca automaticamente a descrição do produto, informações adicionais e avaliações de clientes do WooCommerce e as organiza em uma interface limpa com abas. Use as configurações de cor das abas 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 mantém os compradores engajados.