Tutorial Membuat Header dan Footer Website dengan Elementor (Tutorial #1)

Aicha Mahavikri

Aicha Mahavikri

Copywriter & SEO Practitionaire
Tutorial Elementor Pro

Bagikan artikel ini & sebarkan ilmu bermanfaat

Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
Share on email
0 0 vote
Article Rating

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.

Logo Elementor
Logo Elementor Pro

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
Memasang Plugin Elementor
Instal Plugin Elementor
  • Tulis pada Search Bar di sisi kanan dan ketik “Elementor”, kemudian klik “Pasang Sekarang” lalu “Aktifkan”.
Install Elementor di WordPress
Instalasi Plugin WordPress Elementor

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.

Membuat Header Site Logo dengan Elementor
Menambahkan Logo Website
  • 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.
Cara membuat Menu
Menambah Menu Sementara
  • Klik Tambahkan ke Menu.
  • Silakan tambahkan beberapa menu lainnya dengan cara yang sama sesuai yang Anda perlukan. Jika sudah, klik Simpan Menu.
Cara Membuat Menu di WordPress
Membuat Menu di WordPress

Membuat Header Elementor

  • Pada menu Dasbor Anda, pilih Templates > Theme Builder > Add New
  • Pilih Header, lalu masukkan nama Header Anda. Klik Create Template
Cara Membuat Header Elementor
Membuat Header dengan Elementor

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 tandaAdd New Section (Add New Section) dan pilih struktur yang Anda inginkan. Tidak perlu khawatir karena Anda bisa mengubahnya kapan saja.
Membuat Blok di Elementor
Pilih Struktur Blok yang diinginkan
  • 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.
Tutorial Header Elementor
Atau klik pada panel ini untuk mengubah navigasi di sisi kiri.
Tutorial membuat Header Elementor
Masukkan Site Logo ke panel sebelah kiri
  • Pada tab di sisi kanan, masukkan Nav Menu. Secara otomatis akan muncul Menu yang tadi Anda buat.
Tutorial Header Elementor Indonesia
Masukkan Nav Menu ke panel sebelah kanan

Pada menu navigasi di sebelah kiri, Anda dapat Melihat Layout, Style, dan Advanced.

Menu Navigasi Elementor
Menu Navigasi Elementor

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.

Panel Pengaturan Elementor

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 Edit Section
  • Pada menu navigasi klik Style Button
  • 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.
Cara mengubah gaya dan style Header
Header dengan Style Divider
  • Klik pada tanda Edit Section lagi namun kali ini klik Layout Button
  • Ubah Content Width menjadi Full Width
  • Colums Gap menjadi Wide
  • Pada bagian Vertical Align, ubah menjadi Middle
Cara mengubah tampilan Header menjadi Full Screen
Cara mengubah tampilan Header menjadi Full Screen

Menambahkan Animasi Pada Header

  • Arahkan mouse pada kontainer Nav Menu atau pada tanda Edit Nav Menu
  • Pada navigasi sebelah kiri, klik Advanced Button
  • Pilih Motion Effects > Entrance Animation
  • Silakan pilih Animasi yang Anda inginkan
Cara menambah Animasi pada Elementor
Animasi pada Elementor

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.
Cara membuat Header tetap di posisi atas
Sticky Header Elementor

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.

Publish Header Elementor
Publish Header Elementor
  • 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.
Cara membuat Footer dengan Elementor
Membuat Footer dengan Elementor
  • 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!

0 0 vote
Article Rating
Subscribe
Notify of
guest
2 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments

Pelajari ilmu Lainnya

Belajar Copywriting

7 Langkah Belajar Copywriting untuk Pemula

Jika Anda memutuskan untuk belajar copywriting, Anda sudah selangkah lebih dekat dengan kesuksesan. Panduan copywriting dengan contoh ini saya tulis untuk membantu Anda membuat copywriting selangkah demi selangkah.