Como criar uma página de produto limpa e ousada com os módulos WooCommerce da Divi (download grátis!)

As páginas de produtos em negrito têm uma maneira especial de chamar a atenção dos visitantes. E com a nova atualização dos Módulos WooCommerce da Divi, você pode rapidamente transformar sua página de produto antiga em uma página limpa e ousada que você e seus visitantes irão adorar. No tutorial de hoje, recriaremos uma página de produto ousada do zero e você também poderá baixar o arquivo JSON gratuitamente! Este tutorial mostra como os novos Módulos WooCommerce da Divi são versáteis e como você pode criar um site de comércio eletrônico altamente profissional em nenhum momento.

Vamos lá!

Antevisão

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

Baixe o layout da página do produto Clean & Bold GRATUITAMENTE

Para colocar suas mãos no layout da página do produto livre hero clean & bold, primeiro você precisa baixá-lo 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!

Inscreva-se no nosso canal no Youtube

1. Adicionar / abrir produto WooCommerce

Detalhes do produto

Abra um produto existente ou crie um novo. Se você deseja obter exatamente o mesmo resultado mostrado na visualização desta postagem, certifique-se de adicionar os seguintes detalhes do produto:

• Título
• Pequena descrição
• longa descrição
• Categoria
• Imagem em destaque
• Preço

Ativar Divi Builder e modificar as configurações da página do produto

Depois de preencher os detalhes do produto, habilite Divi e mude o layout da página para 'Fullwidth'.

Mudar para o Visual Builder

Continue alternando para o Visual Builder.

Remover seção do produto original na página

Lá, você verá as informações da página do produto original reunidas em uma única seção. Vamos recriar nosso design limpo e arrojado do zero, então sinta-se à vontade para excluir esta seção.

2. Crie uma página de produto limpa e ousada usando o Visual Builder da Divi

Adicionar Seção Regular # 1

Espaçamento

É hora de começar a criar nossa página de produtos ousada! Adicione uma nova seção regular e altere as configurações de espaçamento da seção.

• Preenchimento superior: 200px
• Preenchimento inferior: 0 px

Transbordamentos

Para garantir que nada exceda o contêiner da seção e nenhuma rolagem horizontal ocorra na página, oculte os estouros da seção nas configurações de visibilidade.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar linha

Estrutura da Coluna

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

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo da linha.

• Cor de fundo: # f4f4f4

Dimensionamento

Modifique a largura máxima da linha também.

• Largura máxima: 1000px

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione um pouco de preenchimento personalizado superior e inferior.

• Enchimento superior: 150px
• Preenchimento inferior: 150 px

Fronteira

Estamos adicionando um raio de borda de '50px' aos cantos superior esquerdo e direito da linha também.

Transbordamentos

Conclua as configurações da linha tornando os transbordamentos visíveis.

• Excesso horizontal: visível
• Estouro vertical: visível

Adicionar Módulo Woo Breadcrumb à Coluna

Conteúdo Dinâmico

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos é o Módulo Woo Breadcrumb.

• Produto: Este produto

Configurações de texto

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

• Fonte do texto: texto carmesim
• Peso da fonte do texto: negrito
• Estilo da fonte do texto: maiúsculas
• Tamanho do texto: 20px
• Espaçamento entre letras do texto: 4px

Configurações de texto de link

Também faz algumas alterações nas configurações de texto do link.

• Peso da fonte do link: leve
• Cor do texto do link: # e02b20

Espaçamento

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

• Margem inferior: 80px
• Margem esquerda: 50 px (desktop e tablet), 20 px (telefone)
• Margem direita: 50 px (desktop e tablet), 20 px (telefone)

Adicionar Módulo de Título Woo à Coluna

Conteúdo Dinâmico

O próximo e último módulo de que precisamos nesta coluna é o Módulo Woo Title.

• Produto: Este produto

Configurações de texto do título

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

• Fonte do título: Montserrat
• Peso da fonte do título: pesado
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: # 000000
• Tamanho do texto do título: 250 px (desktop), 150 px (tablet), 80 px (telefone)
• Altura da linha do título: 0,9em

Espaçamento

Aumente a largura do módulo adicionando alguma margem esquerda e direita negativa.

• Margem esquerda: -150 px (desktop), -100 px (tablet), -50 px (telefone)
• Margem direita: -150 px (desktop), -100 px (tablet), -50 px (telefone)

Adicionar Seção Regular # 2

Espaçamento

Adicione outra seção logo abaixo da anterior. Modifique os valores de preenchimento da seção da seguinte maneira:

• Preenchimento superior: 0 px
• Preenchimento inferior: 200 px

Adicionar linha

Estrutura da Coluna

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

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo da linha.

• Cor de fundo: # f4f4f4

Dimensionamento

Aumente a largura máxima da linha a seguir.

• Largura máxima: 1000px

Espaçamento

Adicione um pouco de preenchimento de fundo personalizado também.

• Preenchimento inferior: 150 px

Fronteira

Em seguida, vá para as configurações de borda e aplique o raio de borda '50px' aos cantos esquerdo e direito inferiores.

Transbordamentos

Conclua as configurações da linha, certificando-se de que os transbordamentos sejam visíveis.

• Excesso horizontal: visível
• Estouro vertical: visível

Configurações da coluna 1

Imagem Dinâmica de Fundo

Depois de concluir as configurações gerais da linha, abra as configurações da coluna 1 e adicione a imagem em destaque do produto ao plano de fundo usando conteúdo dinâmico.

