Benzersiz Kırık Izgara Tasarımları için Divi Sütunları ve Modülleri Nasıl Stagger Yapılır
Yayınlanan: 2019-07-10Modern web tasarımı hala ızgarayı kırmakla ilgili. Bu, bir ızgara düzeninin normal yapısını bozan konumlardaki öğeleri ve tasarım vurgularını şaşırtarak yapılır. Muhteşem Divi düzenlerimizde bu kırık ızgara tasarımlarının çoğunu uyguladığımızı görebilirsiniz. Genellikle bu, modülleri bir sütunun veya satırın dışına taşımak gibi bir şeyi içerir, böylece bir kapsayıcının dışına uzanırlar veya sayfadaki diğer öğelerle örtüşürler. Ancak asıl sütunu taşımayı düşünmemiş olabilirsiniz.
Bu öğreticide, benzersiz kırık ızgara tasarımları için Divi sütunlarını ve modüllerini nasıl kademeli olarak düzenleyeceğinizi göstereceğim. Divi'nin yeni sütun seçenekleri ile sütunları ve içerdikleri modülleri kolayca hareket ettirebilirsiniz. Bu, yaratıcı bir kırık ızgara tasarımı için hem modülü hem de sütunu benzersiz stillerle tasarlamanıza olanak tanır.
Başlayalım!
Gizlice Bakış
İşte bu eğitimde oluşturacağımız tasarım örneklerine hızlı bir bakış.
Stagger Divi Sütunları ve Modül Düzenini ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Temel Fikir Açıklandı
Benzersiz kırık ızgara tasarımları için Divi sütunlarının ve modüllerinin nasıl kademelendirileceğinin ardındaki temel fikir, Divi'nin sütunları ve içerdikleri modülleri konumlandırmak için transform translate özelliğini kullanmayı içerir.
Öğeler kademelendirildikten sonra, benzersiz kırık ızgara tasarımları oluşturan tasarım vurguları eklemek için bir sütunun ve bir modülün tüm tasarım özelliklerine sahip olursunuz.
Örneğin, sütununuza bir kutu gölgesi ve modülünüze tamamen farklı bir arka plan ve kutu gölgesi olan benzersiz bir arka plan (renk, görüntü vb.) ekleyebilirsiniz.
Artık temel fikre sahip olduğunuza göre, tasarımı sıfırdan oluşturalım.
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Sahte içerik için kullanılacak birkaç Görsel
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Benzersiz Bir Kırık Izgara Tasarımı Oluşturmak için Şaşırtıcı Sütunlar ve Modüller
İlk olarak, iki sütunlu bir satıra sahip yeni bir normal bölüm oluşturun.
Ardından, sütun 1'e bir eylem çağrısı modülü ekleyin.
Başlık metnini “Divi Modül” veya seçtiğiniz başka bir kısa başlık olarak değiştirin.
Ardından modülü koyu bir arka plan rengiyle güncelleyin ve ardından Başlık metnini aşağıdaki gibi değiştirin:
Arka Plan Rengi: #333333
Metin Hizalama: sol
Başlık Yazı Tipi: acı
Başlık Metin boyutu: 50px
Başlık Harf Aralığı: 2px
Ardından, harekete geçirme modülü düğmesini aşağıdaki gibi güncelleyin:
Düğme Metin Boyutu: 16px
Düğme Metin Rengi: #333333
Düğme Arka Plan Rengi:
Düğme Kenar Rengi: #ffffff
Düğme Sınır Yarıçapı: 25 piksel
Düğme Harf Aralığı: 2px
Düğme Yazı Tipi: Raleway
Düğme Yazı Ağırlığı: Kalın
Düğme Yazı Tipi Stili: TT
Ardından, modülü kopyalayın ve kopyayı 2. sütuna yapıştırın, böylece her sütunda aynı harekete geçirici mesaj modülüne sahip olursunuz.
Satır Aralığını Güncelle
Şimdi tasarıma yer açmak için satıra biraz üst ve alt kenar boşluğu ekleyelim.
Marj: %20 üst, %20 alt
Sütun Arka Plan Resimleri Ekle
Onları henüz göremeyecek olsak da, sütunların her birine arka plan resimleri ekleyeceğiz. Modülümüzü transform translate ile sütun kabının dışına taşıdığımızda görünür hale gelecekler.
Devam edin ve 1. sütun için ayarları açın ve bir arka plan resmi ekleyin.
Ardından 2. sütun için ayarları açın ve bir arka plan resmi ekleyin.
Her sütuna bir Kutu Gölgesi ekleyin
Sütun 1 ayarlarını açın ve aşağıdaki kutu gölgesini ekleyin:
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Yayılma Gücü: 100px
Gölge Rengi: rgba(151,178,193,0.21)
Ardından, aynı kutu gölge stilini 2. sütuna ekleyin. İşleri hızlandırmak için, 1. sütundaki kutu gölge stillerini kopyalamak için sağ tıklama seçeneklerini kullanabilir ve ardından bunları 2. sütundaki kutu gölge stillerine yapıştırabilirsiniz.
Kutu gölgelerinin üst üste geleceğini fark edeceksiniz. Yarı saydam bir kutu gölge rengi kullanmak, serin bir örtüşen efekt oluşturmaya yardımcı olacaktır. Tasarımda kutu gölgeleri kullanmanın harika yanı budur. Kenarlıklardan farklı olarak, kenarlık gibi görünen büyük gölgeler ekleyebilirsiniz, ancak bunlar mizanpajın gerçek aralığını etkilemez.
Dönüştürme Çevirisini Kullanan Divi Sütunları Stagger
Bu noktada, kırık ızgara tasarımını tamamlamak için kolonları ve modülleri kademelendirmeye başlamaya hazırız. İlk olarak, sütunları sayfanın dış kenarına taşımamız gerekiyor. Daha sonra modülleri daha sonra merkeze doğru hareket ettirebiliriz.
Aşamalı Sütun 1
Sütun 1 ayarını açın ve aşağıdaki transform translate özelliğini ekleyin.
Dönüştür X eksenini çevir: %25
Dönüştür Çevir Y ekseni: -%25 (masaüstü), -%5 (tablet)
Aşamalı Sütun 2
2. sütun için aşağıdaki transform translate özelliğini ekleyin.
Dönüştür X eksenini çevir: -%25
Dönüştür Y eksenini çevir: %25 (masaüstü), %5 (tablet)
Dönüştürme Çevirini Kullanarak Modülleri Aşamalandırın
Artık modüllerimizi sütun kabının dışına taşıyarak kademelendirmeye hazırız. Bu, sütun arka plan görüntüsünü ortaya çıkaracak ve üst üste binen ek bir tasarım öğesi için modüle başka bir kutu gölgesi eklememize izin verecektir.
Aşama Modülü 1
Sütun 1'deki harekete geçirici mesaj modülünün ayarlarını açın ve aşağıdakileri güncelleyin:
Dönüştür X eksenini çevir: -%60
Dönüştür Y eksenini çevir: %50 (masaüstü), %10 (tablet)
Modül 1'e bir kutu gölgesi ekleyin
Ardından, sütun 1'deki harekete geçirici mesaj modülüne aşağıdaki kutu gölgesini ekleyin:
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Yayılma Gücü: 100px
Gölge Rengi: rgba(151,178,193,0.21)
Aşama Modülü 2
Modülü 2. sütunda taşımak için aşağıdakileri güncelleyin:
Dönüştür X eksenini çevir: %60
Dönüştür Y eksenini çevir: -%50 (masaüstü), -%10 (tablet)
Modül 2'ye bir kutu gölgesi ekleyin
Ardından, 2. sütundaki harekete geçirici mesaj modülüne bir kutu gölgesi ekleyebiliriz. Bu kutu gölgesini neredeyse tamamen şeffaf hale getirmemiz gerekiyor çünkü modül 1 ile örtüşecek ve içeriğin okunmasını zorlaştırmak istemiyoruz.
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Yayılma Gücü: 100px
Gölge Rengi: rgba(151,178,193,0.09)
Bir Satır Kutusu Gölge Çerçevesi Ekle
Tasarımı tamamlamak için arka planda oturan çerçeve tasarım öğesi görevi gören satıra bir kutu gölgesi ekleyelim.
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Gölge Rengi: #97b2c1
Son tasarım
Şimdi son tasarımı kontrol edelim.
masaüstü
Tablet
Telefon
Farklı Tasarımlarla Denemeler
Bu tasarımın güzel yanı, yeni tasarımlar için modül sayısını, renkleri ve boşlukları kolayca değiştirebilmenize izin vermesidir. Ayrıca Divi sütunlarını ve modüllerini çeşitli konumlarda da kademelendirebilirsiniz.
Modüle eşit boyutta bir sütun arka plan görüntüsü oluşturmak için modüle boşluk ekleme
Sütun boyutu, içerdiği içeriğin boyutuna göre belirlendiğinden, modüle ekleyeceğiniz alan ne olursa olsun, sütun boyutunu da artıracaktır. Ve sütunumuz bir arka plan görüntüsü ile kademeli olduğundan, bu, dengeli bir tasarım için arka plan görüntüsünün her zaman modülün boyutuna göre ölçeklenmesini sağlamanın kolay bir yoludur.
Örneğin, 1. sütundaki harekete geçirici mesaj modülünün ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:
Dolgu: %20 üst, %15 alt
Ve sütun 1 arka plan görüntüsünün modülün boyutuna göre nasıl ölçeklendiğine dikkat edin.
Daha fazla modül ekleme
Aynı şekilde, modüle daha fazla dolgu eklemek sütun arka planının boyutunu artırır, sütuna daha fazla modül eklemek de sütun arka planının boyutunu artırır.
Örneğin, 2. sütundaki modülü çoğaltın ve arka plan görüntüsünün sütundaki iki modül için gereken alanı barındırmak üzere nasıl genişlediğine dikkat edin.
Ardından, güzel bir alternatif tasarım için sütun 2'deki üst modülü biraz sağa hareket ettirebilirsiniz.
İşte sonuç.
Renkleri Değiştirme
Düzeni kendi renk düzeninizle eşleştirmek istiyorsanız, bunu yapmanın harika bir yolu kutu gölge renklerini güncellemektir.
Sütun 1, modül 1 ve modül 2 için yarı saydam kutu gölgelerini güncellerken nasıl görüneceğine dair bir örnek.
Son düşünceler
Umarım bu eğitim size kendi benzersiz kırık ızgara tasarımlarınızı oluşturmak için Divi sütunlarını ve modüllerini nasıl şaşırtabileceğiniz konusunda biraz ilham vermiştir. Teknik gerçekten basittir, esas olarak sütunları ve modülleri kademelendirmek için birkaç dönüştürme çevirme özelliği ve benzersiz kırık tasarım oluşturmak için bazı kutu gölgeleri içerir. Daha fazla renk seçeneğini keşfetmekten ve tasarımın sizi nereye götürebileceğini görmek için daha fazla modül sunmaktan çekinmeyin.
Yorumlarda sizden haber bekliyorum.
Şerefe!