Divi 5'in iç içe sıralarla yapılan 10 ızgara düzeni (ücretsiz indir)

Izgara düzenleri, içeriği düzenlemek, kullanıcı deneyimini geliştirmek ve cihazlar arasında sorunsuz yanıt vermeyi sağlamak için yapılandırılmış ancak esnek bir yol sunar. Divi 5 Public Alpha'nın yayınlanmasıyla, web tasarımcıları yaratıcı sınırları zorlayan güzel ızgara düzenleri oluşturmak için yeni bir araç setine sahiptir. Tamamen yeniden tasarlanmış görsel oluşturucu ve iç içe satırlar, gelişmiş birimler ve modül grupları gibi güçlü yeni özelliklerle, katmanlı, karmaşık düzenler kolayca oluşturabilirsiniz.

Bu yazıda, simetrik özellik ızgaralarından dinamik duvar bloglarına ve etkileşimli portföy sergilerine kadar Divi 5 ile kolayca inşa edebileceğiniz ızgara düzenlerini sergileyeceğiz. İster bir portföy, e-ticaret mağazası veya kurumsal web sitesi tasarlıyor olun, bu düzenler tasarımlarınızı yükseltmeniz ve kitlenizi büyülemeniz için size ilham verecektir.

Divi 5'in gelişmiş özelliklerinin bu yaratıcı ızgara tarzı düzenleri nasıl mümkün kıldığını keşfedelim.

Divi 5 yeni web sitelerinde kullanılmaya hazırdır, ancak mevcut siteleri henüz Divi 5'e dönüştürmenizi önermiyoruz.

Izgara düzenleri için anahtar divi 5 özellikleri

Divi 5'in Yeniden Olumlu Vakfı, ızgara düzenleri oluşturmayı her zamankinden daha kolay hale getiren özellikler sunuyor. Bu araçlar, tasarımcıların, cihazlar arasında esnekliği korurken, hassas ve verimlilikle karmaşık, görsel olarak çekici ızgaralar oluşturmalarına olanak tanır. Aşağıda, güzel ızgara düzenlerini mümkün kılan Anahtar Divi 5 özelliklerini keşfediyoruz.

YouTube kanalımıza abone olun

İç içe satırlar

Divi 5'in iç içe satırlar özelliği, satırları sıralara yerleştirmenizi sağlar ve sezgisel bir sürükleme ve damla arayüzüne sahip karmaşık ızgara yapıları oluşturmak için sonsuz yuva edilebilirlik sunar. Bu işlevsellik, çok katmanlı ızgaraların tasarımını basitleştirerek modül yerleştirme üzerinde kesin kontrol sağlar.

İster karmaşık bir ürün vitrini ister katmanlı bir portföy ızgarası oluşturun, nexted satırlar içeriği daha akıllı bir şekilde düzenlemenizi sağlayarak düzenlerinizi dinamik ve görsel olarak ilgi çekici hale getirir.

Özelleştirilebilir kesme noktaları

Duyarlı tasarım, modern web siteleri için kritiktir ve Divi 5'in özelleştirilebilir kesme noktaları, ızgaralarınızın herhangi bir cihazda kusursuz görünmesini sağlamayı kolaylaştırır. Izgaraların çeşitli ekran boyutlarına sorunsuz bir şekilde uyum sağlamasına izin vererek yedi masaüstü, tablet ve mobil kesme noktaları kullanabilirsiniz.

Görsel oluşturucu içindeki farklı kesme noktalarında düzenlerinizin gerçek zamanlı önizlemelerini sağlayan tuval ölçeklendirme ile eşleştirilen bu özellik, ızgaralarınızın yanıt verme için optimize edilmesini sağlar ve tüm cihazlarda tutarlı bir kullanıcı deneyimi sunar.

Modül grupları

Modül grupları, tutarlı şebeke estetiğini tasarlama ve sürdürme sürecini kolaylaştırmaktadır. Modülleri bir araya getirerek, kolektif stil uygulayabilir ve bu grupları birden fazla sayfada yeniden kullanabilir, zaman tasarrufu ve tasarım tutarlılığı sağlayabilirsiniz.

Bu, özellikle blog yayınları veya ürün kartları gibi ızgara düzenleri için yararlıdır; bu, yazı tipleri, renkler veya vites efektleri gibi tutarlı tasarım öğelerinin sitenizde uyumlu bir görünüm için gereklidir.

