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.
- 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.
-
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.
-
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!