Panduan Menggunakan Elementor Page Builder

Visual speaks first. Itulah sebab saya memilih untuk mempunyai website sendiri kerana ianya mudah, tanpa kod dan banyak element design yang boleh dibina.

Penampilan awal website sangat user-friendly dan membuatkan siapa sahaja yang melihat permukaan website ini boleh mengambil masa yang lama melihat tampilan sebuah website yang menarik.. Ini membuat pengunjung sanggup berada lebih lama di laman website. Ini juga menjadikan ia amat penting ketika prospek yang mengunjungi website  menjadi pelanggan akhirnya.

Cara mudah untuk membuat website dengan tampilan menarik adalah dengan memasang themes WordPress terbaik. (Cara ini tentu saja hanya berlaku untuk website sedia ada WordPress). Namun, ada kalanya themes saja tidak cukup. Sering kali themes memberikan pengaturan terbatas.

Ketika inilah, Anda memerlukan bantuan elementor page builder. Dengan page builder, Anda boleh merekabentuk (design) halaman web dengan lebih luas. Tidak memerlukan coding atau menguasai kemampuan teknik-teknik lainnya. Hanya dengan teknik tarik dan lepas (drag and drop) elemen web yang diinginkan ke dalam Kolum (Colum) rekaan yang mahu di bentuk.  .

Salah satu elementor page builder yang sangat umum dipakai oleh para pereka website ialah  Elementor. Tercatat ada lebih dua juta pengguna WordPress yang memakai plugin elementor ini di web mereka. Di artikel ini, Anda boleh membaca panduan lengkap cara menggunakan Elementor Page Builder. Anda boleh  menemukan informasi lengkap mengenai pertanyaan apa itu elementor, kelebihan dan kekurangannya, elemen web apa saja yang boleh dibuat, dan tentunya cara menggunakan elementor Page Builder itu sendiri.

Artikel ini akan sedikit panjang. Jadi, tanpa berlengah lagi, mari kita mulakan! 

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
  • 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

Kesimpulan

Apa itu Elementor?

Elementor adalah page builder yang khusus diciptakan untuk website WordPress. Dengan menambahkan plugin ini ke dalam web, Anda boleh bebas mengubah dan mereka bentuk ulang tampilan web page anda.

Bagaimana caranya? Jika dijelaskan secara ringkas, beginilah cara Elementor bekerja:

  • Elementor membantu Anda mengubah tampilan webpage dengan sistem bernama drag and drop. Terdapat sejumlah tombo(widget) elemen web ─ seperti contoh  teks, video, galeri, spacer, dsb ─ yang boleh di klik, di letakkan dan disusun sesuai dengan keinginan anda.
  • Elementor memberi pilihan bagi Anda untuk mengubah setiap halaman di webpage. Mulai dari post, custom post types, sampai dengan pages boleh di bentuk  berulang. Pilihan ini membuat Anda bebas menyesuaikan flow tampilan dengan pengisian (Content) tertentu.
  • Plugin ini bekerja di front-end website. Artinya, apa yang Anda lihat ketika mengolah / mereka website akan jadi tampilan yang dilihat oleh pengunjung anda. Cara ini membuat Anda lebih kreatif dalam merebentuk. Apalagi kalau dibandingkan dengan rekaan sistem back-end yang sedikit rumit dan mengambil masa terlalu lama.
  • Anda tidak lagi perlu tauliah dan berkemahiran dalam  HTML atau PHP untuk rekabentuk website. Satu-satunya yang Anda  perlukan hanyalah kreativiti unik..

Ya, begitulah garis panduan cara kerja Elementor. Kini saatnya meneroka apa saja yang boleh di buat dengan plugin hebat ini. 

Apa yang Boleh Anda Buat dengan Elementor?

