Divi ile Galeri Resminizin Başlığını ve Alt Yazısını Aşağı Kaydırarak Gösterme

Görsellerin tasarımda merkezi bir rol oynadığı bir web sitesi oluşturuyorsanız, bir noktada bir galeri eklemek isteyebilirsiniz. İşte burada Divi Galeri Modülü devreye girer. Medya kitaplığınızdan görüntüleri doğrudan seçmenize ve bunları organize bir yapıda görüntülemenize olanak tanır. Varsayılan olarak, her resmin başlığını ve alt yazısını da dinamik olarak gösterebilirsiniz. Bununla birlikte, tasarımınızda görünen metin miktarını sınırlamak istiyorsanız, bir resmin üzerine geldiğinizde bir resmin başlığını ve başlığını aşağı kaydırarak ortaya çıkarmak isteyebilirsiniz. Bu eğitimde, size bunu tam olarak nasıl yapacağınızı göstereceğiz. 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!

https://youtu.be/p6Bh7wz3HMc

Youtube Kanalımıza Abone Olun

1. Başlıkları ve Alt Yazıları ile Görselleri Yükleyin

Medya Kitaplığına Git

Bu öğreticinin ilk bölümü, medya kitaplığınıza başlıklar ve alt yazılar içeren görseller eklemeye odaklanır. Oraya ulaşmak için WordPress Panonuz > Medya > Kitaplık'a gidin.

Resimleri Yükle

Bir kez orada, galerinize eklemek istediğiniz resimleri yükleyin.

Başlık ve Altyazı Ekle

Her resme ayrı ayrı bir başlık ve resim yazısı eklemeniz gerekir. En iyi sonucu elde etmek için, her görüntü için benzer bir metin uzunluğu tutmaya çalışın.

2. Divi ile Tasarım Oluşturun

Yeni Bir Sayfa Oluşturun veya Mevcut Birini Açın

Resimleriniz yüklendikten sonra, tasarımı Divi'de oluşturmanın zamanı geldi. Yeni bir sayfa oluşturun veya yeni bir sayfa açın ve en üstte Görsel Oluşturucu'yu etkinleştirin.

1. Bölüm Ekle

Arka plan rengi

Sayfanıza yeni bir bölüm ekleyin ve bölüm ayarlarını açın. Aşağıdaki arka plan rengini uygulayın:

• Arka Plan Rengi: #eded

1. Satır Ekle

Sütun Yapısı

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

aralık

Henüz modül eklemeden satır ayarlarını açın, tasarım sekmesine gidin ve aşağıdaki üst ve alt kenar boşluklarını uygulayın:

• Üst Marj: %5
• Alt Marj: %5

Sütun 1'e Metin Modülü Ekle

H2 İçeriği Ekle

Bazı H2 içeriği içeren sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Metin Boyutu:
  • Masaüstü: 62 piksel
  • tablet: 48 piksel
  • Telefon: 32 piksel
• Başlık 2 Çizgi Yüksekliği: 1.3em

boyutlandırma

Modülün maksimum genişliğini farklı ekran boyutlarında da değiştirin.

• Maksimum genişlik:
  • Masaüstü: 500 piksel
  • tablet: 400 piksel
  • Telefon: 250 piksel

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Bölücü Modüldür. “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Ardından tasarım sekmesine geçin ve çizgi rengini değiştirin.

• Çizgi Rengi: #ffc000

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 5px
• Maksimum Genişlik: 100 piksel
• Yükseklik: 5 piksel

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

2. sütunda, ihtiyacımız olan tek modül, bazı açıklama içeriğine sahip bir Metin Modülüdür.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Lato
• Metin Satırı Yüksekliği: 2.2em

aralık

Biraz üst kenar boşluğu da uygulayın.

• Üst Kenar Boşluğu: 50px

2. Bölüm Ekle

Bir öncekinin altına başka bir bölüm ekleyin.

Degrade Arka Plan

Bölüm ayarlarını açın ve bir degrade arka planı uygulayın.

• Renk 1: #eded
• Renk 2: #ffffff
• Gradyan Türü: Doğrusal
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

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:

Arka plan rengi

