Com os mods WooCommerce defende Divi, há toneladas de designs que você pode fazer. Neste tutorial Divi, tentaremos inspirá-lo com outra ideia de design que você pode realizar usando apenas as opções integradas de Divi. Especificamente, mostraremos como enquadrar um produto em sua imagem de fundo. O resultado depende inteiramente da sua imagem de fundo, mas se você seguir este tutorial saberá quais passos seguir para personalizar a técnica de acordo com sua preferência site da Web! Você também poderá baixar o arquivo JSON do tutorial gratuitamente!
Visão geral
Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado em diferentes tamanhos de tela.
1. Configure a seção com uma imagem de fundo responsiva
Adicione uma nova seção
Imagem de fundo adaptável
A primeira etapa para enquadrar um produto em sua imagem de fundo é adicionar uma nova seção à página em que você está trabalhando. Abra as configurações da seção e baixe imagens de fundo responsivas. Você pode encontrar as duas imagens que usamos na pasta que você baixou no início deste artigo.
- Imagem de fundo: paisagem
- Tamanho da imagem de fundo: Ajustar
- Posição da imagem de fundo: centro superior
- Imagem de fundo: quadrado
espaçamento
Vá para a guia de design e adicione preenchimento personalizado superior e inferior em diferentes tamanhos de tela.
- Estofamento superior: 3vw (mesa), 0vw (tablet e telefone)
- Preenchimento inferior: 3vw (mesa), 7vw (tablet), 18vw (telefone)
Fronteira
Complete os parâmetros da seção adicionando uma borda.
- Largura da borda: 2vw
- Cor da borda: #ffffff
2. Adicione diferentes elementos de quadro à coluna
Adicione uma nova linha
Estrutura da coluna
Agora, como você pode ver na imagem de fundo, o produto está localizado no lado direito da imagem de fundo. Vamos escolher uma estrutura de coluna correspondente para uma nova linha em nossa seção. Nesse caso, é a seguinte estrutura de coluna:
dimensionamento
Sem adicionar módulos ainda, abra os parâmetros de linha e modifique os parâmetros de dimensionamento de acordo:
- Use uma largura de calha personalizada: Sim
- Largura da calha: 1
- Equalizar as alturas das colunas: Sim
- Largura: 100%
- Largura máxima: 100%
espaçamento
Complete os parâmetros de linha adicionando preenchimento esquerdo e direito personalizado.
- Estofamento esquerdo: 5vw
- Estofamento direito: 5vw
Adicione um módulo de texto à coluna 2
Deixe a área de conteúdo vazia
É hora de começar a adicionar módulos! Para permitir que o produto seja exibido, usaremos um módulo de texto vazio.
espaçamento
Em seguida, aumentaremos a altura do módulo nas configurações de espaçamento.
- Preenchimento superior: 22vw (computador), 39vw (tablet), 35vw (telefone)
- Preenchimento inferior: 15vw (mesa), 39vw (tablet), 35vw (telefone)
Fronteira
E também adicionaremos uma borda.
- Largura da borda: 3vw
- Largura da borda inferior: 1vw
- Cor da borda: rgba (255,255,255,0,7)
Adicione o módulo de título Woo à coluna 2
Conteúdo dinâmico
Vamos passar para o próximo módulo, que é um módulo de título Woo. Selecione um produto de sua preferência.
- Produto: Pesquise na lista
Cor de fundo
Use a seguinte cor de fundo:
- Cor de fundo: rgba (255,255,255,0,7)
Configurações de texto do título
Mude para a guia de design do módulo e altere as configurações de texto H3 de acordo:
- Título: H3
- Fonte do título: Work Sans
- Tamanho do texto do título: 2.5vw (desktop), 5vw (tablet), 6vw (telefone)
espaçamento
Adicione também valores de preenchimento personalizados.
- Estofamento superior: 1vw
- Estofamento inferior: 1vw
- Estofamento esquerdo: 3vw
- Estofamento direito: 3vw
Adicione o módulo de descrição Woo à coluna 2
Conteúdo dinâmico
O próximo módulo de que precisamos é um módulo de descrição Woo. Selecione um produto de sua preferência.
- Produto: Pesquise na lista
- Tipo de descrição: descrição resumida
Cor de fundo
Altere a cor de fundo do módulo de acordo:
- Cor de fundo: rgba (255,255,255,0,7)
Configurações de texto
Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:
- Fonte de texto: Open Sans
- Tamanho do texto: 0.9vw (computador), 2.2vw (tablet), 2.8vw (telefone)
- Altura da linha de título: 2,2 em
espaçamento
Complete os parâmetros do módulo adicionando valores de preenchimento personalizados.
- Estofamento superior: 1vw
- Estofamento inferior: 1vw
- Estofamento esquerdo: 3vw
- Estofamento direito: 3vw
Adicione o módulo de texto Woo Price à coluna 2
Conteúdo dinâmico
Em seguida, temos o módulo de texto de preço Woo. Selecione um produto de sua preferência.
- Produto: Pesquise na lista
Cor de fundo
Mude a cor de fundo.
- Cor de fundo: rgba (255,255,255,0,7)
Configurações de texto do preço
Mude para a guia de design do módulo e altere as configurações de texto de preço de acordo:
- Política de preços: Work Sans
- Cor do texto do preço: # 000000
- Preço Tamanho do texto: 2vw (desktop), 4vw (tablet), 5vw (telefone)
espaçamento
Complete os parâmetros do módulo adicionando valores de preenchimento personalizados.
- Estofamento superior: 2vw
- Estofamento inferior: 2vw
- Estofamento esquerdo: 3vw
- Estofamento direito: 3vw
Adicionar Woo Adicionar ao carrinho Módulo na coluna 2
Conteúdo dinâmico
Vamos passar para o próximo e último módulo, que é o módulo Woo Add To Cart! Selecione um produto de sua preferência.
- Produto: Pesquise na lista
Cor de fundo
Mude a cor de fundo.
- Cor de fundo: rgba (255,255,255,0,7)
Configurações de campo
Modifique também os parâmetros dos campos do módulo.
- Cor de fundo dos campos: #ffffff
- Cor do texto do campo: # 000000
- Fonte do campo: Open Sans
- Largura da borda inferior dos campos: 1px
- Cor da borda inferior dos campos: # 000000
Configurações de botão
Continue estilizando o botão da seguinte maneira:
- Use estilos personalizados para o botão: Sim
- Tamanho do texto do botão: 1.1vw (computador), 2.5vw (tablet), 3.5vw (telefone)
- Cor do texto do botão: #ffffff
- Cor de fundo do botão: # 000000
- Largura da borda do botão: 0 px
- Raio da borda do botão: 10vw
- Fonte do botão: Abrir sem
- Preenchimento superior: 1vw (computador), 2vw (tablet), 4vw (telefone)
- Preenchimento inferior: 1vw (mesa), 2vw (tablet), 4vw (telefone)
- Preenchimento esquerdo: 4vw (mesa), 6vw (tablet), 10vw (telefone)
- Preenchimento direito: 4vw (mesa), 6vw (tablet), 10vw (telefone)
espaçamento
E complete os parâmetros do módulo adicionando valores personalizados de margem e preenchimento.
- Margem inferior: 2vw
- Estofamento superior: 3vw
- Estofamento inferior: 3vw
- Estofamento esquerdo: 3vw
- Estofamento direito: 3vw
3. Estilo, redimensionando e reposicionando a coluna
Modifique os parâmetros da coluna 2
Fundo gradiente
Agora, a última parte deste tutorial nos permite unir os diferentes módulos. Abra as configurações da coluna 2 e use o seguinte fundo gradiente:
- Cor 1: rgba (43,135,218,0)
- Cor de 2: #ffffff
- Tipo de gradiente: linear
- Posição inicial: 39%
Fronteira
Adicione também cantos arredondados.
- Todos os cantos: 1vw
Caixa de sombra
Criamos profundidade adicionando também uma sombra de caixa sutil.
- Força do Borrão da Sombra da Caixa: 100px
- Cor da sombra: rgba (0,0,0,0,24)
Transformador Traduzir
E concluiremos as configurações da coluna alterando os valores de conversão de transformação em diferentes tamanhos de tela. Esta etapa nos permite reposicionar a coluna como desejamos. Ao usar sua própria imagem de fundo, você certamente apreciará esta opção!
- Direita: 0px (escritório), 9vw (tablet e telefone)
- Parte inferior: -5vw (escritório), 0vw (tablet e telefone)
Visão geral
Agora que passamos por todas as etapas, vamos dar uma última olhada no resultado em diferentes tamanhos de tela.
Considerações finais
Neste artigo, mostramos como enquadrar um produto em sua imagem de plano de fundo usando as opções e módulos integrados do Divi. WooCommerce incluído no Divi Builder. A abordagem adotada depende da imagem de plano de fundo que você está usando, mas a leitura deste tutorial ajudará você a entender a abordagem geral. Você também conseguiu baixar o arquivo JSON do layout gratuitamente! Se você tiver alguma dúvida ou sugestão, sinta-se à vontade para deixar um comentário na seção de comentários abaixo.
