# Çevrimiçi kurs bölümü

Çevrimiçi öğrenme dünyasında, gezinme kolaylığı kullanıcıları çekmede ve elde tutmada önemli bir rol oynar. Özelleştirilebilir kurs kartları, web sitenizi daha etkileşimli ve bilgilendirici hale getirmenin harika bir yoludur.

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

Bu kartlar, ziyaretçilerin ilgilendikleri programları hızlıca bulmalarını ve tek bir düğmeyle kurs sayfalarına kolayca gitmelerini sağlar. Bu makalede, web sitenizin kullanılabilirliğini artırmak ve kullanıcıların eğitim hedeflerine daha hızlı ulaşmalarına yardımcı olmak için özelleştirilebilir kurs kartlarından oluşan bir bölümün nasıl kurulacağını inceleyeceğiz.

Çevrimiçi bilgi kartları kullanmak yerine, web sayfasına ders listeleri ekleyebilirsiniz: bölümde yalnızca gerekli kursu seçin ve tüm dersler görüntülenecektir.

## "Kurs kartları" bölümünü nasıl eklenir

"Kurs kartları" bölümünü eklemek için, web sitenizin düzenleme modunda "+" işaretine tıklayın.

Ardından açılan menüde "Kurs kartları" bölümünü bulun ve bölümü web sitenize eklemek için üzerine tıklayın:

<figure><img src="/files/8e3b5b8c05e093d3a7185e0bc1cba79bb6995910" alt=""><figcaption></figcaption></figure>

Bölüm web sitenize eklenecek ve içerik ayarları menüsü sizin için açılacaktır:

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

### İçerik bölümü

Kurs kartları bölümünün içeriğini yapılandırmak, web sitesinde görüntülemek için projede zaten oluşturulmuş olan kurs(lar)ı seçmek ve kart öğelerini özelleştirmekten oluşur.&#x20;

{% hint style="info" %}
Salebot platformunda kursların nasıl oluşturulacağı bölüm “[Çevrimiçi kurslar”](broken://pages/d235866013900fa066adb4c4c76ffbb8c989a239).
{% endhint %}

#### Kurs seçme

Web sitenizde sergilemek istediğiniz kursları seçin:

<figure><img src="/files/796407643cea5c69b24bdfde05451f30e91c9ca4" alt=""><figcaption></figcaption></figure>

Bunu yapmak için, gerekli kursun adının bulunduğu kutuyu işaretleyin.

Seçilen kurslar, kurs ayarlarında belirlediğiniz kapakla birlikte hemen web sayfanızda görüntülenecektir.

#### Özelleştirme

Gerekli kursları seçtikten sonra, kart öğelerini özelleştirmeye devam edin:

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

* Gölge

<figure><img src="/files/51ce7a8bc18c115926f87a40b6209e0d021afa6c" alt=""><figcaption></figcaption></figure>

Bölümdeki kurs kartları için gölge yoğunluğunu ayarlayabilirsiniz:

a) gölgesiz:

<figure><img src="/files/48d9fc44a712ce027f7f37211d9e6d53170a3c34" alt=""><figcaption></figcaption></figure>

b) hafif gölge:

<figure><img src="/files/14b8cd7d1f10a0217e476e2d3cbe29be38a50c33" alt=""><figcaption></figcaption></figure>

c) güçlü gölge:

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

#### Kart öğeleri renk ayarları

Çeşitli öğelerin renklerini ayarlayarak kartın görünümünü özelleştirin. Etkileşimli üzerine gelme efektleri de ekleyebilirsiniz.

* **Metin Rengi:** Kart üzerindeki ana metin rengini değiştirir (düğmeler hariç).
* **Kart Arka Planı:** Kartın arka plan rengini ayarlar.
* **Kenarlık Rengi:** Kartın dış çizgisinin veya çerçevesinin rengini tanımlar.
* **Düğme Metni:** Düğme içindeki metnin rengini ayarlar (statik durum).
* **Düğme Arka Planı:** Düğmenin arka plan rengini ayarlar.

**Etkileşimli üzerine gelme efektleri (isteğe bağlı bölüm):**

Kullanıcı imleci kartın üzerine geldiğinde bu öğelerin rengini dinamik olarak değiştirmek için üzerine gelme efektlerini etkinleştirin.

Artık "Kurs kartları" bölümünü kullanarak MaviBot sitenizde mevcut kursları nasıl görüntüleyeceğinizi biliyorsunuz.

{% hint style="info" %}
Arka plan ve görüntüleme ayarları için makaleye bakın [“Genel bölüm ayarları”](/doc/tr/websites/siteler/blocks/settings.md).
{% endhint %}

