Panduan Lengkap Menggunakan Elementor

Visual speaks first.  Itu mengapa punya website yang apik nan estetis adalah sesuatu yang tak
bisa ditawar. Tampilan website yang user-friendly  membuat pengunjung betah berlama-lama
ada di website. Ini jadi langkah penting sebelum nantinya Anda memprospek pengunjung jadi
pelanggan.

Cara termudah untuk membuat website dengan tampilan oke adalah dengan menginstal tema

WordPress terbaik. (Cara ini tentu saja hanya berlaku untuk website berbasis WordPress).
Namun, ada kalanya tema saja tidak cukup. Sering kali tema memberikan opsi kustomisasi
terbatas. 

Di titik inilah, Anda membutuhkan bantuan page builder. Dengan page builder, Anda bisa
mendesain halaman web dengan lebih leluasa. Tak perlu tahu coding  atau menguasai
kemampuan teknis lainnya. Hal yang perlu dilakukan hanyalah menarik elemen web yang
diinginkan dan menatanya sesuai keinginan (drag and drop).

Salah satu page builder yang sangat umum dipakai adalah Elementor. Tercatat ada dua juta
pengguna WordPress yang memakai plugin ini di web. Di artikel ini, Anda bisa baca panduan
lengkap cara menggunakan Elementor. Anda bisa temukan informasi lengkap soal apa itu
elementor, kelebihan dan kekurangannya, elemen web apa saja yang bisa dibuat, dan tentunya
cara menggunakan elementor itu sendiri.

Artikel ini akan sedikit panjang. Jadi, tanpa berlama-lama lagi, mari kita mulai! 
Daftar isi  tutup 
1 Apa itu Elementor?
2 Apa yang Bisa Anda Buat dengan Elementor?
3 Mengenal Bagian-Bagian di Elementor Page Builder
3.1 1. Tab options
3.2 2. Page settings
3.3 3. Element library
4 Cara Menggunakan Elementor
4.1 Cara Menginstall Elementor
4.2 Cara Mendesain Menggunakan Template
4.3 Cara Mendesain dari Nol
5 Kelebihan dan Kekurangan Elementor
5.1 Kelebihan Elementor Page Builder
5.2 Kekurangan Elementor Page Builder
6 Kesimpulan

Apa itu Elementor?

Elementor adalah page builder yang khusus diciptakan untuk website berbasis WordPress.
Dengan menambahkan plugin ini ke web, Anda bisa bebas mengubah dan mendesain ulang
tampilan web.

Bagaimana caranya? Jika dijelaskan secara singkat, beginilah kira-kira cara Elementor bekerja:

 Elementor membantu Anda mengubah tampilan dengan sistem bernama drag and

drop.  Terdapat sejumlah tombol elemen web ─ semacam teks, video, galeri, spacer, dsb
─ yang bisa diklik, ditaruh, dan disusun sesuai keinginan.
 Elementor memberi opsi bagi Anda untuk mengubah setiap halaman di website. Mulai
dari post, custom post types, sampai dengan pages bisa didesain ulang. Opsi ini
membuat Anda leluasa menyesuaikan nuansa tampilan dengan konten tertentu.
 Plugin ini bekerja di front-end  website. Artinya, apa yang Anda lihat ketika
mengustomisasi website akan jadi tampilan yang dilihat oleh pengunjung. Cara ini
 membuat Anda lebih efektif dalam mendesain. Apalagi kalau dibandingkan dengan
desain sistem back-end  yang sedikit rumit dan menyita waktu.
 Anda tak perlu kemampuan HTML atau PHP untuk desain website. Satu-satunya yang
Anda butuhkan hanyalah kreativitas.

Ya, kira-kira begitulah garis besar cara kerja Elementor. Kini saatnya mengeksplor apa-apa saja
yang bisa dibuat dengan plugin satu ini. 

Apa yang Bisa Anda Buat dengan Elementor?

