Kupas Tuntas Elementor Yuk - Terlengkap

0 Shares

Halo, Terimakasih sudah berkunjung ke website ini. Diartikel kali ini kita akan membahas Tools yang sangat wajib untuk dipasang ketika kamu membuat website dengan menggunakan CMS WordPress. Tool ini biasa disebut dengan Page Builder

Secara singkat page builder yaitu sebuah Tool yagn digunakan untuk membantu pembuatan website yang berfungi untuk mendesain website yang sedang dikerjakan. Untuk Page builder ini sendiri banyak sekali jenis-jenisnya. Seperti Elementor, Beaver Builder, Live Composer dan masih banyak lainnya.Untuk artikel kali ini kita akan membahasa salah satu plugin yang paling populer dan banyak digunakan juga yaitu “Elementor”.

Daftar Isi

Apa Itu Elementor?

Seperti yang sudah dijelaskan diatas bahwa elementor adalah salah satu page builder yang digunakan untuk mendesain sebuah website. Elementor sendiri sangat mudah digunakan karena kita hanya perlu drag and drop saja dalam pembuatan website tanpa perlu melakukan Coding atau pemrogaman

Oya untuk elementor sendiri ini ada 2 versi, yaitu versi gratis dan berbayar (Pro). Dimana kita bisa menggunakan versi berbayar jika ingin menggunakan Fitur yang lebih lagi. Untuk lebih jelasnya mengenai seperti apa itu versi gratis dan berbayar serta fitur nya silahkan baca penjelasan dibawah ya.

Versi Gratis

Untuk menggunakan Versi gratis kamu bisa download langsung di WordPress.org atau juga bisa langsung instal dari dashboard WordPress kamu. Untuk versi gratis sendiri sudah bisa digunakan untuk membuat website dan mendukung untuk beberapa hal , Contoh :Video, Basic Gallery, Accordion, Menu Anchor, Icon List dan masih banyak lainnya. Walaupun Menggunakan versi gratis kamu masih bisa kok membuat website secara profesional.

Versi berbayar

Untuk Versi berbayar ini jika kamu ingin membelinya secara langsung kamu bisa langsung kewebsite Resmi dari elementor nya di https://elementor.com/ atau kamu juga bisa mencari jasa instal terpercaya, dimanan nanti penyedia jasa instal akan memasukan lisensi kedalam elementor diwebsite kamu, Sehingga Elementor kamu jadi Versi Pro.

Lalu apa saja sih keunggulan atau fitur yang dimiliki Versi Pro dibandingkan dengan Versi biasa atau gratisan.Tentunya banyak sekali perbandingan Versi pro dan bisa.Berikut beberapa fitur yang dimiliki versi Pro

Gallery
Slides
Media Carousel
Price Table
Nav Menu
Template
Custom css
Sticky Menu
Form Elementor atau Form Formulir

Dan masih banyak lainnya, untuk melihat detail yang bisa dimiliki versi pro, kamu bisa login ke halaman web kamu dan edith With Elementor, pada bagian Element library jika kamu melihat ada fitur yang masih ada tanda gemboknya itu adalah fitur yang bisa di jalankan jika kamu menggunakan elementor versi pro nya.

Kelebihan dan kekurangan Elmentor Page Builder

Ketika kamu ingin menggunakan sebuah tool page builder, pastinya kamu sudah mempertimbangkan kelebihan dan kekurangan dari setiap page Builder yang ingin digunkan. Baik itu dari fitur atau dai kemudahan dalam penggunaaan. Berikut kita akan membahas beberapa kelebihan dak kekurangan ketika kita menggunaka Elementor Page Builder.

Kelebihan Elementor

Ketika kamu memilih elementor sebagai tool yang akan kamu gunakan untuk mendesain website, Setidaknya kamu akan merasakan beberapa kelebihan Elementor

Mudah digunakan, pada dasarnya plugin menggunakan prinsip sistem drag and drop dan menurut pengalaman penulis Elementor adalah salah satu plugin yang paling mudah digunakan khususnya Untuk Pemula
Tersedia Fitur Kustomisasi Untuk tiga Device yang berbeda, Desktop, Tablet, Dan Mobile
Tersedia Fitur Preview Changes, jadi ketika anda masih ragu seperti apa hasil editing kamu jika sudah live, maka kamu bisa menggunakan meteode ini terlebih dahulu sebelum mengupdatenya.
Banyak Fitur yang bisa kita gunakan, seperti Divider, Space, Video, Maps, Shortcode, Gallery, Accordion, Toggle dan masih banyak lainnya yang bisa digunakan untuk menghiasi website kamu

Kekurangan Elementor

Walaupun banyak fitur yang tesedia di elementor baik free ataupun pro, Namun Tetap saja sebuah plugin buillder pasti memiliki kekurangan.

Fitur Form Elementor, hanya tersedia di versi pro. Jadi jika ingin menggunakan Form kita harus menginstal plugin lain yang akan menambah beban kerja dari server yang ktia gunakan tentunya
Untuk Tampilan halaman yang default seperti tampilan Shop ketika menggunakan Woocommerce tidak bisa kita edit menggunkana elemntor , harus menggunakan yang versi pro

