Divi’nin sütunu ile örtüşme sütunu nasıl yapılır & amp;Dönüşüm Seçenekleri
En son Divi güncellemelerinden birinde, üreticideki sütuna oldukça şaşırtıcı kontroller ekledik. Şimdi örtüşen bir sütun yapmak eskisinden daha kolay. Bu öğreticide, Divi sütunu ve dönüşüm ayarlarını kullanarak üst üste binen üç sütunla nasıl bir referans bölümünün oluşturulacağını göstereceğiz. Bu tasarım için üç renk, turuncu zengin #ff8300, sıcak sarı #ffd400 ve çarpıcı mavi gradyan #0c99c1 kullanacağız. Bu üst üste binen sütun tasarımını kısa sürede web sitesi projesine uygulayabilirsiniz. Başlayalım.
Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Üst Dolgu: 4VW
Dolgu Alt: 16VW Satırın boyutunu ve boşluğunu ayarlayın Satır ayarlarını açın ve uygun boyut ayarlarını değiştirin:
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100 Bundan sonra, alan ayarlarını değiştirin:
Aşağıda dolgu: 0px
Sol dolgu: 11vw
Doğru dolgu: 8vw Gradyanın arka planını ekleyin Bir sonraki gradyan arka planını ekleyin:
Arka plan stili: gradyan
Birinci renk: beyaz #ffffff
Renk İkinci: Turuncu #FF8300
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 35
Son pozisyon:% 35 2. Kuvvet sütunu sütuna bir modül eklemeden önce, her sütunun kuvvetinin, boşluğunun ve dönüşümünün düzenlenmesini tek tek değiştireceğiz. Sütun 1 Sütun düzenlemesinin ilk adımı, kutunun yuvarlak açısı ve gölgesidir:
Sınır: 20 piksel Her açıda yuvarlak Gölge: İlk Kutu Gölgesi Seçenek
Dikey Konum Gölge Kutusu: 0px
Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3)
Kutu Gölgesi Pozisyonu: Dışarı
* Herhangi bir dönüşüm ayarı eklemeden önce, bu öğe kuvvetini iki ve üçlü sütunlara kopyalayıp ekleyeceğiz. Sütun 1 ayarlarını tekrar açın ve Tasarım sekmesini açın. İkinci sütunla ilk sütunun çakışmasını sağlamak için dönüşüm ayarını kullanacağız. Unutursanız, x ekseni yataydır ve Y ekseni dikeydir. Çeviri Değiştir:
Masaüstü: Eksen x = 3VW. Eksen y = 14.2vw
Tablet ve telefon: Eksen x = -14vw. eksen y = 16vw
Görünürlük: z index 10
İkinci sütuna 2 sütun! Kutunun gölgesine gidin (önceki adımlardan birine eklediğiniz) ve kutu gölgesinin gücünü artırın. Bulanık Güç Gölgesi Kutusu: 50px
Sütun 2’ye bazı özel alan değerleri ekleyerek devam edin. Üst Rulman:
Masaüstü = 3VW
Tablet + Telefon = 5VW
Alt pedler:
Masaüstü = 5VW
Tablet + Telefon = 7VW
Sol pedler:
Masaüstü = 2VW
Tablet + telefon = 4VW
Doğru yatak:
Masaüstü = 2VW
Tablet + telefon = 4VW
İkinci sütunu değiştirme zamanı! İkinci sütun masaüstü için yerinde kalır, ancak daha küçük bir ekrana bazı özel dönüşüm ayarları uygulamalıyız. Lütfen ve Dönüşüm sekmesini ayarlayın. Ek olarak, Z indexini 9’a çıkaracağız. Çeviri Değiştir:
Tablet ve telefon: Eksen x = 9vw. Eksen y = 13vw
Görünürlük: Dizin Z 9
Üçüncü sütuna 3 sütun! Mevcut kutunun gölgesinden bulanıklığın gölgesinin gücünü artırın. Bulanık Güç Gölgesi Kutusu: 50px
Bir sonraki arka plan ayarını açın ve mavi gradyanın arka planını ekleyin. Gradyan Renk Bir: #0C99C1
Gradyan Rengi İki: RGBA (5,0,78.0.72)
Gradyan Türü: Doğrusal
Gradyan yönü: 220 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
Şimdi boşluk ekleyelim.
Üst Rulman: Masaüstü = 3VW
Tablet + Telefon = 10VW
Alt pedler:
Masaüstü = 3VW
Tablet + Telefon = 7VW
Sol pedler:
Masaüstü = 1.5vw
Tablet + Telefon = 10VW
Doğru yatak:
Masaüstü = 1.5vw
Tablet + Telefon = 10VW
Son olarak, çeviri ayarlarını değiştirerek üçüncü sütunun ikinci sütunla örtüşmesini sağlayacağız.
Çeviri Değiştir: Masaüstü: Eksen x = -10VW. Eksen y = 14.2vw
Tablet: eksen x = -14vw. Eksen y = 9vw
Telefon: Eksen x = -14vw. Eksen y = 11vw
Görünürlük: Dizin Z 9
Bir modül eklemeden önce sütunumuzun bir önizlemesi aşağıdadır.
3. Modülü geçerli sütunlarına ve stillerine ekleyin, modülü her sütuna ekleyelim! Sütun 1 Birinci sütunda, görüntü modülünü ve metin modülünü gireceğiz. Önce görüntü modülünü ekleyin. 1. Görüntü modülünü ekleyin Müşterilerinizin fotoğraflarını ekleyin ve aşağıdaki gibi hissetmenizi sağlar: Tesisat: Sol Tam geniş zorla: Evet
Resmin alt sınırı da ekleyin.
Alt Sınır Rengi: Sarı #FFD400 Alt sınır genişliği: 9px
Sınır Gücü: Katı
2. Metin Modülünü Ekle Görüntü modülünün hemen altına yeni bir metin modülü ekleyin ve istemcinin adını ve konumunu girin.
İsim: POS 4 Pozisyon: paragraf
İçerik ekledikten sonra metin ayarları ayarlayacağız:
Metin yazı tipi: nunito sans Metin yazı tipi ağırlığı: normal
Hizalama Metni: Orta
Metin Rengi: Siyah #000000
Yazı Boyutu:
Masaüstü = 0.8vw
Tablet = 1.8vw
Telefon = 2.8vw
Başlık metin ayarlarına geçin ve aşağıdaki değişiklikleri uygulayın: Başlık Metni: H4
Başlık 4 Yazı Tipi: Poppins Başlık 4 yazı tipi ağırlığı: kalınlık
Başlık 4 Renk Metni: Siyah #000000
Başlık 4 Metin Boyutu:
Masaüstü = 1VW
Tablet = 3VW
Telefon = 4VW
Alan ayarlarını da değiştireceğiz:
Üst sınır:
Masaüstü = 1.5vw Tablet = 3VW
Telefon = 7VW
Alt marj:
Masaüstü = 1.5vw
Tablet = 3VW
Telefon = 7VW
Her iki modülü de bitirdikten sonra sütununuz böyle görünecektir:
Sütun 2 Sütun 2’de metin, açıklama ve bölücü modülüne ihtiyacımız var. İlk metin modülü, sütunun sağ üst köşesinde eğimli bir afişe benzeyen şeydir. Bu etkiyi elde etmek için Dönüşüm seçeneğini kullanacağız. 1. Metin modülünü ekleyin. Yeni bir metin modülü ekleyin ve içerik kutusuna ‘referans’ kelimesini ekleyin.
Sarı arka planı modüle ekleyin. Arka plan rengi: sarı #ffd400 Tasarım sekmesine geçin ve uygun metin ve alan ayarlarını değiştirin:
Metin Yazı Tipi: Poppins
Metin yazı tipi ağırlığı: kalınlık
Metin Rengi: Beyaz #ffffff
Metin Boyutu: 23px
Sağ kenar boşluğu: -50px
Sol kenar boşluğu: -50px
Üst dolgu: 15px
Dolgu Alt: 15 piksel
Son olarak, dönüşüm ayarlarını aşağıdaki gibi ayarlayacağız:
Çeviri Değiştir:
Masaüstü = x ekseninde 17VW Tablet = x ekseninde 24vw, y ekseninde 1vw
Telefon = x ekseninde 20VW, Y ekseninde 1vw
Dönüşüm Döndür: İlk eksende 32 derece
2. Bir bulanıklık modülü ekleyin. İlk modülü tamamladıktan sonra, bir açıklama modülü ekleme zamanı.
Açıklama modülü, müşterinin görüntülenen referans yeridir. İlk olarak, modülü eklemek için + simgesini tıklayın ve açıklamayı seçin.
Bundan sonra içeriği girin, simgeyi ve simge stilini aşağıdaki gibi seçin: Simgeler kullanın: evet, yıldızlar
Ikon Renk: Sarı #FFD400 IKON DİĞER: SOL Simge yazı tipi boyutunu kullanın: evet, 48px
Başlık başlığını H4 seviyesinde düzenleyerek devam edin
Başlık Metni: H4
Yazı Tip Başlığı: Poppins
Ağır yazı tipi başlığı: kalın Renkli yazı tipi başlığı: Black #ffffff
Başlık Metin Boyutu:
Masaüstü = 1.2vw
Tablet = 2.3vw
Telefon = 3.3vw Çizgi Yüksekliği Başlığı:
Masaüstü = 2VW
Tablet = 3.4vw
Telefon = 4.6vw
Uyumlu metin ayar stili:
Yazı tipi metin içeriği: nunito sans
Vücut metni ağırlığı: yarı kalın
Gövde metni rengi: Siyah #000000 Vücut Metin Boyutu:
Masaüstü = 0.7vw
Tablet = 1.6vw
Telefon = 2.4vw
Vücut çizgisinin yüksekliği:
Masaüstü = 1.6vw
Tablet = 4VW
Telefon = 5VW
Bulanıklığın sütundan daha az geniş olmasını istiyoruz, bunu başarmak için genişliği, kenar boşluğunu ve dolgu değerlerini ayarlayacağız. İlk olarak, bulanıklığın genişliğini ayarlayacağız:
İçerik Genişliği:% 100
Geniş:
Masaüstü =% 58.4 Tablet + mobil =% 90
Ve sonra, alan ayarları:
Üst Marj: 3VW
Alt marj: 3VW
Sağ kenar boşluğu: -24vw Sol dolgu: 0px
Sağ dolgu: 4px
3. Bu sütunda ihtiyacımız olan son modül bölücüsünü ekleyin Bölücü modülü. Bölücüye aşağıdaki değişiklikleri uygulayın:
BÖLÜN BÖLÜM: EVET
Renk Renk: Siyah #OOOOOO
Bölücü ağırlığı: 1 piksel Neredeyse geldik! Şimdiye kadar bu bizim sonucumuz:
Sütun 3’e üçüncü ve son sütuna! Bu sütunu harekete geçirme davetini görüntülemek için kullanıyoruz. Üç modül kullanıyoruz; Metin modülü, bölücü modülü ve düğme modülü. 1. Metin Modülünü Ekle Bu sütuna ekleyeceğimiz ilk şey metin modülüdür.
İçerik kutusuna H3’e başlığı ve küçük bir paragraf metnini ekleyeceğiz. Lütfen ve uygun metin ayar stili:
Metin yazı tipi: nunito sans Metin yazı tipi ağırlığı: normal Yazı tipi renk metni: beyaz #ffffff Metin yazı tipi boyutu: masaüstü = 0.8vw
Tablet =- 2vw
Telefon = 2.6vw
Yüksek satır metin:
Masaüstü = 1.5vw
Tablet = 4VW
Telefon = 5VW
Başlık metin ayarlarını düzenleyerek metin modülünü doldurun.
Başlık Metni: H3
Başlık 3 Yazı Tipi: Poppins
Başlık 3 yazı tipi ağırlığı: kalın
Başlık 3 Renk Metni: Beyaz #ffffff Başlık 3 Metin Boyutu:
Masaüstü = 1.1vw
Tablet = 3VW
Telefon = 4VW
3 Yüksek Hat:
Masaüstü = 1.5vw
Tablet = 3VW
Telefon = 4.5vw
2. Bölme modülünü ekleyin.
Bölme ayarlarını açın ve rengi siyahtan beyaza değiştirin. Üst ve alt pedler de ekleyin.
Renk Renk: Beyaz #ffffff
Üst dolgu: 40 piksel
Dolgu Alt: 20 piksel 3. Düğme modülünü son modüle, düğme modülüne ekleyin. Seçtiğiniz bazı kopyaları ekleyin. Tasarım sekmesine ve düğme stiline aşağıdaki gibi geçin:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi:
Masaüstü = 0.8vw Tablet = 2.4vw Telefon = 3VW
Metin Renk Düğmesi: Beyaz #ffffff
Arka plan rengi Kest: gradyan
Gradyan Renk Bir: Sarı #FFD400
Gradyan Renk İki: Turuncu #FF8300
Gradyan Türü: Doğrusal
Gradyan yönü: 202deg. Düğmenin sınır genişliği: 0px
Mektup Mesafe Düğmesi: 1 piksel
Yazı tipi düğmesi: nunito sans
Mektup Ağırlık Düğmesi: Ağırlık
Yazı tipi stili düğmesi: TT Düğmenin tüm ekran boyutlarında iyi görünmesi için düğme yataklarını aşağıdaki gibi ayarlayacağız: Masaüstü
Üst Dolgu: 1VW
Dolgu Alt: 1VW
Doğru dolgu: 3VW
Sol dolgu: 3VW Tablet
Üst Dolgu: 2VW
Dolgu Alt: 2VW
Doğru dolgu: 6vw
Sol dolgu: 6VW Telefon
Üst Dolgu: 3VW
Dolgu Alt: 3VW
Sağ dolgu: 8vwpadding sol: 8vw
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Masaüstü Hücresel
Bu üst üste binen üç sütun binasını sarmak bir referans olarak iyi görünüyor, ancak bunu diğer şaşırtıcı şeylere uygulayabileceğinizden eminiz.Bunun size sütun dönüşüm seçeneklerini kullanmanız ve gelecekteki projeler için örtüşme konusunda ilham vereceğini umuyoruz.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
