Biyografi tıkanmış bir modül nasıl yapılır
Bu yazıda, tıklamada biyografi içeren bir modül oluşturmayı göstereceğiz. Aynı satırdaki diğer kişilerin modüllerini tıklar bulmaz, biyografideki metin değişecektir. İstediğiniz zaman, insanların modüllerini tekrar tıklayarak biyografiyi kapatabilirsiniz. Bunu, örneğin, şirketinizin web sitesindeki çalışanlarınız hakkında bazı ek bilgiler görüntüleyebilirsiniz. Bu konsept iki şey yapmanıza yardımcı olur: ziyaretçilerinizle etkileşim kurun ve web sitenizde yer tasarrufu. Biyografi süresinin görüntüleneceği tek zaman, ziyaretçilerin ilgi göstermesinden ve kişi modülündeki öğeleri tıklamaya karar vermesinden sonra.
İnsanların Modülü Bio Tlick ile Sonuçlar Bio ile Bio ile Modülünü elde etmek için takip etmeniz gereken farklı adımları girmeden önce, masaüstündeki nihai sonuçlara bakalım:
Üç sütun satırı ile kişinin standart kısmını ekleyin İlk yapmamız gereken şey, kişi modülünü içeren bir parça eklemektir. Yeni bir sayfa açın (veya BIO’lu bir kişi modülü eklemek istediğiniz sayfa) ve yeni bir standart bölüm ekleyin. Bu bölümün içine üç sütundan oluşan bir sıra yerleştirin. Tabii ki, başka bir sütun da kullanabilirsiniz, ancak kullanacağımız kod 3 kişinin modülünü dikkate alır. Diğer satır türleri için aynı şeyi yapmak istiyorsanız, bu yazıda daha sonra vereceğimiz jQuery kodunda bazı değişiklikler yapmanız gerekir. Satır ayarlarını açın ve içerik sekmesine ‘#e5e5e5’ ekleyin. Her sütunun arka plan rengi.
Ardından, Gelişmiş sekmesine geçin ve üç satırın her birinin ana öğelerine aşağıdaki kutu gölgesini girin: Bir sonraki kişi modülünü ekleyin Yapmanız gereken bir sonraki şey, satırın ilk sütununa bir kişi modülü eklemektir. Modül İçerik sekmesindeki İçerik sekmesi, bilgiler ve sosyal medya bağlantıları yazın ve resim yükleyin. Devam sekmemiz bu modülün tasarım sekmesinde herhangi bir değişiklik yapmaz (daha sonra ekranda herhangi bir değişiklik yapmaktan çekinmeyin). Bunun yerine, doğrudan Row sütununa eklediğimiz aynı kutu gölgesini üye resmine ekleyeceğimiz Gelişmiş sekmesine gideceğiz. Klonlama Modülü İnsanlar Yapmanız gereken bir sonraki şey kişi modülünü iki kez klon ve diğer iki sütuna yerleştirir. Farklı bir CSS sınıfı eklemek için bu bölüme geri dönmeliyiz. Ama bunu yapmadan önce, önce biyografi kısmını ekleyeceğiz. Standart biyo kısmı tam geniş bir satırla ekleyin, oluşturduğunuz önceki bölümün hemen altına başka standart parçaları ekleyin. Bu bölümde, çeşitli kişi modüllerine bağlı farklı bir metin modülü eklememiz gerekir. Bölüm ayarlarını açın ve arka plan renginiz olarak ‘#A0A0A0’ rengini kullanın. Kişinin modülü tarafından kaç metin modülüne sahip olmak istediğinize bağlı olarak iki metin modülü ekleyin, metin modülünü ekleyebilirsiniz. Bu durumda, kişi başına iki metin modülü ekleyeceğiz. İlk Metin Modülü İlk metin modülüne bazı metin yazın ve tasarım sekmesini açın. Tasarım sekmesinin içinde, metin alt kategorisinde aşağıdaki değişiklikleri yapın: Metin Oryantasyonu: Orta Metin yazı tipi boyutu: 31
Metin rengi: #ffffff
Hat yüksekliği metni: 1.7em
İkinci metin modülü başka bir metin modülü ekler ve tasarım sekmesinin metninin alt kategorisinde aşağıdaki değişiklikleri yapar:
Metin Oryantasyonu: Orta Metin yazı tipi boyutu: 16
Metin rengi: #ffffff
Hat yüksekliği metni: 1.7em
Her modül için klonlar iki metin modülü her BIOS için aynı olacaktır. Bu yüzden her metin modülünü iki kez klonlamanız gerekir. Bu, sayfanın arkasındaki son yapının görünümüdür:
Farklı CSS sınıfı CSS sınıfını, her kişi modülünden Gelişmiş sekmesini açın ve aşağıdaki CSS sınıfını belirleyin: Birinci Kişi Modülü: Kişi1 İkinci Kişi Modülü: Kişi2
Üçüncü Kişi Modülü: Kişi3
CSS sınıfını BIOS’unuzun yerleştirildiği ayarların açık bölümüne ayarlayın. Gelişmiş sekmesini açın ve CSS sınıfına “Bölüm_1” yazın. CSS sınıfını geçerli metin modülüne ayarlayın, CSS sınıfını aşağıdaki şekilde oluşturduğunuz metin modülüne 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
CSS Kodu ekranını bölüme ve tüm metin modüllerine ekleyin Bir sonraki adım, bölümden Gelişmiş sekmesine ve tüm metin modüllerine gitmek. Ardından, bölümün ana öğesine aşağıdaki CSS kod satırını ekleyin: Ekran: Yok;
Mobil ve Tabletlerde Devre Dışı Bırakın Şimdi, hücresel ve tabletler için yaptığınız iki parçayı devre dışı bırakın.
Modül Bio -BioSlu Modül Tabletler ve Telefon İçin Tıklayın Şimdi Bio’lu Bir Modül Oluşturmayı Gösterdik Masaüstleri için tıklarken, tabletler ve cep telefonları için nasıl yapılacağını göstereceğiz. Cep telefonları ve tabletler için önceki bölümü devre dışı bıraktık. Masaüstü düzeni arka uç şudur: Ve bu tablet ve mobil sürüm için ihtiyacımız olan yapıdır. Altı yeni parça ekleyin, devam edin ve sayfaya altı yeni parça ekleyin. Ardından, insanların modülünü klonlamak ve her birini tek tek yerleştirin. Onlardan ayrıldığınızdan emin olun, biyografinin sonunda geleceği yer. Ardından, metin modülünün klonunu ekleyin ve kişi modülünü içeren her parçanın altına yerleştirin. Bio varsayılan olarak cep telefonları ve tabletlerdeki kişi modülü altında görüntülenecektir. . Farklı Sınıf ve ID CSS Tüm parçaları ve modülleri yerine koyduktan sonra, CSS sınıfını eklemeye başlama zamanı. Devam sekmesi: Birinci Kişi Modülü: Mobile_person1 İkinci Kişi Modülü: Mobile_person2 Üçüncü Kişi Modülü: Mobile_person3
CSS sınıfını bir sonraki bölüme ayarlayın, tüm farklı biyo bölümleri açın ve her bölüm için aşağıdakileri ayarlayın:
İlk Biyo Bölümü: Bölüm_mobile_1
İkinci Biyo Bölüm: Secton_mobile_2
Üçüncü Biyo Bölüm: Bölüm_mobile_3 CSS sınıfını, farklı bir biyografi bölümünde metin modülüne bağlı bir yer vermeniz gereken son CSS sınıfı metin modülüne ayarlayın. Biyo bölümüne göre, aşağıdaki CSS sınıfını o bölümdeki metin modülüne ayarlayın:
Birinci Kişi Modülüne Bağlı: Div_mobile_text_1
İkinci Peri Modülüne Bağlı: Div_mobile_text_2
Üçüncü Kişi Modülüne Bağlı: Div_mobile_text_3 CSS kod ekranını bir sonraki bölüme ekleyin, tüm biyografileri görünmez hale getirmeniz gerekir. Her bölümden Gelişmiş sekmesini açın ve aşağıdaki CSS kodunu ana öğeye kopyalayıp yapıştırın: Ekran: Yok;
Bu CSS kod satırını her metin modülünün ana öğesinde sildiğinizden emin olun. Masaüstü sürümünde, görünmez hale getirmemiz gerekiyor, ancak hücresel 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 yapılması gereken bir şey var: masaüstünde üç biyo parçayı devre dışı bırakın. Lütfen ve her bölümü açın ve devam eden sekmeyi açın. Gelişmiş sekmesinin görünürlük alt kategorisinde, masaüstündeki bölümü devre dışı bırakın.
JQuery kodunu ekleyin Şimdi Divi Maker’da tüm pratik değişiklikler yaptık, son adıma devam etme zamanı; JQuery kodu ekleyin. Yeni Kod Modülünü Ekle Kodunu sayfanıza eklemenin en kolay yolu kod modülü üzerinden. Bu kişinin modülünü yalnızca bir sayfaya tıklayın. Kod modülünü kullanarak, kodun yalnızca birisi o sayfadayken yüklendiğinden emin olursunuz. Aynı kod modülüne iki ayrı jQuery kodunu kopyalayın ve yapıştırın. Masaüstü jQuery kodunu kod modülünüze yerleştirin ve tıklama sürüm işlevinde biyo masaüstü oluşturmak için aşağıdaki CSS kod kodlarını kod modülüne kopyalayın ve yapıştırın:
Nihai sonuçlar, tüm bu yayınlardaki tüm adımları izledikten sonra son sonuçlara bakalım. Masaüstünde böyle görünüyor:
Ve cep telefonlarında ve tabletlerde:
