Como projetar barras adesivas para páginas de produtos com os módulos Woo da Divi

Publicados: 2019-10-16

Barras adesivas continuam a ser um elemento popular em web design. Eles são ótimos para aumentar as conversões, mantendo os CTAs na vanguarda, sem serem tão intrusivos quanto os pop-ups.

Neste caso de uso, vamos projetar uma barra adesiva para produtos WooCommerce usando os Módulos Woo da Divi. A barra adesiva pode incluir qualquer módulo Divi. Para este tutorial, vamos criar uma barra adesiva que inclui o botão “Adicionar ao carrinho” para que permaneça visível enquanto o usuário rola a página para baixo. Além disso, também criaremos uma barra de notificação adesiva do carrinho para que os usuários sempre vejam o botão “ver carrinho” assim que o botão “Adicionar ao carrinho” for clicado.

Esses elementos de barra pegajosa ajudarão a impulsionar as conversões, mantendo esses CTAs cruciais em vista.

Vamos começar!

Espiada

Aqui está uma rápida olhada no que estaremos projetando neste tutorial de caso de uso.

Baixe o layout das barras adesivas GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos
Download de graça

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

  1. Se ainda não o fez, instale e ative o Divi Theme instalado (ou o Divi Builder Plugin se não estiver usando o Divi Theme).
  2. Instale e ative o plugin WooCommerce. Se for a primeira vez que configura o WooCommerce, você precisará executar o assistente de configuração básica para preparar sua loja. Uma vez feito isso, você está pronto para adicionar seus novos produtos.
  3. Crie alguns produtos, se ainda não tiver nenhum. Para mais informações sobre como adicionar um novo produto, confira este tutorial.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Parte 1: Projetando a barra adesiva em uma página de produto

Vamos usar um produto simulado simples para este exemplo, então você precisa criar um novo produto ou editar um produto existente. As informações do produto não são importantes para este tutorial, apenas certifique-se de ter o básico, como título do produto, preço, descrição, imagem, etc ...

Depois de ter um produto simples pronto, clique para editar o produto no back-end e implantar o Divi Builder na página do produto. Em Divi Page Settings, selecione “Fullwidth” para o Layout da página e clique em “Build On the Front End”.

A página do produto deve ser semelhante a esta.

Na primeira linha que contém as migalhas de pão e o aviso do carrinho, adicione uma nova linha com um layout de uma coluna.

Configurações de linha

Antes de adicionar qualquer módulo, atualize as configurações de linha da seguinte forma:

  • Cor de fundo: # 333333
  • Usar largura de calha personalizada: SIM
  • Largura da calha: 1
  • Largura: 100%
  • Preenchimento: 0 px superior, 0 px inferior

Tornando a fileira pegajosa

Para tornar a linha fixa, adicione o seguinte CSS personalizado ao elemento principal para área de trabalho: 

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

Em seguida, adicione o seguinte CSS ao mesmo elemento principal para a tela do tablet: 

top: 0px;

Se você não está familiarizado com a propriedade css “position: sticky”, basicamente é uma espécie de mistura entre a posição fixa e a posição relativa onde o elemento (neste caso a linha) irá rolar junto com seu contêiner até atingir uma posição designada na parte superior ou inferior da página (ou o deslocamento especificado). Neste exemplo, estamos configurando o deslocamento para 50px da parte superior da janela do navegador (deixando espaço para a altura de um cabeçalho fixo padrão na área de trabalho). Em seguida, no tablet, o deslocamento é alterado para “superior: 0px” a fim de corrigir a linha / barra adesiva na parte superior do navegador no celular.

NOTA: Ignore os erros que você vê ao adicionar o CSS à caixa. O código funcionará bem.

Depois de usar o CSS, atualize o Índice Z da seguinte maneira:

  • Índice Z: 10

Agora a linha ficará fixa conforme o usuário rola a página do produto para baixo.

CSS personalizado da coluna

Antes de começarmos a preencher a linha com conteúdo, precisamos ter certeza de que o módulo dentro de nossa linha de uma coluna será alinhado horizontalmente em vez de verticalmente. Podemos usar um truque simples de CSS para fazer isso com a propriedade flex. Abra as configurações da coluna e adicione o seguinte CSS personalizado ao elemento principal: 

display:flex;
align-items:center;

Isso cuida do nosso design de linha aderente. Agora, precisamos preencher a linha com algum conteúdo.

Adicionar Woo Título

