Bagaimana cara setup Elementor ke website?

Cara Edit WordPress Menggunakan Elementor

Last Update: August 15, 2020

Written by : Firda

Cara Edit WordPress Menggunakan Elementor

Memiliki Tampilan website yang menarik dan elegan merupakan salah satu faktor pendukung dalam meningkatkan konversi atau penjualan. Membuat pengunjung dapat betah berlama-lama menelusuri website kita hingga akhirnya menjadi prospek dan berujung menjadi pelanggan.

Untuk website berbasis WordPress Anda dapat menginstall beberapa tema yang sudah tersedia. Namun, terkadang sedikit sulit untuk mendesain website hanya dengan fitur tema. Maka dari itu, Anda memerlukan bantuan page builder yang dapat memudahkan untuk mendesain. Anda tidak perlu repot mempelajari coding karena yang Anda perlu lakukan cukup dengan menarik dan menata elemen yang Anda inginkan (drag and drop).

WordPress sendiri memiliki banyak page builder yang bermacam-macam, dan salah satunya yang paling umum digunakan adalah Elementor. Elementor menyediakan template layout website yang bervarian hingga banyaknya fitur-fitur menjadikan Elementor sebagai page builder yang paling sering digunakan hingga memiliki lebih dari 5 juta pengguna aktif.

Artikel ini akan memperkenalkan Anda terkait Elementor mulai dari Apa itu Elementor, cara menginstallnya, manfaat, kelebihan, kekurangan hingga step by step cara mendesain menggunakan Elementor.

Apa Itu Elementor?

Elementor adalah pembuat halaman atau page builder plugin bentuk visual dari WordPress yang bisa di dapat secara gratis. Dengan desainnya yang simple sangat mudah dipelajari oleh pengguna baru. Anda juga tidak harus mempelajari dan memahami bahasa pemrograman lagi.

Elementor dikembangkan pada tahun 2014 oleh Yoni Luksenberg dan Ariel Klikstein. Elementor dikenalkan ke publik pada 1 Juni 2016 dan hingga saat ini telah diinstal oleh sekitar 1 juta pengguna WordPress di seluruh dunia. Terdapat 2 versi elementor yaitu elementor versi gratis dan berbayar dengan kelebihannya masing-masing.

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.

Install Elementor

Menambahkan plugin Elementor pada website cukup mudah berikut ini adalah tahap-tahapnya.

Klik menu Plugins > Add New > Kemudian masukan kata kunci Elementor pada kolom pencarian di sebelah kanan > Instal Now plugin Elementor > tunggu tombol berubah menjadi Active >lalu klik tombol Active > plugin telah siap sedia untuk digunakan.

Apa yang Bisa Anda Buat dengan Elementor?

Pada dasarnya Elementor digunakan untuk membantu mendesain tiap halaman pada website, namun selain itu Elementor juga menawarkan banyak kelebihan dan fitur- fitur yang fungsional yang bisa Anda coba seperti di bawah ini:

· Landing page

Ini adalah fitur khusus untuk dapat mengajak dan mengundang pengunjung website untuk melakukan feedback atau aksi tertentu. Aksi tersebut bisa berupa mengisi formulir, melakukan transaksi pembelian produk, melakukan subscribe pada website dan tautan serta lain- lainnya.

· Opt-in Forms

Fitur ini adalah sebuah formulir yang disediakan dan dirancang untuk meminta data dan informasi pengunjung website. Disini Anda dapat memasukkan apa saja informasi yang ingin Anda minta dari pengunjung situs Anda mulai dari nama, alamat email, dan sebagainya. Formulir opt-in ini juga bisa Anda tata di tempat yang menurut Anda sesuai seperti pada header, footer, sidebar maupun di dalam konten.

· Widget

