Tutorial Elemen WordPress | Panduan Langkah Demi Langkah Pada Tahun 2024

Anda ingin memulai dengan Elementor dan sedang mencari a Tutorial Elemen WordPress? Pencarian Anda berakhir di sini. Pada artikel ini, saya akan memberi tahu Anda tentang semua hal yang perlu Anda ketahui tentang Elementor.

Mulai dari menginstalnya hingga membuat halaman yang sangat bergaya, semua keraguan Anda akan terpecahkan jika Anda membaca artikelnya. Saya jamin; bacaannya tidak akan sia-sia!

Namun Anda memerlukan plugin pembuat situs web untuk memberikan sentuhan profesional pada situs web Anda.

Bagaimana cara mendapatkannya? Ya, saya gunakan Elementor untuk itu. Elementor sangat memudahkan saya membuat situs web profesional hanya dengan fitur drag and drop sederhana. 

Ingin tahu lebih banyak tentang Elementor, lihat detail saya Ulasan Elemen.

Cara Memasang Elementor Di WordPress

Ada 2 cara untuk menginstal Elementor di WordPress. 

• Melalui situs resmi Elementor

Kunjungi situs web resmi Elementor dan klik tombol Unduh Gratis yang ditampilkan di situs web. 

Segera setelah Anda mengklik tombol Unduh Gratis, sebuah pop-up akan muncul untuk berlangganan situs web Elementor, dan setelah Anda melakukan hal yang sama, Plugin akan secara otomatis mulai mengunduh.

Anda akan menemukan file zip yang diunduh di laptop/Pc Anda. Sekarang buka dashboard WordPress Anda dan klik pada bagian Plugins > Add New Plugin > Upload Plugin

Pilih file Elementor dan unggah ke WordPress.

• Melalui dasbor WordPress

Anda juga dapat menginstal plugin Elementor langsung dari dashboard WordPress. Buka saja Plugin lalu Tambahkan Plugin Baru

Di pojok kanan atas, Anda akan menemukan bilah pencarian, ketik Elementor di bilah pencarian. Hasil pertama adalah apa yang perlu Anda instal di WordPress Anda. Cukup klik install dan tunggu Plugin diinstal. Aktifkan Plugin, dan Anda memiliki pembuat situs web hebat yang siap diterapkan.

Sekarang setelah Elementor terinstal di dashboard WordPress Anda, mari kita lihat fitur-fitur yang disediakannya.

Fitur Elementor Dan Kegunaannya Dalam Membangun Halaman Web

Daftar fitur yang disediakan Elementor tidak ada habisnya, jadi saya akan membahas banyak fitur penting Elementor. Pastikan Anda membacanya dan mencobanya nanti.

Ada dua paket untuk Elementor The Free dan The Pro. Seperti namanya untuk paket Pro, Anda harus memainkannya, tetapi ada beberapa fitur yang juga disertakan dengan paket gratisnya.

Saya akan mulai dengan membahas fitur-fitur pada paket Gratis terlebih dahulu, baru kemudian Pro.

Fitur Paket Gratis Elementor

Fitur penting:

• Drag dan Drop

Fitur drag and drop Elementor sangat cepat dan membantu Anda membuat halaman web desain lebih cepat. Dari membuat tata letak halaman web hingga menyempurnakannya, semuanya bisa dilakukan hanya dengan drag and drop.

Anda tidak perlu berpindah tab atau mengubah halaman untuk mendesain header dan footer Anda. Dengan Elementor, Anda dapat melakukannya di halaman yang sama dengan halaman web utama Anda.

Anda dapat menyalin dan menempel, bahkan menduplikasi gaya atau fitur yang ingin Anda gunakan. Ini menghemat waktu Anda untuk membangun kembali fitur yang sama berulang kali.

Dengan opsi bilah pencarian yang disediakan oleh Elementor, Anda dapat dengan mudah menavigasi situs web dan membuka tab yang diinginkan dalam hitungan detik. Fitur ini sangat berguna bila Anda memiliki halaman yang sangat panjang untuk dibuat.

Ada 3 opsi untuk menyimpan desain Anda, mulai dari menghapus dan membuat cadangan. Anda dapat mengulang/membatalkan desain yang telah Anda buat. Ini memberi Anda kemampuan untuk mengurutkan halaman pengujian A/B dengan pengamatan Anda. 

