O bloco Título do Produto recupera e exibe dinamicamente o título de cada produto WooCommerce em seus Modelos de Produto Único. Em vez de inserir manualmente um nome de produto, este bloco extrai o título diretamente do WooCommerce para cada produto, mantendo suas páginas precisas e consistentes em todo o seu catálogo.
Este bloco foi projetado exclusivamente para uso em Modelos de Produto Único. Você tem controle total sobre como o título é renderizado — escolha o nível de título HTML (H1 a H6), defina o alinhamento e o tamanho da fonte por dispositivo e, opcionalmente, envolva o título em um link. A guia Avançado oferece opções adicionais de estilo, incluindo tipografia, cor e efeitos de sombra de texto.
Adicionando o Bloco de Título do Produto às Suas Páginas
Siga estas etapas para adicionar um bloco de Título do Produto ao seu Modelo de Produto Único do SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > Tags de Modelo do WooCommerce, arraste e solte o bloco Título 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 Título do Produto para abrir suas configurações. Na guia Conteúdo, a seção Título contém o campo de texto do título e todas as opções de exibição de como o título do produto aparece na página.
- Texto: O campo de conteúdo é pré-preenchido com o shortcode
, que busca automaticamente o título correto do produto do WooCommerce para cada produto. Você pode adicionar texto personalizado ao redor do shortcode, se necessário, ou usar o editor de rich text para aplicar formatação em negrito, itálico ou outra formatação inline. - Link: Opcionalmente, envolva o título do produto em um hiperlink inserindo uma URL no campo Link. Expanda as opções de link para ativar Abrir em Nova Janela (abre o link em uma nova aba do navegador) ou No Follow (adiciona um atributo
rel="nofollow"ao link para fins de SEO). - Alinhamento: Defina o alinhamento horizontal do título — Esquerda, Centro ou Direita. Suporta alinhamento por dispositivo para desktop, tablet e celular.
- Tamanho da Fonte: Defina o tamanho da fonte do título usando o controle deslizante (10–72px). Suporta dimensionamento por dispositivo para desktop, tablet e celular.
- Nível: Escolha a tag de título HTML usada para gerar o título do produto — H1, H2, H3, H4, H5 ou H6. Para melhores práticas de SEO, use H1 para o título principal do produto se não houver outro H1 na página.
Etapa 3: Personalizar o Design
Na guia Avançado, você pode estilizar ainda mais a aparência do título e controlar sua visibilidade em diferentes dispositivos.
Estilos:
- Tipografia: Defina a família da fonte, peso, altura da linha, espaçamento entre letras e transformação de texto para o texto do título do produto, dando a você controle além do que o controle deslizante de Tamanho da Fonte na guia Conteúdo oferece.
- Cor: Defina a cor do texto do título do produto.
- Sombra do Texto: Adicione um efeito de sombra diretamente ao texto do título. Escolha entre tamanhos predefinidos (Nenhum, Fio de Cabelo, Pequeno, Médio, Grande, X Grande, 2X Grande) para adicionar profundidade sutil ou dramática ao cabeçalho.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Título do Produto (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o título e os elementos circundantes na página do produto.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Título do Produto (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o texto do título e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Título 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 wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-title|produto).
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Título do Produto em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de Título do Produto em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de Título 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 Título do Produto rola para a visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitos outros.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Título do Produto e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Título do Produto ao seu Modelo de Produto Único! O bloco exibe automaticamente o título correto para cada produto em seu catálogo WooCommerce sem nenhum esforço manual. Experimente com níveis de cabeçalho, tamanhos de fonte por dispositivo e efeitos de sombra de texto para criar uma apresentação de título de produto que seja visualmente impressionante e otimizada para mecanismos de pesquisa.