Cara Membuat Halaman Arahan dengan Elementor dan PowerPack

WordPress telah memudahkan semua orang untuk membangun kehadiran online mereka, baik itu blog atau situs web bisnis atau ERP yang kompleks. Tema dan plugin WordPress membuatnya semakin mudah bagi pengguna untuk membangun situs web mereka tanpa harus khawatir tentang menyewa seorang ahli. Plugin Page Builder telah memainkan peran penting dalam mengubah cara situs web dibangun dengan WordPress. Elementor adalah salah satu plugin pembuat halaman yang populer.

Jika Anda seorang desainer web dan ingin menghidupkan desain Anda tanpa harus mengkhawatirkan kodenya, Anda dapat menggunakan Elementor. Tetapi bagaimana jika Anda seorang pengembang? Nah, jika Anda seorang pengembang, Anda dapat menggunakan Elementor juga karena fungsionalitasnya yang ramah pengembang dan mudah untuk memperluas API.

Dalam posting ini, Anda akan mempelajari lebih lanjut tentang Elementor dan bagaimana Anda dapat menggunakannya dengan add-on Elementor untuk membangun situs web, halaman arahan, popup, dengan cepat.

Apa itu Elementor?

Elementor adalah plugin Pembuat Halaman yang populer untuk WordPress. Elementor menyediakan blok konten siap pakai yang disebut Widget bersama dengan elemen struktural dasar seperti bagian dan kolom.

Anda dapat menarik dan melepas widget ini di halaman mana pun di situs WordPress Anda dan membuat tata letak khusus sesuai kebutuhan Anda.

Elementor Pro hadir dengan lebih dari 60 widget dan banyak template pra-desain yang dapat Anda gunakan untuk mendesain halaman apa pun.

Fitur Elementor

Elementor hadir dengan banyak fitur dan fungsionalitas yang dapat membuat pengembangan situs web Anda lebih nyaman dan lebih cepat. Mari kita lihat semua fitur mengesankan dari Elementor yang membuatnya berharga.

Cepat dan Mudah Digunakan

Elementor dioptimalkan untuk kinerja. Bahkan jika Anda adalah pengguna pemula, Anda akan merasa sangat mudah untuk menggunakan dan menavigasi dengan mudah di Elementor. Anda tidak akan pernah merasa Elementor menyeret Anda kembali dalam proses desain Anda dan hanya akan membuat segalanya menjadi cepat dan mudah bagi Anda.

Sementara Elementor sangat cepat, Anda bisa mendapatkan lebih banyak dari Elementor saat Anda menggunakan hosting Elementor Cloudways. CW adalah semua tentang kinerja dan memberikan kontrol super tentang bagaimana fungsi server Anda. Dalam hal keamanan, Cloudways menawarkan server yang sangat andal dan aman yang diatur oleh praktik keamanan proaktif mereka untuk menjaga server Anda tetap aman dan terlindungi. Jumlah fitur yang datang dengan Cloudways adalah sesuatu yang sulit ditemukan di industri saat ini.

Template Halaman yang Telah Dirancang Sebelumnya

Dengan Elementor, Anda mendapatkan banyak template pra-desain yang dapat Anda gunakan untuk membuat halaman web dengan satu klik. Ada template untuk hampir setiap kategori halaman web seperti halaman arahan, halaman tentang, dll. Dan dapat membuat proses desain situs web jauh lebih cepat.

Jika Anda tidak dapat menemukan template yang bagus di Elementor Library maka Anda dapat melihat template Elementor pihak ketiga. Dengan komunitas desainer dan pengembang yang berkembang pesat, membawa Elementor ke level berikutnya sangatlah mudah.

Sarat dengan Widget

Elementor versi Gratis dan Pro hadir dengan widget yang dimuat fitur. Dari widget konten sederhana seperti judul, editor teks, tombol hingga widget canggih seperti kisi posting, formulir login, WooCommerce, berbagi sosial, Anda mendapatkan banyak fungsi dengan Elementor.

Jika Anda ingin memiliki lebih banyak kekuatan dalam hal widget, Anda dapat mencoba add-on Elementor pihak ketiga. Kami merekomendasikan pergi dengan PowerPack untuk Elementor. Ini adalah addon terkemuka untuk Elementor dan dibuat oleh tim yang sama di belakang addon PowerPack Beaver Builder yang populer.

Elementor Pop up Builder