Anda dapat mengunjungi semua revisi di tab revisi, yaitu, Anda dapat melihat semua jenis desain yang telah Anda coba sejauh ini di halaman web Anda dan juga memilih versi sebelumnya jika Anda tidak menyukai halaman web Anda saat ini. 

Ingin mencoba berbagai fitur berbeda dan melihat apa yang berhasil? Tidak ada masalah dengan Elementor; Anda dapat mendesain halaman dalam mode draf, mencoba semuanya, dan mengambil halaman tersebut nanti setelah Anda sepenuhnya siap untuk mempublikasikan halaman tersebut.

Cara menggunakan fitur Elementor Drag and Drop

Semua fitur seret dan lepas tersedia di sisi kiri halaman segera setelah Anda membuat halaman.

Setelah membuat halaman di WordPress dan memberinya judul, cukup klik edit dengan Elementor, yang akan membawa Anda ke editor langsung Elementor, yang terlihat seperti gambar di bawah ini.

Pada gambar kedua di atas, Anda dapat melihat opsi drag and drop di sisi kiri halaman. Ada banyak widget, Anda hanya perlu menggulir ke bawah, atau Anda juga dapat mencari widget dengan bantuan bilah pencarian di atas.

• Desain Template

Anda mendapatkan template desain bawaan dengan Elementor. Bukan hanya 5 atau 10, tetapi Elementor memberi Anda 100+ templat desain yang gratis untuk digunakan dan lebih banyak lagi saat Anda meningkatkan ke versi Pro.

Cara memilih template yang diinginkan untuk perpustakaan template Elementor

Saat pertama kali Anda membuka halaman pembuat Elementor, Anda akan melihat sesuatu seperti yang ditunjukkan di bawah ini:

Gambar diambil dari situs Elementor dan cukup jelas.

Segera setelah Anda mengklik opsi Folder, Anda akan melihat pop-up seperti di bawah ini.

• widget

Widget drag and drop yang disertakan dengan Elementor tidak terhitung jumlahnya. Beberapa dari mereka adalah:

• Bagian Dalam: Mari kita bagi satu bagian menjadi dua.
• Judul: Masukkan bidang ini ke halaman web Anda untuk memasukkan judul yang menarik
• Gambar: Letakkan gambar di halaman web Anda dengan bantuan widget ini
• Editor Teks: Masukkan teks di halaman web Anda dengan bantuan widget editor teks
• Video: Anda dapat menggunakan widget Video untuk menempatkan video berkualitas di halaman Anda. Ini akan meningkatkan pengalaman pengguna
• Tombol: Ajakan bertindak sangat penting untuk hampir semua situs, dengan tombol Anda dapat meletakkan ajakan bertindak di halaman Anda dan menautkannya ke halaman arahan produk Anda.
• Peringkat Bintang: Peringkat bintang bermanfaat bagi situs web eCommerce mana pun untuk memberikan peringkat pada beberapa produk berbeda yang ditawarkan.
• Pembagi: Membantu halaman web Anda dalam lekukan dan menghasilkan ruang putih untuk meningkatkan pengalaman pengguna.
• Ikon: Dengan widget ikon, Anda dapat menempatkan ikon media sosial yang menarik serta berbagai layanan untuk membuat halaman Anda terlihat lebih menarik.
• Penghitung: Buat penghitung waktu mundur untuk produk Anda atau layanan tambahan terbatas untuk menciptakan urgensi.
• Testimonial: Tambahkan testimonial tentang produk dan layanan Anda untuk membangun kepercayaan dengan pengunjung situs Anda.

Selain itu, masih banyak widget lainnya seperti carousel gambar, galeri dasar, tab, shortcode, HTML, menu bar, dll. Pastikan Anda melihat semua fitur setelah menginstal plugin di WordPress.

Lihatlah beberapa widget yang dimiliki Elementor di bawah pada gambar.

Cara menggunakan Widget Elementor

Untuk menggunakan Widget Elementor:

Buka dasbor Elementor dan lihat di sisi kiri halaman. Ada sejumlah widget yang dapat Anda tarik dan lepas di halaman web Anda dan mulai bekerja.

