No mundo do aprendizado online, a facilidade de navegação desempenha um papel fundamental na atração e retenção de usuários. Os cartões de curso personalizáveis são uma ótima maneira de tornar seu site mais interativo e informativo.
Esses cartões permitem que os visitantes encontrem rapidamente os programas de seu interesse e naveguem facilmente para as páginas dos cursos com apenas um botão. Neste artigo, veremos como configurar uma seção de cartões de curso personalizáveis para melhorar a usabilidade do seu site e ajudar os usuários a atingir seus objetivos educacionais mais rapidamente.
Em vez de usar flashcards online, você pode adicionar listas de aulas à página do site: basta selecionar o curso necessário na seção e todas as aulas serão exibidas.
Como adicionar a seção "Cartões de curso"
Para adicionar a seção "Cartões de curso", clique no "+" no modo de edição do seu site.
Em seguida, encontre a seção "Cartões de curso" no menu que se abre e clique nela para adicionar a seção ao seu site:
A seção será adicionada ao seu site e o menu de configurações de conteúdo será aberto para você:
Seção de conteúdo
A configuração do conteúdo da seção Cartões de curso consiste em selecionar um ou mais cursos que já foram criados no projeto para exibir no site e personalizar os elementos do cartão.
Como criar cursos na plataforma Mavibot é descrito na seção “Cursos online”.
Escolhendo um curso
Escolha os cursos que você gostaria de exibir em seu site:
Para fazer isso, marque a caixa com o nome do curso desejado.
Por sua vez, os cursos selecionados serão imediatamente exibidos na página do seu site com a capa que você definiu nas configurações do curso.
Personalização
Depois de selecionar os cursos necessários, prossiga para personalizar os elementos do cartão:
- Sombra
Para os cartões de curso na seção, você pode ajustar a intensidade da sombra:
a) sem sombra:
b) sombra leve:
c) sombra forte:
Configurações de cores dos elementos do cartão
Personalize a aparência do cartão ajustando as cores de vários elementos. Você também pode adicionar efeitos de hover interativos.
- Cor do Texto: Altera a cor do texto principal no cartão (excluindo botões).
- Fundo do Cartão: Define a cor de fundo do cartão.
- Cor da Borda: Define a cor do contorno ou moldura do cartão.
- Texto do Botão: Define a cor do texto dentro do botão (estado estático).
- Fundo do Botão: Define a cor de fundo do botão.
Efeitos de hover interativos (seção opcional):
Ative os efeitos de hover para alterar dinamicamente a cor desses elementos quando o usuário passar o cursor sobre o cartão.
Agora você sabe como exibir os cursos disponíveis no seu site MaviBot usando a seção "Cartões de curso".
Para configurações de fundo e exibição, consulte o artigo "Configurações globais da seção".
Como adicionar o bloco "Aulas"
Para adicionar um bloco para exibir a lista de aulas do curso, mude para o modo de edição do site e passe o mouse sobre a área de trabalho, e então clique em "+":
Um menu é aberto à direita com as seções disponíveis do site, onde você precisa encontrar o bloco "Aulas":
Clique em "Cartões de curso", e então um menu será aberto para configurar o conteúdo do bloco:
Você só precisa selecionar o curso necessário, que já foi criado no Mavibot, no menu suspenso e clicar em "Salvar".
Em seguida, vá para as configurações para personalizar o conteúdo do bloco:
Personalização
Ao clicar no botão "Configurações" e passar o mouse sobre a seção, as configurações para personalizar o conteúdo e o próprio bloco são abertas:
Quais configurações estão disponíveis?
- Estilo da lista de aulas
Por padrão, o estilo da lista de aulas é exibido em um novo formato. Se necessário, você pode definir uma versão mais concisa do formato clássico:
- Estilo de numeração
O estilo de numeração está disponível para um novo estilo de exibição das aulas do curso. A numeração muda no próprio cartão da aula:
- Ícones das aulas
Eles são exibidos se você adicionou uma prévia dentro da própria aula nas configurações do curso.
Como adicionar ícones
Passo 1. Vá para as configurações da aula:
Para fazer isso, vá para o modo de configurações do curso e encontre a guia Aulas:
Em seguida, clique em "Editar", após o que a página da aula será aberta para edição.
Passo 2. Abra as configurações da página da aula.
Vá para a seção "Geral" nas configurações da página da aula:
Passo 3. Carregue a prévia da aula
Expanda a lista de configurações de imagem nas configurações de informações básicas:
Carregue uma imagem para a prévia da aula:
Salve as configurações.
Pronto! Agora as prévias das aulas serão exibidas como ícones na seção Aulas do site.
- Padrão de fundo
Isso adiciona volume e exclusividade aos seus cartões de aula:
- Arredondamento de elementos
O valor é definido em pixels e arredonda os cantos dos cartões de aula.
- Estilo do cartão de aula
Isso ajuda a organizar os cartões de aula em uma linha ou em uma linha com ou sem hifenização.
- Cor de fundo e texto
Há uma extensa paleta de cores disponível para definir a cor de fundo do cartão e a cor da fonte no cartão de aula:
Agora você sabe como adicionar listas de aulas ao seu site e personalizar o conteúdo da seção.
Para configurações de fundo e exibição, consulte o artigo "Configurações globais da seção".