Pembuat popup adalah salah satu tambahan terbaru untuk pembangun Elementor. Fitur pembuat sembulan menghilangkan kebutuhan untuk menggunakan plugin pembuat sembulan pihak ketiga di situs web Anda. Anda dapat menggunakan Elementor untuk merancang munculan yang mengesankan dengan aturan dan fungsi penargetan lanjutan.

Anda dapat membuat formulir login, tikar layar penuh, pop-up diskon, dan apa yang tidak dengan fitur pembuat popup.

Pengaturan global

Saat Anda membuat situs web, penting untuk memiliki pengaturan warna yang konsisten, tipografi, dll. Anda dapat menyesuaikan warna, font, dan bahkan pemilih warna di muka untuk memudahkan proses desain Anda dengan pengaturan Global di Elementor.

Bangun Bagian Tema seperti Header, Footer, Arsip, dll.

Dengan Elementor, desain Anda tidak terbatas hanya pada area konten halaman . Anda dapat membuat custom header, footer, sidebar dan hampir setiap bagian dari website tanpa harus khawatir menulis kode. Semua ini dapat dengan mudah dibuat menggunakan fungsionalitas Pembuat Tema di Elementor Pro.

Konten Dinamis

Dengan fungsionalitas Konten Dinamis di Elementor Pro, Anda dapat menampilkan Data/Konten Dinamis dari bidang kustom WordPress, ACF, Toolset, Pods, MetaBox, atau plugin bidang kustom lainnya. Anda dapat menggunakan data dari bidang khusus dan menampilkannya dengan widget Elementor di bagian mana pun dari situs Anda. Anda dapat mempelajari lebih lanjut tentang konten dinamis di sini.

Versi Lite dan Pro

Meskipun Elementor memiliki banyak hal untuk ditawarkan, pengguna tidak perlu membayar banyak untuk mendapatkan akses ke sana. Sebenarnya, Elementor memiliki dua versi, Lite dan Pro. Anda bisa mendapatkan akses ke banyak fitur Elementor dalam versi lite itu sendiri. Kedua versi memiliki fitur mereka sendiri untuk ditawarkan. Berikut adalah perbandingan detail Elementor Lite dan Pro yang dapat membantu Anda dalam mengambil keputusan.

PowerPack untuk Elementor

Elementor pasti adalah keseluruhan paket. Satu-satunya alat yang Anda butuhkan untuk mulai mendesain halaman web dengan sudut belajar minimal.

Mungkin ada saat-saat ketika Anda merasa sedikit dibatasi saat menggunakan Elementor. Untuk ini, add-on pihak ketiga yang dikodekan dengan baik seperti add-on PowerPack Elementor datang untuk menyelamatkan. Add-on ini adalah salah satu yang terbaik di kategorinya dan menawarkan widget yang sangat baik dan mengesankan dengan banyak opsi penyesuaian untuk pengguna.

Saat ini, ada lebih dari 50 widget di PowerPack versi Pro, dan tim terus menambahkan widget baru yang menjadikannya pilihan tepat di antara add-on Elementor.

PowerPack dibangun oleh tim pengembang dan desainer WordPress ahli dengan mempertimbangkan kinerja. Plugin ini dikodekan dengan baik dan diperbarui secara berkala untuk kompatibilitas dengan versi terbaru Elementor dan WordPress

Mari kita lihat bagaimana Anda dapat menggunakan add-on Elementor dan PowerPack bersama-sama untuk membuat halaman web yang fantastis.

Membuat Halaman Arahan

Dalam tutorial ini, Anda akan belajar bagaimana Anda dapat membuat halaman arahan cepat dengan addon Elementor dan PowerPack Elementor. Sangat mudah untuk Memulai dengan Elementor , semua berkat antarmuka yang ramah pengguna.

Pastikan Anda telah menginstal Elementor dan PowerPack di situs Anda. Anda bisa mendapatkan versi gratis dari tautan di bawah ini:

1. Elemen
2. PowerPack Lite untuk Elementor

Membuat halaman dengan Elementor

Masuk ke Dasbor Admin WordPress Anda dan klik opsi Tambah Baru di bawah Halaman . Sekarang beri judul/nama halaman Anda dan klik tombol Edit dengan Elementor .

Dalam tutorial ini, kami membuat halaman arahan untuk Pizzeria, jadi kami akan menamai Halaman kami sesuai dengan itu. Inilah yang akan menjadi hasil akhir kita:

