# Seção de curso online

No mundo do aprendizado online, a facilidade de navegação desempenha um papel fundamental para atrair e reter usuários. Os cards de curso personalizáveis são uma ótima maneira de tornar seu site mais interativo e informativo.

<figure><img src="/files/d03e41a8bddd69ad2b3345a560cb1b7a359c7300" alt=""><figcaption></figcaption></figure>

Esses cards 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 cards de curso personalizáveis para melhorar a usabilidade do seu site e ajudar os usuários a alcançar 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 "Cards de curso"

Para adicionar a seção "Cards de curso", clique no "+" no modo de edição do seu site.

Em seguida, encontre a seção "Cards de curso" no menu que se abre e clique nela para adicionar a seção ao seu site:

<figure><img src="/files/442db2ff58acde8cc64cc06476afc43ee84e40db" alt=""><figcaption></figcaption></figure>

A seção será adicionada ao seu site, e o menu de configurações de conteúdo será aberto para você:

<figure><img src="/files/c490427c1e4ff9b76afa49c2474821f2ab5c80eb" alt=""><figcaption></figcaption></figure>

### Seção de conteúdo

A configuração do conteúdo da seção de Cards de curso consiste em selecionar um(s) curso(s) que já foi criado no projeto para exibir no site e personalizar os elementos do card.&#x20;

{% hint style="info" %}
Como criar cursos na plataforma Salebot é descrito na seção “[Cursos online”](broken://pages/fd4a2bc254ff4207c5ce70d02625ad80214280ee).
{% endhint %}

#### Escolhendo um curso

Escolha os cursos que você gostaria de destacar em seu site:

<figure><img src="/files/6e0e61577060afa5316297d4c999fc2f9fba0b91" alt=""><figcaption></figcaption></figure>

Para isso, marque a caixa com o nome do curso desejado.

Em seguida, os cursos selecionados serão exibidos imediatamente 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 card:

<figure><img src="/files/cfa618392146809fea037db04080725a5aa67a15" alt=""><figcaption></figcaption></figure>

* Sombra

<figure><img src="/files/05d132949e0bc26b2e753f5ea570bb4a1f0256e1" alt=""><figcaption></figcaption></figure>

Para os cards de curso na seção, você pode ajustar a intensidade da sombra:

a) sem sombra:

<figure><img src="/files/7e3a0090978514d13ee22b5edf8460c24b8b574f" alt=""><figcaption></figcaption></figure>

b) sombra leve:

<figure><img src="/files/061f2ba2e9f27e2c7b20fb4886ba8614330842cb" alt=""><figcaption></figcaption></figure>

c) sombra forte:

<figure><img src="/files/fb6d3ac4dc4f6efbad27fd4e02f5c3cd69687d2c" alt=""><figcaption></figcaption></figure>

#### Configurações de cor dos elementos do card

Personalize a aparência do card ajustando as cores de vários elementos. Você também pode adicionar efeitos interativos ao passar o mouse.

* **Cor do texto:** Altera a cor principal do texto no card (exceto botões).
* **Fundo do card:** Define a cor de fundo do card.
* **Cor da borda:** Define a cor do contorno ou da moldura do card.
* **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 interativos ao passar o mouse (seção opcional):**

Ative os efeitos de hover para alterar dinamicamente a cor desses elementos quando o usuário mover o cursor sobre o card.

Agora você sabe como exibir os cursos disponíveis no seu site MaviBot usando a seção "Cards de curso".

{% hint style="info" %}
Para configurações de fundo e exibição, veja o artigo ["Configurações globais da seção"](/doc/pt/websites/sites/blocks/settings.md).
{% endhint %}

## 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, passe o mouse sobre a área de trabalho e, em seguida, clique em "+":

Um menu se abre à direita com as seções disponíveis do site, onde você precisa encontrar o bloco "Aulas":

<figure><img src="/files/b59eb7ec06aa069a450b588c32fc8c3c25737d99" alt=""><figcaption></figcaption></figure>

Clique em "Cards de curso" e, em seguida, um menu será aberto para configurar o conteúdo do bloco:

<figure><img src="/files/dfc391745331dedb93865d6d78e3c4ad9ff9e010" alt=""><figcaption></figcaption></figure>

Você só precisa selecionar o curso necessário, que já foi criado no Salebot, no menu suspenso e clicar em "Salvar".

