Cara Menggunakan Widget Elementor Loop Grid di WordPress dengan HappyAddons

Merancang situs web yang menarik secara visual dan berfungsi dengan baik adalah suatu keharusan bagi siapa pun untuk menciptakan keterlibatan, memikat pemirsa, dan mendorong penjualan. Untuk menyederhanakan proses ini, alat desain web seperti Elementor dan tambahannya terus memperkenalkan fitur dan modul inovatif.

Loop Grid adalah widget baru yang Elementor dan tambahannya telah dikembangkan dan dirilis untuk kami baru-baru ini. Widget inovatif memungkinkan Anda membuat dan menampilkan konten Anda dalam tata letak kotak yang terorganisir dengan indah.

Jangan khawatir jika Anda tidak tahu banyak tentang widget ini secara detail. Dalam postingan tutorial ini, kami akan membahas panduan langkah demi langkah tentang cara menggunakan widget Elementor Loop Grid di WordPress dengan HappyAddons. Semoga tutorial ini bermanfaat dan menarik bagi Anda.

Apa itu Loop Grid di Elementor?

Loop Grid adalah widget Elementor multifungsi yang memungkinkan Anda membuat tata letak dinamis untuk menampilkan berbagai jenis konten di situs web Anda dan menyesuaikannya kapan saja. Widget ini sangat berguna dalam menampilkan postingan blog, produk, dan konten portofolio dalam format grid.

Widget ini sangat berguna untuk menampilkan konten dinamis. Segera setelah postingan baru, produk, atau konten yang diinginkan dipublikasikan, semuanya secara otomatis ditampilkan melalui widget tanpa input manual. Anda dapat membuat template unik untuk menampilkan konten sesuai keinginan.

Di bagian selanjutnya, kami akan menjelaskan cara menggunakan widget di WordPress. Teruslah membaca!

Cara Menggunakan Widget Grid Elementor Loop

Anda harus menginstal plugin berikut untuk menggunakan widget ini di situs web Anda. Dapatkan mereka dengan mengklik tautan terlampir di bawah.

• elemen
• Selamat Addons
• SelamatAddons Pro

Setelah siap, mulailah mengikuti langkah-langkah tutorial seperti yang dijelaskan.

Langkah 01: Seret-dan-Lepaskan Widget Loop Grid ke Halaman Anda

Buka halaman tempat Anda ingin menambahkan widget. Kemudian, tentukan bagian untuk menambahkan widget.

Ketik Happy Loop Grid di kotak pencarian panel Elementor. Setelah widget muncul, seret dan lepas ke area kanvas yang Anda inginkan.

Langkah 02: Buat Templat Grid Lingkaran

Setelah menambahkan widget, Anda akan diminta untuk memilih template loop. Jika Anda sudah memiliki template yang sudah jadi, Anda bisa memilihnya. Jika tidak, Anda harus membuatnya dari awal.

Jadi, untuk membuat dari awal, klik tombol Buat Template .

Anda akan dibawa ke halaman baru. Klik tombol Tambah Baru saat tab Templat Lingkaran dipilih.

Beri nama templatnya . Misalnya, kami menamakannya 'Loop Template One'. Kemudian, tekan tombol Buat Templat .

Kanvas baru akan terbuka. Di sini sekali lagi, Anda dapat menarik dan melepas widget yang ingin Anda desain tata letak template Loop Grid Anda.

Lihat panduan ini tentang cara membuat popup di situs web Elementor.

Langkah 03: Rancang Tata Letak untuk Templat Loop Grid

Misalkan kita akan membuat loop grid ini untuk menampilkan postingan blog kita secara dinamis. Jadi, kita akan menggunakan widget postingan untuk membuat template.

# Posting Gambar Unggulan

Menampilkan gambar fitur postingan adalah suatu keharusan di bagian grid postingan. Untuk melakukannya, temukan widget dan letakkan di kanvas.

# Info Posting

Dengan menambahkan widget Info Postingan, Anda dapat menampilkan penulis postingan, tanggal publikasi, dan waktu diterbitkan. Lebih baik menambahkan widget di bawah gambar unggulan.

Jika Anda ingin menghapus elemen apa pun pada widget, cukup klik ikon tanda silang (x) di sebelahnya. Demikian pula untuk menambahkan elemen baru, klik tombol + Tambahkan Item .

Buka tab Gaya . Anda akan mendapatkan opsi di tab ini untuk mengubah warna, ketebalan, dan perataan teks dan ikon widget.

# Judul Posting

Tarik dan lepas widget Judul Postingan di bawah widget Informasi Postingan.

Di bawah tab Konten, Anda akan mendapatkan opsi untuk menyesuaikan tag HTML, ukuran, dan perataan. Lakukan perubahan yang diperlukan sesuai kebutuhan.

Buka tab Gaya . Anda dapat menyesuaikan gaya warna judul dan tipografi sesuai keinginan.

# Posting Kutipan

