Criando Cards de Produto com Layouts de Grade no Impreza

O recurso Layouts de Grade do Impreza permite criar modelos de exibição reutilizáveis para elementos em lista, como:

• Cards de produtos

• Equipe (membros)

• Portfólio

• Posts de blog

Esses layouts ajudam a manter padrão visual e facilidade de edição, já que você cria o design uma vez e aplica em quantos lugares precisar.

Open

exemplo der card criado

1. No painel do WordPress, vá até Modelos → Layouts de Grade.

2. Clique em “Adicionar Novo” ou “Editar” um já existente caso for uma pequena modificação.

3. Dê um nome descritivo, por padrão: card_plan_fibra_(nome do provedor)_1.0_DK_planos.

Open

card_plan_fibra_(nome do provedor)_1.0_DK_planos

• card_plan: é o nome que usamos internamente para descrever um card

• fibra: é o tipo de produto que vai ser o card, pode ser “fixo”,”movel”,“camera”, ou o que o card irá referenciar.

Open

exemplos de alguns nomes

• nome do provedor: auto explicativo, se for uma criação você coloca o nome do provedor que você estará mexendo

• 1.0: é a versão do card que você está mexendo ou criando, uma alteração significativa no card, você pode mudar 1.1, 1.2 e assim por diante, caso for um card totalmente novo você pode colocar 2.0 ou 1.0 novamente, o que for de sua preferencia.

• Dk_planos: é de onde nos puxamos os planos quando são importados do sistema datacake

Open

Para algo como o card do plano de internet, não existe uma regra padrão a ser seguida, pois cada card segue o layout definido por um design, contudo padronizamos o card base, quando o cliente não sabe ou não tem uma idade sobre como ele gostaria que fosse o carde de plano.

para montar primeiro teremos que fazer alguns procedimentos antes.

1. Introdução ao ACF (Advanced Custom Fields)

O Advanced Custom Fields (ACF) é um plugin do WordPress que permite criar campos personalizados para posts, páginas, produtos ou qualquer outro tipo de conteúdo. Em vez de depender apenas do editor padrão, você pode adicionar informações extras em formatos específicos (texto, número, lista, imagem, link etc.) e exibir esses dados no site de forma organizada.

Open

Imagine que você tem uma página de planos de internet. No WordPress tradicional, você teria que escrever manualmente:

• Nome do plano

• Preço

• Benefícios

• Link para assinar

Com o ACF, você cria um grupo de campos chamado “Planos de Internet” e define:

• Velocidade do plano (campo texto/número)

• Preço (campo número)

• Benefícios (campos de texto ou lista)

• Link de Assinatura (campo de URL)

Assim, quando alguém for cadastrar um novo plano, basta preencher esses campos e o layout (feito no Impreza) já puxa as informações automaticamente.

Open

• Facilidade para editores: quem não entende de design ou código só precisa preencher caixinhas no painel no caso a edição fica no produto dentro do “DK Planos”.

Open

• Padronização: todos os planos, produtos ou páginas seguem o mesmo modelo de informação.

• Integração com construtores: no Impreza, por exemplo, você pode puxar os valores do ACF direto para o layout de grade.

• Flexibilidade: serve para praticamente qualquer tipo de dado extra que o WordPress não oferece por padrão.

Hierarquia (árvore de wrappers e itens)

Por padrão, o card segue esta estrutura.

Open

vwrapper:1 → Container externo (borda, radius 24px)
└─ vwrapper:2
├─ vwrapper:7 (TOP / faixa de preço, fundo branco, radius 24px 24px 0 0)
│ ├─ html:3 (ribbon “Mais Vendido” – estrutura)
│ ├─ hwrapper:1 (Título grande do plano)
│ │ └─ post_custom_field:1 (isp_remote_id)
│ ├─ hwrapper:2 (Subtítulo)
│ │ └─ text:5 (“Mega”)
│ ├─ hwrapper:8 (Preço)
│ │ ├─ text:3 (“R$”)
│ │ ├─ post_custom_field:13 (isp_pricing_list)
│ │ └─ text:4 (“/mês”)
│ └─ html:1 (slot vazio)
└─ vwrapper:3 (CORPO / fundo branco, radius 0 0 24px 24px)
└─ vwrapper:4
├─ vwrapper:6 (Coluna ícone + texto dos benefícios)
│ ├─ hwrapper:6 (benefício 1)
│ │ ├─ text:6 (ícone)
│ │ └─ post_custom_field:2 (dk_texto_personalizado_1)
│ ├─ hwrapper:3 (benefício 2)
│ │ ├─ text:1 (ícone)
│ │ └─ post_custom_field:5 (dk_texto_personalizado_2)
│ └─ hwrapper:4 (benefício 3)
│ ├─ text:7 (ícone)
│ └─ post_custom_field:4 (dk_texto_personalizado_3)
└─ vwrapper:5 (Área de CTAs)
├─ btn:1 (Assinar – link dinâmico)
└─ btn:2 (Informações Adicionais – abre modal)

Alguns campos são personalizados que vai mostrar o que você colocar no campo na pagina Dk planos como por exemplo dk_texto_personalizado_1, outros vão puxar automaticamente como isp_pricing_list

*Vou deixar um modelo de card padrão, use como base, mais lembre-se o cada caso é um caso

Open

• Título: use o campo dinâmico ou insira texto fixo (para produtos fixos como planos, exemplo “Mega”).

• Preço: se estiver usando isp_pricing_list , dá pra puxar dinamicamente do WDA

• Benefícios extras: caso queira adicionar um texto mais longo imagem use o Informações Adicionais.

• Botão: adicione um botão e configure o link (página de contratação, checkout ou formulário).

• Defina padding interno no container para dar respiro.

• Adicione borda arredondada e sombra leve para destacar o card.

• Use cores da identidade visual da empresa (ex: verde no botão, azul no título).

• Configure hover states no botão (ex: mudar cor ao passar o mouse).

Open

1. Abra a página onde os cards aparecerão (normalmente deixamos ele em um bloco ex: bloco_planos_home).

2. Adicione o elemento Grade pelo WPBakery.

3. Nas opções da Grade ou Carrossel, selecione o Layout de Grade criado.

4. Ajuste colunas (ex: 4 colunas no desktop, 1 no mobile).

Open

Open

Open

Open

(continua)

• Sempre use modelos reutilizáveis, assim o time economiza tempo.

• Nomeie os layouts de forma clara.

• Teste em desktop e mobile para garantir responsividade.

• Para promoções, mantenha versões duplicadas do layout (normal vs. promocional).

• Antes de realizar uma troca faça uma pagina de teste e mostre ao cliente para aprovação

Open