Mari kita mulai dengan bagian pertama . Sebelum kita melakukan ini, ubah tata letak ke Elementor Canvas dengan mengklik ikon pengaturan kecil di sudut kiri bawah di editor.

Langkah 1: Bagian Pahlawan

Bagian pahlawan terdiri dari gambar latar belakang, dua widget judul, dan tombol CTA.

Pertama, klik ikon plus dan tambahkan struktur kolom tunggal dari opsi. Sekarang buka pengaturan bagian dan aktifkan opsi bagian peregangan dan atur bantalan bawah dan atas ke 250 dari tab lanjutan.

Sekarang, Anda dapat memilih gambar yang diinginkan untuk latar belakang dari tab gaya> jenis latar belakang> Klasik dan memilih gambar dari tampilan media.

Kami memiliki latar belakang siap. Sekarang mari tambahkan judul dan tombol ke bagian pahlawan kita.

Seret dan lepas widget Judul Ganda pada halaman dan ubah teksnya masing-masing. Sekarang, pastikan Anda membagi heading pertama dan kedua sesuai untuk lebih menekankan pada harga seperti yang telah kita lakukan pada gambar di bawah ini. Ubah tipografi untuk kedua bagian judul.

Ada banyak perubahan lain yang dapat Anda lakukan untuk membuat judul pahlawan Anda seperti yang Anda inginkan.

Setelah Anda membuat perubahan, seret dan lepas widget Heading lain di bawah heading ganda dan ubah pengaturan teks dan tipografi agar sama seperti yang diperlukan, di sini saya telah mengubah ukuran teks menjadi 90 , font menjadi Elsie , dan bobot font menjadi 600 .

Sekarang kita akan menambahkan tombol CTA .

Seret dan lepas widget Tombol Elemen pada bagian tepat di bawah widget Judul. Sekarang kita akan mulai mengubah pengaturan tombol.

Berikut adalah perubahan yang saya buat pada tombol:

