Tıklamada Bio ile Kişi Modülü Nasıl Oluşturulur

Yayınlanan: 2017-08-16

Bu gönderide, tıklandığında bio ile bir kişi modülünün nasıl oluşturulacağını göstereceğiz. Aynı satırda başka bir kişi modülüne tıkladığınız anda, biyografideki metin değişecektir. İstediğiniz zaman kişi modülüne tekrar tıklayarak biyografiyi kapatabilirsiniz.

Bunu, örneğin, şirketinizin web sitesinde çalışanlarınız hakkında bazı ek bilgiler göstermek için kullanabilirsiniz. Konsept iki şey yapmanıza yardımcı olur: ziyaretçilerinizle etkileşime geçin ve web sitenizde yerden tasarruf edin. Biyografinin gerçekten gösterileceği tek zaman, bir ziyaretçinin ilgi gösterdiği ve Kişi Modülündeki öğelere tıklamaya karar verdiği zamandır.

Tıklamada Bio ile Sonuç Kişi Modülü

Tıklamada bio ile bir Kişi Modülü elde etmek için izlemeniz gereken farklı adımlara dalmadan önce, masaüstünde nihai sonuca bir göz atalım:

bio ile kişi modülü

ve mobil ve tablette nihai sonuç:

bio ile kişi modülü

Mobilde, bir bios açılırsa diğer iki bios otomatik olarak kapanacaktır. Her biyografinin kendi bölümü olmasına rağmen, her zaman yalnızca bir biyografi bölümü açık olacak.

Masaüstü için Tıklandığında Bio'lu Kişi Modülü

Youtube Kanalımıza Abone Olun

Her şeyin sorunsuz çalışması için iki sürüm oluşturmamız gerekecek: biri masaüstü, diğeri tabletler ve telefonlar için. Bu sürümlerin her birinin kendi jQuery koduna ihtiyacı olacaktır. Masaüstü sürümüyle başlayacağız ve gönderinin sonraki bölümünde tabletler ve telefonlar için sürümü nasıl yapacağınızı göstereceğiz.

Kişi Standart Bölümünü Üç Sütunlu Bir Satırla Ekleme

Yapmamız gereken ilk şey, Kişi Modüllerini içeren bir bölüm eklemek.

Yeni bir sayfa (veya bio ile Kişi Modülünü eklemek istediğiniz sayfa) açın ve yeni bir standart bölüm ekleyin. Bu bölümün içine üç sütunlu bir satır yerleştirin. Elbette, başka sayıda sütun da kullanabilirsiniz, ancak kullanacağımız kod 3 Kişi Modülünü hesaba katar. Aynı şeyi diğer satır türleri için oluşturmak istiyorsanız, bu gönderide daha sonra sağlayacağımız jQuery kodunda bazı değişiklikler yapmanız gerekecektir.

Satır Ayarları

Satır ayarlarını açın ve içerik sekmesinde her sütunun arka plan rengi olarak '#e5e5e5' ekleyin.

person module with bio

Ardından, Gelişmiş sekmesine gidin ve aşağıdaki kutu gölgesini üç satırın her birinin Ana Öğesine ekleyin:

Kişi Modülü Ekle

Yapmanız gereken bir sonraki şey, satırın ilk sütununa bir Kişi Modülü eklemektir.

İçerik Sekmesi

Bu modülün İçerik sekmesinde, bilgileri ve sosyal medya bağlantılarını yazın ve resmi yükleyin.

Gelişmiş sekme

Bu modülün Tasarım sekmesinde herhangi bir değişiklik yapmayacağız (daha sonra görünümde herhangi bir değişiklik yapmaktan çekinmeyin). Bunun yerine, hemen, satır sütunlarına eklediğimiz kutu gölgesini üye resmine ekleyeceğimiz Gelişmiş sekmesine gidiyoruz.

Kişi Modülünü Klonla

Yapmanız gereken bir sonraki şey, Kişi Modülünü iki kez klonlamak ve onu diğer iki sütuna yerleştirmek. Farklı CSS sınıflarını eklemek için bu bölüme geri dönmemiz gerekecek. Ama bunu yapmadan önce, önce bio bölümünü ekleyeceğiz.

