Divi'nin Kaydırma Efektleriyle Paralaks Arka Plan Görüntülerini Canlandırma
Yayınlanan: 2020-03-05Kaydırma efektlerini paralaks arka plan resimleriyle birleştirmek, ziyaretçileriniz için oldukça büyülü bir tasarım yaratabilir. Paralaks efekti, kullanıcı sayfayı aşağı kaydırırken zaten görüntüyü harekete geçirdiğinden, ek kaydırma efektleri (yatay hareket ve döndürme gibi) eklemek, tasarımı gerçekten farklı hale getirebilir ve daha yaratıcı düzenler için kapılar açabilir.
Bu derste, Divi'nin kaydırma efektlerini kullanarak paralaks arka plan görüntülerini nasıl canlandıracağımızı anlatacağız. Kısa bir metin bloğunu görüntülemek için benzersiz bir düzen tasarlamak için birden fazla metin modülünde aynı arka plan resmini kullanacağız.
Başlayalım.
Gizlice Bakış
Animasyonlu Paralaks Arka Plan Görüntü Düzenini ÜCRETSİZ olarak indirin
Ellerinizi bu eğitimdeki 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.
Ü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!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'nin Kaydırma Efektleriyle Hareketli Paralaks Arka Plan Görüntüleri Oluşturma
Sütun Ekleme
Başlamak için tek sütunlu bir satır oluşturun.
Metin Modülünü Oluşturma
Ardından sütuna bir metin modülü ekleyin.
Metin içeriği
Gövde içeriğine “p” harfini ekleyin.
Metin Modülüne Paralaks Arkaplan Resmi Ekleme
Ardından, metin modülüne aşağıdaki gibi bir paralaks arka plan görüntüsü ekleyin:
- Arka Plan Resmi: resim ekle
- Paralaks Etkisini Kullan: EVET
- Paralaks Yöntemi: CSS
Metni Tasarlamak
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Metin Yazı Tipi: Montserrat
- Metin Yazı Tipi Stili: TT
- Metin Metin Rengi: #ffffff
- Metin Metin Boyutu: 100px (masaüstü), 70px (telefon)
- Metin Harf Aralığı: 5px (telefon)
- Metin Satırı Yüksekliği: 1em
- Metin Hizalama: orta
- Dolgu: 250 piksel üst, 250 piksel alt
Dolgu, paralaks arka plan görüntüsünü ortaya çıkarmak için gerekli yüksekliği oluşturan şeydir.
Satır Ayarları
Artık metin modülümüz bittiğinde, satır ayarlarını açın ve aşağıdakileri güncelleyin:
- Özel Oluk Genişliğini Kullan: EVET
- Oluk Genişliği: 1
- Genişlik: %100
Sütun 1 Ayarları
Ardından sütun ayarlarını açmak için tıklayın.
Gelişmiş sekmesi altında aşağıdaki kaydırma efektlerini güncelleyin:
Yatay Hareket efektleri sekmesi altında…
- Yatay Etkinleştir: EVET
- Başlangıç Ofseti: -2 (%0 görünüm alanında)
- Orta Ofset: 0 (%40-60'ta)
- Bitiş Ofseti: -2 (%100'de)
Dönen efektler sekmesi altında…
- Döndürmeyi Etkinleştir: EVET
- Döndürmeyi Başlatma: 20deg (%0 görünüm alanında)
- Orta Dönüş: 0deg (%40-60'da)
- Bitiş Dönüşü: -20deg (%100'de)
2. Sütun Oluşturma
Tek sütunlu bir düzen ile başlamış olsak da toplamda 5 sütun oluşturacağız. Tasarım için gereken sonraki dördü oluşturmak için sütunu tüm içeriği ve ayarlarıyla çoğaltmak daha kolaydır.
İkinci sütunu oluşturmak için ilk sütunun tamamını (metin modülüyle) çoğaltın.
Sütun 2 Kaydırma Efektlerini Güncelleme
Ardından 2. sütun için kaydırma efektlerini aşağıdaki gibi güncelleyin:
Dönen efektler sekmesi altında…
- Başlangıç Rotasyonu: -20deg
- Biten Rotasyon: 20deg
Sütun 3 Oluşturma
Sütun 3'ü oluşturmak için sütun 2'yi çoğaltın.
Sütun 3 Kaydırma Efektlerini Güncelleme
Ardından, sütun 3 ayarlarını aşağıdaki gibi güncelleyin:
Yatay Hareket efektleri sekmesi altında…
- Yatay Hareketi Etkinleştir: HAYIR
Dönen Efekt sekmesi altında…
- Başlangıç Rotasyonu: 20deg
- Biten Rotasyon: 10deg
4. Sütun Oluşturma
4. sütunu oluşturmak için 2. sütunu çoğaltın ve ardından en alta sürükleyin.
Sütun 4 Kaydırma Efektlerini Güncelleme
Ardından, 4. sütun için ayarları açın ve aşağıdakileri güncelleyin:
Yatay Hareket efektleri sekmesi altında…
- Başlangıç Ofseti: 2
- Bitiş Ofseti: 2
Dönen Efektler sekmesi altında…
- Başlangıç Rotasyonu: -15deg
- Biten Rotasyon: 20deg
Sütun 5 Oluşturma
Son olarak, 5. sütunu oluşturmak için 4. sütunu çoğaltın.
Sütun 5 Kaydırma Efektlerini Güncelleme
Ardından sütun 5 ayarlarını aşağıdaki gibi güncelleyin:
Dönen Efektler sekmesi altında…
- Başlangıç Rotasyonu: 15deg
- Biten Rotasyon: -15deg
Metin Modül Harflerini Güncelleme
Ardından, her sütundaki harfleri toplu olarak "güç" kelimesini yazacak şekilde değiştirmek için satır içi metin seçeneğini kullanın.
Orta Metin Modül Tasarımını Güncelleme
Sütun 3'teki metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Metin Yazı Tipi: Montserrat Subrayada
- Metin Metin Rengi: #e0e722
- Metin Metin Boyutu: 150px (masaüstü)
- Metin Satır Yüksekliği: 100px
Mobil için İlk Metin Modülü İçeriğini Güncelleyin
Mobilde tek bir metin modülünü görüntülemek için, 1. sütundaki metin modülünü tablet ve telefon ekranında aşağıdaki içerikle güncellememiz gerekiyor:
Tablet ve Telefondaki Gövde İçeriği:
<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>
Sütun 1 Ayarlarını Güncelle
Ardından, 1. sütun için ayarları açın ve aşağıdakileri güncelleyin:
- Yuvarlatılmış Köşeler (masaüstü): %100 sol üst
- Yuvarlatılmış Köşeler (tablet ve telefon): %40 sol üst, %40 sağ alt
Gelişmiş sekmesi altında, ana öğenin tablet ekranına aşağıdaki özel CSS'yi ekleyin:
width: 100% !important;
Bu, sütunun tablet ve telefon ekranındaki satırın tüm genişliğini kapsamasını sağlar.
Tablet ve Telefon Ekranındaki Sütunların Geri Kalanını Gizleyin
Artık 1. sütun tablet ve telefondaki satırın tüm genişliğini kaplayacak, tablet ve telefondaki sütunların geri kalanını gizleyebilir/devre dışı bırakabiliriz. Bunu yapmak için, 2-5 sütunlarının ayarlarını açın ve her bir sütunun telefon ve tablette görünürlüğünü devre dışı bırakın.
Sütun 5 Ayarlarını Güncelle
Ardından sütun 5 ayarlarını açın ve aşağıdaki gibi tamamlayıcı bir yuvarlak köşe ekleyin:
- Yuvarlatılmış Köşeler (masaüstü): %100 sağ alt
Bölüme Arka Plan Tasarımı Ekleme
Tasarımı bitirmek için bölüm ayarlarını bir arka plan tasarımıyla aşağıdaki gibi güncelleyin:
- Arka Plan Rengi: #e0e722
- Üst Bölücü Stili: Ekran Görüntüsüne Bakın
- Üst Bölücü Rengi: #222222
- Üst Bölücü Yüksekliği: 650 piksel (masaüstü), 500 piksel (tablet ve telefon)
- Alt Bölücü Stili: Ekran Görüntüsüne Bakın
- Alt Bölücü Rengi: #222222
- Alt Bölücü Yüksekliği: 500px (masaüstü), 400px (tablet ve telefon)
Son sonuç
Hre, masaüstündeki son tasarımdır.
Ve işte tablet ve telefon ekranındaki geri dönüş tasarımı.
Son düşünceler
Paralaks arka plan görüntüleri, kaydırma efektleriyle gerçekten büyülü şekillerde birleşir. Paralaks arka plan resimleri kullanmanın tek dezavantajı, mobil desteğin olmamasıdır, ancak Divi'nin sağladığı duyarlı ayarlarla kolayca bir geri dönüş oluşturabiliriz. Umarım bu zarif tasarım gününüze biraz ilham katar.
Yorumlarda sizden haber bekliyorum.
Şerefe!