Como criar flip cards com qualquer módulo no Divi sem um plug-in

Os Flip Cards são uma maneira divertida de os usuários interagirem com o seu site. Não só fornece uma animação flip legal, mas também permite que você ofereça informações adicionais em um local conciso. Neste tutorial, vou mostrar como transformar Módulos Divi em cartões flip sem usar um plugin! Com este método, você poderá usar um módulo Divi como a frente de um cartão e outro módulo Divi como o verso de um cartão. Você pode até projetar cada módulo (frente e verso) da maneira que quiser usando o construtor divi. A funcionalidade é realizada por meio de apenas alguns trechos de CSS (sem jquery).

Acho que você ficará surpreso com o quão simples e divertido construir esses cartões pode ser.

Vamos mergulhar!

Sneak Peak

Aqui está uma prévia do projeto que estaremos construindo hoje.

Inscreva-se no nosso canal no Youtube

O que você precisa para este tutorial

Tudo que você precisa para este tutorial é Divi! Nenhum plugin é necessário. Também usaremos o App Developer Layout Pack, que é GRATUITO e está disponível no Divi Builder.

A ideia básica explicada

A inspiração para este conceito veio, na verdade, deste exemplo básico de como criar cartões flip. Bastou um pouco de reengenharia para atribuir as classes div a linhas, colunas e módulos Divi e, em seguida, limpar um pouco o CSS.

O layout Divi consiste em uma seção regular com quatro linhas de uma coluna. Em cada linha, adicionei dois módulos de blurb empilhados um em cima do outro (embora qualquer módulo Divi também funcionasse). A sinopse superior serve como a frente do cartão flip e a sinopse inferior serve como o verso do cartão flip. Ao aplicar “display: flex” à seção, as linhas são estruturadas horizontalmente como colunas. Isso permite que os cartões sejam alinhados lado a lado em quatro colunas.

Aqui está a aparência da configuração antes de adicionarmos o CSS personalizado.

Em seguida, adicionei o CSS personalizado às configurações da página e adicionei as classes CSS correspondentes a cada linha, coluna e módulo.

É isso!

Criação de Divi Flip Cards usando um layout pré-fabricado

Adicionando o layout predefinido à sua página

Para começar, vá em frente e crie uma nova página, dê a você um título para a página e clique para usar o Divi Builder. Selecione a opção “Choose a Premade Layout”. No pop-up Carregar da biblioteca, selecione o Pacote de layout do desenvolvedor de aplicativos e clique para usar o layout da página inicial do desenvolvedor de aplicativos.

Assim que o layout for carregado na página, publique sua página e clique no botão “Construir no Front End”. Agora você está pronto para começar a criar os Flip Cards.

Configurando a seção, linhas e módulos

Na primeira seção do layout, adicione uma nova seção regular com uma linha de uma coluna. Não adicione nenhum módulo ainda. Abra as configurações de linha e atualize o seguinte:

Margem personalizada: 20px inferior
Preenchimento personalizado: 0 px superior, 0 px inferior

Salvar configurações.

Em seguida, duplique a linha três vezes para que você tenha um total de quatro linhas na seção.

Agora abra as configurações da seção e adicione o seguinte CSS personalizado ao elemento principal:

display:flex;

Isso muda as linhas para serem exibidas horizontalmente, o que basicamente converte nossas linhas em quatro colunas, embora tecnicamente ainda sejam linhas Divi, cada uma com uma coluna.

Adicionando os Módulos às Linhas

É aqui que nosso layout predefinido se torna útil para este tutorial. Usaremos os quatro módulos de sinopse na seção superior do layout para iniciar o design de nossos flip cards. Usando as opções de clique com o botão direito ou as teclas de atalho ctrl + c e ctrl + v (windows) e cmd + c cmd + v (mac), copie e cole os módulos predefinidos em cada uma das linhas que acabamos de criar. Certifique-se de que cada linha tenha versões duplicadas do mesmo módulo.

Agora sua seção deve ser semelhante a esta.

Projetando os Módulos do Cartão Frontal e Traseiro

