6 yeni resim galerileri Divi 5'in iç içe sıralarla inşa edilmiş (Ücretsiz İndir)

Bir resim galerisi oluşturmayı manuel olarak denediyseniz, işlerin ne kadar hızlı dağıldığını bilirsiniz. Düzensiz görüntüler, yanlış hizalanmış satırlar ve tepkisiz tasarımlar basit bir galeriyi düzen kabusuna dönüştürür.

Divi 4'te bile, karmaşık görüntü yapıları genellikle birden fazla satır ve özel bölüm istiflemek, ayar aralığını ve saatlerce manuel özelleştirme anlamına geliyordu. Ama Divi 5 ile tüm bunları atlayabilirsiniz.

Yeni iç içe satırlar özelliği sayesinde daha gelişmiş resim galerisi yapıları oluşturabilirsiniz. Bu yazıda size nasıl bir başlangıç ​​yapmak için size nasıl gösterilip 6 galeri düzeni tasarımı sağlayacağız.

Divi 5 yeni web sitelerinde kullanılmaya hazırdır, ancak mevcut web sitelerini taşımadan biraz önce bekleyin.

Karmaşık düzenler oluşturmak için iç içe satırlar kullanma

Divi 4 zaten resim galerileri oluşturmak için ihtiyacınız olan her şeye sahipti, ancak karmaşık düzenler oluşturmak genellikle tıknazdı. Divi 5, hack gerekmeden gelişmiş galeri düzenleri oluşturmak için size daha hızlı ve daha temiz bir yol veren iç içe sıralar sunar.

YouTube kanalımıza abone olun

İç içe satırlar nelerdir?

İç içe satırlar, Divi 5'te bir satırı diğerine yerleştirmenizi sağlayan ve sayfanızı nasıl yapılandırdığınız üzerinde daha fazla kontrol sağlayan güçlü bir yeni düzen özelliğidir. Bu, karmaşık bölümlerin kodu yazmaya veya geçici çözümlere güvenmeye gerek kalmadan doğrudan görsel oluşturucunun içindeki tasarlamayı mümkün kılar.

Bir satırı yuvalamak başka bir modül eklemek gibidir. Yalnızca satırınızı yerleştirmek istediğiniz öğenin üzerine gelmeniz ve yeni satır seçmek için artı düğmesini tıklamanız gerekir. Daha sonra, çeşitli galeri yapıları için mükemmel olan tüm bu satır düzenleri arasından seçim yapabilirsiniz.

Bu iç içe satır tam olarak normal bir satır gibi davranır. Sonsuz yuva kabiliyeti sayesinde bir sütun yapısı seçebilir, modül ekleyebilir ve gerekirse başka bir satırı yuva yapabilirsiniz. Ayrıca sürükleyerek sütunları yeniden boyutlandırabilirsiniz, böylece genişlikleri ayarlamak sezgisel hisseder ve matematik veya boşluk hack'lerini içermez.

Yuvalanmış sıralar da varsayılan olarak tamamen duyarlıdır. Tam inşaatçıdan, düzeninizi çeşitli ekranlarda değiştirebilirsiniz. Divi 5 çerçevesinin bir parçası olduğundan, seçenek grup ön ayarları ve tasarım değişkenleri gibi diğer özelliklerle mükemmel bir şekilde çalışır. Ayrıca, Galeri Design iş akışınızı optimize etmek için iç içe satırları Divi 5'in gelişmiş özellikleriyle birleştirmek için ipuçlarını paylaşacağız.

Divi 5'in iç içe sıraları hakkında her şeyi öğrenin

İç içe sıraları farklı kılan nedir?

Divi 4'te, daha gelişmiş tasarımlar elde etmek için satırları, özel bölümleri ve düzenleri yaratıcı bir şekilde kullanmayı özel resim galerisi düzenleri oluşturdu. Bu, tasarım bilgisine sahip olmasaydın zorlayıcı olacağı anlamına geliyordu. Ve deneyime sahip olsanız bile, birkaç düzen yapısı ile sınırlıydınız.

İç içe sıralar daha sezgisel bir yaklaşım sunar. Artık ayrı sıralara veya özel bölümlere güvenmeniz gerekmiyor. Sınırsız tasarım desenleri oluşturmak için sıraları kolayca yuva yapabilir ve modüllerle karıştırabilir ve eşleştirebilirsiniz. Bir ürün vitrini oluşturmak ister misiniz? İki sütunlu bir satır oluşturun, öne çıkan görüntünüzü sola ekleyin ve sağa ekleyin, sol görüntünün altına üç sütunlu bir satırı yuva yapın ve destekleyici görüntüler ekleyin. Hayal gücünüz sınırdır!

