Divi'nin Konum Ayarları ve Kaydırma Efektleri ile Kaydırmada Kopyalama Nasıl Harmanlanır

Divi'nin yerleşik özelliklerini yaratıcı bir şekilde kullanma şekliniz, sayfa tasarımınızda fark yaratabilir. Örneğin Divi'nin kaydırma efektleri, kaydırma üzerinde güzel etkileşimler oluşturmanıza olanak tanır. Bugün, Divi'nin yerleşik kaydırma efektleriyle yapabileceğiniz şeyler listenize başka bir öğretici ekliyoruz. Daha spesifik olarak, size kaydırmada kopyalamayı nasıl karıştıracağınızı göstereceğiz. İlk bakışta, kopya eşlik eden görüntünün altına yerleştirilmiştir. Ancak, belirli bir noktaya kaydırdığınız anda, kopya ürün görselinin üstünde görünecek ve görselle karışmaya başlayacaktır. Bu, zahmetsiz görünen göz alıcı bir etkiye yol açar. Düzen 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 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 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!

Yeniden Yaratmaya Başlayalım!

2x Yer Tutucu Bölümleri Ekle

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya bir yer tutucu bölüm ekleyerek başlayın.

boyutlandırma

Bölüm ayarlarını açın ve boyutlandırma ayarlarında yüksekliği değiştirin.

• Yükseklik: 50vh

Klon Bölümü

Bölümü bir kez klonlayın. Bu size sayfanızda iki yer tutucu bölüm bırakır. Bu yer tutucu bölümler, öğreticiyi tamamladıktan sonra nihai etkiyi görmenize yardımcı olacaktır. Canlı bir web sitesinde yer tutucu bölümler, sayfa boyunca kullandığınız normal bölümlerle değiştirilecektir.

Yer Tutucu Bölümleri Arasına Yeni Bölüm Ekle

Yer tutucu bölümler yerleştirildikten sonra, yer tutucu bölümler arasına yeni bir bölüm ekleyin.

Arka plan rengi

Bölüm ayarlarını açın ve beyaz bir arka plan rengi kullanın.

• Arka Plan Rengi: #ffffff

aralık

Bölümün tasarım sekmesine gidin ve üst ve alt dolgu değerlerini buna göre değiştirin:

• Üst Dolgu: 10vh
• Alt Dolgu: 10vh

1. 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:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın, boyutlandırma ayarlarına gidin ve genişlik ve maksimum genişlik değerlerini değiştirin.

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

Sütuna Metin Modülü Ekle

Kopya Ekle

Bu satır için ihtiyacımız olan tek modül bir Metin Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #fff2ea
• Metin Boyutu: 11vw
• Metin Satırı Yüksekliği: 1em
• Metin Hizalama: Merkez

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 ekleyin:

boyutlandırma

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Genişlik: %90
• Satır Hizalama: Merkez

Sütuna Resim Modülü Ekle

Fotoğraf yükleniyor

Satırın sütununa bir Görüntü Modülü ekleyin. Seçtiğiniz bir resmi yükleyin.

hizalama

Modülün tasarım sekmesine gidin ve görüntü hizalamasını buna göre değiştirin:

• Görüntü Hizalama: Merkez

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve modülü tam genişliğe zorlayın.

• Tam Genişliği Zorla: Evet

Sütuna Düğme Modülü Ekle

Kopya Ekle

Sütuna ekleyeceğimiz sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı kullanın.

Düğme Hizalama

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

• Düğme Hizalama: Merkez

Düğme Ayarları

Ardından, düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Boşluk ayarlarında da bazı özel dolgu değerleri kullanın.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: %5
• Sağ Dolgu: %5

1. Satıra Mutlak Konumlandırma Ekle

İkinci satırı tamamladıktan sonra, 1. satıra geri dönün. Satırın ayarlarını açın, gelişmiş sekmeye gidin ve bölümü mutlak çevirin. Bunu yaparak, satır ve içindeki Metin Modülü, Görüntü Modülünü içeren satırın altına yerleştirilecektir.

• Pozisyon: Mutlak
• Yer: Merkez

1. Satırı Klonla ve Kopyaları 2. Satırın Altına Yerleştir

Metin Modülünün görüntünün üstünde görünmesine izin vermek için daha yüksek bir z indeks değerine sahip başka bir satıra ihtiyacımız olacak. İlk satırı klonlayın ve kopyayı ikinci satırın altına yerleştirin.

3. Sıraya Efekt Uygula

Z Endeksini Artırın

Yinelenen satırı açın ve gelişmiş sekmesinde z dizinini değiştirin.

• Z İndeksi: 12

Metin Rengini Değiştir

Satırdaki Metin Modülünü açın ve metin rengini değiştirin.

• Metin Rengi: #1e1e1e

Satıra Karışım Modunu Uygula

Ardından, satır ayarlarını açın ve filtre ayarlarında karışım modunu değiştirin.

• Karışım Modu: Yer Paylaşımı

3. Satırdaki Metin Modülünde Kaydırma Efektini Kullan

Fading In & Out Efekti Ekleyin

Metin Modülünü tekrar açarak, kaydırma efektlerine giderek ve solma efektini etkinleştirerek öğreticiyi tamamlayın. Bu kadar!

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
  • Opaklığı Başlatma: %0
  • Orta Opaklık: %0 (%26'da)
  • Bitiş Opaklığı: %100 (%28'de)
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Ö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 yerleşik kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, size kaydırmada kopyalamayı nasıl karıştıracağınızı gösterdik. İlk başta, kopya görüntünün altında görünüyor. Kaydırdıktan sonra, kopya görüntünün üzerinde kendini gösterir ve görüntüyle karışır. 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.