Secara umum tidak ada kekurangan yang sangat signifikan, apa lagi jika kita menggunakan elemntor pro, hampir semua bisa dilakukan dengan menggunakan elementor. Namun sekali lagi karena ini adalah plugin builder yang hanya menggunakan drag and drop tentu memiliki batasan yang tidak bisa dilakukan jika menggunakan Coding manual.

Cara instal Elementor

Sebenarnya untuk instal elementor ada beberaa cara,Mulai instal langsung dari dashboard WordPress, Upload langsung di dashboard WordPress, Upload Ke dalam Hosting nya secara langsung dan juga instal didalam localhost. Daripada Semakin Bingung Silahkan Ikuti Panduan Dibawah ini

Baca Juga: WordPress Bagaimana Cara Install-nya ?

Install dari Dashboard WordPress langsung

Cara ini adalah cara yang paling umum digunakan, dikarenakan cara ini paling mudah kamu cukup cari dipencarian Plugin, maka plugin yang diinginkan siap diinstal. Caranya yaitu, Login ke Dashboard WordPress > Plugin > Tambah Baru >Klik Instal Sekarang > Aktifkan

Upload Elementor ke Dashboard WordPress

Cara yang satu ini biasanya dilakukan ketika kamu gagal mengupload atau menginstal di langkah pertama..Caranya Login Ke dashboard WordPress > Plugin > Tambah Baru > Ungah Plugin > Pilih Plugin yang akan di unggah > instal dan aktifkan plugin (pada pembahasan ini tentunya plugin elementor yang kita upload)

Baca Juga: Cara Membuat Website Langsung di Hosting Cepat dan Mudah

Upload Elementor ke Hosting

Cara yang satu ini biasanya ketika kamu sudah melakukan cara kedua di atas masih gagal terus, biasanya karena ukuran plugin yang terlalu besar atau jaringan internet kamu lambat, sehingga mengalami kendala di dalam proses upload dan insatal.Cara untuk upload plugin melalui hosting, Pastikan kamu sudah login ke cpanel website kamu > Cari File manager , Klik >berikutnya ada dua pilihan, Jika kamu akan menambahkan plugin ke dalam domain uatama di web kamu, kamu cari folder nama nya public html . jika kamu ingin menambahkan plugin di domain lain yang ada di hosting yang sama, kamu klik nama domainnya >wp-content >Plugin >Upload (untuk gambar upload bisa lihat dibawah ini).

Setelah klik upload maka kamu akan dibawa ke halaman baru, silahkan pilih file yang akan kamu upload > Setelah 100% terupload silahkan klik “Go back”. Untuk kasus ini saya kan coba upload plugins Elementor Tentunya

Setelah kembali ke Wp-content-plugin, maka sekarang akan ada plugin baru yang sudah kamu upload tadi > klik Kanan > Extract > Extract File (s) > Setelah Selesai bisa klik Close.

Berikutnya kembali ke dashboard WordPress > Klik Plugin > Plugin Terpasang > Maka akan ada plugin baru yang sudah kamu upload tadi > Klik aktifkan.dan plugin yang kamu inginkan sudah aktif

Baca Juga: Begini Cara Download dan Install XAMPP

Install didalam Localhost

Cara yang satu ini bisa dilakukan jika website wordpress yang kamu bangun masih di dalam localhost, Sebenarnya walaupun di dalam localhost kita bisa instal Plugin dengan cara satu dan cara dua diatas.Namun jika kedua cara tersebut masih gagal bisa ikuti cara dibawah ini.

Aktifkan Xampp > ke folder htdocs > kemudian cari nama folder website kamu >wp-content > plugin > pastekan plugin yang sudah kamu download dari WordPress.org atau dari situs lainnya > Klik kanan > Extract Here > selanjutnya masuk ke website kamu > plugin > plugin Terpasang, maka akan muncul plugin yang sudah kamu extract di Localhost tadi > Klik aktifkan (Cara ini sama dengan langkah tiga diatas, hanya perbedaannya masih dilocalhost dan dihosting)

Mengenal Bagian-bagian Elementor

Sebelum kamu memulai edit atau mendesain website kamu dengan elementor, ada baiknya jika kamu mengenal sedikit banyak bagian-bagian Elementor.

Element Library

Element libarary ini berisi semua fitur yang bisa kamu drag and drop ke dalam halaman editing kamu,Element Libary ini berisi berbgai macam Fitur seperti image, Text Editor, Text Heding, Video, Button, Maps,Icon dan masih banyak lainnya

Tab Option

Tab Option ini letaknya di bawah element libaray, Terdiri dari Setting, Navigator, History, Responsive Mode, Preview Changes.

Setting berfungsi untuk mengatur page layout, Publikasi Halaman web yang sedang kamu bangun, menyembunyikan atau menampilkan Titel

Navigator bisa dikatakan daftar atau runutan apa saja yang sedang kamu kerjakan di halaman website kamu.

History akan menampilkan semua aktivitas yang sudah kamu kerjakan atau fitur yang sudah kamu tambahkan ke dalam halaman web yang sedang kamu desain.

