Divi'de Özel Fotoğraf Galerisi Kaydırıcısı Nasıl Oluşturulur
Yayınlanan: 2019-06-10Kaydırıcıların, öne çıkan hizmetler, ürünler veya sayfalarla kullanıcıların ilgisini çekmek için ekranın üst kısmındaki uygun bir konumda harika olduğunu hepimiz biliyoruz. Bazı sitelerin (fotoğrafçılar olduğunu düşünüyorum) ana sayfalarında bir veya daha fazla fotoğraf galerisine yer vermeleri gerekir. Bunun için bir kaydırıcı kullanmak güzel bir seçenek olabilir. Ancak, fotoğraf galerinizi buna benzer bir kaydırıcıda göstermeyi düşünmemiş olabilirsiniz.
Bu eğitimde, size Divi'de tamamen özel bir fotoğraf galerisi kaydırıcısı oluşturmak için Divi resim galerilerini slaytlarınıza yerleştirmenin kolay bir yolunu göstereceğim. İşin püf noktası, kaydırıcınızın içerik alanında bir WordPress resim galerisi oluşturmaktır. Ardından, varsayılan WordPress Galerisi stili yerine Divi Galerisini kullanma seçeneğini belirlemeniz ve seçmeniz yeterlidir. Uygulaması süper kolay ve eğlenceli.
Başlayalım.
Gizlice Bakış
İşte bu eğitimde oluşturacağımız fotoğraf galerisi kaydırıcısının gizli bir zirvesi.
Özel Fotoğraf Galerisi Kaydırıcı Düzenini ÜCRETSİZ olarak indirin
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.
Ü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.
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!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için aşağıdaki kuruluma sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Kaydırıcı resim ve fotoğraf galerisi için kullanılacak yaklaşık 6-8 resim
Bundan sonra, Divi'de bazı vurgulu sekmeler oluşturmaya başlamak için boş bir tuvaliniz olacak.
Divi Tema Seçeneklerinde Divi Galeri Seçeneğini Etkinleştirin
Divi, varsayılan WordPress Galerisi ekranını bir Divi Galerisi ekranıyla değiştirmenize olanak tanır. Bu nedenle, bir WordPress galerisi oluşturduğunuzda ve onu bir modülün içine yerleştirdiğinizde, galeri Divi Galeri Modülü kullanılarak bir galeri gibi görüntülenir. Bu temelde Divi Builder'daki herhangi bir modüle Divi resim galerileri eklemenize izin verir. Bizim durumumuzda, kaydırıcı modülüne bir Divi Galerisi ekleyeceğiz.
Ayarı değiştirmek için Divi > Tema Seçenekleri'ne gidin. Ardından Genel Sekmesi altında, Divi Galerisi seçeneğini etkinleştirmek için tıklayın.
Bu kadar! Şimdi varsayılan WordPress Galerisi kısa kodu, Divi tarzı bir fotoğraf galerisi görüntüleyecektir.
Divi'de Özel Fotoğraf Galerisi Kaydırıcısını Oluşturma
Bölüm ve Satır
İşleri başlatmak için devam edin ve bir sütun satırı olan normal bir bölüm oluşturun.
Ardından satır ayarlarını aşağıdaki gibi güncelleyin:
- Genişlik: %100 (bu nedenle kaydırıcı mobilde tam genişlikte olacaktır)
- Dolgu: 0 piksel üst, 0 piksel alt
- Yuvarlatılmış Köşeler: 20px
Kaydırıcı İçeriğini Oluşturma
Ardından, satıra bir kaydırıcı modülü ekleyin.
Kaydırıcı ayarlarını açın ve varsayılan olarak eklenen slaytlardan birini silin. Ardından, o slayt için slayt ayarlarını açmak için slayttaki dişli simgesini tıklayın.
Ardından slayt içeriğini aşağıdakilerle güncelleyin:
- Başlık: Galerimiz
- Düğme: Tümünü görüntüle
- Gövde: Bu bizim galerimiz. Bunu kontrol et.
Gövde içeriği alanı altında, Medya Ekle düğmesini tıklayın.
Medya Kitaplığı açılır penceresinde, sol üstteki Galeri Oluştur sekmesini seçin. Ardından galeri için kullanmak istediğiniz 6 görseli seçin ve sağ alttaki “Yeni Galeri Oluştur” butonuna tıklayın.
Bu sizi açılır pencerenin içindeki düzenleme kategorisi sayfasına götürecektir. Divi Galeri stilleri bu WordPress Galerisi ayarlarını geçersiz kılacağından sağ üstteki galeri ayarlarını yok sayın.
Ardından “Galeri Ekle” düğmesini tıklayın.
Bu, kaydırıcı modül içeriğine bir galeri kısa kodu yerleştirir. Galerinin geçerli gövde metninden sonra görüntülenmesini istiyorsanız, kısa kodu içerikten sonra yerleştirdiğinizden emin olun.
Artık kaydırıcı modülünüzün içerik alanında görüntülenen gömülü Divi tarzı bir galeriniz var. Oldukça havalı şeyler!
Bir ana slayt görüntüsü ekleyerek slayt içeriğimizi güncellemeye devam edelim.
Artık kaydırıcı içeriğimiz kullanıma hazır olduğuna göre, 1. slayt için ayarlarınızı kaydedin.
Kaydırıcı Ayarları
Her bir slayt için ayarları kaydettiğinizden emin olun. Ardından, ana kaydırıcı için aşağıdaki tasarım Ayarlarını güncelleyin. Bu, tasarım güncellemelerinin ekleyeceğiniz tüm slaytları etkilemesini sağlayacaktır.
Görüntü Kenarlığı ve Kutu Gölgesi
- Görüntü Yuvarlatılmış Köşeler: 20px
- Görüntü Kenarlığı Genişliği: 40px (masaüstü), 0px (tablet)
- Görüntü Kenarlığı rengi: rgba(0,0,0,0)
- Görüntü Kutusu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölgesi Yatay Konumu: -170px
- Kutu Gölge Dikey Konumu: -220px
- Kutu Gölge Yayılma Gücü: -60px
- Gölge Rengi: rgba(255,255,255,0.2)
Başlık ve Gövde Metni
- Başlık Yazı Tipi: Karla
- Başlık Metni Hizalama: sağ
- Başlık metni Boyut: 48px
- Başlık Satırı Yüksekliği: 1.3em
- Gövde Metin Boyutu: 16px
- Gövde Harf Aralığı: 2px
- Gövde Çizgisi Yüksekliği: 2em
Düğme Stilleri
- Düğme Metin Boyutu: 16px
- Düğme Arka Plan Rengi: #333333
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 20px
- Düğme Harf Aralığı: 2px
- Düğme Yazı Tipi: Karla
- Düğme yazı tipi Ağırlık: Kalın
- Düğme Simgesi: ekran görüntüsüne bakın
- Düğme Hizalama: sağ
- Düğme Kenar Boşluğu: -5em sağ
- Düğme Dolgusu (masaüstü): 3em sol, 5em sağ
- Düğme Dolgusu (telefon): 2em sol, 6em sağ
- Düğme Kutusu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölge Dikey Konumu: 0px
- Kutu Gölge Yayılma Gücü: 20 piksel (masaüstü), 10 piksel (telefon)
- Gölge Rengi: #ffffff
Kaydırıcı Dolgusu
- Dolgu: %10 üst, %10 alt
Slayt 1'e Arka Plan Gradyanı Ekleme
Artık kaydırıcı stilini yerleştirdiğimize göre, bireysel slaytımıza özel bir arka plan gradyanı ekleyebiliriz. Slayt 1 için slayt ayarlarını açın ve aşağıdakileri güncelleyin:
- Arka Plan Gradyanı Sol Renk: #6d0066
- Arka Plan Gradyanı Sağ Renk: #000000
- Gradyan Türü: Radyal
- Radyal Yön: Sol Üst
Slayt 2 Oluşturma
İkinci slaydı oluşturmak için, kopya simgesini kullanarak slaydı 1 çoğaltabiliriz. Ardından, çoğaltılan slayt (slayt 2) ayarlarını açın.
Bu noktada, yeni slaydın içeriğini gerektiği gibi güncelleyebilirsiniz. Örneğin, yeni bir slayt görüntüsü ekleyebilir ve slayda yeni bir fotoğraf galerisi eklemek için başka bir galeri yerleştirme kısa kodu oluşturabilirsiniz.
Ardından arka plan gradyanını aşağıdaki gibi güncelleyin:
- Arka Plan Gradyanı Sol Renk: #0c71c3
Son sonuç
İşte nihai sonuç.
Ve işte kaydırıcının tablette ve telefonda nasıl göründüğü.
Slayt görüntülerini çıkarırsanız, yalnızca slayt içeriği ve galeri gösterilecek şekilde kaydırıcı burada.
Son düşünceler
Divi'nin Kaydırıcı Modülüne bir divi galerisi yerleştirme yeteneği, çok az çabayla harika görünümlü fotoğraf galerisi kaydırıcıları oluşturma fırsatı sunar. Umarım, bu eğitim size bazı güzel fotoğraf galerisi kaydırıcıları oluşturmak için biraz ilham verecektir.
Bu divi galeri yerleştirme tekniği hakkında daha fazla bilgi için (gömme divi galerisini şekillendirmeyle ilgili ipuçları dahil), Divi galerilerini geçişlere nasıl yerleştireceğinize ilişkin gönderiye göz atın.
Yorumlarda sizden haber bekliyorum.
Şerefe!