Dengan menambahkan widget Post Excerpt di template, Anda dapat menampilkan ringkasan atau kutipan dari masing-masing postingan di bagian Loop Grid. Temukan dan tambahkan widget Post Excerpt di bawah judul.

Dengan cara yang sama seperti yang ditunjukkan di atas, Anda dapat menyesuaikan warna teks dan tipografi dari tab Gaya .

Langkah 04: Optimalkan Tata Letak Templat untuk Perangkat Seluler

Anda harus mengoptimalkan tata letak template untuk semua jenis perangkat (tablet dan ponsel) selain desktop. Jika tidak, pengguna dari perangkat lain tidak akan mendapatkan pengalaman yang baik saat menjelajahi widget ini dari perangkat seluler dan tablet.

Jadi, untuk mengoptimalkan tata letak template, klik opsi Mode Responsif di footer panel Elementor. Bilah atas akan muncul di templat, termasuk opsi untuk beralih di antara mode perangkat yang berbeda (desktop, tablet, dan ponsel).

Sekarang, beralihlah ke mode perangkat yang berbeda dan lihat apakah tata letak template cocok untuk perangkat tertentu yang berbeda. Jika belum sempurna, ubah ukuran dan sesuaikan elemen template sesuai kebutuhan.

Semoga dengan melakukan ini, Anda dapat membuat template responsif untuk semua ukuran layar.

Berikut panduan tentang hal-hal yang perlu dipertimbangkan saat membuat situs responsif seluler.

# Publikasikan Templat

Setelah selesai, publikasikan template dengan mengklik tombol Publish pada panel Elementor.

Langkah 04: Masuk ke Kanvas Utama dan Pilih Template Loop

Datanglah ke kanvas Elementor utama. Pilih bagian Loop Grid . Di bawah bagian Tata Letak , Anda akan menemukan opsi untuk Pilih Templat Lingkaran .

Ketikkan nama yang Anda gunakan untuk menyimpan templat. Setelah diketik, template akan muncul secara real-time. Klik templat untuk menampilkannya di kanvas.

Setelah template Loop Grid dipilih, maka akan menampilkan postingan Anda yang dipublikasikan dalam format grid seperti gambar di bawah.

Grid mungkin terlihat aneh karena dilengkapi dengan pengaturan default. Anda sekarang dapat menyesuaikan tata letaknya lebih lanjut.

Langkah 05: Sesuaikan dan Stylisasi Bagian Loop Grid

Dari bagian Tata Letak, Anda memilih nomor kolom, posting per halaman, dan tinggi yang sama . Lakukan konfigurasi yang diperlukan sesuai kebutuhan.

Kami telah menyimpan tiga kolom dan tiga posting per halaman untuk tutorial ini.

# Konfigurasikan Kueri

Setelah itu, masuk ke bagian Query .

Anda dapat menampilkan konten dari berbagai sumber di widget Loop Grid. Secara default, postingan ditampilkan dalam format grid. Namun Anda dapat menampilkan halaman atau halaman arahan jika Anda mau.

Klik ikon tarik-turun di sebelah opsi Jenis Posting. Pilih tipe konten yang Anda inginkan.

Anda harus menyimpan setiap postingan dengan tag atau kategori. Jika Anda hanya ingin menampilkan konten dari penulis, tag, atau kategori tertentu, klik ikon + plus di bawah Sertakan Oleh.

Pilih Penulis atau Ketentuan . Anda juga dapat memilih keduanya.

Setelah opsi Sertakan menurut dipilih, ketikkan nama penulis dan istilah di bidang masing-masing. Seketika, konten akan disaring, dan hanya konten dari penulis dan istilah tertentu yang akan ditampilkan di loop grid.

Konfigurasikan opsi kueri lainnya sesuai keinginan Anda. Semoga Anda bisa melakukannya sendiri.

Langkah 06: Konfigurasikan Opsi Pagination untuk Bagian Loop Grid

Perluas bagian Pagination & Load More .

Klik ikon tarik-turun di sebelah Pagination . Pilih opsi yang Anda inginkan.

Kami telah memilih Numbers + Previous/Next . Anda dapat melihat pada gambar bahwa opsi penomoran halaman ini telah ditampilkan di bawah widget.

Langkah 07: Sesuaikan gaya Tata Letak Widget Loop Grid

Buka tab Gaya . Anda akan menemukan opsi untuk menyesuaikan dan menyesuaikan gaya Tata Letak, Kotak Item, dan Paginasi widget.

Pertama mari kita perluas bagian Tata Letaknya . Ini akan memungkinkan Anda untuk mengkonfigurasi Column Gap dan Row Gap . Lakukan ini seperlunya.

Demikian pula, perluas bagian Kotak Barang . Anda dapat menambahkan Padding , Background Type (warna atau gambar), Box Shadow, Border Type, dan Border Radius .

