Benzersiz bir hasarlı kutu tasarımı için sütun ve divi modülü nasıl sallanır
Modern web tasarımı hala ağları kırmakla ilgilidir. Bu, kutu düzeninin normal yapısına zarar veren bir konumda şaşırtıcı bir eleman ve tasarım aksanı ile yapılır. Tüm şaşırtıcı Divi düzenimizde bu hasarlı kafes tasarımlarının çoğunu uyguladığımızı görebilirsiniz. Genellikle, modülü sütunun veya satırın dışına taşımak gibi bir şey içerir, böylece modül kabın dışına uzanır veya sayfadaki diğer öğelerle örtüşme. Ancak gerçek sütunu taşımayı düşünmeyebilirsiniz. Bu öğreticide, benzersiz bir hasarlı ızgara tasarlamak için bir sütun ve divi modülünün nasıl şaşırtıcı hale getirileceğini göstereceğim. Yeni Divi sütun seçeneğiyle, içerdiği sütunu ve modülü kolayca hareket ettirebilirsiniz. Bu, yaratıcı hasarlı kafes tasarımı için benzersiz bir stile sahip modüller ve sütunlar tasarlamanıza olanak tanır.
Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarım örneğine bir bakış.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Temel fikir, divi dönüşüm özelliğinin içerdiği konum ve modül sütuna kullanımını içeren benzersiz bir hasarlı ızgara tasarımı için bir sütun ve divi modülünün nasıl şaşırtıcı hale getirilmesinin arkasındaki temel fikir ile açıklanmaktadır.
Eleman sendelendikten sonra, benzersiz bir kafes tasarımı oluşturan bir tasarım aksanı eklemek için tüm sütun tasarımı özelliklerine ve modüllerine sahipsiniz. Örneğin, kolonunuza kutunun gölgesi ve modülünüzden tamamen farklı olan kutunun arka planı ve gölgesi ile benzersiz bir arka plan (renk, resim vb.) Ekleyebilirsiniz. Şimdi temel fikre sahip olduktan sonra, başından beri bir tasarım yapalım. Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız: Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak bazı görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. İlk divi’de benzersiz bir hasarlı ızgara tasarımı yapmak için şaşırtıcı bir sütun ve modül, iki sütunlu yeni bir düzenli bölüm oluşturun. Daha sonra Sütun 1’de hareket etmek için davet modülünü ekleyin.
Başlığın başlığını “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, ardından başlığın başlığını aşağıdaki gibi değiştirin: Renk Arka Plan: #333333 Metin Eğimli: Sol Başlık Yazı Tipi: Acı Metin Başlık Boyutu: 50px Aralık Başlığı: 2px Ardından modül modül düğmesini güncelleyerek güncelleyin: Metin Boyutu Düğmesi: 16px Metin Renk Anahtarları: #333333 Renk Arka Plan Anahtar Düğmesi: Renk Düğmesi Sınırı: #FFFFFF RADIUS Düğmesi Sınırı Sınırı: 25px Mesafe Mektup Düğmesi: 2px Yazı Tipi Düğmesi: Raleway Ağırlığı Mektup Düğmesi: Kalınlık yazı tipi stili düğmesi: TT
Ardından, her sütunda aynı davet modülüne sahip olmak için modülü ve kopya macunu 2 sütununda kopyalayın. Sıra boşluklarını güncelleyin Şimdi tasarım için yer sağlamak için satırlara bazı üst ve alt kenar boşlukları ekleyelim. Marj:% 20 artış,% 20 aşağı Sütunun arka plan görüntüsünü ekleyin, göremesek de, her sütuna bir arka plan görüntüsü ekleyeceğiz. Modülümüzü çeviri dönüşümleriyle sütun kabının dışına taşıdıktan sonra görülecekler. Lütfen ve sütun 1 için ayarları açın ve bir arka plan görüntüsü ekleyin. Ardından sütun 2 için ayarları açın ve bir arka plan görüntüsü ekleyin. Kutunun gölgesini her sütuna ekleyin Sütun 1 ayarlarını açın ve aşağıdaki kutu gölgesini ekleyin: Gölge: Gölgenin Yatay Ekrana Bkz. Kutu: 0px Dikey Konum Gölge Kutusu: 0px Gölgelerin Dağılım Gücü Kutular: 100 Piksel Renk Gölgesi: RGBA (151,178,193,0.21) sonra aynı kutu gölgesini sütuna ekleyin. Sütun 1’deki kutunun gölge stilini kopyalamak ve ardından Sütun 2’deki kutunun gölge stiline eklemek için Sağ -Seçeneği kullanabilir.
Gölge Kutusu: Bkz. Yatay Korkunç Konum Becerileri Kutusu: 0px Dikey Konum Gölge Kutusu: Kare Dağıtımın 0px Mukavemeti: 100px Renk Renk Gölgesi: RGBA (151,178,193,0.21) Modül 2 Sütun 2’deki modülü hareket ettirmesi için aşağı doğru, aşağıdakileri güncelleyin: Dönüşüm X eksenini çevirin:% 60 Dönüşüm Y eksenini çevirin: -50% (masaüstü),% -10 (tablet) Kutunun Gölgesini Ekleyin Modül 2 Sonraki, Kutunun Gölgesini Sütun 2’deki Eylem Çağrısı Modülüne ekleyebiliriz. İçeriği karmaşıklaştırmak istemeyin. Gölge Kutusu: Bkz. Yatay Korkunç Konum Becerileri Kutusu: 0px Dikey Konum Gölge Kutusu: Kare Dağıtımın 0px Mukavemeti: 100px Renk Renk Gölgesi: RGBA (151,178,193,0.09) Tasarımı tamamlamak için satır kutusunun gölge çerçevesini ekleyin, arka plandaki çerçeve tasarımının bir öğesi olarak işlev gören satıra kutunun bir gölgesi ekleyelim. Gölge Kutusu: Bakınız Ekran Dikey Konum Yakalama Gölge Kutusu: 0px Gölge Renk: #97B2C1
Son Tasarım Şimdi son tasarımı kontrol edelim. Masaüstü Telefon Bu tasarımdan farklı bir serin tasarımla deney yapmak, yeni tasarımlar için modül, renk ve mesafe sayısını kolayca değiştirmenizi sağlamaktır. Ayrıca Divi sütunlarını ve modülleri çeşitli konumlarda da değiştirebilirsiniz. Modülle aynı boyutta bir sütun arka plan görüntüsü yapmak için modüle boşluk ekleyin, çünkü sütunun boyutu içerdiği içeriğin boyutuna göre belirlenir, modüle ne olursa olsun, sütunun boyutunu da artıracaktır. . Ve sütunumuz arka plan görüntüleri ile serpiştirildiğinden, bu, arka plan görüntüsünün dengeli bir tasarım için modül boyutuyla her zaman ölçeklenmesini sağlamanın kolay bir yoludur. Örneğin, davet modülünün Sütun 1’de hareket etmesi için ayarları açın ve dolguyu aşağıdaki gibi güncelleyin: Dolgu:% 20 üst,% 15 alt ve sütun arka plan 1 ölçeğinin modül boyutuna nasıl dikkat edin. Aynı şekilde daha fazla modül eklemek, modüle daha fazla dolgu eklemek, sütunun arka plan boyutunu artıracaktır, sütuna daha fazla modül eklemek de sütunun arka plan boyutunu artıracaktır. Örneğin, sütun 2’deki yinelenen modüller ve sütundaki iki modül için gereken alanı karşılamak için arka plan görüntüsünün nasıl genişlediğine dikkat edin. Ardından, iyi bir alternatif tasarım için 2 sütundaki üst modülü biraz sağa taşıyabilirsiniz. Sonuç bu. Renk değiştirme düzeni kendi renk şemanızla eşleştirmek istiyorsanız, bunu yapmanın iyi bir yolu, kutunun gölgesinin rengini güncellemektir.Sütun 1, Modül 1 ve Modül 2 için yarı saygın bir kutunun gölgesini güncellerken görünümün bir örneği. Son zihin Umarım bu öğretici size sütun ve divi modülünü nasıl değiştirebileceğiniz hakkında biraz ilham verir. Kendi benzersiz hasarlı ızgara tasarımınızı oluşturmak için.Teknik çok basittir, esas olarak sütunları ve modülleri değiştirmek için çeşitli dönüşüm çeviri özelliklerini ve benzersiz bir hasarlı tasarım yapmak için bazı kutu gölgelerini içerir.Daha fazla renk seçeneği keşfetmekten çekinmeyin ve tasarımın sizi nereye götüreceğini görmek için daha fazla modül sunmayın.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Temel fikir, divi dönüşüm özelliğinin içerdiği konum ve modül sütuna kullanımını içeren benzersiz bir hasarlı ızgara tasarımı için bir sütun ve divi modülünün nasıl şaşırtıcı hale getirilmesinin arkasındaki temel fikir ile açıklanmaktadır.
Eleman sendelendikten sonra, benzersiz bir kafes tasarımı oluşturan bir tasarım aksanı eklemek için tüm sütun tasarımı özelliklerine ve modüllerine sahipsiniz. Örneğin, kolonunuza kutunun gölgesi ve modülünüzden tamamen farklı olan kutunun arka planı ve gölgesi ile benzersiz bir arka plan (renk, resim vb.) Ekleyebilirsiniz. Şimdi temel fikre sahip olduktan sonra, başından beri bir tasarım yapalım. Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız: Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak bazı görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. İlk divi’de benzersiz bir hasarlı ızgara tasarımı yapmak için şaşırtıcı bir sütun ve modül, iki sütunlu yeni bir düzenli bölüm oluşturun. Daha sonra Sütun 1’de hareket etmek için davet modülünü ekleyin.
Başlığın başlığını “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, ardından başlığın başlığını aşağıdaki gibi değiştirin: Renk Arka Plan: #333333 Metin Eğimli: Sol Başlık Yazı Tipi: Acı Metin Başlık Boyutu: 50px Aralık Başlığı: 2px Ardından modül modül düğmesini güncelleyerek güncelleyin: Metin Boyutu Düğmesi: 16px Metin Renk Anahtarları: #333333 Renk Arka Plan Anahtar Düğmesi: Renk Düğmesi Sınırı: #FFFFFF RADIUS Düğmesi Sınırı Sınırı: 25px Mesafe Mektup Düğmesi: 2px Yazı Tipi Düğmesi: Raleway Ağırlığı Mektup Düğmesi: Kalınlık yazı tipi stili düğmesi: TT
Ardından, her sütunda aynı davet modülüne sahip olmak için modülü ve kopya macunu 2 sütununda kopyalayın. Sıra boşluklarını güncelleyin Şimdi tasarım için yer sağlamak için satırlara bazı üst ve alt kenar boşlukları ekleyelim. Marj:% 20 artış,% 20 aşağı Sütunun arka plan görüntüsünü ekleyin, göremesek de, her sütuna bir arka plan görüntüsü ekleyeceğiz. Modülümüzü çeviri dönüşümleriyle sütun kabının dışına taşıdıktan sonra görülecekler. Lütfen ve sütun 1 için ayarları açın ve bir arka plan görüntüsü ekleyin. Ardından sütun 2 için ayarları açın ve bir arka plan görüntüsü ekleyin. Kutunun gölgesini her sütuna ekleyin Sütun 1 ayarlarını açın ve aşağıdaki kutu gölgesini ekleyin: Gölge: Gölgenin Yatay Ekrana Bkz. Kutu: 0px Dikey Konum Gölge Kutusu: 0px Gölgelerin Dağılım Gücü Kutular: 100 Piksel Renk Gölgesi: RGBA (151,178,193,0.21) sonra aynı kutu gölgesini sütuna ekleyin. Sütun 1’deki kutunun gölge stilini kopyalamak ve ardından Sütun 2’deki kutunun gölge stiline eklemek için Sağ -Seçeneği kullanabilir.
Kutunun gölgesinin örtüşeceğini göreceksiniz. Yarı saygın kutunun gölge rengini kullanmak, üst üste binen bir etki yaratmaya yardımcı olacaktır. Bu, tasarımda kutunun gölgesini kullanmakla ilgili harika bir şey. Sınırdan farklı olarak, bir sınır gibi görünen ancak düzenin gerçek mesafesini etkilemeyen büyük bir gölge ekleyebilirsiniz.
Divi Standger Sütunu, bu noktada Tercüman Dönüşümü’nü kullanır, hasarlı ızgara tasarımını tamamlamak için sendelenmiş bir sütun ve modül yapmaya başlamaya hazırız. İlk olarak, sütunu sayfanın dış kenarına taşımamız gerekir. Sonra modülü daha sonra ortaya taşıyabiliriz. STAGARY 1 Sütun Sütun 1 ayarlarını açın ve aşağıdaki Dönüştürme Dönüştürme özelliğini ekleyin. Dönüşüm X Eksenini Çevirir:% 25 Dönüşüm Y -eksenini çevirin:% -25 (masaüstü),% -5 (tablet)
Gölge Kutusu: Bkz. Yatay Korkunç Konum Becerileri Kutusu: 0px Dikey Konum Gölge Kutusu: Kare Dağıtımın 0px Mukavemeti: 100px Renk Renk Gölgesi: RGBA (151,178,193,0.21) Modül 2 Sütun 2’deki modülü hareket ettirmesi için aşağı doğru, aşağıdakileri güncelleyin: Dönüşüm X eksenini çevirin:% 60 Dönüşüm Y eksenini çevirin: -50% (masaüstü),% -10 (tablet) Kutunun Gölgesini Ekleyin Modül 2 Sonraki, Kutunun Gölgesini Sütun 2’deki Eylem Çağrısı Modülüne ekleyebiliriz. İçeriği karmaşıklaştırmak istemeyin. Gölge Kutusu: Bkz. Yatay Korkunç Konum Becerileri Kutusu: 0px Dikey Konum Gölge Kutusu: Kare Dağıtımın 0px Mukavemeti: 100px Renk Renk Gölgesi: RGBA (151,178,193,0.09) Tasarımı tamamlamak için satır kutusunun gölge çerçevesini ekleyin, arka plandaki çerçeve tasarımının bir öğesi olarak işlev gören satıra kutunun bir gölgesi ekleyelim. Gölge Kutusu: Bakınız Ekran Dikey Konum Yakalama Gölge Kutusu: 0px Gölge Renk: #97B2C1
Son Tasarım Şimdi son tasarımı kontrol edelim. Masaüstü Telefon Bu tasarımdan farklı bir serin tasarımla deney yapmak, yeni tasarımlar için modül, renk ve mesafe sayısını kolayca değiştirmenizi sağlamaktır. Ayrıca Divi sütunlarını ve modülleri çeşitli konumlarda da değiştirebilirsiniz. Modülle aynı boyutta bir sütun arka plan görüntüsü yapmak için modüle boşluk ekleyin, çünkü sütunun boyutu içerdiği içeriğin boyutuna göre belirlenir, modüle ne olursa olsun, sütunun boyutunu da artıracaktır. . Ve sütunumuz arka plan görüntüleri ile serpiştirildiğinden, bu, arka plan görüntüsünün dengeli bir tasarım için modül boyutuyla her zaman ölçeklenmesini sağlamanın kolay bir yoludur. Örneğin, davet modülünün Sütun 1’de hareket etmesi için ayarları açın ve dolguyu aşağıdaki gibi güncelleyin: Dolgu:% 20 üst,% 15 alt ve sütun arka plan 1 ölçeğinin modül boyutuna nasıl dikkat edin. Aynı şekilde daha fazla modül eklemek, modüle daha fazla dolgu eklemek, sütunun arka plan boyutunu artıracaktır, sütuna daha fazla modül eklemek de sütunun arka plan boyutunu artıracaktır. Örneğin, sütun 2’deki yinelenen modüller ve sütundaki iki modül için gereken alanı karşılamak için arka plan görüntüsünün nasıl genişlediğine dikkat edin. Ardından, iyi bir alternatif tasarım için 2 sütundaki üst modülü biraz sağa taşıyabilirsiniz. Sonuç bu. Renk değiştirme düzeni kendi renk şemanızla eşleştirmek istiyorsanız, bunu yapmanın iyi bir yolu, kutunun gölgesinin rengini güncellemektir.Sütun 1, Modül 1 ve Modül 2 için yarı saygın bir kutunun gölgesini güncellerken görünümün bir örneği. Son zihin Umarım bu öğretici size sütun ve divi modülünü nasıl değiştirebileceğiniz hakkında biraz ilham verir. Kendi benzersiz hasarlı ızgara tasarımınızı oluşturmak için.Teknik çok basittir, esas olarak sütunları ve modülleri değiştirmek için çeşitli dönüşüm çeviri özelliklerini ve benzersiz bir hasarlı tasarım yapmak için bazı kutu gölgelerini içerir.Daha fazla renk seçeneği keşfetmekten çekinmeyin ve tasarımın sizi nereye götüreceğini görmek için daha fazla modül sunmayın.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