Elementor boleh di gunakan untuk membina rekaan setiap halaman pada website page atau singkatan Webpage. Lebih tepat lagi, apa  yang boleh di buat dengan Elementor? Berikut jawabannya:

  • Landing pages ─ Satu halaman khusus untuk mengajak pengunjung agar melakukan aksi tertentu. Adakah sebagai dengan mengisi formular/kajiselidik, Daftar (subscribe) website, ataupun melakukan transaksi untuk pembelian produk atau layanan.
  • Opt-in forms ─ formula khusus yang disediakan untuk pengunjung. Dengan mengisi nama dan alamat email, pengunjung boleh  mendapatkan akses kepada konten premium seperti (eBook) atau langganan website (Newsletter). Anda boleh letakkan opt-in forms di mana saja Anda mau: sidebars, header, footer, atau di dalam konten itu sendiri.
  • Widget ─ berbagai elemen tambahan untuk melengkapi fungsi halaman. Contohnya, 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 identiti dan informasi atau pun penunjuk arah spesifik sekitar 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 boleh di rekabentuk dan digunakan pada bagian-bagian web sekaligus.

Banyak sekali, bukan? Kalau Anda menginginkan satu solusi mudah untuk desain web, sudah tentu Elementor jawabannya. Cara menggunakannya mudah. sangat, ada banyak pengaturan automasi yang boleh dilakukan.

Mengenal Bahagian-Bahagian di Elementor Page Builder..

Elementor menjanjikan satu solusi lengkap untuk design web. Ada banyak pilihan elemen dan komponen yang termasuk di dalam plugin ini. 

Dengan ini  ianya menjadikan berita baik untuk pengguna WordPress. Ertinya, Anda tak perlu memasang plugin tambahan lain di website anda. 

Namun, Paparan sangat lengkap juga boleh sedikit menyusahkan. Sebagai startup, Anda boleh jadi serabut dibuatnya kerana banyak sangat pilihan dan elemen yang boleh ditambahkan. 

Supaya memudahkan Anda, di bahagian ini kami akan perkenalkan elemen-elemen di elementor. Dengan begitu, Anda boleh merasa lebih serasi dalam menggunakan plugin ini.

Untuk mempermudah penjelasan, kami akan membahagi bahagian ini ke dalam tiga point. Ketiga point itu adalah:

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

Sekali lagi, kami ingatkan, membahaskan bahagian ini akan sangat panjang. Akan tetapi, kami mengharapkan info yang panjang lebar ini akan anda manfaatkan. Selain itu juga, kami yakin, tiada ada web lain yang memuat tutorial selengkap ini.

Baik. Mari kita mulai satu per satu bahagian-bahagian dari elementor.

Tab options terletak di bagian bawah Elementor side panel. Dapat dilihat dari browser, panel ini terletak di sebelah kiri halaman.

