Divi Galeri Modülü Resimleriniz için 6 Eşsiz Bordür Tasarımı

Divi Galeri Modülü, web sitenizde bir resim galerisi sergilemek için harika bir yerdir. Varsayılan olarak, galeri modülü, resimlerinizi çok fazla stil olmadan bir ızgara düzeninde görüntüler; bu, görüntüleri birincil tasarım öğesi olarak tutmak için harikadır. Bununla birlikte, biraz yaratıcı olmak istiyorsanız, resim galerinizi öne çıkarmak için resimlerinizi farklı kenarlık tasarımlarıyla çerçeveleyebilirsiniz. Galeri modülü bu işlemi oldukça kolaylaştırır ve sonuçlar sizi şaşırtabilir.

Bu derste, Divi Galeri modülünü kullanarak resim galerileriniz için benzersiz bordür tasarımlarının nasıl oluşturulacağını göstereceğim.

Başlayalım!

Gizlice Bakış

#1 Polaroid Resim Galerisi

1. Bina Tasarımına Başlayın

#2 Temiz Izgara Tasarımı

Bina Tasarımına Başlayın #2

#3 Tüm Galeri Arkasındaki Özel Arka Plan Resmi

Bina Tasarımına Başlayın #3

#4 Her Galeri Öğesinin Arkasındaki Özel Arka Plan Resmi

Yapı Tasarımına Başlayın #4

#5 Kutu Gölge ve Kenar Kombo

Yapı Tasarımına Başlayın #5

#6 Film Şeridi Bordür Tasarımı

Bina Tasarımına Başlayın #6

Başlamak için Gerekenler

Youtube Kanalımıza Abone Olun

Bu eğitim için Divi temasının kurulu ve aktif olması gerekir. Resim galerisini oluşturmak için kullanılmak üzere medya kitaplığınıza eklenen 12 resme de ihtiyacınız olacak. Izgara düzeni kullanan bir Divi galeri modülü için, resimlerinizin çoğu masaüstünde ekranı güzel bir şekilde doldurması için ışık kutusu ekranında açılmasını planlıyorsanız, resimlerinizin boyutu 1500 piksele 800 piksel civarında olmalıdır.

Yeni Sayfanızı Ayarlama

Yeni başlayanlar için yeni bir sayfa oluşturmanız, sayfanıza bir başlık vermeniz ve Divi Builder'ı dağıtmanız gerekecek. “Sıfırdan Oluştur” seçeneğini seçin ve ardından sayfanızı yayınlayın. Ardından ön uçta oluşturmak için tıklayın.

Divi Galeri modülü Şablonunu Kaydetme

Divi Galeri modülü için 5 farklı bordür stili tasarlayacağımız için, her yeni galeri tasarladığımızda sıfırdan başlamak zorunda kalmamak için kütüphanemize temel bir galeri modülü şablonunun kaydedilmesi faydalı olacaktır. .

Bir sütun satırıyla yeni bir bölüm oluşturun ve ardından Galeri Modülünü satıra ekleyin.

Divi, galeri modülünü medya galerinizdeki bazı görüntülerle aşağıdaki gibi bir ızgara ekranında dolduracaktır:

Galeri modülü ayarlarında, galeriye 12 resim eklemek için gri artı simgesine tıklayın. Restoran Galerisi Sayfa Düzenindeki resimleri kullanıyorum.

Ardından Divi Galeri Modülü ayarlarını aşağıdaki gibi güncelleyin:

Görüntü Sayısı: 12
Başlığı ve Altyazıyı Göster: HAYIR
Sayfalandırmayı Göster: HAYIR

Bu, ilerlemek için iyi bir şablon olarak çalışacaktır. Galeri modülünü Divi Kitaplığınıza kaydetmek için, modülün üzerine geldiğinizde gri modül menüsünde Kitaplığa Kaydet simgesine tıklayın. Ardından şablonu “Galeri Modülü Şablonu” olarak adlandırın ve kütüphaneye kaydedin.

