Divi dönüşüm seçeneğiyle arka plan şekli oluşturmak için bölücü modülünü kullanın
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimi’nin bir parçası olarak, Divi Dönüşüm seçeneği ve Yasadışı Düzen Paketi ile bir arka plan şekli oluşturmak için bölücü modülünün nasıl kullanılacağını göstereceğiz. Bölme modülü çok esnektir ve sayfanızın genel tasarımını gerçekten geliştirebilir. Özellikle Paralegal Düzen Paketiyle eşleşen birkaç örneği yeniden oluşturmamıza rağmen, bu tekniği Divi ile oluşturduğunuz tüm web siteleri için kullanabilirsiniz.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Divisor göster: evet Arka plan rengi Düzen paketinin renk paletinin rengini bölücü için arka plan rengi olarak kullanacağız.
Arka Plan Rengi: #D94144 RENK O zaman, tasarım sekmesine gidip bölücünün rengini de değiştireceğiz. Renk: #f3f1f2
Stil stil ayarlarına geçer ve bölücü stilini değiştirir. Bölücü stili:
Yapıştırıcılar da boyut ayarlarıyla oynar. Bu bölücü modülünün istediğiniz gibi görünmesini sağlayabilirsiniz, ancak bu yayının önizlemesinde tam olarak gösterildiği gibi görünmek istiyorsanız, aşağıdaki ayarları kullanın: Bölücü ağırlığı: 4px
Yükseklik: 0px
Şimdi mesafe, birkaç marj değeri ve özel dolgu kullanarak bölücü modülünün konumunu ve boyutunu değiştireceğiz. Her şeyin duyarlı kalması için değeri farklı ekran boyutlarına göre değiştirdiğinizden emin olun. Üst kenar: -30VW (masaüstü), -100VW (tablet ve cep telefonu)
Sol kenar boşluğu: -100vw (masaüstü), -138vw (tablet), -300vw (telefon)
Üst dolgu: 0px
Dolgu Alt: 1.3VW (masaüstü), 2.2vw (tablet), 3VW (Telefon)
Zamanın dönüşümünü değiştirmek, modülü değiştirme zamanıdır! Dönüşüm ayarında yapacağımız ilk şey, aşağıdaki dönüşüm ölçeği değerini ekleyerek bölücü boyutunu artırmaktır: Aşağıda:% 153
Doğru:% 500
Değiştirme dönüşümüz ayrıca Dönüşüm Rotary ayarlarında bölücü modülünü de oynayacaktır. Gördüğünüz gibi, bölücü modülü, bu öğreticinin başında eklediğimiz bir CSS kod hattı sayesinde parçayı aşmaz. Kiri: 348 derajat
Buat Ulang Contoh #2 Bagian Meluap Lanjut ke contoh berikutnya! Sekali lagi, kami ingin memastikan tidak ada yang melebihi wadah bagian dengan menambahkan satu baris kode CSS ke elemen utama bagian. Taşma: gizli; Sütun yapısının sonuna yeni bir satır ekleyin. Aşağıdaki sütun yapısını kullanarak bölümün sonuna yeni bir satır ekleyerek devam edin: Satır tarafından alınan boyutu azaltmak için mesafe, üst ve alt dolguyu sileceğiz Alan ayarlarında varsayılan. Üst dolgu: 0px Aşağıda dolgu: 0px
Görünürlük Bölen Modülünü ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet Arka plan rengimiz, bir kez daha, arka plan rengi olarak düzen paketinin renk paletindeki renklerden birini kullanıyor.
Arka plan rengi: #D94144 Renk tasarım sekmesine geçer ve bölücü rengini de değiştirir.
Renk: #f3f1f2 Yapıştırıcımız da boyut ayarlarıyla oynandı.
Bölücü ağırlığı: 10 piksel Yükseklik: 0px
Mesafe ve çeşitli ekran boyutlarında değiştireceğimiz bazı özel dolguları kullanarak tam olarak istediğimizi yapacağız.
Üst Dolgu: 2VW
Zamanın dönüşümünü değiştirmek dönüşme zamanıdır! Yapacağımız ilk şey bölücü modülünü dağıtmaktır. Bunu bölümün başında veya sonunda boşluk olmadığından emin olmak için yapıyoruz. Bölücü modülünüzün ölçeği hakkında endişelenmeyin, parçayı aşan her şey tasarımınızda görünmeyecektir.
Aşağıda:% 153 Sağ:% 153 (masaüstü),% 250 (tablet),% 500 (cep telefonu)
Çeviriyi daha sonra değiştirin, ayrıca sağ tarafta görülecek bölücü modülünün konumunu da değiştireceğiz. Bu değeri farklı bir ekran boyutuyla eşleştirdiğinizden emin olun.
Aşağıda: 25VW (masaüstü), 27VW (tablet ve cep telefonu) Sağ: 0px (masaüstü), -32vw (tablet ve cep telefonu)
Son olarak değiştir, ancak en önemlisi, Rotate Dönüşüm ayarlarıyla oynayarak yatay bölücüleri dikey böceklere dönüştüreceğiz.
Bir örnek #3 kısım bir sonraki ve son örneğe taşıyor! Bir kez daha, bölümün ana öğesine bir satır CSS kodu ekleyerek bölümün kapsayıcısını aşmadığından emin olun. Taşma: gizli;
Sütun yapısının başlangıcına yeni bir satır ekleyin. Bölümün üstüne yeni bir satır ekleyerek devam edin. Sıranın yukarıda yerleştirilmesi çok önemlidir, böylece daha sonra öğreticide altındaki içerikle örtüşmeyecektir. Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve sütunun ekranın tüm genişliğini karşılamasına izin verin.
Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet Talang genişliği: 1
Görünürlük Bölen Modülünü Ekleyin Bir sonraki bölücü modülünüzü ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
Arka plan rengi arka plan ayarlarına geçer ve seçtiğiniz arka plan rengini ekler. Arka plan rengi: #D94144
Renk bölücünün renklerini de değiştirir. Renk: #f3f1f2
Stil ayarlarındaki bölücü kuvvetini stil ve değiştirin. Bölücü stili:
Yapıştırıcı daha sonra boyut ayarlarını açın ve bazı değişiklikler yapın. Bölücü ağırlığı: 4px
Yükseklik: 0px Mesafe ayarında birkaç üst ve alt ped kullanarak istediğiniz şekli yapın.
Üst Dolgu: 3VW
Dolgu Alt: 3VW Kutumuzun gölgesi, pürüzsüz bir kutu gölge bölücü vererek sayfamıza biraz derinlik katacaktır.
Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3) Ölçeğin Dönüşümünü Değiştirme Şimdi bölücüyü düzenledik, değiştirmeye başlayabiliriz. Yapacağımız ilk şey, Dönüşüm Ölçeği ayarlarındaki bölücü modülünün boyutunu arttırmaktır. Kırık:% 140
Doğru:% 140
Çeviriyi daha sonra değiştirin, çeviri dönüşüm ayarlarını gireceğiz ve bölücü modülünün konumunu değiştireceğiz. Bölümün üstüne satır yerleştirmek, aşağıdaki satırdan daha düşük Z endeksi korumamıza yardımcı olur, bu da bu güzel örtüşmeyi yaratır! Aşağıda: 4VW
Sağ: 16VW (masaüstü), 26VW (tablet), 35VW (Telefon)
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Hücresel
Bu yazıdaki son zihin, bir arka plan şekli oluşturmak ve sayfanızın genel görünümünü ve hissini geliştirmek için bölücü modülünü ve yeni Divi Dönüşüm seçeneğini nasıl kullanacağınızı gösterdik. Bu öğretici, her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız devam eden Divi Tasarım Girişimimizin bir parçasıdır. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
