Bir arka plan gradyanına sahip olmak ister misiniz? Divi gezinirken değişiyor mu?
Web siteleri oluşturmak, her ayrıntının doğru olduğundan emin olmakla ilgilidir. Tasarımınızın küçük detaylarına dikkat etmeniz tasarım kalitenizi hızla artıracaktır. Site Web.
Yeni vurgulu seçenekleriyle Diviüzerine kolayca küçük etkileşimler ekleyebilirsiniz. Site Web. Fareyle üzerine gelme seçenekleri neredeyse tüm tasarım parametreleri 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 eğitimde size tam olarak bunu göstereceğiz. Degrade geçiş yapmanın yanı sıra, her türde kullanmakta özgür olacağınız, sıfırdan çarpıcı bir tasarım örneği de oluşturacağız. Site Web yarattığınız.
Gidelim!
anket
Öğreticiye dalmadan önce, sonuca bir göz atalım.
Divi ile tasarlamaya başlayalım
Ayrıca bakınız: Divi: Duyarlı bir akordeon kaydırıcı nasıl oluşturulur
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 özel üst ve alt kenar boşlukları ekleyin.
- Dolgu (Üst ve Alt): 100 piksel
1. satırı ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
1. sütunun varsayılan arka plan rengi (Masaüstü)
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 (Masaüstü): #e7ffa0
Fareyle üzerine gelindiğinde sütun 1 arka plan rengi
Fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.
- Arka plan: #00020c
Sütun 1 arka plan gradyanı
Ayrıca 1. sütuna bir degrade arka plan rengi ekleyin. Tamamen şeffaf bir renk kullandığımıza dikkat edin. Bu renk, arka plan renginin görünmesini sağlar ve bu da fareyle üzerine gelindiğinde değişir.
- Renk 1 (%20): rgba(255,255,255,0)
- Renk 2 (%100): rgba(16,0,201,0.8)
- Gradyan Türü: Doğrusal
- Gradyan Yönü: 50 derece
Sütun 2 arka plan rengi
Ayrıca 2. sütuna bir arka plan rengi ekleyin.
- Arkaplan: #ffffff
boyutlandırma
Ardından sekmeye gidin Dizayn ve seçenekteki boyutlandırma ayarlarını değiştirin Boyutlandırma.
- Özel Oluk Genişliğini Kullan: EVET
- Oluk Genişliği: 1
- Genişlik: 2000 piksel
aralık
Aralık ayarlarında özel dolgu değerleri ekleyerek devam edin.
- Dolgu (Üst ve Alt): 0 piksel
Boşluk (Sütun 2)
- Dolgu (Üst ve Alt): 6vw (Masaüstü), 120px (Tablet ve Telefon)
- Dolgu (Sol ve Sağ): 5vw (Masaüstü), 80px (Tablet), 50px (Telefon)
Kutu Gölgesi
Ayrıca sıraya ince bir kutu gölgesi verin.
- Kutu Gölge Bulanıklığı Gücü: 100px
- Kutu Gölge Yayılma Gücü: -10px
Geçişler
Son olarak, sekmedeki geçiş süresini artırarak yumuşak bir degrade arka plan geçişi oluşturacağız. gelişmiş.
- Geçiş Süresi: 1100ms
Sütun 1'e bir Görüntü modülü ekleyin
Bir resim yükle
Modül eklemeye başlamanın zamanı geldi! İlk sütuna bir Görüntü modülü ekleyin.
Gradyan arka planı
Bu Görüntü modülünün arka plan ayarlarına gidin ve bir degrade arka planı ekleyin. Diğer renklerin görünmesine izin vermek için yine tamamen şeffaf bir renk kullanıyoruz.
- Renk 1(%57): rgba(50,217,255,0.66)
- Renk 2(%100): rgba(255,255,255,0)
- Gradyan Türü: Dairesel
- Gradyan Konumu: Üst
aralık
Ardından, modüle özel üst dolgu ekleyin.
- Dolgu (Üst): 14vw
Sütun 2'e Metin modülü ekleyin
İçerik ekle
İkinci sütuna geçelim! İhtiyacımız olan ilk modül başlık için bir Metin Modülüdür. Devam edin ve bir ekleyin içindekiler tercih başlığı.
Başlık metni ayarları
Ardından, başlık metni ayarlarına gidin ve bazı değişiklikler yapın.
- Yazı Tipi: Abril Fatface
- Metin Rengi: #000000
- Metin Boyutu: 4 vw (masaüstü), 60 piksel (tablet), 40 piksel (telefon)
2. sütuna ikinci bir Metin modülü ekleyin
İçerik ekle
İhtiyacımız olan ikinci modül ise başka bir Text modülüdür. Biraz ekle içindekiler seçim.
Metin ayarları
Ardından, metin ayarlarına gidin ve metin hizalamasını değiştirin.
- Metin Hizalama: Yaslanmış
boyutlandırma
Ayrıca boyutlandırma ayarlarında 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 özel üst ve alt kenar boşlukları ekleyin.
- Kenar Boşluğu (Üst ve Alt): 2,5 vw (Masaüstü), 50 piksel (Tablet ve Telefon)
2. sütuna Düğme modülü ekleyin
Bir açıklama ekle
İkinci sütunda ihtiyaç duyacağımız üçüncü ve son modül bir Düğme modülüdür. Seçtiğiniz bir kopyasını ekleyin.
Düğme ayarları
Ardından düğme ayarlarını değiştirin.
- Düğme İçin Özel Stilleri Kullan: EVET
- Düğme Metin Boyutu: 1,2 vw (Masaüstü), 14 piksel (Tablet ve Telefon)
- Düğme Metin Rengi: #ffffff
- Gradyan Durakları 1 (%0): #9ea6ff
- Gradyan Durakları 2 (%100): rgba(16,0,201,0.8)
- Direksiyon: 78 derece
- Düğme Kenar Genişliği: 0 piksel
- Sınır Yarıçapı: 30 piksel
- Harf Aralığı: -1px
- Yazı Tipi Ağırlığı: Ultra Kalın
- Yazı Tipi Stili: TT -(Büyük Harf)
aralık
Ayrıca özel dolgu değerleri ekleyin.
- Dolgu (Üst ve Alt): 10 piksel
- Dolgu (Sol ve Sağ): 40 piksel
Kutu Gölgesi
Ve düğmeye ince bir kutu gölgesi uygulayın.
- Kutu Gölge Bulanıklığı Gücü: 40px
Ayrıca Oku: Bir GIF ile “Geri Sayım Sayacı” modülü nasıl özelleştirilir
2. bölüm ekle
aralık
Şimdi ilk bölümü tamamladığımıza göre, bir sonrakine geçeceğiz. Aşağıdaki özel dolgu değerlerini kullanarak yeni bir normal bölüm ekleyin:
- Dolgu (Üst ve Alt): 100 piksel
İki sütuna bir satır ekleyin
Sütunun 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ı
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:
- Arkaplan: #ffffff
Sütun 2 Arka Planı (Masaüstü)
2. sütuna aşağıdaki arka plan rengini ekleyin.
- Arka Plan (Masaüstü): #ffffff
Fareyle üzerine gelindiğinde sütun 2 arka plan rengi
Ve fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.
- Arka Plan (Vurgulu): #3d02ff
2 sütunlu gradyan arka planı
Ayrıca sütuna bir degrade arka planı ekleyin.
- Gradyan Durakları 1 (%20): rgba(255,255,255,0)
- Gradyan Durakları 2 (%100): #ff7700
boyutlandırma
Ardından, boyutlandırma ayarlarına gidin ve bazı değişiklikler yapın.
- Özel Oluk Genişliğini Kullan: EVET
- Oluk Genişliği: 1
- Genişlik: 2000 piksel
Boşluk (Satır)
Aralık ayarlarında özel dolgu değerleri ekleyerek devam edin.
- Dolgu (Üst ve Alt): 0 piksel
Boşluk (Sütun 1)
Sütun 1 boşluk ayarlarını değiştir
- Dolgu (Üst ve Alt): 6vw (Masaüstü), 120px (Tablet ve Telefon)
- Dolgu (Sol ve Sağ): 5vw (Masaüstü), 80px (Tablet), 50px (Telefon)
Kutu Gölgesi
Ayrıca bu satıra ince bir kutu gölgesi ekleyin.
- Kutu Gölge Bulanıklığı Gücü: 100px
- Kutu Gölge Yayılma Gücü: -10px
Geçişler
Son olarak, sekmede geçiş süresini artırarak yumuşak bir geçiş oluşturun gelişmiş.
- Geçiş Süresi: 1100 ms
Yinelenen satır 1 modülleri
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 sütunlarına yerleştirin
Ve kopyaları yeni satıra aşağıdaki gibi yerleştirin:
Düzenleme içeriği
değiştirdiğinizden emin olun. içindekiler modüllerinizin.
Düğme gradyan arka planını değiştir
Ayrıca düğme arka plan gradyanını da değiştirin.
- Gradyan %0 Durur: #ff653f
- Gradyan %100 Durur: #0066ff
- Direksiyon: 39 derece
Resmi değiştir
Resmi değiştirin.
Arka plan gradyanını değiştir
Son olarak, Görüntü modülünün arka plan gradyanını değiştirin.
- Gradyan Durur %0: rgba(0,2,12,0.66)
- Gradyan Durur %57: rgba(255,255,255,0)
anket
Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu makalede, fareyle üzerine gelindiğinde degrade arka planını nasıl değiştireceğinizi gösterdik. Divi. Ayrıca bu yaklaşımı kullanan sıfırdan harika bir örnek oluşturduk.
Oluşturduğunuz her tür web sitesi için tasarımı ve resmi kullanmakta özgürsünüz.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
