Como apresentar produtos populares de maneira criativa na página inicial da Divi

Ao mostrar produtos populares em uma página de destino, não é importante apenas escolher os produtos certos, mas também exibi-los de maneira atraente. Com os novos Módulos WooCommerce da Divi, inúmeras novas possibilidades de design caíram em nosso colo. Para ajudá-lo a se inspirar, recriaremos um design de produto popular bonito e elegante que você pode usar em sua próxima página de destino Divi. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Estático

Flutuar

Móvel

Baixe o layout de produtos populares GRATUITAMENTE

Para colocar as mãos no layout de produtos populares gratuitos, 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!

Vamos começar a recriar!

Adicionar nova seção

Espaçamento

Comece adicionando uma seção regular a uma nova página ou a uma existente. Abra as configurações da seção e ajuste os valores de preenchimento superior e inferior de acordo:

• Acolchoamento superior: 8vw
• Preenchimento inferior: 8vw

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento da linha.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 85vw
• Largura máxima: 100%

Adicionar módulo de imagem Woo à coluna

Conteúdo Dinâmico

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos é o Módulo Woo Image. Selecione o produto que deseja exibir.

Imagem

Vá para a guia de design e altere as configurações de imagem.

• Cantos arredondados da imagem: 20 px (todos os cantos)

• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar Módulo de Título Woo à Coluna

Conteúdo Dinâmico

O próximo módulo de que precisamos é o Módulo Woo Title. Selecione um produto de sua preferência.

Configurações de texto do título

Modifique as configurações de texto do título do módulo da seguinte maneira:

• Nível do título do título: H3
• Fonte do Título: Prata
• Tamanho do texto do título: 3vw (desktop), 5vw (tablet), 7vw (telefone)

Espaçamento

Conclua as configurações do módulo adicionando alguns valores de margem personalizados em diferentes tamanhos de tela.

• Margem superior: 7vw (desktop), 14vw (tablet e telefone)
• Margem inferior: 2vw (desktop), 4vw (tablet e telefone)
• Margem esquerda: 2vw (desktop), 5vw (tablet e telefone)
• Margem direita: 2vw (desktop), 5vw (tablet e telefone)

Adicionar módulo de descrição Woo à coluna

Conteúdo Dinâmico

Passe para o próximo módulo, que é o Módulo de Descrição Woo. Selecione um produto de sua preferência.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Fonte do texto: Montserrat
• Tamanho do texto: 0.8vw (desktop), 1.6vw (tablet), 2vw (telefone)
• Altura da linha de texto: 1.8em

Espaçamento

Brinque com os valores de margem personalizados em diferentes tamanhos de tela também.

• Margem superior: 2vw (desktop), 4vw (tablet e telefone)
• Margem inferior: 2vw (desktop), 4vw (tablet e telefone)
• Margem esquerda: 2vw (desktop), 5vw (tablet e telefone)
• Margem direita: 2vw (desktop), 5vw (tablet e telefone)

Adicionar Woo Adicionar ao módulo do carrinho à coluna

Conteúdo Dinâmico

Logo abaixo do Módulo de descrição Woo, adicionaremos um módulo Woo Adicionar ao carrinho. Selecione um produto de sua preferência.

Configurações de campos padrão

Vá para a guia de design do módulo e altere as configurações dos campos da seguinte forma:

• Cor de fundo dos campos: #ffffff
• Cor do texto dos campos: # 3d3d3d
• Fonte dos Campos: Montserrat

• Largura da borda dos campos: 0 px
• Cor da borda dos campos: # 3d3d3d

Configurações de campos de focalização

Modifique a largura da borda ao pairar.

• Largura da borda dos campos: 1px

Configurações de botão padrão

Abra as configurações do botão a seguir e defina o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 3vw (tablet), 4vw (telefone)
• Cor do texto do botão: # 3d3d3d
• Cor de fundo do botão: #FFFFFF
• Largura da borda do botão: 0 px
• Cor da borda do botão: # 3d3d3d

• Fonte do botão: Prata

• Preenchimento superior: 0,5vw
• Preenchimento inferior: 0,5vw
• Preenchimento esquerdo: 2vw
• Preenchimento direito: 2vw

Configurações do botão de foco

Altere a largura da borda do botão ao pairar.

• Largura da borda do botão: 1 px

Espaçamento

Em seguida, vá para o espaçamento e adicione alguns valores de margem personalizados em diferentes tamanhos de tela.

• Margem inferior: 7vw (desktop), 14vw (tablet e telefone)
• Margem esquerda: 2vw (desktop), 5vw (tablet e telefone)
• Margem direita: 2vw (desktop), 5vw (tablet e telefone)

Configurações de borda padrão

Modifique as configurações de borda do módulo também.

• Largura da borda inferior: 1 px
• Cor da borda inferior: # 3d3d3d

Configurações de borda flutuante

E remova a largura da borda ao pairar.

• Largura da borda inferior: 0 px

Adicionar Módulo de Preço Woo à Coluna

Conteúdo Dinâmico

