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.
Precisa de Ajuda?
Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!