Como criar um design de bloco responsivo para páginas de produtos Woo com Divi

Publicados: 2019-11-02

Agora que você pode usar os módulos woo no Divi, o único limite é a sua imaginação. Cada módulo woo dinâmico é personalizável como todos os outros módulos dentro do construtor. Nesta postagem, mostraremos como recriar um design de bloco criativo para as páginas de seu produto. Os módulos dinâmicos são agrupados em um conjunto de criativos que se destaca do fundo escuro. Você também pode baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de começar, vamos dar uma olhada no design em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe O Design de Bloco Responsivo GRATUITAMENTE

Para colocar as mãos no design de bloco responsivo gratuito, 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!

Inscreva-se no nosso canal no Youtube

1. Adicionar / abrir produto WooCommerce

Detalhes do produto

Abra um produto existente ou crie um novo. Para recriar este design de estilo de bloco, você precisará preencher as seguintes informações:

  • Título
  • Descrição
  • Preço
  • Categoria
  • Atributos
  • Imagem em destaque

A guia de atributos é de onde as informações para o módulo de informações adicionais woo são retiradas. Para adicionar essas informações, clique na guia de atributos e crie três atributos personalizados da seguinte maneira:

  • Atributos:
    • Capacidade: 250ml / 2 xícaras de chá
    • Material: cobre puro
    • Condição: Desgaste normal e rasgo

A imagem apresentada deve ter a mesma cor de fundo que a cor do desenho.

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

Quando todos os detalhes do produto estiverem preenchidos, vá em frente e habilite o Divi Builder. Altere o layout da página para 'Fullwidth'.

Mudar para o Visual Builder

Continue mudando para o Visual Builder.

Excluir seção de produto padrão

Uma vez que estamos criando uma página de produto personalizada, vá em frente e exclua a seção padrão de woo product.

2. Recrie o projeto de bloco responsivo

Adicionar nova seção

Fundo

A primeira etapa para recriar o design é adicionar uma nova seção. Adicione um fundo gradiente em diferentes tamanhos de tela.

  • Fundo: Gradiente
  • Cor 1: cinza claro # f2f6f5
  • Cor 2: quase preto # 313131
  • Direção:
    • Desktop: 90%
    • Tablet + telefone: 180%
  • Iniciar + Terminar:
    • Desktop: 50%
    • Tablet: 40%
    • Telefone: 30%

Dimensionamento

Ajuste as configurações de dimensionamento da seção.

  • Largura: 100%
  • Largura máxima: 100%

Espaçamento

Remova o preenchimento padrão superior e inferior também.

  • Preenchimento superior + inferior: 0vw

Visibilidade

Finalmente, ajuste os estouros da seção.

  • Excesso vertical + horizontal: oculto

Adicionar linha # 1

Estrutura da Coluna

Depois de configurar a seção, adicione a primeira linha com uma coluna.

Dimensionamento

Na guia de design, ajuste o tamanho para diferentes tamanhos de tela.

  • Largura:
    • Desktop: 50%
    • Tablet + telefone: 100%
  • Largura máxima: 100%
  • Alinhamento de linha: esquerda

Visibilidade

Finalmente, defina o estouro horizontal e vertical para visível.

  • Excesso horizontal + visível: visível

Adicionar Woo Breadcrumb

Contente

Adicione o primeiro módulo, o módulo woo breadcrumb. Selecione 'Este produto'.

  • Produto: Este produto

Texto

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

  • Fonte do Texto: Fenix
  • Cor do Texto: Marrom # 594239
  • Tamanho do texto:
    • Desktop: 1vw
    • Tablet: 2vw
    • Telefone: 3vw

Espaçamento

Adicione alguns valores de espaçamento para diferentes tamanhos de tela.

  • Margem superior: 3vw
  • Margem esquerda:
    • Desktop: 10vw
    • Tablet + telefone: 20vw

Adicionar imagem Woo

Adicionar conteúdo

Agora é hora de adicionar a imagem do produto com um módulo Woo Image. Na guia de conteúdo, escolha 'Este produto'.

  • Produto: Este produto

Dimensionamento

Continue ajustando o tamanho do módulo.

  • Largura: 100%

Visibilidade

Finalmente, esconda o estouro.

  • Excesso horizontal + vertical: oculto

Adicionar linha # 2

Estrutura da Coluna

Adicione uma segunda linha com duas colunas.

Dimensionamento

Primeiro, ajuste o tamanho.

  • Largura da calha: 1
  • Largura:
    • Desktop: 53%
    • Tablet + telefone: 53%
  • Largura máxima: 100%
  • Alinhamento: Direito

