Divi ile harika galeri referansları nasıl yapılır
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, Divi Düğün Planlayıcı Düzeni paketini kullanarak nasıl inanılmaz bir referans galerisi yapacağınızı göstereceğiz. Bu öğretici, referansları portföyünüze aynı yerde bağlamanıza yardımcı olacaktır. Bu, ziyaretçileri becerileriniz hakkında ikna etmek ve onları beklentilere dönüştürmek için bir adım daha yakın olmanızı sağlar. Ayrıca, görüntülediğiniz görüntü için havada hafif etkiyi uygulayacağız.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce, sonucu farklı bir ekran boyutuna bakalım.
Arka plan görüntüsünün tekrarlanması: tekrarlayın
Satır hizalamamız bu galeriyi sayfanızın sol ve sağ tarafında referans haline getirecektir. Sol tarafla başlayacağız ve bunun için sol hat seviyesini satırımıza uygulamamız gerekiyor. Bir sonraki boşluk ayarlarına açılış mesafesi ve satırlarınıza bazı kenar boşlukları ve özel pedler ekleyin: Üst kenar boşluğu: 50 piksel
Üst ve Alt Dolgu: 0px
Son kutu görüntüsü, iyi bir etki yaratmak için bu çizgiden kutunun gölgesiyle de oynayacağız: Yatay konum gölge kutusu: 60px
Dikey Konum Gölge Kutusu: 80px
Gölge kutularının dağılımının gücü: 37px
Gölge rengi: #ded5d8
Kutu Gölgesi Pozisyonu: Dış Gölge
Ayarları Değiştir metin modülünü Sil Bu satırda bulabileceğiniz renk arka plan metin modülü zaten korumak istediğimiz birçok ayara sahiptir. Bununla birlikte, nihai sonuçlarımıza uyacak bazı değişiklikler yapmamız gerekir. Metin modülü ayarlarını açtıktan sonra yapmanız gereken ilk şey, kendisine uygulanan arka plan rengini kaldırmaktır. Bu metin modülünün mesafesi, uygulanan birkaç özel marja sahiptir. İhtiyacımız olmadığı için lütfen tüm özel kenar boşluklarını silin ve silin. Önceki metin modülünün altına klon metin modülleri ve yerleştirin, satırımızda ihtiyacımız olan bir sonraki öğe sayfasındaki metin modülünü bulun, denetçilerin adlarını içeren metin modülüdür. . Zamandan tasarruf edeceğiz ve sayfada bulabileceğiniz metin modüllerinden birini yeniden kullanacağız. Lütfen aşağıdaki metin modülünü ve klonlamayı bulun: Klonlama metin modülünü referans satırınıza önceki metin modülünün hemen altına yerleştirmek için sıraya yerleştirin. İçeriği Değiştir İçeriği, referansınızda görüntülemek istediğiniz adla değiştirin. Metin ayarlarını değiştirin, sonra metin ayarlarını açın ve aşağıdaki değişiklikleri yapın: Başlık 6 Metin Seviyeleri: Doğru Başlık 6 Metin Boyutu: 77px
Alanımızı Değiştirme Bu metin modülünü, aşağıdaki alan ayarlarını uygulayarak sıra kutusunun gölgesi ve bölümün arka planı ile örtüşmesini sağlayacaktır:
Üst kenar boşluğu: -50px Sağ kenar boşluğu: -150px
Dolgu Alt: 20 piksel
Değişim opaklığımız, metin opaklığını biraz daha çarpıcı hale getirmek için ‘%17’ olarak artıracaktır.
2. Satırları Ekleyin Sütun yapımız referans çizgisini tamamladı. Bir sonraki adım, eşlik eden bir galeri eklemektir. Bunun için, aşağıdaki sütun yapısına sahip yeni bir satır kullanacağız: Sol sıra hizalamasını kullanarak bu galeriyi sayfanın sol tarafına itmek istiyoruz. Yapıştırıcılar Galeri yapmak için, yalnızca her sütun için bir görüntü modülü kullanacağız. Sütunlar arasındaki boşlukları silmek ve tutarlı sonuçlar elde etmek için aşağıdaki ayarları satır boyutunuza uygulayın: Özel Talang genişliğini kullanın: Yalebar Talang: 1 Bir sonraki boşluk aralığını açın ve satırınıza aşağıdaki özel marj ve dolguyu uygulayın:
Alt kenar boşluğu: 80 piksel
Sol kenar boşluğu: 50 piksel Üst ve Alt Dolgu: 0px
Resim Modülünü Sütun 1’e ekleyin Toplam dört görüntü modülüne ihtiyacımız olsa da, bir tane yaparak başlayacağız ve enerji ve zamandan tasarruf etmek için daha sonra başka bir sütuna klonlayarak başlayacağız. Görüntü modülünü satırınızın ilk sütununa ekleyin ve seçtiğiniz resmi yükleyin.
LightBox’ta Açın Kullanıcılara, görüntü modülü bağlantı ayarlarınızdaki ‘LightBox Ona’da Aç’ seçeneğini etkinleştirerek görüntüleri daha büyük bir biçimde görüntülemelerini sağlayın.
Gerilimimiz ayrıca filtre ayarlarında görüntü modülümüzün parlaklığını ‘%47’ye düşürecektir. Bu ayarı uygulamak, Galeri imajımıza ekleyeceğimiz ince gelişimin etkisinin bir parçasıdır. CSS ID İmleci bu yayına yönlendirirken filtreyi silmek için CSS kimliğini kullanacağız, bu nedenle devam edin ve görüntü modülü kimliğinize ‘resimlerin yönlendirme’ ekleyin. Klon görüntü modülü 3 kez 3 kez ve görüntünüzü değiştirme şimdi görüntü modülünü üç kez klonlayabilir ve kalan sütuna koyabilir. Her sütun için görüntüleri ihtiyaçlarınıza göre değiştirin. Aynı galerinin referanslarını karşı tarafta yapmak için iki sıra klonun karşı tarafında tanıklıklar yapın, bazı değişiklikler yapmalıyız. Her iki sırayı da klonlayarak başlayın. İki satırın hizalamasını değiştirin, iki satırın satır seviyesini sağa değiştirin. İkinci sıranın takip etmediğini göreceksiniz. Bunun nedeni, bir sonraki adımlardan birinde boşluk ayarlarını değiştirmemiz gerektiğidir. İlk satırınızın yatay tekrarlaması için ’60px’ kullanmak yerine #1 satır kutusunun gölgesini değiştirin, bunun yerine ‘-60px’ kullanın. Sıra Alanı #2 Değiştir ikinci sıra sol kenar boşluğunu silin ve sağa ’50px’ ekleyin. Bunu yaptıktan sonra, hattınızın sağ tarafa da itildiğini göreceksiniz. İkinci metin modülünün metin modülünün metin yönünü değiştirin, tanıklık eden kişilerin adlarını içeren, sola da itilmesi gerekir. Bunu yapmak için, başlık metni ayarlarında sol metin hizalamasını kullanmaya başlayın 6. Ayrıca sağ kenar boşluğunu silin ve sol kenar boşluğuna ‘150px’ ekleyin. Efekti ekleyin, sayfa ayarlarını yönetin Bu öğretici için yapılacak son şey, Hover efektini etkinleştirecek bir CSS kod satırı eklemektir. Bunu yapmak için sayfanızın altındaki aşağıdaki simgeyi tıklayarak sayfa ayarlarınızı açın: Filtreyi CSS Koduyla Seleyin Yapacağımız tek şey, aşağıdaki CSS kod satırını kullanarak imleci yönlendirirken görüntü modülüne uyguladığımız filtreyi silmektir: #Image-hover {Hover { Filtre: Yok; } Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Yüzerken
