Como recriar visualizações do pacote de layout do ET com efeitos de flutuação em leque em Divi

Um dos recursos interessantes do novo design do site da elegantthemes.com são as visualizações do pacote de layout predefinido na página do produto Divi. O que torna este design único é como cada pacote de layout é apresentado com três imagens separadas que se espalham ao passar o mouse.

Hoje, vamos mostrar a você como recriar o design de nossas visualizações de pacote de layout com o mesmo efeito de pairar de fan-out impressionante no Divi. Como o design é um pouco mais avançado, usaremos CSS personalizado em combinação com as opções de design integradas do Divi. Mas não se preocupe, não demorará muito para construir e o resultado definitivamente vale a pena.

Vamos começar.

Espiada

Aqui está uma olhada nas visualizações do pacote de layout com um efeito de foco em leque. Observe que a linha inferior tem um efeito de foco secundário que gira as imagens separadamente durante o foco.

O layout de três colunas na área de trabalho se ajustará a uma coluna no tablet e telefone.

Baixe o layout do pacote de layout com efeitos de movimentação em leque GRATUITO

Para colocar suas mãos nos designs deste tutorial, 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!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Vamos para o tutorial, vamos?

Inscreva-se no nosso canal no Youtube

O que você precisa para começar

Para começar, você precisará ter a seguinte configuração:

1. O Divi Theme instalado e ativo
2. Uma nova página criada para construir do zero no construtor de front-end (visual) do Divi.
3. Três imagens a serem usadas para conteúdo simulado. As imagens devem ter cerca de 250 x 375 pixels para obter os melhores resultados. Como essas são visualizações de páginas da web, você pode criar suas próprias capturas de tela de qualquer design de página e, em seguida, cortar / redimensionar cada imagem de acordo.

Depois disso, você terá uma tela em branco para começar a construir algumas guias de foco no Divi.

Recriando as visualizações do pacote de layout do ET com efeitos de flutuação em leque em Divi

Construindo a Seção e Linha

Crie uma nova seção regular com uma linha de três colunas.

Antes de adicionar qualquer módulo, abra as configurações de linha e atualize o tamanho e espaçamento da seguinte forma:

• Largura da calha: 2
• Largura: 90%
• Largura máxima: 1120 px (desktop), 400 px (tablet)

Em seguida, adicione um pouco de preenchimento à linha do tablet para obter mais espaçamento no celular.

• Preenchimento da coluna 1: 20% inferior
• Preenchimento da coluna 2: 20% inferior
• Preenchimento da coluna 3: 20% inferior

Adicionando Imagem 1

Agora estamos prontos para adicionar nossa primeira das três imagens que formarão nosso design de visualização do pacote de layout. Vá em frente e adicione um módulo de imagem à coluna 1.

Em seguida, faça upload da imagem para o módulo de imagem (deve ter cerca de 250 por 375 pixels de tamanho).

Em seguida, atualize as configurações de design da seguinte forma:

• Alinhamento de imagem: centro
• Largura: 220px
• Estouro vertical: oculto
• Índice Z: 4

Como precisamos direcionar o contêiner da imagem (não a imagem em si), precisamos adicionar uma altura personalizada, sombra da caixa e raio da borda usando CSS personalizado. Adicione o seguinte CSS ao elemento principal:

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Isso permitirá que a imagem se ajuste com o do contêiner de imagem quando adicionarmos o efeito de foco mais tarde. Como você pode ver agora, a imagem foi ligeiramente cortada na parte inferior porque temos uma altura personalizada de 240px e o overflow definido como “oculto”.

Adicionando Imagem 2

Para criar a segunda imagem, adicione um novo módulo de imagem abaixo do primeiro módulo de imagem na coluna 1. Em seguida, carregue uma nova imagem (250X350) para o módulo.

Em seguida, precisamos posicionar a imagem atrás e ligeiramente à esquerda da imagem 1. Para fazer isso, precisaremos adicionar uma largura e altura personalizadas com o estouro vertical oculto (bem como fizemos com a imagem 1). A principal diferença aqui é que precisamos dar à imagem uma posição absoluta para que seja exibida no canto superior esquerdo da coluna atrás da imagem 1.

Para fazer isso, atualize o seguinte:

• Largura: 180px
• Estouro vertical: oculto

Em seguida, adicione o seguinte CSS personalizado ao elemento principal:

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Adicionando Imagem 3

Agora estamos prontos para adicionar a terceira imagem para completar a visualização do pacote de layout. Neste ponto, faz sentido usar o modo de visualização wireframe, uma vez que temos algumas sobreposições que tornam o uso do construtor visual mais difícil. Implante o modo wireframe e duplique a imagem 2.

Duplicamos a imagem porque queremos manter a maioria das configurações que usamos para a imagem 2. A única diferença (além de uma nova imagem) é que precisamos posicionar a imagem à direita em vez de à esquerda.

Abra a imagem duplicada (imagem 3) e atualize o módulo de imagem com uma nova imagem (250 × 375).

Em seguida, atualize o CSS personalizado alterando a propriedade da posição left para uma propriedade da posição right . Nenhuma outra mudança no CSS é necessária.

Se preferir, você pode copiar e colar o seguinte CSS no elemento principal para substituir o CSS atual.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Até agora tudo bem

