Cara membangun kisi portofolio dengan pembangun loop Divi 5

Kisi portofolio adalah cara sederhana, efektif untuk memamerkan karya Anda. Dengan pembangun loop Divi 5, Anda dapat merancang tata letak kartu yang dapat digunakan kembali dan diamkan secara otomatis dari konten Anda secara langsung di pembangun visual.

Tidak seperti modul tujuan tunggal, Loop Builder memungkinkan Anda menggunakan elemen divi apa pun, menetapkan kueri untuk posting atau jenis posting khusus, dan mengeluarkan kisi responsif yang mewarisi gaya global Anda. Dalam tutorial ini, kami akan membangun grid portofolio langkah demi langkah menggunakan tipe posting khusus proyek.

Memahami Pembuat Loop Divi 5

Pembangun Loop Divi 5 adalah fitur baru yang memungkinkan Anda membuat tata letak konten yang dinamis dan dinamis. Berbeda dengan modul blog atau portofolio, Loop Builder memungkinkan Anda untuk dengan mudah mengolesi setiap elemen divi untuk menampilkan posting, istilah, atau pengguna. Ini berarti Anda dapat membangun satu templat yang secara otomatis mengisi dengan konten dari situs WordPress Anda.

Loop Builder mendukung berbagai jenis konten, termasuk jenis posting khusus (CPTS), produk WooCommerce, dan bidang khusus canggih (ACF), memungkinkan Anda untuk menampilkan portofolio Anda persis seperti yang Anda inginkan.

Manfaat utama pembangun loop

Berkat opsi kustomisasi yang kuat, Loop Builder sangat cocok untuk membuat kisi portofolio. Inilah fitur yang menonjol:

• Fleksibilitas untuk merancang templat loop khusus: Dengan pembangun loop, Anda tidak terbatas pada tata letak yang telah ditentukan. Anda dapat menggunakan modul divi apa pun untuk merancang templat unik untuk setiap item portofolio.
• Pertanyaan yang dapat disesuaikan: Loop Builder memungkinkan Anda menyempurnakan konten mana yang muncul di kisi Anda. Saring berdasarkan kategori, jenis pos, atau bidang khusus untuk menampilkan hanya item yang diinginkan dalam pesanan pilihan Anda.
• Integrasi Konten Dinamis: Tarik dengan mulus dalam data konten dinamis seperti judul proyek, gambar unggulan, deskripsi, atau metadata khusus untuk membuat setiap item portofolio menarik.

Fitur -fitur ini menjadikan pembangun loop Divi 5 alat yang ideal untuk membuat portofolio profesional yang dipoles yang sepenuhnya dapat disesuaikan dan mudah dinavigasi.

Membangun portofolio dengan pembangun loop

Kami akan menggunakan proyek kustom Proyek bawaan Divi (CPT) untuk membuat portofolio dengan pembangun loop. Proyek CPT dirancang untuk menampilkan konten gaya portofolio, menjadikannya pilihan yang ideal untuk tata letak kami. Sementara Divi memang menawarkan modul portofolio, kami akan menggunakan Loop Builder karena memberi kami opsi yang tidak terbatas untuk membuat portofolio yang unik.

Mulailah dengan menambahkan baris baru ke halaman Anda. Untuk ini, kami akan menggunakan tata letak 3-kolom .

Kami akan menambahkan modul heading ke kolom pertama .

Masukkan judul atau gunakan Divi AI untuk menghasilkan satu untuk Anda.

Arahkan ke tab Desain , pilih Inter untuk font heading , lampu untuk bobot font heading , atur ukuran teks heading ke 2em , dan tetapkan tinggi garis heading 1.3em .

Sekarang, mari kita bangun loop kita. Arahkan ke kolom ke -2 baris kami.

Temukan tab Loop , kembangkan, dan aktifkan sakelar elemen loop .

Selanjutnya, pilih tipe kueri . Untuk tutorial ini, kami akan menggunakan CPT divi, proyek. Di bawah jenis pos , pilih proyek . Kami ingin memamerkan semua proyek, jadi kami akan meninggalkan segalanya.

Anda dapat memilih pengaturan dengan pengaturan, posting per halaman , dan post offset . Karena kolom pertama kami berisi modul heading , kami akan mengatur posting per halaman ke 8 . Dengan begitu, output akan bahkan melintasi baris tiga kolom kami .

Anda akan melihat bahwa loop kami mencoba menumpuk semua kolom. Untuk memperbaikinya, kita harus pergi ke pengaturan baris. Arahkan ke baris 3-kolom , klik tab Desain , dan cari pengaturan tata letak .

