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 o nome de um produto, esse 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 do 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:
Passo 1: Adicione 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
Depois de adicionado, 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 no 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 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 guia do navegador) ou Não seguir (adiciona um
rel="nofollow"atribuir 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–72 px). Suporta dimensionamento por dispositivo para desktop, tablet e celular.
- Nível: escolha a tag de título HTML usada para exibir o título do produto — H1, H2, H3, H4, H5 ou H6. Para obter os melhores resultados de SEO, use H1 para o título principal do produto, caso não exista outro H1 na página.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar ainda mais a aparência do título e controlar sua visibilidade em diferentes dispositivos.
Estilos:
- Tipografia: defina a família de fontes, a espessura, a altura da linha, o espaçamento entre letras e a transformação do texto para o título do produto, oferecendo um controle além do que o controle deslizante Tamanho da fonte da 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, Fino, Pequeno, Médio, Grande, Extragrande, 2X Grande) para adicionar profundidade sutil ou dramática ao título.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco Título do produto (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o título e os elementos ao redor na página do produto.
- Preenchimento: ajuste o espaçamento interno no bloco Título do produto (superior, direito, inferior, esquerdo). Isso cria um espaço entre o texto do título e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o bloco Título 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-title|produto).
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculta o bloco Título do produto nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco Título do produto em dispositivos tablet.
- Ocultar no celular: oculte o bloco 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 do título do produto aparece na tela. 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 Título do produto e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de título de produto ao seu modelo de produto único! O bloco exibe automaticamente o título correto para cada produto em seu catálogo WooCommerce, sem qualquer esforço manual. Experimente diferentes níveis de título, tamanhos de fonte por dispositivo e efeitos de sombra de texto para criar uma apresentação de título de produto que seja visualmente atraente e otimizada para mecanismos de pesquisa.