Sebagai elemen penambah yang turut melengkapi fungsi halaman keseluruhannya, widget adalah pilihan tempat yang lengkap bagi pengguna WordPress. Anda bisa menambahkan dan memasukkan fitur login form, rekomendasi konten dan saran, peta dan alamat, dan banyak pilihan lainnya.

· Pop-up

Bagi Anda yang ingin menonjolkan iklan, pesan atau promosi yang menarik dan berbeda, Anda dapat mencoba fitur pop-up yang satu ini. Fitur pop-up akan muncul setiap kali pengunjung mengklik atau mengakses halaman website tertentu yang ingin Anda tonjolkan.

· Global Widget

Dengan tujuan pembuatan yang dirancang untuk desain dan dapat diterapkan pada bagian web dalam satu waktu sekaligus, Global Widget akan memberikan Anda kendali penuh atas widget yang ingin Anda tampilkan di banyak tempat pada situs web Anda.

· Custom Post Types

Ini adalah halaman konten biasa yang bisa Anda temukan pada WordPress, namun karena WordPress berevolusi dari platform tipe sederhana menjadi CMS yang kuat, istilah ini kemudian melekat. Elementor akan membantu tampilan postingan ini menyesuaikan keinginan si pengguna.

· Custom Header and Footer

Header dan footer adalah merupakan elemen yang berisi identitas dan juga informasi rinci mengenai sebuah situs web. Anda dapat mengisinya dengan penjelasan tentang apa situs web Anda dibuat dan ditujukan. Header terletak pada bagian atas web dan footer berada pada bagian bawah.

Mengenal Fitur-Fitur Di Elementor

Kelengkapan fitur dan elemen ini akan sangat menjanjikan bagi pengguna lama dan baru karena mereka tidak perlu lagi menambahkan aplikasi lain untuk melakukan back up. Berikut ini elemen dan bagian Elementor yang patut Anda ketahui.

1. Tab options

Fitur ini terletak pada bagian bawah side panel Elementor tapi jika Anda membukanya dari browser maka Anda akan menemukannya pada sisi kiri halaman Anda. Terdiri dari opsi atau pilihan berbentuk tab, tab options ini berisikan settings, navigator, responsive mode, history dan juga preview changes.

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

Elemen ini memuat pengaturan dasar dari Elementor yang terdiri dari 3 opsi berbeda yakni yang saling menunjang satu sama lain:

· Style

Pada opsi Style ini pengguna bisa melakukan penyesuaian tampilan warna dan font pada website mereka. Pilihan default color dan default font bisa Anda ubah dengan leluasa kapan saja. Fitur color picker juga akan membantu Anda menentukan kombinasi estetika yang unik

· Settings

Opsi Setting memuat pengaturan pada WordPress dan juga pengaturan plugin Elementor. Pengaturan WordPress memberikan aktivasi fitur di Elementor sedangkan pengaturan Elementor itu sendiri memungkinkan pengguna untuk mengatur konten pada jarak antara konten, lebar konten juga tampilan foto konten dan galeri.

· Go To

Fitur Go To mempunyai 3 opsi lain pula. Finder adalah fitur untuk mencari elemen konten Elementor dengan cepat tanpa harus manual scrolling di element library lagi. View page adalah fitur untuk melihat halaman setelah kita edit. Exit Dashboard adalah fitur yang bisa Anda klik jika ingin 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 yang memiliki fungsinya masing-masing dan dapat Anda sesuakan dengan kebutuhan.

Cara Edit Menggunakan Elementor

Jika Anda sudah memahami semua fitur dan bagian elemen diatas, langkah berikutnya adalah mempelajari bagaimana caranya menggunakan plugin Elementor. Untuk mengetahui bagaimana cara mendesain website dari awal bagi Anda yang merupakan pemula, maka berikut ini adalah step by step dalam membuat Landing Page mulai dari nol.

1.Login WordPress

Pastikan kamu bisa melakukan login WordPress. Untuk melakukan login WordPress, silahkan buka namadomain/wp-admin di web browser. Lalu masukkan username dan password.

