# Öğrenci sayfası

Öğrenme deneyimini geliştiren bir öğrenci sayfasını nasıl oluşturacağınızı öğrenin.

Öğrenci arayüzü, kursunuzun ana merkezidir. Temiz ve kullanıcı dostu bir tasarım, öğrencilerin odaklı ve motive kalmasını sağlar; sıradan ziyaretçileri kararlı öğrenenlere dönüştürür.

<div align="left"><figure><img src="/files/7804f40d39964f08e4946d48b75c89074998b208" alt=""><figcaption></figcaption></figure> <figure><img src="/files/93314e50effd8fb91bc69e27916e132165c9cb7a" alt=""><figcaption></figcaption></figure></div>

Özel temalar ve ayarlar, öğrenci sayfanızın görünümünü ve hissini kişiselleştirmenize olanak tanır; böylece yalnızca birkaç tıklamayla şık ve etkileyici bir tasarım oluşturabilirsiniz. Bu rehber, bu sayfayı verimli bir şekilde nasıl yapılandıracağınızı göstererek onu kursunuzun stilini yansıtan ve sorunsuz bir öğrenme deneyimi sağlayan merkezi bir hub’a dönüştürecek.

**Öğrenci Sayfası nedir?**\
Salebot platformunda öğrenci sayfası, kursunuz için birincil çalışma alanı görevi gören kişiselleştirilmiş bir paneldir. Bir öğrencinin ihtiyaç duyduğu tüm araçları tek yerde toplar ve onların şunları yapmasını sağlar:

* Tüm kurs içeriğine ve materyallerine erişmek,
* Modüller ve dersler boyunca ilerlemelerini takip etmek,
* Dersleri tamamlamak ve ödevleri göndermek,
* Eğitmenler veya kolaylaştırıcılarla etkileşim kurmak.

Bu entegre ortam, öğrenme yolculuğunu kolaylaştırmak için tasarlanmıştır; öğrencilerin odaklı, düzenli ve motive kalmasını sağlar.

<figure><img src="/files/7804f40d39964f08e4946d48b75c89074998b208" alt=""><figcaption></figcaption></figure>

**Öğrenci sayfası neden önemlidir?**

Öğrenci sayfası, öğrenme sürecini yapılandırır ve kolaylaştırır. Öğrencilerin şunları yapmasını sağlar:

* Gerekli materyalleri hızlıca bulmak ve kaldıkları yerden çalışmalarına devam etmek.
* İlerlemlerini kolayca takip etmek; hangi görevlerin tamamlandığını ve hangilerinin hâlâ beklemede olduğunu görmek.
* Eğitmen geri bildirimi almak; daha kişiselleştirilmiş ve etkili bir öğrenme yolculuğunu kolaylaştırmak.

## Öğrenci sayfası nerede kurulur

{% hint style="success" %}
Kurs oluşturucu, “Businnes” abonelik planıyla kullanılabilir.
{% endhint %}

Başlamak için MaviBot’taki “Kurslar” bölümüne gidin.

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

Sonra, öğrenci sayfasını kurmak istediğiniz kursu seçin ve onun **ayarlarına gidin.**

<figure><img src="/files/7985c96823286123155eb5105500397bed1004c3" alt=""><figcaption></figcaption></figure>

Ardından ana kurs ayarları sayfasına yönlendirileceksiniz; burada “**Öğrenci Sayfası**” sekmesini de doldurmanız gerekir.

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

Şimdi öğrenci sayfasını özelleştirmeye başlamak için, ayarlar menüsünü açmak üzere dişli simgesini bulun.

<figure><img src="/files/106e0c4e4090c1cda43f711d870c7b0b4c86a0f8" alt=""><figcaption></figcaption></figure>

Dişli simgesine tıkladığınızda, varsayılan (özel) tema, kendi (düzenlenebilir) temanıza ilişkin ayarların yanı sıra ek ayarlar ve özel düğmeler ekleme seçeneğini içeren bir menü açılır.

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

## Ana tema

