Divi'de Bir Resim Galerisini Tanıtmak İçin Kaydırılan Görüntüler Nasıl Havalandırılır

Divi'nin kaydırma efektleriyle görüntülerin nasıl genişletileceğini bilmek, bir açılış sayfasında bir resim galerisini tanıtmaya yardımcı olacak ince ve etkileyici bir tasarım öğesi olabilir. Buradaki fikir, bir oyun kağıdı eli gibi görüntüleri havalandırarak sayfayı aşağı kaydırırken kullanıcıları meşgul etmektir.

Bu öğreticide, kaydırma sırasında yayılan bir resim koleksiyonu içeren bir resim galerisini tanıtmak için temiz bir bölüm düzeni oluşturacağız. Bu tasarımla istediğiniz herhangi bir resmi kullanabilirsiniz ve herhangi bir açılış sayfasına güzel bir ek olacaktır.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bölüm 1: Düzen ve Sahte İçerik Oluşturma

Eğitimin bu ilk kısmı için, sol sütunda bir başlık ve bir düğme bulunan iki sütunlu bir satır ile bölüm düzenini oluşturacağız. İkinci bölümde, sağ sütuna fan-out görüntülerini ekleyeceğiz.

Bölüm Ayarları

Düzene herhangi bir şey eklemeden önce, varsayılan bölümün ayarlarını aşağıdaki gibi güncelleyin:

• Dolgu: 10vw üst, 10vw alt
• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Satır Ekleme

Ardından, üçte ikisi üçte bir sütun yapısına sahip yeni bir satır ekleyin.

Satır Ayarları

Ardından, özel bir arka plan görüntüsü ile satır ayarlarını güncelleyin. Kırtasiye Dükkanı Açılış Sayfası Hazır Düzeninden birini kullanıyorum. Bundan sonra aşağıdakileri güncelleyin:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Konumu: Sol Üst
• Maksimum Genişlik: 900 piksel

Başlık Oluşturmak için Metin Modülü Ekleme

Satır hazır olduğunda, başlığı oluşturmak için sütun 1'e yeni bir metin modülü ekleyin.

Metin içeriği

Gövde içeriğine aşağıdaki H1 Başlığını ekleyin:

<h1>Our Gallery</h1>

Metin Ayarları

Ardından metin ayarlarını aşağıdaki gibi güncelleyin:

• Başlık Yazı Tipi: Bellefair
• Başlık Metni Hizalama (tablet ve telefon): sağ
• Başlık Metni Boyutu: 150px (masaüstü ve tablet), 110px (telefon)

Düğme Ekleme

Metin modülünün altına yeni bir düğme modülü ekleyin.

Düğme Metni

Düğme metnini “Galeriyi Görüntüle” ile güncelleyin.

Düğme Ayarları

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Hizalama (tablet ve telefon): sağ
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #121212
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 3px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Tipi Stili: TT
• Marj: 7vw üst

Bölüm 2: Yayma Kaydırma Efekti ile Görüntüler Oluşturma

Öğreticinin bu ikinci bölümünde, yayma kaydırma efektiyle resimler oluşturacağız. Ortadaki görüntü ile başlayacağız. Moda Galerisi Sayfası Hazır Düzenindeki görüntüleri kullanıyorum. Tutarlı bir tasarım için hepsi aynı boyutta olmalıdır. Kullandıklarım 400 piksele 600 piksel.

Orta Resmin Oluşturulması

Sağ sütuna yeni bir görüntü modülü ekleyin.

Ardından modüle bir resim yükleyin.

Görüntü Ayarları

Mobil ekranlar için maksimum genişlik ve kenar boşluğunu aşağıdaki gibi güncelleyin:

• Maksimum Genişlik (tablet ve telefon): 200 piksel
• Kenar boşluğu (tablet ve telefon): 0 piksel kaldı

Orta Sağ Görüntüyü Oluşturma

İkinci görüntüyü (veya sağ ortadaki görüntüyü) oluşturmak için ilk görüntü modülünü çoğaltın.

Görüntü Ayarları

Ardından, yinelenen görüntü modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

Konum

• Pozisyon: Mutlak

Kökeni Dönüştür

• Kökeni Dönüştür: alt merkez

Kaydırma Efektleri