6 Resim Galerisi Düzenleri Yuva sıralarla oluşturabileceğiniz

Size mümkün olanı bir göz atmak için, onları tasarlamak için iç içe sıraların nasıl kullanıldığına dair talimatlarla altı resim galerisi düzeni tasarımı oluşturduk. Onları gözden geçirelim.

Düzen 1: Satır içi CTA Galerisi

Katmanlı ızgara düzeni, bir projeyi büyük görseller, destekleyici çekimler ve dikkatlice yerleştirilmiş metin kombinasyonu ile vurgulayan modern, dergi tarzı bir ızgara kullanır. İlk bölüm, iki görüntü içeren 2 sütunlu iç içe satır (başka bir 2 sütunlu satırda yuvalanmış) ve bir sonraki başka bir büyük görüntü. Yatay bir metin afişi, bağlam ve harekete geçirici bir çağrı ekleyerek ızgarayı kırar. Alt bölüm, hikayeye devam etmek için üç sütunlu başka bir düzen getiriyor, ancak daha uzun bir metin açıklaması için yer.

Bu tasarım portföyler, gayrimenkul sergileri veya görsel ritim ve net içerik hiyerarşisi gerektiren editoryal düzenler için mükemmeldir. Hala yapılandırılmış ve kasıtlı hissederken ekran boyutlarında güzel çalışır.

Nasıl inşa edilir

İki sütunlu bir satırla başlayın. Sağda bir görüntü ekleyin ve sol sütunda başka bir satırı yuva. Herkese resim ekleyin. Ardından, başka bir iç içe satır, başka bir görsel kümenin yanında bir metin paragrafını tutmak için bir afişin altına yerleştirilir. Tüm yapıyı tekrarlayın veya iç içe geçmiş görüntüler hakkında metin satırını koymak gibi birkaç değişiklik yapın.

Bu düzen, her bir görsel bölümün içinde iç içe satırların nasıl kullanıldığı konusunda benzersizdir. Divi 5'in iç içe sıraları, tek bir sütunun içindeki satır formatlarını karıştırarak ve bağlamsal öğeler altında katmanlama yapısal esnekliğe izin verir.

Düzen 2: Bölünmüş Odak Galerisi

Sol sütunun kısa bir metin bloğunun üzerinde dikey bir görüntü yığınladığı iki sütunlu bir düzen ve sağ sütunda büyük bir görüntü ve ardından üç küçük destekleyici görüntüden oluşan bir satır bulunur. Bu düzenleme, hem yazılı bağlam hem de aynı düzende ikincil bir görüntü şeridine izin verirken bir ana görsel anı vurgular.

Bölünmüş Odak Galerisi düzeni, her görsel bloğun tek bir an veya duygu yakaladığı düğün, etkinlik veya çiçek galerileri için mükemmeldir. Ayrıca, cesur bir odak görüntüsünü destekleyici küçük resimler ve küçük bir alıntı, referans veya giriş mesajı ile birleştirmek istediğinizde de iyi çalışır.

Nasıl inşa edilir

2 sütunlu bir satır oluşturun. Sol sütunda, üstte dikey bir görüntü ve iki ayrı satır kullanarak altındaki bir metin modülü istifleyin. Sağ sütunda, öne çıkan fotoğraf için üstte tek bir görüntü modülü yerleştirin, ardından daha küçük destekleyici görüntüler tutmak için doğrudan üç sütunlu iç içe bir satır ekleyin.

Anahtar, her şeyi sıkı ve temiz tutmak için dolguyu ayarlamak ve oluk genişliğini iç içe sırada ayarlamaktır. Daha sonra, görüntüleri eklediğinizde, bir kenarlık ön ayar oluşturun ( sınır genişliğini 2 ve sınır rengi beyaza ayarlayın) ve tüm öğelere uygulayın.

Düzen 3: Project Spotlight Galerisi

Bu düzen, resim galerinizi bireysel projelerin veya tekliflerin bir vitrine dönüştürür. Sadece görselleri görüntülemek yerine, her öğe kendi etiketini ve harekete geçirici mesajı alır, bu da portföyler, tarifler, ürün vurguları veya vaka çalışmaları için idealdir.

Kısa iki sütunlu bir sıra her görüntüyü takip eder. Sol tarafta hızlı bir açıklama veya proje adı içerir ve sağ tarafta, kullanıcıyı şimdi sipariş gibi harekete geçmeye davet eden bir düğme bulunur. Project Spotlight Galeri Düzeni, galerinize daha fazla amaç ve etkileşim getirir.