Öğrenci sayfasının ana teması, sayfayı yalnızca birkaç tıklamayla özelleştirmenizi sağlayan önceden yüklenmiş, hazır temalardan oluşur.

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

1\. Adım: İçin bir renk şeması seçin **Ana tema**

7 açık tema ve 2 koyu tema arasından seçim yapabilirsiniz.

Özel bir tema uygulandığında, aşağıdakiler dahil olmak üzere tüm ana sayfa öğelerinin renkleri güncellenir:

* Arka planlar (kapak görselleri, sayfa arka planı, ilerleme çubuğu, ders blokları)
* Düğmeler
* İlerleme çubuğu dolgu rengi
* Kenarlıklar, çerçeveler vb.

**2. Adım: Kenar yuvarlaklığı seviyesini seçin**

**a) Sıfır yuvarlaklık** – tüm köşeler ve sayfa öğeleri kare görünecektir.

<figure><img src="/files/2f3435b78e8b8cbe1cafc2b776acffc15bc2943d" alt=""><figcaption></figcaption></figure>

b) Orta yuvarlaklık – köşeler ve öğeler yuvarlak veya oval şeklinde görünecektir.

<figure><img src="/files/13a6cdaefc22a94cd0ce9fbd98a99a3a64b7ac34" alt=""><figcaption></figcaption></figure>

c) Maksimum yuvarlaklık – tüm köşeler ve sayfa öğeleri tamamen yuvarlatılmış kenarlara sahip olacaktır.

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

{% hint style="success" %}
Harika!

Artık öğrenci sayfanızın ana temasını nasıl hızlıca kuracağınızı biliyorsunuz.

Ek düğmeler eklemek, özel bir kapak görseli yüklemek veya sayfaya kendinize özgü bir renk şeması uygulamak istiyorsanız, bu makalenin sonraki bölümlerine devam etmenizi öneririz.
{% endhint %}

## Özel tema

“**Özel tema**” sekmesindeki ayarlar, öğrenci sayfasının öğelerine kendi benzersiz ve çeşitli renk şemalarınızı uygulamanıza olanak tanır.

<figure><img src="/files/450a9c922f84126bca61562d53e4f4e00e2689e6" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Lütfen dikkat edin

Ana tema ve Özel tema birlikte kullanılabilir.

Örneğin, Özel Tema sekmesindeki ayarları kullanarak yalnızca birkaç öğeye renk uygulayabilir, sayfanın geri kalanını ise seçilen Ana Tema stilinde bırakabilirsiniz.
{% endhint %}

#### Arka plan rengi

Bu ayar, tek tek öğeler hariç olmak üzere tüm sayfanın arka plan rengini değiştirir.

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

Renk paletini açmak ve istediğiniz rengi seçmek için kareye tıklayın.

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

Her öğe için geniş bir renk paletinin yanı sıra, saydamlık ölçeğini kullanarak renk yoğunluğunu da ayarlayabilirsiniz.

#### Arka plan kaplama rengi

Arka plan kaplama ayarlarını kullanarak sayfadaki temel görsel kapsayıcılara birleşik bir renk uygulayın:

a) İlerleme çubuğu;

b) Tekil ders blokları;,

c) Kurs kapak görseli alanı.

<figure><img src="/files/2d170ff8e9ae71818cf0936d8c7873b920aced81" alt=""><figcaption></figcaption></figure>

#### Vurgu rengi

Vurgu rengi ayarları, aşağıdakiler dahil olmak üzere öğrenci sayfasındaki ana vurgulu öğelerin renk şemasını değiştirmenizi sağlar:

a) ders gezinme düğmeleri;

b) ilerleme çubuğu dolgu rengi;

c) kenarlıklar, ders numarası arka planları ve benzeri öğeler.

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

#### Sayfa arka plan metin rengi

Bu ayar, sayfa arka planında görüntülenen metin için hoş bir renk şeması seçmenizi sağlar.

<figure><img src="/files/0bad202f63908e1eb4d2580a37ccc8deb2249f05" alt=""><figcaption></figcaption></figure>

#### Kaplama metin rengi