Henüz modül eklemeden satır ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: #f4f4f4

boyutlandırma

Sonraki satırın boyutlandırma ayarlarına geçin ve aşağıdaki değişiklikleri uygulayın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Genişlik: %90
• Maksimum Genişlik: 1580 piksel

aralık

Dolgu değerlerini de özelleştiriyoruz.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 0px
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sütuna Galeri Modülü Ekle

Yüklenen Resimleri Seçin

Galeri Modülü kullanarak resimleri ekleme zamanı! Bu öğreticinin ilk bölümünde medya kitaplığınıza yüklediğiniz görüntüleri seçin.

Elementler

Fareyle üzerine gelme efekti yalnızca masaüstünde anlamlıdır. Daha küçük ekran boyutlarında fareyle üzerine gelme olmaz ve dokunma bunun yerine bir ışık kutusu efektini tetikler. Bu nedenle, başlığı ve altyazıyı yalnızca masaüstünde gösteriyoruz ve bunları daha küçük ekran boyutlarında devre dışı bırakıyoruz. Ayrıca sayfalandırmayı da devre dışı bırakıyoruz. Bu seçenekleri öğe ayarlarında bulabilirsiniz.

• Başlığı ve Altyazıyı Göster
  • Masaüstü: Evet
  • Tablet ve Telefon: Hayır
• Sayfalandırmayı Göster: Hayır

Düzen

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

• Düzen: Izgara
• Küçük Resim Yönü: Portre

Kaplama

Bindirme ayarlarını da değiştiriyoruz.

• Yer Paylaşımı Simge Rengi: #ffffff
• Bindirme Arka Plan Rengi: rgba(0,0,0,0.25)

Metin Ayarları

Ardından, metin ayarlarından metin rengini değiştireceğiz.

• Metin Rengi: Açık

Başlık Metni Ayarları

Ardından, başlık metnine stil vereceğiz.

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Montserrat
• Başlık Metin Boyutu: 20px

Altyazı Metni Ayarları

Altyazı metni ayarlarını da değiştiriyoruz.

• Altyazı Yazı Tipi: Lato
• Altyazı Metni Rengi: #efefef
• Başlık Harf Aralığı: 0,5 piksel
• Altyazı Satır Yüksekliği: 1.9em

Galeri Öğesi CSS'si

Ardından, gelişmiş sekmeye geçeceğiz. Oraya vardığımızda, galeri öğesi başlığı CSS kutusuna aşağıdaki CSS kodu satırlarını ekleyeceğiz:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

Galeri Öğesi Resim Yazısı CSS

Ve galeri öğesi başlık CSS kutusunun içinde bu kod satırlarını kullanacağız:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

3. Ortaya Çıkarma Etkisi Uygulayın

Galeri Modülüne CSS Kimliği Ekle

Artık tasarımımız yerine oturduğuna göre, ortaya çıkarma efektini oluşturmak için gerekli birkaç adıma odaklanabiliriz. Yapacağımız ilk şey, Galeri Modülümüze bir CSS kimliği eklemek.

• CSS kimliği: bölme galerisi

Galeri Modülünün Altına Kod Modülü Ekleyin

Ardından, Galeri Modülünün altına bir Kod Modülü ekleyeceğiz.

Stil Etiketleri Ekle

Efekti yaratmak için biraz CSS kodu kullanacağız. Kod Modülümüzü bu koda hazırlamak için kod kutusunun içine bazı stil etiketleri yerleştireceğiz.

Stil Etiketleri Arasına CSS Kodu Ekle

Ve stil etiketleri arasında aşağıdaki CSS kod satırlarını kopyalayıp yapıştıracağız:

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

Bu kadar! Galeri öğelerinden birinin üzerine geldiğinizde sonucu görüntülemek için sayfa ayarlarınızı kaydedin ve Görsel Oluşturucu'dan çıkın.

Ö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 Galeri Modülü ile nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, bir resmin başlığını ve başlığını masaüstünde gezdirirken aşağı kaydırarak nasıl ortaya çıkaracağınızı gösterdik. Bu, aynı anda çok fazla metin görüntülemeden görsel bir tasarımı korumanıza yardımcı olur. 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.