• Imagem de fundo: imagem em destaque

Espaçamento

Adicione um pouco de preenchimento inferior à próxima coluna. Isso permitirá que a imagem de fundo apareça.

• Preenchimento inferior: 370 px (desktop), 690 px (tablet), 380 px (telefone)

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Na coluna 1, o único módulo de que precisamos é um Módulo de Texto. Adicione algum conteúdo de sua escolha.

Cor de fundo

Em seguida, altere a cor de fundo do módulo.

• Cor de fundo: # E02B20

Configurações de texto

Vá para a guia de design e modifique as configurações de texto.

• Fonte do texto: Montserrat
• Peso da fonte do texto: ultra negrito
• Alinhamento de Texto: Centro
• Cor do texto: #FFFFFF
• Tamanho do texto: 30px
• Altura da linha de texto: 1em

Dimensionamento

Reduza o tamanho do módulo nas configurações de dimensionamento a seguir.

• Largura: 280px

Espaçamento

E transforme o módulo em um quadrado adicionando alguns valores de preenchimento personalizados. Também estamos criando uma sobreposição superior e esquerda usando margem negativa.

• Margem superior: -120px
• Margem esquerda: -120px
• Enchimento superior: 110 px
• Preenchimento inferior: 110 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Fronteira

Para transformar o quadrado em um círculo, adicionaremos um raio de borda de '500px' a cada um dos cantos do módulo.

Transformar, girar

Vamos girar o módulo também.

• Esquerda: 330deg

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo H2

Vamos para a segunda coluna! Lá, o primeiro módulo de que precisamos é um Módulo de texto normal. Insira algum conteúdo H2 de sua escolha.

Configurações de texto H2

Vá para a guia de design e altere as configurações de texto H2 da seguinte forma:

• Fonte do título 2: Montserrat
• Tamanho do texto do título 2: 35px

Espaçamento

Adicione alguns valores de margem personalizados a seguir.

• Margem superior: -70 px (desktop), 100 px (tablet e telefone)
• Margem esquerda: 100 px (desktop), 20 px (tablet e telefone)
• Margem direita: 20 px (tablet e telefone)

Adicionar Módulo de Descrição Woo à Coluna 2

Conteúdo Dinâmico

O segundo módulo de que precisamos na coluna 2 é o Módulo de Descrição Woo.

• Produto: Este produto
• Tipo de descrição: breve descrição

Configurações de texto

Altere as configurações de texto do módulo de acordo:

• Fonte do texto: texto carmesim
• Tamanho do texto: 19px
• Altura da linha de texto: 1.8em
• Alinhamento de Texto: Justificar

Espaçamento

Modifique os valores de espaçamento do módulo a seguir.

• Margem inferior: 50px
• Margem esquerda: 100px (desktop), 20px (tablet e telefone)
• Margem direita: -100 px (desktop), 20 px (tablet e telefone)

Adicionar Módulo de Preço Woo à Coluna 2

Conteúdo Dinâmico

Passe para o próximo módulo, que é o Módulo Woo Price.

• Produto: Este produto

Configurações de texto de preço

Altere as configurações de texto de preço da seguinte forma:

• Fonte de preço: Montserrat
• Peso da fonte de preço: pesado
• Cor do texto do preço: # 000000
• Tamanho do texto do preço: 50px

Espaçamento

Altere as configurações de espaçamento a seguir.

• Margem inferior: 50px
• Margem esquerda: 100 px (desktop), 20 px (tablet e telefone)
• Margem direita: 20 px (tablet e telefone)

Adicionar Woo Adicionar ao Módulo do Carrinho à Coluna 2

Conteúdo Dinâmico

O próximo e último módulo de que precisamos para concluir este design é o Módulo Woo Add To Cart.

• Produto: Este produto

Configurações de texto

Altere a fonte do texto nas configurações de texto.

• Fonte do texto: Montserrat

Configurações de campos

Modifique as configurações dos campos a seguir.

• Cor de fundo do campo: #ffffff
• Cor do texto dos campos: # 000000
• Enchimento superior: 66px
• Preenchimento inferior: 66 px
• Fonte dos Campos: Montserrat
• Peso da fonte dos campos: pesado

• Todos os cantos: 5px
• Largura da borda inferior dos campos: 3px
• Cor da borda dos campos: # e02b20

Configurações de botão

Continue definindo o estilo do botão.

• Use estilos personalizados para botão: Sim
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # E02B20
• Largura da borda do botão: 0 px

• Raio da borda do botão: 5px
• Fonte do botão: Montserrat
• Peso da fonte do botão: ultra negrito
• Estilo da fonte do botão: maiúscula

• Enchimento superior: 50 px
• Preenchimento inferior: 50 px
• Preenchimento esquerdo: 100 px (desktop), 50 px (tablet), 20 px (telefone)
• Preenchimento direito: 100 px (desktop), 50 px (tablet), 20 px (telefone)
• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.3)

Espaçamento

Conclua o design do módulo adicionando alguns valores de margem esquerda e direita em tamanhos de tela menores e pronto!

• Margem esquerda: 20 px (tablet e telefone)
• Margem direita: 20 px (tablet e telefone)

Antevisão

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

Pensamentos finais

Neste artigo, mostramos como criar uma página de produto impressionante e arrojada com uma aparência limpa usando os novos Módulos WooCommerce da Divi. As páginas de produtos em negrito têm uma maneira única de colocar seu produto em destaque. Você também conseguiu baixar o arquivo JSON gratuitamente! 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.