Gizli Satır İçeriği Nasıl Yapılır Divi ile yönlendirilmiş görünür (Ücretsiz İndir!)
Web sitenize ince etkileşimler eklemek, ziyaretçilerin genel kullanıcı deneyimini gerçekten geliştirebilir. Web sitenizin daha çekici görünmesini sağlayacak şeylerden biri, kullanıcıların dostluğuna saygı duyarken, satır içeriğinin havada görünmesini sağlamaktır. Bu, hizmetleri, ürünleri, özellikleri ve diğerlerini sergilemek için iyi bir yaklaşımdır. Bu öğreticide, A’dan Z’ye nasıl özel bir tasarım yapacağınızı göstereceğiz, ancak yaklaşımı aldıktan sonra, üzerinde çalıştığınız her türlü web sitesi için çalışmasını sağlayabilirsiniz. Bu blog yazısının sonunda, bu tasarımdan JSON dosyalarını ücretsiz olarak indirebileceğiniz ve herhangi bir kısıtlama olmadan kullanabileceğiniz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım. Masaüstü
Arka plan rengi: #e0e0e0 Yüzerken bu arka planın rengini değiştirmek için arka plan rengini yönlendirin.
Arka plan rengi: #000000 Mesafe Tasarım sekmesine geçin ve bazı özel alan değerleri ekleyin. Bu öğretici işlevi yapmak için yalnızca ViewPort birimini kullanacağız. Bu, ekran boyutu ne olursa olsun, her şeyin yerinde kalmasını sağlamaya yardımcı olacaktır.
Üst Marj: 5VW
Alt marj: 5VW
Sol kenar boşluğu: 3VW
Doğru marj: 3VW
Üst dolgu: 0px
Aşağıda dolgu: 0px Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve gradyanın arka planını ekleyin. Renk 1: #ff5b79
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 15
Son pozisyon:% 15
Satır boyutu ayarlarındaki bazı değişiklikler için yapıştırıcı. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe ve boşluk ayarlarına bazı özel dolgu değerleri ekleyin. Üst Dolgu: 9VW
Dolgu Alt: 9VW
Sütun 1 Sol dolgu: 5VW
Sütun 1 Doğru: 5VW
Sütun 2 Sol dolgu: 5VW
Sütun 2 Doğru: 5VW
Metin modülünü sütun 1’e ekleyin, içerikleri ekleyin Modül eklemeye başlamanın zamanı geldi! İhtiyacımız olan ilk modül sütun 1’deki metin modülüdür. H3 içeriği ve bağlantılar ekleyin. Bağlantı metnini ayarlayın Ardından, bağlantı ayarlarını açın ve bağlantı ekranında bazı değişiklikler yapın. Bağlantı yazı tipi: Didact Gothic
Bağlantı yazı tipi stili: alt çizgiler
Hat Çizgisi Stili: Katı
Renkli metin bağlantısı: #ffffff
Bağlantı Metin Boyutu: 20px
Başlık metin ayarları da H3 metin ayarlarını değiştirir. Başlık 3 Yazı Tipi: Didact Gothic
Başlık 3 Renk Metni: #ffffff
Başlık 3 Metin Boyutu: 50px
Son fakat en az değil, masaüstündeki modülü devre dışı bırakın. Bu modülün yalnızca daha küçük ekran boyutlarında görünmesi gerekiyor. Bölücü modülünü Sütun 2’nin ikinci görünürlüğüne ekleyin ve son olarak Sütun 1’deki gerekli modüller bölücü modülüdür. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
O zaman renk bölücünün rengini değiştirin. Renk: #ffffff
Mesafe Bölücü modülüne de bazı özel marj değerleri ekleyin. Üst kenar: 11VW (masaüstü), 80px (tablet),
Alt kenar boşluğu: 50 piksel (tablet ve cep telefonu)
Sütun 2’ye Metin Modülü #1 ekleyin İkinci sütuna doldurun! Metin modülünü H4 seçilen bazı içeriklerle ekleyin. Başlık metin ayarları Ardından, H4 metin ayarlarını açın ve bazı değişiklikler yapın. Başlık 4 Yazı Tipi: Didact Gothic Başlık 4 yazı tipi ağırlığı: kalınlık
Başlık 4 Renk Metni: #ffffff
Başlık 4 Metin Boyutu: 2VW (masaüstü), 40px (tablet), 30px (telefon)
#2 metin modülünü sütun 2’ye ekleyin İçeriği önceki metin modülünün hemen altına ekleyin, devam edin ve seçilen bazı paragraf içeriğine sahip diğerlerini ekleyin.
Metin Ayarları Sonraki metin ayarlarını açın ve bazı değişiklikler yapın. Metin yazı tipi: Didact Gothic Metin rengi: #ffffff
Metin Boyutu: 0.9VW (masaüstü), 18px (tablet ve cep telefonu)
Hat yüksekliği metni: 2em
Mesafe Bazı özel marj değerleri de ekleyin.
Üst Marj: 2VW Doğru marj: 15vw
Satır #2 sütun yapısı ekle İlk satırı ve tüm modülleri değiştirmeyi bitirdikten sonra, aşağıdaki sütun yapısını kullanarak devam edebilir ve yeni satırlar ekleyebilirsiniz:
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 çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Sıra alanı ayarlarındaki tüm varsayılan dolguları silmek için mesafe de.
Üst dolgu: 0px Aşağıda dolgu: 0px
Son fakat en az değil, bu çizgiyi tabletler ve cep telefonlarında gizleyin.
Metin modülünü sütuna ekleyin ve bu satırda ihtiyacımız olan tek modülün içeriği metin modülüdür. Bazı H3 içeriği ve bağlantıları ekleyin.
Varsayılan arka plan rengi daha sonra, arka plan ayarını açın ve arka plan rengini metin modülüne ekleyin.
Arka plan rengi: #e0e0e0 Yüzerken bu arka plan rengini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: RGBA (255,255,255.0)Sonraki varsayılan metin ayarları, metin ayarlarını açın ve bazı değişiklikler yapın. Bağlantı yazı tipi: Didact Gothic
Bağlantı yazı tipi stili: alt çizgiler Hat Çizgisi Stili: Katı
Renkli metin bağlantısı: #ffffff
Bağlantı Metin Boyutu: 0px
Bağlantı mektubu alanı: -1px
İmleçi yönlendirirken bağlantının metninin boyutunu değiştirmek için değişikliklerin metin ayarlarına gidin.
Bağlantı Metin Boyutu: 1.7VW
Varsayılan başlık metin ayarları, H3 metin ayarlarında bazı değişiklikler yaparak devam eder. Başlık 3 Yazı Tipi: Didact Gothic
Başlık 3 yazı tipi ağırlığı: kalın Başlık 3 Renk Metni: #000000
Başlık 3 Metin Boyutu: 12VW
Başlık alanı 3 harf: -0.8vw
İmleçi yönlendirirken başlıkların metin ayarlarına gidin. Bazı H3 metin ayarlarını değiştirin.
Başlık 3 Renk Metni: #ffffff
Başlık 3 Metin Boyutu: 4VW Başlık alanı 3 harf: -0.2vw
Mesafe, o zaman açık alan ayarları ve bazı özel marj ve dolgu değerleri ekleyin.
Üst kenar: -34.3vw
Alt marj: -5vw Üst Dolgu: 10VW
Dolgu Alt: 10VW
Sol dolgu: 26.5vw
İmleçi yönlendirirken spasi doğrudan değiştirme boşluk değerleri.
Üst kenar: -34.1vw
Alt marj: -5vw Üst Dolgu: 12VW
Dolgu Alt: 12VW
Sol dolgu: 11.5vw
Geçiş, metin modülünün geçiş süresini de artırır.
Geçiş süresi: 400ms
İlk bölümünüz bittikten sonra klon, devam edin ve tüm parçaları istediğiniz kadar klonlayın. Öğreticinin bir sonraki bölümünde, her kopya için yapmanız gereken değişiklikleri size göstereceğiz. Değiştirmeniz gereken ilk şeyin arka plan rengini değiştirin Arka plan rengi havada kaleminin havada kalmasıdır.
Arka plan rengi: #ff5b79 Gradyan Çizginin Arka Planını Değiştir #1 Gradyan Çizginin Arka Planını Değiştir #1. Renk 1: #000000 Metnin rengini ve kopyasını metnin rengi ve tüm kopyalarla değiştirin.
Başlık 3 Renk Metni: #FF5B79 Alan modülünü son olarak değiştirin, ancak en az değil, metin modülünün sol dolgusunu 2 numaralı satırda değiştirin. Kullanmanız gereken sol dolgu miktarı, kullandığınız içeriğin uzunluğuna bağlıdır.
Sol dolgu: 21VW Düzeni ücretsiz olarak indirin, elinizi düzene 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 -postalar almayacaksınız.
Dosyayı indir 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çtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstü
Hücresel