Tasarım Değişkenleri

Tasarım değişkenleri ile Divi 5, renkler, yazı tipleri, bağlantılar, tipografi ve daha fazlası gibi temel tasarım öğelerinin merkezi yönetimini sunar. Bu özellik, ızgara düzenlerinizde ve tüm web sitenizde tekdüzelik sağlar - tutarlı bir görsel kimliğin korunmasını kolaylaştırır. Stiller Değişken Yöneticiye ayarlanır ve istediğiniz yerde uygulanabilir

Bir renk veya yazı tipi stilini güncellemeniz mi gerekiyor? Tasarım değişkenleri, bir yerde değişiklik yapmanızı, bunları anında tüm bölümler ve sayfalarda uygulamanızı, iş akışınızı düzene koymanızı ve tasarımlarınızı cilalı tutmanızı sağlar.

Gelişmiş Birimler

Divi 5'in gelişmiş birimleri, VW, VH, REM ve EM gibi seçeneklerle aralık ve boyutlandırma üzerinde ayrıntılı kontrol sağlar. Bu birimler, cihazlar arasında mükemmel bir şekilde ölçeklenen dinamik ve duyarlı ızgara düzenlerini mümkün kılar. Değişken yöneticiyle dolgu, kenar boşlukları veya eleman boyutlarını ayarlayabilirsiniz. Gelişmiş birimler, düzenlerinizin işlevsel ve görsel olarak uyumlu olmasını sağlayarak ızgara bileşenlerini hizalama ve hassas bir şekilde ölçeklendirme esnekliği sağlar.

Nitelik Yönetimi

Öznitelik yönetimi, tasarım öğeleri arasında öznitelikleri kopyalamanıza, yapıştırmanıza ve sıfırlamanıza izin vererek tasarım sürecini hızlandırır. Bu özellik, çoklu modüllere havada zam etkisi veya aralık gibi tutarlı stilleri uygulamak için çok önemlidir. Tekrarlayan görevleri azaltarak, öznitelik yönetimi, karmaşık ızgara düzenlerinin gelişimini hızlandırırken yaratıcılığa odaklanmanızı sağlar.

Bu Divi 5 özellikleri, benzersiz esneklik ve verimlilik sağlamak için birlikte çalışır, bu da kullanıcı deneyimini geliştiren ve web tasarımlarınızı yükselten çarpıcı, duyarlı ızgara düzenleri oluşturmayı kolaylaştırır.

Divi 5'te 10 Yaratıcı Izgara Düzeni Örneği

Izgara düzenleri modern web tasarımının temel taşıdır ve Divi 5 ile onları inşa etmek hiç bu kadar kolay olmamıştı. İster ürünler, portföyler, ekip üyeleri veya SSS sergiliyor olun, Divi 5 işlevsel ve görsel olarak çarpıcı düzenler oluşturabilir. Divi 5 ile oluşturabileceğiniz 10 ızgara düzeni örneğine bakalım.

1. Simetrik Özellik Izgarası

Simetrik özellik ızgaraları, ürünleri, hizmetleri veya portföy öğelerini temiz ve organize etmek için harika bir yol sunar. Bu ızgara stili yapılandırılmış içeriği vurgulamak için mükemmeldir ve uygulamasında çok yönlüdür. İş web siteleri, portföyler ve açılış sayfaları için kullanılabilirler, kullanıcıları zahmetsizce bilgi aracılığıyla yönlendiren cilalı bir görünüm sunar.

Aşağıdaki örnekte, bir eczacı işini sergilemek için dört sütunlu bir ızgara oluşturduk. Yuvalı satırlar, modül grupları ve öznitelik yönetimi kullanarak dakikalar içinde profesyonel, cilalı bir görünüm elde edebiliriz.

2. Duvar ızgarası

