Divi ile yüzerken 3 adımlı bir bulanık açıklama nasıl yapılır
Dışarıdaki birçok şirket web sitesi yaklaşımlarını birkaç noktada paylaşıyor. Yaklaşımın bir bölümünü oluştururken, geleneksel bir şekilde halledebilirsiniz veya daha fazla etkileşim eklemeyi deneyebilirsiniz. İkinci seçeneği gerçekleştirmenin bir yolunu arıyorsanız, bu gönderiyi beğeneceksiniz. Bu öğreticide, yeni Divi boyutu seçeneğini kullanarak 3 adımlı bir açıklamanın nasıl açıklanacağını göstereceğiz. Başlığı göstererek başlayacağız, adımlara yol açan üç ok göstererek devam edeceğiz ve animasyonun açıklamasını ifade ederek etkiyi tamamlayacağız. JSON dosyalarını ücretsiz olarak da indirebilirsiniz!
Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
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. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Yaratmaya başlayalım!
YouTube kanalına abone Oluruz Varsayılan gradyan arka planının yeni bir bölümünü ekliyoruz, yapmanız gereken ilk şey üzerinde çalıştığınız sayfaya yeni bir parça eklemektir. Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:
Renk 1: #FFA3AD
Renk 2: #FFCEA3
Gradyan yönü: 122deg
Degrade arka planının yönünü yönlendirin Yüzerken gradyan arka planını değiştirin: Renk 1: #000000
Renk 2: #ffffff
Gradyan Türü: Radyal
Radyal Yön: Üst
Başlangıç Pozisyonu:% 36
Son pozisyon:% 26
Mesafe Tasarım sekmesine geçin ve bir sonraki geleneği yukarı ve aşağı bir miktar ekleyin. Üst Dolgu: 1VW
Dolgu Alt: 1VW
Bu yazının ilerleyen saatlerinde taşma, o bölümün yüksekliği ile oynayacağız. Hiçbir şeyin kabı aşmamasını sağlamak için, görünürlük ayarlarındaki taşmayı gizleyeceğiz. Yatay taşma: gizli
Dikey taşma: gizli
Satır #1 sütun yapısı ekle Ayarları tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edebilirsiniz: Metin modülünü satıra ekle H2 içeriği ekle satır sütununa yeni bir metin modülü ekleyin ve H2 içerik seçiminizi girin. Metin ayarı H2 tasarım sekmesine taşınır ve uygun H2 metin ayarlarını değiştirir: Başlık 2 Yazı Tipi: Montserrat Başlık 2 Font Ağırlığı: Yarı Kalınlık
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #ffffff
Başlık 2 Metin Boyutu: 2VW (Masaüstü), 5VW (Tablet), 6VW (Telefon)
Başlık alanı 2 harf: -2px
Aşağıdaki sütun yapısını kullanarak ikinci satırı ekleyerek #2 sütun yapısı ekleyin:
Herhangi bir modül eklemeden mesafe, satır ayarlarını açın ve özellikle çeşitli ekran boyutlarına üst ve alt pedler ekleyin. Üst Dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon) Aşağıda dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Tüm sütunların daha küçük bir ekran boyutunun yanında göründüğünden emin olmak için, hattın ana öğesine bir CSS kod satırı ekleyeceğiz. Ekran: Flex;
Ok metin modülünü Sütun 1’e ekleyin Sembolümüzü ekle Animasyonlu oklar eklemek için bu satırı kullanacaktır. Satırın ilk sütununa yeni bir metin modülü ekleyin ve içerik kutusuna ‘↓’ sembolünü ekleyin. Metin Ayarları Tasarım sekmesine geçer ve metin ayarlarını değiştirir. Hizalama Metni: Doğru Metin Rengi: #FFA3AD
Metin Boyutu: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Mesafe Sonraki alan ayarlarına bazı özel marj değerleri ekleyin.
Üst kenar boşluğu: -3vw Alt marj: 8vw
Dönüşüm ayarlarında modülü çevirin.
Sol: 45 derece Aşağıdaki ayarları kullanarak animasyon ve özel animasyon ekleyin:
Animasyon Stili: Slayt Animasyon yönü: merkez
Animasyon gecikmesi: 1000ms
Sütun 2’ye Ok metin modülünü ekleyin Sembol ekleyin İkinci sütuna yeni bir satır ekleyerek ve içerik kutusuna ‘↓’ sembolü ekleyerek devam edin.
Hizalama Metni: Orta Metin Rengi: #FFA3AD Metin Boyutu: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Mesafe Bir sonraki geleneğe bazı kenar boşlukları ekleyin.
Üst Marj: 1VW
Animasyon ve aşağıdaki animasyon ayarlarını uygulayın: Animasyon Stili: Slayt
Animasyon yönü: merkez Sütun 3’e Ok metin modülünü ekleyin. Sütun 3’teki Son Ok metin modülüne sembol ekleyin.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Hizalama Metni: Sol Metin Rengi: #FFA3AD Metin Boyutu: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Mesafe Bir sonraki negatife bazı kenar boşlukları ekleyin.
Üst kenar boşluğu: -3vw
Dönüşüm ayarlarında modülü çevirin. Sol: 315 derece
Aşağıdaki animasyonu ekleyerek animasyon ve tam modül ayarları:
Satır #3 sütun yapısı ekleyin İkinci satırı bitirdikten sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edebilirsiniz:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarındaki maksimum genişliğin genişliğini ve genişliğini değiştirin.
Genişlik:% 100 Maksimum genişlik:% 100 Mesafe Bir sonraki çeşitli ekran boyutlarına bazı özel dolgu değerleri ekleyin.
Üst Dolgu: 2VW (masaüstü), 8VW (tablet), 6VW (Telefon)
Aşağıda dolgu: 2VW (masaüstü), 8VW (tablet), 6VW (Telefon) Sol dolgu: 10VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ dolgu: 10VW (masaüstü), 0VW (Tablet ve Cep Telefonu) Ekranlar Tüm sütunların küçük ekran boyutunun yanında göründüğünden emin olmak için satırın ana öğesine bir satır CSS kodu ekleyin. Ekran: Flex;
Bu öğreticinin son bölümünde taşarak, çizginin yüksekliğini değiştireceğiz. Hazırlamak için, görünürlük ayarlarında taşmayı gizleyerek hiçbir şeyin satır kabını aşmamasını sağlamalıyız.
Yatay taşma: gizli
Dikey taşma: gizli Sayı metin modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! İlk sütuna yeni bir metin modülü ekleyin ve numaraları girin. Gradyan Arka Plan Aşağıdaki ayarları kullanarak gradyanın arka planını modüle ekleyin:
Renk 1: #FFA3AD
Renk 2: #FFCEA3 Gradyan yönü: 122deg Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: Montserrat
Metin yazı tipi ağırlığı: çok kalın
Hizalama Metni: Orta Metin rengi: #ffffff
Metin Boyutu: 2VW (masaüstü), 4VW (tablet), 8VW (telefon)
Hat yüksekliği metni: 1em
Mesafe Çeşitli ekran boyutlarına da üst ve alt pedler ekleyin.
Üst Dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Aşağıda dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Sınır ayarındaki her köşeye ’20px’ ekleyerek sınır ve modül ayarlarını tamamlayın. Metin Modülü Klon Numarası İki kez ve Kalan sütuna yinelenmeyi yerleştirin Metin modülünü sütun 1’deki iki kez klonlayarak devam edin ve kopyayı geri kalan iki sıra sütuna yerleştirin.
Numarayı değiştirin Her bir kopyadaki numarayı değiştirdiğinizden emin olun.
Blurb modülünü sütun 1’e ekleyin, ilk sütunda ihtiyacımız olan ikinci modülün içeriğini bulanıklık modülü ekleyin. İstediğiniz bazı içerikleri girin. Simgeyi seçerek simgeyi seçin. Arka plan rengi ve arka plan rengini beyaza değiştirin. Arka plan rengi: #ffffff Simgeyi ayarlama Tasarım sekmesine geçer ve uygun simge ayarlarını değiştirin: Ikon Color: #FFCEA3 Simge Yerleştirme: Üst Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 4VW (masaüstü), 5VW (tablet), 6VW (telefon) Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı tipi başlığı: Montserrat
Ağır yazı tipi başlığı: kalın
Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #000000 Başlık Metin Boyutu: 1VW (masaüstü), 2VW (tablet), 4VW (telefon)
Gövde metni ayarları içerik metin ayarlarına denk gelir.
Vücut metninin hizalanması: orta
Gövde metni boyutu: 0.6vw (masaüstü), 1.3vw (tablet), 2vw (telefon)
Vücut Hattı Yüksekliği: 2.5EM
Mesafemiz ayrıca çeşitli ekran boyutlarında aşağıdaki özel dolgu değerlerini ekleyerek modülümüze istenen şekle verir: Üst Pilding: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Aşağıda dolgu: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Sol dolgu: 1VW
Doğru dolgu: 1VW Sınırlama bir sonraki sınır ayarında her köşeye ’20px’ ekleyin.
Kutunun gölgesi ve pürüzsüz bir kutu gölgesi ekleyerek biraz derinlik sağlayın.
Gölge Rengi: RGBA (0.0,0,0.07)
Son animasyon, modüle animasyon ekleyin.
Animasyon Stili: Slayt Animasyon yönü: merkez Animasyon gecikmesi: 1000ms
Klon bulanık modülü iki kez ve kalan sütuna yerleştirin Bulanık modülünü sütun 1’de tamamladıktan sonra, üç kez klonlayabilir ve kalan iki sıra sütuna yerleştirebilirsiniz. İkinci yinelenen içeriği değiştirin İçeriği değiştirdiğinizden emin olun her iki kopya. Sıra #3 varsayılan yüksekliğin boyut ayarını değiştirin Şimdi, bir Hover efekt işlevi oluşturmak için son satır ayarlarını açacağız ve boyut ayarlarına gideceğiz. Bir kez orada, yüksekliği çeşitli ekran boyutlarında değiştireceğiz.
Yükseklik: 6VW (masaüstü), 18VW (tablet), 24VW (Telefon)
Yükseklik Doğrudan İmlecimiz imleci yönlendirirken yüksekliği normale döndürür.
Yükseklik: Otomatik Yüksek Varsayılan Bölümün Boyutunu Ayarla Bir sonraki bölüm ayarlarını açın ve uygun yüksekliği değiştirin: Yükseklik: 7VW (masaüstü), 15VW (tablet), 20VW (Telefon) Yükseklik noktası Yüzer ve bittiğinde imleç dönüş yüksekliği!
Yükseklik: Otomatik Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Yaratmaya başlayalım!
YouTube kanalına abone Oluruz Varsayılan gradyan arka planının yeni bir bölümünü ekliyoruz, yapmanız gereken ilk şey üzerinde çalıştığınız sayfaya yeni bir parça eklemektir. Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:
Renk 1: #FFA3AD
Renk 2: #FFCEA3
Gradyan yönü: 122deg
Degrade arka planının yönünü yönlendirin Yüzerken gradyan arka planını değiştirin: Renk 1: #000000
Renk 2: #ffffff
Gradyan Türü: Radyal
Radyal Yön: Üst
Başlangıç Pozisyonu:% 36
Son pozisyon:% 26
Mesafe Tasarım sekmesine geçin ve bir sonraki geleneği yukarı ve aşağı bir miktar ekleyin. Üst Dolgu: 1VW
Dolgu Alt: 1VW
Bu yazının ilerleyen saatlerinde taşma, o bölümün yüksekliği ile oynayacağız. Hiçbir şeyin kabı aşmamasını sağlamak için, görünürlük ayarlarındaki taşmayı gizleyeceğiz. Yatay taşma: gizli
Dikey taşma: gizli
Satır #1 sütun yapısı ekle Ayarları tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edebilirsiniz: Metin modülünü satıra ekle H2 içeriği ekle satır sütununa yeni bir metin modülü ekleyin ve H2 içerik seçiminizi girin. Metin ayarı H2 tasarım sekmesine taşınır ve uygun H2 metin ayarlarını değiştirir: Başlık 2 Yazı Tipi: Montserrat Başlık 2 Font Ağırlığı: Yarı Kalınlık
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #ffffff
Başlık 2 Metin Boyutu: 2VW (Masaüstü), 5VW (Tablet), 6VW (Telefon)
Başlık alanı 2 harf: -2px
Aşağıdaki sütun yapısını kullanarak ikinci satırı ekleyerek #2 sütun yapısı ekleyin:
Herhangi bir modül eklemeden mesafe, satır ayarlarını açın ve özellikle çeşitli ekran boyutlarına üst ve alt pedler ekleyin. Üst Dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon) Aşağıda dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
Tüm sütunların daha küçük bir ekran boyutunun yanında göründüğünden emin olmak için, hattın ana öğesine bir CSS kod satırı ekleyeceğiz. Ekran: Flex;
Ok metin modülünü Sütun 1’e ekleyin Sembolümüzü ekle Animasyonlu oklar eklemek için bu satırı kullanacaktır. Satırın ilk sütununa yeni bir metin modülü ekleyin ve içerik kutusuna ‘↓’ sembolünü ekleyin. Metin Ayarları Tasarım sekmesine geçer ve metin ayarlarını değiştirir. Hizalama Metni: Doğru Metin Rengi: #FFA3AD
Metin Boyutu: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Mesafe Sonraki alan ayarlarına bazı özel marj değerleri ekleyin.
Üst kenar boşluğu: -3vw Alt marj: 8vw
Dönüşüm ayarlarında modülü çevirin.
Sol: 45 derece Aşağıdaki ayarları kullanarak animasyon ve özel animasyon ekleyin:
Animasyon Stili: Slayt Animasyon yönü: merkez
Animasyon gecikmesi: 1000ms
Sütun 2’ye Ok metin modülünü ekleyin Sembol ekleyin İkinci sütuna yeni bir satır ekleyerek ve içerik kutusuna ‘↓’ sembolü ekleyerek devam edin.
Hizalama Metni: Orta Metin Rengi: #FFA3AD Metin Boyutu: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Mesafe Bir sonraki geleneğe bazı kenar boşlukları ekleyin.
Üst Marj: 1VW
Animasyon ve aşağıdaki animasyon ayarlarını uygulayın: Animasyon Stili: Slayt
Animasyon yönü: merkez Sütun 3’e Ok metin modülünü ekleyin. Sütun 3’teki Son Ok metin modülüne sembol ekleyin.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Hizalama Metni: Sol Metin Rengi: #FFA3AD Metin Boyutu: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Mesafe Bir sonraki negatife bazı kenar boşlukları ekleyin.
Üst kenar boşluğu: -3vw
Dönüşüm ayarlarında modülü çevirin. Sol: 315 derece
Aşağıdaki animasyonu ekleyerek animasyon ve tam modül ayarları:
Animasyon Stili: Slayt
Animasyon yönü: merkez
Satır #3 sütun yapısı ekleyin İkinci satırı bitirdikten sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edebilirsiniz:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarındaki maksimum genişliğin genişliğini ve genişliğini değiştirin.
Genişlik:% 100 Maksimum genişlik:% 100 Mesafe Bir sonraki çeşitli ekran boyutlarına bazı özel dolgu değerleri ekleyin.
Üst Dolgu: 2VW (masaüstü), 8VW (tablet), 6VW (Telefon)
Aşağıda dolgu: 2VW (masaüstü), 8VW (tablet), 6VW (Telefon) Sol dolgu: 10VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ dolgu: 10VW (masaüstü), 0VW (Tablet ve Cep Telefonu) Ekranlar Tüm sütunların küçük ekran boyutunun yanında göründüğünden emin olmak için satırın ana öğesine bir satır CSS kodu ekleyin. Ekran: Flex;
Bu öğreticinin son bölümünde taşarak, çizginin yüksekliğini değiştireceğiz. Hazırlamak için, görünürlük ayarlarında taşmayı gizleyerek hiçbir şeyin satır kabını aşmamasını sağlamalıyız.
Yatay taşma: gizli
Dikey taşma: gizli Sayı metin modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! İlk sütuna yeni bir metin modülü ekleyin ve numaraları girin. Gradyan Arka Plan Aşağıdaki ayarları kullanarak gradyanın arka planını modüle ekleyin:
Renk 1: #FFA3AD
Renk 2: #FFCEA3 Gradyan yönü: 122deg Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: Montserrat
Metin yazı tipi ağırlığı: çok kalın
Hizalama Metni: Orta Metin rengi: #ffffff
Metin Boyutu: 2VW (masaüstü), 4VW (tablet), 8VW (telefon)
Hat yüksekliği metni: 1em
Mesafe Çeşitli ekran boyutlarına da üst ve alt pedler ekleyin.
Üst Dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Aşağıda dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Sınır ayarındaki her köşeye ’20px’ ekleyerek sınır ve modül ayarlarını tamamlayın. Metin Modülü Klon Numarası İki kez ve Kalan sütuna yinelenmeyi yerleştirin Metin modülünü sütun 1’deki iki kez klonlayarak devam edin ve kopyayı geri kalan iki sıra sütuna yerleştirin.
Numarayı değiştirin Her bir kopyadaki numarayı değiştirdiğinizden emin olun.
Blurb modülünü sütun 1’e ekleyin, ilk sütunda ihtiyacımız olan ikinci modülün içeriğini bulanıklık modülü ekleyin. İstediğiniz bazı içerikleri girin. Simgeyi seçerek simgeyi seçin. Arka plan rengi ve arka plan rengini beyaza değiştirin. Arka plan rengi: #ffffff Simgeyi ayarlama Tasarım sekmesine geçer ve uygun simge ayarlarını değiştirin: Ikon Color: #FFCEA3 Simge Yerleştirme: Üst Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 4VW (masaüstü), 5VW (tablet), 6VW (telefon) Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı tipi başlığı: Montserrat
Ağır yazı tipi başlığı: kalın
Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #000000 Başlık Metin Boyutu: 1VW (masaüstü), 2VW (tablet), 4VW (telefon)
Gövde metni ayarları içerik metin ayarlarına denk gelir.
Vücut metninin hizalanması: orta
Gövde metni boyutu: 0.6vw (masaüstü), 1.3vw (tablet), 2vw (telefon)
Vücut Hattı Yüksekliği: 2.5EM
Mesafemiz ayrıca çeşitli ekran boyutlarında aşağıdaki özel dolgu değerlerini ekleyerek modülümüze istenen şekle verir: Üst Pilding: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Aşağıda dolgu: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Sol dolgu: 1VW
Doğru dolgu: 1VW Sınırlama bir sonraki sınır ayarında her köşeye ’20px’ ekleyin.
Kutunun gölgesi ve pürüzsüz bir kutu gölgesi ekleyerek biraz derinlik sağlayın.
Gölge Rengi: RGBA (0.0,0,0.07)
Son animasyon, modüle animasyon ekleyin.
Animasyon Stili: Slayt Animasyon yönü: merkez Animasyon gecikmesi: 1000ms
Klon bulanık modülü iki kez ve kalan sütuna yerleştirin Bulanık modülünü sütun 1’de tamamladıktan sonra, üç kez klonlayabilir ve kalan iki sıra sütuna yerleştirebilirsiniz. İkinci yinelenen içeriği değiştirin İçeriği değiştirdiğinizden emin olun her iki kopya. Sıra #3 varsayılan yüksekliğin boyut ayarını değiştirin Şimdi, bir Hover efekt işlevi oluşturmak için son satır ayarlarını açacağız ve boyut ayarlarına gideceğiz. Bir kez orada, yüksekliği çeşitli ekran boyutlarında değiştireceğiz.
Yükseklik: 6VW (masaüstü), 18VW (tablet), 24VW (Telefon)
Yükseklik Doğrudan İmlecimiz imleci yönlendirirken yüksekliği normale döndürür.
Yükseklik: Otomatik Yüksek Varsayılan Bölümün Boyutunu Ayarla Bir sonraki bölüm ayarlarını açın ve uygun yüksekliği değiştirin: Yükseklik: 7VW (masaüstü), 15VW (tablet), 20VW (Telefon) Yükseklik noktası Yüzer ve bittiğinde imleç dönüş yüksekliği!
Yükseklik: Otomatik Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