Bu ayar, arka plan kaplamalarının üzerinde görünen öğrenci sayfasındaki ana öğeler için metin rengini değiştirmenizi sağlar.

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

#### Vurgu metin rengi

Bu ayarı, çağrı kutuları ve etkileşimli düğmeler de dahil olmak üzere vurgu renkli bir arka plan üzerinde yer alan herhangi bir öğenin metin (yazı tipi) rengini tanımlamak için kullanın.

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

#### Ek ayarlar

Öğrenci sayfasının ek ayarlarında, sayfa kapağı olarak kullanmak üzere bir görsel yükleyebilirsiniz.

<figure><img src="/files/3605c42cd315afe4d878468520ce3b80f29bf584" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Lütfen dikkat edin

Cihazınızdan öğrenci sayfası kapağı olarak yüklenen görselin boyutu 15 MB’ı aşmamalıdır.
{% endhint %}

1\. Adım: Bir görsel yükleme

Bir görseli doğrudan bilgisayarınızdan yükleyebilirsiniz.

<figure><img src="/files/18d3bc6169135ba7ee0adf96977bf6b927267b3c" alt=""><figcaption></figcaption></figure>

Veya dosya depolamanızdaki bir bağlantı aracılığıyla görsel yükleyin.

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

Dosya depolamadan bir bağlantı aracılığıyla görsel yüklemenin avantajı, kapak olarak herhangi bir boyutta görsel kullanabilmenizdir.

{% hint style="info" %}
Dosya depolamanın nasıl kullanılacağı hakkında daha fazla bilgi için “[Dosya depolama](/doc/tr/chatbot/cloud.md)".
{% endhint %}

2\. Adım: Kapak yüksekliği

Görseli yükledikten sonra, öğrenci sayfasında uygun kapak yüksekliğini ayarlayın.

<figure><img src="/files/dc5fe8b412b3a552c7694d40c19ec8ced3bc0aa6" alt=""><figcaption><p>Yükseklik: 260px</p></figcaption></figure>

<figure><img src="/files/ec3bb4bf2074f2eb53ab1237834b7358ca07facf" alt=""><figcaption><p>Yükseklik: 400px</p></figcaption></figure>

3\. Adım: Görsel konumu

<figure><img src="/files/334927756f919480098e3bc731ff89f56c5be722" alt=""><figcaption></figcaption></figure>

Kullanabilirsiniz **önceden ayarlanmış konumlandırma seçenekleri** görseli c’ ye hizalamak için**merkez, sol, sağ veya alt**, ya da **özel ayarlar seçin.**

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

Daire kontrolünü hareket ettirerek görseli tam istediğiniz gibi konumlandırabilirsiniz.

4\. Adım: Görsel boyutu

<figure><img src="/files/190dfe66beca86c688ff66ad5e1e93d873f02c33" alt=""><figcaption></figcaption></figure>

Düğmenin **görsel boyutu alanı** c değerlerini kabul eder**ontain / cover**, ayrıca **piksel cinsinden sayısal değerleri (px)** ve **yüzdeleri (%)**.

1\) contain/cover değerleri

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

2\) sayısal değerler

<figure><img src="/files/986515ae5b3de366cda6b291f8fd8e09c88d9bec" alt=""><figcaption></figcaption></figure>

5\. Adım: Görsel tekrarı

Görsel şu yönde tekrar edilebilir: **Y ekseni**, yani **dikey olarak;** boyunca **X ekseni**, yani **yatay olarak** veya tekrarsız.

<figure><img src="/files/2814b2f8915022680d12762f0cebd595156704ab" alt=""><figcaption></figcaption></figure>

6\. Adım: Onay kutuları

Öğrencinin kişisel sayfa deneyimini iyileştirmek için aşağıdakilerin gösterimini etkinleştirebilirsiniz:

* ilerleme çubuğu,
* tamamlanan ders sayısı ve
* onaylanan ödev sayısı.

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

Bu öğeleri sayfada kullanmak istemiyorsanız, **onay kutularını devre dışı bırakabilirsiniz.**

## Düğmeler