Espaçamento

Em seguida, os valores de espaçamento.

  • Margem superior:
    • Desktop: -47vw
    • Tablet + telefone: 0vw
  • Margem esquerda:
    • Tablet: -5vw
    • Telefone: -8vw
  • Preenchimento inferior:
    • Desktop + Tablet: 4.1vw
  • Preenchimento esquerdo:
    • Desktop: 0vw
    • Tablet: 16vw
    • Telefone: 12vw
  • Preenchimento direito:
    • Desktop: 0vw
    • Tablet: 0vw

CSS customizado

Na guia Avançado, adicione algum CSS personalizado.

  • CSS do elemento principal:
    • display: flex; 
display: flex;

Visibilidade

Por fim, defina os transbordamentos como visíveis.

  • Estouros horizontais + verticais: visíveis

Configurações da coluna 1

Espaçamento

Antes de adicionar qualquer módulo, ajuste os valores de espaçamento na coluna 1.

  • Preenchimento esquerdo: 4vw
  • Preenchimento direito: 0vw

Configurações da coluna 2

Espaçamento

Ajuste os valores de espaçamento da coluna 2 também.

  • Enchimento superior:
    • Desktop: 7vw
    • Tablet: 17vw
    • Telefone: 28vw
  • Preenchimento direito:
    • Desktop + Tablet: 15vw

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Agora é hora de adicionar os módulos. Comece com um módulo de texto. Insira conteúdo descritivo para o produto.

Texto

Em seguida, defina o estilo do texto.

  • Fonte: Fenix
  • Cor: # f2eed0
  • Tamanho:
    • Desktop: 1.3vw
    • Tablet: 2.6vw
    • Telefone: 3.8vw
  • Espaçamento entre letras: 1px
  • Alinhamento: Centro

Dimensionamento

Ajuste o tamanho do módulo para diferentes tamanhos de tela.

  • Largura:
    • Desktop: 50%
    • Tablet: 60%
    • Telefone: 80%

Espaçamento

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

  • Preenchimento superior + inferior: 1vw
  • Preenchimento esquerdo + direito: 1vw

Fronteira

Adicione uma borda ao módulo de acordo.

  • Estilos de borda: superior + esquerda + direita
  • Largura da borda:
    • Cima + Esquerda + Direita: 2px
  • Cor da borda:
    • Superior + Esquerda + Direita: Creme # f2eed0

Adicionar Woo Título à Coluna 1

Adicionar conteúdo

Agora, adicione um módulo de título woo e escolha 'Este produto' na guia de conteúdo.

  • Produto: Este produto

Fundo

Para estilizar o módulo, adicione um fundo laranja escuro.

  • Cor de fundo
  • Cor: Cobre Laranja # d66b00

Texto do Título

Em seguida, modifique as configurações de texto do título.

  • Nível do título do título: H1
  • Fonte: Fenix
  • Cor: Creme # f2eed0
  • Tamanho:
    • Desktop: 2.9vw
    • Tablet: 7,8vw
    • Telefone: 13,9vw
  • Espaçamento entre letras H1: 1px

Dimensionamento

Além disso, ajuste o tamanho do módulo

  • Largura: 100%

Espaçamento

Em seguida, adicione alguns valores de preenchimento.

  • Preenchimento superior + inferior:
    • Desktop: 2vw
    • Tablet: 3vw
    • Telefone: 4vw
  • Preenchimento esquerdo + direito:
    • Desktop: 2vw
    • Tablet: 3vw
    • Telefone: 4vw

Fronteira

Finalmente, adicione uma borda da seguinte maneira.

  • Estilos de borda: superior + esquerda + direita
  • Largura da borda:
    • Cima + Esquerda + Direita: 2px
  • Cor da borda:
    • Superior + Esquerda + Direita: Creme # f2eed0

Adicionar Woo Descrição Título à Coluna 1

Adicionar conteúdo

Abaixo do título, adicione um módulo de descrição woo. Na guia de conteúdo, escolha 'Este produto'.

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

Texto

Em seguida, defina o estilo do texto.

  • Fonte: Open Sans
  • Cor: Creme # f2eed0
  • Tamanho:
    • Desktop: 08vw
    • Tablet: 2vw
    • Telefone: 3vw

Dimensionamento

Além disso, ajuste o tamanho.

  • Largura: 100%

Espaçamento

Da mesma forma, ajuste o espaçamento.

  • Preenchimento superior + inferior:
    • Desktop: 2vw
    • Tablet + Telefone: 3vw
  • Preenchimento esquerdo + direito:
    • Desktop: 2vw
    • Tablet + Telefone: 3vw

