Divi ile Çarpıcı Bir Galeri Izgarasında Görüntü Köşelerini Etiketleme

Web sitenizdeki bir galeride resimleri göstermenin benzersiz ve güzel bir yolunu mu arıyorsunuz? Eğer öyleyse, bu gönderiyi seveceğinizden eminiz. Tüm ekran boyutlarında %100 duyarlı kalan güzel bir tasarımın parçası olarak Metin Modülleri ile görüntü köşelerini nasıl keseceğinizi göstereceğiz. Bu, harika bir tasarımı korurken resimlerinize numaralandırılmış etiketler eklemenin harika bir yoludur. Tasarım örneğinin 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.

Galeri Bölüm Düzenini ÜCRETSİZ İndirin

Ücretsiz galeri bölümü düzenine el atmak 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.

Youtube Kanalımıza Abone Olun

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

aralık

Yapmanız gereken ilk şey, üzerinde çalıştığınız sayfaya yeni bir bölüm eklemek. Bölüm ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Yeni Satır Ekle

Sütun Yapısı

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

Arka plan rengi

Ardından beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

boyutlandırma

Boyutlandırma ayarlarına geçin ve aşağıdaki ayarları uygulayarak sütunlar, satır ve bölüm arasındaki tüm boşluğu kaldırın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu kaldırarak devam edin.

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

Sütun 1, 2, 3 ve 4 Ana Öğe

Şimdi, tüm ekran boyutlarında 4 sütunlu bir yapının korunduğundan emin olmak için, her sütun ana öğesine ayrı ayrı aşağıdaki CSS kodu satırını ekleyerek sütunların her birinin %25 genişliğini koruduğundan emin olacağız:

width: 25% !important;

Sütun 1'e Görüntü Modülü Ekle

1:1 Resim Yükle

Modül eklemeye başlama zamanı! İlk sütuna yeni bir Resim Modülü ekleyin ve istediğiniz bir kare resmi yükleyin (veya bu gönderinin başında indirebileceğiniz sıkıştırılmış klasörde bulabileceğiniz bir resmi kullanın).

Hafif kutu

Sonraki bağlantı ayarlarında ışık kutusu seçeneğini etkinleştirin.

• Lightbox'ta Aç: Evet

boyutlandırma

Görüntünün tüm ekran boyutlarında duyarlı kalmasını sağlamak için, 'Tam Genişliğe Zorla' seçeneğini de etkinleştireceğiz.

• Tam Genişliği Zorla: Evet

Varsayılan Filtreler

Ayrıca parlaklığı da değiştiriyoruz.

• Parlaklık: %50

Hover Filtreleri

Ve fareyle üzerine gelindiğinde onu '%100'e geri getireceğiz.

• Parlaklık: %100

Varsayılan Z İndeksi

Görünürlük ayarlarına gidin ve Z Endeksinin varsayılan durumunda '0' kaldığından emin olun.

• Z İndeksi: 0

Z Endeksinin üzerine gelin

Ancak, üzerine gelindiğinde, sonraki adımlarda ekleyeceğimiz numaralı etiket Metin Modülü ile çakışmasını istiyoruz. Bunu yapmak için, vurgulu Z İndeksi değerini artıracağız.

• Z İndeksi: 100

Klon Görüntü Modülü 3 Kez & Kalan Sütunlarda Yer Al

1. sütundaki Görüntü Modülünü tamamladıktan sonra, onu üç kez klonlayabilirsiniz. Kopyaları satırın kalan üç sütununa yerleştirin.

Resimleri Değiştir

Kopyalardaki görüntüleri değiştirir.

Sütun 2'deki Görüntü Modülüne Üst Kenar Boşluğu Ekle

Ve ikinci sütundaki Görüntü Modülüne bir üst kenar boşluğu ekleyin.

• Üst Marj: 24.7vw

Resim Modülü #1'in Altına Metin Modülü Ekleyin

İçerik Ekle

Sütun 1'de ihtiyacımız olan bir sonraki modül bir Metin Modülüdür. İçerik kutusuna bir numara ekleyin.

Arka plan rengi

Sonraki arka plan rengini değiştirin. Bu rengin, satıra atadığınız arka plan rengiyle eşleşmesi gerekir.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Lora
• Metin Hizalama: Sağ
• Metin Rengi: #000000
• Metin Boyutu: 3vw
• Metin Satır Yüksekliği: 3vw

