Template Builder
Guia completo para personalizar a aparência dos cards de produto usando o editor visual do PAP Afiliados Pro.
Visão Geral
O Template Builder é o editor visual do plugin. Nele você controla cores, espaçamentos, sombras, estilos de botão, layouts e praticamente tudo que define como seus cards de produto aparecem no site — sem tocar em código.
Acesse em PAP Afiliados Pro > Aparência.
A interface é dividida em duas áreas: do lado esquerdo ficam os controles organizados em abas, e do lado direito um preview que atualiza em tempo real conforme você altera as opções. Você vê o resultado antes de salvar.
Abas de Configuração
As opções estão organizadas em 6 abas:
Cores
Controle completo das cores de cada elemento do card. Os campos são agrupados em 4 seções:
Cores do Card — Fundo da área de imagem e fundo geral do card.
Cores do Produto — Cor do título, cor do título no hover, cor da descrição e cor do preço.
Cores do Botão — Cor de fundo do botão, cor do texto do botão, cor de fundo no hover e cor do texto no hover. Mais a cor do gradiente (visível apenas nos estilos de botão com gradiente).
Cores dos Badges — Cor de fundo e texto do badge de marketplace, cor de fundo e texto do badge personalizado, e opacidade de cada um.
Todos os campos de cor usam o color picker nativo do WordPress.
Estrutura
Define a forma e o espaçamento do card:
- Estilo do card — Sólido, gradiente vertical, gradiente horizontal ou outline
- Borda arredondada — Raio de borda do card (em pixels)
- Borda da imagem — Raio de borda separado para a área da imagem
- Sombra — Intensidade da sombra do card
- Espaçamento — Distância entre cards no grid
- Layout padrão — Grid (cards lado a lado) ou Lista (cards empilhados)
- Colunas — Número de colunas no layout grid (1 a 6)
Imagem
Controla como a imagem do produto é exibida dentro do card:
- Proporção — 1:1 (quadrada) ou 2:3 (retrato)
- Ajuste — Cover (preenche a área, pode cortar) ou Contain (mostra inteira, pode ter espaço)
- Fundo — Sólido (cor definida na aba Cores) ou desfocado (blur da própria imagem como fundo)
Comportamento
Opções que afetam a funcionalidade dos cards:
- Texto do botão — O texto que aparece no botão CTA (ex: “Ver na Amazon”, “Comprar”)
- Exibir preço — Mostrar ou ocultar o preço no card
- Título clicável — Se o título do produto funciona como link
- Abrir em nova aba — Links abrem em nova aba do navegador
- Exibir badge personalizado — Mostrar ou ocultar badges como “Oferta”, “Mais Vendido”
- Exibir marketplace — Mostrar ou ocultar o badge com o nome do marketplace
Preços
Formatação da exibição de valores:
- Formato do preço — O padrão de exibição (ex: “R$ {valor}”)
- Texto sem preço — O que exibir quando o produto não tem preço cadastrado (ex: “Consulte o preço!”)
Avançado
Opções para ajuste fino:
- Estilo do botão — Sólido, gradiente vertical, gradiente horizontal ou outline
- Sombra do botão — Intensidade da sombra do botão
- Borda do botão — Raio de borda do botão (em pixels)
- Forçar CSS — Aplica
!importantem todas as variáveis CSS do plugin. Útil quando o tema do site sobrescreve os estilos dos cards
Preview em Tempo Real
O preview à direita dos controles mostra exatamente como o card ficará no frontend. Cada alteração — cor, espaçamento, estilo — reflete imediatamente no preview.
O preview usa uma imagem de exemplo fixa para consistência. No site, a imagem real do produto será exibida.
Sistema de Presets
Presets são configurações visuais salvas que podem ser reutilizadas em diferentes páginas e shortcodes. Esse é um dos recursos mais práticos do plugin — permite ter visuais diferentes para contextos diferentes sem reconfigurar cada vez.
Configurações Globais vs. Presets
Quando você abre o Template Builder pela primeira vez, está editando as configurações globais. Essas são as configurações padrão aplicadas quando nenhum preset é especificado.
Ao salvar um preset, você cria um conjunto independente de configurações. Cada preset tem suas próprias cores, layouts e estilos.
Uma barra visual no topo indica em qual contexto você está editando: “Configurações Globais” ou “Editando preset: Nome do Preset”.
Criar um Preset
- Configure a aparência como desejar usando os controles das abas
- No campo “Nome do Preset”, digite um nome descritivo (ex: “Cards Amazon”, “Vitrine Black Friday”)
- Clique em Salvar Preset
O plugin detecta nomes duplicados (case-insensitive) e pede confirmação antes de sobrescrever.
Gerenciar Presets
A lista de presets é exibida abaixo dos controles em formato de tabela, com colunas para nome, ID e ações:
- Carregar — Carrega as configurações do preset no formulário para edição
- Preview — Exibe um preview visual do preset sem carregá-lo no formulário
- Excluir — Remove o preset (com confirmação)
Cada preset tem um badge com seu ID (ex: “#3”), que é o valor usado nos shortcodes.
Usar Presets nos Shortcodes
Após criar um preset, use-o nos shortcodes com o parâmetro preset_id:
[papafpro_produto id="42" preset_id="3"]
[papafpro_produtos categoria="notebooks" preset_id="3"]Desde a v2.0.2, presets também podem ser referenciados por nome:
[papafpro_produto id="42" preset_id="Cards Amazon"]
[papafpro_produtos categoria="notebooks" preset_id="Cards Amazon"]Se o preset não for encontrado (ID ou nome inexistente), o plugin usa automaticamente as configurações globais como fallback.
Shortcode Dedicado de Preset
O shortcode carrega um preset completo, incluindo filtros de categoria e tags que podem estar salvos nele:
[papafpro_preset id="2"]
[papafpro_preset id="Vitrine Black Friday"]Parâmetros passados diretamente no shortcode sobrescrevem os valores salvos no preset:
[papafpro_preset id="2" limite="6" colunas="2"]
[papafpro_preset id="3" tags="destaque" tag_relation="AND"]Layouts
O plugin oferece dois layouts para exibição dos cards:
Grid
Cards exibidos lado a lado em colunas. O número de colunas é configurável de 1 a 6 (padrão: 3). Em telas menores, o grid se adapta automaticamente — reduzindo colunas conforme o espaço disponível.
Exemplo de shortcode com grid de 4 colunas:
[papafpro_produtos categoria="eletronicos" colunas="4"]Lista
Cards empilhados verticalmente, com a imagem ao lado do conteúdo. Ideal para posts de review ou comparativos onde cada produto merece mais espaço horizontal.
O layout é definido nas configurações globais ou no preset. Também pode ser escolhido diretamente no shortcode quando aplicável.
Estilos de Card
Quatro estilos visuais disponíveis para o fundo do card:
- Sólido — Cor de fundo uniforme
- Gradiente Vertical — Transição de cor de cima para baixo (usa a cor principal e a cor de gradiente)
- Gradiente Horizontal — Transição de cor da esquerda para direita
- Outline — Sem fundo, apenas borda
O estilo do botão segue opções semelhantes e pode ser configurado independentemente do estilo do card.
Variáveis CSS
Os cards usam CSS Custom Properties (variáveis CSS) para personalização. Isso significa que as cores e estilos são definidos inline no elemento do card e podem ser inspecionados e até sobrescritos via CSS do tema se necessário.
São 17 variáveis CSS no total, cobrindo cores de fundo, texto, botão, badges e propriedades estruturais. Todas controladas pelo Template Builder — sem necessidade de escrever CSS manualmente.
Se o tema do seu site interfere nos estilos dos cards, ative a opção Forçar CSS na aba Avançado. Isso aplica !important em todas as variáveis, garantindo que as configurações do plugin prevaleçam.
Dicas de Uso
Comece pelo global, refine com presets. Configure uma aparência geral que funcione para a maioria dos seus cards. Depois, crie presets para contextos específicos — uma vitrine de ofertas com cores vibrantes, uma seção de reviews com layout lista, etc.
Presets por marketplace. Se você trabalha com Amazon e Shopee, por exemplo, crie um preset para cada um com cores que remetam à identidade visual do marketplace. Seus visitantes identificam visualmente a origem do produto.
Menos é mais. Os cards já vêm com um design equilibrado nos defaults. Nem sempre é preciso mexer em tudo — às vezes ajustar apenas as cores do botão e do badge já faz toda a diferença.
Teste no mobile. O grid se adapta automaticamente, mas vale verificar como seus cards ficam em telas menores. O Template Builder não simula responsividade — teste na página real.
Próximos Passos
- Importe produtos em massa via CSV — Popule seu catálogo rapidamente
- Acompanhe os cliques nas Estatísticas — Veja quais presets convertem melhor