Bir duvar ızgarası, blog yayınlarını, portföy öğelerini veya hatta görsel olarak ilgi çekici, sıkı paketlenmiş bir ızgarada değişen yüksekliklerde tarifleri düzenleyen dinamik, Pinterest tarzı bir düzendir. Sabit sıra yüksekliklere sahip geleneksel ızgaraların aksine, duvar ızgaraları, içeriğin doğal olarak akmasına izin verir ve kesintisiz, organik bir görünüm oluşturmak için dikey boşlukları doldurur. Bu ızgara stili, bloglar, dergiler veya yaratıcı portföyler gibi görsel hikaye anlatımına öncelik veren web siteleri için mükemmeldir. Divi 5'in yerel özellikleriyle, şık ve duyarlı bir duvar ızgarası oluşturmak sezgisel ve verimlidir.

Aşağıdaki örnekte, Divi'nin grupları daha hızlı çoğaltmak için kısayollarını kullanarak tarifler için bir duvar ızgarası oluşturmak için iç içe satırları ve modül gruplarını birleştirdik.

3. Etkileşimli portföy şebekesi

Etkileşimli bir portföy ızgara düzeni, çalışmanızı sergilemek için ilgi çekici bir yol sağlar. Kullanıcıların içeriğinizi keşfetmesine izin vermek için LightBox pop -up'larını, vurgulu efektleri, düğmeleri ve daha fazlasını dahil edebilirsiniz. Bu ızgara stili, sorunsuz navigasyon ve etkileşim sağlarken kitlelerini fotoğrafçılık, tasarım veya her ikisi gibi görsel çalışmalarla büyülemeyi amaçlayan web siteleri için mükemmeldir.

Divi 5'in gelişmiş özellikleriyle, tasarımcılar yaratıcı çalışmayı etkili bir şekilde vurgulayan duyarlı, kullanıcı dostu portföy ızgaraları oluşturabilir.

4. Ürün Vitrin Izgarası

Bir Ürün Vitrini Grid, en çok satıcılarınızı, öne çıkan ürünlerinizi veya dünyaya tanıttığınız yeni ürünleri sunmanın benzersiz bir yolunu sunar. E-ticaret mağazaları için optimize edilmiş görüntüler, başlıklar, fiyatlar ve düğmelerle yapılandırılmış, görsel olarak çekici bir düzen oluşturabilirsiniz. Bir ızgara düzeni kullanarak, kullanıcıların göz atmasını ve satın alma kararları vermesini kolaylaştırmak için temiz, organize bir düzen oluşturabilirsiniz.

Divi 5 ile, etkileşimi ve dönüşümleri artıran duyarlı, marka tutarlı düzenler oluşturmak için güçlü özellikler kullanabilirsiniz.

5. Takım Üyesi Izgarası

Ekip Üyesi Grids, görüntüler, isimler, roller ve sosyal bağlantılarla ekip profillerini sergilemenizi sağlar. Bu ızgara stili, profesyonel ve ulaşılabilir bir sunum yaratır, bu da takımlarının uzmanlıklarını ve kişiliğini vurgulayan web siteleri için idealdir. Takım ızgaraları, kurumsal siteler, ajanslar veya kar amacı gütmeyen kuruluşlar için mükemmeldir, ancak insanları sergilemeniz gereken herhangi bir sitede uygulanabilir.

Aşağıdaki örnekte, iç içe satırlarla üç sütunlu bir ızgara kullanıyoruz ve yazı tipi boyutunu duyarlı bir şekilde kontrol etmek için tasarım değişkenlerini uyguluyoruz.

6. Hizmetler Izgarası

Bir ızgara düzeni, bir şirketin hizmetlerini sergilemenin harika bir yoludur. Hizmetleri organize, taranabilir bir formatta vurgular ve değer önerilerini iletmesi gereken web siteleri için idealdir. Ajanslar, serbest çalışanlar veya hizmet tabanlı işletmeler için mükemmel olan Grid, müşteri sorularını ve dönüşümleri yönlendiren duyarlı, ilgi çekici düzenler oluşturmak için Divi 5'in gelişmiş özelliklerini kullanır.

Aşağıdaki örnekte, dört sütunlu bir satır kullandık, satır aralığı için bir Calc () formülü atadık ve tasarım işlemini hızlandırmak için modül grupları ve iç içe satırları dahil ettik.

7. Etkinlik Programı Izgarası

Etkinlik programı ızgara stili, zaman duyarlı bilgileri profesyonel ve düzenli olarak düzenlemek ve sunmak için mükemmeldir, bu da konferanslar, atölyeler veya topluluk toplantıları gibi etkinlikleri barındıran web siteleri için idealdir. Divi 5'in özellikleri, ızgara formatında tarihler, başlıklar ve açıklamalar eklemenizi sağlar, bu da ziyaretçilerin istediklerini bulmasını kolaylaştırır.

