# Panduan Pengaturan Layout & Customization

Halaman **Layout Settings** (Pengaturan Tata Letak) berfungsi sebagai pusat kontrol untuk mengelola tampilan elemen struktural *website* seperti Logo, Header, Footer, serta menu navigasi dan skema warna.

#### **1. 🖼️ Pengaturan Logo & Ikon (*Logo & Icons*)**

Bagian ini memungkinkan Anda mengelola identitas visual klinik di berbagai *platform* dan tampilan.

[![image.png](https://help.simka.id/uploads/images/gallery/2025-12/scaled-1680-/dGpimage.png)](https://help.simka.id/uploads/images/gallery/2025-12/dGpimage.png)

<table data-path-to-node="8" id="bkmrk-elemen-deskripsi-for"><thead><tr><td>**Elemen**</td><td>**Deskripsi**</td><td>**Format &amp; Ukuran Maksimal**</td></tr></thead><tbody><tr><td data-path-to-node="8,1,0,0">**Logo (Light Version)**</td><td data-path-to-node="8,1,1,0">Logo utama untuk *background* terang.</td><td data-path-to-node="8,1,2,0">PNG, JPG/JPEG, SVG, WEBP (Max 2MB).</td></tr><tr><td data-path-to-node="8,2,0,0">**Logo (Dark Version)**</td><td data-path-to-node="8,2,1,0">Logo alternatif untuk *background* gelap.</td><td data-path-to-node="8,2,2,0">PNG, JPG/JPEG, SVG, WEBP (Max 2MB).</td></tr><tr><td data-path-to-node="8,3,0,0">**Favicon**</td><td data-path-to-node="8,3,1,0">Ikon kecil yang muncul di *tab* *browser*.</td><td data-path-to-node="8,3,2,0">ICO, JPG/JPEG, PNG, SVG (Size 32x32px, Max 512KB).</td></tr><tr><td data-path-to-node="8,4,0,0">**Apple Touch Icon**</td><td data-path-to-node="8,4,1,0">Ikon untuk *shortcut* di perangkat iOS.</td><td data-path-to-node="8,4,2,0">PNG (Size 180x180px, Max 512KB).</td></tr></tbody></table>

> **Cara Mengubah Logo/Ikon:** Klik tombol **Choose File** untuk mengunggah file baru, lalu klik **Upload**. Gunakan tombol **Hapus** untuk menghilangkan gambar yang ada.

#### **2. 🎨 Pengaturan Gaya Tampilan (*Style Settings*)**

Bagian ini memungkinkan Anda memilih gaya tampilan elemen struktural, yang harus disesuaikan dengan **Template Website** yang sedang aktif.

[![image.png](https://help.simka.id/uploads/images/gallery/2025-12/scaled-1680-/cw6image.png)](https://help.simka.id/uploads/images/gallery/2025-12/cw6image.png)

##### A. Pemilihan Template (*Select Template*)

- Anda dapat memilih dan mengaktifkan salah satu *template* yang tersedia.
- **Perhatian Penting:** Pemilihan *template* di sini harus **sesuai** dengan *template* yang Anda aktifkan di halaman **Template Website** sebelumnya, untuk memastikan Header, Style, dan Footer yang dipilih bekerja dengan benar. Header, *style*, dan *font* varian akan berubah sesuai *template* yang dipilih.

##### B. Header &amp; Footer Style

[![image.png](https://help.simka.id/uploads/images/gallery/2025-12/scaled-1680-/2v3image.png)](https://help.simka.id/uploads/images/gallery/2025-12/2v3image.png)

Anda dapat memilih gaya Header dan Footer yang berbeda-beda:

- **Header Style:** Pilih gaya desain untuk bagian atas (*header*) *website* Anda (Contoh: Header, Header1).
- **Style Theme:** Pilih gaya visual tema utama (*style theme*) *website* Anda (Contoh: Head, Head1, Header, Header1).
- **Footer Style:** Pilih gaya desain untuk bagian bawah (*footer*) *website* Anda (Contoh: Footer).

#### **3. 📑 Pengelolaan Menu &amp; Warna (*Menu Management &amp; Color Customization*)**

##### A. Menu Management

[![image.png](https://help.simka.id/uploads/images/gallery/2025-12/scaled-1680-/PvHimage.png)](https://help.simka.id/uploads/images/gallery/2025-12/PvHimage.png)

- Fitur ini mengontrol menu mana saja yang akan ditampilkan di navigasi *website* (*frontend*).
- **Mengaktifkan Menu:** Centang kotak di samping nama menu (Contoh: Beranda, Dokter, Layanan, Kontak) untuk mengaktifkan dan menampilkannya di *frontend*.
- **Menonaktifkan Menu:** Hapus centang pada kotak untuk menyembunyikan menu tersebut dari tampilan *frontend*.
- **Mengatur Urutan:** Anda dapat menggunakan fitur *drag* dan *drop* (geser dan lepas) untuk mengatur urutan menu.
- Tombol **Reset to Default** dapat mengembalikan pengaturan menu ke susunan awal.

##### B. Color Customization (Dalam Pengembangan)

[![image.png](https://help.jasuncare.id/uploads/images/gallery/2025-11/scaled-1680-/uOiimage.png)](https://help.jasuncare.id/uploads/images/gallery/2025-11/uOiimage.png)

- Bagian ini memungkinkan Anda mengatur skema warna utama *website*.
- *Field* yang tersedia: **Primary Color**, **Secondary Color**, dan **Accent Color**.
- **Status Pengembangan:** Saat ini, pengaturan warna masih dalam tahap pengembangan (*development*) dan belum berfungsi.

Setelah semua pengaturan selesai, klik tombol **Save Settings** untuk menyimpan perubahan.