Divi’ye yanıt veren beş sütun “vitrin” düzeni nasıl tasarlanır
İçeriğiniz için yeterli alana sahip beş sütunun düzenini tasarlamak zor olabilir. Ölçeğin tüm tarayıcı boyutlarında iyi olmasını sağlamak için daha büyük bir zorluktan bahsetmiyorum bile. Bu öğreticide, daha küçük ekran boyutlarında (tabletler ve akıllı telefonlar gibi) tasarımdan ödün vermeden beş sütun düzenine içerik yüklemek için gereken alanı nasıl en üst düzeye çıkaracağımı göstereceğim. Bu tasarım, ürün, hizmet ve projeleri sergilemek için idealdir. Biraz ilham için bazı bonus tasarım özellikleri bile sağlayacağım. Başlayalım. Gizlice göz atma
Duyarlı teknik, özel bir sıra genişliği ve beş duyarlı sütun düzeni yapmak için anahtar bir oluk genişliği kullanmak için kullanılır. Bu öğreticinin tasarımında,%89’a kadar özel genişliğe sahip beş sütun tutan bir satır vereceğim. Sonra, temel olarak sütun arasındaki herhangi bir marjı ortadan kaldıran 1. oluğun genişliğini ayarlayarak daha fazla yer açacağım. Bu tasarım için, çizgiyi tam genişliğe ayarlamak yerine% 89’luk özel bir genişlik kullanmak önemlidir, çünkü oluk genişliğini 1’e ayarlayabilir ve kenar boşluğunu satırınızın her iki tarafında tutabilirsiniz. Ne demek istediğimi göreceksin.Beş sütunun düzenine cevap vermek için her şeyi yanıtlamak için boşluk ve diğer anahtar başlık metnini kullanın. Ve VW’yi tüm mesafenizde kullanmada tutarlı olmak önemlidir. Bu, pencerenizin genişliğini ayarlarken elemanların kırılmasını veya atlamadan tüm tarayıcı boyutlarında şeylerin ölçeklendirilmesini sağlayacaktır. Metnin daha küçük bir tarayıcı penceresinde yeni bir satıra girmemesi için başlık metni için VW uzun birimini kullanmak da anahtar olacaktır. Ancak, metin başlığı için, çok fazla metin barındırmak için tabletler ve akıllı telefonlar için PX birimleri ayarlamamız gerekir. Bölüm 1: Bu öğretici için ihtiyacınız olanı başlatmak Divi temasıdır. Visual Builder’ı mimarlık şirketi ana sayfasının düzeni ile birlikte kullanacağız. Başlamak için yeni bir sayfa oluşturun, sayfa başlığınızı verin ve Visual Builder kullanın. “Önceden Yapılmış Düzen Seç” seçeneğini seçin. Kütüphaneden yükleme açılır penceresinde, İç Tasarım Düzeni paketini seçin ve ardından mimarlık şirketinin ana sayfalarının düzenini sayfanıza takın.
Bölüm 2: Başlık bölümünü bir başlangıç olarak yapın, ikinci bölümün üç açıklama içeren bir kısmı. Bu tasarım için iki parçaya ihtiyacımız var çünkü üstte iki hedef hizmet verecek. İlk olarak, parçamızın başlığını aşağıda tutacaktır. İkincisi, bu bir bölücü kullanarak benzersiz bir tasarım eklememizi sağlayacaktır. Devam edelim. Orijinal kısımda (kopya değil), üç açıklamayı silin ve satır sütununun yapısını bir sütuna dönüştürün.
Ardından, düzenin altına son parçaya doğru kaydırın ve metin modülünü sol sütundaki kopyalayın. Ardından, yeni oluşturduğunuz sütunun bir satırına yapıştırın ve H2 başlığının altındaki tüm metin içeriğini silin, böylece ” Bir şey “kalır. Bölüm 3: Beş sütunun düzeni için bulanıklığı ayarlayın Şimdi 3 sütun satırındaki üç orijinal açıklamamızla çoğalttığımız kısmı ziyaret etme zamanı. İlk olarak, satırın yapısını beş sütunun düzenine değiştirelim. İlk sütunda bulanıklık modülünü ayarlayın ve ardından bir simge olarak kullanılan görüntüyü silin. Ardından ilk sütunda bulanıklık modülünü çoğaltın. Bu tasarım için sütun başına iki açıklama kullanacağız çünkü arka plan görüntülerimizi tutmak için bir açıklamaya ihtiyacımız var. İlk sütunda üst açıklama ayarlarını açın ve içerik kutusundaki içerik metnini silin. Üst bulanık modülüne arka plan ve gradyan görüntüleri ekleyin, ardından arka plan görüntüsünün aynı açıklamasını verin ve görüntüyü aşağıdaki gibi kaplamak için degradeler ekleyin: Sol gradyan arka planının arka plan görüntüsünü ekleyin: RGBA (255,255,255.0) Sağ renk arka plan gradyanı: RGBA (RGBA (RGBA ( 18,18,18,0,65) Başlangıç Pozisyonu:% 50 Gradyanı arka planın üzerine yerleştirin Görüntü: Evet Başlık metnimizin daha parlak bir arka plan görüntüsü ile okunmasına yardımcı olmak için gradyanlara ihtiyaç vardır. Başlık ve alan metni için VW ünitesini kullanın Ardından tasarım sekmesi ayarlarını aşağıdaki gibi güncelleyin: Metin başlığı boyutu: 2.7vw (masaüstü), 46px (tablet), 36px (akıllı telefon) Aralık harfleri başlık: -3px özel kenar boşluğu: sol 1.5VW, sağ 1.5vw dolgu özel: üst 35VW, 2VW’nin altında, sol 1vw, sağ 1vw ayarları kaydedin. Özel 35VW üzerinde dolgu, benzersiz bir uzun dikey görüntü tasarımı yaratan kişidir. Başlık metnine, metnin farklı bir tarayıcı genişliğinde tutarlı bir şekilde ölçeklenmesini sağlamak için 2.7VW değeri verilir. Daha sonra satırımıza daha fazla mesafe ekledikten sonra mesafenin geri kalanı daha mantıklı olacaktır. Alt açıklamayı ayarlayın, ardından ilk sütunda aşağıdaki ikinci açıklama modülü ayarlarını açın ve başlık metnini silin. Ardından aşağıdakileri güncelleyin: Tesviye Gövde Metni: Sol Renk Gövde Metni: #666666 Dolgu Özel: Top 2VW, Alt 2VW, Sol 2VW, Sağ 2VW
Şimdi ilk sütunumuzda tasarlanmış iki açıklamamız var. Her ikisini de kopyalayın ve kalan sütunu yapıştırın. Önce orijinal açıklama modülünü önce Sütun 2 ve 3’teki silmeniz gerekir. Şimdi tasarımınız böyle görünecek.
Bölüm 4: Bölümün geçerli ayarlarını ayarlayın Ayarlarımızı, beyaz bir arka plana ve altta sıralarımızın üst üste gelmesini sağlayacak bir kutunun gölgesine sahip olacak şekilde güncelleyelim. Arka plan rengi: #ffffff dolgu özel: üst varsayılan, alt 5VW, sol varsayılan, sağ varsayılan gölge kutusu: Ekrana bakınız dikey konum gölge kutusu: -200px bulanık Güç Gölge Kutusu: 0px Gölge Renk: #12121212121212 Bölüm 5: Geçerli satır ayarlarını ayarlayın, satırımıza dönelim ve aşağıdaki ayarları güncelleyelim: Arka Plan Görüntü: #FFFFFFF Hat Hizalaması: Merkezi Özel Genişlik:% 89 Oluklu Genişlik: 1 Özel Kenar: -10VW Palding Özel: Üst 3VW’de , 3VW sol 1.5vw, sağ 1.5VW Gölge Kutusu: Ekran Ekran Gücü Gölge Kutusu: 80px Bir öğreticide daha önce belirtildiği gibi, özel genişlik ve oluk genişliği, beş sütunun düzeni için ihtiyacımız olan içerik alanını yapmak için çok önemlidir Bu noktada, tasarımın temel yapısı tamamlanmıştır. İşte şimdiye kadar bir tasarım ekranı. Bölüm 6: Son Touch’ı Ekleyin Şimdi tamamlamak için birkaç tasarım daha ekleyebiliriz. Şaşırtıcı bir şekilde ilk bulanıklık, bazı dolguları azaltarak açıklamanın arka plan görüntüsünün yüksekliğini ayarlayalım. Üst açıklama modülünün ayarlarını ikinci sırada açın ve dolguyu aşağıdaki gibi güncelleyin: Özel dolgu: 28VW üst ve üçüncü sütunda üst bulanıklık için üst dolguyu 30VW olarak değiştirin. Beş sütununa doku eklemek için bölücü ekleyin, havalı tasarım tekniklerinden biri, üst bölücüyü beş sütunumuzla doğrudan bölümün üstüne eklemektir. Bölücünün arka planı, yukarıdakilerle örtüşmesine rağmen beş sütun satırının arka planında görünecektir. Bunu yapmak için, “Bir şey inşa edelim” başlığını içeren bölüme gidin ve bölücüyü aşağıdaki gibi verin:Bölücünün rengi,%15 opaklığı olan parçanın arka planıyla aynı renkte olduğundan, bölücü üstte görünmez, ancak altta ve üst üste binen sırada görünür hale gelir. Ve Gölgenin Gölgesini Verdiğimiz için, bu benzersiz bir tasarım yaratır. Tasarımın farklı bir görüntü gibi olduğu hakkında daha iyi fikirler elde etmek için bazı arka plan görüntülerine devam ettim ve güncelledim. İşte son tasarım. Beş sütunun düzeni ile ilgili en güzel şeylerden biri, tablette iki iyi sütunun düzenini almanızdır. Ve bu bir akıllı telefondaki görünüm. Son zihnim Divi’nin duyarlı düzen yapmak için gücünü keşfetmeyi sever. Beş sütun düzeninin zorluğu, içerik alanınızı tüm tarayıcı boyutlarında iyi taramak için doğru bir şekilde ayarlamak için doğru tekniği kullanmadığınız sürece, içerik için çok fazla alan olmamasıdır. Umarım bu tasarım, bir sonraki projeniz için beş sütun düzeninin olası kullanımını sunmak için kullanışlıdır. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