Sebelumnya disebutkan, Elementor bisa dipakai untuk mendesain setiap halaman pada website.
Namun, apa saja tepatnya yang bisa dibuat dengan Elementor? Berikut jawabannya:

 Landing pages ─ halaman khusus untuk mengajak pengunjung agar melakukan aksi
tertentu. Entah itu dengan mengisi formulir, subscribe website, ataupun melakukan
transaksi untuk produk atau layanan.
 Opt-in forms ─ formulir khusus yang disediakan untuk pengunjung. Dengan mengisi
nama dan alamat email, pengunjung bisa mendapatkan akses konten premium atau
langganan website. Anda bisa letakkan opt-in forms di mana saja Anda mau: sidebars,
header, footer, atau di konten itu sendiri.
 Widget ─ berbagai elemen tambahan untuk melengkapi fungsi halaman. Semisal, login
form, rekomendasi konten sejenis, peta, dan sebagainya. Baca juga rekomendasi widget
terbaik untuk website WordPress.
 Pop-up ─ pesan atau iklan promosi yang muncul secara tiba-tiba ketika membuka
website.
 Custom header and footer ─ elemen yang berisi identitas dan informasi spesifik
seputar website. Terletak di bagian atas web ( header) dan paling bawah (footer).
 Custom post types ─ pada dasarnya merupakan halaman konten biasa. Dengan
Elementor, halaman konten tersebut bisa disesuaikan tampilannya menurut keinginan.
 Global widgets ─ widget yang bisa didesain sekali dan digunakan pada bagian-bagian
web sekaligus.

Banyak sekali, bukan? Kalau Anda menginginkan satu solusi mudah untuk desain web, sudah
tentu Elementor jawabannya. Cara memakainya mudah. Pun, ada banyak kustomisasi yang bisa
dilakukan.

Mengenal Bagian-Bagian di Elementor Page Builder

Elementor menjanjikan satu solusi lengkap untuk desain web. Ada banyak fitur dan komponen
yang termasuk di dalam pluginnya. 

Sekilas ini jadi berita baik untuk pengguna WordPress. Artinya, Anda tak perlu menginstal
tambahan aplikasi untuk mem-backup  Elementor.

Namun, fitur sangat lengkap juga bisa sedikit merepotkan. Sebagai pemula, Anda bisa-bisa
dibuat bingung karena banyaknya opsi dan elemen yang bisa ditambahkan. 
Supaya memudahkan Anda, di bagian ini kami akan perkenalkan elemen-elemen di Elementor.
Dengan begitu, Anda bisa merasa lebih familiar dalam menggunakan plugin satu ini.

Untuk mempermudah penjelasan, kami akan membagi bagian ini ke dalam tiga poin. Ketiga
poin itu adalah:

1. Tab options;
2. Page settings;
3. Elements library.

Lagi-lagi, kami ingatkan, pembahasan bagian ini akan sangat panjang. Akan tetapi, kami harap
info yang panjang ini akan bermanfaat. Selain juga, kami yakin, tak ada web lain yang memuat
tutorial selengkap ini.
Baik. Mari kita mulai jabarkan satu per satu bagian-bagian dari Elementor.

1. Tab options

Tab options terletak di bagian bawah Elementor side panel. Dilihat dari browser, panel ini
terletak di sebelah kiri halaman.
Sejujurnya, Elementor tak mengeluarkan nama resmi untuk bagian ini. Akan tetapi, supaya
mudah, kami sebut saja sebagai tab options. Sebab, bagian ini memang terdiri atas opsi-opsi
berbentuk tab.

Nama tab dari kiri ke kanan: settings, navigator, history, responsive mode,  dan preview
changes.  Deskripsi singkat seperti berikut:

 Settings  ─ memuat pengaturan umum soal halaman (judul, status publikasi,  featured
image, opsi sembunyikan judul, dan page layout); pengaturan style halaman (opsi gaya
latar belakang, warna latar, gambar, dan padding), dan custom CSS.
 Navigator ─ semacam daftar isi yang memuat komponen Elementor apa saja yang