• Perancangan dan pengeditan responsif

Dengan semakin menonjolnya aturan indeks mobile-first, Google memastikan bahwa situs mobile-friendly hanya berperingkat lebih tinggi di Google, dan hal yang sama kini terjadi pada SERP lainnya. 

Dengan Elementor, Anda tidak perlu khawatir tentang kesesuaian untuk seluler karena semua templat, baik gratis atau berbayar, responsif seluler serta responsif tablet dan desktop. Anda juga dapat mengedit fitur apa saja yang akan dilihat pengguna saat mereka mengakses dari seluler atau desktop. 

Anda dapat memberi mereka pengalaman berbeda di kedua perangkat, meskipun praktik ini tidak disarankan karena terkadang dapat menimbulkan kebingungan di benak pengguna Anda tentang merek tersebut.

Cara melihat respons seluler laman web Anda

Di bagian bawah pembuat laman web, di pojok kiri bawah, Anda akan melihat tiga ikon yang memiliki opsi untuk melihat laman web Anda melalui desktop, tablet, dan seluler. Situs tersebut akan terlihat persis sama untuk pengguna lain setelah Anda mempublikasikan situs web Anda.

Fitur alur kerja:

• Tidak ada persyaratan pengkodean

Anda tidak perlu menjadi ahli atau bahkan tahu sedikit pun tentang coding saat menggunakannya Elementor. Semua widget yang disebutkan di atas bersifat drag and drop, dan Anda dapat dengan mudah membuat halaman web kelas atas dan bergaya dengannya. 

Elementor sendiri menangani bagian pengkodean. Tidak hanya itu, kode yang digunakan juga dioptimalkan dan dipersingkat sehingga mengurangi waktu buka halaman web Anda - sebuah faktor yang sangat penting untuk mendapatkan peringkat teratas.

• Bilah Navigator

Dengan bantuan navigasi, Anda dapat melihat struktur yang telah Anda rancang pada halaman web, yaitu urutan halaman dan alurnya. Anda juga dapat mengubah, menghapus, dan menduplikasi widget jika Anda ingin melalui bilah Navigator.

Cara menggunakan Bilah Navigasi

Untuk menggunakan Navigator, cukup klik kanan di bagian belakang halaman web Anda yang dibuka dengan Elementor dan klik Navigator. Akan muncul pop-up seperti terlihat pada gambar di bawah ini.

• Hotkeys

Tombol pintas adalah tombol pintas ke widget utama yang ada di dasbor Elementor. Lihat gambar untuk melihat beberapa tombol pintas yang telah ditentukan sebelumnya.

• Fitur pengeditan sebaris

Dengan Elementor, Anda tidak perlu menulis konten Anda di tempat lain dan menyalin-menempel serta mengedit gayanya. Anda bisa mengetik langsung di dashboard WordPress dengan gaya yang diinginkan dan menghemat waktu Anda yang berharga.

Fitur desain

• Font Global

Dengan bantuan Elementor, Anda dapat mengatur gaya font tertentu untuk seluruh situs web Anda hanya dengan satu klik. Tidak masalah apakah itu judul, paragraf, kutipan, atau bahkan ajakan bertindak. 

• Warna Global

Demikian pula, saat font Global diatur, Anda dapat mengatur warna seluruh teks situs web Anda agar sama jika diperlukan.

• Gradien Latar Belakang

Dengan fitur warna gradien, Anda dapat menerangi latar belakang yang Anda atur untuk setiap blok dan bahkan beranda Anda. Warna gradien ini berlaku untuk setiap halaman yang Anda miliki di situs web Anda.

• Video Latar Belakang

Anda dapat menggunakan video sebagai latar belakang dengan Elementor. Video di Latar Belakang benar-benar dapat mencerahkan halaman web Anda.

Cara menggunakan fitur desain di Elementor

Semua fitur yang disebutkan di atas dapat dengan mudah ditemukan di dasbor Elementor, dan Anda dapat menggunakannya hanya dengan mengeklik dan menguji apa yang terlihat bagus di halaman web Anda.

