Como criar seções elegantes de informações de produto com imagem dividida com Divi

Ser criativo com imagens pode definitivamente ajudar a chamar a atenção para seus CTAs. Neste post, mostraremos como recriar uma bela seção de informações do produto de imagem dividida com Divi. O design que estamos recriando é lindo, atraente e pode ser personalizado de acordo com as suas necessidades. Você também poderá baixar o arquivo JSON do design 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 de imagem dividida grátis GRATUITAMENTE

Para colocar suas mãos no layout de imagem dividida 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

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

Crie efeito de imagem dividida com Photoshop e Illustrator

Antes de começar a usar o Divi, você precisa ter um conjunto de imagens pronto para fazer upload. Como este é um efeito de imagem dividida, você precisa de duas imagens que se encaixem bem. Você precisará de dois tamanhos de imagem diferentes: 960 px de largura por 1200 px de altura para desktop e 600 px de largura por 1200 px de altura para tablets e celulares.

Etapa 1: Selecione as imagens

Selecione duas imagens HD de seus produtos.

Etapa 2: apagar o fundo

Apague os fundos para criar recortes. Você pode usar qualquer programa que desejar. Mas aqui está um guia passo a passo para o Photoshop.

Etapa 3: Abra um novo projeto no Illustrator

Abra um novo projeto no Illustrator, 1920px de largura por 1200px de altura.

Etapa 4: adicione uma guia vertical.

Adicione uma guia vertical através do centro da tela vazia. Certifique-se de que está bem no centro.

Etapa 5: importe ou coloque as imagens recortadas

Coloque as duas imagens recortadas na tela.

Etapa 6: comece a visualizar a divisão

Faça duas cópias de cada imagem. Use a função de corte para dividi-los ao meio em pontos diferentes. Primeiro pelo centro, depois um pouco menos e um pouco mais para as duplicatas. Agora você terá três versões divididas de cada imagem.

Etapa 7: finalizar o efeito

Usando os diferentes recortes divididos, encontre a melhor composição para suas imagens. Certifique-se de que a borda reta de cada imagem esteja exatamente na guia central da tela. Tente alterar o tamanho das imagens para melhor ajustá-las. Lembre-se de que a tela tem o tamanho de uma tela de largura total, portanto, ajuste o tamanho das imagens de acordo.

Etapa 8: cortar metade e salvar

Quando o design estiver concluído, livre-se dos recortes extras. Verifique novamente se a borda reta de cada imagem está tocando a guia central. Crie duas novas pranchetas e redimensione-as para caber em cada lado, certificando-se de que estejam separadas na guia central. Exporte para a web, uma prancheta de cada vez e salve como .png. Agora, você tem duas imagens diferentes. Ambos com 960 px de largura e 1200 px de altura.

Etapa 9: redimensionar para tablet e celular

Redimensione as duas imagens para 960 pixels de largura por 1200 pixels de altura. Certifique-se de cortar apenas o fundo transparente, não toque na imagem. Fiz isso no Photoshop, alterando o tamanho da tela com a âncora ao lado da imagem.

Vamos começar a recriar!

Adicionar nova seção

Fundo

Agora que passamos pela primeira parte do tutorial, é hora de começar a usar o Divi! Crie uma nova página ou adicione uma nova seção a uma página existente. Adicione um fundo gradiente à seção.

• Fundo: Gradiente
• Cor um: branco sujo # f7f7f7
• Cor dois: verde fresco # b7e778
• Direção do gradiente: 90 graus
• Posição inicial e final: 50%

Espaçamento

Altere as configurações de espaçamento da seção a seguir.

• Preenchimento superior: 5vw
• Preenchimento inferior: 12vw

Visibilidade

Finalmente, ajuste a visibilidade.

• Excesso vertical e horizontal: oculto

Adicionar 1ª linha

Estrutura da Coluna

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

Dimensionamento

Ajuste as configurações de dimensionamento da linha.

• Largura da calha: 2
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Adicione alguns valores de preenchimento personalizados também.

• Preenchimento superior e inferior: 2vw

Configurações da coluna 1

Transformar

Vá para as configurações da coluna 1 a seguir e altere os valores de conversão de transformação.

• Transformar traduzir: -2vw eixo y

Configurações da coluna 2

