Vurgulu Üzerinde Kaydırma Arka Planı Olarak Kutu Gölgeleri Nasıl Kullanılır

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, kutu gölgelerini fareyle üzerine gelindiğinde kaydırma arka planı olarak nasıl kullanacağınızı göstereceğiz. Kişisel Stilist Düzen Paketi'nin ana sayfasında çarpıcı görünen üç farklı örneği ele alacağız, ancak sahip olduğunuz olanaklar gerçekten sonsuz. Yalnızca Divi'nin yerleşik seçeneklerini kullanarak kaydırma arka planlarının her birini adım adım yeniden oluşturacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye ve onun farklı örneklerine dalmadan önce, sonuca bir göz atalım.

Örnek 1

Örnek #2

Örnek 3

Kişisel Stilist Düzen Paketi Ana Sayfasını Yeni Sayfaya Yükleyin

Web sitenize yeni bir sayfa ekleyerek başlayın ve Kişisel Stilist ana sayfa düzenini yükleyin. Bu düzeni, yukarıda gösterilen üç örneğin tümünü gerçekleştirmek için kullanacak olsak da, bu yaklaşımı, üzerinde çalıştığınız her türlü düzen veya web sitesi için kullanabilirsiniz.

Örnek 1'i Yeniden Oluştur

Düğme Kutusu Gölge Rengi

İlk örneği yeniden oluşturmaya başlayalım! Bu örnek, kahraman bölümünü vurgulamanıza yardımcı olur. Yapmanız gereken ilk şey, ilk sütunda bulabileceğiniz Düğme Modülünü açmak ve kutu gölge rengini değiştirmek. Bunu, vurgulu üzerine ekleyeceğimiz pembe kutu gölgesiyle rengin iyi gittiğinden emin olmak için yapıyoruz.

Bölüm Ayarları

Varsayılan Arka Plan Rengi

Bölüm ayarlarını açarak devam edin. Varsayılan arka plan renginin aynı kaldığından emin olun.

• Arka Plan Rengi: #2a2a2a

Vurgulu Arka Plan Rengi

Arka plan vurgusunu değiştirin.

• Arka Plan Rengi: #ffffff

Varsayılan Kutu Gölgesi

Bölüme varsayılan bir Kutu Gölgesi ekleyerek devam edin.

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Gölge Rengi: rgba(255,137,159,0.82)
• Kutu Gölge Konumu: İç Gölge

Vurgulu Kutu Gölgesi

Kutu gölgesinin yatay konumunu değiştirin. Herhangi bir seçim değeri ekleyin.

• Kutu Gölgesi Yatay Konumu: 800px

Kaydırma efektinin yukarıdan aşağıya görünmesini istiyorsanız, bunun yerine kutu gölgesinin dikey konumunu değiştirebilirsiniz.

• Kutu Gölge Dikey Konumu: 650px

geçişler

Son olarak, arka plan rengi ve kutu gölgesi kaydırma arka planı arasında hızlı bir geçiş oluşturmak için gelişmiş sekmesinde geçiş süresini azaltın.

• Geçiş Süresi: 200ms
• Geçiş Hızı Eğrisi: Kolaylık

Örnek 2'yi Yeniden Oluştur

İlk Metin Modülünü Değiştir

Fareyle Üzerine Gelme Metin Ayarları

Bir sonraki örneğe geçelim! İlk sütunda bulabileceğiniz Metin Modülünü açın ve üzerine gelindiğinde metin rengini değiştirin.

• Metin Rengi: Açık

fareyle üzerine gelin

Tasarım sekmesinde fareyle üzerine gelindiğinde kenarlık rengini değiştirerek devam edin.

• Kenar Rengi: rgba(255,137,159,0.82)

Varsayılan Kutu Gölgesi

Ardından, kutu gölge ayarlarına gidin ve varsayılan bir kutu gölgesi ekleyin.

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Gölge Rengi: rgba(255,137,159,0.82)
• Kutu Gölge Konumu: İç Gölge

Vurgulu Kutu Gölgesi

Fareyle üzerine gelindiğinde yatay konumu değiştirin.

• Kutu Gölgesi Yatay Konumu: 520px

geçişler

Son olarak, yumuşak bir geçiş oluşturmak için gelişmiş sekmesinde geçiş süresini artırın.

• Geçiş Süresi: 700ms
• Geçiş Hızı Eğrisi: Kolaylık