• Fitur lain
• Terapkan hamparan Latar Belakang
• Letakkan tayangan slide di Latar Belakang
• Buat kanvas untuk membuat halaman Anda terlihat hidup
• Manfaatkan mode campuran
• Filter gaya CSS
• Pembagi bentuk
• Bayangan kotak
• Ikon
• Ekspor ikon SVG dari situs web lain

Fitur tata letak

Anda dapat mengubah tata letak halaman web dan mengoptimalkannya agar terlihat bagus dengan berbagai fitur itu Elementor menyediakan, seperti lebar dan tinggi bagian, lebar kolom, celah, dan posisinya.

Anda juga dapat menyesuaikan margin dan padding, yang merupakan fitur yang sangat penting untuk dimiliki pada halaman web. 

Fitur Paket Elementor Pro

Essentials

Selain fitur gratis, Elementor Pro memiliki 2 fitur lagi untuk ditawarkan.

1. Pembuat pop-up

Anda dapat membuat pop-up untuk mendaftar, untuk penawaran waktu terbatas, dan juga pop-up niat keluar untuk meningkatkan penjualan dan membuat halaman Anda lebih menarik.

Fitur tersebut, seperti widget lainnya, hadir di dashboard Elementor.

Dengan Pembuat pop-up, Anda dapat membuat pop-up berikut:

• email Berlangganan
• Pop-up Formulir Masuk
• Pop-up spanduk promosi dan penjualan
• Tangkapan prospek
• Kunci konten dan tampilkan pop-up
• Pengumuman
• Keluar dari Intent
• Selamat datang jenis pop-up Mat
• Produk terkait dan peningkatan penjualan

2. Pembuat Tema

Dengan Elementor Pro, Anda memiliki kendali penuh atas semua fitur yang Anda gunakan di situs web Anda. Anda bisa mendesain halaman 404 dan mengarahkan pengguna ke halaman pilihan Anda. 

Anda dapat mengelola header dan footer pada halaman yang sama dengan tempat Anda mendesain. Dengan Integrasi WooCommerce yang kuat, Anda juga dapat mengoptimalkan halaman produk Anda.

Fitur desain

1. CSS Khusus

Dengan setiap widget yang Anda tambahkan, Anda dapat menambahkan cuplikan CSS khusus untuk membuat konten lebih personal dan menarik. Namun untuk menggunakan fitur ini, Anda harus memiliki pengetahuan yang baik tentang CSS. 

Menggunakannya tanpa sepengetahuan sebelumnya juga bisa berdampak buruk. Jadi jika Anda tidak memiliki keahlian, lebih baik hindari fitur Custom CSS.

2. Efek Gerak

Anda dapat menambahkan animasi yang bagus dan memberikan tampilan kartun pada situs web Anda. Ini membantu menarik audiens target tertentu dan terkadang bisa sangat bermanfaat. 

Cara menggunakan fitur desain di Elementor

Ya, ini bukan ilmu roket. Seperti widget lainnya, Anda dapat menggulir panel dasbor dan mencarinya atau cukup mengetikkan nama widget di panel pencarian.

Marketing

Fitur-fitur ini adalah fitur-fitur yang tidak ada di Elementor versi gratis.

• Widget Formulir

Dengan pembuat formulir Elementor, Anda dapat membuat berbagai perubahan dan membuat formulir Anda menarik dan menarik untuk diisi.

• Pilih tata letak dan jarak yang Anda inginkan dengan cukup mudah.
• 10+ bidang untuk dipilih, yang Anda inginkan di formulir Anda.
• Pilih dari berbagai warna dan tipografi yang sesuai dengan desain halaman web dan skema warna.
• Anda juga dapat membuat formulir dinamis
• Jika Anda memerlukan formulir panjang dengan pembuat formulir Elementor, Anda dapat membuatnya dan memecahnya menjadi beberapa langkah sehingga pengguna mengisinya dengan cara yang mudah.

• Widget Korsel Testimonial

• Anda dapat menggunakan template pra-desain yang disertakan dengan Elementor versi Pro dan membuat carousel testimonial yang menakjubkan untuk bisnis Anda guna mendapatkan lebih banyak konversi.
• Sejajarkan konten dan tata letak carousel. Memiliki kontrol penuh atas tampilan dan penyelarasan carousel.
• Templat penyesuaian yang disediakan di Elementor Pro mudah digunakan dan memberikan pengalaman yang ramah pengguna baik bagi yang membuat maupun yang melihatnya.

