Divi Galeri Modülü Görüntünüz İçin 6 Benzersiz Sınır Tasarımı
Divi Galeri Modülü, web sitenizde resim galerilerini görüntülemek için doğru yerdir. Varsayılan olarak, galeri modülü, görüntüyü ana tasarım öğesi olarak korumak için kesinlikle harika bir stil olmadan kutunun düzeninde görüntünüzü görüntüleyecektir. Ancak, biraz yaratıcı olmak istiyorsanız, resim galerinizi öne çıkarmak için görüntülerinizi farklı sınır tasarımlarıyla çerçeveleyebilirsiniz. Galeri modülü bu süreci yapmayı oldukça kolaylaştırır ve sonuçlar sizi şaşırtabilir. Bu öğreticide, Divi Galerisi modülünü kullanarak resim galeriniz için nasıl benzersiz bir sınır tasarımı oluşturacağınızı göstereceğim.
Başlayalım! Polaroid Resim Galerisi Sneak #1
Yeni sayfanızı bir başlangıç olarak hazırlayın, yeni bir sayfa oluşturmanız, sayfanızda bir başlık vermeniz ve Divi Builder’ı kullanmanız gerekir. “Uyan” 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 Şablonlarını Depolama Divi Galeri Modülü için 5 farklı sınır tasarlayacağımız için, temel galeri modülü şablonu kütüphanemize saklanıyorsa çok yararlı olacaktır, böylece her tasarladığımızda başlangıçtan başlamamız gerekmez Yeni bir galeri. Bir satır sütunu ile yeni bir bölüm oluşturun, ardından Galeri modülünü satıra ekleyin. Divi, Galeri modülünü ızgara ekranındaki medya galerinizden aşağıdaki gibi dolduracaktır: Galeri modülünü ayarlarken, galeriye 12 resim eklemek için Gray Plus simgesini tıklayın. Restoran galerisi sayfası düzeninden resimler kullanıyorum. Ardından Divi Galeri Modülü ayarlarını aşağıdaki gibi güncelleyin: Resim Numarası: 12 Başlık ve Açıklama Göster: Sayma Göster: Hayır Bu, ilerlemek için iyi bir şablon olarak işlev görecektir. Galeri modülünü Divi kitaplığınıza kaydetmek için, imleci modüle yönlendirirken Gri Modül menüsündeki Kütüphaneye Kaydet simgesini tıklayın. Ardından “Galeri Modül Şablonu” şablonunu adlandırın ve kütüphaneye kaydedin. Sayfanıza depolanan bir galeri modülü eklemek istediğinizde, yapmanız gereken tek şey her zamanki gibi yeni bir modül eklemek için tıklamaktır. Ardından, açılır pencereden Kütüphane Ekle sekmesini seçin ve “Galeri Modülü Şablonu” adıyla Galeri Modülünü tıklayın. İşte burada. Şimdi sınır tasarımına gidelim! Polaroid resim galerisi #1 Bir sonraki tasarım, polaroid görüntülere benzeyen görüntüler için popüler bir sınırdır. Resim başlığınızı görüntülemek istiyorsanız bu çok kullanışlı bir düzendir. İşte nasıl yapılacağı. Bölümü Ayarla Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun. Ardından kütüphaneden depolanan Divi Galerisi modülü şablonunu ekleyin (yukarıda açıklanmıştır). Galeri modülünü düzenlemeden önce, parçanın ayarlarını açın ve beyaz sınırımız biraz belirgin olacak şekilde gri arka planının rengini ekleyin. Sonraki satır ayarları satır ayarlarını aşağıdakilerle güncelleyin: Talang genişliği: 1
Bu, görüntü arasındaki varsayılan marjın mesafesini ortadan kaldıracaktır. Kendi özel mesafemizi daha sonra ekleyeceğiz. Galeri Modül Ayarları Aşağıdaki Galeri ve Güncelleme Modül Ayarlarını Açın: Başlık ve Altyazı Göster: Evet Heavy Yazı Tipi Başlık: Kalınlık Yazı Tipi Başlık: TT Tesviye Metin Başlığı: Orta Yükseklik Hattı Başlık: 2EM Üst Sınır Genişliği Görüntü: 10px Üst Sınır Renk Görüntü: #fffff Görüntü Sol Sınır Genişliği: 10px Renk Görüntü Sol Sınır: #fffff Görüntü Genişliği Sağ Limit: 10px Görüntü Renk Sağ Limit: #ffffff Resimlerimiz arasındaki mesafeyi yapmak için, Galeri öğesine aşağıdaki sınırları ekleyin: Sınır Genişliği: 10px Renk Sınır: #DDDDDD (bölümün arka plan rengiyle eşleşen) Polaroid sınır tasarımımızın altını renklendirmek için modüle beyaz bir arka plan eklememiz gerekir. Arka plan rengi: #ffffff Buradaki nihai sonuç, Polaroid sınır tasarımının nihai sonucudur. #2 Temiz ızgara tasarımları Görüntünüz için basit ve temiz bir kafes stili arıyorsanız, bu sınır tasarımı iyi bir seçimdir. Bu gözlerinde dengeli ve rahat. İşte nasıl yapılacağı. Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun. Ardından, Kütüphane’den (yukarıda açıklanan) depolanan Divi Galeri Modülü Şablonunu ekleyin. Satır Ayarları Galeri modülünü düzenlemeden önce aşağıdaki bölümleri aç: 1 Özel Dolgu: 1 Özel Dolgu: 0px üst, 0px Sınır Genişliği: 10px Renk Sınır: # dddddd Galerimizin dış mesafesini görüntüler arasındaki mesafeyle eşleştirmek için bu satır sınırı gereklidir. Galeri Modül Ayarları Artık Galeri Modülü Ayarlarını Açın ve Aşağıdakileri Güncelleyerek Galeri ve Galeri Görüntü Öğelerinize Sınır Ekleyin: Görüntü Limitinin Genişliği: 20 PX Renk Görüntü Sınır: #FFFFFF Sınır Genişliği: 10 PX Renk Sınır: Şeffaf (Bu, arka plan rengini göstermek için önemlidir)
Şimdi tasarımı tamamlamak için arka plan rengini galeri modülüne ekleyin. Arka Plan Rengi: #DDDDDD (Bu çizgi sınırının rengiyle eşleşir) Galeri öğesi sınırınız şeffaf olduğundan, arka plan rengini devralır. Son tasarım Arka plan rengini değiştirerek sınır rengini değiştirin farklı bir sınır rengiyle oynamak istiyorsanız, arka plan rengini istediğiniz gibi güncelleyebilirsiniz. Ancak, satır sınırını silmeniz, modüle aşağıdaki alanı eklemeniz gerekir: özel dolgu: 10px üst, 10px alt, 10 piksel sol, 10px sağ Artık arka plan rengini istediğiniz her şeye ayarlayabilirsiniz: #3 Galerinin arkasındaki özel arka plan görüntüleri Bu tasarım, bir arka plan görüntüsünü görüntü limitiniz için bir tür arka plan dokusu olarak kullanmanıza olanak tanır. Bu, her benzersiz görüntü sınırını oluşturmanın iyi bir yoludur, çünkü modülün arka plan görüntüsünün belirli bir alanını gösterir. Kurulum, yukarıdaki temiz ızgara tasarımına çok benzer. İşte nasıl yapılacağı. Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun. Ardından kütüphaneden depolanan Divi Galerisi modülü şablonunu ekleyin (yukarıda açıklanmıştır). Satır Ayarları Galeri modülünü düzenlemeden önce, aşağıdaki bölüm ayarlarını açın ve aşağıdakileri güncelleyin: Talang genişliği: 1 Özel Dolgu: 0px üst, 0px aşağıda
Galeri Modül Ayarları Şimdi Galeri Modülü Ayarlarını şu şekilde güncelleyin: Arka Plan Görüntü: [Görüntü Ekle] (Göremediniz) Arka Plan Rengi: #DDDDDD (Bu yalnızca şeffaflıklı PNG’nin bir arka plan görüntüsü kullanıyorsanız görüntülenir) Görüntü sınırı: #ffffff
Sınır genişliği (modüller için): 10px sınır rengi: #ffffff sonra Galeri öğesine aşağıdaki özel CSS ekleyin: Dolgu:%3; Bu, tasarımı tamamlamak için galeri öğeleri arasında bir ayrım oluşturur.Nihai sonuç #4 Her tasarım galerisi öğesinin arkasındaki özel arka plan resimleri, her galeri öğesi için bir sınır olarak bir arka plan görüntüsü kullanmanızı sağlar. İstediğiniz herhangi bir özel görüntü oluşturabilir veya daha önce yapılmış olan düzenimize dahil olan arka plan resimlerinden birini kullanabilirsiniz. Meetup Directive sayfasının düzenlerinden birini kullanıyorum. İşte nasıl yapılacağı. Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun. Ardından kütüphaneden depolanan Divi Galerisi modülü şablonunu ekleyin (yukarıda açıklanmıştır). Satır Ayarları Galeri modülünü düzenlemeden önce, aşağıdaki bölüm ayarlarını açın ve aşağıdakileri güncelleyin: Bu satırın tam genişliği yapın: 2 Galeri Modül Ayarları Şimdi Galeri Modül ayarlarını aşağıdaki gibi güncelleyin: Görüntü Sınırının Genişliği: 10PX Renk Görüntü Sınırı: #Ffffff Ardından Galeri Öğesine aşağıdaki özel CSS ekleyin: Dolgu: 30px;
Arka plan-image: url (& quot; & quot;); Arka plan boyutu: içerme; Arka Plan-Tekrar: Yenilenmez; Arka Plan pozisyonu: doğru; Ardından, galeri öğelerinizin arkasına yerleştirmek istediğiniz özel bir arka plan görüntüsü yüklemeniz gerekir. Bu örnek için, önceden hazırlanmış düzen paketlerimizden birinden görüntüler kullanıyorum. Resim WordPress Medya Galerisi’ne yüklendikten sonra, görüntü URL’sini panonuza kopyalayın.
Şimdi Galeri Modülünü ve URL modülü ayarlarını, “URL görüntüsünü buraya gir” olduğu söylenen özel bir CSS’de açın. URL’yi bir teklifte kaydettiğinizden emin olun.
Buradaki nihai sonuç nihai sonuçtur.
#5 sınır gölge kutuları ve tarak
Kutunun gölgesi galerinize özel yetenek vermek çok iyidir. Görüntüyü benzersiz bir şekilde çerçeveleyen kırık bir kafes tasarımı oluşturmak için Divi Galerisi modülü görüntüsündeki kutunun gölgesini kullanabilirsiniz. Ayrıca, her türlü olasılık için kutunun gölgesini bir sınır tasarımı ile birleştirebilirsiniz. İşte nasıl yapılacağı. Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun. Ardından kütüphaneden depolanan Divi Galerisi modülü şablonunu ekleyin (yukarıda açıklanmıştır). Görüntünün ve Gölgenin Sınırını Ekleyin Aşağıdaki galeri açın ve Güncelleme Ayarları: Görüntü sınırının genişliği: 10px Renk Görüntü Sınır: #FFFFF Gölge Görüntü Kutusu: Ekran Yatay Konum Gölge Kutusu: -30px Dikey Konum Gölge Kutusu: – 30px Gölgelerin Dağıtımının Gücü Kutusu: -10px Gölge Renk: #E08474 Limit Öğesi Limit Tasarım Galerisi Ekle Kutu şimdi olduğu gibi iyi görünüyor. Bununla birlikte, aşağıdakileri güncelleyerek galeri öğeniz için ek bir sınır ekleyebilirsiniz: sağ sınır genişliği: 7px sağ kenar renk: sağ kenarlık kuvveti: alt sınır genişliği: 7px alt sınır rengi: #ddddd alt sınır kuvveti: noktalı Size mevcut çeşitli stilleri hatırlatmak için noktalı sınır stilini ekledim. Diğer stilleri (katı veya kırık gibi) kullanmaktan çekinmeyin. Çizgi Ayarları Tasarımınıza daha fazla alan vermek, aşağıdaki satır ayarlarını açın ve güncelleme: Tam bir çizgi oluşturun: Evet, aşağıdaki son tasarım son tasarımdır. #6: Film Şeridi Sınır Tasarımı Bu son tasarım için, biraz daha benzersiz bir şey göstereceğim. Bu tasarım, her bir görüntü sütunu bir film şeridine benzeyecek şekilde bölen galeri öğesinin sağ ve sol taraflarında noktalı çizgiler kullanır. İşte nasıl yapılacağı. Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun. Ardından kütüphaneden depolanan Divi Galerisi 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 olukların genişliğini 1 olarak değiştirin. Talang genişliği: 1 Bu, görüntünüz arasındaki varsayılan marjın mesafesini ortadan kaldıracaktır. Ayarlar Sonraki Galeri Modülü, Aşağıdaki Galeri ve Güncelleme Ayarlarını Açın: Sağ kenarlık genişliğinin görüntüsünün sınırını ekleyin. Şekil: 8px sağ kenar renk görüntüsü: #ddddd sağ kenarlık kuvveti görüntüsü: Sol sınırın çizgili genişliği: 8px renk Sol Sınır Şekil: #DDDDD Sol Sınır Tarzının Resmi: Çizgili Garist Galeri Ek Ekleme Sınır Sınır Sınır Sınırı: 20PX Sol Sınır Renk: #FFFFFF Genişlik Sağ Sınır: 20px Sağ Kenar Renk: Gölge Görüntü Kutusu Gölge Görüntü Kutusu: Ekran Ekran Gücü Becerileri Gölge Kutusu: 0PX Güç Gölge Kutusunun Yayılması: -10px Gölge Renk: #222222 Arka Plan Rengi Ekle Arka Plan Rengi: #222222 Ardından Galeri Öğesine aşağıdaki özel CSS ekleyin: Dolgu: 5px 10px; Nihai sonuç şimdi sonuçları görüyor.
