Meski sudah populer di kalangan penggemar WordPress, tidak banyak blog yang menulis tentang tutorial membuat header dan footer website dengan Elementor.
GUI Builder sudah ada sejak tahun 2000 dengan populernya Adobe Dreamweaver di Indonesia. Munculnya Content Management System (CMS) WordPress disusul popularitas Live Page Builder seperti Divi dari Elegant Themes dan Elementor semakin memudahkan dan mempercepat proses pembuatan Landing Page, Website, atau e-Commerce dengan biaya cukup murah.
Karena saya salah satu penggemar Page Builder, saya merasa terbantu dengan Elementor dan ingin agar pengguna lain merasakan manfaat maksimal dari Elementor dengan membuat tutorial bahasa Indonesia.
Tanpa perlu mengerti HTML, CSS, atau Javascript sekalipun, Anda bisa membuat Website Profesional hanya dalam tiga jam!
Stay tuned karena Wordpixels Creative Agency akan memberikan Anda tutorial membuat Website Profesional dengan Elementor secara bertahap.
Daftar Isi
– Instalasi Elementor
– Mengatur Site Logo
– Membuat Header
– Menu Utama
– Membuat Header
– Mengubah Style Tampilan Header
– Menambahkan Animasi pada Header
– Sticky Header
– Membuat Footer
Instalasi Elementor
Jika Anda sudah familiar dengan WordPress, silakan lewati bagian ini dan menuju ke bagian selanjutnya yaitu membuat Header dan Footer.
Namun bila ini pertama kalianya Anda mengoperasikan WordPress, maka silakan simak cara instal Elementor di bawah ini.
- Login ke Dashboard WordPress Anda melalui /wp-admin atau /wp-login.php
- Pilih menu Plugins > Tambah Baru
- Tulis pada Search Bar di sisi kanan dan ketik “Elementor”, kemudian klik “Pasang Sekarang” lalu “Aktifkan”.
Elementor Free sudah terpasang di Website Anda. Jika Anda memerlukan fitur-fitur Elementor Pro, maka mungkin sebaiknya Anda membeli Lisensi asli di sini.
Mengatur Header Site Logo
Anda diharuskan memilih Tema terlebih dahulu. Jika Anda berencana menggunakan Elementor untuk keseluruhan Website, saya sarankan menggunakan Tema Hello Elementor.
Tidak menggunakan Tema diatas pun tidak masalah. Elementor dapat digunakan di hampir semua tema yang mengikuti standar WordPress.
Ikuti cara di bawah untuk menambahkan Logo Website Anda di WordPress.
- Setelah memilih dan mengaktifkan tema, klik Sesuaikan
- Klik Tab Identitas Situs dan masukkan Logo Anda. Ukuran yang saya sarankan adalah 250px kali 100px atau 100px kali 100px
- Lewati pemangkasan jika dirasa tidak perlu. Klik Terbitkan.
Membuat Header dengan Elementor
Tidak banyak yang mengerti bahwa dengan Elementor Anda dapat membuat Header dan Footer dengan mudah. Tidak perlu membuat Header dan Footer tiap halaman, namun cukup sekali saja.
Kebanyakan pengguna hanya menggunakan Elementor untuk membuat Landing Page, padahal fitur lengkap Elementor Pro sudah cukup untuk membuat Website Profesional dengan fungsi-fungsi premium.
Sebelumnya Anda harus membuat Menu Utama yang akan ditampilkan di Header.
Membuat Menu Utama
Main Menu atau Menu Utama adalah hal yang pertama kali Anda siapkan sebelum membuat Header.
- Pada menu Dasbor Anda, pilih Tampilan > Menu
- Untuk sementara, pilih Taut Tersuai dan pada bar URL masukkan tanda # setelah http:// sedangkan pada Teks Tautan masukkan nama Menu sesuai yang Anda perlukan. Dalam hal ini saya memilih Halaman Utama.
- Klik Tambahkan ke Menu.
- Silakan tambahkan beberapa menu lainnya dengan cara yang sama sesuai yang Anda perlukan. Jika sudah, klik Simpan Menu.
Membuat Header Elementor
- Pada menu Dasbor Anda, pilih Templates > Theme Builder > Add New
- Pilih Header, lalu masukkan nama Header Anda. Klik Create Template
Di sini Anda bisa memilih dari Library Elementor atau membuat sendiri.
Sampai sini Anda bisa memilih dari Header Library Elementor atau membuat Header sendiri. Jika Anda memilih menggunakan Header dari Library Elementor, silakan lanjut ke bagian Edit Menu.
- Klik pada tanda
(Add New Section) dan pilih struktur yang Anda inginkan. Tidak perlu khawatir karena Anda bisa mengubahnya kapan saja.
- Klik pada tanda
dan menu navigasi di sisi kiri akan berubah. Pilih Site Logo, tarik dan jatuhkan ke panel di sisi kiri (Drag and Drop). Logo Website yang Anda atur di bagian Mengatur Site Logo tadi akan muncul.
- Pada tab di sisi kanan, masukkan Nav Menu. Secara otomatis akan muncul Menu yang tadi Anda buat.
Pada menu navigasi di sebelah kiri, Anda dapat Melihat Layout, Style, dan Advanced.
Pada bagian Layout Anda dapat mengatur posisi, memilih Menu yang ingin Anda tampilkan, memilih animasi Header dan menentukan mode Responsive Hamburger Header Anda jika ditampilkan di Desktop, Tablet, dan Mobile.
Style berfungsi untuk mengatur jenis Font (Typography), warna Font (Text Color), jarak horizontal dan vertikal (Horizontal / Vertical Padding) antar blok, jarak antar menu (Spacing Between).
Pada tab ini pula Anda bisa mengatur tampilan sub menu atau menu Dropdown dalam mode Hamburger.
Toggle Button adalah Hamburger-nya. Silakan ubah tampilan ke mode Mobile untuk melihat Toggle Button.
Toggle Button adalah Hamburger-nya. Silakan ubah tampilan ke mode Mobile untuk melihat Toggle Button.
Klik pada gambar monitor untuk mengubah tampilan ke mode Responsive.
Mengubah Style Tampilan Header
Setelah Anda memasukkan Site Logo dan Navigation Menu (Nav Menu) di masing-masing sekarang saatnya untuk mempercantik tampilan Header.
- Klik pada tanda
- Pada menu navigasi klik
- Klik pada Background dan tentukan warna atau gambar yang ingin Anda jadikan sebagai background Header. Anda hanya dapat memilih salah satu
- Klik pada Background Overlay jika Anda ingin menambahkan sentuhan warna pada background.
- Gunakan Style Divider untuk menambah elemen desain seperti Wave Brush, Zigzag, atau Arrow.
- Klik pada tanda lagi namun kali ini klik
- Ubah Content Width menjadi Full Width
- Colums Gap menjadi Wide
- Pada bagian Vertical Align, ubah menjadi Middle
Menambahkan Animasi Pada Header
- Arahkan mouse pada kontainer Nav Menu atau pada tanda
- Pada navigasi sebelah kiri, klik
- Pilih Motion Effects > Entrance Animation
- Silakan pilih Animasi yang Anda inginkan
Sticky Header
- Masih di tab Advanced, pilih Motion Effects
- Ubah Sticky menjadi Top atau Bottom agar Header tetap terlihat saat pengunjung scroll down di halaman Anda dan menentukan perangkat.
Tampilkan dan Publish Header
Anda sudah selesai membuat Header dengan Elementor. Kali ini klik tombol Publish di sisi kiri bawah panel navigasi yang akan memunculkan pop up seperti ini.
- Klik Add Condition dan secara otomatis akan memunculkan Include – Entire Site.
- Anda dapat menambahkan kondisi publish yang diinginkan.
Membuat Footer dengan Elementor
Cara membuat Footer sama dengan membuat Header. Pada panel Navigasi Dasbor WordPress Anda, pilih Templates > Theme Builder > Add New
- Kali ini, pilih Footer dan beri nama sesuai keinginan Anda. Klik Create Template.
- Pilih Footer dari Library untuk mempersingkat proses, atau Anda dapat membuat Footer sendiri.
- Klik Insert.
- Lakukan penyesuaian Style atau Font sesuai yang kebutuhan Anda. Lalu klik Publish dan Add Condition.
Nah, mudah kan membuat Header dan Footer dengan Elementor? Kalau Anda tidak puas dengan fitur yang ada pada Elementor Free, gunakan Elementor Pro berlisensi di sini. Hanya Rp 50.000 untuk satu tahun per domain address!
Bagaimana pendapat Anda mengenai Elementor? Ataukah Anda lebih nyaman menggunakan Divi? Jika Anda memiliki pertanyaan seputar Elementor, silakan tulis di kolom komentar.