Divi ile Çarpıcı Galeri Görüşleri Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi's Wedding Planner Layout Pack'i kullanarak nasıl çarpıcı galeri referansları oluşturacağınızı göstereceğiz. Bu eğitim, referansları aynı noktada portföyünüze bağlamanıza yardımcı olacaktır. Bu, ziyaretçileri becerilerinize ikna etmeye ve onları potansiyel müşterilere dönüştürmeye bir adım daha yaklaşmanıza olanak tanır. Ayrıca, görüntülediğiniz resimler için üzerine gelindiğinde ince bir efekt uygulayacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım.

Üzerinde gezinme

Düğün Planlayıcı Düzen Paketinin Açılış Sayfasını Açın

Divi'nin çarpıcı Wedding Planner Layout Pack'ini kullanarak oluşturduğunuz açılış sayfasını açarak başlayın.

Görüşler Bölümünü Değiştir

İkinci Satırı Kaldır

Bu düzen zaten bir referans bölümü içeriyor. Yeni bir bölüm oluşturmak yerine, galeri referanslarını oluşturmak için bu bölümü değiştireceğiz. Bölüme gelene kadar aşağı kaydırın ve ikinci satırı silin.

Sütun 1'deki Görüntü Modülünü Kaldırın

Artık o bölümde bir satır kaldı. O satırın ilk sütununda bulabileceğiniz Görüntü Modülünü silerek devam edin.

Satır #1 Ayarlarını Değiştir

Sütun Yapısı

İstediğimiz gibi görünmesi için bu satırın ayarlarında bazı değişiklikler yapmamız gerekecek. Sütun yapısını iki yerine bir sütuna değiştirerek başlayın.

Arka plan rengi

Ardından, satırınıza beyaz bir arka plan rengi ekleyin.

Arka plan görüntüsü

Medya Kitaplığınızda bulabileceğiniz 'divider.png' adlı bir arka plan desenini yeniden kullanacağız. Bu deseni arka plan resminiz olarak seçtikten sonra, ona aşağıdaki ayarları uygulayın:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Tekrarı: Tekrarla

Satır Hizalama

Bu galeri referanslarını sayfanızın hem sol hem de sağ tarafında oluşturacağız. Sol taraftan başlayacağız ve bunun için sıramıza bir sol Satır Hizalaması uygulamamız gerekecek.

aralık

Ardından Aralık ayarlarını açın ve satırınıza biraz özel kenar boşluğu ve dolgu ekleyin:

• Üst Kenar Boşluğu: 50px
• Üst ve Alt Dolgu: 0px

Kutu Gölge

Son olarak, güzel bir etki yaratmak için bu satırın kutu gölgesiyle de oynayacağız:

• Kutu Gölgesi Yatay Konumu: 60px
• Kutu Gölgesi Dikey Konumu: 80px
• Kutu Gölge Yayılma Gücü: 37px
• Gölge Rengi: #ded5d8
• Kutu Gölge Konumu: Dış Gölge

Metin Modülü Ayarlarını Değiştir

Arka Plan Rengini Kaldır

Bu satırda bulabileceğiniz Metin Modülü, tutmak istediğimiz bir sürü ayara sahip. Ancak, nihai sonucumuzla eşleşmesi için bazı değişiklikler yapmamız gerekecek. Metin Modülünün ayarlarını açtıktan sonra yapmanız gereken ilk şey, ona uygulanan arka plan rengini silmek.

aralık

Bu Metin Modülüne de uygulanan bazı özel kenar boşlukları vardır. Devam edin ve ihtiyacımız olmayacağından tüm özel kenar boşluğunu silin.

Metin Modülünü Klonla ve Önceki Metin Modülünün Altına Yerleştir

Sayfadaki Metin Modülünü Bulun

Sıramızda ihtiyaç duyacağımız bir sonraki eleman, test eden(ler)in isimlerini içeren Metin Modülüdür. Kendimize biraz zaman kazandıracağız ve zaten sayfada bulabileceğiniz Metin Modüllerinden birini yeniden kullanacağız. Devam edin ve aşağıdaki Metin Modülünü bulun ve klonlayın:

Sıraya Yerleştir

Klonlanmış Metin Modülünü referans satırınızdaki önceki Metin Modülünün hemen altına yerleştirin.

İçeriği Değiştir

İçeriği, referansınızda görünmesini istediğiniz adlarla değiştirin.

Metin Ayarlarını Değiştir

Ardından, metin ayarlarını açın ve aşağıdaki değişiklikleri yapın:

• Başlık 6 Metin Hizalama: Sağ
• Başlık 6 Metin Boyutu: 77px

Aralığı Değiştir

Aşağıdaki boşluk ayarlarını uygulayarak bu Metin Modülünü satır kutusu gölgesi ve bölüm arka planıyla örtüştüreceğiz:

• Üst Kenar Boşluğu: -50px
• Sağ Kenar Boşluğu: -150px
• Alt Dolgu: 20px

Opaklığı Değiştir

