# Cartões personalizáveis A seção "Cartões personalizáveis" no construtor de sites foi criada para quem deseja apresentar de forma fácil e rápida informações importantes sobre seus produtos, serviços ou avaliações de clientes. Esses blocos permitem adicionar cartões visualmente atrativos à página do site, que podem ser personalizados para atender às necessidades do seu negócio.
Independentemente de você querer fornecer uma descrição detalhada do curso, feedback de clientes satisfeitos ou recomendações para usar seus serviços, "Cartões personalizáveis" e "Cartões do curso" ajudarão a destacar as informações e torná-las mais acessíveis e convenientes para os visitantes do site. ## Como adicionar o bloco? Para adicionar a seção "Cartões personalizáveis", clique no "+" no modo de edição do seu site:
Em seguida, encontre a seção "Cartões personalizáveis" no menu que abrir e clique nela para adicionar a seção ao site. A seção será adicionada ao site, e o menu de configurações de conteúdo será aberto para você:
## Como adicionar cartão? No menu de edição do conteúdo da seção "Cartões personalizáveis", você verá várias seções de configurações: estilo dos cartões, imagens, botões etc. Para sua comodidade, você pode adicionar os cartões primeiro para ver como as configurações de estilo são aplicadas a eles. Para isso, role para baixo no menu de configurações de conteúdo e encontre o botão "Adicionar cartão":
Ao clicar no botão "Adicionar cartão", você vê as configurações de um cartão com um campo de texto vazio, uma barra para enviar uma imagem para o cartão e para o ícone do botão, além do texto do próprio botão:
Os campos de configuração do cartão são opcionais: isso significa que você pode, por exemplo, pular o envio de uma imagem para o próprio cartão ou para o ícone do botão, sem inserir texto — tudo fica a seu critério. Se, por exemplo, você não precisar de um botão com link no cartão, deixe os campos "Nome do botão" e "Link" em branco: assim, os botões não serão exibidos no cartão.
Há várias configurações para o texto do cartão, semelhantes às de qualquer editor de texto, nas quais você pode ajustar o tamanho da fonte, o contorno da fonte, a cor, o destaque, além de adicionar um link e muito mais. Para isso, selecione o texto (ou parte do texto) e aplique as configurações necessárias ao texto:
Depois de configurar totalmente o primeiro cartão, adicione o seguinte: para isso, clique no botão "Adicionar cartão", localizado abaixo da barra de configurações do primeiro cartão adicionado:
## Configurações dos cartões {% hint style="info" %} Os cartões são configurados em um único estilo: todas as configurações que você usar nesta seção serão aplicadas a todos os cartões da mesma seção. {% endhint %} ### Estilo dos cartões Há dois estilos de cartões no construtor de sites Mavibot: simples e em forma de slider. Ao usar o estilo simples, todos os cartões serão exibidos imediatamente em uma página da seção do site:
Ao usar o estilo "Slider", os cartões ficarão em forma de carrossel, adicionando assim mais dinamismo ao site: Para o estilo slider, você pode escolher onde as setas e os pontos do cartão ficarão localizados:
As setas podem ficar dentro do slider, fora dele ou ocultas (por exemplo, se você definir um temporizador para alternar automaticamente entre os cartões):
Os pontos também podem ficar dentro do slider, fora dele ou ocultos. Para percorrer os cartões automaticamente, defina o intervalo de tempo para exibir uma página:
Se o valor do temporizador for definido como 0, os cartões não serão percorridos automaticamente. {% hint style="warning" %} Atenção! O tempo é definido em milissegundos, sendo que um milissegundo é igual a 0,001 segundo. Isso significa que, se você precisar definir 7 segundos, insira o valor 7000 no campo. {% endhint %} Você também pode escolher o tipo de cartão:
#### Configurações de cor dos elementos do cartão Para personalizar os cartões de acordo com o seu estilo, use as configurações de cor:
As configurações de cor são aplicadas a todos os cartões ao mesmo tempo. Se você precisar que a cor do texto seja diferente em cada cartão, use as configurações no campo de texto. Há uma ampla paleta de cores disponível para personalização:
E você pode aplicar as configurações de cor a qualquer elemento do cartão. #### Configuração de bordas e espaçamentos
1. **Número de cartões por linha** - um campo de texto que ajudará a definir o número necessário de cartões em uma linha (página). 2. **Espaçamentos -** são campos para inserir valores numéricos que ajudarão a aumentar ou diminuir as margens horizontais/verticais entre os cartões, bem como as margens dentro dos cartões,
Você pode definir um valor numérico comum para o espaçamento dentro dos cartões ou, clicando na engrenagem no canto direito da linha, definir um valor separado para as bordas superior, inferior, esquerda e direita:
#### Orientação do cartão
A orientação do cartão pode ser horizontal ou vertical. #### Alinhamento Pode ser no centro, na borda esquerda ou direita.
#### Configurações de sombra Isso ajudará a adicionar profundidade aos cartões e destacá-los em relação ao fundo da seção/página.
## Configurações da imagem As configurações da imagem também são aplicadas a todas as imagens que você adicionou ao cartão.
Nas configurações da imagem, você precisa definir: a) largura da imagem:
O campo aceita um valor numérico em pixels; se não for especificado, será exibido automaticamente de acordo com a largura real da imagem em pixels. b) altura da imagem:
O campo aceita um valor numérico em pixels; se não for especificado, será exibido automaticamente em proporção à altura real da imagem. c) arredondamento:
O campo, que aceita um valor numérico em pixels, ajuda a arredondar os cantos da imagem:
d) tamanho da imagem:
A configuração é aplicada se for necessário preencher/esticar/posicionar a imagem em relação à largura e altura especificadas para ela. e) a caixa de seleção "Imagem após o texto" Se você marcar a caixa, a imagem ficará localizada abaixo do texto no cartão. ## Como configurar botões
O **texto** assim como o **link** para a página em que o visitante do site deve clicar, é configurado no próprio cartão:
Além disso, além do texto e do link, você pode definir um ícone para o botão enviando uma imagem no cartão:
Para definir a cor do texto e do fundo do botão, use as configurações aqui:
Em seguida, você pode ajustar o tamanho, a largura e os espaçamentos do botão:
1. **A largura do botão** - é um campo que aceita um valor numérico em pixels e em porcentagens:
2. **Alinhamento do botão** - ajuda a posicionar o botão no cartão em relação à borda direita ou esquerda, bem como ao centro.
3. **Raio da borda do botão -** é um campo que aceita um valor numérico em pixels para arredondar os cantos do botão:
4. **Largura da borda -** é um campo que aceita um valor numérico em pixels para definir a largura do contorno do botão:
5. **Margem** Ajuda você a ajustar os espaçamentos do botão no cartão em relação às bordas superior, inferior, esquerda e direita.
6. **Preenchimento** Ajuda você a ajustar os espaçamentos internos do botão.
7. **Ícone** Se você enviou um ícone para um botão no cartão, o ícone pode ser ajustado para caber:
E também definir a posição do ícone em relação ao texto, à esquerda ou à direita:
8. **Sombra para o botão** A sombra pode ser definida não apenas para o cartão, mas também separadamente para o botão. Para isso, basta encontrar um campo suspenso com o nome "Sombra" nas configurações do botão e selecionar o grau de intensidade da sombra: leve ou forte:
9. **Animação do botão**
Ela ajuda a atrair a atenção dos clientes (usuários do site) para a ação desejada no botão e a adicionar dinamismo ao site: 1\) animação de botão piscando:
2\) animação de botão com ripple:
{% hint style="success" %} Pronto! \ Agora você sabe como criar e personalizar cartões no seu site do zero. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.mavibot.ai/doc/pt/websites/sites/blocks/cards.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.