Como criar cartões de cupom com blocos do WordPress – WP Tavern

No ano passado, criei vários padrões para exibir códigos de cupom em um site. Eles faziam parte de um projeto temático maior que eu nunca terminei. No entanto, eu me diverti muito brincando com variações. Não gostando deles murchando no disco rígido do meu laptop, pensei em compartilhá-los com o público da Taverna.

O cartão de cupom básico se parece com o seguinte:

Código de cupom com tema de Natal com uma árvore e enfeite na foto.  Abaixo, está uma lista da venda e um código.

Quando eu o projetei e os outros, eu tinha o Natal em mente (se isso não era óbvio na captura de tela). Claro, estou sempre pensando no feriado, geralmente começando minhas compras pelo menos em julho de cada ano.

Além da imagem, deixei intencionalmente a maior parte do design genérico para que se aplique facilmente a outros feriados e eventos.

Este tutorial da série Construindo com Blocos orientará você em cada etapa da criação de cartões de cupom personalizados a partir do editor. Eu também compartilharei algumas idéias para variações no final.

Etapa 1: adicionar um bloco de grupo

Editor de postagem do WordPress com um bloco de grupo cinza no editor de postagem.
Adicionando um bloco de grupo com fundo e borda personalizados.

Como na maioria dos padrões, você deve começar com um bloco do tipo contêiner. Para o cartão de cupom, comece inserindo um Grupo. Você é livre para personalizar isso como quiser. No entanto, para usar o mesmo layout no tutorial, você deve pelo menos definir o preenchimento do bloco para 0px e opção de espaçamento entre blocos para 0px. Eles precisam ser zerados para que o resto do design funcione.

Eu ajustei meu bloco de grupo para ter uma cor de fundo cinza claro. Em seguida, adicionei um 4px borda tracejada e um 8px raio de fronteira. Cada uma dessas ferramentas de design está disponível no inspetor de blocos no painel da barra lateral. Divirta-se um pouco com as cores e outras configurações até encontrar algo que goste.

Etapa 2: adicionar uma imagem

Editor de postagem do WordPress com uma imagem alojada dentro de um bloco de grupo com borda e fundo cinza.
Inserindo um bloco de Imagem no Grupo.

Este passo é simples. Insira um bloco de imagem dentro do grupo da etapa 1. Não há configurações específicas necessárias.

Claro, você deve vinculá-lo a algo através do botão inserir link na barra de ferramentas. Você provavelmente está vendendo um produto e quer que as pessoas cliquem nele.

Etapa 3: adicionar grupo de conteúdo

Editor de postagem do WordPress com um bloco de grupo que abriga uma imagem e outro bloco de grupo.
Adicionando um bloco de grupo aninhado.

Este deve ser outro passo simples. Abaixo do bloco Imagem da etapa 2, adicione um novo Grupo. Isso abrigará o “conteúdo” que você adicionará na etapa 4.

A configuração mais crucial para este bloco é adicionar preenchimento por meio das ferramentas de design de bloco no painel da barra lateral. eu optei por 2rem para combinar com o meu tema. Lembre-se de que você zerou o preenchimento no grupo externo na etapa 1. Agora, você precisa adicionar alguns para evitar que o conteúdo encoste na lateral do contêiner.

Etapa 4: adicionar conteúdo

Editor de postagem do WordPress com um bloco de grupo que abriga uma imagem, um título e um parágrafo.
Adicionando o discurso de vendas.

Com o bloco de grupo em vigor desde a etapa 3, você tem uma nova área de forma livre para lançar seu discurso de vendas para clientes em potencial. Isso pode ser tão simples quanto um título seguido de um parágrafo ou algo muito mais complexo. Provavelmente é melhor mantê-lo curto e no ponto.

Etapa 5: linha de código de cupom

Editor de postagem do WordPress com um bloco de grupo que abriga uma imagem, um segundo grupo com conteúdo e um novo bloco de linha.
Inserindo um bloco de linhas para a seção de código de cupom.

Para destacar o código do cupom, adicione um novo bloco de linhas abaixo do bloco de grupo adicionado na etapa 3. Isso permite que você adicione uma seção para o código e a data de validade na próxima etapa.

Selecione a opção “espaço entre itens” para o controle de justificação. Essa configuração afasta cada bloco aninhado do outro.

Em seguida, selecione uma cor de fundo personalizada. Isso deve dar preenchimento automaticamente ao bloco Row. Se você optar por não definir uma cor, deverá definir manualmente o preenchimento para corresponder ao bloco Grupo acima dele.

Etapa 6: adicionar código e expiração

Editor de postagem do WordPress com um bloco de grupo que abriga uma imagem, um segundo grupo com conteúdo e uma linha com um código de cupom.
Código de cupom personalizado e data de validade.

A etapa final é adicionar dois blocos de parágrafo ao contêiner de linha. O primeiro deve ser algo como “Cupom: XMAS2022” e o segundo deve ser “Expires: December 31”.

Claro, é o seu cartão, então divirta-se personalizando-o.

Variações

A coisa maravilhosa sobre o editor de blocos do WordPress é que existem muitas maneiras que os usuários podem modificar a saída de um conjunto de blocos como o acima. Algo tão simples quanto mudar as cores pode lhe dar uma aparência totalmente diferente. E, reorganizando um ou dois blocos, você pode criar algo exclusivamente seu.

Uma das maneiras mais fáceis de personalizar o código do cupom acima é colocando alguns emojis, conforme mostrado na captura de tela a seguir:

Editor de postagem do WordPress com um bloco de grupo que abriga uma imagem, um segundo grupo com conteúdo e uma linha com um código de cupom.  Emojis com tema de Natal são misturados.
Variação de emojis.

OK. Eu estava me divertindo um pouco com isso. Em uma nota mais séria, existem muitas maneiras de mexer com a fórmula e criar algo novo.

Levei apenas alguns momentos para mesclar as etapas 2 e 4 (pulando a etapa 3) anteriores para criar o seguinte:

Editor de postagem do WordPress com um bloco de grupo que abriga um bloco de mídia e texto com um discurso de vendas.  Abaixo, encontra-se um bloco de linhas com um código de cupom e data de validade.
Variação de mídia e texto.

Esse é um bloco de mídia e texto na mistura. Vou deixar você com o desafio de recriar essa variação sem um passo a passo completo. Se você ficar preso, confira meu tutorial anterior, que abrange mídia e texto extensivamente.

Deixe um comentário

O seu endereço de e-mail não será publicado.