Ornamen Adat Saling Tabrakan? Pahami Struktur Layout Kontainer & Custom Font!

📌 Apa Saja Struktur Layout Utama Luxee Adat?

Layout utama Luxee Adat menggunakan struktur kontainer flexbox modern yang memisahkan area ornamen etnik tradisional dengan seksi teks utama secara simetris. Pada bahasan Part 1 ini, kita akan memfokuskan pengerjaan pada penyusunan kontainer utama, pemasangan tipografi adat (custom font) menggunakan plugin pendukung "Use Any Font", serta implementasi lompatan navigasi (Anchor Link).

📖

Skenario Penggunaan Nyata

Bayangkan Anda merakit seksi pembuka (Hero Area) dengan aksen gunungan wayang Jawa atau corak songket Minang, namun font nama pengantin yang muncul adalah huruf Arial standar bawaan browser. Hal ini langsung menghilangkan keindahan etnik undangan agensi Anda. Memanfaatkan plugin Use Any Font untuk memasukkan file tipografi kustom berlekuk indah akan membuat visual undangan seketika terasa premium dan berkelas di layar ponsel tamu.

✨ Checklist Kebutuhan Layout Part 1

Flexbox Container Active: Pastikan setelan kontainer Elementor Anda sudah menggunakan sistem Flexbox Container terbaru, bukan section/column jadul.
File Font Kustom (.woff / .ttf): Sediakan file mentah font khusus ornamen tulisan adat di komputer lokal Anda.
Plugin Use Any Font Terpasang: Instal plugin Use Any Font untuk mengizinkan WordPress memproses jenis huruf non-Google font.

🛠️ Langkah Konfigurasi Layout & Font

Langkah 1: Mengunggah Huruf Custom via Use Any Font

Instal dan aktifkan plugin Use Any Font di WP Admin. Masuk ke panel setelannya, masukkan API key (gratis), klik tombol Add Fonts, lalu unggah file font daerah Anda. Selanjutnya, buat aturan penetapan nama font agar langsung terdaftar di pilihan tipografi Elementor.

Langkah 2: Menyetel Sistem Anchor Link (Navigasi Scroll)

Klik kontainer target di editor Elementor (misalnya kontainer Acara). Masuk ke tab Advanced, lalu isi kolom CSS ID dengan kata kunci pendek tanpa spasi (misalnya acara). Pada menu navigasi melayang, hubungkan tautan tombol dengan menuliskan #acara agar layar otomatis meluncur ke bawah saat diklik.

Langkah 3: Menonton Video Mengenal Layout Part 01

Silakan pelajari secara mendalam alur pengaturan kontainer, custom font, dan kode script pendukung melalui rekaman tutorial video berikut:

💡

Pro Tips Performa

Hindari mengunggah terlalu banyak variasi file font custom (cukup gunakan maksimal 2 jenis font kustom per website). File font kustom berukuran besar (di atas 200KB) yang dimuat secara bersamaan akan membebani kuota data seluler ponsel tamu dan melambatkan loading awal halaman web.

🔗 Modul Panduan Terkait

Langkah berikutnya setelah struktur part 1 dipahami adalah melanjutkannya ke part 2:

💡 Pertanyaan Sering Ditanya (FAQ)

Kenapa font kustom yang saya upload via Use Any Font tidak berubah di layar HP tamu?

Hal ini disebabkan karena plugin cache server atau CDN hosting Anda menahan versi file CSS font yang lama. Silakan lakukan pembersihan (purge/clear) cache WordPress Anda dan muat ulang halaman di browser HP menggunakan mode Incognito.

Bolehkah saya menulis tanda '#' di dalam isian kolom CSS ID Elementor?

Tidak boleh. Pada kolom CSS ID di tab Advanced kontainer, ketikkan langsung nama ID-nya (contoh: acara). Simbol pagar (#) hanya ditulis saat Anda memanggilnya di tautan tombol (contoh: #acara).

Apakah plugin Use Any Font memerlukan lisensi berbayar untuk mendaftarkan satu font saja?

Tidak. Anda bisa mendaftarkan akun gratis (free API key) yang memperbolehkan pengunggahan satu berkas font kustom tunggal secara permanen tanpa biaya tambahan.