Introdução
O elemento Card da Rockty é uma solução ideal para situações onde colunas não são suficientes. Ele permite exibir múltiplos cartões (cards) com espaçamentos, bordas e sombras configuráveis. O Card é versátil e facilita a organização visual de conteúdos em sua página.
1. Informações Importantes sobre o Elemento Card
Configuração Padrão do Card: Por padrão, o Card é gerado com um elemento de imagem, um título e um parágrafo. Estes elementos podem ser editados clicando nos ícones de engrenagem correspondentes. É possível adicionar outros tipos de elementos ao Card ou excluir os que não são necessários.
🚨 Atenção: Não utilize os elementos de Lançamento, Formulário, Carrossel, Galeria de Imagens, Bullet Point e FAQ dentro de um Card, pois eles não são compatíveis com este elemento.
2. Como Adicionar um Card
Adicione um Novo Elemento:
Vá até sua página e adicione um novo elemento.
Selecione 'Card' na lista de opções disponíveis no menu lateral esquerdo.
Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.
Acessando as Configurações do Card:
Clique no ícone de engrenagem do Card para abrir as opções de configuração que serão detalhadas a seguir.
3. Configurações do Elemento Card
1. Ajustes
Visibilidade:
Configure a visibilidade do Card para Desktop, Tablet e Mobile clicando nos ícones correspondentes. Para reexibir um elemento oculto, clique novamente no ícone do dispositivo.
Adicionar ou Excluir Cards:
Por padrão, o Card é gerado com 3 cartões. Você pode excluir um cartão clicando no ícone de lixeira ou adicionar mais cartões clicando no ícone +.
2. Posição
Configurações Gerais:
Ajuste a largura, espaço entre os cartões, posição, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita) inserindo valores manuais ou ajustando a barra.
Separador:
Adicione uma imagem para separar os cartões clicando em “imagem” para acessar a biblioteca de imagens ou fazer o upload. Para excluir a imagem, clique no ícone de lixeira.
💡 Dica: Evite margens negativas excessivas para prevenir conflitos com outros elementos da página.
3. Estilo
Cor de Fundo:
Configure a cor de fundo do Card usando a paleta de cores ou inserindo o código HEX. Também é possível definir um gradiente de cor e sua orientação. Para remover a cor, clique no ícone de lixeira.
Imagem de Fundo:
Insira uma imagem de fundo clicando em “Alterar Imagem” para escolher uma da biblioteca ou fazer o upload. Para excluir a imagem, clique no ícone de lixeira.
Borda | Radial | Sombra:
Configure a borda e a sombra do Card ativando as opções e ajustando a cor, tamanho, deslocamento e esfumaçamento. Para a configuração radial, ajuste os valores conforme necessário.
4. Avançado
Efeitos de Movimento – Animação:
Selecione um efeito de animação da lista e ajuste seu comportamento (Uma vez ou Infinito), ativação (Animação de entrada ou Ao passar o mouse), duração (normal, devagar, rápido) e atraso (até 1000 segundos). Para remover uma animação, clique no ícone de lixeira.
CSS Classes:
Configure classes CSS para o elemento inserindo um nome no campo “Insira ou Selecione” e utilize o elemento de Script para aplicar o código CSS relacionado. Para mais detalhes sobre CSS Classes, consulte nosso tutorial dedicado.
Conclusão
Agora que você conhece as configurações e opções de personalização do elemento Card, pode criar layouts visuais eficientes e adaptáveis para suas páginas Rockty. Explore as opções para adaptar os cartões às suas necessidades específicas e melhorar a apresentação do seu conteúdo.
Dicas Adicionais
Utilize o espaço entre os cartões para criar uma aparência limpa e organizada.
Experimente diferentes configurações de borda e sombra para destacar os cartões.
Use as animações para adicionar dinamismo à interação com os cartões.
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!