Tutorial Elementor

Tutorial Elementor: Membuat Halaman Depan (Tutorial #2)

Setelah saya buat tutorial header dan footer minggu lalu, masih banyak yang belum mengerti cara memaksimalkan Elementor. Yang sering saya lihat adalah masalah di bagian Home. Nah, kali ini saya buatkan tutorial membuat halaman depan website dengan Elementor.

Sebenarnya tidak sulit kok. Hanya perlu ketelitian karena banyak tombol yang harus di klik. Dan Anda perlu paham tombol mana yang harus di klik untuk menghasilkan layout yang diinginkan.

Daftar Isi:

  • Menentukan Page Layout
  • Slider dengan Elementor
  • Menggunakan Blok dari Elementor Library
  • Testimonial dan Ratings
  • Membuat Tabel Harga
  • Bereksperimen dengan Elementor

Nah, sekarang saatnya kita coba membuat halaman depan website. Yang saya gunakan adalah Elementor Pro + Essential Addons for Elementor Pro. Anda bisa membelinya di sini.

Kalau Anda berminat untuk beli dari developernya langsung dengan harga lebih mahal, silakan klik di sini.

Komposisi Website Profesional yang baik, umumnya terdiri dari tiga halaman utama, yaitu:

  • Halaman depan atau Home
  • Kontak
  • Tentang Kami (About Us)

Tentukan Page Layout Website dengan Elementor

Page Layout Halaman Depan Website di Elementor
Pilih Page Layout

Kalau Anda memakai Tema WordPress, maka pilih di Page Setting > Page Layout > Default untuk menampilkan tampilan Tema pilihan Anda.

Saya lebih suka menggunakan Elementor Full Width karena lebih fleksibel dan enak dilihat.

Tutorial Slider Website dengan Elementor

Klik pada panel navigasi Elementor di sisi kiri , ketik Slide, lalu Drag and Drop di blok kosong di sisi kanan.

Slider dengan Elementor
Slider dengan Elementor
  • Klik tanda Edit Section dan atur Content Width dari Boxed menjadi Full Width.
  • Sesuaikan Height menjadi 550px.
  • Silakan atur backgrond, featured image, atau text sesuai yang Anda perlukan.
  • Aktifkan Background Overlay jika dirasa perlu.

Hasilnya kurang lebih akan menjadi seperti ini

Slider Website dengan Elementor
Slider dengan Elementor

Menggunakan Blok dari Elementor Library

Sekarang saatnya menambah fitur. Anda bisa membuat fitur sendiri jika mau, tapi lebih mudah menggunakan blok yang sudah ada di library Elementor.

  • Klik pada tandaAdd Template dan klik Blocks.
  • Pada menu drop down di sisi kiri, pilih Features.
Memilih Blok dari Library
Menambah Fitur dari Elementor Library
  • Pilih sesuai keinginan Anda dan dapat mendeskripsikan produk Anda dengan baik, klik Insert.
Menggunakan Blok dari Elementor Library
Hasil Akhir Penambahan Blok dari Library

Testimonial dan Ratings

Social proof penting untuk produk Anda. Gunakan Widget Testimonial atau Review agar produk Anda lebih meyakinkan.

Masukkan Testimonial Carousel Elementor dan tampilkan review produk Anda. Tidak perlu berbohong mengenai review produk karena pelanggan dapat membedakan testimonial asli dan palsu.

Dalam beberapa kasus, testimonial yang buruk malah bisa menambah kepercayaan pelanggan pada produk Anda.

Contoh Halaman Depan Website dengan Elementor Carousel
Masukkan Testimonial Carousel Widget

Cara Membuat Tabel Harga dengan Elementor

Jika produk Anda bervariasi dan banyak, gunakan Woocommerce Plugins yang akan saya tulis tutorialnya dalam waktu dekat.

Sekarang saya akan menuliskan cara membuat tabel harga sederhana.

  • Cari widget Price Table dan masukkan ke halaman Anda.
  • Desain satu Price Table sesuai dengan keinginan Anda
Tutorial Elementor Widget Price Table untuk Halaman Depan
Widget Price Table
  • Buat desain price table menarik dan tampilkan fitur terbaik produk Anda. Saya sangat menyarankan untuk membuat Three Tier Pricing.
  • Jika Anda tidak ingin repot seperti saya, masukkan block template seperti memasukkan feature tadi.
  • Cukup ubah harga, jenis font, dan mungkin warna agar selaras dengen keseluruhan desain.
Harga Paket dengan Elementor
Three Tier Pricing Table

Eksperimen dengan Elementor

Website yang di desain menggunakan Elementor pada umumnya memiliki desain dan “feel” yang sama satu dengan lainnya.

Ini karena tidak banyak yang berusaha mendalami, sejauh apa Elementor dapat membuat website.

Elementor dapat membuat variasi website yang luar biasa dan saya sudah membuktikannya.

Saya sangat menyarankan jika Anda ingin memahami Elementor dan menggunakan semua fitur yang ada di dalamnya dengan baik hingga menghasilkan desain yang sangat bervariasi satu dengan lainnya, maka dedikasikan satu website untuk Anda belajar.

Tiru desain website yang memenangkan awards dengan Elementor dan munculkan kreativitas Anda.

Saya berusaha membuat tutorial website dengan Elementor setiap minggunya.

Tuliskan komentar di bawah tentang website mana yang ingin Anda tiru, dan lihat apakah kita bisa buat yang sama dengan Elementor.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *