Tutorial: Criando uma Landing Page de produto com o CMS admin

image

Olá a todos. Como estão? :wave:t6:

Há algum tempo atrás, escrevi neste blog o texto Landing Pages: o que são e por que são tão importantes, no qual abordei algumas características e elementos comumente presentes em Landing Pages. Na ocasião listei estes elementos na ordem: Proposta, CTA, Benefícios e Prova Social.

Então, seguindo a linha do post mencionado, hoje trarei um passo-a-passo de como criar uma landing page simples utilizando o CMS:

Passo 1: Criando uma página extra

  • Abra o admin de sua loja

  • Com o admin aberto, navegue na seção Coleções e escolha a opção ‘Páginas extra’.
    image

  • Agora clique no botão ‘Novo(a) Páginas extra’ localizado na parte superior da página.

Passo 2: Configurando a estrutura da página

  • Defina um título e um corpo de sua preferência nas duas primeiras abas da página.

  • Navegue até a aba SEÇÕES(OPCIONAL) e clique no botão ‘Adicionar seções item’

  • Escolha a opção ‘Código HTML’. Um campo de edição de código deve ser exibido em seguida.
    image

  • As sections mostradas nos próximos passos devem ser adicionada uma abaixo da outra em sequência dentro do campo de código.

Passo 3: Definindo a nossa Proposta e posicionando nosso CTA

  • Neste exemplo, vamos promover um Headphone Bluetooth, então usaremos uma proposta que seja condizente com nosso produto e que chame a atenção do cliente.
  • Nessa parte também posicionaremos um botão CTA(Call To Action) e uma imagem do produto:
<section id="cabecalho">
  <div id="proposta">
      <h2 id="propostaTitle">Ouvir música é coisa séria!</h2>
      <div class="cta-container">
        <div id="propostaSubtitle">Tenha a melhor qualidade de áudio a seu alcance com o novo TWH-CH510.</div>
        <button id="callToAction">
          <a href="#">Quero comprar</a>
        </button>
      </div>
  </div>
  <img src="https://avantree.com/pub/media/amasty/blog/sony_blog_banner.jpg">
</section>

Passo 4: Listando os benefícios

  • Os benefícios tem como objetivo auxiliar no convencimento do cliente a adquirir nosso produto. No nosso exemplo listaremos 3 deles. Compostos de um título (h3) e uma descrição (p)
<section id="beneficios">
  <h3>Qualidade sonora aonde você for</h3>

  <p>O novo TWH-CH510 oferece graves potentes e ótimo isolamento acústico. Ideal para o seu dia a dia!</p>

  <h3>Bluetooth de última geração</h3>

  <p>Com a versão bluetooth 5.0 você poderá obter velocidades de transmissão de até 2,2 Mbps de dados.</p>

  <h3>Ouça em mais de um dispositivo</h3>

  <p>Com o seu modo duplo você terá a capacidade de reproduzir áudio ao mesmo tempo em dois dispositivos diferentes.</p>

</section>
  • Se nossos benefícios cumpriram bem seu papel, nosso usuário estará mais inclinado a fazer o pedido, então adicionaremos outro CTA logo abaixo dos benefícios.
<section id="ctaContainer">
  <a href=#>Saiba mais</a>
  <button id="callToAction">
    <a href="#">Compre Agora</a>
  </button>
</section>

Passo 5: Adicionando a Prova Social

  • Esta seção tem como objetivo trazer confiança ao cliente por meio de aprovação social. Exemplo: avaliações de outros clientes.
  • Neste exemplo faremos a prova social utilizando um argumento de autoridade:
<section id="provaSocial">
  <span>
    Eleito pelos produtores musicais do portal Sound Big como melhor custo-benefício do mercado.
    <a href="#">Saiba mais.</a>
  </span>
</section>

Ótimo! Agora temos todos os elementos essenciais em uma Landing Page. :grinning:
Publique a página extra recém criada navegando até o botão ‘Publicar’, localizado na parte superior da página. Clique nele e verá a opção ‘Publicar agora’. Você deve clicar nela também.
image

Aguarde o deploy alguns segundos e sua página deverá estar disponível em https://<seu-domínio>/pages/<nome-da-sua-página>

Porém, nosso trabalho ainda não está finalizado…

Passo 6: Adicionando estilos à página.

  • Volte à página principal do seu admin e navegue até a opção ‘Layout’ na seção ‘Coleções’.
    image

  • Escolha a opção ‘Inserir código’.

  • Navegue até a seção ‘CSS CUSTOMIZADO (OPCIONAL)’.
    image

  • No campo de texto, cole o código abaixo. Fique à vontade para substituir as cores que desejar.

#proposta {
  position: absolute;
  margin-left: 8%;
  max-width: 350px;
  margin-top:5%;
}

#propostaTitle,
#propostaSubtitle {
  text-shadow: 1px 1px white;
}

#callToAction {
  background-color: var(--green);
  border: 1px solid var(--green);
  margin: 25px auto auto 0;
  min-width:150px;
  padding: 10px;
}

#callToAction a {
  color: var(--primary-yiq);
}

#callToAction:hover {
    background-color: var(--white);
}

#callToAction:hover a {
    color: var(--green);
}

#beneficios {
  padding: 30px 20px;
  background-color: var(--primary);
  color: var(--primary-yiq);
}

#beneficios p:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid #C8C8C8;

}

#ctaContainer {
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#ctaContainer button {
  margin: 10px 0 20px 0;
}

#provaSocial {
  padding: 30px 20px;
  background-color: #C8C8C8;
  font-size: 22px;
}

#provaSocial a {
  color: indigo;
  text-decoration: underline;
}

@media(max-width: 575px) {
  #cabecalho img {
    content: url('https://c.mlcdn.com.br/800x600/portaldalu/fotosconteudo/101641.jpg');
    width: 100%;
  }
}

@media(min-width:575px) and (max-width: 991px) {
    #proposta .cta-container {
        display:flex;
        margin-top: 0;
        gap: 10px;
    }
    #callToAction {
        margin-bottom: 12px;
        margin-top: auto;
    }
}
  • Navegue novamente até o botão ‘Publicar’ e clique em ‘Publicar agora’. Em segida, aguarde pelo deploy por alguns segundos.

Agora sim! Nossa Landing Page está pronta! :tada:
Eis o nosso resultado:
lp-gif

Bom, é isso! Agora que você já sabe como criar Landing Pages, use toda a sua criatividade e impressione seus clientes!
Espero que o conteúdo tenha sido útil. Até mais! :wink:

6 curtidas

Boaaaa :clap: :clap: :clap: :clap: :clap:

1 curtida