Divi ile yüzerken gradyanın arka planını nasıl değiştirir
Bir web sitesi oluşturmak, her ayrıntının doğru olduğundan emin olmakla ilgilidir. Tasarımınızdaki küçük ayrıntılara dikkat etmek, web sitenizin kalitesini hızla artıracak ve artıracaktır. Yeni Hover Divi seçeneği ile web sitenize kolayca küçük etkileşimler ekleyebilirsiniz. Hemen hemen tüm tasarım ayarları için sarkma seçenekleri geçerlidir. Örneğin, imleci iyi bir geçiş oluşturmaya yönlendirirken degradenin arka planını dolaylı olarak değiştirebilirsiniz. Bu blog gönderisinde size göstereceğiz. Bir gradyan geçişi elde etmenin yanı sıra, en başından beri yaptığınız her türlü web sitesi için kullanabileceğiniz inanılmaz bir tasarım örneği de yapacağız.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce, farklı ekran boyutlarında nihai sonuçlara bakalım. Statik
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 Olduğumuz bölüm #1 eklediğimiz ilk şeyin mesafesi yeni bir sayfa oluşturmak veya mevcut bir sayfayı açmak ve ona yeni bir normal bölüm eklemektir. Ayarları açın ve bazı üst ve alt kısımlar ekleyin.
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel
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 varsayılan sütun 1’in arka plan rengi, satır ayarlarını açın ve 1 sütun 1’e aşağıdaki varsayılan arka plan rengini ekleyin: Arka plan rengi: #e7ffa0
Sütun 1 Yüzerken bu arka plan rengini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: #00020C
Sütun 1 Arka plan gradyanı Degradenin arka plan rengini Sütun 1’e de ekleyin. Gerçekten şeffaf bir renk kullandığımızı göreceksiniz. Bu renk, arka plan renginin görülmesine izin verecek, bu da yüzerken değişir. Renk 1: RGBA (255,255,255.0)
Renk 2: RGBA (16,0,201,0.8)
Sütun 1 Gradyan Türü: Doğrusal
Sütun 1 Degrade Yönü: 50deg
Sütun 1 Başlangıç Pozisyonu:% 20
Sütun Rengi Sütun 2 Sütun 2’nin arka plan rengini de ekleyin. Sütun 2 arka plan rengi: #ffffff Ardından, Tasarım sekmesini açın ve boyut ayarlarını değiştirin.
Özel genişlik kullanın: evet Birim: PX
Özel genişlik: 2000px
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Uzay ayarlarına bazı özel dolgu değerleri ekleyerek daha fazla mesafe.
Üst dolgu: 0px Aşağıda dolgu: 0px
Üst Dolgu 2 Dolgu: 6VW (masaüstü), 120px (tablet ve cep telefonu)
Sütun 2 Dolgu Alt: 6VW (masaüstü), 120px (tablet ve cep telefonu)
Sol dolgu 2 sütun: 5VW (masaüstü), 80px (tablet), 50 piksel (telefon)
Sütun 2 Dolgu Sağ: 5VW (masaüstü), 80px (tablet), 50 piksel (telefon)
Kutunun gölgesi ve ayrıca pürüzsüz bir kutu gölgesinin gölgesini verir.
Bulanık Güç Gölgesi Kutusu: 100 PX Kutunun gölgesinin dağılımının gücü: -10px
Son fakat en az değil, gelişmiş sekmedeki geçiş süresini artırarak düzgün bir gradyan arka plan geçişi yapacağız.
Geçiş süresi: 1100ms Resim Modülünü Sütun 1’e ekleyin Modül eklemeye başlama zamanını yükleyin! Görüntü modülünü ilk sütuna ekleyin ve bu yazının başında indirdiğiniz ZIP klasöründe bulabileceğiniz ‘Divi-gradyan-background-the-hover-illustration-1.png’ dosyasını yükleyin.
Gradyan Arka Plan Bu görüntü modülünün arka plan ayarını açın ve gradyanın arka planını ekleyin. Diğer renklerin görülmesine izin vermek için tamamen şeffaf bir renk kullanmaya geri döndük. Renk 1: RGBA (50.217.255.0.66) Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Üst
Son pozisyon:% 57
Mesafe Ardından, modüle bazı özel üst rulmanlar ekleyin.
Üst Dolgu: 14VW Başlık metin modülünü sütun 2’ye ekleyin, içeriği ikinci sütuna ekleyin! İhtiyacımız olan ilk modül başlık metin modülüdür. Lütfen ve seçilen bazı başlık içeriği ekleyin. Başlık metin ayarları, başlık metin ayarlarını açın ve bazı değişiklikler yapın.
Yazı Tip Başlığı: Abril Fatface Başlık Metin Rengi: #000000 Başlık Metin Boyutu: 4VW (masaüstü), 60px (tablet), 40 piksel (telefon)
Açıklama metin modülünü Sütun 2’ye ekleyin İhtiyacımız olan ikinci modülün içeriğini ekleyin Başka bir metin modülü. Biraz seçim içeriği ekleyin.
Metin Ayarları Ardından, metin ayarlarını açın ve metin yönünü değiştirin.
Metin Oryantasyonu: haklı çıkar Yapıştırıcı, boyut ayarlarındaki genişliği de ayarlar. Genişlik:% 73 (masaüstü),% 100 (tablet ve cep telefonu)
Son mesafe, boşluk yapmak için modüle özel kenar boşluğunun üst ve altını ekleyin. Üst kenar: 2.5vw (masaüstü), 50px (tablet ve cep telefonu)
Alt kenar boşluğu: 2.5vw (masaüstü), 50px (tablet ve cep telefonu) Düğme Modülünü Sütun 2’ye Ekleyin Üçüncü ve son olarak ikinci sütunda ihtiyaç duyduğumuz modülün bir kopyasını ekleyin Düğme Modülü. Seçtiğiniz bazı kopyaları ekleyin.
Ayarlar Sonraki Düğme Değiştir düğmesi.
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 1.2VW (masaüstü), 14px (tablet ve cep telefonu) Metin Renk Düğmesi: #fffffff
Gradyan rengi 1: #9ea6ff
Gradyan Rengi 2: RGBA (16,0,201,0.8)
Gradien yönü: 78deg
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 30px
Mektup Mesafe Düğmesi: -1px
Mektup Ağırlığı: Çok kalın
Yazı tipi stili: büyük harf
Mesafe Bazı özel dolgu değerleri de ekleyin.
Üst dolgu: 10 piksel
Dolgu Alt: 10 piksel Sol dolgu: 40 piksel
Sağ dolgu: 40 piksel
Kutunun gölgesi ve düzgün kutunun gölgesini düğmeye uygulayın.
Bulanık Güç Gölge Kutusu: 40 PX Bölüm #2 Mesafe Ekle İlk kısmı bitirdikten sonra, bir sonraki bölüme geçeceğiz. Aşağıdaki özel dolgu değerlerini kullanarak yeni normal bölümü ekleyin:
Üst dolgu: 100 piksel Dolgu Alt: 100 piksel
Aşağıdaki sütun yapısını kullanarak bölüme yeni satırlar ekleyerek #2 sütun yapısı ekleyin: Sütun Rengi Sütun 1 Herhangi bir modül eklemeden, satır ayarlarını açın ve aşağıdaki arka plan rengini Sütun 1’e ekleyin:
Sütun 1 arka plan rengi: #ffffff
Varsayılan sütun 2’nin arka plan rengi, sütun 2’ye aşağıdaki arka plan rengini ekler. Sütun 2 Renk Arka Plan: #ffffff Sütun 2 arka plan rengini işaret edin ve yüzerken bu arka plan rengini değiştirin.
Sütun 2 Arka Plan Rengi: #3D02FF Sütun 2 gradyan arka planı gradyanın arka planını sütuna da ekleyin.
Renk 1: RGBA (255,255,255.0) Renk 2: #FF7700
Sütun 2 Başlangıç Konumu:% 20 Yapıştırıcı daha sonra boyut ayarlarını açın ve bazı değişiklikler yapın.
Özel genişlik kullanın: evet
Birim: PX
Özel genişlik: 2000px Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Uzay ayarlarına özel dolgu değerleri ekleyerek daha fazla mesafe.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Dolgu: 6VW (masaüstü), 120px (tablet ve cep telefonu) Sütun 1 Pilding Alt: 6VW (masaüstü), 120px (tablet ve cep telefonu)
Sütun 1 Sol dolgu: 5VW (masaüstü), 80px (tablet), 50px (telefon)
Sütun 1 Dolgu Sağ: 5VW (masaüstü), 80px (tablet), 50 piksel (telefon)
Kutunun gölgesi ve pürüzsüz kutunun gölgesini de bu satıra ekleyin.
Bulanık Güç Gölgesi Kutusu: 100 PX
Kutunun gölgesinin dağılımının gücü: -10px
Son fakat en az değil, gelişmiş sekmedeki geçiş süresini artırarak sorunsuz bir geçiş yapın. Geçiş süreleri: 1100ms Yinelenen Metin Modülü ve Satır Düğmesi Modülü #1 Önceki bölümde ihtiyacımız olan tüm modüllere zaten sahip olduğumuz için, klonlayarak zamandan tasarruf edeceğiz.
Çoğaltma Sütun 1 Sıra #2’ye yerleştirin ve kopyayı yeni satırın ilk sütununa yerleştirin.
İçeriği Değiştir Modül içeriğinizi değiştirdiğinizden emin olun. Degrade düğmesinin arka planını değiştirin, ayrıca gradyan düğmesinin arka planını değiştirin.
Renk 1: #FF653F Renk 2: #0066FF Gradyan yönü: 39deg Hat klon görüntü modülü #2 Bir önceki satırdan ilk sütunda bulabileceğiniz klonlama görüntü modülü de. Çoğaltma Sütun 2 Sıra #2’ye yerleştirin ve kopyayı yeni satırın ikinci sütununa yerleştirin.
Görüntüleri Değiştirme Görüntüyü, bu yazının başında indirdiğiniz zip klasöründe bulabileceğiniz ‘-hover-illustration-2.png’ dosyasına değiştirin.
Gradyanın arka planını son olarak değiştirin, ancak en az değil, gradyanın arka planını görüntü modülünden değiştirin.
Renk 1: RGBA (0.2,12,0.66) Renk 2: RGBA (255,255,255.0) Son pozisyon:% 57 Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım! Statik İmleç yönlendirin
Bu yazıdaki son zihin, divi kullanarak yüzerken degradenin arka planını nasıl değiştireceğinizi gösterdik. Ayrıca bu yaklaşımı kullanarak başlayarak inanılmaz bir tasarım örneği yaptık. Yaptığınız her türlü web sitesi için tasarımlar ve çizimler kullanabilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
Yaratmaya başlayalım!
YouTube kanalına abone Olduğumuz bölüm #1 eklediğimiz ilk şeyin mesafesi yeni bir sayfa oluşturmak veya mevcut bir sayfayı açmak ve ona yeni bir normal bölüm eklemektir. Ayarları açın ve bazı üst ve alt kısımlar ekleyin.
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel
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 varsayılan sütun 1’in arka plan rengi, satır ayarlarını açın ve 1 sütun 1’e aşağıdaki varsayılan arka plan rengini ekleyin: Arka plan rengi: #e7ffa0
Sütun 1 Yüzerken bu arka plan rengini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: #00020C
Sütun 1 Arka plan gradyanı Degradenin arka plan rengini Sütun 1’e de ekleyin. Gerçekten şeffaf bir renk kullandığımızı göreceksiniz. Bu renk, arka plan renginin görülmesine izin verecek, bu da yüzerken değişir. Renk 1: RGBA (255,255,255.0)
Renk 2: RGBA (16,0,201,0.8)
Sütun 1 Gradyan Türü: Doğrusal
Sütun 1 Degrade Yönü: 50deg
Sütun 1 Başlangıç Pozisyonu:% 20
Sütun Rengi Sütun 2 Sütun 2’nin arka plan rengini de ekleyin. Sütun 2 arka plan rengi: #ffffff Ardından, Tasarım sekmesini açın ve boyut ayarlarını değiştirin.
Özel genişlik kullanın: evet Birim: PX
Özel genişlik: 2000px
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Uzay ayarlarına bazı özel dolgu değerleri ekleyerek daha fazla mesafe.
Üst dolgu: 0px Aşağıda dolgu: 0px
Üst Dolgu 2 Dolgu: 6VW (masaüstü), 120px (tablet ve cep telefonu)
Sütun 2 Dolgu Alt: 6VW (masaüstü), 120px (tablet ve cep telefonu)
Sol dolgu 2 sütun: 5VW (masaüstü), 80px (tablet), 50 piksel (telefon)
Sütun 2 Dolgu Sağ: 5VW (masaüstü), 80px (tablet), 50 piksel (telefon)
Kutunun gölgesi ve ayrıca pürüzsüz bir kutu gölgesinin gölgesini verir.
Bulanık Güç Gölgesi Kutusu: 100 PX Kutunun gölgesinin dağılımının gücü: -10px
Son fakat en az değil, gelişmiş sekmedeki geçiş süresini artırarak düzgün bir gradyan arka plan geçişi yapacağız.
Geçiş süresi: 1100ms Resim Modülünü Sütun 1’e ekleyin Modül eklemeye başlama zamanını yükleyin! Görüntü modülünü ilk sütuna ekleyin ve bu yazının başında indirdiğiniz ZIP klasöründe bulabileceğiniz ‘Divi-gradyan-background-the-hover-illustration-1.png’ dosyasını yükleyin.
Gradyan Arka Plan Bu görüntü modülünün arka plan ayarını açın ve gradyanın arka planını ekleyin. Diğer renklerin görülmesine izin vermek için tamamen şeffaf bir renk kullanmaya geri döndük. Renk 1: RGBA (50.217.255.0.66) Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Üst
Son pozisyon:% 57
Mesafe Ardından, modüle bazı özel üst rulmanlar ekleyin.
Üst Dolgu: 14VW Başlık metin modülünü sütun 2’ye ekleyin, içeriği ikinci sütuna ekleyin! İhtiyacımız olan ilk modül başlık metin modülüdür. Lütfen ve seçilen bazı başlık içeriği ekleyin. Başlık metin ayarları, başlık metin ayarlarını açın ve bazı değişiklikler yapın.
Yazı Tip Başlığı: Abril Fatface Başlık Metin Rengi: #000000 Başlık Metin Boyutu: 4VW (masaüstü), 60px (tablet), 40 piksel (telefon)
Açıklama metin modülünü Sütun 2’ye ekleyin İhtiyacımız olan ikinci modülün içeriğini ekleyin Başka bir metin modülü. Biraz seçim içeriği ekleyin.
Metin Ayarları Ardından, metin ayarlarını açın ve metin yönünü değiştirin.
Metin Oryantasyonu: haklı çıkar Yapıştırıcı, boyut ayarlarındaki genişliği de ayarlar. Genişlik:% 73 (masaüstü),% 100 (tablet ve cep telefonu)
Son mesafe, boşluk yapmak için modüle özel kenar boşluğunun üst ve altını ekleyin. Üst kenar: 2.5vw (masaüstü), 50px (tablet ve cep telefonu)
Alt kenar boşluğu: 2.5vw (masaüstü), 50px (tablet ve cep telefonu) Düğme Modülünü Sütun 2’ye Ekleyin Üçüncü ve son olarak ikinci sütunda ihtiyaç duyduğumuz modülün bir kopyasını ekleyin Düğme Modülü. Seçtiğiniz bazı kopyaları ekleyin.
Ayarlar Sonraki Düğme Değiştir düğmesi.
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 1.2VW (masaüstü), 14px (tablet ve cep telefonu) Metin Renk Düğmesi: #fffffff
Gradyan rengi 1: #9ea6ff
Gradyan Rengi 2: RGBA (16,0,201,0.8)
Gradien yönü: 78deg
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 30px
Mektup Mesafe Düğmesi: -1px
Mektup Ağırlığı: Çok kalın
Yazı tipi stili: büyük harf
Mesafe Bazı özel dolgu değerleri de ekleyin.
Üst dolgu: 10 piksel
Dolgu Alt: 10 piksel Sol dolgu: 40 piksel
Sağ dolgu: 40 piksel
Kutunun gölgesi ve düzgün kutunun gölgesini düğmeye uygulayın.
Bulanık Güç Gölge Kutusu: 40 PX Bölüm #2 Mesafe Ekle İlk kısmı bitirdikten sonra, bir sonraki bölüme geçeceğiz. Aşağıdaki özel dolgu değerlerini kullanarak yeni normal bölümü ekleyin:
Üst dolgu: 100 piksel Dolgu Alt: 100 piksel
Aşağıdaki sütun yapısını kullanarak bölüme yeni satırlar ekleyerek #2 sütun yapısı ekleyin: Sütun Rengi Sütun 1 Herhangi bir modül eklemeden, satır ayarlarını açın ve aşağıdaki arka plan rengini Sütun 1’e ekleyin:
Sütun 1 arka plan rengi: #ffffff
Varsayılan sütun 2’nin arka plan rengi, sütun 2’ye aşağıdaki arka plan rengini ekler. Sütun 2 Renk Arka Plan: #ffffff Sütun 2 arka plan rengini işaret edin ve yüzerken bu arka plan rengini değiştirin.
Sütun 2 Arka Plan Rengi: #3D02FF Sütun 2 gradyan arka planı gradyanın arka planını sütuna da ekleyin.
Renk 1: RGBA (255,255,255.0) Renk 2: #FF7700
Sütun 2 Başlangıç Konumu:% 20 Yapıştırıcı daha sonra boyut ayarlarını açın ve bazı değişiklikler yapın.
Özel genişlik kullanın: evet
Birim: PX
Özel genişlik: 2000px Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Uzay ayarlarına özel dolgu değerleri ekleyerek daha fazla mesafe.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Dolgu: 6VW (masaüstü), 120px (tablet ve cep telefonu) Sütun 1 Pilding Alt: 6VW (masaüstü), 120px (tablet ve cep telefonu)
Sütun 1 Sol dolgu: 5VW (masaüstü), 80px (tablet), 50px (telefon)
Sütun 1 Dolgu Sağ: 5VW (masaüstü), 80px (tablet), 50 piksel (telefon)
Kutunun gölgesi ve pürüzsüz kutunun gölgesini de bu satıra ekleyin.
Bulanık Güç Gölgesi Kutusu: 100 PX
Kutunun gölgesinin dağılımının gücü: -10px
Son fakat en az değil, gelişmiş sekmedeki geçiş süresini artırarak sorunsuz bir geçiş yapın. Geçiş süreleri: 1100ms Yinelenen Metin Modülü ve Satır Düğmesi Modülü #1 Önceki bölümde ihtiyacımız olan tüm modüllere zaten sahip olduğumuz için, klonlayarak zamandan tasarruf edeceğiz.
Çoğaltma Sütun 1 Sıra #2’ye yerleştirin ve kopyayı yeni satırın ilk sütununa yerleştirin.
İçeriği Değiştir Modül içeriğinizi değiştirdiğinizden emin olun. Degrade düğmesinin arka planını değiştirin, ayrıca gradyan düğmesinin arka planını değiştirin.
Renk 1: #FF653F Renk 2: #0066FF Gradyan yönü: 39deg Hat klon görüntü modülü #2 Bir önceki satırdan ilk sütunda bulabileceğiniz klonlama görüntü modülü de. Çoğaltma Sütun 2 Sıra #2’ye yerleştirin ve kopyayı yeni satırın ikinci sütununa yerleştirin.
Görüntüleri Değiştirme Görüntüyü, bu yazının başında indirdiğiniz zip klasöründe bulabileceğiniz ‘-hover-illustration-2.png’ dosyasına değiştirin.
Gradyanın arka planını son olarak değiştirin, ancak en az değil, gradyanın arka planını görüntü modülünden değiştirin.
Renk 1: RGBA (0.2,12,0.66) Renk 2: RGBA (255,255,255.0) Son pozisyon:% 57 Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım! Statik İmleç yönlendirin
Bu yazıdaki son zihin, divi kullanarak yüzerken degradenin arka planını nasıl değiştireceğinizi gösterdik. Ayrıca bu yaklaşımı kullanarak başlayarak inanılmaz bir tasarım örneği yaptık. Yaptığınız her türlü web sitesi için tasarımlar ve çizimler kullanabilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
