6 galeri gambar baru yang dibangun dengan baris bersarang Divi 5 (unduhan gratis)

Jika Anda pernah mencoba membangun galeri gambar secara manual, Anda tahu seberapa cepat segalanya menjadi berantakan. Gambar yang tidak merata, baris yang tidak selaras, dan desain yang tidak responsif mengubah galeri sederhana menjadi mimpi buruk tata letak.

Bahkan dalam Divi 4, struktur gambar yang kompleks sering kali berarti menumpuk beberapa baris dan bagian khusus, mengutak -atik jarak, dan jam penyesuaian manual. Tetapi dengan Divi 5, Anda dapat melewatkan semua itu.

Berkat fitur Nested Rows baru, Anda dapat membangun struktur galeri gambar yang lebih maju. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana dan memberi Anda 6 desain tata letak galeri untuk memberi Anda awal.

Divi 5 siap digunakan di situs web baru, tetapi tunggu sedikit sebelum bermigrasi yang sudah ada.

Menggunakan baris bersarang untuk membangun tata letak yang kompleks

Divi 4 sudah memiliki semua yang Anda butuhkan untuk membangun galeri gambar, tetapi membuat tata letak yang kompleks sering terasa kikuk. Divi 5 memperkenalkan baris bersarang yang memberi Anda cara yang lebih cepat dan lebih bersih untuk membangun tata letak galeri canggih secara visual, tanpa hacks diperlukan.

Berlangganan saluran YouTube kami

Apa itu baris bersarang?

Baris bersarang adalah fitur tata letak baru yang kuat di Divi 5 yang memungkinkan Anda menempatkan satu baris di dalam yang lain, memberi Anda lebih banyak kontrol atas bagaimana Anda menyusun halaman Anda. Hal ini memungkinkan untuk merancang bagian kompleks langsung di dalam pembangun visual tanpa perlu menulis kode atau mengandalkan solusi.

Nesting a Row seperti menambahkan modul lain. Anda hanya perlu melayang di atas elemen tempat Anda ingin menempatkan baris Anda dan klik tombol Plus untuk memilih baris baru. Kemudian Anda dapat memilih dari semua tata letak baris ini, yang sempurna untuk berbagai struktur galeri.

Baris bersarang ini berperilaku persis seperti baris biasa. Anda dapat memilih struktur kolom, menambahkan modul, dan bersarang baris lain jika diperlukan - berkat sarangnya yang tak terbatas. Anda juga dapat mengubah ukuran kolom dengan menyeret, sehingga menyesuaikan lebar terasa intuitif dan tidak melibatkan matematika atau jarak peretasan.

Baris bersarang juga sepenuhnya responsif secara default. Tepat dari pembangun, Anda dapat mengubah tata letak Anda di berbagai layar. Karena ini adalah bagian dari kerangka kerja Divi 5, ia bekerja dengan sempurna dengan fitur -fitur lain seperti preset grup opsi dan variabel desain. Kami juga akan berbagi tips untuk menggabungkan baris bersarang dengan fitur canggih Divi 5 untuk mengoptimalkan alur kerja desain galeri Anda.

Pelajari segalanya tentang baris bersarang Divi 5

Apa yang membuat baris bersarang berbeda?

Di Divi 4, membangun tata letak galeri gambar khusus yang terlibat secara kreatif menggunakan baris, bagian khusus, dan tata letak untuk mencapai desain yang lebih maju. Ini berarti akan menantang jika Anda tidak memiliki pengetahuan desain. Dan bahkan jika Anda memiliki pengalaman, Anda terbatas pada beberapa struktur tata letak.

Baris bersarang menawarkan pendekatan yang lebih intuitif. Anda tidak lagi harus mengandalkan baris terpisah atau bagian khusus. Anda dapat dengan mudah menyarangkan baris dan mencampur dan mencocokkannya dengan modul untuk membuat pola desain yang tidak terbatas. Ingin membuat showcase produk? Buat baris dua kolom, tambahkan gambar unggulan Anda di sebelah kiri dan deskripsi di sebelah kanan, sarang baris tiga kolom di bawah gambar kiri, dan tambahkan gambar pendukung. Imajinasi Anda adalah batasnya!