Tam Genişlik Sırasıyla Bio Standard Bölümünü Ekleyin

Bir önceki oluşturduğunuz bölümün hemen altına başka bir standart bölüm ekleyin. Bu bölümde, çeşitli Kişi Modüllerine bağlı farklı metin modüllerini eklememiz gerekecek. Bölümün ayarlarını açın ve arka plan renginiz olarak '#a0a0a0' rengini kullanın.

İki Metin Modülü Ekleyin

Kişi modülünün biyografisinde kaç Metin Modülü olmasını istediğinize bağlı olarak Metin Modülleri ekleyebilirsiniz. Bu durumda, Kişi Modülü başına iki Metin Modülü ekleyeceğiz.

İlk Metin Modülü

İlk Metin Modülüne bir metin yazın ve Tasarım sekmesine gidin. Tasarım sekmesinde, Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

Metin Yönü: Merkez
Metin Yazı Tipi Boyutu: 31
Metin Rengi: #FFFFFF
Metin Satırı Yüksekliği: 1.7em

İkinci Metin Modülü

Başka bir Metin Modülü ekleyin ve Tasarım sekmesinin Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

Metin Yönü: Merkez
Metin Yazı Tipi Boyutu: 16
Metin Rengi: #FFFFFF
Metin Satırı Yüksekliği: 1.7em

Her Modülü İki Kez Klonla

Bu iki Metin Modülü, bios'ların her biri için aynı olacaktır. Bu yüzden Metin Modüllerinin her birini iki kez klonlamalısınız. Son yapının sayfanın arka ucunda şu şekilde görünmesi gerekir:

Farklı CSS Sınıfları

Kişi Modüllerine CSS Sınıfları Atama

Kişi Modüllerinin her birinin Gelişmiş sekmesine gidin ve aşağıdaki CSS sınıflarını atayın:

Birinci Kişi Modülü: person1
İkinci Kişi Modülü: person2
Üçüncü Kişi Modülü: person3

Bölüme CSS Sınıfı Ata

Bios'unuzun yerleştirildiği bölümün ayarlarını açın. Gelişmiş sekmesine gidin ve CSS sınıfına "section_1" yazın.

Metin Modüllerine CSS Sınıfları Atama

Şimdi, oluşturduğunuz Metin Modüllerine CSS Sınıflarını aşağıdaki şekilde ekleyin:

Birinci Kişi Modülüne bağlı: div_text_1
İkinci Kişi Modülüne bağlı: div_text_2
Üçüncü Kişi Modülüne bağlı: div_text_3

Bölüme ve Tüm Metin Modüllerine CSS Kodunu Görüntüle

Yapmanız gereken bir sonraki adım, bölümün Gelişmiş sekmesine ve tüm Metin Modüllerine gitmek. Ardından, bölümün Ana Öğesine aşağıdaki CSS kodu satırını ekleyin:

display: none;

Telefonda ve Tablette Devre Dışı Bırak

Şimdi mobil ve tablet için oluşturduğunuz her iki bölümü de devre dışı bırakın.

Tablet & Telefon İçin Tıkladığınızda Bio'lu Kişi Modülü

Artık size masaüstü için tıklayın bio ile kişi modülünü nasıl oluşturacağınızı gösterdiğimize göre, tablet ve telefon için de nasıl yapılacağını göstereceğiz. Telefon ve tablet için önceki bölümleri zaten devre dışı bıraktık. Masaüstünün düzeni arka uçta şöyle görünür:

Ve tablet & telefon versiyonu için ihtiyacımız olan yapı da bu.

Altı Yeni Bölüm Ekle

Öyleyse devam edin ve sayfaya altı yeni bölüm ekleyin. Ardından, kişi modüllerini klonlayın ve her birini ayrı ayrı bir bölüme koyun. Arada bir bölüm bıraktığınızdan emin olun, biyografinin sonunda geleceği yer burasıdır.

Ardından, metin modüllerini klonlayın ve bunları bir Kişi Modülü içeren her bölümün altındaki bölüme yerleştirin. Biyo, varsayılan olarak, mobil ve tablette Kişi Modülünün altında gösterilecektir.