Perluas tab Pengaturan Tata Letak . Temukan pengaturan pembungkus tata letak dan pilih Wrap . Ini akan membungkus loop kami kembali ke 3 kolom.

Menata kolom loop

Sekarang pengaturan loop sudah ada, saatnya untuk menata kolom kami. Pengaturan gaya yang kami pilih di sini akan memengaruhi kolom yang tersisa di loop. Di baris 3-kolom , klik ke kolom ke-2 dan klik tab Desain . Arahkan ke dropdown perbatasan dan tetapkan radius perbatasan 15px ke kolom. Di bawah gaya perbatasan , tambahkan lebar perbatasan 1px dan gunakan #000000 sebagai warna perbatasan .

Tambahkan Konten ke Loop

Kami dapat mulai menambahkan konten ke loop dengan gaya kolom yang ditetapkan. Klik untuk menambahkan modul gambar ke kolom ke -2 . Setelah ditambahkan, setiap kolom di dalam loop akan menampilkan placeholder gambar.

Kami akan menggunakan kekuatan konten dinamis Divi 5 untuk menarik gambar unggulan proyek kami. Arahkan ke atas gambar untuk mengungkapkan ikon. Klik ikon konten dinamis untuk melanjutkan.

Pilih gambar unggulan loop saat opsi muncul.

Loop kami akan menempatkan gambar unggulan dari setiap proyek langsung ke loop portofolio kami.

Selanjutnya, tambahkan modul heading ke kolom ke -2 di bawah gambar unggulan . Ini akan digunakan untuk judul proyek . Ulangi langkah -langkah di atas untuk menambahkan judul . Namun, pilih judul Loop Post kali ini.

Di tab Desain , pilih H3 untuk level heading , Inter untuk font heading , pusat untuk perataan teks heading , dan 20px untuk ukuran teks heading.

Akhirnya, kami akan menambahkan tombol yang menautkan ke setiap proyek . Tambahkan modul tombol ke kolom ke -2 di bawah judul posting . Klik ikon konten dinamis di URL tautan tombol dan pilih Loop Link .

Beralih ke tab Desain dan atur perataan ke tengah .

Perluas pengaturan dropdown tombol dan aktifkan Gunakan gaya khusus untuk tombol . Masukkan pengaturan desain berikut:

• Latar Belakang Tombol: #000000
• Tombol Radius Border: 15px
• Tombol Batas Lebar: 0px
• Button Font: Inter
• Tombol Teks Warna: #FFFFFFF
• Ukuran teks tombol: 16px
• Margin: 15px Bawah
• Padding: 15px atas & bawah, 35px kiri & kanan

Itu saja! Seperti yang Anda lihat, membuat loop dengan Divi 5 adalah proses langsung.

Mengubah gaya dengan pembangun loop

Mengedit Gaya Loop Anda sama sederhana seperti membuat loop itu sendiri. Katakanlah Anda ingin bertukar dari cahaya ke tema gelap untuk loop Anda. Membuat perubahan desain hanya membutuhkan beberapa detik. Anda dapat mengubah warna latar belakang bagian dan kemudian membuat perubahan pada elemen loop individual dengan beberapa klik.

Tidak perlu mengedit item loop secara individual. Karena mereka semua terhubung, Anda hanya perlu mengedit modul sekali, dan Divi 5 akan menerapkan gaya yang diperbarui secara otomatis di setiap modul di loop.

Anda dapat menambahkan lebih banyak modul ke loop, seperti kutipan proyek , tanggal penerbitan, jumlah komentar , bio penulis , bidang khusus , dan banyak lagi.

Jika Anda ingin mengencangkan ruang di sekitar item di dalam loop Anda, Anda dapat menyesuaikan celah vertikal di pengaturan baris dan kolom . Ini mengontrol jumlah ruang antara setiap baris dan modul individual menggunakan sistem tata letak Flexbox Divi 5, memungkinkan Anda untuk menyempurnakan bagaimana loop Anda terlihat.

Menguji dan menyempurnakan loop portofolio

Setelah Anda membangun portofolio, saatnya mengujinya untuk memastikan semuanya berfungsi sebagaimana dimaksud. Mulailah dengan mempratinjau kisi di ujung depan menggunakan tautan pratinjau di bilah atas pembangun visual.

Verifikasi bahwa judul masing -masing proyek, fitur gambar , kutipan , dan tautan loop menarik dengan benar dari proyek CPT. Pastikan tidak ada placeholder adalah elemen rusak yang muncul.

