ÜCRETSİZ ve Gelişmiş İstemci Vitrini İndirin Divi için Gezinme/Tıklama Tasarımı

İnsanlar diğer insanlarla ilişki kurar. Bu nedenle, ziyaret ettiğiniz hemen hemen her web sitesinde yüzlerin göründüğünü göreceksiniz. Önceki müşterilerden ekip üyelerine ve daha fazlasına; Müşterilere ve insanlara şirketinizin arkasını ne kadar erken gösterirseniz, onları şirketinizin, markanızın veya ürününüzün doğru olduğuna ikna etme şansınız o kadar artar. Bu gönderide, müşterilerinizi güzel ve gelişmiş bir şekilde sergilemeye odaklanacağız. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

İstemci Vitrini İndirin / ÜCRETSİZ Tasarıma Tıklayın

Ücretsiz müşteri vitrini vurgulu/tıklama tasarımına el koymak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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!

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Yapmanız gereken ilk şey, üzerinde çalıştığınız sayfaya yeni bir normal bölüm eklemek.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Herhangi bir modül eklemeden önce, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki satırın varsayılan üst ve alt dolgusunu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 2 Ayarları

İkinci sütunun ayarlarını açarak devam edin.

aralık

Sütuna bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 9vw
• Alt Dolgu: 9vw
• Sol Dolgu: 8vw
• Sağ Dolgu: 8vw

Sütun 1'e Metin Modülü Ekle

H3 ve Paragraf İçeriği Ekle

Satır ve sütun ayarlarını tamamladıktan sonra, 1. sütuna bir Metin Modülü ekleyerek devam edin. İstemci bilgilerini içerik kutusuna ekleyin.

Degrade Arka Plan

Sonraki arka plan ayarlarına gidin ve aşağıdaki gradyan arka planını uygulayın:

• Renk 1: rgba(43,135,218,0)
• Renk 2: rgba(0,0,0,0.55)
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Bir arka plan resmi de yükleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Lato
• Metin Rengi: #dbdbdb
• Metin Boyutu: 1vw (Masaüstü), 1.8vw (Tablet), 2.3vw (Telefon)
• Metin Satır Yüksekliği: 1.5vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)

Başlık 3 Metin Ayarları

H3 metin ayarlarında da bazı değişiklikler yapın.

• Başlık 3 Yazı Tipi: Playfair Gösterimi
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 3vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Başlık 3 Çizgi Yüksekliği: 1,6em

aralık

Aralık ayarlarına giderek ve modülün şeklini ve konumunu buna göre şekillendirerek devam edin:

• Üst Marj: 9vw
• Alt Marj: 9vw
• Sol Kenar Boşluğu: 7vw (Masaüstü), 16vw (Tablet), 17vw (Telefon)
• Sağ Kenar Boşluğu: 7vw (Masaüstü), 16vw (Tablet), 17vw (Telefon)
• Üst Dolgu: 32vw (Masaüstü), 55vw (Tablet), 49vw (Telefon)
• Alt Dolgu: 3vw (Masaüstü), 6vw (Tablet ve Telefon)
• Sol Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Sağ Doldurma: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

Kutu Gölge

Ayrıca renkli bir kutu gölgesi ekliyoruz.

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Yayılma Gücü: 7vw
• Gölge Rengi: #ffcf0f

CSS kimliği

Bir CSS kimliği ekleyerek modül ayarlarını tamamlayın.

• CSS kimliği: fotoğraf görüntüleme-1

Metin Modülünü Beş Kez Klonla

İlk Metin Modülünü tamamladıktan sonra devam edin ve 5 kez klonlayın.

Her Kopyanın İçeriğini ve Arka Plan Resmini Değiştirin

Her kopyadaki içeriği ve arka plan resmini değiştirin.

Her Çoğaltmanın Kutu Gölge Rengini Değiştir

Kutu gölgesi ile birlikte.

• Gölge Rengi: #9f89ed

Her Çoğaltmanın CSS Kimliğini Değiştirin ve CSS Sınıfı Ekleyin

Sütun 1'deki her Metin Modülü benzersiz bir CSS kimliğine ihtiyaç duyar. Sütundaki ilk Metin Modülü 'fotoğraf gösterimi-1' CSS kimliğini içerir, ikincisi 'fotoğraf gösterimi-2'ye ihtiyaç duyar, üçüncüsü 'fotoğraf gösterimi-3'e ihtiyaç duyar, vb. Her yinelenen Metin Modülüne de bir CSS sınıfı ekleyin (orijinal Metin Modülüne bir tane eklemediğinizden emin olun).