## "Dersler" bloğu nasıl eklenir

Kurs içindeki ders listesini görüntülemek için bir blok eklemek üzere web sitesi düzenleme moduna geçin ve çalışma alanının üzerine gelin, ardından "+" işaretine tıklayın:

Sağ tarafta sitenin mevcut bölümlerinin bulunduğu bir menü açılır; burada "Dersler" bloğunu bulmanız gerekir:

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

"Kurs kartları"na tıklayın, ardından bloğun içeriğini yapılandırmak için bir menü açılacaktır:

<figure><img src="/files/8c5a3a7fffe86909feba65b33773f6ccf1f9d11d" alt=""><figcaption></figcaption></figure>

Yalnızca Salebot’ta zaten oluşturulmuş olan gerekli kursu açılır menüden seçmeniz ve "Kaydet"e tıklamanız gerekir.

Ardından blok içeriğini özelleştirmek için ayarlara gidin:

<figure><img src="/files/66bb92cf029e2a1b0ab2ee72ebe50a38cfc26f3b" alt=""><figcaption></figcaption></figure>

### Özelleştirme

"Ayarlar" düğmesine tıklayıp bölümün üzerine geldiğinizde, içeriği ve bloğun kendisini özelleştirmek için ayarlar açılır:

<figure><img src="/files/7312dba1201c192f775f7242728674a1a123fe19" alt=""><figcaption></figcaption></figure>

**Hangi ayarlar mevcuttur?**

1. Ders listesi stili

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

Varsayılan olarak, ders listesinin stili yeni bir biçimde görüntülenir. Gerekirse, klasik biçimin daha özlü bir sürümünü ayarlayabilirsiniz:

<figure><img src="/files/49d2b972029f36a010fd32bc80fdc1579841769e" alt=""><figcaption><p>Klasik stil</p></figcaption></figure>

2. Numaralandırma stili

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

Numaralandırma stili, derslerin yeni bir gösterim tarzı için mevcuttur. Numaralandırma, ders kartının içinde değişir:

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

3. Ders ikonları

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

**Kurs ayarlarında dersin içine bir önizleme eklediyseniz görüntülenirler.**

#### **İkonlar nasıl eklenir**

1\. Adım. Ders ayarlarına gidin:

Bunu yapmak için kurs ayarları moduna gidin ve Dersler sekmesini bulun:

<figure><img src="/files/1aa920081341c312ebc23bd63dfe6c72910eaab6" alt=""><figcaption></figcaption></figure>

Ardından, "Düzenle"ye tıklayın; bunun ardından ders sayfası düzenleme için açılacaktır.

2\. Adım. Ders sayfası ayarlarını açın.

<figure><img src="/files/86e5321dbae379e8ca3168cffee5df1e572398af" alt=""><figcaption></figcaption></figure>

Ders sayfası ayarlarında "Genel" bölümüne gidin:

<figure><img src="/files/430bd540b805788026f0f1245e9ab487e2fa825e" alt=""><figcaption></figcaption></figure>

3\. adım. Ders önizlemesini yükleyin

Temel bilgi ayarlarında resim ayarları listesini genişletin:

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

Ders önizlemesi için bir görsel yükleyin:

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

Ayarları kaydedin.

{% hint style="success" %}
Bitti! Artık ders önizlemeleri, web sitesindeki Dersler bölümünde simgeler olarak görüntülenecektir.
{% endhint %}

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

3. Arka plan deseni

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

Ders kartlarınıza hacim ve benzersizlik katar:

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

4. Öğe yuvarlatma

Değer piksel cinsinden ayarlanır ve ders kartlarının köşelerini yuvarlar.

5. Ders kartı stili

<figure><img src="/files/94812b789a6affb9371ef9a4de67ce3c96e2ea17" alt=""><figcaption></figcaption></figure>

Ders kartlarını tek bir satıra veya tireli ya da tiresiz bir satıra düzenlemeye yardımcı olur.

6. Arka plan ve metin rengi

<figure><img src="/files/149c4d85b1759a6a14fe597fc05793eb7b2ac4b4" alt=""><figcaption></figcaption></figure>

Kartın arka plan rengini ve ders kartındaki yazı tipi rengini ayarlamak için geniş bir renk paleti mevcuttur:

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

Artık web sitenize ders listeleri eklemeyi ve bölümün içeriğini nasıl özelleştireceğinizi biliyorsunuz.

{% hint style="info" %}
Arka plan ve görüntüleme ayarları için makaleye bakın [“Genel bölüm ayarları”](/doc/tr/websites/siteler/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/tr/websites/siteler/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.