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

Aprenda a inserir e configurar o elemento Card em suas páginas Rockty para criar layouts flexíveis e atraentes.

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

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:

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

  • 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?