Passar para o conteúdo principal
Todas as coleçõesConstrutor de Sites/BuilderElementos
Como funciona o elemento Flip Card na Rockty
Como funciona o elemento Flip Card na Rockty

Saiba como configurar um Flip Card em suas páginas

Sylas avatar
Escrito por Sylas
Atualizado há mais de uma semana

Introdução

O Flip Card é um elemento interativo que alterna automaticamente entre frente e verso, adicionando dinamismo às suas páginas. Ele é composto por uma parte frontal e uma traseira, onde é possível personalizar imagens, textos e ações, oferecendo uma experiência visual rica para os visitantes do seu site.


1. Como Adicionar o Elemento Flip Card

Para adicionar um Flip Card à sua página na Rockty, siga estes passos:

  • Adicione um novo elemento em sua página.

  • Selecione o elemento 'Flip Card' na lista de opções disponíveis no menu lateral esquerdo.

💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.


2. Como Acessar as Configurações do Flip Card

Para acessar as configurações do Flip Card, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso permitirá que você ajuste todas as configurações disponíveis.


3. Configurações do Flip Card

Ajustes

Nas configurações de Ajustes, é possível definir a visibilidade do Flip Card para diferentes dispositivos (Desktop, Tablet, Mobile). Basta clicar nos ícones dos dispositivos para ocultar ou exibir o Flip Card conforme desejado.


Frente

Para ajustar a frente do Flip Card, clique em "Frente" nas configurações. Você poderá:

  • Imagem: Adicionar ou remover uma imagem usando a biblioteca de imagens da Rockty ou carregando uma do seu dispositivo.

  • Título e Descrição: Personalizar o título e a descrição que aparecem na frente do Flip Card.


Verso

Para ajustar o verso do Flip Card, clique em "Verso" nas configurações. As opções incluem:

  • Título e Descrição: Personalizar o título e a descrição.

  • Texto do Botão: Inserir o texto para o botão que aparece no verso.

  • Configurar Ação do Botão: Definir ações como abrir links, rolar página, submeter formulários, entre outros.


Posição

Nas configurações de Posição, você pode ajustar:

  • Geral: Configurar largura, altura e margens.

  • Frente/Verso: Ajustar o espaçamento interno, com a opção de ajustar todos os lados ao mesmo tempo clicando no ícone de cadeado.

💡 Dica: Evite margens negativas para não causar conflitos visuais com outros elementos da página.


Estilo

As configurações de Estilo permitem personalizar:

  • Frente e Verso: Cor de fundo (incluindo gradiente), imagem de fundo, e ajustes detalhados para imagens, títulos e descrições.

  • Botão: Personalizar cor, tamanho, bordas, fontes e outros detalhes visuais do botão no verso do Flip Card.


Avançado

Na seção Avançado, você pode:

  • Animações: Configurar o tipo de animação e direção do efeito.

  • Efeito 3D: Ativar ou desativar o efeito 3D do Flip Card.

  • CSS Classes: Aplicar estilos personalizados utilizando CSS Classes em conjunto com o elemento de Script Para mais detalhes sobre CSS Classes, confira nosso tutorial dedicado.


Conclusão

O Flip Card é uma excelente opção para adicionar interatividade e dinamismo às suas páginas na Rockty. Com suas diversas opções de personalização, é possível ajustar cada detalhe da frente e do verso para criar uma experiência única para seus visitantes.


Dicas Adicionais

  • Experimente diferentes combinações de estilos e animações para encontrar a configuração que melhor se adapta ao seu design. Explore as configurações de visibilidade para otimizar a exibição do Flip Card em diferentes dispositivos.

  • Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens.

  • Use imagens otimizadas para garantir melhor performance nas suas páginas. Recomendamos o formato WebP, que oferece uma boa relação entre qualidade e tamanho do arquivo.

  • Para otimizar e converter suas imagens para WebP, você pode utilizar ferramentas como TinyPNG ou Squoosh, que são gratuitas e fáceis de usar


Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Respondeu à sua pergunta?