A seção "Cartões personalizáveis" no construtor de sites foi projetada 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 atraentes à 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 de curso" ajudarão a destacar 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 se abre 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 da seção "Cartões personalizáveis" do conteúdo, você verá várias seções para configurações: estilo dos cartões, imagens, botões, etc.
Para sua conveniência, você pode adicionar cartões primeiro para ver como as configurações de estilo se aplicam aos cartões.
Para fazer 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 carregar uma imagem para o cartão e para o ícone do botão, bem como para o texto do próprio botão:
Os campos de configuração do cartão são opcionais: isso significa que você pode pular, por exemplo, o upload 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" vazios: então os botões não serão exibidos no cartão.
Existem várias configurações para o texto do cartão, semelhantes a qualquer editor de texto, onde você pode ajustar o tamanho da fonte, contorno da fonte, cor, destaque, bem como adicionar um link e muito mais.
Para fazer isso, selecione o texto (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", que está localizado abaixo da barra de configurações do primeiro cartão adicionado:
Configurações dos cartões
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 na mesma seção.
Estilo dos cartões
Existem dois estilos para cartões no construtor de sites Mavibot: simples e em forma de slider.
Ao usar um 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 mais dinamismo ao site:
Para o estilo slider, você pode escolher onde as setas e os pontos do cartão serão localizados:
As setas podem estar localizadas dentro do slider, fora ou ocultas (por exemplo, se você definir um temporizador para virar automaticamente os cartões):
Os pontos também podem estar localizados dentro do slider, fora 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.
Preste atenção!
O tempo é definido em milissegundos, onde um milissegundo é igual a 0,001 segundos. Isso significa que, se você precisar definir 7 segundos, insira o valor no campo 7000.
Você também pode escolher o tipo de cartão:
Configurações de cor para elementos do cartão
Para personalizar os cartões ao 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.
Uma ampla paleta de cores está disponível para personalização de cores:
E você pode aplicar as configurações de cor a qualquer elemento do cartão.
Configuração de bordas e preenchimentos
- Número de cartões por linha - um campo de texto que ajudará você a definir o número necessário de cartões em uma linha (página).
- Preenchimentos - 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 recuo 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 e também vertical.
Alinhamento
Pode ser no centro, na borda esquerda ou direita.
Configurações de sombra
Ajudará a adicionar profundidade aos cartões e destacá-los contra o fundo da seção/página.
Configurações de imagem
As configurações de imagem também são aplicadas a todas as imagens que você adicionou ao cartão.
Nas configurações de imagem, você precisa definir:
a) largura da imagem:
O campo aceita um valor numérico em pixels; se não for especificado, é 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, é 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 a imagem.
e) a caixa de seleção "Imagem após o texto"
Se você marcar a caixa, a imagem será localizada abaixo do texto no cartão.
Como configurar botões
O texto, bem como o link para a página que o visitante do seu site deve clicar, são configurados no próprio cartão:
Além disso, além do texto e do link, você pode definir um ícone para o botão carregando 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 preenchimentos do botão:
- A largura do botão - é um campo que aceita um valor numérico tanto em pixels quanto em porcentagens:
- Alinhamento do botão - ajuda a definir o botão no cartão em relação à borda direita ou esquerda, bem como ao centro.
- Raio da borda do botão - é um campo que aceita um valor numérico em pixels para arredondar os cantos do botão:
- Largura da borda - é um campo que aceita um valor numérico em pixels para definir a largura do contorno do botão:
- Margem
Ajuda você a ajustar os preenchimentos para o botão no cartão em relação às bordas superior, inferior, esquerda e direita.
- Preenchimento
Ajuda você a ajustar os preenchimentos dentro do botão.
- Ícone
Se você carregou um ícone em 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:
- 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 fazer 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:
- Animação do botão
Ajuda a atrair a atenção dos clientes (usuários do site) para a ação direcionada no botão e adicionar dinamismo ao site:
1) animação de flash do botão:
2) animação de ondulação do botão:
Pronto!
Agora você sabe como criar e personalizar cartões no seu site do zero.