2.Memilih Plugins Elementor Page Builder

Seperti yang sudah dijelaskan di poin sebelumnya mengenai cara menginstall plugin Elementor. Setelah proses instalasi selesai, klik Activate untuk mengaktifkan pluginnya. Setelah itu klik Create Your First Page jika belum membuat halaman landing page. Namun, kami sarankan untuk membuat halaman landing page di WordPress terlebih dahulu.

3.Membuat Landing Page dengan Elementor

Klik Menu Pages dan klik halaman yang kamu tunjuk sebagai halaman landing page. Silakan klik tombol Edit With Elementor yang berada diatas halaman untuk membuat landing page dengan elementor. Pertama-tama, silakan klik tombol “+” untuk memilih kolom yang diinginkan untuk tampilan website. Silakan pilih kolom yang kamu inginkan untuk pembagian tampilan website.

4.Memilih Elemen Untuk Landing Page

Setelah memilih kolom, sekarang saatnya membuat landing page yang Anda inginkan. Pastikan Anda harus melakukan desain landing page terlebih dahulu agar. Anda dapat memasukkan Heading, image, carousel, Google Maps, Icon, Image Box, Icon Box, Image Gallery, Image Carousel, Progress Bar, Testimonial dan sebagainya.

Sebagai contoh berikut ini contoh tampilan landing page menggunakan template dengan beberapa elemen library yang bisa langsung Anda edit.

1.Heading

Pada contoh pertama, ketika Anda akan membuat Header. Maka silakan drag elemen “Heading” ke kolom bagian kiri. Anda bisa mengubah tampilan Heading pada bagian kiri. Untuk mengubah konten text editor pada bagian tab Content. Jika ingin mengubah warna huruf, silakan klik tab Style. Jika ingin menambahkan background dan custom css silakan tab Advance. Setelah itu klik Update untuk menyimpan hasil editing.

2.Text Editor

Seperti contoh, kali ini akan dibuat Text Editor. Maka silakan drag elemen “Text Editor” ke kolom bagian kiri. Anda bisa mengubah tampilan text editor pada bagian kiri. Untuk mengubah konten text editor pada bagian tab Content. Jika ingin mengubah warna huruf, silakan klik tab Style. Jika ingin menambahkan background dan custom css silakan tab Advance. Setelah itu klik Update untuk menyimpan hasil editing.

3.Image

Contoh berikutinya, kali ini akan dibuat Image. Maka silakan drag elemen “Image” ke kolom bagian kiri. Anda bisa mengganti Image pada bagian kiri. Anda juga dapat menyesuaikan ukurannya pada pengaturan silakan klik tab Style. Jika ingin menambahkan background dan custom css silakan tab Advance. Setelah itu klik Update untuk menyimpan hasil editing.

4.Icon Box

Pada contoh terdapat beberapa icon media sosial yang dimana nantinya ketika di klik akan langsung terhubung dengan akun media sosialnya. Silakan klik “+” pada kolom lalu drag elemen “Social Icon” ke tiap kolom. Anda bisa ubah judul, icon, posisi icon, deskripsi dan jangan lupa untuk menambahkan link media sosial sesuai dengan iconnya, tulisan serta link pada bagian tab content.

Jika ingin mengubah warna, hover, spasi dan ukuran silakan klik tab Style. Jika ingin menambahkan background, pengaturan margin, pengaturan padding dan custom css silakan tab Advance. Setelah itu klik Update untuk menyimpan hasil editing.

5.Landing Page Sudah Jadi!

Silakan sesuaikan landing page dengan halaman lainnya yang akan Anda buat. Panduan cara membuat landing page dengan elementor telah selesai Anda dapat ikuti secara langsung untuk website Anda. Namun jika sebelumnya kita sudah membahas tahap-tahap dari awal, Elementor juga menyediakan template dengan banyak pilihan. Anda cukup mengedit text dan tidak perlu banyak mendesain.