Untuk tutorial ini, kami telah menambahkan padding, radius, dan warna latar belakang. Lakukan hal yang sama pada diri Anda sendiri.

Dengan cara yang sama, Anda dapat menyesuaikan gaya pilihan warna, tipografi, padding, radius, spasi, dan penomoran halaman widget.

Catatan: Terlihat agak mencengangkan, bukan? Pada tahap desain ini, Anda mungkin menemukan bahwa templat loop grid perlu lebih disesuaikan gaya dan penyesuaiannya. Tapi bagaimana caranya? Itu ditunjukkan pada langkah berikutnya.

Langkah 08: Sesuaikan Ulang Templat Loop Grid

Pertama, Anda harus menemukan templatenya. Seperti yang telah Anda desain dengan HappyAddons, buka Dashboard WordPress Anda. Kemudian, navigasikan ke HappyAddons > Pembuat Tema > Templat Loop .

Temukan template dan buka dengan opsi Edit dengan Elementor .

Misalnya, kami telah mengubah tipografi teks Lanjutkan Membaca >> .

Setelah selesai, Perbarui perubahannya.

Langkah 09: Pratinjau Perubahannya

Pergi ke kanvas utama lagi. Pilih ikon tarik-turun . Kemudian, klik opsi Simpan Draf .

Setelah draf disimpan, muat ulang kanvas . Anda akan melihat perubahan pada halaman seperti yang Anda buat pada template.

Dengan demikian, Anda dapat menyesuaikan template Loop Grid kapan saja.

Langkah 10: Publikasikan Desain Loop Grid

Mudah-mudahan bagian Loop Grid Anda sudah siap dipublikasikan. Klik tombol Publikasikan di bagian bawah panel Elementor.

Catatan: Pastikan Anda telah mengoptimalkan widget dengan sempurna untuk respons seluler, seperti yang kami tunjukkan di atas dalam mengoptimalkan template Loop Grid. Prosesnya juga akan sama di sini.

Kasus Penggunaan Umum Widget Grid Elementor Loop

Sejauh ini, kami telah menjelaskan apa itu widget Loop Grid dan cara menggunakannya di situs Elementor Anda. Sekarang mari kita melihat sekilas beberapa kasus penting penggunaan widget yang dapat memberikan kesan yang sangat berharga.

1. Tata Letak Blog

Elementor Loop Grid membuat tata letak blog menjadi sederhana karena memungkinkan Anda merender postingan dalam grid yang dinamis dan menyenangkan. Anda dapat menyesuaikan tampilan konten (postingan atau halaman) termasuk judul posting, kutipan, gambar, metadata, dan lainnya untuk memastikan tampilan yang kohesif.

Pelajari cara mendesain template postingan blog dengan Elementor.

2. Kotak Produk

Loop Grid sangat berharga di situs eCommerce untuk menampilkan produk dalam grid yang rapi dan rapi. Ini memungkinkan Anda menampilkan gambar, harga, dan deskripsi produk sehingga pelanggan dapat menikmati pengalaman yang baik saat menjelajahi produk di situs Anda.

3. Etalase Portofolio

Widget Loop Grid memungkinkan Anda mengatur gambar, artikel, studi kasus, dan portofolio dalam tata letak yang menarik. Anda bahkan dapat mengubah kisi agar sesuai dengan merek Anda sehingga portofolio Anda dapat disorot oleh klien dan karyawan Anda.

Pelajari cara membuat situs portofolio.

4. Daftar Acara

Anda dapat mengatur acara Anda dalam bentuk grafis dengan Loop Grid. Ini memungkinkan Anda membuat daftar informasi acara secara visual seperti tanggal, tempat, dan deskripsi sehingga orang dapat dengan cepat mengetahui apa yang akan terjadi.

5. Daftar Layanan

Anda juga dapat menawarkan layanan Anda dalam format kotak dengan opsi gaya. Anda dapat menampilkan elemen kunci seperti judul layanan, deskripsi, dan foto sehingga pelanggan dapat dengan mudah melihat sekilas apa yang Anda tawarkan.

Menutup

Kami harap Anda sekarang mengetahui seluk beluk widget Elementor Loop Grid. Setelah Anda mengetahui cara menggunakan widget dengan baik, Anda dapat menciptakan kemungkinan desain tanpa batas untuk situs web Anda. Dengan fitur intuitif dan kemudahan penggunaan, Anda dapat meninggalkan dampak profesional di situs web Anda kepada pengunjung yang tertarik.

Kami telah mencoba sebaik mungkin untuk mencakup semua yang mungkin Anda cari di postingan ini. Jika Anda menemukan kami melewatkan sesuatu, beri tahu kami melalui kotak komentar di bawah. Anda juga dapat meninggalkan obrolan di kotak dukungan jika Anda ingin mempelajari lebih lanjut tentang produk kami.

Pada akhirnya, terima kasih atas waktu Anda dan telah bersama kami sampai akhir. Selamat menikmati, selamat membaca!