Öğrenci sayfası, ilerleme çubuğunun altında özel çağrı-to-action düğmeleri ekleme özelliği içerir. Bu düğmeleri harici web sitelerine, belgelere veya diğer önemli sayfalara bağlayabilirsiniz.

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

Bir düğme eklemek için, ilgili sekmeyi **öğrenci sayfası ayarları.**

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

Sonra "**Düğme Ekle"**.

öğesine tıklayın. Ardından düğme yapılandırması için bir modal pencere açılır ve bir düğme metni girilir.

<figure><img src="/files/46c9a958e7666a9670f2a8b2230a83cc254df297" alt=""><figcaption></figcaption></figure>

Şimdi, bu düğme için hedef bağlantıyı (URL) belirtin.

<figure><img src="/files/96bfc12e5f370e82a2e466ca467c92403060105a" alt=""><figcaption></figcaption></figure>

Düğmenin renkleri ana tema paletini otomatik olarak devralacaktır. Ancak, hem arka planı hem de metni için özel bir renk belirleyerek bunu geçersiz kılabilirsiniz.

<figure><img src="/files/0a82c0e7d422457a97ea36b8d6131e977f215059" alt=""><figcaption></figcaption></figure>

Sonra, "Kaydet"e tıklayın.

<figure><img src="/files/173a1be656b99a66e350a5d0b6374b507bb92fac" alt=""><figcaption></figcaption></figure>

Düğme artık kaydedildi ve etkinleştirildi. Bunu öğrenci sayfasında ilerleme çubuğunun altında görüntülenmiş olarak göreceksiniz.

<figure><img src="/files/945ec4adf0d1f87235cefa11428c782ca0da8774" alt=""><figcaption></figcaption></figure>

Birden fazla düğme ekleyebilirsiniz – bunu yapmak için, ayarlar menüsüne gidin ve mevcut olanın altındaki "Düğme Ekle"ye tıklayın.

<figure><img src="/files/870e900ba69691305ab7862505ab3c43d258b160" alt=""><figcaption></figcaption></figure>

## Afişler&#x20;

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

Önemli kaynakları tanıtmak için, öğrenci sayfasına tıklanabilir afişler ekleyebilirsiniz. Bu afişler, bir mesajlaşma botu, topluluk grubu, önemli bir belge veya harici bir web sitesi gibi belirttiğiniz herhangi bir URL’ye bağlantı verebilir.

Kuruluma geçelim.

**1. Adım: Afiş ayarlarına erişin**

Kurs sayfası ayarlarında, bulun ve genişletin **"Afişler"** bölümünde görünecektir.

<figure><img src="/files/46c9a958e7666a9670f2a8b2230a83cc254df297" alt=""><figcaption></figcaption></figure>

Bunu yapmak için, ayarlar açılır menüsündeki bölüme tıklayın.:

<figure><img src="/files/31e9963288702d9ef8627a20a41b73549b52e4ea" alt=""><figcaption></figcaption></figure>

2\. Adım: Bir görsel yükleyin.

<figure><img src="/files/88e40774530d11a76091a3176916395205a62b7b" alt="" width="563"><figcaption></figcaption></figure>

Yükledikten sonra, görsel ayarlar alanında görünecektir.

3\. Adım: Görsel ayarlarına gidin.

<figure><img src="/files/18936774f99bb31e80658195acf402bc38183d37" alt=""><figcaption></figcaption></figure>

Bunu yapmak için, yüklenen görselin sol üst köşesindeki dişli simgesine tıklayın; bir ayar modal penceresi açılacaktır:

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

**4. Adım: Hedef bağlantıyı ayarlayın**\
Öğrencilerin afişe tıkladıklarında yönlendirilecekleri tam URL’yi girin. Bu bir web sayfası, bir mesajlaşma botu veya başka herhangi bir çevrimiçi kaynak olabilir.

**5. Adım: Afişin boyutlarını yapılandırın**\
Genişlik ve yükseklik için değerler girerek afişin görüntü boyutunu ayarlayın.

> **Önemli:** Bu alanlara yalnızca sayısal değerler girin (örneğin, `300`). Şu tür birimleri dahil etmeyin: `px` veya `%`.