digunakan di sebuah halaman. Tab ini memudahkan Anda merunut dan mengatur
tampilan halaman.
 History ─ mendaftar perubahan apa saja yang dilakukan pada halaman. Anda bisa
dengan mudah undo  atau redo  sebuah aksi.
 Responsive mode ─ preview  tampilan web di tiga layar berbeda, yaitu desktop, tablet,
dan mobile. Ubah langsung untuk sesuaikan tampilan di resolusi layar yang diinginkan.
 Preview changes ─ lihat hasil desain web sebelum disimpan dan dipublikasi ke
khalayak.
2. Page settings

Bagian ini memuat pengaturan basic  Elementor. Terdiri dari tiga opsi yang berbeda,
yaitu Style, Settings, dan Go To.

Di opsi style, Anda bisa menyesuaikan tampilan warna dan font dari website. Terdapat default
color  dan default font  yang bisa diubah dengan bebas. Untuk mendapatkan warna yang pas,
ada juga fitur color picker.
Opsi settings memuat pengaturan di WordPress dan pengaturan Elementor. Pengaturan di
WordPress lebih banyak soal aktivasi fitur di Elementor. Sedangkan untuk pengaturan
Elementor, Anda bisa menyesuaikan jarak antara konten, lebar konten, serta tampilan foto
serta galeri.

Di bagian Go To, ada tiga hal yang bisa dilakukan. Finder dipakai untuk mencari elemen konten
di Elementor dengan cepat dan mudah. Anda tak perlu mencari manual dengan scrolling  di
element library. 

Lalu, opsi View Page sama dengan Preview changes. Opsi yang tak lain membolehkan Anda
mengintip halaman sebelum menyimpan atau mempublikasikannya. Terakhir, Exit Dashboard
adalah tombol yang bisa diklik ketika Anda memutuskan kembali ke halaman Dashboard.
3. Element library

Element library berisi semua elemen yang bisa Anda tambahkan ke halaman website. Ada tiga
jenis elemen yang bisa Anda pilih, yaitu basic, general, dan WordPress. Kami akan jabarkan
deskripsi setiap elemen di bawah ini:

Basic memuat elemen-elemen sederhana yang terdapat di setiap konten. 

General berisi widgets yang lebih advance  dibandingkan widget basic. Terdapat lebih banyak
elemen yang bisa ditambahkan. 
WordPress merupakan pilihan widget bawaan dari WordPress. Kurang lebih isinya sama
dengan yang ada di Elementor. Jika Anda menambahkan plugin seperti Jetpack, widgets dari
plugin tersebut juga akan muncul.

Cara Menggunakan Elementor

Setelah cukup familiar dengan berbagai fitur dan bagiannya, kini saatnya Anda belajar
bagaimana cara menggunakan Elementor. Di bagian ini, setidaknya Anda akan mengetahui tiga
hal. 
Pertama, cara menginstal Elementor. Kedua, cara mendesain halaman web dari template
Elementor. Ketiga, cara mendesain halaman web dari nol.

Cara Menginstall Elementor

Menambahkan Elementor ke website caranya cukup mudah. Anda cukup klik menu Plugins >
Add New. Lalu masukkan kata kunci Elementor di kolom pencarian sebelah kanan.

Ketika sudah menemukan plugin yang dicari, klik tombol Install Now. Tunggu beberapa saat
hingga tombol berubah menjadi Activate. Kemudian klik tombol tersebut dan plugin sudah
siap digunakan.

Cara Mendesain Menggunakan Template