Nasıl inşa edilir

Her görüntünün altına, iki sütunlu iç içe geçmiş bir sıra ekledik. Kısa bir açıklama için sol sütunu ve harekete geçirici bir düğme için sağ sütunu kullandık. Daha sonra düğmeyi küresel stilleri kullanarak şekillendirdik ve tutarlılığı korumak için her galeri öğesi için bu yapıyı tekrarladık. Satırın görüntünün kaplanmasını sağlamak için, dikey ofset 40px ve z index 1000 ile konumu mutlak olarak ayarladık.

Ayrıca, tüm görüntülere bir gölge ön ayar ekledik, bu da sadece galeriye cilalı bir görünüm vermekle kalmayıp aynı zamanda birkaç tıklamada tutarlı markayı birden fazla modül için uygulamama izin vererek bana zaman kazandırdı.

Düzen 4: Kaydırma Galerisi

Scroll Reveal Galeri Düzeni, kullanıcılar kaydırdıkça ortaya çıkan görsel hikaye anlatımı için tasarlanmıştır. Her bölümde, daha küçük destekleyici görsellerle eşleştirilmiş büyük bir görüntüye (birden çok satırı bir araya getirerek oluşturulur).

Editoryal galeriler, tarif vitrinleri (adımları veya malzemeleri vurgulama) veya grup anlarını etkileşimli olarak yakalamak isteyen şirket takım sayfaları için mükemmeldir. Ezici izleyiciler yerine, her bir hikayede görsel olarak, her seferinde bir blok yönlendirir.

Nasıl inşa edilir

Yapı basit: İki sütunlu bir sıra oluşturun. Solda bir görüntü modülü, başlık, metin ve bir düğme ekleyin. Sağda, iki sütunlu yeni bir satırı yuvalayın ve görselleri desteklemek için her birine görüntü modülleri ekleyin. Ardından, duvarcılık benzeri bir ızgara oluşturmak için alternatif olarak tek ve iki sütunlu satırları istifleyebilirsiniz.

Bu düzenin kilit oyuncusu yapışan sol bölümdür. Öne çıkan bölüm çubuğunuzu yapmak için bir modül grubu oluşturmanız ve kaydırma efekt ayarlarını etkinleştirmeniz gerekir. Modül grubunuza tıklayın ve Ayarlar> Gelişmiş> Kaydırma Efektlerine gidin.

Modül grubunuzu üste yapıştırın ve alt yapışkan limiti vücut alanına ayarlayın. Kullanıcılar aşağı kaydırdıkça, öne çıkan görüntü yapışır, diğer görüntüler yükselir.

Düzen 5: Sendelenmiş Ürün Galerisi

Her galerinin odak görüntüsü veya karmaşık bir yapıya ihtiyacı yoktur. Bazen, ihtiyacınız olan tek şey kademeli bir yapıda düzenlenmiş bir dizi görüntüdür ve iç içe sıraların sessizce parladığı yer burasıdır.

Bu düzen, tipik bir ızgara gibi hissettirmeden bir koleksiyonu vurgulamak istediğiniz e-ticaret veya ürün odaklı siteler için idealdir. Tek bir bölümün içinde bir, iki ve üç sütunlu görüntü sıralarını karıştırarak görsel monotonluğu kırmak için çok sayıda beyaz boşluk ve iç içe sıralar kullanır. Sonuç, ürün detaylarını, malzeme yakın çekimlerini veya tamamlayıcı öğeleri sergilemek için mükemmel, el işi ve editoryal hissettiren iyi dengelenmiş bir düzendir.

Özellikle deri ürünleri, seramik veya görsel hikaye anlatımının önemli olduğu el yapımı ürünler gibi dokunsal veya lüks ürünlere sahip markalar için iyi çalışır.

Nasıl inşa edilir

İki sütunlu bir satır oluşturun. Sol sütunda iç içe satırları kullanarak yığılmış bir görüntü düzeni ekleyin. Bir satırın yan yana iki küçük fotoğrafı, diğerinin dikey bir görüntü var. Sağ sütunda, üç sütunlu yeni bir satırı yuva ve ürün görüntüleri ekleyin. Bunun altında, metninizi ve düğmenizi yerleştirin.

Üst üste binen el çantası efektini (el yapımı bölümde olduğu gibi) oluşturmak için, satırına bir görüntü modülü ekleyin ve mutlak konumlandırma (gelişmiş> konum> mutlak ) kullanın. Ardından, iki bölüm arasında katmanlamak için ofset kaydırıcılarını ve z-endeksini kullanın. Bu, görüntülerin ek görsel ilgi için ızgarayı kırdığı dergi tarzı düzenler oluşturmanızı sağlar.

