Konsistensi adalah Kunci Desain ✨
Setelah fondasi sistem (WordPress, Theme Hello, Elementor Pro) telah siap, fokus kita beralih ke desain. Di sinilah Elementor Pro benar-benar bersinar melalui fitur Theme Builder-nya.
Tool ini memungkinkan Anda mendefinisikan styling inti yang disebut Global Styles, serta membuat elemen struktural seperti Header dan Footer yang berada di luar kontrol Theme dasar. Konsistensi visual yang Anda bangun di langkah ini akan menghemat waktu desain di kemudian hari dan menghasilkan pengalaman navigasi yang mulus bagi pembaca.
Fase I: Mendefinisikan Global Styles (Warna dan Tipografi)
Global Styles adalah fitur terpenting untuk menjaga konsistensi. Setiap widget atau teks yang Anda tambahkan ke website akan secara otomatis menggunakan style yang Anda definisikan di sini.
Langkah 1: Mengatur Global Colors
Akses Site Settings: Di dalam editor Elementor (Anda bisa membuka halaman mana pun dengan Elementor), klik ikon Menu Hamburger (tiga garis) di pojok kiri atas, lalu pilih Site Settings.
Definisikan Palet Warna: Pilih menu Global Colors. Anda akan menemukan empat slot warna default (Primary, Secondary, Text, Accent).
Kustomisasi Palet:
Primary: Gunakan warna ini untuk tombol utama, link, atau elemen branding utama blog Anda.
Secondary: Digunakan untuk tombol sekunder atau elemen pendukung.
Text: Warna default untuk sebagian besar teks.
Accent: Warna yang digunakan untuk menyorot elemen penting (highlight) atau hover effect.
Tambahkan Warna Kustom: Anda dapat menambahkan warna kustom tambahan (Custom Colors) untuk palette yang lebih kaya (misalnya, warna untuk background gelap atau error message).
Langkah 2: Mengatur Global Fonts (Tipografi)
Akses Global Fonts: Masih di menu Site Settings, pilih Global Fonts.
Definisikan Gaya Teks: Sama seperti warna, Anda akan menemukan empat gaya default (Primary, Secondary, Text, Accent).
Kustomisasi Gaya:
Primary: Gunakan font ini untuk Judul utama (H1). Pilih font-family, ukuran, dan berat (weight) yang tegas.
Secondary: Gunakan untuk Subjudul (H2, H3).
Text: Gunakan untuk paragraf (body text). Pastikan font ini mudah dibaca (legible) dengan ukuran yang nyaman (misalnya 16px hingga 18px).
Accent: Gunakan untuk elemen khusus (widget title atau kutipan).
Atur Heading Tag: Di bawah menu Typography (di Site Settings), sesuaikan font untuk setiap heading tag dari H1 hingga H6 agar sesuai dengan Global Fonts yang sudah Anda definisikan.
Fase II: Mendesain Header Kustom dengan Theme Builder
Header adalah salah satu elemen terpenting karena memuat navigasi dan logo Anda.
Langkah 3: Membuat Template Header Baru
Akses Theme Builder: Dari dashboard WordPress, arahkan ke Elementor > Theme Builder.
Tambah Header: Pilih tab Header, lalu klik Add New Header. Beri nama template Anda (misalnya,
Header Blog Utama).Pilih Kondisi (Display Conditions): Setelah template terbuka, Elementor akan meminta Anda mengatur kondisi tampilan.
Pilih Include > Entire Site. Ini memastikan Header ini ditampilkan di semua halaman dan postingan blog Anda.
Desain Struktur: Buat struktur Header Anda dengan dua kolom:
Kolom Kiri: Untuk Logo.
Kolom Kanan: Untuk Navigasi.
Langkah 4: Menambahkan Widget Utama Header
Widget Site Logo: Di kolom kiri, seret dan lepas (drag and drop) widget Site Logo. Hubungkan widget ini ke logo branding Anda.
Widget Nav Menu: Di kolom kanan, seret dan lepas widget Nav Menu. Widget ini secara otomatis akan menampilkan menu yang sudah Anda buat di dashboard WordPress (Appearance > Menus).
Styling Navigasi:
Sesuaikan warna link menu utama.
Atur Hover Effects (efek saat kursor diarahkan) agar interaktif.
Pastikan layout untuk perangkat Mobile diatur dengan baik (misalnya, menggunakan hamburger icon).
Langkah 5: Membuat Header Sticky (Opsional)
Untuk user experience yang lebih baik, buat Header Anda sticky (menempel di atas saat user scroll).
Pilih Section Header: Klik pada section terluar dari Header Anda.
Akses Motion Effects: Di panel kiri Elementor, masuk ke tab Advanced > Motion Effects.
Aktifkan Sticky: Atur Sticky ke Top. Ini akan memastikan Header tetap terlihat oleh pembaca saat mereka membaca konten blog Anda.
Fase III: Mendesain Footer Kustom dengan Theme Builder
Footer adalah tempat ideal untuk tautan penting (misalnya, Privacy Policy), formulir berlangganan, dan copyright.
Langkah 6: Membuat Template Footer Baru
Akses Theme Builder: Kembali ke Elementor > Theme Builder.
Tambah Footer: Pilih tab Footer, lalu klik Add New Footer. Beri nama template Anda (misalnya,
Footer Utama).Pilih Kondisi: Atur kondisinya ke Include > Entire Site.
Langkah 7: Menambahkan Widget Fungsional Footer
Buat Footer dalam struktur tiga atau empat kolom.
Kolom 1 (About Us): Tambahkan widget Text Editor dan tulis ringkasan singkat tentang blog Anda, diikuti dengan widget Social Icons.
Kolom 2 & 3 (Navigation): Tambahkan widget Nav Menu kedua, atur secara vertikal (Vertical Layout), dan hubungkan ke menu sekunder seperti Privacy Policy dan Contact.
Kolom 4 (Subscription): Tambahkan widget Form untuk mengumpulkan email subscriber (Form widget membutuhkan integrasi marketing tool seperti Mailchimp atau ActiveCampaign, yang akan dibahas di luar seri ini).
Langkah 8: Tambahkan Copyright Bar
Di bawah section Footer utama, tambahkan section kecil lainnya (biasanya satu kolom) khusus untuk bar copyright.
Tambahkan widget Text Editor dan gunakan kode singkat untuk menampilkan tahun saat ini secara dinamis (misalnya,
Copyright © 2024 Nama Blog Anda).Atur background section ini ke warna yang lebih gelap.
Kesimpulan Bagian 2: Website Terpadu
Selamat! Dengan menyelesaikan Bagian 2, Anda telah menetapkan identitas visual global blog Anda. Setiap kali Anda membuat halaman baru atau postingan baru, Header dan Footer yang telah Anda desain akan secara otomatis muncul dengan style yang konsisten.
Ini adalah fondasi penting sebelum kita masuk ke jantung desain blog. Pada Bagian 3 dari seri tutorial ini, kita akan fokus pada desain paling penting untuk sebuah blog: Menciptakan Template Postingan Tunggal (Single Post Template) menggunakan Theme Builder, memastikan setiap artikel yang Anda publikasikan terlihat profesional dan menarik.
