Divi ile Yapışkan Arka Plan Maskesi Nasıl Oluşturulur

Divi'nin yapışkan seçenekleri, web siteleriniz için tonlarca farklı tasarım oluşturmanıza olanak tanır. Bugünün gönderisi, başarabileceğiniz şeylerin listesine başka bir öğretici daha ekliyor ve umarız yaratıcılığı kıvılcım çıkarmaya yardımcı olur. Size yapışkan bir arka plan maskesinin nasıl oluşturulacağını göstereceğiz ve bu maskenin bölümün sonuna kadar kaydırma sırasında ziyaretçiyi takip etmesini sağlayacağız. Bu eğitim, Divi'nin yapışkan seçeneklerini filtre karışım modlarıyla birleştirir. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak 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 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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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!

1. Divi'de Tasarım Yaratın

Yeni Bölüm Ekle

Arka plan görüntüsü

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Seçtiğiniz bir arka plan resmini yükleyin.

• Arka Plan Resmi Boyutu: Kapak

aralık

Bölümün tasarım sekmesine gidin ve boşluk ayarlarındaki tüm varsayılan üst ve alt dolguları kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

taşmalar

Sonraki gelişmiş sekmesinde bölümün taşmalarını gizleyin.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Filtreler

Ayrıca bu satıra bir karışım modu ekliyoruz. Bu harmanlama modu, eğitimde daha sonra bir maske oluşturmamıza yardımcı olacaktır.

• Karışım Modu: Ekran

Z İndeksi

Bu satırın, bölüme ekleyeceğimiz ikinci satırın altında kalmasını sağlamak için gelişmiş sekmesindeki z dizinini değiştiriyoruz.

• Z İndeksi: 9

Sütun Ayarları

Ardından, sütun ayarlarını açacağız.

Arka plan rengi

Tamamen beyaz bir arka plan rengi kullanıyoruz. Burada kullandığınız diğer herhangi bir renk, bölümün arka plan görüntüsü aracılığıyla gösterilecektir, bu nedenle tamamen beyaz bir renge bağlı kalmak önemlidir.

• Arka Plan Rengi: #ffffff

Ana Eleman CSS

Ayrıca, gelişmiş sekmesindeki ana öğeye bir yükseklik değeri ekliyoruz. Satırı yapışkan hale getirdiğimizde, bu yükseklik sütunun her zaman tüm bölüm arka plan görüntüsünü kaplamasını sağlayacaktır.

height: 100vh;

Satıra Metin Modülü Ekle

İçerik Kutusunu Boş Bırak

Satır ayarlarını tamamladıktan sonra sütununa bir Metin Modülü ekleyin. İçerik kutusunu boş bırakın. Bunun yerine, bölüm arka plan görüntüsünün bir bölümünü ortaya çıkaran bir şekil oluşturmak için bu modülü kullanıyoruz.

Arka plan rengi

Karışım modunun bölümün arka plan görüntüsünün bir parçasını göstermesine izin vermek için bu modül için daha koyu bir arka plan rengi kullanıyoruz.

• Arka Plan Rengi: #0b3835

boyutlandırma

Ardından, tasarım sekmesine gideceğiz ve boyutlandırma ayarlarını aşağıdaki gibi değiştireceğiz:

• Genişlik:
  • Masaüstü: 20vw
  • Tablet & Telefon: 70vw
• Boy uzunluğu:
  • Masaüstü: 30vh
  • Tablet & Telefon: 10vh

aralık

Bir miktar üst marj da ekliyoruz.

• Üst Marj: 3vh

Sınır

Ve bazı yuvarlak köşeler ekleyeceğiz.

• Tüm Köşeler: 15px

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarında aşağıdaki değişiklikleri yapın:

• Genişlik: %100
• Maksimum Genişlik: %100

Z İndeksi

Satırın z dizinini de artırın. Bu, satırın içeriğinin önceki satırın üstünde kalmasını sağlamaya yardımcı olacaktır.

• Z İndeksi: 12

Satıra Metin Modülü Ekle

H2 İçeriği Ekle

Seçtiğiniz bazı H2 içeriğini içeren ilk Metin Modülü ile başlayarak modül ekleme zamanı.

H2 Metin Ayarları

H2 metin ayarlarını aşağıdaki gibi biçimlendirin:

• Başlık 2 Yazı Tipi: Playfair Gösterimi
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #0b3835
• Başlık 2 Metin Boyutu:
  • Masaüstü: 150 piksel
  • Tablet ve Telefon: 45px
• Başlık 2 Çizgi Yüksekliği: 1.2em

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve aşağıdaki ayarları uygulayın:

• Maksimum Genişlik: 980 piksel
• Modül Hizalaması: Merkez

aralık

Negatif üst kenar boşluğunu da dahil edin.

Satıra Düğme Modülü Ekle

Kopya Ekle

Bu satırda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Hizalama

Modülün tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Ardından, düğme ayarlarına gidin ve aşağıdaki stilleri uygulayın:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 15px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel

• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Boşluk ayarlarına bazı özel kenar boşluğu ve dolgu değerleri de ekliyoruz.

• Alt Kenar Boşluğu: 60vh
• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: 40px
• Sağ Dolgu: 40px

2. Yapışkan Efektler Uygulayın

1. Sırayı Aç

Tasarımımızın temelini oluşturduğumuza göre, şimdi yapışkan stilleri uygulama zamanı. İlk satırın ayarlarını açın.

Yapışkan Seçenekleri Uygula

Gelişmiş sekmeye gidin ve aşağıdaki yapışkan ayarları uygulayın:

• Yapışkan Konum: En Üstte Yapış
• Alt Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Metin Modülü Yapışkan Seçenekleri

Satır yapışkan hale getirildikten sonra, satırın içindeki Metin Modülüne yapışkan stiller uygulayabiliriz. Modülün ayarlarını açın.

Yapışkan Boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve aşağıdaki yapışkan boyutlandırma değerlerini uygulayın:

• Yapışkan Genişlik: 80vw
• Yapışkan Yükseklik: 90vh

Geçiş süresi

Son olarak, gelişmiş sekmeye gidin ve geçiş süresini artırın. Bu kadar!

• Geçiş Süresi: 500ms

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin yapışkan seçenekleriyle nasıl yaratıcı olabileceğinizi bir kez daha gösterdik. Daha spesifik olarak, yapışkan bir arka plan maskesi oluşturmak için Divi'nin filtre ayarlarını ve yapışkan seçeneklerini nasıl birleştireceğinizi gösterdik. JSON dosyasını da ücretsiz olarak indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.