Pengalih bahasa adalah elemen navigasi utama untuk lalu lintas internasional Anda. MultiLipi menyediakan editor antarmuka ganda, yang memungkinkan Anda mengontrol perilaku dan estetika elemen ini secara independen untuk tampilan Desktop dan Seluler.
Panduan ini mencakup konfigurasi Tata Letak, Pemosisiandan Gaya Merek melalui MultiLipi Command Center.
1. Mengakses Editor Antarmuka
Untuk mulai menyesuaikan integrasi frontend Anda:
- 1Arahkan ke Dasbor MultiLipi.
- 2Buka Pengaturan dari menu sebelah kiri.
- 3Pilih Pengalih Bahasa.
💡 Kiat Pro: Anda akan masuk ke Editor Pengalih, yang menampilkan kanvas pratinjau waktu nyata. Gunakan pengalih di bagian atas untuk beralih antara Desktop dan Telepon selular tampilan untuk memastikan responsivitas di berbagai perangkat.
2. Langkah 1: Memilih Arsitektur (Penempatan)
Tentukan bagaimana pengalih berperilaku di dalam DOM Anda. Anda memiliki dua mode penerapan:
Mode A: Mengambang (Default)
Perilaku: Pengalih melayang di atas konten Anda, tertambat pada sudut layar tertentu (misalnya, Kanan-Bawah).
Kasus Penggunaan: Terbaik untuk visibilitas segera tanpa mengubah kode tata letak situs web Anda yang ada.
Mode B: Tertanam (Terintegrasi)
Perilaku: Pengalih disuntikkan ke dalam elemen HTML tertentu yang Anda tentukan (misalnya, di dalam Bilah Navigasi atau Footer).
⚠️ Protokol Cadangan
Jika wadah HTML yang Anda tentukan tidak dapat ditemukan di halaman tertentu, MultiLipi Logika Pengembalian secara otomatis mengembalikan pengalih ke "Mode Mengambang." Ini memastikan pengguna tidak pernah terkunci dari pemilihan bahasa, bahkan jika tata letak berubah.
3. Langkah 2: Identitas Visual (Templat & Warna)
Sejajarkan pengalih dengan Sistem Desain merek Anda.
Pemilihan Templat
Pilih dari pustaka pola UI pra-konfigurasi kami agar sesuai dengan estetika situs Anda:
Integrasi Palet
Timpa gaya default agar sesuai dengan pedoman merek Anda menggunakan Pemilih Warna bawaan atau nilai RGB mentah:
- •Warna Latar Belakang: Sesuaikan gaya bilah navigasi atau tombol Anda.
- •Warna Teks: Pastikan kontras tinggi untuk aksesibilitas (kepatuhan WCAG).
4. Langkah 3: Penataan Lanjutan (CSS Kustom)
Bagi pengembang yang membutuhkan kontrol piksel-sempurna, Anda dapat menyuntikkan aturan CSS kustom langsung ke dalam shadow DOM widget.
Pemilih CSS Umum:
#dynamicDropdown- Menargetkan wadah utama daftar dropdown.#lang-switcher-selected-lang .fi- Menargetkan ikon bendera bahasa yang saat ini dipilih.
Contoh Konfigurasi:
/* Hapus radius batas untuk desain persegi yang tajam */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Sesuaikan latar belakang dropdown */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}✦ Catatan Pengembang: CSS Kustom memungkinkan Anda untuk mengganti properti visual apa pun sambil mempertahankan logika fungsional pengalih. Ini sangat berguna untuk mencocokkan sistem desain yang kompleks atau menerapkan variasi mode gelap.
5. Penerapan & Verifikasi
Setelah konfigurasi Anda selesai:
Pratinjau
Alihkan antara mode Desktop dan Seluler di editor untuk memverifikasi konsistensi visual.
Simpan
Klik Simpan untuk mendorong perubahan ke situs produksi langsung Anda secara instan.
Reset
Jika Anda perlu memulai dari awal, gunakan Reset fungsi untuk kembali ke gaya MultiLipi default.
✅ Berhasil: Pengalih bahasa Anda kini aktif! Perubahan langsung tersebar di semua halaman tempat MultiLipi diterapkan. Tidak perlu membersihkan cache atau menyegarkan halaman untuk sebagian besar konfigurasi.