Kembali ke pembangun visual, periksa untuk memastikan tata letak beradaptasi dengan benar menggunakan breakpoint responsif Divi 5 yang dapat disesuaikan. Secara default, Divi 5 menawarkan 3 breakpoint - satu untuk desktop , tablet , dan telepon - tetapi Anda dapat mengaktifkan hingga 7 dengan mengklik menu Ellipsis di tengah bilah atas pembangun visual.

Arahkan melalui setiap breakpoint , periksa tata letak, dan buat penyesuaian seperlunya.

Untuk membuat tata letak lebih ramah seluler, Anda dapat menggunakan pengaturan struktur kolom perubahan Divi 5 untuk mengubah jumlah kolom yang ditampilkan pada perangkat yang lebih kecil.

Praktik dan Tip Terbaik

Untuk memastikan Anda mendapatkan hasil maksimal dari Divi 5 dan Loop Builder, berikut adalah beberapa praktik terbaik untuk diikuti saat membangun portofolio Anda.

1. Pastikan konsistensi desain dengan variabel desain

Fitur Variabel Desain Divi 5 memungkinkan Anda untuk mendefinisikan tipografi, warna, dan jarak yang konsisten di halaman portofolio Anda. Di Visual Builder, atur variabel global untuk font, warna, dan padding/margin untuk memastikan setiap item portofolio terlihat seragam. Untuk membuat variabel , klik ikon Variable Manager di menu sisi kiri di Visual Builder.

Dari sana, Anda dapat menetapkan font global , warna , dan banyak lagi, memastikan desain Anda konsisten di seluruh situs web Anda, bukan hanya halaman portofolio Anda.

2. Pertimbangkan aksesibilitas

Aksesibilitas memastikan semua pengguna, termasuk mereka yang cacat, dapat menavigasi dan menikmati pekerjaan Anda. Pastikan untuk menambahkan teks alternatif untuk gambar saat Anda mengunggahnya ke galeri media. Ini membantu pembaca layar menyampaikan konten kepada pengguna tunanetra.

Ini juga baik untuk memilih warna dengan rasio kontras yang cukup untuk memastikan keterbacaan bagi pengguna dengan gangguan penglihatan.

3. Simpan dan gunakan kembali template

Setelah menyempurnakan template Loop Builder Anda, simpan ke Perpustakaan Divi dengan mengklik kanan pada bagian portofolio dan memilih Simpan ke Perpustakaan . Berikan nama deskriptif untuk referensi yang mudah. Ini memungkinkan Anda untuk menggunakan kembali templat di halaman lain tanpa membangun kembali dari awal.

Untuk menggunakan templat di situs web lain, Anda dapat menyimpannya ke Divi Cloud dan mengimpornya ke proyek web lain dengan satu klik.

Menyimpan Template merampingkan alur kerja Anda dan memastikan Anda dapat dengan cepat menggunakan kisi portofolio profesional untuk proyek -proyek mendatang.

Unduh file

Unduh secara gratis

Bergabunglah dengan The Divi Newsletter dan kami akan mengirimi Anda email salinan paket tata letak halaman pendaratan Ultimate Divi, ditambah banyak sumber daya divi yang luar biasa dan gratis, tips, dan trik. Ikuti bersama dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

Unduh

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan mendapatkan akses ke paket tata letak divi mingguan gratis!

Cobalah pembangun loop di Divi 5 hari ini

Pembuat loop Divi 5 memudahkan untuk membuat kisi portofolio dinamis, memungkinkan Anda untuk memamerkan karya Anda dengan gaya dan efisiensi. Dengan memanfaatkan proyek bawaan CPT dan fitur-fitur yang kuat dari Loop Builder, Anda dapat membuat kisi-kisi yang fleksibel dan sepenuhnya dapat disesuaikan yang secara dinamis menarik konten proyek Anda. Fleksibilitasnya memungkinkan Anda untuk merancang tata letak yang unik menggunakan modul divi apa pun, mengatur kueri untuk menampilkan proyek tertentu, dan membuat kisi -kisi responsif yang bersinar di perangkat apa pun.

Apakah Anda siap menghidupkan portofolio Anda? Selami rilis alpha publik terbaru Divi 5 dan bereksperimen dengan tata letak portofolio Anda. Apakah Anda seorang freelancer menampilkan proyek atau bisnis yang menyoroti pekerjaan klien, Loop Builder memungkinkan Anda untuk dengan mudah membuat tampilan yang profesional dan dinamis.