Ayrıca Metin Modülümüzün opaklığını biraz daha çarpıcı hale getirmek için '%17'ye çıkaracağız.

2. Satır Ekle

Sütun Yapısı

Tanıklık sırasını bitirdik. Bir sonraki adım, beraberindeki galeriyi eklemektir. Bunun için aşağıdaki sütun yapısına sahip yeni bir satır kullanacağız:

Satır Hizalama

Sol Satır Hizalama kullanarak bu galeriyi sayfanın sol tarafına da itmek istiyoruz.

boyutlandırma

Galeriyi oluşturmak için sütunların her biri için bir Görüntü Modülü kullanacağız. Sütunlar arasındaki boşluğu silmek ve tutarlı bir sonuç oluşturmak için, satırınızın Boyutlandırmasına aşağıdaki ayarları uygulayın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ardından Aralık ayarlarını açın ve satırınıza aşağıdaki özel kenar boşluğunu ve dolguyu uygulayın:

• Alt Kenar Boşluğu: 80px
• Sol Kenar Boşluğu: 50px
• Üst ve Alt Dolgu: 0px

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

Fotoğraf yükleniyor

Toplamda dört İmaj Modülüne ihtiyacımız olacak olsa da, kendimize zaman ve emekten tasarruf etmek için bir tane oluşturup daha sonra diğer sütunlara klonlayarak başlayacağız. Satırınızın ilk sütununa bir Resim Modülü ekleyin ve istediğiniz bir resmi yükleyin.

Lightbox'ta aç

Görüntü Modülünüzün bağlantı ayarlarında 'Işık Kutusunda Aç' seçeneğini etkinleştirerek kullanıcılara görüntüyü daha büyük bir biçimde görüntüleme imkanı verin.

Filtre

Ayrıca Filtreler ayarlarında Görüntü Modülümüzün parlaklığını '%47'ye düşüreceğiz. Bu ayarı uygulamak, galeri resimlerimize ekleyeceğimiz ince vurgulu efektin bir parçasıdır.

CSS kimliği

Bu gönderide daha sonra üzerine gelindiğinde filtreyi kaldırmak için bir CSS kimliği kullanacağız, bu yüzden devam edin ve Resim Modülünüzün CSS Kimliğine 'image-hover' ekleyin.

Görüntü Modülünü 3 Kez Klonla ve Görüntüleri Değiştir

Artık Görüntü Modülünü üç kez kopyalayabilir ve kalan sütunlara yerleştirebilirsiniz. Sütunların her biri için görüntüyü ihtiyaçlarınıza göre değiştirin.

Karşı Tarafta Referans Oluşturun

Mevcut Satırların Her İkisini de Klonla

Tam olarak aynı galeri referansını karşı tarafta oluşturmak için bazı değişiklikler yapmamız gerekecek. Her iki satırı da klonlayarak başlayın.

Her İki Satırın Satır Hizalamasını Değiştir

Ardından, her iki satırın satır hizalamasını sağa değiştirin. İkinci sıranın henüz gelmediğini fark edeceksiniz. Bunun nedeni, sonraki adımlardan birinde boşluk ayarlarını değiştirmemiz gerekmesidir.

1. Satırın Kutu Gölgesini Değiştir

İlk sıranızın Yatay Tekrarı için '60px' yerine '-60px' kullanın.

2. Satır Aralığını Değiştir

İkinci sıranızın sol kenar boşluğunu kaldırın ve bunun yerine sağa '50px' ekleyin. Bunu yaptığınızda, sıranızın da sağ tarafa itildiğini fark edeceksiniz.

İkinci Metin Modülünün Metin Yönünü ve Aralığını Değiştirme

Tanıklık eden kişilerin isimlerini içeren Metin Modülü de sola itilmelidir. Bunu yapmak için Başlık 6 metin ayarlarında Sol Metin Hizalama'yı kullanarak başlayın.

Sağ kenar boşluğunu da kaldırın ve bunun yerine sol kenar boşluğuna '-150px' ekleyin.

Hover Efekti Ekle

Sayfa Ayarlarını Aç

Bu eğitim için yapılacak son şey, vurgulu efekti etkinleştirecek CSS kod satırlarını eklemektir. Bunu yapmak için sayfanızın altındaki aşağıdaki simgeye tıklayarak sayfa ayarınızı açın:

CSS Kodu ile Hover'da Filtreyi Kaldırın

Yapacağımız tek şey, aşağıdaki CSS kod satırlarını kullanarak İmaj Modülümüze uyguladığımız filtreyi kaldırmak ve işimiz bitti:

#image-hover:hover {
filter: none;
}

Ön izleme

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

Üzerinde gezinme

Son düşünceler

Bu kullanım örneği blog gönderisinde, Divi's Wedding Planner Layout Pack'i kullanarak nasıl çarpıcı galeri referansları oluşturabileceğinizi gösterdik. Bu galeri referansları, referansları portföyünüze bağlamanıza ve ziyaretçileri potansiyel müşterilere ve nihayetinde müşterilere dönüştürmeye bir adım daha yaklaşmanıza yardımcı olur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!