Yatay Hareket altında aşağıdakileri güncelleyin:

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0 (%20'de)
• Orta Ofset: 0,5 (%50'de)
• Bitiş Ofseti: 0,5 (%100'de)

Döndürme altında aşağıdakileri güncelleyin:

• Döndürmeyi Etkinleştir: EVET
• Başlangıç ​​Dönüşü: 0 derece (%20'de)
• Orta Dönüş: 20 derece (%50'de)
• Bitiş Dönüşü: 20 derece (%100'de)

Doğru Görüntüyü Oluşturma

En sağa doğru genişleyecek üçüncü görüntüyü oluşturmak için oluşturduğumuz ikinci görüntüyü çoğaltın.

Kaydırma Efektlerini Güncelle

Yatay Hareket altında aşağıdakileri güncelleyin:

• Orta Ofset: 1
• Bitiş Ofseti: 1

Döndürme altında aşağıdakileri güncelleyin:

• Orta Dönüş: 40 derece
• Bitiş Dönüşü: 40 derece

Fark etmediyseniz, esasen her görüntüde yatay ofseti 0,5 artışlarla ve dönen ofseti 20 derecelik artışlarla artırıyoruz. Bu, görüntüler arasında eşit boşluk yaratacaktır. Ve kaydırma efekti animasyonu, alt-merkez dönüşüm orijinine dayandığından, görüntülerin bir oyun kağıdı eli gibi yayıldığı izlenimini verecektir.

Görüntüleri Katmanlar Kutusunda Etiketleyin

Son iki görseli oluşturmadan önce mevcut görsellerin etiketlerini güncelleyelim ki kafanız karışmasın.

Orta Sol Görüntüyü Oluşturma

Sol ortadaki görüntüyü oluşturmak için sağ ortadaki görüntüyü çoğaltabiliriz.

Ardından, ortadaki görüntünün üzerine sütunun üstüne sürükleyin.

Bu resim etiketini de güncelleyebilirsiniz.

Kaydırma Efektlerini Güncelle

Sol orta görüntü için ayarları açın ve aşağıdaki kaydırma efektlerini güncelleyin:

Yatay Hareket Altında…

• Orta Ofset: -0.5
• Bitiş Ofseti: -0.5

NOT: Tek yaptığımız ofset değerini negatif olarak değiştirmek.

Döndürme altında…

• Orta Dönüş: -20 derece
• Bitiş Dönüşü: -20 derece

Sol Görüntüyü Oluşturma

Son olarak sağdaki görseli çoğaltarak ve sütunun en üstüne sürükleyerek son sol görseli oluşturalım.

Ayrıca etiketi de güncelleyebilirsiniz.

Kaydırma Efektlerini Güncelle

Sol görüntü için ayarları açın ve kaydırma efektlerini güncelleyin:

Yatay Hareket Altında:

• Orta Ofset: -1
• Bitiş Ofseti: -1

Döndürme altında…

• Orta Dönüş: -40 derece
• Bitiş Dönüşü: -40 derece

Sütun 1 Z İndeksi

Şu anda, to sütunundaki resimler, sütun 1'deki içerikle çakışacaktır. Bunu değiştirmek için, sütun 1 için ayarları açın ve z dizinini aşağıdaki gibi güncelleyin:

• Z İndeksi: 10

Yeni Görüntüler ve Filtreler Ekleme

Şimdi tek yapmamız gereken, resimlerin her birini yeni/farklı olanlarla güncellemek.

Benzersiz bir efekt için, doğru görüntü dışında tüm görüntülere (çoklu seçim kullanarak) aşağıdaki filtreleri ekleyin.

• Doygunluk: %20
• Opaklık: %85

Sonuç

İşte şimdiye kadarki sonuç…

Sütunu Döndürme

Tasarımı biraz değiştirmek için, ana sütunu döndürerek resim koleksiyonunu döndürebiliriz.

Bunu yapmak için 2. sütunun ayarlarını açın ve aşağıdaki dönüştürme seçeneğini ekleyin:

• Dönüştür Döndür Z Ekseni: 40 derece

Son sonuç

İşte nihai sonuç.

masaüstü

Tablet

Telefon

Son düşünceler

Bu eğitimde, Divi'nin kaydırma efektlerini kullanarak görüntülerin nasıl genişletileceğini öğrendik, ancak burada durmanız gerekmiyor! Herhangi bir modül koleksiyonunu dağıtmak için bu aynı tekniği kolayca kullanabilirsiniz (tanıtım tanıtımları düşünüyorum). Tasarımın gerçekten işlevsel olmaması için ofset mesafesini her görüntünün kaydırma efektleriyle sınırladım (yani, her görüntüyü tam olarak göremezsiniz). Ancak isterseniz görüntüleri daha görünür hale getirmek için ofsetleri artırabilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!