Aşağıdaki örnek, olayları işlevsel ve estetik olarak görüntülemek için iç içe sıralarla üç sütunlu bir düzen sergilemektedir.

8. Fiyatlandırma Tablosu Izgarası

Divi 4 (ve Divi 5) bir fiyatlandırma modülü ile birlikte gelir, ancak fiyatlandırma, bir düğme ve mermi noktalarıyla sınırlıdır. Divi'nin yerel işlevselliğini genişletmek ve ihtiyaçlarına hitap eden bir fiyatlandırma ızgarası oluşturmak isteyenler için Divi 5 bunu yapmanın bir yolunu sunar. İç içe satırlar, modül grupları ve öznitelik yönetimi kullanarak içeriğinizi çarpıcı bir şekilde görüntüleyen bir fiyatlandırma ızgarası oluşturabilirsiniz.

Örneğin, yerleşik fiyatlandırma modülünün sınırlamalarına uymak zorunda kalmadan fiyatlandırma, özellikler ve birden çok düğme sağlayan üç sütunlu bir düzen oluşturabilirsiniz. Daha küçük ekranlar için duyarlı ayarları değiştirebilir ve ardından% 50 genişlikli sütunlar için bir seçenek grubu ön ayar oluşturabilirsiniz, bu da sütunlarınızın tablet ve mobil cihazlarda mükemmel bir şekilde sıralanmasını sağlar.

9. SSS Akordeon ızgarası

Web sitenizde bir SSS bölümüne sahip olmak, kullanıcıların sık sorulan soruların bir listesine erişmelerine yardımcı olabilir ve onlara ne sunduğunuz hakkında daha iyi bir fikir verir. Bu ızgara stili, bir ızgaranın netliğini akordeon modüllerinin etkileşimi ile birleştirerek, kısa, erişilebilir bilgi sağlaması gereken web siteleri için idealdir. Destek sayfaları, yardım merkezleri veya bilgilendirici siteler için mükemmel olan SSS Grid, kullanıcı deneyimini geliştiren duyarlı, ilgi çekici düzenler oluşturmak için Divi 5'in sağlam özelliklerinden yararlanır.

Bu örnekte, bilgilendirilmiş bir karar vermek için ihtiyaç duydukları ilgili bilgileri sağlamak için bilgi videoları ve Soru -Cevap içeren ilgi çekici bir SSS bölümü oluşturmak için iç içe satırları kullandık.

10. Resim Galeri Izgarası

Lightbox açılır penceresine sahip bir galeri ızgarası, fotoğrafçılığı, portföy örneklerini veya diğer görüntüleri sergilemek için görsel olarak çarpıcı bir yoldur. Bu ızgara stili, görsel hikaye anlatımını sergilemek için mükemmeldir, sanat galerileri, seyahat blogları veya fotoğrafçılık gibi çarpıcı görüntülere öncelik veren web siteleri için idealdir. Divi 5 ile tasarımcılar, büyülenen duyarlı, ilgi çekici galeri ızgaraları yaratabilirler.

Aşağıdaki örnekte, görüntüleri sergilemek için dört sütunlu basit bir düzen kullanıyoruz. Ek bir dokunuş için, görüntülerde ışık kutusu etkinleştirdik ve her fotoğrafın sağ alt köşesine bir sosyal paylaşım modülü ekledik.

Divi 5'te etkili ızgara düzenleri oluşturmak için ipuçları

Divi 5'in güçlü, esnek özellikleri sayesinde, etkili ızgara düzenleri oluşturmak her zamankinden daha kolay. İster bir özellik ızgarası isterse bindirme öğelerine sahip dinamik bir resim galerisi oluşturuyor olun, bu ipuçları Divi 5'in web sitenizin kullanıcı deneyimini artıran duyarlı, uyumlu ve verimli tasarımlar oluşturmak için yeteneklerini en üst düzeye çıkarmanıza yardımcı olacaktır.

1. İç içe satırlardan yararlanın

