Como adicionar imagens adesivas de produtos ao modelo de página de seu produto Divi

Quando se trata de comprar produtos online, ótimas imagens do produto são essenciais para fechar a venda. É por isso que a maioria das páginas de produtos tem essas imagens no topo da página, então é a primeira coisa que os compradores veem. No entanto, conforme o usuário rola a página para baixo para ver mais informações sobre o produto (descrições, análises, etc.), a imagem principal do produto não está mais à vista. Uma maneira de manter essas imagens de produto em exibição é adicionar uma imagem de produto pegajosa que permanece à vista enquanto um comprador potencial navega pelas informações do produto.

Neste tutorial, mostraremos como adicionar imagens adesivas de produtos ao modelo de página de seu produto Divi. Para fazer isso, podemos otimizar o módulo de imagem do produto WooCommerce da Divi para ser exibido e colado no topo da página exatamente quando a imagem original do produto sai de vista.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

Baixe o Layout 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

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.

DOWNLOAD

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!

https://youtu.be/vwfPFqyVaNM

Inscreva-se no nosso canal no Youtube

Como fazer o upload do modelo

Vá para Divi Theme Builder

Para fazer o upload do modelo, navegue até o Divi Theme Builder no backend do seu site WordPress.

Carregar modelo de site

Então, no canto superior direito, você verá um ícone com duas setas. Clique no ícone.

Navegue até a aba de importação, carregue o arquivo JSON que você conseguiu baixar neste post e clique em 'Importar Divi Theme Builder Templates'.

Salvar alterações do Divi Theme Builder

Depois de carregar o arquivo, você notará um novo modelo com uma nova área do corpo que foi atribuída a Todas as postagens. Salve as alterações do Divi Theme Builder assim que quiser que o modelo seja ativado.

Vamos para o tutorial para que possamos aprender a construir isso do zero, certo?

Como adicionar imagens adesivas de produtos ao modelo de página de seu produto Divi

Fazendo upload do modelo de página do produto Theme Builder Pack 5

Para começar, daremos um salto inicial no design adicionando um de nossos modelos de página de produto predefinidos. Para importar o modelo do Theme Builder, você precisará fazer o seguinte:

1. Navegue até o Divi Theme Builder
2. Clique no ícone de portabilidade no canto superior direito da página.
3. Selecione a guia Importar no pop-up Portabilidade.
4. Baixe e importe o arquivo de modelo do produto Divi Divi Theme Builder 5. Depois de baixar o pacote aqui, descompacte o arquivo e você encontrará o arquivo “divi-theme-builder-pack-5-product-page-template.json” que precisará importar.
5. Clique no botão Importar
6. Depois de importar o modelo, clique no ícone de edição na área personalizada do corpo do modelo para editar o layout do modelo.

Adicionar uma nova linha

Queremos que a imagem do produto seja exibida depois que o usuário tiver passado da seção superior que já inclui a imagem do produto (não há necessidade de mostrá-la lá). Portanto, vamos adicioná-lo a uma nova seção na seção superior do layout.

Vá em frente e adicione uma nova seção regular na seção superior.

Abra as configurações da nova seção e atualize o preenchimento:

• Preenchimento: 0 px superior, 0 px inferior

Vá para a guia avançada e atualize o índice z:

• Índice Z: 13

Isso ocorre para que a imagem (o elemento filho desta seção) fique acima das outras seções / elementos na página durante a rolagem.

Adicione a linha

Em seguida, adicione uma linha de uma coluna na seção.

Abra as configurações de linha e ajuste o alinhamento e preenchimento da linha:

• Alinhamento de linha: direita
• Preenchimento: 0 px superior, 0 px inferior

Adicionar imagem do produto

Agora estamos prontos para adicionar a imagem do produto que eventualmente irá aderir ao topo da página na rolagem. Para adicionar a imagem do produto, copie o módulo de imagem do produto existente na seção superior e cole-o em nossa nova linha.

Woo Images Settings

Abra as configurações do novo módulo woo images e ajuste o conteúdo da seguinte maneira:

• Mostrar imagens da galeria: DESLIGADO
• Mostrar selo de venda: DESLIGADO

(OBSERVAÇÃO: você pode manter as imagens da galeria, se desejar. Apenas tome cuidado para não ocupar muito espaço, pois este módulo de imagem ficará pairando sobre outros elementos da página.)

Na guia de design, atualize a opção Forçar largura total para “SIM”.

Em seguida, atualize o seguinte:

• Largura máxima: 300 px (desktop), 200 px (telefone)
• Alinhamento do Módulo: Direito

Para ajustar o preenchimento:

• Preenchimento: 10px superior, 10px direito

Na guia avançado, atualize o seguinte:

• Índice Z: 1
• Posição pegajosa: grudar no topo

Isso fará com que a imagem grude no topo da página assim que o usuário rolar a página.

Uma vez que a posição aderente estiver no lugar, volte para a guia de design e use a opção aderente para atualizar o filtro de opacidade para que ele oculte a imagem até que ela se torne pegajosa. Você pode implantar a opção de estilo aderente passando o mouse sobre a configuração e clicando no ícone de miniatura.

• Opacidade: 0% (desktop), 100% (aderente)

Remova o espaçamento da seção, linha e coluna

No momento, temos alguns espaçamentos indesejados que a imagem do novo produto está usando no fluxo de nosso layout. Para remover esse espaçamento, tudo o que precisamos fazer é dar à coluna um valor de altura personalizado que seja “0” ou algo realmente baixo. A imagem do produto ainda exibirá / transbordará, embora tenha uma coluna sem qualquer altura real.

Abra as configurações de coluna e adicione o seguinte CSS personalizado ao elemento principal:

height: 15px;

É isso! Terminamos.

Resultado final

Confira o resultado final em uma postagem ao vivo em seu site.

Pensamentos finais

Adicionar uma imagem adesiva de produto ao modelo da página do produto no Divi é uma maneira rápida e fácil de manter seus produtos à vista enquanto os visitantes exploram seu produto. E você também pode optar por manter o botão Adicionar ao carrinho ao lado dele usando a mesma técnica. De qualquer forma, espero que isso o ajude em seu próximo projeto.

Estou ansioso para ouvir de você nos comentários.

Saúde!