Como criar um modelo de página de produto inspirado na estética japonesa com Divi

Publicados: 2019-11-21

Você está procurando um design de página de produto limpo e minimalista para sua loja online? Hoje temos um design inspirado na estética japonesa. Este é um estilo comum para revistas e sites japoneses mínimos. Facilita a leitura do texto, a visualização dos produtos e não se distrai. Siga o tutorial abaixo para recriar este modelo para seus próprios produtos. Você também poderá baixar o arquivo JSON de modelo gratuitamente!

Vamos lá.

Antevisão

Antes de começar, vamos dar uma olhada na aparência do design em diferentes dispositivos.

Área de Trabalho

Móvel

Baixe o modelo da página do produto GRATUITAMENTE

Para colocar suas mãos no modelo de página de produto gratuito, 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.

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!

1. Adicionar / abrir o produto Woocommerce

Informações do produto

Abra ou crie um novo produto WooCommerce. Para recriar este design de produto inspirado na estética japonesa, você precisará preencher os seguintes detalhes:

Título: Conjunto de Caligrafia
Descrição: Conjunto de caligrafia japonesa com todas as ferramentas de que você precisa para criar belas artes de letras. Tinta da Índia preta, pincel de crina de cavalo, peso de pedra, tigela, tesoura japonesa e papel anti-sangramento.
Preço: 31
Categoria: Materiais de Arte
Imagem em destaque: uma imagem em paisagem do produto.
Galeria: 4 imagens em paisagem nas mesmas dimensões
Atributos: Veja abaixo

A guia de atributos contém as informações para o módulo de informações adicionais woo. Para adicionar essas informações, selecione a guia de atributos e crie um atributo personalizado da seguinte maneira:

O que está incluído:
- 1 escova
- 1 tigela
- 1 frasco de tinta
- 1 tesoura
- 1 River Stone
- 1 resma de papel

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

Quando todos os dados do produto estiverem prontos, habilite o Divi Builder e altere o layout da página para 'largura total'.

Mudar para o Visual Builder

Agora, mude para o construtor visual. Clique no botão que diz 'construir na interface'.

Excluir seção de produto padrão

Como queremos criar esta página de produto do zero, exclua toda a seção padrão. Isso lhe dará uma tela em branco para trabalhar.

2. Recrie o design de estilo japonês

Adicionar nova seção

Vamos começar a recriar a página de produtos estéticos japoneses! Adicione uma nova seção regular.

Fundo

Abra as configurações da seção e altere a cor de fundo.

Cor de fundo: cinza muito claro # f2f2f2

Dimensionamento

Em seguida, ajuste o tamanho.

Largura: 100%
Largura máxima: 100%

Espaçamento

Então, os valores de espaçamento são os seguintes:

Enchimento superior:
- Desktop: 0vw
- Tablet + telefone: 2vw
Preenchimento inferior:
- Desktop + Tablet: 2vw

Adicionar 1ª linha

Estrutura da Coluna

Adicione uma nova linha e selecione a seguinte estrutura de coluna:

Dimensionamento

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

Largura:
- Desktop: 80%
- Tablet + telefone: 63%

Espaçamento

Além disso, ajuste os valores de espaçamento.

Margem superior + inferior: 0vw
Preenchimento superior + inferior: 0vw

Adicionar Módulo Woo Breadcrumb

Contente

Agora, adicione o primeiro módulo; a migalha de pão woo.

Produto: Este produto

Texto

Na guia de design, defina o estilo do texto da seguinte maneira:

Fonte: Duru Sans
Estilo da fonte: TT
Cor: Preto # 000000
Tamanho:
- Desktop: 0.7vw
- Tablet: 1,5vw
- Telefone: 1.7vw
Espaçamento entre letras: 2px

Dimensionamento

Em seguida, ajuste o tamanho.

Largura: 100%

Espaçamento

Finalmente, ajuste o espaçamento.

Margem superior:
- Desktop: 3em
- Tablet + telefone: 0em
Margem inferior:
- Desktop + Tablet: 1em
- Telefone: 0em
Preenchimento superior + inferior: 1em
Preenchimento esquerdo: 2em

Adicionar 2ª linha

Estrutura da Coluna

Adicione uma segunda linha usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere a largura em diferentes tamanhos de tela.

Largura:
- Desktop: 80%
- Tablet + telefone: 65%

Espaçamento

Ajuste o espaçamento também.

Enchimento superior: 0vw