• Mengubah teks menjadi Pesan Sekarang!
• Tombol rata tengah.
• Menambahkan tautan CTA
• Mengubah Tipografi menjadi Elise; 24;600 untuk font, ukuran, dan berat masing-masing.
• Mengubah warna Background menjadi merah( #ff0000 ) dan warna font menjadi putih( #ff0000 ).
• Menambahkan padding 18, 40, 18, 40 untuk masing-masing atas, kanan, bawah, kiri.

Setelah melakukan perubahan, inilah tampilan bagian hero.

Langkah 2: Bagian Tentang

Sekarang kita akan mengerjakan bagian Tentang, Lanjutkan dan tambahkan struktur dua kolom ke halaman dengan mengklik ikon “+”.

Sekarang kami menargetkan untuk membuat tata letak yang mirip dengan ini, jadi kami akan menambahkan widget heading, widget editor teks, dan widget Testimonial ke kolom kiri. Di kolom kanan, kita akan menambahkan widget Heading, widget Text, dan widget Button.

Cukup mulai seret dan lepas widget di bagian tersebut dan ubah agar terlihat seperti yang ada pada gambar yang disediakan di atas. Tambahkan judul dan ubah tipografi untuk hal yang sama.

Berikut adalah tampilannya:

Sekarang tambahkan editor teks di bawah judul di kolom kiri dan ubah tipografi menjadi seperti yang ditampilkan di bawah ini.

Sekarang kita akan menambahkan widget Testimonial Carousel di bawah widget editor teks. Tambahkan “Item” atau Testimonial untuk ditampilkan di situs web Anda. Anda juga dapat menggunakan widget Testimonial oleh PowerPack yang menawarkan lebih banyak daya penyesuaian.

Setelah Anda selesai membuat perubahan, kolom kiri tentang bagian Anda akan terlihat seperti ini.

Sekarang untuk kolom kanan , tambahkan latar belakang untuk menambahkan sedikit kontras pada bagian tersebut.

Sekarang buat duplikat dari heading yang kita buat di kolom kiri dan drag and drop di kolom kanan. Lakukan hal yang sama untuk Editor Teks karena ini akan menyelamatkan Anda dari redundansi yang tidak perlu dan juga menghemat waktu. Sekarang untuk tombol, cukup duplikat tombol dari bagian Pahlawan dan seret dan pindahkan ke kolom kanan bagian Tentang.

Sejajarkan kolom kanan secara vertikal ke Tengah dari kolom edit> tata letak> perataan vertikal dan Anda telah menyiapkan bagian Tentang Anda!

Ini adalah hasil akhir dari bagian Tentang:

Langkah 3: Bagian CTA “Tahu Lebih Banyak”

Kami akan menambahkan bagian lain berbicara tentang Pizzeria. Bagian ini akan mirip dengan yang kita buat sebelumnya, tetapi strukturnya akan sedikit berbeda.

Jadi, kami ingin hasil akhir kami terlihat seperti ini:

Apakah Anda melihat sesuatu yang serupa di sini?

Ya! Judul, editor teks mirip dengan yang telah kita buat sebelumnya. Jadi, alih-alih mendesain ulang semua widget, kami hanya akan menduplikasinya dan menyeretnya ke tempatnya.

Ayo lakukan!

Pertama, tambahkan struktur dua kolom baru dan buka pengaturan bagian dan tambahkan gambar latar belakang dari jendela media dan tambahkan padding atas 100 untuk membuat panel terlihat lebih luas. Juga, aktifkan opsi bagian Stretch dari pengaturan.

Sekarang pergi ke bagian sebelumnya dan duplikat heading, editor teks, dan widget tombol . Anda cukup melakukan ini dengan mengklik kanan pada widget dan memilih opsi duplikat . Setelah diduplikasi, seret dan lepas widget duplikat ke posisi barunya.

Seperti inilah tampilan bagiannya:

Sekarang untuk kolom kanan, seret dan lepas widget gambar dan pilih gambar dari galeri media. Sesuaikan gambar dalam hal Ukuran gambar dll. dan setelah Anda selesai, seperti inilah tampilan bagiannya.

Langkah 4: Bagian Kontak/Pesan

Ini adalah bagian CTA yang akan membantu pengguna untuk melakukan pemesanan. Sekarang, apa yang harus disertakan dalam semua bagian ini? Mari kita lihat apa yang kita targetkan untuk dibuat di sini.

Kita perlu membuat dua widget heading dan editor teks, formulir kontak dan widget menu daftar harga oleh PowerPack.

Pertama-tama, kita tahu bahwa kita harus menjaga desain dan tampilan heading dan editor teks tetap sama. Anda dapat melanjutkan dan menduplikasinya dari bagian sebelumnya dan menempatkannya di sini. Sekarang ubah teks di sana dengan yang Anda inginkan.

Anda dapat menggunakan widget Formulir di Elementor Pro untuk membuat formulir kontak dengan proses drag and drop sederhana. Setelah Anda melakukannya, formulir kontak akan muncul di halaman. Sekarang Anda dapat membuat penyesuaian lebih lanjut pada formulir. Berikut adalah perubahan yang saya buat:

• Menambahkan bidang formulir dan mengubah ukuran bidang.
• Mengubah teks, ukuran, dan perataan tombol.
• Menambahkan email sebagai tindakan tombol kirim dan menambahkan detail email.
• Menyesuaikan celah kolom dan membuat ulang tipografi dan warna teks dan bidang
• Perubahan lain yang diperlukan untuk membuat formulir kontak terlihat lebih menarik .

Jika Anda menggunakan plugin formulir kontak seperti Gravity Forms, WPForms, Ninja Forms, dll, maka Anda dapat menggunakan widget styler formulir PowerPack untuk menata formulir dengan Elementor.

Sekarang, di kolom kanan, kita akan menambahkan daftar Harga untuk produk. Untuk ini, kita akan menggunakan widget Menu Harga oleh PowerPack. Cukup seret dan lepas, tambahkan detail dan ubah desain dan tata letak untuk hal yang sama. Inilah yang akan terlihat seperti seluruh bagian:

Ikuti Giveawaynya Sekarang!

Hadiah PowerPack Diselenggarakan oleh Cloudways

Menggulungnya!

Setelah membuat semua perubahan, seperti inilah tampilan keseluruhan tata letak kita.

Sekarang Anda dapat membuat tata letak yang menarik untuk diri sendiri juga dengan Elementor dan PowerPack untuk Elementor. Sementara Elementor menawarkan banyak fitur, PowerPack memperluasnya lebih jauh dengan widget yang kreatif dan berorientasi fungsionalitas. Dengan 50+ widget yang sangat berguna di perangkat Anda, Anda dapat membangun situs web lebih cepat.

Elementor dan PowerPack dapat menghemat waktu, tenaga, dan membantu Anda meningkatkan bisnis desain web Anda. Tidak hanya itu, kedua produk tersebut didukung oleh tim ahli WordPress yang luar biasa sehingga Anda mendapatkan ketenangan pikiran.