Divi ile Özel Görüş Sekmeleri Nasıl Oluşturulur (ÜCRETSİZ İndirin!)

Birçok işletme için referanslar, yeni müşteriler edinmenin temel argümanlarından biridir. Bu, web sitenizdeki referanslara biraz daha fazla dikkat etmenin asla boşa gitmeyeceği anlamına gelir. Divi'de, örneğin Divi Referans Modülünü kullanarak referansları paylaşmanın birçok farklı yolu vardır. Ancak daha etkileşimli bir yaklaşım arıyorsanız, bu öğreticiyi seveceksiniz. Size Divi'de nasıl özel referans sekmeleri oluşturacağınızı göstereceğiz. Birisi Blurb Modülünü sol tarafa getirdiğinde, sağda ilgili bir referans görünecektir. Bu tasarımdaki geçiş efektleri de kusursuzdur, bu da web sitenize ekstra özelleştirme hissi vermenize yardımcı olur. 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

Özel Görüş Sekmeleri Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz özel referans sekmeleri 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.

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffefdb

aralık

Bölümün tasarım sekmesine gidin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: %5
• Alt Marj: %5
• Sol Kenar Boşluğu: %5
• Sağ Marj: %5
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sınır

Bazı yuvarlak köşeleri de ekleyin.

• Tüm Köşeler: 20px

1. Satır Ekle

Sütun Yapısı

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

aralık

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve biraz alt kenar boşluğu ekleyin.

• Alt Marj: %3

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Bazı H2 içeriği içeren bir Metin Modülü ile başlayarak modül ekleme zamanı.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Yazı Ağırlığı: Yarı Kalın
• Başlık 2 Metin Boyutu: 31px
• Başlık 2 Harf Aralığı: -1px

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

görünürlük

Metin Modülünün hemen altına bir Bölücü Modül ekliyoruz. “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Modülün tasarım sekmesine gidin ve çizgi rengini beyaz olarak değiştirin.

• Çizgi Rengi: #ffffff

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 10px
• Genişlik: %14
• Yükseklik: 10 piksel

Sınır

Ve kenarlık ayarlarına bazı yuvarlak köşeler ekleyerek modül ayarlarını tamamlayın.

• Tüm Köşeler: 10px

2. Satır Ekle

Sütun Yapısı

Bir sonraki satıra. Aşağıdaki sütun yapısını kullanın:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarında sütun yüksekliklerini eşitleyin.

• Sütun Yüksekliklerini Eşitle: Evet

Sütun 2 Ayarları

Arka plan rengi

Ardından, sütun 2 ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: #ffffbf9

aralık

Sütunun tasarım sekmesine gidin ve daha küçük ekran boyutlarına biraz üst ve alt dolgu uygulayın.

• Üst Dolgu:
  • Masaüstü: Yok
  • Tablet ve Telefon: 300 piksel
• Alt Dolgu
  • Masaüstü: Yok
  • Tablet ve Telefon: 300 piksel

Sınır

Bazı yuvarlak köşeleri de ekleyin.

• Tüm Köşeler: 10px

Blurb Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Sütun 1'deki ilk Blurb Modülü ile başlayarak modül ekleme zamanı. İstediğiniz içeriği ekleyin.

1:1 Oran Resmi Yükle

Daha sonra 1: 1 oranında bir resim yükleyin.

Arka plan rengi

Ardından, aşağıdaki arka plan rengini uygulayın:

• Arka Plan Rengi: #d5d6ea

Görüntü Ayarları

Görüntü ayarlarında da değişiklik yapın.

• Resim/Simge Yerleşimi: Sol
• Görüntü Yuvarlatılmış Köşeler: 100 piksel

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Harf Aralığı: -1px

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştiriyoruz.

• Gövde Yazı Tipi: Lato
• Gövde Metni Boyutu: 13px

aralık

Ardından, aşağıdaki dolgu değerlerini uygulayarak modülümüzün içeriğinin etrafına biraz boşluk ekleyeceğiz:

• Üst Dolgu: %5
• Alt Dolgu: 5%
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sınır

Bazı yuvarlak köşeler de ekleyin.

• Tüm Köşeler: 10px

Animasyon

Varsayılan olarak, Blurb Module'ün görüntüsüne uygulanan bir animasyon efekti vardır. Bu animasyonu animasyon ayarlarından kaldırıyoruz.

• Resim/Simge Animasyonu: Animasyon Yok

CSS kimliği

Referans sekmesi tasarımını oluşturmak için bu öğreticinin sonuna bir kod eklememiz gerekecek. Buna hazırlanmak için Blurb Module'ün gelişmiş sekmesine bir CSS kimliği ekleyeceğiz.

• CSS Kimliği: referans-kişi-1