Düzen 6: Asimetrik portföy ızgarası

Asimetrik portföy ızgara düzeni, hikaye anlatımı ve görüntüleri temiz iki sütun formatında birleştirir. Başlık, kısa açıklama ve CTA ile bir proje tanıtmak için sol sütunu kullanın. Sağ sütunda, üç sütunlu iç içe geçmiş bir satır, destekleyici çekimlerle temel görselleri göstermek için mükemmel bir fırsat sunan geniş özellikli bir görüntünün üzerine gelir.

Bu tasarım, küratörlü vaka çalışmaları veya portföyler sunan tasarımcılar, fotoğrafçılar veya ajanslar için idealdir. Doğal bir kaydırma ritmi ve mobil dostu akış sunarken dikkat odaklı tutar.

Nasıl inşa edilir

İki sütunlu bir satırla başlayın. Sol sütunda, başlık ve açıklamanız için bir metin modülü ekleyin, ardından bir düğme modülü (isterseniz).

Sağ sütunda iç içe bir satır ekleyin. Üç sütun düzeni seçin ve başka bir görüntü modülünü istifleyin. Yuvalanmış sıraya üç destekleyici görüntü ve istiflenmiş görüntü modülüne büyük bir görüntü ekleyin. Daha fazla desen oluşturmak için diğer satır yapılarını kullanın.

Her şeyi hizalamak için oluk genişliğini 1 olarak ayarlayın ve yüklemeden önce resimlerinizi tutarlı yüksekliklere kırpın. İşleri etkileşimli ancak rafine tutmak için küresel bir görüntü ön ayar (yumuşak sınır veya damla gölge gibi) ve devirme efektleri kullanın.

Ayrıca görüntüyü kaplayan başka bir iç içe satır fark edersiniz. Yer paylaşımı efekti oluşturmak için mutlak olarak konumu ayarladık .

Etkileşimli resim galerileri oluşturmak için en iyi ipuçları

Düzeniniz hazır olduğunda, galerilerinizi daha cilalı hale getirmek için birkaç ekstra ayrıntı serpin. İşte nasıl:

1.

Hover efektleri eklemek, resim galerilerinizi daha dinamik hissettirmenin en kolay yollarından biridir. İçeriğin dikkatini dağıtmadan etkileşim katar ve kullanıcıların onlarla etkileşime geçtiklerinde görüntülerin canlı hissetmesine yardımcı olur.

Divi 5'te, görüntülerinize kaydırma efektleri eklemek kolaydır. Düzenleme yaparken, kolayca havada (ve duyarlı modlara) geçebilir ve ayarlarınızı özelleştirebilirsiniz.

Her farklı görüntü veya ayar seçeneği için gelişimine geçmeniz gerekmez; Sadece bir kez geçin, özelleştirmek ve kaydetmek istediğiniz tüm öğelerde değişiklik yapın. Sınır rengini değiştirdik, ancak filtreleri de deneyebilir, dönüştürebilir, gölge ekleyebilir ve daha kolay.

Tüm görüntülerinizin aynı şekilde davranmasını istiyorsanız, bunu tek tek görüntülere uygulayabilir veya önceden ayar olarak kaydedebilirsiniz. Bu küçük bir ayrıntı, ancak galerinizin düşünceli ve etkileşimli hissettiriyor ve Divi onu zahmetsiz hale getiriyor.

2. Görüntülere hızlı bir şekilde stil uygulamak için özellikleri kopyala/yapıştır

Bir galerideki her görüntünün manuel olarak özelleştirilmesi, özellikle sınırlar, gölgeler veya havada uçma efektleri gibi tutarlı stilleri uygularken zaman alıcı olabilir. Ön ayarlar küresel stiller için mükemmel olsa da, her küçük ayar için yeni bir ön ayar oluşturmak istemeyebilirsiniz.

Divi 5'in öznitelik yönetim sistemi aerodinamik bir çözüm sunar. Sadece birkaç tıklama ile stilleri bir resimden kopyalayabilir ve diğerlerine uygulayabilirsiniz. Her görüntü için aynı özelleştirme işlemini manuel olarak tekrarlamanız gerekmez. Sadece kopyalayıp yapıştırabilir ve tutarlılığı koruyabilirsiniz.

Örneğin, bir öğeyi özelleştirin ve stili çoğaltmak için özelliklerini diğer öğelere kopyalayıp yapıştırın.