O último módulo de que precisamos na coluna é um Módulo Woo Price. Selecione um produto de sua preferência.

Configurações de texto do título

Vá para a guia de design do módulo e altere as configurações de texto de preço de acordo:

• Fonte do texto do preço: Montserrat
• Peso da fonte do texto do preço: leve
• Cor do texto do preço: # 333333
• Tamanho do texto de preço: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Altura da linha de preço: 1.8em

Espaçamento

Modifique os valores da margem também.

• Margem inferior: 5vw
• Margem esquerda: 2vw (desktop), 5vw (tablet e telefone)
• Margem direita: 2vw (desktop), 5vw (tablet e telefone)

Clonar coluna duas vezes

Depois de concluir a coluna e todos os módulos nela, você pode clonar a coluna inteira duas vezes.

Alterar estrutura da coluna da linha

Altere a seguir a estrutura da coluna da linha.

Alterar todo o conteúdo dinâmico

Continue alterando todo o conteúdo dinâmico nas colunas 2 e 3 para outros produtos de sua escolha.

Alterar o espaçamento do módulo da coluna 2

Woo Title Module

Os módulos da segunda coluna precisam de algumas alterações de espaçamento adicionais. Comece com o Módulo Woo Title.

• Margem esquerda: 5vw (todos os dispositivos)
• Margem direita: 5vw (todos os dispositivos)

Módulo de descrição Woo

Altere as configurações de espaçamento do Módulo de descrição Woo a seguir.

• Margem superior: 4vw (todos os dispositivos)
• Margem inferior: 4vw (todos os dispositivos)
• Margem esquerda: 5vw (todos os dispositivos)
• Margem direita: 5vw (todos os dispositivos

Woo Adicionar ao Módulo do Carrinho

Passe para as configurações de espaçamento do Módulo Woo Add To Cart.

• Margem esquerda: 5vw (todos os dispositivos)
• Margem direita: 5vw (todos os dispositivos)

Woo Price Module

E complete os módulos da coluna 2 modificando também as configurações de espaçamento do Módulo Woo Price.

• Margem esquerda: 5vw (todos os dispositivos)
• Margem direita: 5vw (todos os dispositivos)

Estilos de coluna

Todas as colunas

Cor de fundo

Agora que temos todos os nossos módulos no lugar, podemos começar a estilizar as colunas. Cada uma das colunas precisa de uma cor de fundo branca.

• Cor de fundo: #ffffff

Fronteira

Você também pode adicionar '20px' aos cantos de cada coluna.

• Cantos arredondados: 20 px (todos os cantos)

Coluna 1 e 3

Sombra de caixa padrão

Continue adicionando uma sombra de caixa padrão às colunas 1 e 3.

• Posição vertical da sombra da caixa: 22 px
• Força do borrão da sombra da caixa: 150 px
• Cor da sombra: rgba (0,0,0,0) (desktop), rgba (0,0,0,0.1) (tablet e telefone)

Hover Box Shadow

Altere a cor da sombra flutuante ao pairar.

• Cor da sombra: rgba (0,0,0,0.27)

Filtros padrão

Em seguida, vá para as configurações de filtros e adicione um pouco de desfoque às colunas 1 e 3.

• Desfoque: 4px (desktop), 0px (tablet e telefone)

Filtros Hover

Remova o desfoque ao passar o mouse.

• Desfoque: 0px

Índice Z padrão

Atribua o mesmo valor de índice z padrão às próximas colunas.

• Índice Z: 9

Hover Z index

E aumente o mesmo índice z ao pairar.

• Índice Z: 12

Coluna 1 apenas

Transformar Traduzir

Continue alterando a posição da coluna 1 usando a opção de conversão de transformação.

• À direita: 7vw (desktop), 0vw (tablet e telefone)
• Parte inferior: 2vw (desktop), 0vw (tablet e telefone)

Coluna 3 Apenas

Transformar Traduzir

Abra as configurações de transformação da coluna 3 a seguir e aplique as seguintes configurações:

• À direita: 7vw (desktop), 0vw (tablet e telefone)
• Parte inferior: -2vw (desktop), 0vw (tablet e telefone)

Coluna 2 Apenas

Sombra da caixa

Passe para as configurações da coluna 2 e aplique uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 22 px
• Força do desfoque de sombra da caixa: 150 px
• Cor da sombra: rgba (0,0,0,0.27) (Desktop), rgba (0,0,0,0.1) (tablet e telefone)

Índice Z

Por último, mas não menos importante, altere o índice z da segunda coluna e pronto!

• Índice Z: 11

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Estático

Flutuar

Móvel

Pensamentos finais

Nesta postagem, mostramos como apresentar produtos populares de maneira elegante em sua página de destino Divi. Mostramos a você, passo a passo, como criar um belo resultado usando apenas as opções integradas do Divi. Este exemplo de design mostra como os novos módulos WooCommerce da Divi são versáteis e como você pode criar um design incrível para a Web de comércio eletrônico em um piscar de olhos. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.