6 tata letak galeri gambar yang dapat Anda bangun dengan baris bersarang

Untuk memberi Anda sekilas tentang apa yang mungkin, kami telah membuat enam desain tata letak galeri gambar dengan instruksi tentang bagaimana baris bersarang digunakan untuk mendesainnya. Ayo kita membahasnya.

Tata letak 1: Galeri CTA sebaris

Tata letak kisi berlapis menggunakan grid bergaya majalah modern yang menyoroti satu proyek dengan kombinasi visual besar, bidikan pendukung, dan teks yang ditempatkan dengan hati-hati. Bagian pertama adalah baris bersarang 2-kolom (bersarang di baris 2 kolom lainnya) yang menampilkan dua gambar, dan berikutnya adalah gambar besar lainnya. Banner teks horizontal memecahkan kisi, menambahkan konteks dan ajakan bertindak. Bagian bawah membawa tata letak tiga kolom lain untuk melanjutkan cerita, tetapi dengan ruang untuk deskripsi teks yang lebih panjang.

Desain ini sangat cocok untuk portofolio, pameran real estat, atau tata letak editorial yang membutuhkan ritme visual dan hierarki konten yang jelas. Ini bekerja dengan indah di seluruh ukuran layar sambil tetap merasa terstruktur dan disengaja.

Bagaimana membangunnya

Mulailah dengan baris dua kolom. Tambahkan satu gambar di sebelah kanan dan sarang baris lain di kolom kiri. Tambahkan gambar ke semua. Kemudian, barisan bersarang lainnya ditempatkan di bawah spanduk untuk memegang paragraf teks di samping set visual lainnya. Ulangi seluruh struktur atau buat beberapa perubahan, seperti menempatkan baris teks tentang gambar bersarang.

Tata letak ini unik dalam bagaimana baris bersarang digunakan di dalam setiap bagian visual. Baris bersarang Divi 5 memungkinkan fleksibilitas struktural, mencampur format baris di dalam satu kolom dan melapisinya di bawah elemen kontekstual.

Layout 2: Split Focus Gallery

Tata letak dua kolom di mana kolom kiri menumpuk gambar vertikal di atas blok teks pendek, dan kolom kanan menampilkan gambar besar diikuti oleh deretan tiga gambar pendukung yang lebih kecil. Pengaturan ini menyoroti satu momen visual utama sambil memungkinkan ruang untuk konteks tertulis dan strip gambar sekunder dalam tata letak yang sama.

Tata letak Split Focus Gallery sangat cocok untuk pernikahan, acara, atau galeri bunga di mana setiap blok visual menangkap satu momen atau emosi. Ini juga bekerja dengan baik ketika Anda ingin menggabungkan gambar fokus yang berani dengan thumbnail pendukung dan kutipan kecil, testimonial, atau pesan intro di sampingnya.

Bagaimana membangunnya

Buat baris 2-kolom. Di kolom kiri, tumpuk gambar vertikal di atas dan modul teks di bawahnya menggunakan dua baris terpisah. Di kolom kanan, masukkan modul gambar tunggal di bagian atas untuk foto unggulan, lalu tambahkan baris bersarang dengan tiga kolom langsung di bawahnya untuk menampung gambar pendukung yang lebih kecil.

Kuncinya adalah menyesuaikan bantalan dan mengatur lebar talang ke 1 di baris bersarang untuk menjaga semuanya tetap kencang dan bersih. Kemudian, ketika Anda telah menambahkan gambar, buat preset perbatasan (atur lebar perbatasan ke 2 dan warna perbatasan putih ) dan oleskan ke semua elemen.

Layout 3: Project Spotlight Gallery

Tata letak ini mengubah galeri gambar Anda menjadi showcase proyek atau penawaran individual. Alih-alih hanya menampilkan visual, setiap item mendapatkan label dan ajakan bertindak sendiri, menjadikannya ideal untuk portofolio, resep, highlight produk, atau studi kasus.