Cara menggunakan Widget Korsel Testimonial di Elementor Pro

• Cari Testimonial Slider di bilah pencarian dasbor. Buka widget, dan Anda dapat segera mulai membuat penggeser. Ada dua skin untuk dipilih dari default dan gelembung. Pilih yang Anda butuhkan sesuai dengan gayanya.
• Sejajarkan dan selesaikan tata letak testimonial Anda, yang dapat dilakukan melalui 5 opsi Gambar inline, gambar bertumpuk, gambar di atas, gambar kiri, dan gambar kanan.
• Pilih gaya dan desain sesuai dengan skema warna Anda dan tambahkan konten ke penggeser.
• Anda dapat memutar slide secara otomatis pada penggeser, menjedanya saat pengguna mengekliknya, atau mengatur waktu tertentu pada opsi perubahan slide. Saya lebih suka menggunakan opsi jeda pada interaksi untuk penggeser testimonial saya.
• Tautan Tindakan

Anda dapat menghubungkan situs web Anda dengan WhatsApp, kalender Google, dan banyak aplikasi lainnya dengan Elementor Pro.

Cara menggunakan tautan tindakan di Elementor Pro

• Pergi ke Elementor dasbor dan cari bidang tautan, yang merupakan salah satu widget Pro yang dimiliki Elementor.
• Pilih opsi dinamis yang tersedia di pojok kanan atas pop-up widget.
• Pilih URL kontak di bawah opsi tindakan.
• Tambahkan semua detail yang diminta widget, dan Anda siap untuk mengintegrasikan platform kontak dengan situs web Anda.

Fitur Pembuat Tema

• Konten Dinamis
• Manfaatkan Integrasi sempurna untuk membuat halaman web dinamis yang hebat.
• Anda dapat menambahkan warna dinamis, gambar, bahkan logo situs web, dan banyak lagi ke halaman web Anda.
• Hal terbaiknya adalah Anda dapat menyimpan tata letak konten dinamis yang Anda buat dan menggunakannya di mana saja di seluruh situs web.

Cara menggunakan konten dinamis dengan Elementor Pro

Saya akan menunjukkan contoh penggunaan editor teks dan membuat konten menjadi dinamis. Pastikan Anda melihat semua widget lainnya dan mencobanya.

1. Buka editor teks dan ketik teks yang Anda inginkan di halaman web Anda. Sekarang klik ikon di pojok kanan atas editor, seperti yang ditunjukkan pada gambar di bawah.
2. Saat Anda mengklik ikon tersebut, Anda akan melihat daftar opsi yang muncul melalui dropdown. Ini diklasifikasikan menjadi posting, arsip, dan situs. Pilih opsi yang Anda inginkan dan segera mulai pekerjaan Anda.
3. Sekarang untuk mengedit lebih lanjut judul halaman Anda, Anda harus mengklik ikon yang berbentuk kunci pas, seperti yang ditunjukkan pada gambar di bawah.

Pada kotak yang ditampilkan pada gambar di atas, yaitu sebelum, sesudah, dan fallback, Anda perlu meletakkan judul sebelum perubahan, judul setelah perubahan, dan konten konsisten yang akan ditampilkan sebagai pengganti konten dinamis. bila tidak ada sebelum dan sesudah judul.

Fitur pembuat tema lainnya di Elementor Pro

• Kondisi tampilan: Anda dapat memutuskan apa yang akan ditampilkan dan di mana akan ditampilkan
• Header dan Footer: Hanya dengan drag dan drop sederhana, Anda dapat menyesuaikan header dan footer halaman web Anda
• Header tempel: Tambahkan header tempel ke halaman tertentu atau untuk keseluruhan situs web Anda secara global.
• Halaman 404: Rancang halaman 404 khusus dan arahkan pengguna dan audiens Anda ke halaman yang Anda inginkan.

Konten Tema

• Widget bilah Menu Navigasi