Divi 5'in iç içe satır özellikleri karmaşık, çok katmanlı ızgara yapıları oluşturur. Hassas hizalama için görüntüleri ve metni tek bir ızgara hücresine yerleştirme gibi satırlar içinde sıraları yuva yaparak içeriği düzenleyebilirsiniz. İç içe satırlar, portföy ızgaraları veya etkinlik programları gibi düzenler oluşturmak için mükemmeldir ve size yaratıcı, yapılandırılmış ızgaralar tasarlama esnekliği sağlar.

2. Duyarlılık için optimize edin

Tuval ölçeklendirme ve özelleştirilebilir kesme noktaları kullanarak, ızgaralarınızın her cihazda kusursuz görünmesini sağlayabilirsiniz. Masaüstü, tablet ve mobil cihazlara nasıl uyum sağladıklarını önizlemek için görsel oluşturucu içindeki düzenleri gerçek zamanlı olarak test edin. Kullanılabilirliği ve görsel çekiciliği korumak için belirli kesme noktalarında sütun genişliklerini, boşlukları veya yazı tipi boyutlarını ayarlayabilirsiniz. Divi 5'in özelleştirilebilir kesme noktalarıyla, büyük ekranlardan akıllı telefonlara kadar tüm kullanıcılar için kesintisiz bir deneyim sağlayabilirsiniz.

3. Verimlilik için modül gruplarını kullanın

Divi 5'teki modül grupları, ürün kartları veya ekip üyesi profilleri gibi benzer ızgara öğelerini gruplandırarak iş akışınızı kolaylaştırabilir. Birden fazla modül için aynı anda tutarlı stil - yazı tipleri, renkler, vb.) Uygulayabilir ve sayfalarda yeniden kullanabilirsiniz. Bu, fiyatlandırma tabloları veya SSS gibi ızgaralarda homojenliği korumak, tekrarlayan düzenlemeleri azaltmak ve cilalı bir görünüm sağlamak için bir zaman tasarrufudur.

4. Tasarım değişkenleriyle tutarlılığı koruyun

Renkler, yazı tipleri, boşluklar, bağlantılar ve daha fazlası üzerindeki kontrolü merkezileştirmek için tasarım değişkenlerini kullanın. Bu öğeleri tek bir yerde tanımlayarak, stilleri küresel olarak güncelleyebilirsiniz, hizmet ızgaralarını veya galeri düzenlerini görsel olarak uyumlu tutmak için mükemmeldir.

5. Gelişmiş birimlerle deney

Dinamik aralık ve boyutlandırma için VH, VW, REM, Calc () veya Clamp () gibi gelişmiş birimleri kullanarak ızgaralarınızın esnekliğini artırın. Bu birimler, ızgara elemanlarınızın görüntüleme portu boyutuna veya yazı tipi ayarlarına göre akıcı bir şekilde ölçeklenmesine izin vererek duyarlılığı ve görsel dengeyi sağlar.

Izgara bölümü düzenlerini ücretsiz indirin

Divi 5 içindeki ızgara düzenlerini kullanmaya başlamak ister misiniz? JSON dosyalarına erişmek için aşağıya 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 yaratıcılığı serbest bırakın

Divi 5'in, iç içe sıralardan öznitelik yönetimine kadar özellik paketi, tasarımcıların kolayca çok yönlü, duyarlı ve görsel olarak çarpıcı ızgara düzenleri oluşturmasına olanak tanır. Divi 5, özellik ızgaralarından etkileşimli portföylere kadar herhangi bir ızgara düzeni oluşturmak için benzersiz esneklik, hassasiyet ve verimlilik sağlar. İster bir e-ticaret web sitesi, ister bir sayfa veya bir SSS bölümü oluşturuyor olun, Divi 5'in modern arayüzü ve gelişmiş özellikleri yaratıcı vizyonunuzu hayata geçirmeyi basitleştirir.

Olasılıkları keşfetmeye hazır mısınız? Izgara düzenlerinizi oluşturmayı denemek için Divi 5 genel alfa'ya dalın. Daha önce de belirtildiği gibi, Divi 5 yeni web siteleri için uygundur, ancak en azından henüz değil, mevcut sitelerde kullanmanızı önermiyoruz.

Kreasyonlarınızı görmek isteriz. Benzersiz ızgara düzenlerinizi sosyal medyamızda veya aşağıdaki yorumlarımızda paylaşın.