• CSS Kimliği: fotoğraf gösterimi-2 (2'den 6'ya kadar)
• CSS Sınıfı: önce fotoğraf gizle (birincisi hariç 1. sütundaki her Metin Modülü)

Metin Modülü #1'i Sütun 2'ye ekleyin

H2 İçeriği Ekle

1. sütundaki 6 modülün tümünü tamamladıktan sonra ikinci sütuna geçebilirsiniz. Orada, ihtiyacımız olan ilk modül, bazı H2 içeriğine sahip bir Metin Modülü.

H2 Metin Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: Playfair Gösterimi
• Başlık 2 Metin Rengi: #636363
• Başlık 2 Metin Boyutu: 3vw (Masaüstü), 6vw (Tablet ve Telefon)
• Başlık 2 Harf Aralığı: 0.1vw
• Başlık 2 Çizgi Yüksekliği: 1.2em

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

Seçtiğiniz bazı paragraf içeriğiyle 2. sütuna başka bir Metin Modülü ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Lato
• Metin Hizalama: Yasla
• Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 2.7vw (Telefon)
• Metin Satırı Yüksekliği: 2.1em

aralık

Aralık ayarlarında da kenar boşluğu değerlerini değiştirin.

• Üst Marj: 2vw
• Alt Marj: 2vw
• Sağ Marj: 7vw

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

Bir Bölücü Modül olan bir sonraki modüle geçin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Tasarım sekmesine gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #636363

aralık

Daha sonra farklı ekran boyutlarındaki kenar boşluğu değerlerini değiştirin.

• Alt Marj: 7vw
• Sol Kenar Boşluğu: 14vw (Masaüstü), 39vw (Tablet), 38vw (Telefon)
• Sağ Kenar Boşluğu: 14vw (Masaüstü), 39vw (Tablet), 38vw (Telefon)

Dönüştür Döndür

Bölücü Modülü döndürün.

• sol: 90 derece

Dönüştür Çeviri

Ve farklı ekran boyutlarında bazı özel dönüştürme çevirme değerlerini kullanarak yeniden konumlandırın.

• Sağ: 2vw (Masaüstü), 3vw (Tablet ve Telefon)
• Alt: -17,3vw (Masaüstü), -43vw (Tablet ve Telefon)

Sütun 2'ye Metin Modülü #3'ü ekleyin

İçerik Ekle

İhtiyacımız olan bir sonraki modül başka bir Metin Modülü. İçerik kutusuna karşılık gelen istemci adını eklediğinizden emin olun (1. sütundaki ilk Metin Modülü ile eşleştirin).

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 1.3vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Metin Harf Aralığı: 1px
• Metin Satırı Yüksekliği: 1.2em

aralık

Daha sonra bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Marj: 1em
• Alt Kenar Boşluğu: 1em

CSS kimliği

Tasarım sekmesine gidin ve bir CSS kimliği ekleyin. Sayının, sütun 1'deki ilgili Metin Modülü ile aynı olduğundan emin olun.

• CSS kimliği: photo-click-1

Klon Metin Modülü #3 Beş Kez

İlk istemci Metin Modülünü tamamladıktan sonra 5 kez klonlayın.

Her Kopyanın İçeriğini Değiştir (1. Sütundaki Metin Modülleriyle Eşleştir)

Her yinelenen Metin Modülünde istemci adını değiştirin.

Her Çoğaltmanın CSS Kimliğini Değiştirin

Ve her kopyanın CSS kimliğini sütun 1'deki Metin Modülü ile eşleştirin.

• CSS Kimliği: photo-click-2 (2'den 6'ya kadar)

Kod Modülü #1'i Sütun 2'ye ekleyin

CSS Kodu Ekle

Bu öğreticinin son bölümü, fareyle üzerine gelme işlevinin çalışmasını sağlamaya odaklanır. 2. sütuna bir ilk Kod Modülü ekleyin ve aşağıdaki CSS kodu satırlarını ekleyin:

<style>
.photo-hide-first {
display: none;
}
</style>

Kod Modülü #2'yi Sütun 2'ye ekleyin

JQuery Kodu Ekle

Bir öncekinin hemen altına başka bir Kod Modülü ekleyin ve vurgulu işlevinin çalışması için aşağıdaki jQuery kodunu ekleyin:

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, oluşturduğunuz herhangi bir web sitesinde kullanabileceğiniz güzel bir müşteri vitrinini nasıl oluşturacağınızı gösterdik. Yaklaşımın işe yaraması için Divi'nin yerleşik seçeneklerini bazı jQuery kodlarıyla birleştirdik. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.