Os dois módulos empilhados em cada linha serão usados ​​como frente e verso dos cartões flip. O módulo superior em cada linha servirá como frente e o módulo inferior como parte traseira. Uma vez que o design do cartão frontal (módulo superior) já está feito graças ao nosso layout predefinido, tudo o que precisamos fazer é ajustar o design e o conteúdo do cartão posterior (módulo inferior).

Usando o recurso Divi multiselect, selecione todos os módulos inferiores em cada linha e, em seguida, abra as configurações do elemento para personalizar todos os quatro módulos ao mesmo tempo.

Agora podemos atualizar as opções de configurações de elemento para estilizar a versão anterior de nossos flip cards. Atualize as configurações do elemento da seguinte forma:

Conteúdo: “Esta é uma descrição.”
Cor de fundo: # 00a2fa
Cor do Texto: Claro

Adição de CSS e classes CSS personalizadas

Agora é a hora do CSS customizado que nos dará a funcionalidade de flip card. Abra as configurações da página e adicione o seguinte CSS personalizado:

@media (min-width:981px){
.flip-box-row {
  background-color: transparent;
  width: 250px;
  height: 250px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

Observe que as classes CSS acima são nomeadas de uma forma que deve ajudá-lo a entender o que cada uma está fazendo. Também é um indicador útil de onde precisamos adicionar essas classes CSS aos nossos elementos Divi. Por exemplo, a classe “flip-box-row” destina-se a estilizar cada uma das quatro linhas; portanto, cada linha precisa ter essa classe CSS.

Adicionando classes CSS aos elementos Divi

Usando Multiselect, selecione todos os quatro módulos superiores (placas frontais) em cada uma das linhas. Em seguida, adicione a seguinte classe CSS:

Classe CSS: flip-box-front

Em seguida, use multiselect para selecionar todos os quatro módulos inferiores (cartões traseiros) em cada uma das linhas e adicione a seguinte classe CSS a esses módulos:

Classe CSS: flip-box-back

Por último, use multiselect para selecionar todas as quatro linhas e dar a elas as seguintes classes CSS:

Classe CSS: flip-box-row
Classe CSS da coluna: flip-box-column

Design final na área de trabalho

Com todas as nossas classes CSS adicionadas, nossos cartões flip são totalmente funcionais. Confira o design final no desktop.

Personalizando o Design para Dispositivos Móveis

No código CSS personalizado que já adicionamos às configurações da página, há uma consulta de mídia que limita a funcionalidade do flip card apenas ao desktop. No entanto, ainda precisamos ocultar as versões frontais de nossos flip cards no tablet e smartphone, bem como garantir que nossas linhas sejam empilhadas corretamente ao ajustar as larguras do navegador.

Para ocultar nossos módulos de blurb de cartão frontal, use multiselect para selecionar todos os módulos superiores (cartões frontais) em cada linha (isso será mais fácil no modo de visualização de wireframe, pois as coisas estarão se movendo no construtor de front end) e atualize o seguinte:

Desativar em: telefone e smartphone

Em seguida, abra as configurações da seção e adicione mais uma linha de CSS ao elemento principal, além da adicionada anteriormente:

flex-wrap:wrap;

Isso garantirá que as linhas sejam empilhadas no celular.

Agora vamos conferir o design final em tablet e smartphone.

Opção de bônus: cartas viradas verticais!

Se você quiser que seus cartões virem verticalmente em vez de horizontalmente, você só precisa alterar duas letras (literalmente) no CSS personalizado. Abra as configurações da página e localize os dois lugares onde “transform: rotateY (180deg)” está sendo usado. Em seguida, substitua o “Y” por “X”. Se você ainda não adivinhou, isso altera a rotação para girar no eixo X em vez do eixo Y.

Coisas muito legais! Confira o resultado.

Pensamentos finais

Você não precisa recorrer a um plugin para criar Flip Cards de ótima aparência no Divi. Com este tutorial, você tem uma estrutura para criar incontáveis ​​designs e combinações de conteúdo de flip card. Não se esqueça de que você pode escolher quaisquer dois módulos para servir como frente e verso de seus cartões. Portanto, fique à vontade para ser criativo!

Espero que isso tenha sido útil e espero ouvir de você nos comentários abaixo.

Saúde!