Kaydedilen galeri modülünü sayfanıza eklemek istediğinizde, normal şekilde yeni bir modül eklemek için tıklamanız yeterlidir. Ardından açılan pencerede Kitaplıktan Ekle sekmesini seçin ve “Galeri Modülü Şablonu” adlı galeri modülüne tıklayın.

Bu kadar. Şimdi gelelim o bordür tasarımlarına!

#1 Polaroid Resim Galerisi

Bu sonraki tasarım, polaroid bir resme benzeyen görüntüler için popüler bir kenarlıktır. Bu, özellikle resim başlıklarınızı görüntülemek istiyorsanız kullanışlı bir düzendir.

İşte nasıl yapılacağı.

Bölüm Ayarları

Tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından kütüphaneden kaydedilmiş Divi Galeri Modülü Şablonunu ekleyin (yukarıda açıklanmıştır). Galeri modülünü düzenlemeden önce, bölüm ayarlarını açın ve beyaz kenarlıklarımızın biraz açılması için gri bir arka plan rengi ekleyin.

Arkaplan: #dddddd

Satır Ayarları

Sonraki satır ayarlarını aşağıdakilerle güncelleyin:

Oluk Genişliği: 1

Bu, görüntüler arasındaki varsayılan kenar boşluğundan kurtulacaktır. Daha sonra kendi özel aralığımızı ekleyeceğiz.

Galeri Modül Ayarları

Galeri modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Başlığı ve Altyazıyı Göster: EVET

Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Yazı Tipi Stili: TT
Başlık Metni Hizalama: Orta
Başlık Satırı Yüksekliği: 2em

Resim Üst kenarlık genişliği: 10px
Resim Üst kenarlık rengi: #ffffff
Resim Sol kenarlık genişliği: 10px
Resim Sol kenarlık rengi: #ffffff
Resim Sağ kenarlık genişliği: 10px
Resim Sağ kenarlık rengi: #ffffff

Resimlerimiz arasında boşluk oluşturmak için galeri öğelerine aşağıdaki kenarlığı ekleyin:

Kenar Genişliği: 10px
Kenarlık Rengi: #dddddd (bölüm arka planının rengiyle eşleşir)

Polaroid bordür tasarımımızın alt kısmını renklendirmek için modüle beyaz bir arka plan eklememiz gerekiyor.

Arka Plan Rengi: #ffffff

Son sonuç

İşte polaroid bordür tasarımının nihai sonucu.

#2 Temiz Izgara Tasarımı

Resimleriniz için basit ve temiz bir ızgara stili arıyorsanız, bu bordür tasarımı güzel bir seçenektir. İyi dengelenmiş ve gözleri yormaz.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından kütüphaneden kaydedilmiş Divi Galeri Modülü Şablonunu ekleyin (yukarıda açıklanmıştır).

Satır Ayarları

Galeri modülünü düzenlemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Oluk Genişliği: 1
Özel Dolgu: 0 piksel üst, 0 piksel alt
Kenar Genişliği: 10px
Kenar Rengi: #dddddd

Bu satır sınırı, galerimizin dış boşluğunu resimler arasındaki boşlukla eşleştirmek için gereklidir.

Galeri Modül Ayarları

Şimdi galeri modülü ayarlarını açın ve aşağıdakileri güncelleyerek galeri öğelerinize ve galeri resimlerinize bir kenarlık ekleyin:

Resim kenarlığı genişliği: 20 piksel
Resim kenarlığı rengi: #ffffff

Kenar Genişliği: 10px
Kenarlık rengi: şeffaf (bu, arka plan rengini göstermek için önemlidir)

Şimdi tasarımı tamamlamak için galeri modülüne bir arka plan rengi ekleyin.

Arka plan rengi: #dddddd (bu, satır kenarlığı rengiyle eşleşir)

Galeri öğenizin kenarlığı saydam olduğundan, arka planın rengini devralır.

Son tasarım

Arka Plan Rengini Değiştirerek Kenar Renklerini Değiştirme

Farklı kenarlık renkleri ile oynamak istiyorsanız, arka plan rengini istediğiniz gibi güncelleyebilirsiniz. Ancak, satır kenarlığını çıkarmanız gerekecek, modüle aşağıdaki boşlukları ekleyin:

Özel Dolgu: 10 piksel üst, 10 piksel alt, 10 piksel sol, 10 piksel sağ

Artık arka plan rengini istediğiniz gibi ayarlayabilirsiniz:

#3 Tüm Galeri Arkasındaki Özel Arka Plan Resmi

Bu tasarım, resimlerinizin sınırları için bir tür doku arka planı olarak hizmet etmek üzere bir arka plan resmi kullanmanıza olanak tanır. Bu, modül arka plan görüntüsünün belirli bir alanını gösterdiği için her bir görüntü kenarlığını benzersiz hale getirmenin güzel bir yoludur. Kurulum, yukarıdaki Temiz Izgara Tasarımına çok benzer.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından kütüphaneden kaydedilmiş Divi Galeri Modülü Şablonunu ekleyin (yukarıda açıklanmıştır).

Satır Ayarları

Galeri modülünü düzenlemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Oluk Genişliği: 1
Özel Dolgu: 0 piksel üst, 0 piksel alt

Galeri Modül Ayarları

Şimdi Galeri Modülü ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Resmi: [resim ekle] (henüz göremeyeceksiniz)
Arka plan rengi: #dddddd (bu yalnızca saydamlığı olan bir png arka plan resmi kullanıyorsanız gösterilir)
Resim Kenarlık Genişliği: 10px
Görüntü Kenarlığı Rengi: #ffffff

Kenar Genişliği (modül için): 10 piksel
Kenar Rengi: #ffffff

Ardından, Galeri Öğesine aşağıdaki Özel CSS'yi ekleyin:

padding: 3%;

Bu, tasarımı tamamlamak için galeri öğeleri arasındaki ayrımı oluşturur.

Son sonuç

#4 Her Galeri Öğesinin Arkasındaki Özel Arka Plan Resmi

Bu tasarım, galeri öğelerinin her biri için ayrı ayrı kenarlık görevi görecek bir arka plan resmi kullanmanıza olanak tanır. İstediğiniz herhangi bir özel görüntüyü oluşturabilir veya hazır düzenlerimizde bulunan arka plan görüntülerinden birini kullanabilirsiniz. Meetup Açılış Sayfası Düzeninden birini kullanıyorum.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından kütüphaneden kaydedilmiş Divi Galeri Modülü Şablonunu ekleyin (yukarıda açıklanmıştır).

Satır Ayarları

Galeri modülünü düzenlemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Bu Satırı Tam Genişlikte Yapın: EVET
Oluk Genişliği: 2

Galeri Modül Ayarları

Şimdi Galeri Modülü ayarlarını aşağıdaki gibi güncelleyin:

Resim Kenarlık Genişliği: 10px
Görüntü Kenarlığı Rengi: #ffffff

Ardından, Galeri Öğesine aşağıdaki özel CSS'yi ekleyin:

padding: 30px;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: right;

Ardından, galeri öğelerinizin her birinin arkasına oturmak istediğiniz özel arka plan resmini yüklemeniz gerekecek. Bu örnek için, önceden hazırlanmış düzen paketlerimizden birinden bir resim kullanıyorum. Resim, WordPress Medya galerisine yüklendikten sonra, resim URL'sini panonuza kopyalayın.

Şimdi geri dönün ve galeri modülü ayarlarını açın ve URL'yi "buraya resim url'si ekle" yazan özel CSS'ye yapıştırın. URL'yi alıntıların içinde tuttuğunuzdan emin olun.

Son sonuç

İşte nihai sonuç.

#5 Kutu Gölge ve Kenar Kombo

Kutu gölgeleri, galerinize özel bir hava katmak için harikadır. Görüntüleri benzersiz bir şekilde çerçeveleyen kırık bir ızgara tasarımı oluşturmak için Divi galeri modülü görüntülerinde kutu gölgeleri kullanabilirsiniz. Her türlü imkan için kutu gölgesini bordür tasarımları ile de kombinleyebilirsiniz.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından kütüphaneden kaydedilmiş Divi Galeri Modülü Şablonunu ekleyin (yukarıda açıklanmıştır).