**6. Adım: Yapılandırmanızı kaydedin**\
Tıklayın **"Kaydet"** tüm afiş ayarlarını uygulamak için.

**Kurulum tamamlandı!**\
Tıklanabilir afişiniz artık etkin. Afiş özelliği etkinleştirilmişse, öğrenci sayfasının sağ tarafında, ilerleme çubuğunun altında görünecektir.

### Birden fazla afiş nasıl eklenir

Tek bir sayfaya birkaç afiş ekleyebilirsiniz. Bunu yapmak için ayarlarda bir görsel yükleyin ve yukarıda açıklandığı gibi yapılandırın.

Zaten yüklenmiş bir görselin altındaki "Görsel Ekle"ye tıklarsanız, yeni afiş öğrencinin sayfasında daha önce eklenen afişin altında görünür.

1. Eklenen afişin altındaki görsel yükleme seçeneğini seçin (alttaki büyük yükleme düğmesi):

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

2. Görsel, daha önce eklenen afişin altına yüklendi.

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

3. Öğrencinin sayfasında, afiş daha önce eklenmiş olanın sonraki satırında görünecektir.

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

Zaten yüklenmiş bir görselin sağındaki "+" düğmesine tıklarsanız, yeni afiş öğrencinin sayfasında daha önce eklenen afişle aynı satırda görünecektir.

1. Sayfa ayarlarında yüklenen görselin sağındaki "+" düğmesine tıklayın.

<figure><img src="/files/07cfd245da3e03149b64ecf78f1308eb178c4d62" alt=""><figcaption></figcaption></figure>

Yeni yüklenen görsel sağ tarafa yerleştirilecektir.

<figure><img src="/files/4f37b19c34564b29ea477ac33aaef2d8b174fef2" alt="" width="563"><figcaption></figcaption></figure>

2. Öğrencinin sayfasında, afiş daha önce yüklenmiş olanla aynı satırda gösterilecektir.

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

Afişleri aynı satıra da sonraki satırlara da aynı anda ekleyebilirsiniz.

<figure><img src="/files/fd0028b5b0f2177de6a291c4a5e13967c9cd1c6b" alt=""><figcaption><p>Öğrenci Sayfası</p></figcaption></figure>

<figure><img src="/files/268f272d9d218e886ec0987c5a370e18f7525271" alt=""><figcaption><p>Afiş Ayarları</p></figcaption></figure>

{% hint style="success" %}
Her şey hazır!\
Artık öğrenci sayfasını tamamen nasıl yapılandıracağınızı biliyorsunuz!
{% endhint %}

## Sayfa önizlemesi

Öğrenci sayfasını yapılandırdıktan sonra, ilerlemenizi kaydetmeyi unutmayın.

<figure><img src="/files/02240583c4ab1d4625adedb9ff139e3d808836f5" alt=""><figcaption></figcaption></figure>

Ayarları kaydettikten sonra, "Önizleme" düğmesine tıklayın.

<figure><img src="/files/0eabe096f360a7c0ba4de63e8c63a44ce5ae0761" alt=""><figcaption></figcaption></figure>

Sonra, "Öğrenci Sayfasına Git"i seçin.

<figure><img src="/files/76092b327fec380a7166fe99c46a59aa87e50bbc" alt=""><figcaption></figcaption></figure>

Öğrenci sayfası önizlemesine yönlendirileceksiniz.

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

Düzenleme modundayken, önizleme paneli son düzeni görsel olarak incelemenizi sağlar. İlerleme çubuğu, afişler, düğmeler ve ders blokları gibi tüm öğelerin yapılandırmalarınıza göre nasıl konumlandığını ve stilize edildiğini görebilirsiniz.

{% hint style="warning" %}

## Lütfen dikkat edin

Önizleme **yalnızca görsel gösterim içindir**. Öğrenci sayfası önizlemesindeki öğeler **tıklanabilir değildir** ve herhangi bir gerçek gezinme veya işlevi tetiklemez.
{% 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/lms/builder/student_page.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.