Tornando-se Criativo com as Novas Opções de Substituição de Imagem da Divi

As novas opções de foco de substituição de imagem do Divi fornecem aos seus projetos um nível totalmente novo de criatividade. Neste post, mostraremos como criar uma bela seção com imagens que mudam ao passar o mouse. Esperamos que este design inspire você a criar suas próprias seções criativas com as opções de foco de substituição de imagem do Divi. Você também poderá baixar o arquivo JSON 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 substituição de imagem GRATUITAMENTE

Para colocar as mãos no layout de substituição de imagem grátis, 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

Vamos começar a recriar

Adicionar nova seção

Espaçamento

Comece criando uma nova página ou adicionando uma nova seção a uma página existente. Antes de adicionar uma linha, ajuste as configurações de espaçamento da seção.

• Margem superior e inferior: 2vw
• Margem esquerda e direita: 2vw

Fronteira

Em seguida, adicione algum raio de borda.

• Cantos arredondados: 10 px

Adicionar nova linha

Estrutura da Coluna

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

Fundo

Antes de adicionar qualquer módulo, adicione um fundo gradiente de salmão claro.

• Fundo: Gradiente
• Gradient Color 1: Pale Salmon # f4e9de
• Gradient Color 2: Even Paler Salmon # fff0e8

Dimensionamento

Continue ajustando a largura da linha.

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

Espaçamento

Finalmente, ajuste o espaçamento.

• Enchimento superior:
  • Desktop + Tablet: 5vw
• Preenchimento esquerdo:
  • Tablet + Telefone: 5vw
• Preenchimento direito:
  • Desktop: 7vw
  • Tablet + Telefone: 5vw

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H2

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

Texto do Título

Vá para a guia de design e defina o estilo das configurações de texto H2 de acordo:

• Nível do texto do título: H2
• Fonte H2: Annie, use seu telescópio
• Peso da fonte H2: negrito
• Alinhamento de texto H2: Centro
• H2 Cor do Texto: Marrom # 793715
• Cor do texto H2:
  • Desktop: 7.2vw
  • Tablet: 12vw
  • Telefone: 11vw

Dimensionamento

Modifique a largura na área de trabalho a seguir.

• Largura:
  • Desktop: 45vw
  • Tablet + telefone: 100%

Transformar

Por último, mas não menos importante, gire o texto e altere sua posição usando as configurações de transformação.

• Transformar, girar:
  • Desktop: 270 graus
• Transform Translate:
  • eixo x: -10vw
  • eixo y: 19vw

Adicione o 1º Módulo de Imagem à Coluna 1

Adicione uma ilustração transparente

Adicione um novo módulo de imagem logo abaixo do módulo de texto e carregue uma ilustração de sua escolha. Você pode encontrar as imagens que estamos usando neste tutorial baixando a pasta compactada no início deste post.

Dimensionamento

Agora, force o tamanho da imagem para largura total.

• Largura total: Sim

Espaçamento

Em seguida, ajuste as configurações de espaçamento.

• Margem superior:
  • Desktop + Tablet: -11vw
• Margem esquerda:
  • Desktop: -2vw
  • Tablet + telefone: -36vw
• Preenchimento esquerdo e direito:
  • Desktop: 10vw
  • Tablet + telefone: 34vw

Adicionar 2º Módulo de Imagem à Coluna 1

Adicione uma ilustração transparente

Logo abaixo do primeiro módulo de imagem, adicione outro. Insira uma ilustração à sua escolha.

Dimensionamento

Força o módulo para largura total.

• Largura total: Sim

Espaçamento

Em seguida, ajuste as configurações de espaçamento.

• Margem superior:
  • Desktop: -2vw
  • Tablet + telefone: -10vw
• Margem esquerda:
  • Desktop + Tablet: -14vw
• Preenchimento esquerdo e direito:
  • Desktop: 7vw
  • Tablet + telefone: 35vw

Adicione o 3º Módulo de Imagem à Coluna 1

Adicionar uma imagem

Adicione outro módulo de imagem à coluna e insira uma ilustração.

Dimensionamento

Em seguida, force o módulo para largura total.

• Largura total: Sim

Espaçamento

Finalmente, ajuste o espaçamento.

• Margem superior:
  • Tablet + telefone: -18vw
• Margem esquerda:
  • Desktop: -13vw
  • Tablet + telefone: 10vw
• Preenchimento esquerdo e direito:
  • Desktop: 7vw
  • Tablet + telefone: 35vw

Adicionar 4º Módulo de Imagem à Coluna 1

Adicionar uma imagem

O módulo final na coluna 1 é outro módulo de imagem. Insira uma ilustração.

Dimensionamento

Força o módulo para largura total.

• Largura total: Sim

Espaçamento

Em seguida, ajuste o espaçamento.

• Margem superior:
  • Desktop: 3vw
  • Tablet + telefone: -15vw
