Merancang situs web yang terlihat profesional bukan untuk semua orang, terutama karena kami semua merasa seperti kami benar-benar perlu menjadi ahli coding dan desain web. Saat ini, kami melihat alat baru muncul untuk ekosistem WordPress, untuk memberikan solusi yang lebih mudah untuk mendesain situs web dan ini dalam jangkauan sebagian besar pemula.
Mengenai desain tata letak WordPress, kami sudah harus mengirimkan plugin Visual Composer, yang jelas merupakan salah satu alat terbaik dalam hal desain tata letak. Namun perlu dicatat bahwa solusi ini tidak cocok untuk semua orang. Inilah alasan mengapa dalam tutorial ini, kami akan memperkenalkan Anda lebih banyak tentang WordPress Plugin Elementor, yang merupakan WordPress Plugin freemium (gratis, tetapi dapat diperpanjang dengan berlangganan).
Di mana mendapatkan Elementor untuk WordPress
Kami serius mempertimbangkan untuk membuat Anda melihat potensi plugin, dan solusi gratis akan membantu Anda memulai tanpa membayar sepeser pun. Solusi gratis ini tersedia di WordPress.org. Menjadi WordPress Plugin, yang terakhir diinstal seperti yang lainnya plugin dari dasbor.
Jika plugin berhasil memuaskan Anda sepenuhnya, Anda akan dapat memperoleh lisensi lengkap dengan semua fungsi di situs elementor resmi.
Fitur utama Elementor
Sebelum memulai tutorial dengan ikhtisar plugin, pertama-tama kami akan memperkenalkan fitur utama plugin (versi gratis dan versi lengkap).
versi gratis | Versi Lengkap |
---|---|
Banyak Kolom | Menu navigasi, artikel |
Modul Teks, Judul | Modul WooCommerce (produk, kategori) |
Modul Video, Gambar, Korsel, Galeri, Soundcloud | Integrasi Facebook (halaman, tombol, komentar) |
Modul berbagi | tabel harga |
Modul HTML | Portofolio, Formulir |
Modul untuk widget WordPress | Modul Penelitian |
Perhatikan bahwa ini adalah daftar lengkap dari berbagai fitur yang ditawarkan oleh plugin. Anda akan menemukan detail lebih lanjut di menjelajahi situs web mereka.
Mulai dengan Elementor
Kami tidak akan membahas seluruh proses instalasi di sini. Karena ini adalah plugin WordPress, prosedur penginstalan telah dijelaskan di tutorial sebelumnya. Namun, setelah penginstalan, Anda akan dibawa ke halaman utama plugin.
Jika Anda memiliki halaman ini di layar Anda, maka Anda telah menginstal dengan benar Plugin Elementor. Saat ini kami menggunakan versi lengkap untuk tutorial ini, tetapi antarmuka tidak boleh terlalu berbeda dari versi gratis.
Sebelum pergi ke antarmuka pengeditan, saya akan mengundang Anda untuk mendaftarkan lisensi Anda. Ini hanya berlaku untuk mereka yang memilih versi lengkap. Jika Anda memiliki versi gratis, Anda dapat pergi ke bagian selanjutnya. Untuk mendaftarkan lisensi Anda, Anda akan melihat pemberitahuan di WordPress yang akan meminta Anda untuk mendaftarkan lisensi Anda.
Jadi klik saja untuk pergi ke halaman registrasi dan klik Mengaktifkan.
Anda biasanya perlu halaman konfirmasi Anda jika lisensi Anda valid.
Jika Anda tidak membuka halaman ini, saya mengundang Anda untuk menghubungi pengembang plugin untuk informasi lebih lanjut bantuan untuk masalah tersebut.
Bagaimana cara menggunakan Elementor
Elementor berfungsi pada Halaman dan Posting di WordPress. Baik Anda menggunakan antarmuka klasik atau antarmuka Gutenberg baru, Anda akan melihat tombol yang akan meminta Anda untuk menggunakan pembuat Elementor.
Dalam praktiknya, Anda tidak selalu perlu mengedit postingan Anda menggunakan Elementor. Karena itu saya mengundang Anda untuk menggunakan plugin hanya di halaman. Dengan mengklik tombol tersebut, Anda akan mengakses antarmuka desain Elementor yang memberikan suasana déjà vu (bagi mereka yang menggunakan Penyesuai WordPress).
Jadi di sebelah kiri Anda memiliki berbagai kontrol yang ditawarkan oleh plugin dan di sebelah kanan, Anda memiliki pratinjau langsung dari perubahan Anda. Dalam tutorial ini, kami menggunakan tema Twenty Sixteen WordPress.
Bagian elemen
Bagian di Elementor adalah grup blok fungsionalitas yang ditawarkan Elementor. Jumlah bagian tergantung pada apakah Anda menggunakan versi lengkap dan apakah Anda menggunakan WooCommerce, Yoast SEO atau plugin lain yang kompatibel. Bergantung pada kondisi ini, Anda akan memiliki lebih banyak atau lebih sedikit bagian di antarmuka Anda. Karena kami menggunakan versi lengkap dengan plugin WooCommerce diaktifkan, seperti inilah tampilan antarmuka kami.
Cara menempatkan blok Elementor
Setelah Anda memperluas bagian, Anda akan menemukan Blok Elementor. Berbagai blok Elementor ditempatkan dengan "Drag & Drop" di area yang disorot dengan garis putus-putus.
Bagaimana memilih tata letak di Elementor
Sebelum menambahkan blok pada Elementor, Anda harus ingat untuk memilih tata letak dengan mengklik tombol "+" pada bagian yang disorot.
Tergantung pada kebutuhan Anda, Anda akan memilih tata letak yang paling sesuai. Setelah Anda memilih tata letak, Anda memiliki representasi dari bagian itu di area yang sama yang disorot. Bagian ini akan menampilkan jumlah kolom yang sama sesuai dengan pilihan Anda. Dalam kasus saya, saya memilih kolom dengan 3 kolom.
Blok yang berbeda dengan tanda "+" di dalamnya, adalah area yang dapat menerima blok Elementor. Jika Anda menambahkan blok Elementor tanpa memilih tata letak terlebih dahulu, tata letak kolom tunggal akan dipilih secara default.
Bagian elemen dapat diatur ulang di antara mereka sendiri, mengikuti prinsip "seret & lepas" yang sama. Anda juga dapat menghapus bagian, jika Anda tidak ingin lagi menggunakannya.
Berikut adalah contoh bagian yang berisi 2 blok yaitu blok judul dan blok teks.
Cara menggunakan alat desain lainnya
Setelah Anda menyelesaikan desain Anda, salah satu hal yang ingin Anda lakukan adalah menyimpan pekerjaan Anda. Anda akan menemukan opsi ini di bagian paling bawah dari bagian yang menampilkan berbagai bagian Elementor.
Anda dapat memilih untuk menyimpan secara langsung (Publikasikan), dan simpan sebagai draf atau sebagai template. Kami akan membahas poin-poin berbeda ini lebih lanjut nanti.
Selama desain Anda, Anda mungkin juga ingin melihat perubahan tanpa antarmuka tambahan Elementor. Yang harus Anda lakukan adalah mengklik ikon mata.
Itu terjadi bahwa selama desain, kesalahan terjadi (tindakan tidak disengaja). Dalam hal ini, Elementor menawarkan riwayat, yang memungkinkan Anda menavigasi semua tindakan Anda.
Ini akan memungkinkan Anda untuk dengan mudah kembali.
Opsi "Peramban", yang ada tepat sebelum tombol riwayat, memungkinkan Anda untuk memodifikasi lebih jauh bagian yang berbeda sehubungan dengan peramban yang digunakan oleh pengunjung. Opsi ini memberi Anda akses ke modifikasi lanjutan dari struktur bagian (lebar kolom). Anda harus membuat perubahan di sini dengan sangat hati-hati.
Tombol "Pengaturan" memungkinkan Anda untuk mengubah opsi tertentu khusus untuk halaman seperti judul, gambar unggulan atau status antara lain.
Itu saja untuk tutorial ini, kita akan menjelajahi Elementor lebih lanjut di tutorial berikutnya. Jangan ragu untuk melihat situs resmi yang menawarkan contoh yang jauh lebih sukses.