Seketika plugin aktif, Anda bisa melihat menu Elementor di Dashboard. Selain itu, tombol Edit
with Elementor akan muncul di setiap halaman website. Untuk mengedit halaman, Anda
tinggal klik tombol tersebut. Kemudian, Anda akan dibawa ke halaman khusus desain. 
Perhatikan bagian sebelah kanan dari side panel. Di bagian itulah Anda bisa mengubah
tampilan dan menambahkan fitur-fitur yang diinginkan.

Untuk buat halaman dari template, tekan tombol bergambar folder.

Selanjutnya, Anda akan menemukan halaman khusus berisi templates. Ada templates
berupa blocks  atau susunan untuk teks pada halaman. Lalu ada juga Pages, yaitu template
untuk keseluruhan halaman. 

Ketika sudah menemukan desain yang diinginkan, klik tombol Insert di bawah desain.

Desain yang dimaksud akan muncul ke halaman yang diinginkan. Sekarang Anda tinggal ubah
isinya. Bisa juga Anda menambahkan elemen pada bagian-bagian yang dirasa perlu.
Setelah kustomisasi dirasa cukup, Anda bisa simpan desain yang sudah dibuat. Cukup klik
tombol panah kecil di samping kanan tombol Publish. Kemudian klik Save Draft. 

Bisa juga klik Save as Template untuk jadikan desain sebagai template. Cara ini membuat
Anda tak perlu lagi mendesain ulang tampilan yang persis ke halaman lainnya. Cukup load
template dan sesuaikan konten dengan mudah.

Cara Mendesain dari Nol

Untuk mendesain halaman dari kanvas kosong, klik tombol + di sebelah kiri.

Tombol ini akan mengarahkan Anda ke pilihan structure halaman.

Setelah memilih structure yang cocok, halaman akan diisi dengan outline atau section. Dalam
section ini Anda bisa tambahkan elemen-elemen yang ada di library. 

Ketika proses desain selesai, Anda bisa Save Draft, Save as Template, atau Publish. 

Kelebihan dan Kekurangan Elementor

Apa Anda sudah tertarik untuk memakai Elementor? Belum? Kalau begitu, coba kita daftar
kelebihan dan kekurangan dari Elementor.

Kelebihan Elementor Page Builder

Sebagai plugin tambahan WordPress, Elementor menawarkan banyak sekali kelebihan.

Setidaknya inilah yang Anda rasakan ketika menggunakan Elementor untuk mendesain website:

 Fitur lengkap dan sangat mudah digunakan.

 Terdapat banyak sekali elemen untuk ditambahkan di halaman web. Mulai dari fitur-fitur
sederhana seperti teks, heading, gambar, spacer, dan sebagainya. Tetapi ada juga
elemen yang lebih advance  seperti tabs, menu anchor, accordion, toggle, dan banyak
lagi lainnya.
 Anda bisa mengubah tampilan dengan bebas. Bahkan Anda bisa tambahkan detail yang
tidak tersedia di tema WordPress.
 Lihat perubahan tampilan secara real-time.
 Terdapat opsi untuk kustomisasi tampilan di tiga jenis layar berbeda: dekstop, tablet,
dan mobile.
 Setiap perubahan yang dilakukan di halaman terekam dengan baik. Anda bisa
mengembalikan tampilan ke versi sebelum dengan sekali klik.
 Fitur yang ditawarkan untuk versi gratis sudah sangat lengkap. Apalagi dibandingkan
dengan plugin page builder lainnya.

Kekurangan Elementor Page Builder

Tentu saja Elementor tak lepas kekurangan. Kalau Anda punya concern  soal ini, kami coba beri
gambaran hal-hal yang mungkin membuat Anda kurang puas.

 Elementor tak membolehkan Anda melakukan kustomisasi tampilan URL.

 Terkadang tampilan font dan teks tidak sinkron.
 Fitur-fitur penting sekelas Mailchimp, Confirmation Email, Hubspot dan sebagainya
hanya tersedia dalam versi Pro.

Kesimpulan

Jadi, bagaimana? Mendesain web ternyata cukup mudah, kan?