Sütun içeriği nasıl görüntülenir Divi ile yönlendirilir (ücretsiz indirin!)
En son Divi gönderilerinden birinde, Hiddle’da Hidden Row içeriğinin nasıl oluşturulacağını gösterdik. Bugün, sütun içeriğini ifade etmek için aynı tür yaklaşımı nasıl kullanacağınızı göstereceğiz. İşleyeceğimiz yaklaşım benzerdir ve masaüstünde iyi bir kayma etkisi olan her türlü tasarım yapmanıza izin verecektir, ancak daha küçük ekran boyutları için iyi çalışır. Bu öğreticinin, oluşturduğunuz web sitesi için her türlü etkileşimli tasarım oluşturmanız için size ilham vereceğini umuyoruz! Gönderin sonunda, JSON dosyalarını indirebilir ve ihtiyaçlarınıza göre ayarlayabilirsiniz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım. Masaüstü Aşağıdaki GIF’de görebileceğiniz gibi, Halk sırasında sütun içeriğini ortaya çıkaran yumuşak bir havada geçişimiz var.
Üst Dolgu: 10VW
Dolgu Alt: 15VW Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme 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ında bazı değişiklikler yapın. Bu ayar, satırların tüm ekran genişliğini almasına izin verecek ve ayrıca sütunlar arasındaki tüm boşlukların çıkarılmasına yardımcı olacaktır. Bu satırı geniş hale getirin: Evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe bir sonraki satır mesafe ayarına gider. Burada, özel bir dolgu değeri ekleyerek önceki adımda sildiğimiz alanı değiştireceğiz. Sol dolgu: 8vw
Doğru dolgu: 8vw
Sütun 1 Doğru: 2VW
Sütun 2 Sol dolgu: 1VW
Sütun 2 Dolgu Sağ: 1VW
Sütun 3 Sol dolgu: 2VW
1 numaralı metin modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! Sütun 1’deki Metin Modülü ile başlayın. Seçilen bazı H3 içerikleri ekleyin. H3 Metin Ayarları Ardından, başlık metninin başlığını açın ve H3 içerik ekranında bazı değişiklikler yapın. Başlık 3 Yazı Tipi: Didact Gothic
Başlık 3 yazı tipi ağırlığı: kalın
Başlık 3 Metin Seviyeleri: Orta
Başlık 3 Renk Metni: #3567ff
Başlık 3 Metin Boyutu: 1.2VW (masaüstü), 20px (tablet ve cep telefonu)
Mesafe Bir sonraki metin modülüne bazı özel boşluk değerleri ekleyin. Alt marj: 4VW
Üst Dolgu: 4VW
Dolgu Alt: 4VW
Kutunun gölgesi ve pürüzsüz bir kutu gölge modülü verin. Dikey Konum Gölge Kutusu: 36px
Bulanık Güç Gölgesi Kutusu: 60 PX
Gölge Rengi: RGBA (0.0,0,0.06)
Sütun 1’e Metin Modülü #2 ekleyin Dolgu ekleyin, bir öncekinin hemen altına başka bir metin modülü ekleyerek devam edin. Seçilen bazı paragraf içeriği ekleyin. Metin Ayarları Ardından, Tasarım sekmesini açın ve metin ayarlarında bazı değişiklikler yapın. Metin yazı tipi: SANS’ı aç
Metin Boyutu: 0.8VW (masaüstü), 14px (tablet ve cep telefonu)
Uzay metin mektubu: -0.05vwtegi Geç Metin: 2.2em
Metin yönlendirmesi: haklı
Metin Rengi: Karanlık
Uzay ayarlarında özel kenar boşlukları ve dolgu değerleri ile oynamak.
Alt marj: 3VW Üst Dolgu: 2VW
Dolgu Alt: 2VW
Sol dolgu: 4VW
Doğru dolgu: 4VW
Aşağıdaki ayarları kullanarak modüle sol ve sağ sınırları sınırlayın ve ekleyin:
Sağ sınır genişliği: 1 piksel Sağ sınır rengi: #e5e5e5
Düğme Modülünü Sütun 1’e Ekleyin İlk sütunda ihtiyacımız olan bir sonraki modülün bir kopyasını modül düğmesidir. Seçtiğiniz bazı kopyaları ekleyin.
Daha sonra hizalama, tasarım sekmesini açın ve düğmenin ortasına hizalanmasını değiştirin. Düğmenin hizalanması: orta Düğme ayarlarını açarak ve ulaşmak istediğimiz tüm tasarıma uyacak şekilde düğmenin görüntülenmesini değiştirerek düğme ayarlarına devam edin.
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 1VW (masaüstü), 15px (tablet ve cep telefonu)
Metin Renk Düğmesi: #000000
Sınır sınır genişliği: 1px
Düğme Sınır Rengi: #DDDDDD
Sınır sınır yarıçapı: 0px
Mektup Mesafesi Düğmesi: -0.05VW
Mektup Ağırlığı: Kalın
Yazı tipi stili: büyük harf
Düğme modülünden mesafe değeri ile mesafe.
Alt kenar boşluğu: 100 piksel (tablet ve cep telefonu) Üst Pilding: 0.8VW (masaüstü), 10 piksel (tablet ve cep telefonu)
Pilding Alt: 0.8VW (masaüstü), 10px (tablet ve cep telefonu)
Sol dolgu: 3.5vw (masaüstü), 50px (tablet ve cep telefonu)
Sağ dolgu: 3.5vw (masaüstü), 50px (tablet ve cep telefonu)
Modülü Sütun 1’deki iki kez klonlamak ve Sütun 1’e üç farklı modül eklemeyi bitirdikten sonra kalan sütuna yinelenmeyi yerleştirerek, her modülü iki kez klonlayabilirsiniz. Her sütunda aynı tasarımı elde etmek için kalan iki sütuna yinelenen iki sütuna yerleştirin. Sütun 2’deki #1 metin modülünün metin rengini değiştirin, sütun 2’deki ilk metin modülünü açın ve metnin rengini değiştirin.
Başlık 3 Renk Metni: #6D28C1 Sütun 3’teki #1 metin modülünün metin rengini değiştirin Üçüncü sütundaki ilk metin modülü için de aynısını yapın.
Başlık 3 Renk Metni: #15668E
Overlay metin modülünü sütun 1’e ekleyin, İhtiyacımız olan tüm sütun içeriğine sahip olduktan sonra içeriği şimdi ekleyin, imleci yönlendirmeden önce içeriği gizleyecek örtüşen öğeler ekleyebiliriz. Bunu başarmak için başka bir metin modülü kullanacağız. Lütfen ve ilk sütuna bir tane daha ekleyin. Bunun sütundaki son modül olduğundan emin olun. İstediğiniz bazı içerikleri ekleyin.
Renk 1: #6A30ff Renk 2: #3567ff Gradyan yönü: 124deg
Metin Ayarları Sonraki metin ayarlarını değiştirir.
Metin yazı tipi: Didact Gothic
Metin rengi: #ffffff Metin Boyutu: 2VW
Metin Oryantasyonu: Orta
Mesafe ve bazı özel dolgu değerleri ekleyerek modülün şeklini yapın. Ayrıca bu modül ve sütun içeriği arasında örtüşmek için bazı negatif marjlar ekledik. Metin modülünün arkasına sakladığınız içerik tıklanmaz. Bu nedenle, imleci yönlendirmeden görüldüğü gibi, örneğimizdeki düğme gibi harekete geçme davetini korumak önemlidir.
Üst Marj: -38VW
Üst Dolgu: 15VW Dolgu Alt: 15VW
Sınır Bir sonraki metin modülüne birkaç yuvarlak açı ekleyin. Kutu gölgeleri bir kutunun pürüzsüz gölgesiyle çakışır.
Bulanık Güç Gölgesi Kutusu: 40 PX
Gölge Rengi: RGBA (0.0,0,0.16) Varsayılan filtre daha sonra filtre ayarlarını açın ve opaklığın varsayılan olarak ‘%100’ olduğundan emin olun. Opaklık:% 100
İmleci ‘%0’ olarak yönlendirirken filtreyi opaklığı değiştirmeye yönlendirin. Bu, modülün kaybolmasını sağlayacak ve bunun yerine tüm sütun içeriğinin görünmesine izin verecektir.
Opaklık:% 0 CSS Özellikle metin modülünün tüm sütun içeriğinin üzerinde kalmasını sağlamak için, metin modülünün devam sekmesine iki sıra CSS kodu ekleyin.
Z-endeks: 99; Pozisyon: Akraba
Görünürlük ve tüm modülleri tablet ve cep telefonlarındaki tüm modülleri gizleyin. Bu yazının başında belirtildiği gibi, kullanıcının iyi ziyaretçilerin deneyimini sağlamak için tüm sütun içeriğini daha küçük bir ekran boyutunda görüntüleriz. Bindirme Metin Modülü İki kez Klon ve Yinelenen Yerleştirme Metin Modülünü değiştirmeyi bitirdikten sonra kalan sütuna yerleştirin, devam edin ve iki kez klonlayın. Her bir kopyayı kalan iki sütuna yerleştirin.
Sütun 2’deki gradyan modülü kaplama metninin arka planını değiştirin, gradyan arka plan rengini ilk kopyadan değiştirin.
Renk 1: #D530FF Renk 2: #6d28c1 Sütun 3’teki kaplama metin modülünün gradyanının arka planını değiştirin ve ikinci kopya için de aynısını yapın. Renk 1: #41ff30
Renk 2: #15668E
Bu bölümü ücretsiz indirin Sütun açıklamasına koymak için, ö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!
Masaüstü önizleme Hücresel
Bu yazıdaki son zihin, imleci yönlendirirken sütun içeriğini nasıl açığa çıkaracağınızı gösterdik. Bu yaklaşımı, ekstra bir etkileşim seviyesi eklemek için oluşturduğunuz her türlü web sitesine kullanabilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