Transformar

Faça o mesmo para a coluna 2.

• Transformar Traduzir: eixo x 2vw

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um módulo de texto à coluna 1 com algum conteúdo H2 de sua escolha.

Texto do Título

Na guia de design, altere as configurações de texto do título.

• Nível do texto do título: H2
• Fonte H2: Corben
• Alinhamento H2:
  • Desktop: Esquerda
  • Tablet + telefone: centro
• H2 Cor do texto: cinza muito escuro # 3a3a3a
• Tamanho do texto H2:
  • Desktop: 7vw
  • Tablet + telefone: 16vw

Espaçamento

Em seguida, ajuste o espaçamento.

• Margem direita:
  • Desktop: -1vw
  • Tablet + telefone: 0vw
• Preenchimento direito:
  • Tablet + telefone: 35vw

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Agora, adicione um módulo de texto à segunda coluna. Insira algum conteúdo H2 de sua escolha.

Texto do Título

Em seguida, defina o estilo do texto do título da seguinte maneira.

• Nível do texto do título: H2
• Fonte H2: Corben
• Alinhamento H2:
  • Desktop: Esquerda
  • Tablet + telefone: certo
• H2 Cor do texto: cinza muito escuro # 3a3a3a
• Tamanho do texto H2:
  • Desktop: 7vw
  • Tablet + telefone: 14vw

Espaçamento

Finalmente, ajuste o espaçamento.

• Margem superior:
  • Tablet: -12vw
  • Telefone: -14vw
• Margem esquerda:
  • Desktop + Tablet: -0,5vw
• Preenchimento direito:
  • Tablet + telefone: 17vw

Adicionar 2ª linha

Estrutura da Coluna

Continue adicionando uma nova linha à sua seção usando a seguinte estrutura de colunas:

Dimensionamento

Abra as configurações de linha e ajuste as configurações de dimensionamento.

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

Espaçamento

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

• Margem superior:
  • Desktop: -15vw
  • Tablet: -36vw
  • Telefone: -40vw
• Preenchimento superior e inferior:
  • Desktop: 0vw
  • Tablet: 9vw
  • Telefone: 12vw

CSS customizado

Conclua as configurações de linha adicionando uma única linha de código CSS ao elemento principal da linha. Isso ajudará a manter as imagens juntas.

• Elemento principal: display: flex;

display: flex;

Adicionar Módulo de Imagem à Coluna 1

Adicionar imagem

Adicione a metade esquerda da imagem à coluna 1.

• Imagem:
  • Desktop: a imagem de 960 pixels de largura
  • Tablet + telefone: a imagem ampla de 600px

Dimensionamento

Faça com que o módulo de imagem tenha largura total.

• Forçar largura total: sim

Adicionar Módulo de Imagem à Coluna 2

Adicionar imagem

Adicione a metade direita da imagem à coluna 2.

• Imagem:
  • Desktop: a imagem de 960 pixels de largura
  • Tablet + telefone: a imagem ampla de 600px

Dimensionamento

Faça com que este módulo de imagem também tenha largura total.

• Forçar largura total: sim

Adicionar 3ª linha

Estrutura da Coluna

Para a próxima linha! Escolha a seguinte estrutura de coluna:

Dimensionamento

Ajuste o tamanho da linha da seguinte maneira:

• Largura da calha: 4
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, ajuste o espaçamento.

• Margem superior:
  • Desktop: -38vw
  • Tablet + telefone: -14vw

Configurações da coluna 1

Espaçamento

Antes de adicionar módulos, ajuste o espaçamento nas colunas. Comece com a coluna 1.

• Preenchimento esquerdo:
  • Desktop: 7vw
  • Tablet + telefone: 12vw
• Preenchimento direito:
  • Desktop: 15vw
  • Tablet + telefone: 12vw

Configurações da coluna 2

Espaçamento

Em seguida, ajuste as configurações de espaçamento da coluna 2

• Preenchimento esquerdo:
  • Desktop: 15vw
  • Tablet + telefone: 12vw
• Preenchimento direito:
  • Desktop: 7vw
  • Tablet + telefone: 12vw

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Adicione um módulo de texto à coluna 1 e adicione algum conteúdo H3 de sua escolha.

Fundo

