Como enquadrar um produto em sua imagem de fundo com as opções de coluna da Divi

Com os módulos WooCommerce da Divi, há toneladas de designs que você pode realizar usando o Divi. No tutorial de hoje do Divi, tentaremos inspirá-lo com outra ideia de design que você pode realizar usando apenas as opções integradas do Divi. Mais especificamente, mostraremos como enquadrar um produto em sua imagem de plano de fundo. O resultado depende inteiramente da sua imagem de fundo, mas se você seguir este tutorial, saberá quais etapas seguir para personalizar a técnica para seu próprio site! Você também poderá baixar o arquivo JSON do tutorial 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

Móvel

Baixe o layout do produto Frame GRATUITAMENTE

Para colocar suas mãos no layout do produto com moldura livre, 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!

1. Configure a seção com imagem de fundo responsiva

Adicionar nova seção

Imagem de fundo responsiva

A primeira etapa para enquadrar um produto em sua imagem de plano de fundo é adicionar uma nova seção à página em que você está trabalhando. Abra as configurações da seção e carregue imagens de fundo responsivas. Você pode encontrar as duas imagens que usamos na pasta que você baixou no início deste post.

• 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 algum preenchimento personalizado superior e inferior em diferentes tamanhos de tela.

• Preenchimento superior: 3vw (desktop), 0vw (tablet e telefone)
• Preenchimento inferior: 3vw (desktop), 7vw (tablet), 18vw (telefone)

Fronteira

Conclua as configurações da seção adicionando uma borda.

• Largura da borda: 2vw
• Cor da borda: #ffffff

2. Adicionar diferentes elementos de quadro à coluna

Adicionar nova linha

Estrutura da Coluna

Agora, como você pode notar 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 nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Conclua as configurações de linha adicionando alguns preenchimentos personalizados à esquerda e à direita.

• Preenchimento esquerdo: 5vw
• Preenchimento direito: 5vw

Adicionar Módulo de Texto à Coluna 2

Deixe a caixa 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

Vamos aumentar a altura do módulo nas configurações de espaçamento a seguir.

• Preenchimento superior: 22vw (desktop), 39vw (tablet), 35vw (telefone)
• Preenchimento inferior: 15vw (desktop), 39vw (tablet), 35vw (telefone)

Fronteira

E vamos adicionar uma borda também.

• Largura da borda: 3vw
• Largura da borda inferior: 1vw
• Cor da borda: rgba (255,255,255,0,7)

Adicionar Módulo de Título Woo à Coluna 2

Conteúdo Dinâmico

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

• Produto: Encontre 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

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

• Nível do título do 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 alguns valores de preenchimento personalizados também.

• Enchimento superior: 1vw
• Preenchimento inferior: 1vw
• Preenchimento esquerdo: 3vw
• Preenchimento direito: 3vw

Adicionar 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: Encontre na lista
• Tipo de descrição: breve descrição

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 modifique as configurações de texto da seguinte forma:

• Fonte do texto: Open Sans
• Tamanho do texto: 0,9vw (desktop), 2,2vw (tablet), 2,8vw (telefone)
• Altura da linha do título: 2.2em

Espaçamento

Conclua as configurações do módulo adicionando alguns valores de preenchimento personalizados.

• Enchimento superior: 1vw
• Preenchimento inferior: 1vw
• Preenchimento esquerdo: 3vw
• Preenchimento direito: 3vw

Adicionar Módulo de Texto Woo Price à Coluna 2

Conteúdo Dinâmico

Em seguida, temos o Módulo de Texto Woo Price. Selecione um produto de sua preferência.

• Produto: Encontre na lista

Cor de fundo

Modifique a cor de fundo.

• Cor de fundo: rgba (255,255,255,0,7)

Configurações de texto de preço

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

• Fonte de preço: Work Sans
• Cor do texto do preço: # 000000
• Tamanho do texto de preço: 2vw (desktop), 4vw (tablet), 5vw (telefone)

Espaçamento

Conclua as configurações do módulo adicionando alguns valores de preenchimento personalizados.

• Preenchimento superior: 2vw
• Preenchimento inferior: 2vw
• Preenchimento esquerdo: 3vw
• Preenchimento direito: 3vw

Adicionar módulo Woo Adicionar ao carrinho à coluna 2

Conteúdo Dinâmico

Vá para o próximo e último módulo, que é o Módulo Woo Add To Cart! Selecione um produto de sua preferência.

• Produto: Encontre na lista

Cor de fundo

Altere a cor de fundo.

• Cor de fundo: rgba (255,255,255,0,7)

Configurações de campos

Modifique as configurações dos campos do módulo também.

• Cor de fundo dos campos: #ffffff
• Cor do texto dos campos: # 000000
• Fonte dos Campos: Open Sans

• Largura da borda inferior dos campos: 1px
• Cor da borda inferior dos campos: # 000000

Configurações de botão

Continue definindo o estilo do botão da seguinte maneira:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1.1vw (desktop), 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: Open Sans

• Preenchimento superior: 1vw (desktop), 2vw (tablet), 4vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 4vw (telefone)
• Preenchimento esquerdo: 4vw (desktop), 6vw (tablet), 10vw (telefone)
• Preenchimento direito: 4vw (desktop), 6vw (tablet), 10vw (telefone)

Espaçamento

E conclua as configurações do módulo adicionando alguns valores de margem e preenchimento personalizados.

• Margem inferior: 2vw
• Preenchimento superior: 3vw
• Preenchimento inferior: 3vw
• Preenchimento esquerdo: 3vw
• Preenchimento direito: 3vw

3. Estilo, redimensionamento e reposicionamento da coluna

Modificar as configurações 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 para ela:

• Cor 1: rgba (43.135.218,0)
• Cor 2: #ffffff
• Tipo de gradiente: Linear
• Posição inicial: 39%

Fronteira

Adicione alguns cantos arredondados também.

• Todos os cantos: 1vw

Sombra da caixa

Estamos criando alguma profundidade ao adicionar uma sombra de caixa sutil também.

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

Transformar Traduzir

E concluiremos as configurações de 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ê definitivamente vai gostar desta opção!

• Direita: 0px (desktop), 9vw (tablet e telefone)
• Parte inferior: -5vw (desktop), 0vw (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.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como enquadrar um produto em sua imagem de fundo usando as opções integradas do Divi e os módulos WooCommerce incluídos no Divi Builder. A abordagem escolhida depende da imagem de plano de fundo que você está usando, mas a leitura deste tutorial o ajudará a entender a abordagem geral. Você também pode baixar o arquivo JSON do layout 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.