Sıra 6 sütunları ile nasıl yaratıcı olunur & amp;Divi ViewPort Birimi
Divi sütun yapısındaki varyasyonlar, zihninizdeki herhangi bir tasarım oluşturmanızı sağlar. Ve sütun yapısını orijinal formunda kullanmak en kolay şey olsa da, 6 sütun satırındaki tasarım öğelerini ViewPort ünitesiyle birleştirerek daha da ileri gidebilirsiniz. Örneğin yapabileceğiniz şeylerden biri kolajdır. Bir resim düzenleme yazılımı kullanmanıza gerek yok! Ayrıca, her görüntünün ayrı bir ışık kutusunda açılmasına da izin verebilirsiniz. Bu yazıda, yalnızca varsayılan Divi seçeneğini kullanarak yukarıdakilerin hepsini nasıl yapacağınızı göstereceğiz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım.
Her modüle manuel olarak (ViewPort ünitesini kullanarak) kenar boşlukları ve özel pedler ekleyebilmemiz için parçalar, satırlar ve sütunlar arasındaki tüm olukları sileriz.
ViewPort birimi, tasarım öğesinin konumunun tüm masaüstü ekran boyutlarında aynı kalmasını sağlar
Genel kolaj tasarımına uyacak şekilde her tasarım öğesi için mesafe ayarlarını tek tek ayarlayacağız
Divi’deki duyarlı seçenek sayesinde, yukarıda belirtilen ayarların tabletler ve cep telefonları için geçerli olmamasını sağlayabiliriz.
Arka uç perspektifinin nihai sonucunda bu arka planda yaratıcı olmaya başlayalım: Yapmanız gereken ilk şeyin yeni bir bölümünü ekleyin Yeni bir sayfa oluşturmak veya mevcut bir sayfayı açmak ve ona normal bir bölüm eklemektir. Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin. Bu, bu öğreticide önemli bir adımdır. Parçalar, satırlar ve modüller arasındaki tüm varsayılan kenar boşluğu ve dolgu değerlerini kaldırarak, görünüm portu birimini kullanarak her tasarım öğesine manuel olarak boşluk ekleyebiliriz. Bu satırı geniş hale getirin: Evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe Sıraya da sol ve sağ yatak özel rulmanları ekleyin. Sol dolgu: 6.5vw
Sağ dolgu: 6.5vw
Başlık metin modülünü sütun 6’ya ekleyin, içerikleri ekleyin Modül eklemeye başlama zamanı! Sütun 6’ya metin modülünün başlığını ekleyerek başlayacağız. 2 kopyadan birkaç başlık ekleyin. Başlık Metin Ayarları Ardından, Tasarım sekmesini açın ve modül başlık metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Battambang
Başlık 2 yazı tipi ağırlığı: kalın
Başlık 2 Metin Boyutu: 4.2VW (Masaüstü), 10VW (Tablet), 8VW (Telefon)
Başlık alanı 2 harf: -1px
Mesafe Bu satırın satırın 6. ve 5. sütunlarıyla örtüşmesini sağlamak için yanına bazı özel boşluk değerleri ekleyin. Üst kenar boşluğu: 10vw
Sol kenar boşluğu: -8vw (masaüstü), 0vw (tablet ve cep telefonu)
Sağ kenar boşluğu: -50vw (tablet ve cep telefonu)
Açıklama Metin Modülünü Sütun 6’ya Ekleyin Sütun 6’da ihtiyacımız olan bir sonraki modülün içeriğini ekleyin Açıklama metin modülüdür. Biraz seçim içeriği ekleyin. Mesafe Ardından, boşluk ayarlarını açın ve bu modülü de sola itin. Üst Marj: 2VW
Sol kenar boşluğu: -8vw (masaüstü), 0vw (tablet ve cep telefonu)
Sağ kenar boşluğu: -50vw (tablet), -3vw (telefon)
Düğme modülünü sütun 6’ya ekleyin Bir sonraki ve son olarak gerekli modülün 6. sütundaki düğme modülü olduğunu ekleyin. Birkaç kopya ekleyin. Düğmeyi ayarlayın Ardından, Tasarım sekmesini açın ve düğme ayarlarını değiştirin. Düğme için özel stili kullanın: Evet Metin Renk Düğmesi: #fffffff
Sınır sınır genişliği: 1px
Düğme Sınır Rengi: #000000
Sınır sınır yarıçapı: 0px
Mektup Mesafe Düğmesi: -2px
Mesafe ve tekrar, bu modülün boşluk ayarlarında özel bir marj değeri kullanarak 5. ve 6. sütunla örtüşmemiz gerekir.
Üst kenar: 2VW (masaüstü), 5VW (tablet), 10vw (telefon) Sol kenar boşluğu: -8vw (masaüstü), 0vw (tablet ve cep telefonu)
Sağ kenar boşluğu: -50vw (tablet ve cep telefonu)
Sol dolgu: 30px
Sağ dolgu: 30px
Tüm farklı görüntü modüllerini eklemeye başlamanın zamanının Sütun 1 boyutuna modül Şekil #1 ekleyin! Yeniden yarattığımız örnek, yalnızca 880 piksel genişliği ve 1320 yüksekliğinde görüntüler kullanıyorsanız% 100 duyarlıdır. Bu nedenle, başlangıçtan itibaren aynı örneği yapmak istiyorsanız, belirli bir boyut koleksiyonuna sahip görüntüleri kullanmalısınız. Ancak, bu işlevi her türlü görüntü boyutu için yapmak istiyorsanız, her bir görüntü modülünün görünüm portu birimini genel tasarıma uyacak şekilde manuel olarak ayarlamanız gerekir. İlk üç sütunundaki görüntüleri yükleme iki görüntü modülü sayılır. İlk görüntü modülünü sütun 1’e ekleyin.
Mesafe Ardından, boşluk ayarlarını açın ve görünüm boyutunu görüntüleme ünitesini kullanarak artırın. Üst kenar: 0.5VW (sadece tablet ve cep telefonu) Alt kenar boşluğu: 0.5VW (sadece tablet ve cep telefonu)
Sol kenar boşluğu: -5vw (masaüstü), 0.5vw (tablet ve telefon)
Sağ kenar boşluğu: -2vw (masaüstü), 0.5vw (tablet ve telefon)
Sütun 1’i Yükle Görüntüleri ve Sütun 1’deki ikinci görüntü modülünü yükle modül Şekil #2’yi ekleyin.
Mesafe ve uzay alanı ayarlarının değiştirilmesi. Üst kenar: 0.4VW (masaüstü), 0.5VW (Tablet ve Telefon) Alt marj: 0.5VW (sadece tablet ve cep telefonu) Sol kenar boşluğu: -8.1vw (masaüstü), 0.5vw (tablet ve telefon)
Sağ kenar boşluğu: 3.7vw (masaüstü), 0.5vw (tablet ve telefon)
Sol dolgu: 3VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ dolgu: 3VW (masaüstü), 0vw (tablet ve cep telefonu)
Modül Şekil #3 Sütun 2’ye İkinci Sütuna Yükle! Yeni bir resim modülü ekleyin ve resim yükleyin.
Görüntü boyutunu azaltmak için boşluk ayarlarında özel bir marj ve dolgu değeri kullanarak daha fazla mesafe.
Üst kenar: 0.5VW (sadece tablet ve cep telefonu) Alt kenar boşluğu: 0.5VW (sadece tablet ve cep telefonu) Sol kenar boşluğu: -0.5vw (masaüstü), 0.5vw (tablet ve telefon)
Sağ kenar boşluğu: 0.5vw (sadece tablet ve cep telefonu)
Sol dolgu: 3VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ dolgu: 3VW (masaüstü), 0vw (tablet ve cep telefonu)
Modül Şekil #4 Sütun 2’ye Görüntü Yükle İkinci Görüntü Modülünü Sütun 2’ye de ekleyin.
Mesafe ve değişen alan ayarları da burada.
Üst kenar boşluğu: 0.5vw Alt kenar boşluğu: 0.5VW (sadece tablet ve cep telefonu) Sol kenar boşluğu: -0.5vw (masaüstü), 0.5vw (tablet ve telefon)
Sağ kenar boşluğu: 0.5vw (sadece tablet ve cep telefonu)
Sol dolgu: 3VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ dolgu: 3VW (masaüstü), 0vw (tablet ve cep telefonu)
Modül Şekil #5’i Sütun 3’e ekleyin Görüntüleri bir sonraki ve son sütuna yükleyin. İlk görüntü modülünü ekleyin.
Mesafe Bir sonraki görüntü modülünden mesafe ayarlarını değiştirin. Bu değerler, aşağıdaki basılı ekranda görebileceğiniz gibi görüntünün boyutunu artırmaya yardımcı olacaktır.
Üst kenar: 0.5VW (sadece tablet ve cep telefonu) Alt kenar boşluğu: 0.5VW (sadece tablet ve cep telefonu) Sol kenar boşluğu: -2.5vw (masaüstü), 0.5vw (tablet ve telefon) Sağ kenar boşluğu: -17.5vw (masaüstü), 0.5vw (tablet ve telefon)
Modül Şekil #6 Sütun 3’e Ekle Görüntü Yükle Bir Sonraki ve Son olarak Sütun 3’e ekleyin.
Uzaklık ve özel marj değerleri ekleyerek tüm pozisyonları değiştirin. Duyarlı amaçlar için, bu modülü sütun 2 değil, sütun 3’e ekledik.
Üst kenar: -26.7vw (masaüstü), 0.5vw (tablet ve telefon)
Alt kenar boşluğu: 0.5VW (sadece tablet ve cep telefonu) Sol kenar boşluğu: -20.5vw (masaüstü), 0.5vw (tablet ve cep telefonu) Sağ kenar boşluğu: 17.3vw (masaüstü), 0.5vw (tablet ve telefon)
Modül Görüntüsü #1 için LightBox’ı Etkinleştirin Tüm görüntüleri yerine getirdikten sonra, ilk görüntü modülü ayarlarında LightBox seçeneğine devam edebilir ve etkinleştirebilirsiniz.
LightBox’ta Aç: Evet
LightBox seçeneğini kopyalayın ve ilk görüntü modülü için LightBox seçeneğini etkinleştirdikten sonra bölümdeki tüm resimlere uygulayın, bu seçeneği kopyalayıp o bölümdeki diğer tüm görüntü modüllerine ekleyebilirsiniz.
Limit yarıçapını modüle ekleyin Şekil #1 İlk görüntü modülüne de birkaç yuvarlak açı ekleyin. Sınır yarıçapını bölümdeki tüm görüntülere genişletin ve bu yuvarlak açıyı zamandan tasarruf etmek için bölümdeki tüm görüntü modüllerine genişletin.
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Yeni bir 6 divi sütunu ile olan fırsatın son zihni sınırsız. Bu yazıda, 6 sütun ve viewport birimlerini kullanarak nasıl şaşırtıcı ve benzersiz kolajlar oluşturacağınızı gösterdik. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
