Sebagai page builder paling populer dengan 5 juta pemasangan, Elementor Pro terbukti disukai oleh pembuat website. Anda bisa membuat header dan footer Elementor dengan mengikuti tutorial di bawah ini.

Artikel Terkait:
Tutorial Elementor: Membuat Halaman Depan (Tutorial #2)

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!

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 untuk konversi, 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.

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 Elementor. 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.

Bagaimana pendapat Anda mengenai Elementor? Ataukah Anda lebih nyaman menggunakan Divi? Jika Anda memiliki pertanyaan seputar Elementor, silakan tulis di kolom komentar.

Kalau Anda tidak puas dengan fitur yang ada pada Elementor Free, gunakan Elementor Pro berlisensi dengan harga murah. Hanya Rp 99.000 untuk satu tahun per domain address!