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 mandiri untuk tampilan Desktop dan Seluler.
Panduan ini mencakup konfigurasi Tata Letak, Pemosisian, dan Gaya Merek melalui Pusat Perintah MultiLipi.
1. Mengakses Editor Antarmuka
Untuk mulai menyesuaikan integrasi frontend Anda:
- 1Arahkan ke Dasbor MultiLipi.
- 2Buka Pengaturan dari menu sebelah kiri.
- 3Pilih Pengalih Bahasa.
💡 Tips Pro: Anda akan masuk ke Editor Pengalih, yang menampilkan kanvas pratinjau waktu nyata. Gunakan tombol atur di bagian atas untuk beralih antara Desktop dan Seluler tampilan untuk memastikan responsivitas di berbagai perangkat.
2. Langkah 1: Memilih Arsitektur (Penempatan)
Tentukan bagaimana pengalih beroperasi di dalam DOM Anda. Anda memiliki dua mode penerapan:
Mode A: Mengapung (Default)
Perilaku: Pengalih melayang di atas konten Anda, ditambatkan ke sudut tertentu di layar (misalnya, Kanan-Bawah).
Studi Kasus: Terbaik untuk visibilitas instan tanpa mengubah kode tata letak situs web Anda yang sudah ada.
Mode B: Tertanam (Terintegrasi)
Perilaku: Pengalih dimasukkan ke dalam elemen HTML tertentu yang Anda tentukan (misalnya, di dalam Bilah Navigasi atau Footer).
⚠️ Protokol Cadangan
Jika kontainer HTML yang Anda tentukan tidak dapat ditemukan pada halaman tertentu, MultiLipi Logika Cadangan secara otomatis mengembalikan pengalih ke "Mode Mengapung." Ini memastikan pengguna tidak pernah kehilangan akses untuk memilih bahasa, meskipun tata letak berubah.
3. Langkah 2: Identitas Visual (Templat & Warna)
Selaraskan pengalih dengan Sistem Desain merek Anda.
Pemilihan Templat
Pilih dari pustaka pola UI yang telah dikonfigurasi sebelumnya agar sesuai dengan estetika situs Anda:
Integrasi Palet
Timpa gaya bawaan agar sesuai dengan pedoman merek Anda menggunakan Pemilih Warna bawaan atau nilai RGB mentah:
- •Warna Latar Belakang: Sesuaikan dengan gaya bilah navigasi atau tombol Anda.
- •Warna Teks: Pastikan kontras tinggi untuk aksesibilitas (kepatuhan WCAG).
- •Warna Latar Belakang Saat Sorot (Hover): Menetapkan warna sorotan saat pengguna mengarahkan kursor mereka ke opsi bahasa di menu dropdown — memberikan umpan balik taktil langsung.
✨ Konfigurasikan Efek Sorot Interaktif
Berikan nuansa premium dan asli pada pengalih bahasa Anda dengan menambahkan status sorot interaktif.
- 1Di bawah tab Penataan Visual , temukan Warna Latar Belakang Saat Sorot kolom.
- 2yang baru ditambahkan. Klik untuk membuka pemilih warna, atau masukkan secara manual nilai RGB/RGBA yang tepat agar sesuai dengan pedoman merek Anda.
- 3Warna ini akan ditampilkan secara dinamis setiap kali pengguna mengarahkan kursor mereka ke opsi bahasa di menu dropdown, memberikan umpan balik taktil langsung.
Opsi Tampilan: Urutan Pengalihan Bahasa
Anda tidak lagi harus puas dengan daftar alfabetis. Anda kini dapat memprioritaskan bahasa tertentu di dropdown Anda berdasarkan pasar target utama Anda.
Atur Urutan Pengalihan Bahasa
- 1Gulir ke bawah ke Urutan Pengalihan Bahasa bagian di bilah sisi Editor Pengalih sebelah kiri.
- 2Anda akan melihat daftar blok dari semua bahasa target aktif Anda (misalnya,
EN,AR,FI,FR). - 3Klik Naik (↑) dan Turun (↓) panah di sebelah setiap blok bahasa untuk mengatur ulang prioritas tampilannya.
- 4Bahasa yang ditempatkan di bagian atas daftar ini akan muncul pertama kali saat pengguna membuka menu dropdown.
💡 Tips Pro: Sematkan bahasa dengan trafik tertinggi Anda ke slot teratas. Sebagai contoh, jika sebagian besar pengunjung internasional Anda berasal dari Jerman, menempatkan DE terlebih dahulu mengurangi klik yang diperlukan untuk beralih — meningkatkan UX dan mengurangi rasio pantulan pada halaman terjemahan Anda.
4. Langkah 3: Penataan Tingkat Lanjut (CSS Kustom)
Bagi pengembang yang memerlukan kontrol presisi tinggi, Anda dapat menyuntikkan aturan CSS kustom langsung ke dalam shadow DOM widget.
Selektor CSS Umum:
#dynamicDropdown- Menargetkan kontainer utama dari daftar dropdown.#lang-switcher-selected-lang .fi- Menargetkan ikon bendera dari bahasa yang sedang dipilih.
Contoh Konfigurasi:
/* Remove border radius for a sharp, square design */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Customize the dropdown background */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}💎 Catatan Pengembang: CSS kustom memungkinkan Anda menimpa properti visual apa pun sekaligus mempertahankan logika fungsional dari pengalih bahasa. Ini sangat berguna untuk mencocokkan sistem desain yang kompleks atau menerapkan variasi mode gelap.
5. Penerapan & Verifikasi
Setelah konfigurasi Anda selesai:
Pratinjau
Beralihlah antara mode Desktop dan Seluler di editor untuk memverifikasi konsistensi visual.
Simpan
Klik Simpan untuk mendorong perubahan ke situs produksi langsung Anda secara instan.
Atur Ulang
Jika Anda perlu memulai dari awal, gunakan Atur Ulang fungsi untuk kembali ke gaya bawaan MultiLipi.
✅ Berhasil: Pengalih bahasa Anda sekarang aktif! Perubahan langsung diterapkan di semua halaman tempat MultiLipi di-deploy. Sebagian besar konfigurasi tidak memerlukan pembersihan cache atau penyegaran halaman.