Divi 5 ayrıca daha ayrıntılı kontrol sağlar. Örneğin, yalnızca tasarım ayarları veya yalnızca Hover efektleri gibi belirli öznitelik gruplarını kopyalayıp yapıştırabilirsiniz. Bu, iş akışınızı verimli ve uyumlu hale getirir.

3. Sıvı ve duyarlı görüntüler oluşturmak için kelepçe kullanın

Modern bir galeri düzeninde, görüntüleriniz sadece ölçeklendirilmemeli, aynı zamanda farklı ekran boyutlarına akıllıca yanıt vermelidir. Clamp () işlevinin tam olarak başarmanıza yardımcı olduğu şey budur.

Divi 5, CLAMP () ve görüntü genişliği, dolgu ve marj alanları dahil olmak üzere her yere boyut değerlerini manuel olarak girmenize izin veren diğer birçok gelişmiş birimi destekler. Clamp () yanıt verme için idealdir. Hepsi bir satırda minimum, ideal ve maksimum bir değer ayarlamanızı sağlar.

Örneğin, bir kelepçe (1200 piksel, 30vw, 1400px) Divi'ye asla 1200 piksel altına girmemesini, görünüm portu genişliğinin% 30'unu ölçeklendirmediğini, ancak 1400 pikselde kapatmadığını söyler.

Bu, özellikle kesme noktaları olmadan daha akıcı bir ızgara istediğiniz görüntü şeritleri veya kademeli düzenler için kullanışlıdır. İç içe satırlarla birleştirildiğinde, CLAMP () her bloğun ayrı mobil ayarlamalara ihtiyaç duymadan doğal olarak uyum sağlamasına yardımcı olur.

4. Farklı cihazlar için önizleme ve ince ayar

Düzeniniz masaüstünde iyi göründüğünde, Divi'nin yerleşik duyarlı düzenleme araçlarını kullanarak tabletler ve mobil cihazlar için ince ayar yapmak kolaydır. Cihaz görünümleri arasında geçiş yapın ve her ekran için görüntü boyutu, boşluk ve metin hizalaması gibi ayarları ayarlayın.

Örneğin, daha iyi bir kaydırma deneyimi için mobil veya yığın sütunlarındaki satırlar arasındaki dolguları farklı şekilde azaltmak isteyebilirsiniz. Bu ayarları ayarlamak için birkaç dakika almak, galerinizi her ekranda temiz ve profesyonel hissettirebilir.

Galeri düzenlerini ücretsiz indirin

Divi 5 içindeki galeri düzenlerini kullanmaya başlamak ister misiniz? JSON dosyalarına erişmek için aşağıda abone olun. Bunları Divi kütüphanenize yükleyebilir ve daha sonra sayfalarınıza aktarabilirsiniz.

Dosyaları İndirin

Ücretsiz indir

Divi bültenine katılın, size Ultimate Divi açılış sayfası düzen paketinin bir kopyasının yanı sıra tonlarca şaşırtıcı ve ücretsiz divi kaynakları, ipuçları ve püf noktalarının bir kopyasını e -postayla göndereceğiz. Takip et ve hiçbir zaman bir divi ustası olacaksınız. Zaten abone olduysanız, aşağıdaki e -posta adresinizi yazın ve Düzen Paketine erişmek için İndir'i tıklayın.

İNDİRMEK

Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketlerine erişin!

Divi 5 ile iç içe resim galerileri (ve daha fazlası) oluşturun

Divi 5'in iç içe satırları, satırları satırlara yerleştirmenize izin vererek karmaşık düzenleri basitleştirir. Ayrıca sonsuz yuva kabiliyeti ve tasarımlarınız üzerinde hassas kontrol sunarlar.

İzli sıralar, Divi 5'in özel özelliklerinden sadece bir tanesidir. Divi'nin hayal edebileceğiniz herhangi bir düzeni oluşturmak için size tüm araçları ve basitliği sağlamak için çok çeşitli yeni satır şablonları ve Flexbox kontrolleri sunan yeni Flexbox tabanlı düzen sistemini arayın.

Divi 5'i geliştirmeye devam ettikçe, tasarım özelliklerinizi geliştiren ve iş akışınızı basitleştiren daha fazla özellik bekleyebilirsiniz.

Galerileri zor bir şekilde inşa ediyorsanız, şimdi Divi 5'i denemek ve iç içe sıraların ve görsel düzen araçlarının her şeyi nasıl basitleştirebileceğini deneyimlemek için mükemmel bir zaman.

Divi 5 yeni web sitelerinde kullanılmaya hazırdır, ancak mevcut web sitelerini taşımadan biraz önce bekleyin.