Em caso de dúvidas sobre como adicionar o elemento Flip Card em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:

https://help.rockfunnels.com/pt-BR/articles/6004116-como-funcionam-as-configuracoes-gerais-de-elementos-no-rockfunnels

O Flip Card é um elemento que gira automaticamente alternando entre frente e verso.

Por padrão a parte da frente do Flip Card é gerado com um elemento de Imagem, Título e Parágrafo conforme mostrado na imagem abaixo:

E o verso do Flip Card é gerado com um elemento de Título, Parágrafo e Botão conforme mostrado na imagem abaixo:

Para acessar as configurações que veremos a seguir nesse tutorial, acesse a engrenagem do elemento.

Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

Para ajustar a frente do Flip Card, clique no texto ‘Frente’ conforme indicado na imagem para disponibilizar as possibilidades de configuração abaixo:
​

Para inserir uma imagem na frente do Flip Card, clique na chave ao lado do texto ‘Imagem’. Será disponibilizado abaixo uma caixa com o texto ‘Alterar Imagem’, ao clicar nela você será direcionado para a biblioteca de imagens do RockFunnels onde poderá usar imagens da biblioteca ou subir imagens do seu dispositivo. Caso não queira usar uma imagem na frente do Flip Card, clique na chave novamente.

Escreva o título conforme desejado para que fique visível na frente do Flip Card.

Escreva uma descrição conforme desejado para que fique visível na frente do Flip Card.

Para ajustar o verso do Flip Card, clique no texto ‘Verso’ conforme indicado na imagem para disponibilizar as possibilidades de configuração abaixo:

Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

Escreva o título conforme desejado para que fique visível no verso do Flip Card.

Escreva uma descrição conforme desejado para que fique visível no verso do Flip Card.

Escreva um texto para o botão conforme desejado para que fique visível no verso do Flip Card.

Configure uma ação para o botão conforme desejado, as opções de ação disponíveis variam de acordo com os elementos disponíveis em uma página conforme listado a seguir:
​
​Nenhuma ação; Abrir link externo; Rolar página; Submeter formulário; Ir para página do funil, Fechar LGPD e Abrir Pop-Up.

Nas configurações gerais de posição do Flip Card é possível configurar valores para Largura, Altura e Margem (topo) ao inserir valores manualmente nas caixas que os representam ou ao movimentar as respectivas barras conforme desejado.

Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

Ao clicar em Frente/Verso é possível configurar valores para Espaçamento Interno (Topo, Baixo, Esquerda e Direita) ao inserir valores manualmente nas caixas que os representam ou ao movimentar as respectivas barras conforme desejado.

Para ajustar todos os valores ao mesmo tempo, clique no ícone de cadeado conforme indicado na imagem abaixo.

Nas configurações gerais de estilo do Flip Card é possível configurar valores de Radial ao inserir valores manualmente na caixa que o representa ou ao movimentar a respectiva barra conforme desejado.

Para ter acesso as configurações de estilo da parte da Frente do Flip Card, clique em ‘Frente’ para disponibilizar as possibilidades de configurações que veremos a seguir:

Nas configurações de estilo é possível configurar a cor de fundo da parte da frente do Flip Card utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Também é possível configurar a cor gradiente, definindo uma orientação para a cor de fundo.
​

Nas configurações de estilo é possível inserir uma imagem de fundo na frente do Flip Card. Basta clicar na imagem abaixo do título “imagem” para ter acesso à biblioteca de imagens do RockFunnels ou subir uma imagem do seu dispositivo.

Nas configurações de ‘Imagem’ é possível configurar o tamanho, margem, borda, radial e opacidade da imagem inserida na parte da frente do Flip Card. Para isso basta ativar as respectivas chaves que será habilitada a possibilidade de inserir cor, ajustar o tamanho, deslocamento e esfumaçar.

Nas configurações de Título, é possível configurar a cor do texto, fonte, estilo, tamanho da fonte, altura da linha e opacidade do título na frente do Flip Card.

Nas configurações de Descrição, é possível configurar a cor do texto, fonte, estilo, tamanho da fonte, altura da linha e opacidade da descrição na frente do Flip Card.

Para ter acesso as configurações de estilo do Verso do Flip Card, clique em ‘Verso’ para disponibilizar as possibilidades de configurações que veremos a seguir:

Nas configurações de estilo é possível configurar a cor de fundo da parte do Verso do Flip Card utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Também é possível configurar a cor gradiente, definindo uma orientação para a cor de fundo da linha e/ou coluna.

Nas configurações de estilo é possível inserir uma imagem de fundo no Verso do Flip Card. Basta clicar na imagem abaixo do título “imagem” para ter acesso à biblioteca de imagens do RockFunnels ou subir uma imagem do seu dispositivo.

Nas configurações de Título, é possível configurar a cor do texto, fonte, estilo, tamanho da fonte, altura da linha e opacidade do título no verso do Flip Card.

Nas configurações de Descrição, é possível configurar a cor do texto, fonte, estilo, tamanho da fonte, altura da linha e opacidade da descrição no verso do Flip Card.

Nas configurações do botão que fica no verso do Flip Card é possível configurar o tamanho do botão, ajustes de espaçamento interno, cor de fundo, cor gradiente de fundo, borda, radial, sombra, fonte, estilo, cor do texto do botão e tamanho do texto do botão.
​
​

Animação > Em animação é possível configurar o tipo de animação desejado para o Flip Card ao clicar no campo com o nome da animação.
​
​Direção da animação > Em direção da animação é possível definir para onde deseja que o efeito de animação tenha sentido ao clicar nas setas.
​
​Habilitar 3D > Ao clicar na chave o Flip Card terá um efeito 3D, para desabilitar, basta clicar na chave novamente.

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:
​
​https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels