Divi dönüşüm seçenekleriyle çapraz tasarım yapısı yapın (Ücretsiz İndirin!)
Her zaman Divi ile olan tasarımın olasılığını genişletmenin yollarını arıyoruz. Dönüşüm seçeneğinin reformundan bu yana, özel kodlama bilgisine ihtiyaç duymadan birçok yeni teknik mümkündür. Bu yazıda size inanılmaz bir diyagonal tasarım yapısının nasıl yapılacağını göstereceğiz. Yeniden yaratacağımız tasarım, kahraman ve hazırlamak istediğiniz her türlü web sitesi için iyi çalışıyor. Öğreticinin sonunda, JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Yaratmaya başlayalım! Yeni bir sayfa oluşturarak veya mevcut olanı açarak ve ona normal kısmı ekleyerek gradyan arka plan başlamasının yeni bir bölümünü ekleyin. Bölüm ayarlarını açın ve aşağıdaki ayarları kullanarak gradyanın arka planını ekleyin:Renk 1: #FFD633
Renk 2: #efefef
Gradien yönü: 217deg
Başlangıç Pozisyonu:% 45
Son pozisyon:% 45 Mesafe Ardından, tasarım sekmesini açın ve bazı özel üst ve alt pedler ekleyin.
Üst Dolgu: 4VW
Dolgu Alt: 12VW Taşma Dönüşüm seçeneğinin kabı aşmamasını sağlamalıyız. Bunu başarmak için bölümün ana öğesine bir satır CSS kodu ekleyeceğiz.
Taşma: gizli; Aşağıdaki sütun yapısını kullanarak ilk satırı ekleyerek #1 sütun yapısı ekleyin: 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. Bu yazıdan bir sonraki adımda, ViewPort ünitesini kullanarak özel özel bazı sol ve sağ dolgu değerleri ekleyerek sildiğimiz alanı değiştireceğiz. Bu, tasarımın tüm ekran boyutlarında duyarlı kalmasını sağlayacaktır. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe lütfen ve sonraki alan ayarlarına bazı özel dolgu değerleri ekleyin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sol dolgu: 25VW (masaüstü), 16vw (tablet), 7vw (telefon)
Sağ dolgu: 25VW (masaüstü ve tablet), 27vw (telefon)
Bize gösterilen ayrıca, satırın ana öğesine bir CSS kod satırı ekleyerek sütunun daha küçük bir ekran boyutunun yanında görünmesini sağlar. Ekran: Flex; Blurb Modülünü Sütun 1’e ekleyin Başlık ekleyin Modül eklemeye başlar! Blurb modülünü sütun 1’e ekleyin ve istediğiniz başlığı girin. Resimleri Yükle İstediğiniz illüstrasyonu yükleyerek devam edin. Bu öğretici boyunca kullanacağımız şey, uygulama düzeni paketinin bir parçasıdır. Gönderiyi açarak ve sonunda indirerek illüstrasyonları ücretsiz indirebilirsiniz. Arka plan daha sonra, tüm beyaz arka plan rengini bulanıklık modülüne ekleyin. Arka plan rengi: #ffffff
Başlık Metni Ayarları Tasarım sekmesine geçin ve uygun başlık metin ayarlarını değiştirin: Yazı Tip Başlığı: Poppins
Ağır yazı tipi başlığı: yarı kalın
Yazı tipi stili başlığı: büyük harf
Hizalama Metin Başlığı: Orta
Metin başlığı boyutu: 0.5vw (masaüstü), 1.6vw (tablet), 2.4vw (telefon)
Başlık Aralığı: 1 piksel
Hat yüksekliği başlığı: 1.6em
Bir sonraki alan ayarlarını değiştirmek için mesafe. Dolma Üst: 1.3VW (masaüstü), 4VW (tablet), 6VW (telefon) Pilding Alt: 1.3vw (masaüstü), 4VW (tablet), 6VW (Telefon)
Sol dolgu: 1VW (masaüstü), 7VW (tablet ve cep telefonu)
Sağ dolgu: 1VW (masaüstü), 7VW (tablet ve cep telefonu)
Sınır, bulanıklık modülünün sol üst ve üst köşesine ‘1VW’ ekleyerek devam edin.
Son fakat değil -lheast kutusunun gölgesi, aşağıdaki ayarları kullanarak kutunun gölgesini modüle ekleyin: Dikey Konum Gölge Kutusu: 10px Bulanık Güç Gölgesi Kutusu: 60 PX
Gölge Renk: RGBA (39,39,52.0.37)
Klon bulanık modülü iki kez ve kalan sütuna yinelenen bulanıklık modülünü yerleştirin, bulanıklık modülünü ayarladıktan sonra, devam edebilir ve iki kez klonlayabilirsiniz. Kalan iki sıra sütuna yinelenen yerleştirin.
Değiştirme #1 Değiştir Kopya ve illüstrasyon değiştirme ilk kopyanın kopyasını ve çizimini değiştirin. Alanı alan ayarı ile birlikte değiştirin. Üst kenar boşluğu: -3vw Üst Pilding: 2.7vw (masaüstü), 8vw (tablet), 11vw (telefon)
Aşağıda dolgu: 2.7vw (masaüstü), 8vw (tablet), 11vw (telefon)
DEĞİŞTİRİCİ #2 Değiştir Kopya ve İllüstrasyon Değiştir ikinci kopya kopyasını ve illüstrasyonunu da değiştirin.
Bir sonraki satıra satırlar #2 sütun yapısı ekleyin! Aşağıdaki sütun yapısını kullanın: Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve gradyanın arka planını ona ekleyin. Renk 1: #FFF20A Renk 2: #FFB200
Gradyan yönü: 165 derece
Ardından, Tasarım sekmesini açın ve ‘Bu Sıra Fullwidth Oluştur’ seçeneğini etkinleştirin.
Bu çizgiyi tamamen genişletin: evet Son fakat en az değil kutunun gölgesi, kutunun gölgesini satıra ekleyin.
Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölgesi Kutusu: 100 PX
Gölge Rengi: RGBA (0.0,0,0.39) Görünürlük bölücü modülünü ekleyin Bu çizgiyi herhangi bir modül görüntülememek için yalnızca tasarım amacıyla kullanıyoruz. Ancak satırın tam olarak nasıl göründüğünü bildiğimizden emin olmak için, ona bir bölücü modülü eklememiz gerekir. Modülün görünmesini istemiyoruz, bu nedenle ‘Bölücüyü Görüntüle’ seçeneğinin devre dışı bırakıldığından emin olun.
Divisor göster: hayır
Dönüşüm seçeneğini satır #1’e uygulayın İlk iki satırı bitirdikten sonra çeviriyi değiştirin, yapmak istediğimiz çapraz tasarım yapısına uyacak şekilde değiştireceğiz. İlk satır ayarlarını açarak ve çeviri dönüşüm değerini değiştirerek başlayın. Aşağıda: 30VW
Doğru: 6VW
Daha sonra dönüşü değiştirin, sol dönüşümün değerini değiştirin.
Sol: 37 derece
Satır #2 Ölçek dönüşümü İkinci satır ayarlarını açarak ve Dönüşüm Ölçeği değerini değiştirerek devam edin.
Sağ:% 133 (masaüstü),% 171 (tablet),% 176 (cep telefonu) Çeviriyi Dönüşüm Çeviri Değeri ile birlikte değiştirin.
Aşağıda: 12VW (masaüstü), 1VW (tablet), 3VW (Telefon)
Sağ: -2vw (masaüstü), -6vw (tablet), -4vw (telefon) Dönüşü değiştirin ve dönüşüm döner ayarındaki satırı da döndürün.
Sol: 37 derece
Bir sonraki ve son satıra satırlar #3 sütun yapısı ekleyin! İstediğiniz bilgileri paylaşmak için bu satırı ve sütunu kullanabilirsiniz. Tasarımı tam olarak bu yayının önizlemesinde gördüğünüz gibi yeniden yapmak 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 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
Sütun 1’e Metin Modülü #1 ekleyin H1 içeriği ekleyin, modül eklemeye başlama zamanı! Metin modülünün başlığı ile başlayacağız. İstediğiniz bazı H1 içeriklerini girin. Metin ayar H1, tasarım sekmesini açın ve H1 metin ayarlarını değiştirin.
Yazı Tip Başlığı: Poppins
Başlık Metin Boyutu: 3VW (Masaüstü), 5VW (Tablet), 6VW (Telefon) Uzay Mektubu Başlığı: -2px Mesafe Bir sonraki özel alan değerleri ekleyin.
Üst kenar: -6vw (masaüstü ve tablet), 11vw (telefon)
Sol kenar boşluğu: 10vw
Sütun 1’e Metin Modülü #2 ekleyin İhtiyacımız olan ikinci modülün içeriğini ekleyin Başka bir metin modülü. İstediğiniz bazı içerikleri ekleyin. Metin Ayarları Ardından, Tasarım sekmesini açın ve metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç
Metin Boyutu: 0.8VW (masaüstü), 1.5vw (tablet), 2.2vw (telefon) Yüksek çizgi metin: 2.6em Mesafe ayrıca boşluk değerini değiştirir.
Üst Marj: 3VW (Telefon), 5VW (Telefon)
Sol kenar boşluğu: 10vw
Sağ kenar boşluğu: 28VW (tablet), 20VW (telefon) Düğme Modülünü Sütun 1’e ekleyin Bir sonraki bölümün bir kopyasını ekleyin ve son olarak ihtiyacımız olan düğme modülü. Seçtiğiniz bazı kopyaları ekleyin.
Düğmeyi ayarlayın Ardından, Tasarım sekmesini açın ve düğme ayarlarını değiştirin.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 0.9VW (Masaüstü), 2.5VW (Tablet), 3.5VW (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: Poppins
Mektup Ağırlığı: Hafif
Son fakat en az değil, modül formunuz bazı özel alan değerleri kullanır ve bitirdiniz!
Üst kenar: 2VW (masaüstü), 5VW (tablet ve cep telefonu)
Sol kenar boşluğu: 10vw
Üst Dolgu: 1VW Dolgu Alt: 1VW
Sol dolgu: 3VW
Doğru dolgu: 3VW
Ücretsiz Diagonal Tasarım Bölümünü Ücretsiz Diagonal Tasarım Bölümü’nü 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. Bu yazıdaki son zihin, yalnızca Divi’nin varsayılan seçeneklerini kullanarak inanılmaz bir çapraz tasarım yapısının nasıl yapacağınızı gösterdik. Bu öğretici yeni Divi Dönüşüm seçeneğine alışmanıza yardımcı olur. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