Baris dua kolom pendek mengikuti setiap gambar. Sisi kiri berisi deskripsi cepat atau nama proyek, dan sisi kanan menampilkan tombol yang mengundang pengguna untuk mengambil tindakan, seperti pesanan sekarang . Tata letak Project Spotlight Gallery membawa lebih banyak tujuan dan interaksi ke galeri Anda.

Bagaimana membangunnya

Di bawah setiap gambar, kami telah menambahkan barisan dua kolom. Kami menggunakan kolom kiri untuk deskripsi singkat, dan kolom kanan untuk tombol ajakan bertindak. Kemudian kami menata tombol menggunakan gaya global, dan mengulangi struktur ini untuk setiap item galeri untuk mempertahankan konsistensi. Untuk membuat overlay baris gambar, kami telah mengatur posisi menjadi absolut dengan vertikal offset 40px dan z index 1000.

Kami juga telah menambahkan preset bayangan untuk semua gambar, yang tidak hanya memberi galeri tampilan yang dipoles tetapi juga menghemat waktu saya dengan membiarkan saya menerapkan branding yang konsisten di beberapa modul hanya dalam beberapa klik.

Tata Letak 4: Galeri Pengungkapan Gulir

Tata letak galeri Gulir Gulungan dirancang untuk mendongeng visual yang terungkap saat pengguna gulir. Setiap bagian memiliki gambar besar yang dipasangkan dengan visual pendukung yang lebih kecil (dibuat dengan bersarang beberapa baris bersama -sama).

Ini sempurna untuk galeri editorial, pameran resep (menyoroti langkah atau bahan), atau halaman tim perusahaan yang ingin menangkap momen kelompok secara interaktif. Alih -alih pemirsa yang luar biasa, itu memandu mereka melalui setiap cerita secara visual, satu blok pada satu waktu.

Bagaimana membangunnya

Strukturnya sederhana: Buat baris dua kolom. Tambahkan modul gambar, tajuk, teks, dan tombol di sebelah kiri. Di sebelah kanan, sarang baris baru dengan dua kolom dan masukkan modul gambar ke masing -masing untuk mendukung visual. Kemudian, Anda dapat menumpuk baris tunggal dan dua kolom untuk membuat kisi-kisi seperti batu.

Pemain kunci dari tata letak ini adalah bagian kiri, yang menempel. Untuk membuat bagian unggulan Anda stick, Anda perlu membuat grup modul dan mengaktifkan pengaturan efek gulir . Klik pada grup modul Anda dan buka Pengaturan> Lanjutan> Efek Gulir.

Buat grup modul Anda menempel ke atas dan atur batas lengket bawah ke area tubuh. Saat pengguna menggulir ke bawah, gambar unggulan akan melekat, sementara gambar lainnya terus bergerak ke atas.

Tata Letak 5: Galeri Produk terhuyung -huyung

Tidak setiap galeri membutuhkan gambar fokus atau struktur yang kompleks. Terkadang, yang Anda butuhkan hanyalah satu set gambar yang diatur dalam struktur yang terhuyung -huyung, dan di situlah baris bersarang dengan tenang bersinar.

Tata letak ini sangat ideal untuk e-commerce atau situs yang berfokus pada produk di mana Anda ingin menyoroti koleksi tanpa membuatnya terasa seperti kisi khas. Ini menggunakan banyak ruang putih dan baris bersarang untuk memecahkan monoton visual dengan mencampur satu, dua, dan tiga kolom gambar gambar di dalam satu bagian. Hasilnya adalah tata letak yang seimbang yang terasa buatan tangan dan editorial, sempurna untuk menampilkan detail produk, close-up material, atau item pelengkap.

Ini bekerja sangat baik untuk merek dengan produk taktil atau mewah seperti barang -barang kulit, keramik, atau barang -barang buatan tangan di mana masalah cerita visual penting.

Bagaimana membangunnya

Buat baris dua kolom. Tambahkan tata letak gambar yang ditumpuk menggunakan baris bersarang di kolom kiri. Satu baris memiliki dua foto kecil berdampingan, dan yang lainnya memiliki gambar vertikal. Di kolom kanan, sarang baris baru dengan tiga kolom dan masukkan gambar produk. Di bawah itu, tempatkan teks dan tombol Anda.