Sejujurnya, Elementor tidak mengeluarkan nama rasmi untuk bahagian ini. Akan tetapi, supaya ianya menjadi mudah, kami sebut saja sebagai tab options. Sebab, bahagian ini memang terdiri dari pilihan-pilihan 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, pilihan sembunyikan judul, dan page layout); pengaturan style halaman (pilihan 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 mencari 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 berbeza, iaitu di desktop, tablet, dan mobile. Ubah langsung untuk sesuaikan tampilan di resolusi layar yang diinginkan.
  • Preview changes ─ lihat hasil design/rekabentuk web sebelum disimpan dan di paparkan pada khalayak.

Tab options terletak di bagian bawah Elementor side panel. Dapat dilihat dari browser, panel ini terletak di sebelah kiri halaman.

Sejujurnya, Elementor tidak mengeluarkan nama rasmi untuk bahagian ini. Akan tetapi, supaya ianya menjadi mudah, kami sebut saja sebagai tab options. Sebab, bahagian ini memang terdiri dari pilihan-pilihan 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, pilihan sembunyikan judul, dan page layout); pengaturan style halaman (pilihan 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 mencari 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 berbeza, iaitu di desktop, tablet, dan mobile. Ubah langsung untuk sesuaikan tampilan di resolusi layar yang diinginkan.
  • Preview changes ─ lihat hasil design/rekabentuk web sebelum disimpan dan di paparkan pada khalayak.

Tab options terletak di bagian bawah Elementor side panel. Dapat dilihat dari browser, panel ini terletak di sebelah kiri halaman.

Sejujurnya, Elementor tidak mengeluarkan nama rasmi untuk bahagian ini. Akan tetapi, supaya ianya menjadi mudah, kami sebut saja sebagai tab options. Sebab, bahagian ini memang terdiri dari pilihan-pilihan 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, pilihan sembunyikan judul, dan page layout); pengaturan style halaman (pilihan 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 mencari 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 berbeza, iaitu di desktop, tablet, dan mobile. Ubah langsung untuk sesuaikan tampilan di resolusi layar yang diinginkan.
  • Preview changes ─ lihat hasil design/rekabentuk web sebelum disimpan dan di paparkan pada khalayak.

2. Page settings

Bahagian ini memuat pengaturan basic Elementor. Terdiri dari tiga pilihan yang berbeza, iaitu Style, Settings, dan Go To.

Di pilihan 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 aplikasi color picker.

Pilihan settings memuat pengaturan di WordPress dan pengaturan Elementor. Pengaturan di WordPress lebih banyak soal aktiviti aplikasi di Elementor. Sedangkan untuk pengaturan Elementor, Anda boleh menyesuaikan jarak antara konten, lebar konten, serta tampilan foto serta galeri.

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

Lalu, pilihan View Page sama dengan Preview changes. Pilihan yang tak lain membolehkan Anda mengintip halaman sebelum menyimpan atau memaparkannya. Terakhir, Exit Dashboard adalah tombol yang bisa diklik ketika Anda memutuskan kembali ke halaman Utama (Dashboard).

3. Element library

Element library berisi semua elemen yang boleh Anda tambahkan ke halaman website. Ada tiga jenis elemen yang bisa Anda pilih, iaitu basic, general, dan WordPress. Kami akan terangkan 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 boleh ditambahkan. 

WordPress merupakan pilihan widget bawaan dari WordPress.  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 aplikasi dan bahagiannya, kini saatnya Anda belajar bagaimana cara menggunakan Elementor. Di bahagian ini, setidaknya Anda akan mengetahui tiga hal. 

Pertama, cara memasang Elementor. Kedua, cara desain halaman web dari template Elementor. Ketiga, cara mendesain halaman web dari kosong (Scracth).

Cara Memasang Elementor

Menambahkan Elementor ke website, caranya cukup mudah. Anda cukup klik menu Plugins > Add New. Lalu masukkan kata kunci Elementor di kolum 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 Merekabentuk / mendesign Menggunakan Template

Selepas 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 aplikasi -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, iaitu 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 mengubah isinya. Boleh  juga Anda menambahkan elemen pada bahagian-bahagian yang dirasa perlu.

Setelah kustomasi dirasa cukup, Anda boleh simpan desain yang sudah dibuat. Sudah 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 Merekabentuk/ mendesain dari Kosong (Scracth)

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 kustomasi tampilan URL.
  • Terkadang tampilan font dan teks tidak selari (Tetapi Sekarang Elementor 3.0 sudah ada automasi warna dan font untuk keseluruhan web).
  • Fitur-fitur penting setanding Mailchimp, Confirmation Email, Hubspot dan sebagainya hanya tersedia dalam versi Pro.

Kesimpulan

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

Kalau Anda memerlukan tambahan inspirasi soalan desain webpage, kami juga memiliki beberapa artikel yang bisa dibaca:

  • Akan Datang

Kalau bercakap mengenai kepantasan kecepatan dan server selalu up, itu urusan Serverfreak yang saya daftarkan website saya..  Dapatkan pretasi website paling optima dengan fitur aplikasi pakej hosting lengkap, support terbaik dan sangat membantu serta datacenter tier 4 yang canggih. Tunggu apa lagi? Pilih paket hosting sekarang.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
EnglishBahasa Melayu
Get Free eBook From Us!
Wait !!
Download eBook From Us For Free

Wait a minute, Gifts for our visitors, Download with free knowledge of benefits