Divi ile güzel bir arka plan gradyanının yönünü işaret etmek için nasıl geçiş yapılır
Son zamanlarda, tek bir kod satırına dokunmak zorunda kalmadan size daha havalı efektler yapmanıza izin veren bazı ek havuz seçenekleri eklenmiştir. Şimdi, örneğin, inanılmaz bir gradyan arka planında yüzer bir geçiş yapabilirsiniz. Degrade sütunlarını, satırları ve parçaları birleştirerek benzersiz bir tasarım elde edebilirsiniz. Bu öğreticide size nasıl yapılacağını göstereceğiz. Birkaç yaygın adımdan başlayacağız. Bittiğinde, tasarımın üç örneğine tek tek odaklanacağız. JSON dosyalarını ücretsiz olarak da indirebilirsiniz!
Haydi Yapalım şunu. Önizleme Eğiticiye girmeden önce, bu öğretici boyunca yeniden yapacağımız üç farklı örneğin bir gözüne bakalım. örnek 1
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!
Genel Adımlar Mesafenin yeni bir kısmını ekleyin, birkaç genel adımdan başlayalım. Üzerinde çalıştığınız sayfaya yeni bir parça ekleyin ve tüm varsayılan dolguları silin. Tüm üst ve alt dolguları kaldırın, daha sonra, sütun gradyanının, satırının ve parçasının arka planını birleştirmemize yardımcı olur.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın kabın tüm genişliğini karşılamasına izin verin. Genişlik:% 100
Maksimum genişlik:% 100
Uzaklık Alan ayarlarına geçin ve tüm dolguyu varsayılan olarak silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun için Metin Modülü #1 ekle H1 içeriği ekleyin, modül eklemeye başlayalım! İhtiyacımız olan ilk şey, bazı H1 içeriğine sahip metin modülüdür. H1 Metin Ayarları Tasarım sekmesine geçin ve uygun H1 metin ayarlarını değiştirin: Yazı tipi başlığı: Montserrat
Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #000000
Başlık Metin Boyutu: 3VW (Masaüstü), 6VW (Tablet ve Cep Telefonu)
Uzay Mektubu Başlığı: 0.7vw
Yapıştırıcı Bir sonraki boyut ayarlarını açın ve genişliği modül seviyesi ile birlikte değiştirin. Genişlik:% 48 (masaüstü),% 60 (tablet ve cep telefonu) Modül hizalaması: merkez
Bazı üst kenar boşlukları ekleyerek mesafe tam modül tasarımı.
Üst kenar boşluğu: 10vw Bölme modülünü görünürlük sütununa bir sonraki modüle ekleyin! Bölme modülünü ekleyin ve ‘görüntüleme’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet Hat bir sonraki satırı değiştirir.
Çizgi rengi: #000000 Yapıştırıcı boyut ayarlarına geçer ve aşağıdaki ayarları uygulur:
Bölücü ağırlığı: 0.1vw Genişlik:% 10 (masaüstü),% 16 (tablet),% 25 (cep telefonu)
Modül hizalaması: merkez
Mesafe Çeşitli ekran boyutlarına da bazı özel dolgu değerleri ekleyin.
Üst Dolgu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon) Aşağıda dolgu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon)
Başka bir metin modülü olan bir sonraki modüle artı sütuna metin modülü #2 ekleyin. İstediğiniz bazı paragraf içeriği ekleyin.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Metin yazı tipi: SANS’ı aç Hizalama metni: haklı çıkar
Yüksek çizgi metin: 2.3em
Bir sonraki boyut ayarlarında yapışkan değişim genişliği ve tesviye modülleri:
Genişlik:% 30 (masaüstü),% 54 (tablet),% 70 (cep telefonu) Modül hizalaması: merkez
Düğme modülünü sütuna ekle Bir sonraki bölümün bir kopyasını ekleyin ve son olarak sütunda ihtiyacımız olan şey düğme modülüdür. Seçtiğiniz bazı kopyaları ekleyin.
Hizalama tasarım sekmesine geçer ve düğme hizalamasını değiştirir. Düğmenin hizalanması: orta Düğme ayarlarını da değiştir düğmesini ayarlayın.
Düğmeler için özel bir stil kullanın: evet
Aşağıda dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Sol dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Sağ dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Klon kısmı, bölümü bitirdikten sonra iki kez, iki kez klonlayabilirsiniz; her örnek için bir tane.
Gradient Hover Geçişinin Arka Planını Yeniden Yapın #1
Varsayılan gradyanın arka plan kısmı İlk Hover geçişini yapmaya başlayalım! Bölüm ayarlarını açın ve aşağıdaki varsayılan gradyan arka planını ekleyin: Renk 1: #D1D1FF Renk 2: #F7F7F7 Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
DEĞERLENDİRİM ARKAMININ YÖNETİ YÖNLEŞTİRME YANIŞTIRMAK İÇİN GREZİSTENİN ARKAMANI DEĞİŞTİRİN.
Renk 1: #F7F7F7
Renk 2: #FFC1C7 Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Satır Arka Plan Degradesi Varsayılan Bir sonraki satır ayarlarını açın ve aşağıdaki varsayılan gradyan arka plan ayarlarını uygulayın:
Renk 1: #7032ff
Renk 2: RGBA (255,255,255.0) Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 10
Son pozisyon:% 10
DEĞERLENDİRİM ARKAMININ YÖNETİ YÖNLEŞTİRME YANIŞTIRMAK İÇİN GREZİSTENİN ARKAMANI DEĞİŞTİRİN.
Renk 1: RGBA (255,255,255.0)
Renk 2: #FF324A Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 90
Son pozisyon:% 90
Bir arka plan gradyanını yeniden oluşturun, geçiş #2’yi işaret edin
Varsayılan gradyanın arka plan kısmı ikinci örneğe! Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:
Renk 1: #F7F7F7 Renk 2: #ECEAFF Gradyan Yönü: 156 İlk Çekme:% 50
Son pozisyon:% 50
Gradyanın arka planına gidin İmleci yönlendirirken farklı bir gradyan arka plan ekleyin:
Renk 1: #ffeaec
Renk 2: #F7F7F7
Gradyan yönü: 204deg Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Varsayılan gradyanın arka plan satırı bir sonraki satır ayarlarını açın ve aşağıdaki gradyan arka plan ayarlarını uygulayın:
Renk 1: #A932ff
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal Radyal yön: sol alt
Başlangıç Pozisyonu:% 14
Son pozisyon:% 14
Arka plan gradyanının yönünü yönlendirin Doğru havada satır gradyanının arka planını değiştirin:
Renk 1: #FF324A
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal Radyal yön: sol üst
Başlangıç Pozisyonu:% 14
Son pozisyon:% 14
Varsayılan gradyan arka plan sütunu sütun ayarlarına geçer ve aşağıdaki gradyan arka planını ekler:
Renk 1: #A932ff
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal Radyal yön: sağ üst
Başlangıç Pozisyonu:% 14
Son pozisyon:% 14
Arka plan gradyanının yönünü Yönlendirin İmleciyi yönlendirirken sütun gradyanının arka planını değiştirin:
Renk 1: #FF324A
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal Radyal yön: sağ alt
Başlangıç Pozisyonu:% 14
Son pozisyon:% 14
Bir arka plan gradyanını yeniden oluşturun, geçiş #3’ü işaret edin
Varsayılan gradyanın arka plan kısmı bir sonraki ve son örneğe! Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını uygulayın:
Renk 1: #FFC1C7
Renk 2: #ffffff Gradyan Türü: Radyal Radyal Yön: Üst
Başlangıç Pozisyonu:% 45
Son pozisyon:% 45
Arka Plan Gradyanın Yönü Yönlendirin İmleci yönlendirirken gradyanın arka planını değiştirin.
Renk 1: #FFC1C7
Renk 2: #ffffff
Gradyan Türü: Radyal Radyal Yön: Sol
Başlangıç Pozisyonu:% 20
Son pozisyon:% 20
Satır Arka Plan Degradesi Varsayılan Bir sonraki satır ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin: Renk 1: #d3dffff
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal yön: aşağıda Başlangıç Pozisyonu:% 45
Son pozisyon:% 45
DEĞERLENDİRİM ARKAMININ YÖNÜ DOĞRULUĞU Uygun gradyan arka planı değiştirin:
Renk 1: #D3DFFFF
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal yön: doğru Başlangıç Pozisyonu:% 20
Son pozisyon:% 20
Son varsayılan gradyan arka plan sütunu, sütun gradyanının arka planını ekleyin ve bitirin!
Renk 1: #F7F7F7
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez Başlangıç Pozisyonu:% 41
Son pozisyon:% 41
Önizleme Şimdi tüm adımları geçtikten sonra, bu öğretici boyunca tekrarladığımız üç örneğin nihai sonuçlarına bakalım! örnek 1
Örnek #2
Örnek #3
Bu yazıdaki son zihin, size yalnızca varsayılan Divi seçeneğiyle güzel bir havalı geçiş oluşturmak için DIVI Ek Gradyan Hover seçeneğini kullanmanın yaratıcı yollarını gösterdik. Birkaç genel adımla başladık ve üç örneğin her birini yeniden yapmaya devam ettik. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
Genel Adımlar Mesafenin yeni bir kısmını ekleyin, birkaç genel adımdan başlayalım. Üzerinde çalıştığınız sayfaya yeni bir parça ekleyin ve tüm varsayılan dolguları silin. Tüm üst ve alt dolguları kaldırın, daha sonra, sütun gradyanının, satırının ve parçasının arka planını birleştirmemize yardımcı olur.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın kabın tüm genişliğini karşılamasına izin verin. Genişlik:% 100
Maksimum genişlik:% 100
Uzaklık Alan ayarlarına geçin ve tüm dolguyu varsayılan olarak silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun için Metin Modülü #1 ekle H1 içeriği ekleyin, modül eklemeye başlayalım! İhtiyacımız olan ilk şey, bazı H1 içeriğine sahip metin modülüdür. H1 Metin Ayarları Tasarım sekmesine geçin ve uygun H1 metin ayarlarını değiştirin: Yazı tipi başlığı: Montserrat
Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #000000
Başlık Metin Boyutu: 3VW (Masaüstü), 6VW (Tablet ve Cep Telefonu)
Uzay Mektubu Başlığı: 0.7vw
Yapıştırıcı Bir sonraki boyut ayarlarını açın ve genişliği modül seviyesi ile birlikte değiştirin. Genişlik:% 48 (masaüstü),% 60 (tablet ve cep telefonu) Modül hizalaması: merkez
Bazı üst kenar boşlukları ekleyerek mesafe tam modül tasarımı.
Üst kenar boşluğu: 10vw Bölme modülünü görünürlük sütununa bir sonraki modüle ekleyin! Bölme modülünü ekleyin ve ‘görüntüleme’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet Hat bir sonraki satırı değiştirir.
Çizgi rengi: #000000 Yapıştırıcı boyut ayarlarına geçer ve aşağıdaki ayarları uygulur:
Bölücü ağırlığı: 0.1vw Genişlik:% 10 (masaüstü),% 16 (tablet),% 25 (cep telefonu)
Modül hizalaması: merkez
Mesafe Çeşitli ekran boyutlarına da bazı özel dolgu değerleri ekleyin.
Üst Dolgu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon) Aşağıda dolgu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon)
Başka bir metin modülü olan bir sonraki modüle artı sütuna metin modülü #2 ekleyin. İstediğiniz bazı paragraf içeriği ekleyin.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Metin yazı tipi: SANS’ı aç Hizalama metni: haklı çıkar
Yüksek çizgi metin: 2.3em
Bir sonraki boyut ayarlarında yapışkan değişim genişliği ve tesviye modülleri:
Genişlik:% 30 (masaüstü),% 54 (tablet),% 70 (cep telefonu) Modül hizalaması: merkez
Düğme modülünü sütuna ekle Bir sonraki bölümün bir kopyasını ekleyin ve son olarak sütunda ihtiyacımız olan şey düğme modülüdür. Seçtiğiniz bazı kopyaları ekleyin.
Hizalama tasarım sekmesine geçer ve düğme hizalamasını değiştirir. Düğmenin hizalanması: orta Düğme ayarlarını da değiştir düğmesini ayarlayın.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 0.8VW (Masaüstü), 2VW (Tablet), 2.8VW (Cep Telefonu)
Metin Renk Düğmesi: #000000
Sınır sınır genişliği: 1pxradius sınır: 1 piksel
Yazı tipi düğmesi: Montserrat
Mesafe ve çeşitli ekran boyutlarına bazı özel alan değerleri ekleyin.
Üst kenar: 2VW (masaüstü), 8VW (tablet ve cep telefonu)
Alt marj: 10vw
Aşağıda dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon)
Sol dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Sağ dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Klon kısmı, bölümü bitirdikten sonra iki kez, iki kez klonlayabilirsiniz; her örnek için bir tane.
Gradient Hover Geçişinin Arka Planını Yeniden Yapın #1
Varsayılan gradyanın arka plan kısmı İlk Hover geçişini yapmaya başlayalım! Bölüm ayarlarını açın ve aşağıdaki varsayılan gradyan arka planını ekleyin: Renk 1: #D1D1FF Renk 2: #F7F7F7 Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
DEĞERLENDİRİM ARKAMININ YÖNETİ YÖNLEŞTİRME YANIŞTIRMAK İÇİN GREZİSTENİN ARKAMANI DEĞİŞTİRİN.
Renk 1: #F7F7F7
Renk 2: #FFC1C7 Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Satır Arka Plan Degradesi Varsayılan Bir sonraki satır ayarlarını açın ve aşağıdaki varsayılan gradyan arka plan ayarlarını uygulayın:
Renk 1: #7032ff
Renk 2: RGBA (255,255,255.0) Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 10
Son pozisyon:% 10
DEĞERLENDİRİM ARKAMININ YÖNETİ YÖNLEŞTİRME YANIŞTIRMAK İÇİN GREZİSTENİN ARKAMANI DEĞİŞTİRİN.
Renk 1: RGBA (255,255,255.0)
Renk 2: #FF324A Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 90
Son pozisyon:% 90
Bir arka plan gradyanını yeniden oluşturun, geçiş #2’yi işaret edin
Varsayılan gradyanın arka plan kısmı ikinci örneğe! Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin:
Renk 1: #F7F7F7 Renk 2: #ECEAFF Gradyan Yönü: 156 İlk Çekme:% 50
Son pozisyon:% 50
Gradyanın arka planına gidin İmleci yönlendirirken farklı bir gradyan arka plan ekleyin:
Renk 1: #ffeaec
Renk 2: #F7F7F7
Gradyan yönü: 204deg Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Varsayılan gradyanın arka plan satırı bir sonraki satır ayarlarını açın ve aşağıdaki gradyan arka plan ayarlarını uygulayın:
Renk 1: #A932ff
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal Radyal yön: sol alt
Başlangıç Pozisyonu:% 14
Son pozisyon:% 14
Arka plan gradyanının yönünü yönlendirin Doğru havada satır gradyanının arka planını değiştirin:
Renk 1: #FF324A
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal Radyal yön: sol üst
Başlangıç Pozisyonu:% 14
Son pozisyon:% 14
Varsayılan gradyan arka plan sütunu sütun ayarlarına geçer ve aşağıdaki gradyan arka planını ekler:
Renk 1: #A932ff
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal Radyal yön: sağ üst
Başlangıç Pozisyonu:% 14
Son pozisyon:% 14
Arka plan gradyanının yönünü Yönlendirin İmleciyi yönlendirirken sütun gradyanının arka planını değiştirin:
Renk 1: #FF324A
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal Radyal yön: sağ alt
Başlangıç Pozisyonu:% 14
Son pozisyon:% 14
Bir arka plan gradyanını yeniden oluşturun, geçiş #3’ü işaret edin
Varsayılan gradyanın arka plan kısmı bir sonraki ve son örneğe! Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını uygulayın:
Renk 1: #FFC1C7
Renk 2: #ffffff Gradyan Türü: Radyal Radyal Yön: Üst
Başlangıç Pozisyonu:% 45
Son pozisyon:% 45
Arka Plan Gradyanın Yönü Yönlendirin İmleci yönlendirirken gradyanın arka planını değiştirin.
Renk 1: #FFC1C7
Renk 2: #ffffff
Gradyan Türü: Radyal Radyal Yön: Sol
Başlangıç Pozisyonu:% 20
Son pozisyon:% 20
Satır Arka Plan Degradesi Varsayılan Bir sonraki satır ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin: Renk 1: #d3dffff
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal yön: aşağıda Başlangıç Pozisyonu:% 45
Son pozisyon:% 45
DEĞERLENDİRİM ARKAMININ YÖNÜ DOĞRULUĞU Uygun gradyan arka planı değiştirin:
Renk 1: #D3DFFFF
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal yön: doğru Başlangıç Pozisyonu:% 20
Son pozisyon:% 20
Son varsayılan gradyan arka plan sütunu, sütun gradyanının arka planını ekleyin ve bitirin!
Renk 1: #F7F7F7
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez Başlangıç Pozisyonu:% 41
Son pozisyon:% 41
Önizleme Şimdi tüm adımları geçtikten sonra, bu öğretici boyunca tekrarladığımız üç örneğin nihai sonuçlarına bakalım! örnek 1
Örnek #2
Örnek #3
Bu yazıdaki son zihin, size yalnızca varsayılan Divi seçeneğiyle güzel bir havalı geçiş oluşturmak için DIVI Ek Gradyan Hover seçeneğini kullanmanın yaratıcı yollarını gösterdik. Birkaç genel adımla başladık ve üç örneğin her birini yeniden yapmaya devam ettik. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