Altere a cor de fundo.

• Cor de fundo
• Cor: Cinza Muito Escuro # 333333

Texto do Título

Em seguida, defina o estilo do texto do título.

• Nível do Texto do Título: H3
• Fonte H3: Corben
• Alinhamento H3: Centro
• Cor da fonte H3: branco off # f7f7f7
• Tamanho da fonte H3:
  • Desktop: 2.2vw
  • Tablet: 6,4vw
  • Telefone: 7vw
• Espaçamento entre letras H3: 3 px

Espaçamento

Adicione alguns valores de espaçamento personalizados a seguir.

• Enchimento superior:
  • Desktop + Tablet: 0.2vw
  • Telefone: 1vw
• Preenchimento inferior:
  • Desktop: 0,5vw
  • Tablet: 1,2vw
  • Telefone: 1vw

Fronteira

Complete as configurações do módulo adicionando alguns cantos arredondados.

• Cantos arredondados: 1vw todos os quatro cantos

Duplicar Módulo de Texto e Arraste para a Coluna 2

Agora, duplique o módulo de texto e arraste-o para a coluna 2.

Mudar o conteúdo

Claro, você precisará alterar o conteúdo no módulo de texto duplicado.

Adicionar Módulo de Chamada à Ação à Coluna 1

Adicionar conteúdo

Abaixo do módulo de texto na coluna 1, adicione um módulo de apelo à ação com algum conteúdo à sua escolha.

• Título
• Botão
• Corpo

Adicionar Link

Continue adicionando um link para o botão do CTA.

Fundo

E adicione uma cor de fundo ao tablet e celular.

• Cor de fundo:
  • Tablet + telefone: branco sujo # f7f7f7

Texto do Título

Na guia de design, defina o estilo das configurações de texto H4.

• Nível do Texto do Título: H4
• Fonte H4: Open Sans
• H4 Cor: Cinza Muito Escuro # 333333
• Tamanho do texto H4:
  • Desktop: 1.4vw
  • Tablet: 4.5vw
  • Telefone: 7vw
• Espaçamento entre letras H3: 2px
• Altura da linha H3: 1,5em

Texto de corpo

Altere as configurações do corpo do texto a seguir.

• Fonte do corpo: Open Sans
• Alinhamento do corpo do texto: centro
• Cor do corpo do texto: cinza muito escuro # 333333
• Tamanho da fonte do corpo:
  • Desktop: 0.9vw
  • Tablet: 3vw
  • Telefone: 4vw
• Altura da linha corporal: 1,8em

Botão

Defina também o estilo do botão.

• Tamanho do texto do botão:
  • Desktop: 1vw
  • Tablet: 2.2vw
  • Telefone: 3.8vw
• Cor da fonte do botão: cinza muito escuro # 333333
• Cor de fundo do botão:
  • Tablet + Celular: Fresh Green # b7e778
• Largura da borda do botão:
  • Desktop: 1px
• Cor da borda do botão:
  • Desktop: Cinza Muito Escuro # 333333
• Raio da borda do botão: 1vw

Espaçamento

E adicione alguns valores de espaçamento personalizados.

• Margem superior:
  • Desktop + Tablet: -2vw
  • Telefone: 3vw
• Preenchimento esquerdo e direito:
  • Desktop: 0vw
  • Tablet + telefone: 4vw

Fronteira

Por último, mas não menos importante, estilize a borda em diferentes tamanhos de tela.

• Cantos arredondados: 1vw todos os cantos
• Estilos de borda:
  • Tablet + telefone: todos os quatro lados
• Largura da borda:
  • Tablet + telefone: 1px
• Cor da borda:
  • Tablet + telefone: cinza muito escuro # 333333

Duplique o módulo de apelo à ação e arraste para a coluna 2

Duplique o módulo de apelo à ação e arraste-o para a coluna 2.

Mudar o conteúdo

Para concluir o design, altere o conteúdo no módulo de call to action duplicado e pronto!

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

Conclusão

Neste post, mostramos como criar uma seção de informações do produto com imagem dividida com Divi. Explicamos como criar as imagens divididas usando um software de edição de imagem e continuamos usando os arquivos em nosso design Divi. Esperamos que este design o inspire a ser criativo com as imagens de seus próprios produtos. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!