Görüntü Kenarlığı ve Kutu Gölgesi Ekle

Galeri ayarlarını açın ve aşağıdakileri güncelleyin:

Resim Kenarlık Genişliği: 10px
Görüntü Kenarlığı Rengi: #ffffff

Görüntü Kutusu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -30px
Kutu Gölgesi Dikey Konumu: -30px
Kutu Gölge Yayılma Gücü: -10px
Gölge Rengi: #e08474

Galeri Öğesi Kenarlığını Ekle

Kutu gölge tasarımı şimdi olduğu gibi iyi görünüyor. Ancak, aşağıdakileri güncelleyerek galeri öğeniz için ek bir kenarlık da ekleyebilirsiniz:

Sağ Kenar Genişliği: 7px
Sağ Kenar Rengi: #dddddd
Sağ Kenarlık Stili: Noktalı
Alt Kenar Genişliği: 7px
Alt Kenarlık Rengi: #dddddd
Alt Kenarlık Stili: Noktalı

Size mevcut farklı stilleri hatırlatmak için noktalı bir kenarlık stili ekledim. Diğer stilleri kullanmaktan çekinmeyin (düz veya kesikli gibi).

Satır Ayarları

Tasarımınıza daha fazla yer açmak için satır ayarlarını açın ve aşağıdakileri güncelleyin:

Satırı Tam Genişlik Yap: EVET

Son tasarım

İşte son tasarım.

#6: Film Şeridi Bordür Tasarımı

Bu son tasarım için size biraz daha benzersiz bir şey göstereyim dedim. Bu tasarım, her bir görüntü sütununu film şeritlerine benzeyen bir şekilde bölen galeri öğelerinin yalnızca sağ ve sol tarafında kesikli bir kenar stili kullanır.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından kütüphaneden kaydedilmiş Divi Galeri Modülü Şablonunu ekleyin (yukarıda açıklanmıştır).

Satır Ayarları

Galeri modülünü düzenlemeden önce satır ayarlarını açın ve oluk genişliğini 1 olarak değiştirin.

Oluk Genişliği: 1

Bu, resimleriniz arasındaki varsayılan kenar boşluğundan kurtulacaktır.

Galeri Modül Ayarları

Ardından, Galeri ayarlarını açın ve aşağıdakileri güncelleyin:

Kesikli Resim Kenarlıkları Ekle

Resim Sağ Kenar Genişliği: 8px
Görüntü Sağ Kenarlık Rengi: #dddddd
Görüntü Sağ Kenarlık Stili: Kesikli
Resim Sol Kenar Genişliği: 8px
Resim Sol Kenarlık Rengi: #dddddd
Görüntü Sol Kenarlık Stili: Kesikli

Boşluk için Galeri Öğesi Kenarlığı Ekle

Sol Kenar Genişliği: 20px
Sol Kenar Rengi: #ffffff
Sağ Kenar Genişliği: 20px
Sağ Kenar Rengi: #ffffff

Resim Kutusu Gölgesi Ekle

Görüntü Kutusu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Bulanıklığı Gücü: 0px
Kutu Gölge Yayılma Gücü: -10px
Gölge Rengi: #222222

Arka Plan Rengi Ekle

Arka Plan Rengi: #222222

Ardından, Galeri Öğesine aşağıdaki özel CSS'yi ekleyin:

padding: 5px 10px;

Nihai Sonuç

Şimdi sonucu kontrol edin.

Son düşünceler

Umarım bu altı bordür tasarımı örneği, Divi Galeri Modülünü kullanırken resimleriniz için bazı özel bordür tasarımları oluşturmak için biraz ilham verir. Divi Galeri modülünde bulunan ayarlara hakim olduğunuzda, tek yapmanız gereken biraz yaratıcılıktır. Farklı görseller, renkler ve boşluklarla kendinize ait yeni tasarım seçeneklerini keşfederken biraz eğlenin.

Yorumlarda sizden haber bekliyorum.

Şerefe!