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:
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
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
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
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
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
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
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:
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:
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.
[ad_2]