Em seguida, vá para as configurações para personalizar o conteúdo do bloco:

<figure><img src="/files/7d3a3c9e6ada6e5f83659ee3b097f7d89519ac46" alt=""><figcaption></figcaption></figure>

### 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 se abrem:

<figure><img src="/files/aabee5968d57bd7ddc4cf233aaf60a0f5617af5c" alt=""><figcaption></figcaption></figure>

**Quais configurações estão disponíveis?**

1. Estilo da lista de aulas

<figure><img src="/files/db2b90962fa51f94a8276a09db31721223622b60" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/7cb0090ac58700ee9414783c16d1cdeb741d3bde" alt=""><figcaption><p>Estilo clássico</p></figcaption></figure>

2. Estilo de numeração

<figure><img src="/files/7b9f3ce88a05f9a2f2e16c102f4fcc7fcd5493b2" alt=""><figcaption></figcaption></figure>

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 card da aula:

<figure><img src="/files/052efdd344a69b851982d2baa8e1410b59892862" alt=""><figcaption></figcaption></figure>

3. Ícones das aulas

<figure><img src="/files/385aff303be1aedb0752651b986a369a0a229ce4" alt=""><figcaption></figcaption></figure>

**Eles são exibidos se você adicionou uma prévia dentro da própria aula nas configurações do curso.**

#### **Como adicionar ícones**

Etapa 1. Vá para as configurações da aula:

Para fazer isso, acesse o modo de configurações do curso e encontre a aba Aulas:

<figure><img src="/files/4dc821e749979ed6b59ac76f736251de91bd5b8a" alt=""><figcaption></figcaption></figure>

Em seguida, clique em "Editar", após o qual a página da aula será aberta para edição.

Etapa 2. Abra as configurações da página da aula.

<figure><img src="/files/9a42d75678417d457c0ce70ef191de1178c51bfa" alt=""><figcaption></figcaption></figure>

Vá para a seção "Geral" nas configurações da página da aula:

<figure><img src="/files/e5c5ec6e4d980cb11381e53bcc90b7adca523946" alt=""><figcaption></figcaption></figure>

Etapa 3. Envie a prévia da aula

Expanda a lista de configurações de imagem nas configurações de informações básicas:

<figure><img src="/files/120c3589b30f6393a784d48ae0f930184916d2cb" alt=""><figcaption></figcaption></figure>

Envie uma imagem para a prévia da aula:

<figure><img src="/files/7a65d899ed8607b893fe1eb0a4adebbd16b2ef87" alt=""><figcaption></figcaption></figure>

Salve as configurações.

{% hint style="success" %}
Pronto! Agora as prévias das aulas serão exibidas como ícones na seção Aulas do site.
{% endhint %}

<figure><img src="/files/639a75abcd5f64517222fa8582a3d3254d27e0f3" alt=""><figcaption></figcaption></figure>

3. Padrão de fundo

<figure><img src="/files/acf57590ac83ac69836332a7764a50f052fe94e3" alt=""><figcaption></figcaption></figure>

Isso adiciona volume e exclusividade aos seus cards de aula:

<figure><img src="/files/4f2651f67230cda7b5662d59fefed222bfd23a8a" alt=""><figcaption></figcaption></figure>

4. Arredondamento dos elementos

O valor é definido em pixels e arredonda os cantos dos cards de aula.

5. Estilo do cartão da aula

<figure><img src="/files/c713e20d88dcc97cf8e2dd50eeb2a4558a3afff6" alt=""><figcaption></figcaption></figure>

Isso ajuda a organizar os cards de aula em uma única linha ou em uma linha com ou sem hifenização.

6. Cor de fundo e do texto

<figure><img src="/files/672de0e41c07304166f26e1e479534c44c838e60" alt=""><figcaption></figcaption></figure>

Há uma ampla paleta de cores disponível para definir a cor de fundo do card e a cor da fonte no card da aula:

<figure><img src="/files/b20488bf1182342a3d659bc663230f78236179c4" alt=""><figcaption></figcaption></figure>

Agora você sabe como adicionar listas de aulas ao seu site e personalizar o conteúdo da seção.

{% hint style="info" %}
Para configurações de fundo e exibição, veja o artigo ["Configurações globais da seção"](/doc/pt/websites/sites/blocks/settings.md).
{% 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/course.md?ask=<question>
```

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.