Fronteira

Semelhante a outros módulos, adicione uma borda.

  • Estilos de borda: todas as quatro bordas
  • Largura: 2 px
  • Cor: Creme # f2eed0

Adicionar informações adicionais Woo à coluna 2

Adicionar conteúdo

Agora é hora de adicionar os atributos personalizados com o módulo de informações adicionais woo. Na guia de conteúdo, escolha 'Este produto'.

  • Produto: Este produto

Texto

Altere as configurações de texto da seguinte forma.

  • Fonte: Open Sans
  • Estilo: Itálico
  • Cor: Creme # f2eed0
  • Tamanho:
    • Desktop: 0,6vw
    • Tablet: 1.6vw
    • Telefone: 2.2vw

Texto de Atributo

Em seguida, defina o estilo do texto do atributo de acordo:

  • Fonte: Fenix
  • Cor: Creme # f2eed0
  • Tamanho:
    • Desktop: 1.1vw
    • Tablet: 2vw
    • Telefone: 3vw
  • Espaçamento: 1px

Dimensionamento

Além disso, ajuste o tamanho.

  • Largura: 100%

Fronteira

E, finalmente, adicione uma borda.

  • Estilos de borda: superior + direita + inferior
  • Largura da borda:
    • Superior + Direito + Inferior: 2px
  • Cor da borda:
    • Superior + Direito + Inferior: Creme # f2eed0

Adicionar linha # 3

Estrutura da Coluna

Adicione a terceira linha, com duas colunas.

Dimensionamento

Antes de adicionar módulos, ajuste o tamanho da linha para diferentes tamanhos de tela.

  • Largura:
    • Desktop: 50%
    • Tablet: 87%
    • Telefone: 93%
  • Alinhamento: Direito

Preenchimento

Além disso, ajuste o enchimento.

  • Preenchimento inferior: 12vw

Configurações da coluna 1

Espaçamento

Continue ajustando o preenchimento na primeira coluna.

  • Preenchimento esquerdo:
    • Desktop: 5vw
    • Tablet + telefone: 12vw

Adicionar Woo Price à coluna 1

Adicionar conteúdo

Agora, adicione o preço do produto usando o módulo de preço woo. Na guia de conteúdo, escolha 'Este produto'.

  • Produto: Este produto

Texto de preço

Em seguida, defina o estilo do texto de acordo.

  • Fonte: Fenix
  • Cor: Creme # f2eed0
  • Tamanho:
    • Desktop: 1.5vw
    • Tablet: 3,5vw
    • Telefone: 5vw

Dimensionamento

Além disso, ajuste o tamanho do módulo.

  • Largura:
    • Desktop: 39%
    • Tablet: 45%
    • Telefone: 54%

Espaçamento

Ajuste o espaçamento também.

  • Enchimento superior:
    • Desktop: 1vw
    • Tablet: 2vw
    • Telefone: 3v2
  • Preenchimento inferior:
    • Desktop: 1vw
    • Tablet + telefone: 2vw
  • Preenchimento esquerdo:
    • Desktop: 1vw
    • Tablet + telefone: 2vw
  • Preenchimento direito:
    • Tablet + telefone: 2vw

Fronteira

Finalmente, adicione a borda.

  • Estilos de borda: todos os quatro lados
  • Largura: 2 px
  • Cor: Creme # f2eed0

Adicionar Woo Adicionar ao carrinho à coluna 2

Adicionar conteúdo

O módulo final é um módulo woo add to cart. Na guia de conteúdo, escolha 'Este produto'.

Estilos de botão

Defina o estilo do botão da seguinte maneira.

  • Estilos Personalizados: Sim
  • Tamanho do texto do botão:
    • Desktop: 1.3vw
    • Tablet: 3,5vw
    • Telefone: 5vw
  • Cor do Texto: Creme # f2eed0
  • Cor de fundo: Cobre Laranja # d66b00

Padding de botão

Em seguida, adicione alguns valores de preenchimento ao botão.

  • Preenchimento superior + inferior: 0,5vw
  • Preenchimento esquerdo + direito: 1,5vw

Dimensionamento

Por último, mas não menos importante, ajuste o tamanho do módulo e pronto!

  • Largura: 100%

Antevisão

Vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

É um embrulho

É isso! Se o seu conteúdo for mais longo ou mais curto que o deste tutorial, isso pode atrapalhar o espaçamento dos blocos. Tudo o que você precisa fazer é ajustar as configurações da coluna para que se encaixem melhor na composição. Esperamos que este tutorial inspire você a criar designs Divi mais incríveis. Deixe-nos saber nos comentários se você tiver alguma dúvida.