• Margem esquerda:
  • Desktop: -3vw
  • Tablet + telefone: 30vw
• Preenchimento esquerdo e direito:
  • Desktop: 10vw
  • Tablet + telefone: 35vw

Transformar

Por último, mas não menos importante, gire a ilustração.

• Transformar rotação: 84deg

Adicionar 1º Módulo de Texto à Coluna 2

Adicionar conteúdo

Para a próxima coluna! Adicione um módulo de texto com algum conteúdo H3 de sua escolha.

Adicionar Link

Em seguida, adicione um link para o módulo.

Fundo

Vá para as configurações de fundo e adicione uma cor de fundo a seguir.

• Cor de fundo
• Cor de fundo: marrom # 793715

Texto do Título

Em seguida, defina o estilo do texto H3 na guia de design.

• Nível do Texto do Título: H3
• Fonte H3: Annie, use seu telescópio
• H3 Cor: Branco #ffffff
• Tamanho da fonte H3:
  • Desktop: 2vw
  • Tablet: 5vw
  • Telefone: 6vw

Dimensionamento

Agora, ajuste as configurações de dimensionamento.

• Largura: 33%
• Alinhamento do Módulo: Centro

Espaçamento

Em seguida, adicione alguns valores de espaçamento em diferentes tamanhos de tela.

• Margem inferior: 1vw
• Enchimento superior:
  • Desktop: 0,5vw
  • Tablet + telefone: 2.3vw
• Preenchimento inferior:
  • Desktop + Tablet: 1.1vw

Fronteira

Continue adicionando algum raio de borda.

• Cantos arredondados: 1vw todos os cantos

Sombra da caixa

Finalmente, adicione uma sombra de caixa.

• Sombra da caixa: primeira opção
• Posição horizontal: 7px
• Força do borrão: 25px

Adicione o 1º Módulo de Imagem à Coluna 2

Adicionar imagem

O próximo módulo de que precisamos na coluna 2 é um módulo de imagem. Faça upload de duas imagens diferentes: uma para o estado estático e outra ao pairar.

• Estático: primeira imagem
• Passe o mouse: segunda imagem

Dimensionamento

Força a imagem para largura total.

• Largura total: Sim

Espaçamento

Em seguida, ajuste os valores de espaçamento.

• Margem superior:
  • Desktop: -2vw
  • Tablet + telefone: 20vw
• Margem inferior:
  • Desktop + Tablet: 4vw
• Margem esquerda:
  • Desktop: -5vw

Fronteira

Adicione cantos arredondados a seguir.

• Cantos arredondados: 10 px em todos os cantos

Sombra da caixa

Dê à imagem uma sombra de caixa sutil também.

• Sombra da caixa: segunda opção
• Posição vertical: 20px
• Força do borrão: 80px

Transformar

Finalmente, ajuste os valores da escala de transformação ao pairar.

• Escala de transformação ao passar o mouse: 110%

Módulos de texto e imagem duplicados na coluna 2

Clone os dois módulos e coloque as duplicatas na ordem correta.

Ajuste o 2º Módulo de Texto na Coluna 2

Alterar conteúdo e link

Altere o conteúdo no módulo de texto duplicado.

Ajuste o 2º Módulo de Imagem na Coluna 2

Mudar imagens

Altere as imagens nas configurações estática e de foco.

Clone coluna 2

Exclua a coluna 3 e duplique a coluna 2

Volte para as configurações de linha e exclua a 3ª coluna. Em seguida, duplique a 2ª coluna.

Ajuste o 1º Módulo de Texto na Coluna 3

Alterar conteúdo e link

Após duplicar a 2ª coluna, ajuste o texto e o link no 1º módulo de texto da coluna 3.

Ajuste o 1º Módulo de Imagem na Coluna 3

Mudar imagens

Altere as imagens no módulo de imagem também.

Espaçamento

Em seguida, ajuste o espaçamento.

• Margem superior:
  • Desktop: -2vw
  • Tablet + telefone: 11vw
• Margem inferior
  • Desktop + Tablet: 5vw

Ajuste o 2º Módulo de Texto na Coluna 3

Alterar conteúdo e link

Altere o texto e o link do último módulo de texto na coluna 3.

Ajuste o 2º Módulo de Imagem na Coluna 3

Mudar imagens

Altere também as imagens estáticas e flutuantes do último módulo de imagem.

Espaçamento

Finalmente, ajuste o espaçamento do módulo de imagem e pronto!

• Margem superior:
  • Desktop: -3vw
  • Tablet + telefone: 7vw

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 um design com as novas opções de foco de substituição de imagem do Divi. Essa funcionalidade pode levar a muitas possibilidades criativas. Esperamos que você os use em seus próprios projetos. Lembre-se de usar os mesmos tamanhos de imagem para as imagens estáticas e flutuantes. Se você tiver dúvidas ou sugestões, fique à vontade para deixá-las na seção de comentários abaixo!