Untuk membuat efek tas tangan yang tumpang tindih (seperti di bagian yang dibuat dengan tangan) , tambahkan modul gambar di barisnya dan gunakan penentuan posisi absolut (Advanced> Position> Absolute ). Kemudian gunakan slider offset dan z-index untuk melapisinya di antara kedua bagian. Ini memungkinkan Anda membuat tata letak bergaya majalah di mana gambar memecahkan kisi untuk menambah minat visual.

Layout 6: Grid Portofolio Asimetris

Tata letak kisi portofolio asimetris menggabungkan mendongeng dan citra dalam format dua kolom yang bersih. Gunakan kolom kiri untuk memperkenalkan proyek dengan judul, deskripsi singkat, dan CTA. Di kolom kanan, barisan tiga kolom berada di atas gambar unggulan besar, memberikan kesempatan sempurna untuk menampilkan visual kunci dengan bidikan pendukung.

Desain ini sangat ideal untuk desainer, fotografer, atau lembaga yang menyajikan studi kasus atau portofolio yang dikuratori. Ini membuat perhatian tetap fokus sambil menawarkan ritme gulir alami dan aliran ramah seluler.

Bagaimana membangunnya

Mulailah dengan baris dua kolom. Di kolom kiri, tambahkan modul teks untuk judul dan deskripsi Anda, diikuti oleh modul tombol (jika Anda mau).

Tambahkan baris bersarang di kolom kanan. Pilih tata letak tiga kolom dan tumpuk modul gambar lain. Masukkan tiga gambar pendukung di baris bersarang dan gambar besar dalam modul gambar bertumpuk. Gunakan struktur baris lain untuk membuat lebih banyak pola.

Agar semuanya selaras, atur lebar talang ke 1 dan potong gambar Anda ke ketinggian yang konsisten sebelum mengunggah. Gunakan preset gambar global (seperti perbatasan lunak atau drop shadow) dan mengarahkan efek untuk menjaga hal -hal tetap interaktif tetapi halus.

Anda juga akan melihat barisan bersarang lain yang overlay gambar. Kami telah mengatur posisi ke absolut untuk membuat efek overlay .

Tips Teratas untuk Membangun Galeri Gambar Interaktif

Setelah tata letak Anda ada, taburi dalam beberapa detail tambahan untuk membuat galeri Anda lebih halus. Begini caranya:

1. Buat Efek Hover

Menambahkan efek hover adalah salah satu cara termudah untuk membuat galeri gambar Anda terasa lebih dinamis. Ini menambah interaktivitas tanpa mengganggu konten, dan membantu gambar merasa hidup ketika pengguna terlibat dengan mereka.

Di Divi 5, menambahkan efek hover ke gambar Anda mudah. Saat mengedit, Anda dapat dengan mudah beralih ke melayang (dan mode responsif) dan menyesuaikan pengaturan Anda.

Anda tidak perlu beralih ke melayang untuk setiap opsi gambar atau pengaturan yang berbeda; Cukup beralih sekali, buat perubahan pada semua elemen yang ingin Anda sesuaikan, dan simpan. Kami mengubah warna perbatasan, tetapi Anda juga dapat mencoba filter, mengubah, menambahkan bayangan, dan lebih mudah.

Anda dapat menerapkan ini pada gambar individual atau menyimpannya sebagai preset jika Anda ingin semua gambar Anda berperilaku dengan cara yang sama. Ini detail kecil, tetapi membuat galeri Anda terasa bijaksana dan interaktif, dan Divi membuatnya mudah.

2. Gunakan atribut salin/tempel untuk menerapkan gaya ke gambar dengan cepat

Menyesuaikan secara manual setiap gambar di galeri dapat memakan waktu, terutama ketika menerapkan gaya yang konsisten seperti perbatasan, bayangan, atau efek melayang. Meskipun preset bagus untuk gaya global, Anda mungkin tidak ingin membuat preset baru untuk setiap penyesuaian kecil.

