Como funciona o elemento Card na Rockty

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

1. 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.
     ​

2. 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.
    ​

    

    ---

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!