Adicione um novo Módulo de Título Woo à coluna da linha fixa.

Em seguida, atualize as configurações da seguinte forma:

  • Cor do texto do título: #ffffff
  • Tamanho do texto do título: 28 px (desktop), 20 px (tablet), 16 px (telefone)
  • Largura: 30%
  • Preenchimento: 2vw superior, 2vw inferior, 2vw esquerdo, 2vw direito

Adicionar preço Woo

Em seguida, adicione um módulo de preço woo clicando no ícone de adição cinza que aparece ao passar o mouse sobre o módulo de título woo que você acabou de criar.

Em seguida, atualize as configurações de preço Woo da seguinte forma:

  • Tamanho do texto de preço: 28 px (desktop), 20 px (tablet), 16 px (telefone)
  • Largura: 30%
  • Preenchimento: 2vw superior, 2vw inferior, 2vw esquerdo, 2vw direito
  • Largura da borda direita: 1px
  • Cor da borda direita: # 777777
  • Largura da borda esquerda: 1px
  • Cor da borda esquerda: # 777777

Adicionar módulo Woo Adicionar ao carrinho

Para a última parte do conteúdo, adicione um Módulo Woo Add to Cart logo após o módulo Woo Price.

Em seguida, atualize as configurações da seguinte forma:

Simplifique o elemento Adicionar ao carrinho, ocultando a quantidade de estoque e o campo de quantidade no celular.

  • Mostrar campo de quantidade: DESLIGADO (tablet)
  • Mostrar estoque: DESLIGADO

  • Alinhamento de Texto: Direito
  • Use estilos personalizados para botão: SIM
  • Tamanho do texto do botão: 18 px (tablet), 14 px (telefone)
  • Cor do texto do botão: #ffffff
  • Cor de fundo do botão: # 7ac5af
  • Largura da borda do botão: 0 px

  • Largura: 40%
  • Preenchimento: 2vw à esquerda, 2vw à direita

Resultado

Agora vamos verificar como fica na página ao vivo.

E aqui está no celular.

Parte 2: Criando uma barra fixa de aviso de carrinho

A criação de uma barra adesiva de aviso de carrinho envolve apenas algumas etapas simples, mas o resultado pode ser extremamente eficaz. Como você já deve saber, o aviso do carrinho só aparece depois que um usuário clica no botão “Adicionar ao carrinho”. Mas é a próxima etapa crucial no processo de compra que leva os usuários à página de checkout. Portanto, quando o aviso do carrinho aparece como uma barra adesiva na parte inferior da janela, é mais perceptível para o usuário.

Para criar a barra adesiva de aviso do carrinho, primeiro crie uma nova linha de uma coluna na parte inferior da página do produto. Em seguida, atualize as configurações de linha da seguinte forma:

  • Largura: 100%
  • Preenchimento: 0 px superior, 0 px inferior

Em seguida, torne a linha fixa adicionando o seguinte CSS personalizado ao elemento principal: 

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

NOTA: Como fizemos anteriormente, você pode ignorar os erros que aparecem ao adicionar a propriedade position: sticky.

Isso fará com que a linha se fixe na parte inferior da janela ao rolar para cima.

Em seguida, atualize o índice z para mantê-lo na vanguarda da seguinte forma:

  • Índice Z: 10

Adicione o Módulo de Notificação do Carrinho

Depois de criar a linha, adicione o Woo Cart Notice Module à linha e atualize as configurações da seguinte forma:

  • Tamanho do texto do texto (telefone): 15px
  • Margem: 0em inferior

É isso! Depende de você se deseja ou não apagar o elemento de aviso do carrinho padrão na parte superior da página, mas pode ser uma boa ideia deixá-lo para melhores conversões.

Resultado final

Aqui está o resultado final com as duas barras adesivas no lugar.

Área de Trabalho

Móvel

Pensamentos finais

Esperamos que esta postagem nos ajude a entender como criar barras adesivas para as páginas de nossos produtos no Divi. Abordamos como criar uma barra adesiva que inclui um título de produto, preço e botão adicionar ao carrinho. E também mostramos como criar uma barra adesiva de aviso de carrinho. Ambos devem ajudar no processo de compra e aumentar as conversões. E nem precisamos de um plugin!

Sinta-se à vontade para explorar novas maneiras de usar as barras adesivas da página do produto em seu próprio site.

Estamos ansiosos para ouvir de você nos comentários.

Saúde!