boyutlandırma

Ayrıca modülün genişliğini de küçültüyoruz.

• Genişlik: 7vw

aralık

Sonraki boşluk ayarlarında modül için biraz boşluk oluşturun.

• Üst Dolgu: 0.5vw
• Alt Dolgu: 2.5vw
• Sağ Dolgu: 0.9vw

Z İndeksi

Ve Z Endeksini artırın.

• Z İndeksi: 99

Metin Modülünü 3 Kez Klonla

Metin Modülü için genel adımları tamamladıktan sonra, onu üç kez klonlayabilirsiniz.

konumlandırma

Kopyaları buna göre konumlandırın:

Metin Modüllerini Özelleştirin

Metin Modülü #1

Negatif Üst ​​Marj

Farklı Metin Modüllerini konumlarına göre özelleştirmeye başlama zamanı! Sütun 1'deki Metin Modülünü açın ve bir miktar negatif üst kenar boşluğu ekleyin.

• Üst Marj: -5.9vw

Kutu Gölge

Ayrıca aşağıdaki ayarları kullanarak bir kutu gölgesi ekliyoruz:

• Kutu Gölge Yatay Konum: 7vw
• Kutu Gölge Dikey Konumu: 5.9vw
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(35,50,255,0.94)

Metin Modülü #2

Numaralandırmayı Değiştir

İkinci sütundaki Metin Modülünü açarak devam edin ve numarayı değiştirin.

Metin hizalama

Metin hizalamasını da değiştirin.

• Metin Hizalama: Sol

Modül Hizalama

Ve boyutlandırma ayarlarında modül hizalamasını değiştirin.

• Modül Hizalaması: Sağ

aralık

Boşluk ayarlarına geçin ve bir miktar negatif üst kenar boşluğu ekleyin. Dolguyu sağ taraf yerine sola da ekleyin.

• Üst Marj: -6vw
• Sol Dolgu: 0.9vw

Kutu Gölge

Bir kutu gölgesi ekleyerek Metin Modülü tasarımını tamamlayın.

• Kutu Gölge Yatay Konum: 7vw
• Kutu Gölge Dikey Konumu: -6vw
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: #eded

Metin Modülü #3

Numaralandırmayı Değiştir

3. sütundaki Metin Modülüne! İçerik kutusundaki numarayı değiştirin.

Negatif Üst ​​Marj

Tasarım sekmesine gidin ve bir miktar negatif üst kenar boşluğu ekleyin.

• Üst Marj: -6vw

Kutu Gölge

Bir kutu gölgesi de kullanın.

• Kutu Gölge Yatay Konumu: -7vw
• Kutu Gölge Dikey Konumu: -6vw
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: #ff2323

Metin Modülü #4

Numaralandırmayı Değiştir

Sonraki ve son Metin Modülüne geçin. Buradaki numarayı da değiştirin.

Metin hizalama

Ardından, metin hizalamasını değiştirin.

• Metin Hizalama: Sol

Modül Hizalama

Boyutlandırma ayarlarında da modül hizalamasını değiştirin.

• Modül Hizalaması: Sağ

Aralığı Değiştir

Sonraki boşluk ayarlarını değiştirin.

• Üst Marj: 24.7vw
• Alt Marj: -6vw
• Sol Dolgu: 0.9vw

Kutu Gölge

Ve aşağıdaki ayarlarla bir kutu gölgesi ekleyerek Metin Modülü tasarımını tamamlayın:

• Kutu Gölge Yatay Konumu: -7vw
• Kutu Gölge Dikey Konumu: -5.9vw
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: #000000

Tüm Satırı Klonla

Satırı tamamladıktan sonra, görüntülenmesini istediğiniz görüntü sayısına bağlı olarak, onu istediğiniz kadar çoğaltabilirsiniz.

Numaralandırmayı ve Resimleri Değiştir

Tüm resimleri ve sayıları değiştirdiğinizden emin olun ve işiniz bitti!

Ön izleme

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

Son düşünceler

Bu gönderide, etiketli resim köşeleri ile güzel görünümlü bir galerinin nasıl oluşturulacağını gösterdik. Bu, resimlerinizi estetik açıdan çekici bir şekilde sergilemenin benzersiz bir yoludur. JSON dosyasını öğreticinin başında da indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

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.