Modül Stillerini Üçüncü Metin Modülüne Kopyala ve Yapıştır

Üçüncü Metin Modülü için de aynı modül stillerini kullanıyoruz. Zaman kazanmak için, sadece ilk Metin Modülünün modül stillerini kopyalayacağız ve bunları üçüncü Metin Modülüne yapıştıracağız.

İkinci Metin Modülünü Değiştir

Metin Ayarları

Ancak ikinci Metin Modülü biraz farklıdır. Modülü açın ve metin ayarlarına gidin. Orada yapmanız gereken tek şey, fareyle üzerine gelindiğinde metin rengini değiştirmek.

• Metin Rengi: Açık

fareyle üzerine gelin

Kenarlık ayarlarına giderek ve üzerine gelindiğinde kenarlık rengini değiştirerek devam edin.

• Kenar Rengi: rgba(255,137,159,0.82)

Varsayılan Kutu Gölgesi

Kaydırma arka planını ekleme zamanı! Aşağıdaki ayarları kullanarak varsayılan bir kutu gölgesi ekleyerek başlayın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Gölge Rengi: rgba(255,137,159,0.82)
• Kutu Gölge Konumu: İç Gölge

Vurgulu Kutu Gölgesi

Fareyle üzerine gelindiğinde kutu gölgesinin dikey konumunu değiştirin.

• Kutu Gölge Dikey Konumu: 500px

geçişler

Son olarak, bu Metin Modülünün geçiş süresini de artırın.

• Geçiş Süresi: 700ms
• Geçiş Hızı Eğrisi: Kolaylık

Örnek 3'ü Yeniden Oluştur

Satır Ayarlarını Değiştir

boyutlandırma

Bir sonraki ve son örneğe geçelim! Satır ayarlarını açarak başlayın ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2

aralık

Satıra da bazı özel dolgular ekleyerek devam edin.

• Sol Dolgu: 10vw
• Sağ Dolgu: 10vw
• Sütun 2 Sol Dolgu: 15vw (Masaüstü), 0vw (Tablet ve Telefon)

Varsayılan Kutu Gölgesi

Ardından, satıra varsayılan bir kutu gölgesi ekleyin.

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Gölge Rengi: #ff899f
• Kutu Gölge Konumu: İç Gölge

Vurgulu Kutu Gölgesi

Fareyle üzerine gelindiğinde yatay konumu değiştirin.

• Kutu Gölgesi Yatay Konum: 50px

geçişler

Ayrıca gelişmiş sekmesinde geçiş süresini ve geçiş gecikmesini değiştiriyoruz.

• Geçiş Süresi: 1000ms
• Geçiş Gecikmesi: 700ms
• Geçiş Hızı Eğrisi: Kolaylık

Bölüm Ayarlarını Değiştir

Boyutlandırmayı Kaldır

Satır ayarlarını değiştirmeyi bitirdikten sonra devam edin ve bölüm ayarlarını açın. Tasarım sekmesine gidin ve sağ tıklayıp sıfırlamaya tıklayarak genişliği sıfırlayın.

Kenarlığı Kaldır

Aynı şeyi kenarlık genişliği için de yapın.

Varsayılan Kutu Gölgesi

Varsayılan bir kutu gölgesi ekleyerek devam edin.

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Gölge Rengi: #2a2a2a
• Kutu Gölge Konumu: İç Gölge

Vurgulu Kutu Gölgesi

Fareyle üzerine gelindiğinde kutu gölgesinin yatay konumunu değiştirin.

• Kutu Gölgesi Yatay Konumu: 60px

geçişler

Ve tasarımı bitirmek için gelişmiş sekmesinde geçiş süresini artırın.

• Geçiş Süresi: 1000ms

Ön izleme

Artık tüm adımlardan geçtik, şimdi adım adım yeniden oluşturduğumuz üç farklı örneğe son bir göz atalım.

Örnek 1

Örnek #2

Örnek 3

Son düşünceler

Bu gönderide, kutu gölgelerini yalnızca Divi'nin yerleşik seçenekleriyle kaydırma arka planı olarak nasıl kullanacağınızı gösterdik. Bu eğitim, her hafta araç kutunuza fazladan bir şey koymaya çalıştığımız devam eden Divi tasarım girişimimizin bir parçasıdır. Bu öğreticinin, kutu gölgelerini benzersiz ve yaratıcı bir şekilde kullanmanız için size ilham vereceğini umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!