Responsive Mode berfungsi untuk melihat desain web kamu dengan berbagai macam Device sekaligus melalu fitur ini, baik Desktop, Tablet dan Mobile.

Preview Changes Fitur yang ini berfungsi untuk melihat hasil design kamu, sebelum kamu mengupdate nya.

Page Setting.

Bagian page Setting ini terdiri dari dua bagian yaitu Setting dan Navigate From Page

Setting bagian berisi untuk mengatur Warna Font, Jenis Font secara umum dan juga kamu bisa mengimport Theme Builder tapi ini hanya berfungsi jika elementor kamu versi Pro

Navigate From Page. Finder digunakan untuk menari element kontent yang ada di elementor, View page berfungsi untuk meihat hasil halaman website yang sudah kamu buat, Exit To dashboard berfungis kembali ke halaman dashboard WordPress

Cara Mengaplikasikan Elementor

Disini saya akan berbagi sedikit cara mengaplikasikan elementor didalam pembuatan website. Masuk Ke laman yang sudah dibuat > Edit With elementor ,sebagai catatan jika menu yang kamu buat sebelumnya belum pernah diedit sama sekali mengunakan Elementor, Maka Klik Sunting > baru muncul Edit with Elementor

Jika sudah di bawa ke halaman desain kamu bisa klik tanda (+) “add new section”

Setelah itu kamu bisa memilih structure yang ingin kamu guanakan, bisa satu kolom, dua kolom dan sebagainya

Langkah berikutnya kamu bisa memulai desain kamu dengan cara drag and drop fitur yang ada di element libray di tab sebelah kiri kamu, seperti gambar, Teks Heading, Maps dan lainnya.

Praktek Membuat Landing Page Sederhana

Apa itu landing page? Apa beda nya dengan website secara umum? Walaupun pada dasarnya kedua hal ini sama.namun jika kita perhatikan antara website dan langding page itu memiliki perbedaan.

Website pada umumnya menampilkan keseluruhan dari profil perusahaan kita atau menampilkan semu dari produk kita seperti Toko online. Jika landing page ini biasanya lebih khusus lagi, biasanya hanya akan menampilkan satu produk atau jasa yang mereka jual. Misalnya menjual Produk Casing Hp, maka dari bagian Header samapai paling akhir biasanya akan membahas mengenai Produk Tersebut,mulai dari gambar yang menarik,Kenapa harus membeli produk Tersebut, dan lainnya lagi, yang pada dasarnya bertujuan atau menggiring pembaca untuk membeli produk tersebut.

Berikut persiapan sebelum membuat landing page

Hosting dan Domain

Kamu memerlukan hosting dan domain untuk membuat landing page atau website kamu Online

Produk atau Jasa

Tentukan Produk atau jasa apa yang akan kamu jual,dan juga kamu harus riset juga seberapa berat sih persaingan kamu untuk produk atau jasa tersebut, sehingga kamu bisa menambahkn beberapa value ketika konsumen membeli produk kamu, sehingga akan semakin menarik

Segera Eksekusi

Setelah kamu menentukan 2 hal diatas, segera lakukan eksekusi untuk membuat landing page

Cara membuat landing page

Untuk membuat landing page ini sendiri ada dua macam,ada yang menggunakan desain yang sudah jadi. Sehingga kamu tidak perlu repot-repot desain dari awal, Cukup import landing page nya dan ubah sesuai keinginan kamu. Misal, warna, gambar, jenis produk dan lainnya. Kali inii saya akan menjelaskan dasar membuat landing di wordpress.

Pastikan kamu sudah login ke dashboard WordPress kamu > instal Tema > saya menggunakan Tema Page Builder Framewrok > buat menu dan setting layout nya, jika kurang paham kamu bisa baca artikel Tentang Tema Page Builder Framework Yang ada diwebsite ini juga. Untuk menu kamu buat satu saja dan beri Nama Home

Untuk settingan layout nya, Tata letak pilih lebar penuh, Nonaktifkan Elemen, cek list judul halaman dan header, Bilah sisi, pilih tanpa sidebar

Lanjut edit menu yang sudah kamu buat dengan edit with elementor dan add new section > lanjut pilih strcture yang ingin kamu gunakan, saya memilih 2 kolom

Selanjutnya kamu bisa insert gambar, Text Heading, Text editor,Button dan lainnya sehingga akan menjadi tampilan landing page yang kamu inginkan, tentunya kamu harus custom sendiri untuk warna,jenis font,dan lainnya.dibawah ini adalah contoh tampilan landing page

Nah, sampai disini artikel singkat tentang apa itu page builder, mengenal bagian-bagian elementor,cara menginstal elementor dasar menggunakan elementor sudah selesai.Tentunya kamu harus berkreativitas sendiri supaya tampilan web atau landing page kamu semakin menarik.

Akhir kata penulis mengucapka terimakasih atas kunjungannya dan semoga artikel kali ini bisa memberikan manfaat.

Baca Artikel Menarik Lainnya:

Kupas Tuntas Elementor Yuk – Terlengkap