Sistem manajemen atribut Divi 5 menawarkan solusi ramping. Dengan hanya beberapa klik, Anda dapat menyalin gaya dari satu gambar dan menerapkannya kepada orang lain. Anda tidak perlu mengulangi proses penyesuaian yang sama secara manual untuk setiap gambar. Anda bisa menyalin dan menempel dan mempertahankan konsistensi.

Misalnya, sesuaikan satu elemen dan salin dan tempel atributnya ke elemen lain untuk mereplikasi gaya.

Divi 5 juga memungkinkan lebih banyak kontrol granular. Misalnya, Anda dapat menyalin dan menempelkan grup atribut tertentu, seperti hanya pengaturan desain atau hanya efek hover. Ini membuat alur kerja Anda efisien dan kohesif.

3. Gunakan klem untuk membuat gambar yang cair dan responsif

Dalam tata letak galeri modern, gambar Anda seharusnya tidak hanya skala tetapi juga merespons dengan cerdas ukuran layar yang berbeda. Itulah fungsi klem () yang membantu Anda capai.

Divi 5 mendukung Clamp () dan banyak unit canggih lainnya yang memungkinkan Anda untuk secara manual memasukkan nilai ukuran di mana saja, termasuk lebar gambar, bantalan, dan bidang margin. Clamp () sangat ideal untuk responsif. Ini memungkinkan Anda mengatur nilai minimum, ideal, dan maksimum, semuanya dalam satu baris.

Misalnya, klem (1200px, 30VW, 1400px) memberi tahu Divi untuk tidak pernah naik di bawah 1200px, skala hingga 30% dari lebar viewport, tetapi tutupnya pada 1400px.

Ini sangat berguna untuk strip gambar atau tata letak yang terhuyung -huyung di mana Anda menginginkan grid yang lebih cair tanpa breakpoint. Ketika dikombinasikan dengan baris bersarang, Clamp () membantu setiap blok beradaptasi secara alami tanpa memerlukan penyesuaian seluler yang terpisah.

4. Pratinjau dan tweak untuk perangkat yang berbeda

Setelah tata letak Anda terlihat bagus di desktop, mudah untuk menyempurnakannya untuk tablet dan seluler menggunakan alat pengeditan responsif bawaan Divi. Beralih di antara tampilan perangkat dan sesuaikan pengaturan seperti ukuran gambar, jarak, dan penyelarasan teks untuk setiap layar.

Misalnya, Anda mungkin ingin mengurangi bantalan antara baris pada kolom seluler atau tumpukan secara berbeda untuk pengalaman gulir yang lebih baik. Butuh beberapa menit untuk menyesuaikan pengaturan ini dapat membuat galeri Anda terasa bersih dan profesional di setiap layar.

Unduh tata letak galeri secara gratis

Ingin mulai menggunakan tata letak galeri di dalam Divi 5? Berlangganan di bawah ini untuk mendapatkan akses ke file JSON. Anda dapat mengunggah ini ke perpustakaan Divi Anda dan mengimpornya ke halaman Anda sesudahnya.

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!

Bangun galeri gambar bersarang (dan banyak lagi) dengan Divi 5

Baris bersarang Divi 5 menyederhanakan tata letak yang kompleks dengan memungkinkan Anda menempatkan baris dalam baris. Mereka juga menawarkan sarang yang tak terbatas dan kontrol yang tepat atas desain Anda.

Baris bersarang hanyalah salah satu fitur eksklusif Divi 5. Waspadai sistem tata letak berbasis Flexbox baru Divi, yang juga memperkenalkan berbagai macam templat baris baru dan kontrol flexbox untuk memberi Anda semua alat dan kesederhanaan untuk membuat tata letak apa pun yang dapat Anda bayangkan.

Saat kami terus meningkatkan Divi 5, Anda dapat mengharapkan lebih banyak fitur yang meningkatkan kemampuan desain Anda dan menyederhanakan alur kerja Anda.

Jika Anda telah membangun galeri dengan cara yang sulit, sekarang waktu yang tepat untuk mencoba Divi 5 dan mengalami bagaimana baris bersarang dan alat tata letak visual dapat menyederhanakan semuanya.

Divi 5 siap digunakan di situs web baru, tetapi tunggu sedikit sebelum bermigrasi yang sudah ada.