Farklı CSS Sınıfları ve Kimlikleri

Tüm bölümleri ve modülleri yerleştirdikten sonra, CSS sınıflarını eklemeye başlamanın zamanı geldi.

Kişi Modüllerine CSS Sınıfları Atama

Her bir kişi modülünü tek tek açarak ve Gelişmiş sekmesindeki CSS sınıflarını şu şekilde değiştirerek başlayın:

Birinci Kişi Modülü: mobile_person1
İkinci Kişi Modülü: mobile_person2
Üçüncü Kişi Modülü: mobile_person3

Bölümlere CSS Sınıfları Atayın

Ardından, tüm farklı biyo bölümlerini açın ve her birine aşağıdakileri atayın:

İlk Biyo Bölüm: Section_mobile_1
İkinci Biyo Bölüm: secton_mobile_2
Üçüncü Biyo Bölüm: Section_mobile_3

Metin Modüllerine CSS Sınıfları Atama

Bir yer vermeniz gereken son CSS sınıfları, farklı biyografi bölümlerindeki Metin Modüllerine bağlı olanlardır. Biyo bölümüne göre, o bölümdeki Metin Modüllerine aşağıdaki CSS Sınıflarını atayın:

Birinci Kişi Modülüne bağlı: div_mobile_text_1
İkinci Kişi Modülüne bağlı: div_mobile_text_2
Üçüncü Kişi Modülüne bağlı: div_mobile_text_3

Bölümlere CSS Kodu Görüntüle

Devam ederken, tüm biyo bölümleri görünmez yapmanız gerekecek. Bölümlerin her birinin Gelişmiş sekmesine gidin ve aşağıdaki CSS kodu satırını kopyalayıp Ana Öğeye yapıştırın:

display: none;

Her Metin Modülünün Ana Öğesinde bu CSS kodu satırını kaldırdığınızdan emin olun. Desktop versiyonunda onları görünmez yapmamız gerekiyordu ama bu mobil ve tablet için gerekli değil.

Masaüstünde Devre Dışı Bırak

Şimdi, tüm değişiklikleri yaptıktan sonra, kodu eklemeden önce yapmanız gereken bir şey kaldı: masaüstünde üç biyo bölümünü devre dışı bırakın. Devam edin ve bölümlerin her birini açın ve Gelişmiş sekmesine gidin. Gelişmiş sekmesinin Görünürlük alt kategorisinde, masaüstündeki bölümleri devre dışı bırakın.

jQuery Kodunu Ekle

Divi oluşturucuda tüm pratik değişiklikleri yaptığımıza göre, artık son adıma geçme zamanı; jQuery kodunu ekleyerek.

Yeni Kod Modülü Ekle

Kodu sayfanıza eklemenin en kolay yolu Kod Modülüdür. Muhtemelen bu kişi modülünü bio ile sadece bir sayfaya tıkladığınızda kullanacaksınız. Bir kod modülü kullanarak, kodun yalnızca o sayfada biri olduğunda yüklendiğinden emin olursunuz. İki ayrı jQuery kodunu kopyalayıp aynı kod modülüne yapıştırın.

Masaüstü jQuery Kodunu Kod Modülünüze yerleştirin

Tıklama sürümünde masaüstü biyografisini çalıştırmak için aşağıdaki CSS kodu satırlarını kopyalayıp Kod Modülünüze yapıştırın:

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Tablet & Telefon jQuery Kodunu Kod Modülünüze Yerleştirin

Ve tablet ve telefon sürümünün çalışması için aşağıdaki kod satırları:

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Son sonuç

Bu gönderi boyunca tüm adımları izledikten sonra sonuca son bir göz atalım. Masaüstünde şöyle görünecek:

bio ile kişi modülü

Ve mobilde ve tablette:

bio ile kişi modülü

toparlamak

Bu gönderide, tıklandığında gizlenen ve gösterilen bio ile bir kişi modülünün nasıl oluşturulacağını gösterdik. Bu yöntemi uygulayarak, web sitenizde bir miktar yer kazanabilecek ve bunu yalnızca ziyaretçilerinize ilgi gösterdikten sonra gösterebileceksiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!