• Ada banyak opsi gaya yang dapat Anda pilih untuk bilah navigasi Anda.
• Gaya ini responsif terhadap semua perangkat, dan Anda dapat melihatnya di versi seluler dan membuat perubahan yang diperlukan jika diperlukan.
• Anda dapat menganimasikan bilah navigasi Anda dengan animasi dan efek hover. Itu benar-benar menerangi halaman Anda.
• Anda dapat memilih cara menempatkan menu, yaitu secara horizontal, vertikal, melihatnya dalam layar penuh, mungkin mencoba opsi hamburger.

Cara menggunakan widget bilah menu navigasi

1. Buka dasbor dan cari bilah menu
2. Anda dapat mengatur menu menjadi horizontal, vertikal, atau dropdown sesuai dengan gaya yang sesuai dengan situs web Anda.
3. Anda juga dapat menambahkan lapisan tunggal dan ganda di bawah setiap konten menu untuk menyorot dan bahkan mengubah warna teks melalui dasbor.

• Widget Pencarian

Widget pencarian dilengkapi dengan tiga skin: widget pencarian default, minimal, dan layar penuh.

Anda dapat mengubah desain bilah pencarian serta tombol agar sesuai dengan gaya halaman web Anda.

Cara menggunakan bilah pencarian dengan Elementor Pro

Buka dasbor Elementor dan cari widget bilah pencarian, pilih gaya yang Anda inginkan, default, layar penuh atau minimal dan ubah tipografi dan warna bilah pencarian agar sesuai dengan tema warna Anda.

• Fitur konten tema lainnya yang Anda dapatkan dengan Elementor Pro

• Widget postingan: Ubah tampilan sidebar dengan meletakkan postingan terbaru Anda di sana.
• Widget komentar WordPress: Dengan widget ini, pembaca dapat berkomentar tentang postingan yang Anda tulis.
• Widget Portofolio: Jika Anda memiliki banyak portofolio untuk ditampilkan, gunakan widget portofolio ini untuk menampilkannya dengan gaya yang inovatif dan menarik.

Semua fitur ini tersedia di dasbor utama Elementor, mirip dengan widget lainnya. Pastikan Anda melihat semua fitur ini.

Harga Elementor Pro

Ulasan Pengguna 

Link Cepat:

• Tutorial Elemen Pro
• TAMBAHAN ELEMENTOR TERBAIK
• Jangkar Menu Elemen
• Duda vs Elementor

FAQ Tentang Tutorial Elementor WordPress

Baca juga:

• Pembuat Berang-berang vs Divi
• Pembuat Berang-berang vs Elementor

Kesimpulan: Tutorial Elementor WordPress 2024

Salah satu perangkat lunak perancang halaman web terkemuka, Elementor, adalah platform yang andal dan jelas untuk membangun situs web Anda. Dari membuat halaman blog dasar hingga membuat halaman arahan produk yang bergaya dan menakjubkan, semuanya dapat dilakukan dengan Elementor.

Elementor versi Pro memiliki fitur tanpa akhir untuk digunakan dan membawa situs web Anda ke level baru. Ini memberi Anda kebebasan untuk memiliki kendali penuh atas situs web Anda juga.

Anda tidak perlu menjadi pembuat kode untuk menggunakan Elementor. Menggunakan Elementor semudah mempelajari cara mengeklik dan menarik serta melepas fitur.

Ya, diperlukan sedikit waktu untuk melihat semua fitur dan mengetahui fitur apa yang berguna untuk situs web Anda, tetapi waktu yang Anda curahkan untuk Elementor akan sangat berharga, saya jamin itu.

Jadi, cobalah Elementor dan beri tahu saya pengalaman Anda dengan berkomentar di bawah! 

Video Populer Elemen

Elemen Di Media Sosial

KTT Pembuat Halaman 2021 (@summit_camp) dimulai besok! Dapatkan tiket GRATIS Anda dan bicaralah dengan lebih dari 35 pakar industri termasuk @bpines1 . Senang bisa mensponsori acara besar ini. Sampai jumpa! 💻🎉https://t.co/gDtFpUJLBH

— Elemen (@elementor) 9 Mei 2021

Minggir dan sambut Showcase April 2021 kami. 🏆🌷 Bulan ini kami memuji 10 agensi desain dari seluruh dunia. Koleksi yang beragam ini mewakili bakat pembuatan web Elementor di seluruh dunia. 🌎 https://t.co/bwwOUDQCuu

— Elemen (@elementor) 19 Mei 2021