Divi ile Hover'da Gradyan Arka Planı Nasıl Değiştirilir
Yayınlanan: 2019-01-05Web siteleri oluşturmak, her ayrıntının doğru olduğundan emin olmakla ilgilidir. Tasarımınızda küçük ayrıntılara dikkat etmek, web sitenizin kalitesini hızla artıracak ve yükseltecektir. Divi'nin yeni fareyle üzerine gelme seçenekleriyle, web sitenize zahmetsizce küçük etkileşimler ekleyebilirsiniz. Fareyle üzerine gelme seçenekleri neredeyse tüm tasarım ayarları için geçerlidir. Örneğin, hoş bir geçiş oluşturmak için fareyle üzerine gelindiğinde degrade arka planını dolaylı olarak değiştirebilirsiniz. Bu blog yazısında size tam olarak bunu göstereceğiz. Degrade geçişi sağlamanın yanı sıra, oluşturduğunuz her tür web sitesi için kullanmakta özgür olduğunuz sıfırdan çarpıcı bir tasarım örneği de oluşturacağız.
Hadi hadi bakalım!
Ön izleme
Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
Statik
üzerine gelin
Çizimleri ÜCRETSİZ İndirin
Video Game Layout Pack'ten gelen ücretsiz çizimlere göz atmak için önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi ve Cuma günü daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Hadi Yaratmaya Başlayalım!
Youtube Kanalımıza Abone Olun
1. Bölüm Ekle
aralık
Yapmanız gereken ilk şey, yeni bir sayfa oluşturmak veya mevcut bir sayfayı açmak ve ona yeni bir normal bölüm eklemek. Ayarları açın ve bazı özel üst ve alt kenar boşlukları ekleyin.
- Üst Dolgu: 100 piksel
- Alt Dolgu: 100px
1. Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Sütun 1 Varsayılan Arka Plan Rengi
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve aşağıdaki varsayılan arka plan rengini sütun 1'e ekleyin:
- Arka Plan Rengi: #e7ffa0
Sütun 1 Vurgulu Arka Plan Rengi
Fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.
- Arka Plan Rengi: #00020c
Sütun 1 Gradyan Arka Planı
Sütun 1'e de bir degrade arka plan rengi ekleyin. Tamamen şeffaf bir renk kullandığımızı fark edeceksiniz. Bu renk, arka plan renginin gösterilmesine izin verecek ve bu da fareyle üzerine gelindiğinde değişecektir.
- 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 Gradyan Yönü: 50deg
- Sütun 1 Başlangıç Konumu: %20
Sütun 2 Arka Plan Rengi
Bir sütun 2 arka plan rengi de ekleyin.
- 2. Sütun Arka Plan Rengi: #ffffff
boyutlandırma
Ardından tasarım sekmesine gidin ve boyutlandırma ayarlarını değiştirin.
- Özel Genişlik Kullan: Evet
- Birim: PX
- Özel Genişlik: 2000 piksel
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
aralık
Aralık ayarlarına bazı özel dolgu değerleri ekleyerek devam edin.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
- Sütun 2 Üst Dolgu: 6vw (Masaüstü), 120px (Tablet ve Telefon)
- Sütun 2 Alt Dolgu: 6vw (Masaüstü), 120px (Tablet ve Telefon)
- Sütun 2 Sol Dolgu: 5vw (Masaüstü), 80px (Tablet), 50px (Telefon)
- Sütun 2 Sağ Doldurma: 5vw (Masaüstü), 80px (Tablet), 50px (Telefon)
Kutu Gölge
Ve sıraya ince bir kutu gölgesi de verin.
- Kutu Gölge Bulanıklığı Gücü: 100 piksel
- Kutu Gölge Yayılma Gücü: -10px
geçişler
Son olarak, gelişmiş sekmesinde geçiş süresini artırarak yumuşak bir degrade arka plan geçişi oluşturacağız.
- Geçiş Süresi: 1100ms
Sütun 1'e Görüntü Modülü Ekle
Fotoğraf yükleniyor
Modül eklemeye başlama zamanı! İlk sütuna bir Resim Modülü ekleyin ve bu yazının başında indirdiğiniz sıkıştırılmış klasörde bulabileceğiniz ' divi-gradient-background-on-hover-illustration-1.png ' dosyasını yükleyin.
Degrade Arka Plan
Bu Görüntü Modülünün arka plan ayarlarına gidin ve bir gradyan arka planı ekleyin. Diğer renklerin görünmesine izin vermek için yine tamamen şeffaf bir renk kullanıyoruz.
- Renk 1: rgba(50,217,255,0.66)
- Renk 2: rgba(255,255,255,0)
- Gradyan Türü: Radyal
- Radyal Yön: Üst
- Bitiş Konumu: %57
aralık
Ardından, modüle bazı özel üst dolgu ekleyin.
- Üst Dolgu: 14vw
Sütun 2'ye Başlık Metin Modülü Ekle
İçerik Ekle
İkinci sütuna geç! İhtiyacımız olan ilk modül, bir Metin Modülü başlığıdır. Devam edin ve seçtiğiniz bazı başlık içeriğini ekleyin.
Başlık Metni Ayarları
Ardından, başlık metni ayarlarına gidin ve bazı değişiklikler yapın.
- Başlık Yazı Tipi: Abril Fatface
- Başlık Metni Rengi: #000000
- Başlık Metni Boyutu: 4vw (Masaüstü), 60px (Tablet), 40px (Telefon)
Sütun 2'ye Açıklama Metni Modülü Ekle
İçerik Ekle
İhtiyacımız olan ikinci modül başka bir Metin Modülü. Seçtiğiniz bazı içeriği ekleyin.
Metin Ayarları
Ardından, metin ayarlarına gidin ve metin yönünü değiştirin.
- Metin Yönü: Yasla
boyutlandırma
Boyutlandırma ayarlarında da genişliği ayarlayın.
- Genişlik: %73 (Masaüstü), %100 (Tablet ve Telefon)
aralık
Son olarak, boşluk oluşturmak için modüle bazı özel üst ve alt kenar boşlukları ekleyin.
- Üst Kenar Boşluğu: 2.5vw (Masaüstü), 50px (Tablet ve Telefon)
- Alt Kenar Boşluğu: 2.5vw (Masaüstü), 50px (Tablet ve Telefon)
Sütun 2'ye Düğme Modülü Ekle
Kopya Ekle
İkinci sütunda ihtiyaç duyacağımız üçüncü ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.
Düğme Ayarları
Sonraki düğme ayarlarını değiştirin.
- Düğme için Özel Stilleri Kullan: Evet
- Düğme Metin Boyutu: 1.2vw (Masaüstü), 14px (Tablet ve Telefon)
- Düğme Metin Rengi: #ffffff
- Gradyan Rengi 1: #9ea6ff
- Gradyan Rengi 2: rgba(16,0,201,0.8)
- Gradyan Yönü: 78deg
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 30px
- Düğme Harf Aralığı: -1px
- Yazı Tipi Ağırlığı: Ultra Kalın
- Yazı Tipi Stili: Büyük Harf
aralık
Bazı özel dolgu değerleri de ekleyin.
- Üst Dolgu: 10px
- Alt Dolgu: 10px
- Sol Dolgu: 40px
- Sağ Dolgu: 40px
Kutu Gölge
Ve düğmeye ince bir kutu gölgesi uygulayın.
- Kutu Gölge Bulanıklığı Gücü: 40px
2. Bölüm Ekle
aralık
Şimdi ilk bölümü bitirdiğimize göre, bir sonrakine geçeceğiz. Aşağıdaki özel dolgu değerlerini kullanarak yeni bir normal bölüm ekleyin:
- Üst Dolgu: 100 piksel
- Alt Dolgu: 100px
2. Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:
Sütun 1 Arka Plan Rengi
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve aşağıdaki arka plan rengini sütun 1'e ekleyin:
- 1. Sütun Arka Plan Rengi: #ffffff
Sütun 2 Varsayılan Arka Plan Rengi
2. sütuna aşağıdaki arka plan rengini ekleyin.
- 2. Sütun Arka Plan Rengi: #ffffff
Sütun 2 Vurgulu Arka Plan Rengi
Ve fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.
- Sütun 2 Arka Plan Rengi: #3d02ff
Sütun 2 Gradyan Arka Planı
Sütuna bir degrade arka planı da ekleyin.
- Renk 1: rgba(255,255,255,0)
- Renk 2: #ff7700
- 2. Sütun Başlangıç Konumu: %20
boyutlandırma
Ardından, boyutlandırma ayarlarına gidin ve bazı değişiklikler yapın.
- Özel Genişlik Kullan: Evet
- Birim: PX
- Özel Genişlik: 2000 piksel
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
aralık
Aralık ayarlarına özel dolgu değerleri ekleyerek devam edin.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
- Sütun 1 Üst Dolgu: 6vw (Masaüstü), 120px (Tablet ve Telefon)
- Sütun 1 Alt Dolgu: 6vw (Masaüstü), 120px (Tablet ve Telefon)
- Sütun 1 Sol Dolgu: 5vw (Masaüstü), 80px (Tablet), 50px (Telefon)
- Sütun 1 Sağ Dolgu: 5vw (Masaüstü), 80px (Tablet), 50px (Telefon)
Kutu Gölge
Ve bu satıra da ince bir kutu gölgesi ekleyin.
- Kutu Gölge Bulanıklığı Gücü: 100 piksel
- Kutu Gölge Yayılma Gücü: -10px
geçişler
Son olarak, gelişmiş sekmesinde geçiş süresini artırarak yumuşak bir geçiş oluşturun.
- Geçiş Süresi: 1100ms
Yinelenen Metin Modülleri ve 1. Satırın Düğme Modülü
Bir önceki bölümde ihtiyacımız olan tüm modüllere zaten sahip olduğumuz için onları klonlayarak zaman kazanacağız.
Kopyaları 2. Satırın 1. Sütununa Yerleştirin
Ve kopyaları yeni satırın ilk sütununa yerleştirme.
İçeriği Değiştir
Modüllerinizin içeriğini değiştirdiğinizden emin olun.
Düğme Degrade Arka Planını Değiştir
Düğme gradyan arka planını da değiştirin.
- Renk 1: #ff653f
- Renk 2: #0066ff
- Gradyan Yönü: 39deg
2. Satırın Görüntü Modülünü Klonla
Önceki satırın ilk sütununda da bulabileceğiniz Görüntü Modülünü klonlayın.
Kopyaları 2. Satırın 2. Sütuna Yerleştirin
Ve kopyayı yeni satırın ikinci sütununa yerleştirin.
Resmi değiştir
Resmi, bu yazının başında indirdiğiniz sıkıştırılmış klasörde bulabileceğiniz ' divi-gradient-background-on-hover-illustration-2.png ' dosyasına değiştirin.
Degrade Arka Planını Değiştir
Son olarak, Görüntü Modülünün gradyan arka planını değiştirin.
- Renk 1: rgba(0,2,12,0.66)
- Renk 2: rgba(255,255,255,0)
- Bitiş Konumu: %57
Ön izleme
Artık tüm adımları tamamladığımıza göre, farklı ekran boyutlarında nihai sonuca son bir göz atalım!
Statik
üzerine gelin
Son düşünceler
Bu gönderide, Divi kullanarak fareyle üzerine gelindiğinde gradyan arka planının nasıl değiştirileceğini gösterdik. Ayrıca, bu yaklaşımı kullanan sıfırdan çarpıcı bir tasarım örneği oluşturduk. Oluşturduğunuz her tür web sitesi için tasarım ve illüstrasyonları kullanmakta özgürsünüz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!