Genişletilmiş bir bölüm içeriği oluşturmak için Divi Dönüşüm seçeneğini kullanma
Bugün, yeni bir Divi dönüşüm seçeneği ile birlikte gelen Dönüşüm Ölçeği Tasarım seçeneğini vurgulayacağız. Dahası, zarif bir şekilde yüzerken parçanın genişletilmesini sağlayan inanılmaz bir tasarım yaratacağız. Bu tasarımı, oluşturduğunuz her türlü web sitesi için kullanabilirsiniz. Bu, ilgili içeriği yapılandırılmış ve minimal bir şekilde paylaşmanıza yardımcı olacaktır. Bu öğreticinin sonunda, tüm sayfa düzenini ücretsiz olarak indirebileceksiniz. Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Masaüstü
Üst dolgu: 0px
Aşağıda dolgu: 0px Sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısını kullanarak ilk satırı ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin.
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100 Mesafe Tüm dolguyu varsayılan olarak da silin. Bunu, çizgiler ve parçalar tarafından kullanılacak alanı sınırlamak için yapıyoruz.
Üst dolgu: 0px
Aşağıda dolgu: 0px Görünürlük Bölücü Modülünü Ekleyin Bu satırda ihtiyacımız olan tek modül bölücü modülüdür. Bu öğreticinin sonunda, böcekleri tüm parçaları gelecek şekilde bağlayacak dikey böceklere dönüştüreceğiz. Bölme modülünü ekledikten sonra, ‘Bölü’nü görüntüleyin’ seçeneğinin etkinleştirildiğinden emin olun.
Divisors’u gösterin: Yawarna sonra tasarım sekmesini açın ve bölücünün rengini siyah olarak değiştirin. Renk: #000000
Yapıştırıcı değişim de boyut değeri. Bölücü ağırlığı: 1 piksel
Yükseklik: 0px
Biraz sol ve sağ kenar boşlukları ekleyerek bölücünün mesafesi ve uzunluğu negatiftir. Sol kenar boşluğu: -135vw (masaüstü), -300vw (tablet), -340vw (telefon)
Sağ kenar boşluğu: -135vw (masaüstü), -300vw (tablet), -340vw (telefon)
Bir sonraki normal bölüme Bölüm #2 arka plan renkleri ekleyin! Yeni bir parça ekledikten sonra, bölümün ayarlarını açın ve tüm beyaz arka plan rengini ekleyin. Arka plan rengi: #ffffff
Mesafe Ardından, mesafe ayarlarını açın ve bazı özel üst ve alt yatak ekleyin. Üst Dolgu: 5VW
Dolgu Alt: 5VW
Varsayılan sınır, bölüme de sınır ekler. Sınır Genişliği: 1 piksel
Sınır rengi: #000000
Sınırı yönlendirin ve yüzerken sınırın genişliğini silin. Sınır Genişliği: 0px
Varsayılan kutumuzun gölgesi, gelgitte kutunun gölgesini de ekledi. Bunu yapmak için önce varsayılanı eklemeliyiz. Kutunun gölgesinin varsayılan olarak görünmemesini sağlamak için, gölgenin tamamen şeffaf bir rengini kullanırız. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0)
Aşağıdaki renk kodunu kullanarak gelişimdeki gölgenin rengini değiştirmek için gölgede gezinme: Gölge Rengi: RGBA (0.0,0,0.13)
Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın parçanın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Metin Modülünü Ekle H2 içeriğini ekleyin. Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül birkaç H2 içeriğine sahip bir metin modülüdür. Metin Ayarları H2 Tasarım sekmesini açın ve H2 metin ayarlarını kendi tercihlerinize göre değiştirin. Başlık 2 Yazı Tipi: Abril Fatface Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #000000
Başlık 2 Metin Boyutu: 7VW
Mesafe Bazı özel marj değerleri de ekleyin.
Alt marj: 5VW Sol kenar boşluğu: 5VW
Doğru marj: 5VW
Bir sonraki ve son olarak bu satırda ihtiyacımız olan görünürlük bölücü modülünü ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet Renk daha sonra tasarım sekmesini açın ve bölücünün rengini siyah olarak değiştirin.
Renk: #000000 İkinci sıraya satırlar #2 sütun yapısı ekleyin! Aşağıdaki sütun yapısını kullanın:
Yapıştırıcımız, bir kez daha, tasarım sekmesindeki boyut ayarlarını değiştirerek çizginin tüm ekran genişliğini karşıladığından emin olun. Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Mesafemiz ayrıca, özellikle mesafe ayarına birkaç sol ve sağ rulman ekleyerek satırın boyutunu hafifçe küçültür.
Sol dolgu: 10vw Doğru dolgu: 10vw
Üç sütunun daha küçük bir ekran boyutunun yanında görünmesini sağlamak için, hattın ana öğesine bir CSS kod satırı ekleyeceğiz. Ekran: Flex;
Blurb modülünü sütun 1’e ekleyin, içeriği ekleyin, satırın ilk sütununa bulanık modül ekleyerek devam edin. İstediğiniz bazı içerikleri girin. Simgeyi seçin Bir sonraki simgeyi seçin. Simgeyi ayarlayın, tasarım sekmesini açın ve simgenin rengini değiştirin.
Renk simgesi: #000000
Başlık Metin Ayarları Başlık metin ayarlarına geçin ve kendi tercihlerinize göre ayarları değiştirin. Yazı tipi Başlık: Abril FatfaceHizalama Metin Başlığı: Orta Başlık Metin Rengi: #000000
Boyut Metin Başlığı: 1.5VW (masaüstü), 2.5vw (tablet), 3.5vw (telefon)
Çizgi Yüksekliği Başlığı: 2EM
Gövde metni ayarları içerik metin ayarları için aynı şeyi yapar.
Gövde yazı tipi: açık sans
Vücut metninin hizalanması: orta Gövde metni rengi: #666666
Gövde metni boyutu: 0.8VW (masaüstü), 1.5VW (tablet), 2vw (telefon)
Vücut çizgisinin yüksekliği: 2em
Son fakat en az değil, bulanıklık modülüne bazı özel sol ve sağ kenar boşlukları ekleyin.
Sol kenar boşluğu: 2VW
Doğru marj: 2VW Blurb modülü Klon iki kez ve kalan sütuna yerleştirin Blurb modülünü ayarlamayı bitirdikten sonra devam edebilir ve iki kez klonlayabilirsiniz. Kalan iki sıra sütuna yinelenen yerleştirin.
Bir sonraki ve son satıra satırlar #3 sütun yapısı ekleyin. Bunun için aşağıdaki sütun yapısını seçin:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın boyut ayarlarını değiştirerek parçanın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet Talang genişliği: 1 Genişlik:% 100
Maksimum genişlik:% 100
Modülü Ekleyin Düğme Modülü Eklemek için burada ihtiyacımız olan tek modül düğme modülüdür. Seçtiğiniz bazı kopyaları ekleyin.
Daha sonra hizalama, tasarım sekmesini açın ve düğme hizalamasını değiştirin.
Düğmenin hizalanması: orta Ayarlar Sonraki Düğme Değiştir düğmesi. Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 1.5VW (Masaüstü), 2.5VW (Tablet ve Telefon) Metin Renk Düğmesi: #000000
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ı: 1px
Yazı tipi düğmesi: SANS’ı açın
Harf ağırlığı: Çok kalın ve birkaç marj değerleri ve özel dolgu kullanan düğmeler için şekiller yapın.
Üst Marj: 5VW
Üst Dolgu: 2VW
Dolgu Alt: 2VW Sol dolgu: 10vw
Doğru dolgu: 10vw
Dönüşüm ayarı #2’ye ekleyin Varsayılan Dönüşüm Ölçeği ekleyin, sayfamıza eklediğimiz iki parçayı yapmayı ve değiştirmeyi bitirdikten sonra Bölüm 2’ye ekleyin, Dönüşüm seçeneğini uygulamaya başlayabiliriz. Bölüm #2’yi açın ve bazı özel dönüşüm ölçeği değerleri ekleyin.
Aşağıda:% 60 (masaüstü),% 90 (tablet ve cep telefonu)
Sağ:% 60 (masaüstü),% 90 (tablet ve cep telefonu)
Dönüşüm Ölçeğini 2. Bölüm olarak gezdirin İmleci yönlendirirken bu değerleri değiştirin. Daha küçük ekran boyutları için yaptığımız değeri nasıl kullandığımızı unutmayın. Bunu yapmak, Hover efektinin yalnızca daha büyük bir ekran boyutunda gerçekleşmesini sağlayacaktır. Aşağıda:% 90
Doğru:% 90
Klon kısmı iki kez sonra, ikinci kısmı iki kez (veya istediğiniz kadar) klonlar. Dönüştürme Dönüşü Bölüm #1’deki Divider modülüne ekleyin ve ilk bölüme eklediğiniz bölücüyü bir dönüş dönüşü değeri ile oynayarak değiştirin.
Sol: 90 derece
Elinizi genişletilmiş parçanın düzenine koymak için ücretsiz olarak genişleyen parçanın düzenini indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone Olmayacak” veya Ek E -posta Almayacaksınız. Dosyayı indirin 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. Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü Hücresel
