Divi ile Hover/Tıklamada Müşteri Logolarını Referanslarla Nasıl Değiştirirsiniz?

Müşteri logolarına ve eşleşen referanslara etkileşim eklemenin bir yolunu mu arıyorsunuz? Divi'nin duyarlı içerik özelliği sayesinde, bir modülün varsayılan durumunda ve üzerine gelindiğinde farklı içerikleri göstermek artık hiç olmadığı kadar kolay. Bugünün Divi eğitiminde, müşteri logolarını fareyle üzerine gelindiğinde (masaüstü) ve tıklatıldığında (tablet ve telefon) referanslarla nasıl değiştireceğinizi göstererek bunu göstereceğiz. Oraya ulaşmamıza yardımcı olması için Blurb Modülünü kullanacağız! Düzenin 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

Müşteri Logoları Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz müşteri logoları düzenine 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

Arka plan rengi

Yeni veya mevcut bir sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #000000

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: 200 piksel
• Alt Dolgu: 200px

Sınır

Beyaz bir kenarlık ekleyerek bölüm ayarlarını tamamlayın.

• Kenar Genişliği: 1vw
• Kenar Rengi: #ffffff

1. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve satırın maksimum genişliğini artırın.

• Maksimum Genişlik: 1500 piksel

Sütuna Metin Modülü Ekle

Duyarlı H2 İçeriği Ekle

Bu satırda ihtiyacımız olan ilk modül, bazı duyarlı H2 içeriğine sahip bir Metin Modülüdür.

• Masaüstü: Ne söyleyeceklerini görmek için istemci logolarının üzerine gelin!
• Tablet ve Telefon: Ne söyleyeceklerini görmek için müşteri logolarına tıklayın!

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 2 Yazı Tipi: İş Sans
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 40px (Masaüstü), 30px (Tablet), 25px (Telefon)

Sütuna Ayırıcı Modül Ekle

görünürlük

Bu satırda ihtiyacımız olan sonraki ve son modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Ardından modülün çizgi rengini değiştirin.

• Çizgi Rengi: #ffffff

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 4px
• Genişlik: %10
• Modül Hizalaması: Merkez

aralık

Bir miktar üst kenar boşluğu ekleyerek modülün ayarlarını tamamlayın.

• Üst Kenar Boşluğu: 100 piksel

2. Satır Ekle

Sütun Yapısı

Bir öncekinin hemen altına başka bir satır ekleyin ve bunun için aşağıdaki sütun yapısını kullanın:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını farklı ekran boyutlarında değiştirin. Sütun yüksekliklerini de eşitlediğinizden emin olun, bu bir sonraki adımda yardımcı olacaktır; sütun içeriğinin ortalanması.

• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100 (Masaüstü), %80 (Tablet ve Telefon)
• Maksimum Genişlik: 1500 piksel
• Min Yükseklik: 500px (Masaüstü), otomatik (Tablet ve Telefon)

Ana Eleman

Satırınızın sütun içeriğini ortalamak için 1) 'Sütun Yüksekliklerini Eşitle' seçeneğini etkinleştirmeniz (önceki adım) ve 2) satırınızın ana öğesine aşağıdaki CSS kodu satırını eklemeniz gerekir:

align-items: center;

Sütuna Blurb Modülü Ekle

Varsayılan İçeriği Boş Bırak

Şimdi, fareyle üzerine gelindiğinde müşteri logolarını değiştirmek için Blurb Modules kullanacağız. Sütun 1'deki ilkiyle başlayın. Varsayılan başlığı ve gövde içeriğini boş bıraktığınızdan emin olun, ancak her ikisinde de fareyle üzerine gelme seçeneğini etkinleştirmeye devam edin.

Hover'da İçerik Ekle

Her iki vurgulu alana da seçtiğiniz bazı yazılı içeriği ekleyin.

Varsayılan Resim

Resim ve simge ayarlarında seçtiğiniz bir şirket logosunu yükleyerek devam edin.

Hover'da Resmi Kaldır

Müşteri logolarını, üzerine gelindiğinde tamamen kaldırarak değiştireceğiz.

Vurgulu Arka Plan Rengi

Bu gönderinin önizlemesinde fark edebileceğiniz gibi, fareyle üzerine gelindiğinde modülün arka plan rengini de değiştiriyoruz. Varsayılan bir arka plan rengi kullanmayın ve üzerine gelindiğinde aşağıdaki renk kodunu ekleyin:

• Arka Plan Rengi: #191919

Görüntü/Simge Ayarları

Modülün tasarım sekmesine gidin ve aşağıdaki görüntü/simge hizalamasının geçerli olduğundan emin olun:

• Görüntü/Simge Hizalama: Merkez

Metin Ayarları

Siyah bölüm arka plan rengi kullandığımız için, genel metin ayarlarında modülün metin rengini değiştireceğiz.

• Metin Rengi: Açık

Başlık Metni Ayarları

Ardından, başlık metni ayarlarını uygun şekilde değiştirin:

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: İş Sans
• Başlık Metin Boyutu: 24px
• Başlık Satırı Yüksekliği: 1.4em

Gövde Metni Ayarları

Gövde metni ayarlarında da bazı değişiklikler yapın.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Rengi: #8c8c8c
• Gövde Çizgisi Yüksekliği: 2.5em

Varsayılan Aralık

Ardından, boşluk ayarlarına gidin ve modülün varsayılan durumunda özel dolgu olmadığından emin olun.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 0px
• Sağ Dolgu: 0px

Vurgu Aralığı

Bununla birlikte, fareyle üzerine gelindiğinde, aşağıdaki değerleri kullanarak referansımız için biraz boşluk yaratıyoruz:

• Üst Dolgu: 20px
• Alt Dolgu: 50px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Geçiş

Varsayılan geçiş süresini kaldırarak modülün ayarlarını tamamlayın. Bu, logonun üzerine gelindiğinde/tıklandığında referansın hemen görünmesini sağlar.

• Geçiş Süresi: 0ms

Blurb Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki ilk Blurb Modülünü tamamladığınızda, modülü iki kez klonlayabilir ve kopyaları satırın kalan sütunlarına yerleştirebilirsiniz.

Tüm Satırı Klonla

Görüntülemek istediğiniz müşteri logosu sayısına bağlı olarak artık bu satırı istediğiniz kadar çoğaltabilirsiniz.

Her Bulanıklık Modülünün Çoğaltmasının Vurgulu İçeriğini Değiştirin

Her yinelenen Blurb Modülünde istemci logosunu değiştirdiğinizden emin olun.

Her Blurb Modülü Çoğaltmasının Logosunu Değiştirin

Her yinelenen modülün vurgulu içeriğini de değiştirin ve işiniz bitti!

Ö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, müşteri logolarını üzerine gelindiğinde/tıklandığında referanslarla değiştirmek için Divi'nin duyarlı seçenekler özelliğini nasıl kullanacağınızı gösterdik. Bu, sayfalarınızda yerden tasarruf etmenin ve farklı ekran boyutlarında etkileşimli tasarım oluşturmanın mükemmel bir yoludur. Öğreticiyi göstermenin yanı sıra, bu yazının başında JSON dosyasını ücretsiz olarak paylaştık! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

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.