Bulanık Resim ve Başlık CSS

Gelişmiş sekmesinde de iki satır CSS kodu kullanıyoruz. Biri tanıtım yazısı görüntüsü için, diğeri tanıtım yazısı başlığı için.

width: 25% !important;

margin-top: 25px;

Blurb Modülünü Üç Kez Klonla

İlk Bulanıklık Modülünü tamamladığınızda, onu üç kez klonlayabilirsiniz.

İçeriği ve Resimleri Değiştir

Her yinelenen Blurb Modülü için içeriği ve görüntüleri değiştirdiğinizden emin olun.

Arka Plan Renklerini Değiştir

Arka plan renkleri ile birlikte.

• Kopya 1: #ffffed6
• Kopya 2: #d7ecd9
• Kopya 3: #f5d5cb

CSS kimliklerini değiştir

Ve tabii ki, CSS kimlikleri. Ardışık numaralandırma kullanın.

• Kopya 1: referans-kişi-2
• Kopya 2: referans-kişi-3
• Kopya 3: referans-kişi-4

Sütun 2'ye Alıntı Metin Modülü Ekle

İçerik Kutusuna Alıntı Ekle

İkinci sütuna geçin. Orada, ihtiyacımız olan ilk modül, alıntı karakterli bir Metin Modülü.

Metin Ayarları

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

• Metin Yazı Tipi: Playfair Ekranı
• Metin Rengi: #ffefdb
• Metin Boyutu: 200px
• Metin Satırı Yüksekliği: 1em

Konum

Modülü de yeniden konumlandırın.

• Pozisyon: Mutlak
• Konum: Sol Üst
• Yatay Ofset: %5

2. Sütun'a Referans Metni Modülü Ekle

Referans İçeriği Ekle

Sonraki Metin Modülüne geçin. Bu, ilk referansımıza ithaf edilecektir. İçerik kutusuna yerleştirdiğiniz referans, sütun 1'deki ilk Blurb Modülü ile eşleşmelidir.

Metin Ayarları

Modülün metin ayarlarını uygun şekilde değiştirin:

• Metin Yazı Tipi: Lato
• Metin rengi: #000000
• Metin Boyutu: 20px
• Metin Satırı Yüksekliği: 2.1em
• Metin Hizalama: Merkez

boyutlandırma

Genişliğin de "%100" olarak ayarlandığından emin olun.

• Genişlik: %100

aralık

Ardından, boşluk ayarlarına bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: %30
• Sol Dolgu: %10
• Sağ Dolgu: %10

CSS kimliği

Ve gelişmiş sekmeye bir CSS kimliği ekleyin. Bu CSS kimliğinin sonundaki sayının, karşılık gelen Blurb Modülünün CSS kimliğinin sonundaki sayıyla eşleşmesi gerekir.

• CSS Kimliği: referans-kopya-1

Metin Modülünü Üç Kez Klonla

İlk referans Metin Modülünü tamamladıktan sonra, onu üç kez klonlayabilirsiniz.

Referans İçeriğini Değiştir

Yinelenen modüllerdeki referans içeriğini değiştirdiğinizden emin olun.

CSS kimliklerini değiştir

CSS kimlikleri ile birlikte. Ardışık bir sırayı takip ettiğinizden emin olun.

• Kopya 1: referans-kopya-2
• Kopya 2: referans-kopya-3
• Kopya 3: referans-kopya-4

İlk Referans Metni Modülüne CSS Sınıfı Ekleme

Ve başlangıçta etkinleştirmek istediğimiz referansa bir CSS sınıfı eklememiz gerekecek. Bu durumda, bu ilk.

• CSS Sınıfı: gösteri referansı

Bölücü Modülün Altına Kod Modülü Ekleyin (Satır #1)

Artık tüm unsurları yerine getirdiğimize göre, sihri gerçekleştirme zamanı. Bölümün ilk satırındaki Bölücü Modülün hemen altına yeni bir Kod Modülü ekleyin.

CSS Kodu Ekle

Aşağıdaki yazdırma ekranında görebileceğiniz gibi aşağıdaki CSS kod satırlarını stil etiketleri arasına yerleştirin.

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

JQuery Kodu Ekle

Ardından, aşağıdaki yazdırma ekranında görebileceğiniz gibi, aşağıdaki JQuery kod satırlarını komut dosyası etiketleri arasına yerleştirin ve işiniz bitti!

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

Ö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 her tür web sitesi için etkileşimli bir referans tasarımının nasıl oluşturulacağını gösterdik. Daha spesifik olarak, birisi soldaki Blurb Modüllerinden birinin üzerine geldiğinde tetiklenen özel referans sekmelerinin nasıl oluşturulacağını gösterdik. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz 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.