Aqui está o resultado final até agora.

O design é realmente muito bonito como está, mas vamos elevá-lo um pouco mais com um efeito de pairar em leque.

Adicionando o CSS Fan-Out Hover Effect

Normalmente, se estivéssemos lidando com apenas uma imagem, poderíamos adicionar facilmente efeitos de foco usando as opções Divi integradas. Mas esse efeito de foco em fan-out requer que ativemos o estado de foco de vários elementos filhos (imagens) de uma vez ao passar o mouse sobre a coluna pai. Ao passar o mouse sobre a coluna, queremos o seguinte para realizar os seguintes ajustes nas imagens.

1. Adicione uma duração de transição a cada imagem para uma transição suave ao passar o mouse.
2. Ajuste a imagem 1 para ter uma largura de 180 px e uma altura de 240 px. Isso fará com que o contêiner da imagem fique mais alto e mais estreito para mostrar mais da imagem.
3. Ajuste a imagem 2 e 3 para ter uma largura de 160px e uma altura de 220px. Isso também fará com que as imagens fiquem mais altas e mais estreitas para mostrar mais da imagem.
4. Ajuste a imagem 2 para girar 5 graus no sentido anti-horário e mova ligeiramente para a esquerda. Podemos fazer isso adicionando um valor de -5 grau à propriedade transform:rotate e ajustando o valor da propriedade left position para 0.
5. Ajuste a imagem 3 para girar 5 graus no sentido horário e mova ligeiramente para a direita. Podemos fazer isso adicionando um valor de 5 graus à propriedade transform:rotate e ajustando o valor da propriedade right position para 0.

Para adicionar o CSS personalizado necessário para esses efeitos de foco, precisamos adicionar uma classe CSS personalizada à linha que contém as imagens. Isso nos permitirá aplicar o CSS personalizado apenas às imagens em uma linha específica.

Abra as configurações de linha e adicione a seguinte classe CSS.

• Classe CSS: fan-out-images

Para adicionar o CSS personalizado à página, abra as configurações da página e adicione o seguinte CSS personalizado na guia Avançado.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Eu adicionei um comentário acima de cada fragmento de css para lembrá-lo do que cada um está fazendo.

Assim que terminar. Confira o resultado final.

Resultado final

Efeito de pairar opcional: girar a imagem 1 e 2 separadamente ao passar o mouse

Para adicionar outro nível de engajamento às imagens de visualização do pacote de layout, podemos fazer com que a rotação da imagem 1 e da imagem 2 aconteça separada do efeito de foco inicial. Isso permitirá que o usuário interaja com as imagens de uma maneira única. Você pode até adicionar links separados ou visualizações de lightbox a essas imagens, se desejar.

Veja como você faz isso.

Retirando as propriedades de transformação do CSS personalizado de configurações de página

Primeiro, você precisa retirar as duas linhas de CSS customizado que giram a imagem ao passar o mouse sobre a coluna. Abra o CSS personalizado de configurações de página e retire o seguinte:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Adicionando propriedades de transformação ao passar o mouse para a imagem 2

Em seguida, abra as configurações do módulo de imagem para a imagem 2 e use as opções de transformação integradas do Divi para adicionar o mesmo valor de rotação de transformação que excluímos anteriormente para o estado de foco.

• Transformar, girar o eixo Z (pairar): -5deg
• Transformar o eixo X da tradução (foco): -20px

Adicionando propriedades de transformação ao passar o mouse para a imagem 3

Em seguida, atualize as configurações do módulo de imagem para a imagem 3 para adicionar a propriedade de rotação de transformação.

• Transformar, girar o eixo Z (pairar): 5 graus
• Transformar o eixo X da tradução (foco): 20px

Agora confira o resultado final.

Resultado final

Adicionando Links a Imagens

Se você deseja criar links de redirecionamento para mostrar um determinado pacote de layout ou design de página em uma página separada, seria melhor adicionar o mesmo URL de link a todas as três imagens do pacote. Para fazer isso, abra cada um dos módulos de imagem e adicione o URL do link.

Adicionando novas visualizações do pacote de layout às outras colunas

Para finalizar o design, podemos copiar as três imagens da coluna 1 e colá-las nas colunas 2 e 3.

Depois disso, tudo o que você precisa fazer é atualizar cada uma das imagens nas colunas 2 e 3 com novas.

É isso!

Design final

Aqui está o design final. A linha superior mostra o efeito de pairar em leque ao passar o mouse sobre a coluna. A segunda linha mostra o efeito secundário de foco em fan-out adicionado às imagens 2 e 3 separadamente.

O layout de três colunas na área de trabalho se ajustará a uma coluna no tablet e telefone.

Pensamentos finais

O efeito de flutuação em leque é um elemento de design bonito e envolvente que você pode usar para apresentar layouts de página em seu próprio site. A combinação de CSS customizado e configurações Divi integradas que abordamos neste tutorial funcionará magicamente. E essa configuração servirá como um excelente ponto de partida para explorar mais projetos usando o construtor Divi. Esperançosamente, isso lhe dará alguma inspiração para levar seu portfólio para o próximo nível.

Estou ansioso para ouvir de você nos comentários.

Saúde!