Mendesain Template Elementor

1. Begitu plugin Anda telah aktif, menu Elementor akan terlihat pada Dashboard dan tombol Edit with Elementor akan muncul di setiap halaman website Anda. klik tombol tersebut setiap kali Anda ingin mengedit halaman yang nantinya akan membawa Anda ke halaman khusus untuk mendesain.
   
   
2. Pada bagian kanan dari side panel adalah tempat Anda dapat mengubah tampilan dan menambahkan fitur- fitur yang diinginkan.
3. Sedangkan untuk membuat halaman dari template, Anda dapat mengklik tombol yang bergambar folder. Selanjutnya Anda akan menemukan halaman yang khusus berisi semua template.
   
   
4. Ada bermacam template yang berupa blocks atau susunan teks pada halaman, Pages yang merupakan template dari keseluruhan halaman.
   
   
5. Jika Anda menemukan desain yang sesuai, klik Insert pada bagian bawah design
6. Desain yang Anda inginkan akan muncul pada halaman dan Anda bisa mengubah isi dan menambahkan elemen yang dirasa perlu.
7. Apabila kostumisasi telah memenuhi kebutuhan Anda, simpan design dengan mengklik tombol panah kecil disamping kotak Publish, lalu klik Save Draft.
8. Untuk menyimpannya sebagai template, klik Save As Template yang memungkinkan Anda untuk menggunakan ulang tampilan yang sama pada halaman lain.

Mendesain Tanpa Template

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 Elementor

Dikutip dari Elementor, berikut ini merupakan kelebihan membangun website menggunakan Elementor

• Lebih cepat, mudah dan fleksibel
• Fitur lengkap dibandingkan dengan page builder lainnya
• Mobile friendly
• Open Source
• Lihat perubahan tampilan secara real-time.
• Terdapat opsi untuk kustomisasi tampilan di tiga jenis layar berbeda: dekstop, tablet, dan mobile.
• Termasuk Responsive Website
• Dikembangkan dengan script yang profesional
• Cocok digunakan untuk pemula
• Drag and drop tanpa koding
• Ramah SEO (Search Engine Optimization)
• Dapat melakukan custom CSS untuk kolom, widget dan section
• Memiliki lebih dari 400 icon yang dapat digunakan
• Memiliki lebih dari 800 beragam Google Font
• Dapat melakukan resize kolom
• Dapat mengatur kolom dan posisi konten yang ada
• Mengatur padding dan margin
• Memiliki Undo-Redo. Setiap perubahan yang dilakukan di halaman terekam dengan baik. Anda bisa mengembalikan tampilan ke versi sebelum dengan sekali klik.

Kekurangan Elementor

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

Memiliki website yang menarik nan elegan menjadi kewajiban bagi bisnis yang sedang mengembangkan diri di dunia digital marketing. Namun, keterbatasan waktu menjadi problema dalam memahami pembuatan website. Karena kebanyakan orang berfikir harus mempelajari bahasa pemograman serta coding agar dapat menciptakan website yang diinginkan.

Elementor sebagai page builder yang sudah dipercaya oleh jutaan orang menjadi solusi bagi Anda. Dilengkapi dengan fitur-fitur yang dapat kita gunakan hanya dengan drag and drop akan sangat membantu Anda pemula sekalipun dalam membangun situs web yang lebih efisien dan menarik.

Elementor memberikan bantuan dan dukungan yang mungkin tidak bisa Anda dapatkan dari plugin lainnya. Tidak terlepas dari kelebihan dan kekurangannya, Anda akan mendapatkan lebih banyak manfaat dibandingkan dengan kekurangannya.

Source

Bagaimana cara set up Elementor ke website Anda?

Apa itu Elementor website?

Kenapa dalam membuat sebuah website perlu menggunakan plugin Elementor?

Apakah Elementor berbayar?