> ## Documentation Index
> Fetch the complete documentation index at: https://help.indolat.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cara Mengatur Tampilan Website melalui Kustomisasi Branding

Selain mengatur cara login Peserta, Anda juga dapat menyesuaikan tampilan sistem agar lebih mudah dikenali oleh Peserta.

Anda dapat mengatur warna website, logo website, serta tampilan depan website ujian CBT yang akan Anda selenggarakan.

<Steps>
  <Step title="Buka menu Pengaturan Aplikasi, pilih 'Pengaturan Lainnya'">
    <Frame>
      <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_03-55.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=bc7b19f4c49214971029a007128b3d0c" alt="2026 07 25 03 55" width="1893" height="916" data-path="images/2026-07-25_03-55.png" />
    </Frame>
  </Step>

  <Step title="Atur tampilan sistem CBT agar sesuai dengan Branding Perusahaan atau Institusi Anda">
    <Frame>
      <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_03-57.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=4c7786a19ed9e292096f755d62ff593f" alt="2026 07 25 03 57" width="1891" height="708" data-path="images/2026-07-25_03-57.png" />
    </Frame>

    1. \*\*Warna Utama \*\*<br />Pilih warna yang akan digunakan sebagai warna utama pada tampilan sistem CBT.
       > 💡 Contohnya, jika lembaga Anda menggunakan warna hijau tosca, pilih warna hijau tosca agar tombol dan beberapa bagian tampilan mengikuti identitas lembaga.
       >
       >     <Frame>
       >       <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_03-57_1.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=f72bc49e24de3a3ac4ec364bc72f491a" alt="2026 07 25 03 57 1" width="692" height="239" data-path="images/2026-07-25_03-57_1.png" />
       >     </Frame>
       >
       > Berikut tampilan pada Peserta Ujian
       >
       >     <Frame>
       >       <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_03-58_1.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=bcd4a974f33adcf5311d35f52cd2f816" alt="2026 07 25 03 58 1" width="1759" height="918" data-path="images/2026-07-25_03-58_1.png" />
       >     </Frame>
           <Tip>
             Anda dapat memasukkan kode warna sendiri atau memilih warna cepat yang sudah tersedia.
           </Tip>
    2. **Logo Sistem CBT**
       Unggah logo utama lembaga Anda dengan pilih '**Jelajahi**'.
           <Frame>
             <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-02.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=171f49cdb5a1a7ea6ef6f41e3330ac37" alt="2026 07 25 04 02" width="701" height="155" data-path="images/2026-07-25_04-02.png" />
           </Frame>
       > 💡 Contoh logo : 
       >
       >     <Frame>
       >       <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-02_1.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=6ccb439586a759d352dd4aaa3891cbe8" alt="2026 07 25 04 02 1" width="698" height="337" data-path="images/2026-07-25_04-02_1.png" />
       >     </Frame>
       >
       > Logo ini akan tampil pada halaman sistem dan membantu Peserta memastikan bahwa mereka sedang membuka sistem CBT yang benar.
       >
       >     <Frame>
       >       <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-04.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=82419a4e769bb6bf63d7acfa84488473" alt="2026 07 25 04 04" width="1651" height="903" data-path="images/2026-07-25_04-04.png" />
       >     </Frame>
           <Tip>
             Gunakan gambar berformat **PNG** dengan ukuran maksimal **300 KB**.
           </Tip>
    3. **Logo Favicon**
       Favicon adalah gambar kecil yang tampil pada bagian atas browser, tepatnya di sebelah nama halaman.
       > 💡 Contoh untuk favicon disamakan dengan logo
       >
       >     <Frame>
       >       <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-07-1.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=e44904743ee510798aaf1255d16a8576" alt="2026 07 25 04 07 1" width="700" height="178" data-path="images/2026-07-25_04-07-1.png" />
       >     </Frame>
       >
       > Berikut tampilan pada Peserta, *perhatikan pojok kiri atas*.
       >
       >     <Frame>
       >       <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-05.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=829779d64795dc51316c1d93a7f8c003" alt="2026 07 25 04 05" width="1919" height="882" data-path="images/2026-07-25_04-05.png" />
       >     </Frame>
           <Tip>
             Jika bagian ini dikosongkan, sistem akan menggunakan **Logo Sistem CBT** secara otomatis.
           </Tip>
    4. **Banner Login**
       Unggah gambar yang akan ditampilkan di sebelah halaman login Peserta.
       > Bagian ini dapat digunakan untuk menampilkan:
       >
       > * informasi tryout
       > * promosi lembaga
       > * jadwal ujian 
       > * atau gambar identitas lembaga
       > * ukuran yang disarankan **1400 × 1000 piksel**.
       >       <Frame>
       >         <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-08.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=6f807ba64aca1312cfac9bd078bfe6ae" alt="2026 07 25 04 08" width="694" height="344" data-path="images/2026-07-25_04-08.png" />
       >       </Frame>
       >
       > Gunakan gambar yang sederhana dan mudah dibaca agar tidak membingungkan peserta saat akan masuk. Berikut tampilan pada Peserta.
       >
       >     <Frame>
       >       <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_05-22.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=63e17a2c861a70bb8f251f91f0bc49b9" alt="2026 07 25 05 22" width="1918" height="1002" data-path="images/2026-07-25_05-22.png" />
       >     </Frame>
       >
       >     <Tip>
       >       Kustomisasi Branding <u>hanya mengubah tampilan sistem</u>. Cara peserta masuk dan tautan login tetap mengikuti pengaturan pada bagian **Informasi Umum**.
       >     </Tip>
  </Step>

  <Step title="Setelah seluruh pilihan sesuai, pilih tombol 'Simpan'">
    <Frame>
      <img src="https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-09.png?fit=max&auto=format&n=w32v_kPLyQnzLAH7&q=85&s=d94d3c82e41c2074a28bbacec8bfe06c" alt="2026 07 25 04 09" width="1354" height="708" data-path="images/2026-07-25_04-09.png" />
    </Frame>
  </Step>
</Steps>