Divi'de Duyarlı Akordeon Kaydırıcısı Nasıl Oluşturulur

Akordeon kaydırıcı, içeriği küçük bir alanda görüntülemenin eğlenceli ve ilgi çekici bir yoludur. Akordeon sürgüleri genellikle bir perdenin kıvrımları gibi yatay olarak istiflenmiş birden çok öğeden (veya panellerden) oluşur. Panellerden birinin üzerine geldiğinizde, diğer akordeon paneller küçüldükçe içeriği ortaya çıkarmak için genişler. Genişleme ve büzülmenin akordeon tipi etkisini buradan alıyoruz.

Bu derste, Divi'de CSS'den başka bir şey kullanmadan nasıl duyarlı bir akordeon kaydırıcı oluşturulacağını göstereceğim. Bunu yapmak için, akordeon panelleri olarak hizmet etmek üzere birden fazla Divi modülü kullanacağız. Herhangi bir modül kullanılabilir, ancak bu örnekte, hem masaüstünde hem de mobilde harika görünen (ve çalışan) güzel bir akordeon kaydırıcısı oluşturmak için tanıtım yazısı modüllerini çok yaratıcı bir şekilde kullanacağız.

Bunu kontrol et!

Gizlice Bakış

İşte bu eğitimde ne inşa edeceğimize hızlı bir bakış.

masaüstü

Tablet ve Telefon

Divi Duyarlı Akordeon Kaydırıcı Düzenini ÜCRETSİZ İndirin

Ellerinizi bu eğitimde tasarlanan akordeon kaydırıcıya 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!

Youtube Kanalımıza Abone Olun

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız, kurulu Divi Temasını (veya Divi Temasını kullanmıyorsanız Divi Builder Eklentisini) kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. Eğitimde ihtiyaç duyulan arka plan resimleri için kullanılacak medya kitaplığına yaklaşık 5 farklı sahte resim yükleyin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Duyarlı Akordeon Kaydırıcısı Oluşturma

Satırı Oluşturmak

Başlamak için normal bölüme tek sütunlu bir satır ekleyin.

Ardından satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: 800 piksel
• Yükseklik: 400 piksel (masaüstü); 700px (tablet ve telefon)

Genişlik ve maksimum genişlik değerleri, ihtiyacınız olan şekilde değiştirilebilir. Akordeon, herhangi bir satır genişliği içinde ölçeklenecek ve işlev görecektir. Ayrıca tasarımın çalışması için sabit bir yükseklik ayarlamak çok önemlidir. Alt öğelerin (sütun ve modüller) yüksekliği %100 olacaktır, bu nedenle satırın sabit yüksekliğini ayarlamazsanız alt öğelerin hiçbir yüksekliği olmayacaktır.

Sütun Ayarları

Artık satır için ayarlanmış bir yüksekliğimiz olduğuna göre, sütun ayarlarını açın ve ana öğeye aşağıdaki CSS'yi ekleyin:
masaüstü

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

Tablet

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

Esnek özelliği, akordeon panellerini masaüstünde yatay, tablet ve telefonda ise dikey olarak hizalayacaktır. %100 yükseklik, ekleyeceğimiz modüllerin de %100 yükseklik değerini kullanmasını sağlayacaktır.

Blurb Modülleriyle Akordiyon Paneli Oluşturma

Akordeon kaydırıcı, herhangi bir modül(ler) kullanılarak oluşturulabilir. İstersek, akordeon panelimiz olarak hizmet etmek için farklı modüllerin bir kombinasyonunu kullanabiliriz. Ancak bu tasarım için, tanıtıcı modülleri kullanacağız.

Satıra bir tanıtıcı modül ekleyerek başlayın.

Blurb Modülünü Tasarlama

Tanımlama modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Sahte başlığı ve gövde içeriğini saklayın. Bunu daha sonra her zaman değiştirebiliriz.

Ardından, tanıtıcı simgesini aşağıdaki gibi güncelleyin:

• Simge (masaüstü): yatay ok çizgisi simgesi (ekran görüntüsüne bakın)

• Simge (fareyle üzerine gelin): simgeyi kontrol edin (ekran görüntüsüne bakın)

• Simge (tablet ve telefon): dikey ok çizgisi simgesi (ekran görüntüsüne bakın)

Arka plan

Ardından, tanıtım yazısına aşağıdaki gibi bir arka plan görüntüsü ve üzerine gelindiğinde bir degrade kaplaması verin:

• En az 1000 piksel genişliğinde bir Arka Plan Resmi ekleyin
• Arka Plan Resmi Konumu: Orta Sol

Ardından, üzerine gelindiğinde bir degrade arka plan kaplaması ekleyin.

üzerine gelin

• Arka Plan Gradyanı Sol Renk (fareyle üzerine gelme): #3e215b
• Arka Plan Gradyanı Sağ Renk (vurgu): rgba(0,0,0,0)
• Gradyan Yönü: 90deg
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Simge

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Sol

Ardından, tasarım sekmesine geçin ve aşağıdakileri güncelleyin:

Başlık ve Gövde Metni

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metin Rengi: şeffaf (masaüstü), #ffffff (fareyle üzerine gelin)
• Başlık Metin Boyutu: 22px
• Gövde Metni Rengi: şeffaf (masaüstü), #ffffff (fareyle üzerine gelin)

Yükseklik ve Kutu Gölgesi

Metne stil verildikten sonra, modüle aşağıdaki gibi %100 yükseklik ve bir kutu gölgesi verin:

• Yükseklik: %100
• Kutu Gölgesi: Ekran Görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: -12px
• Kutu Gölge Dikey Konumu: 0px

Bulanık Özel CSS

Akordeon panellerimizin (veya tanıtım modülünün) modüllerin geri kalanıyla genişlemesini ve daralmasını sağlamak için, modülün boyutunu flex-grow ile değiştirmek için bazı özel css eklememiz gerekiyor. Akordiyonu oluşturan toplam 5 modülümüz olacağından, varsayılan durum için “flex:1” ekliyoruz ve ardından vurgulu durumda “flex:5” olarak değiştiriyoruz.

Gelişmiş sekmesi altında, Blurb Ana Öğesine aşağıdaki özel CSS'yi ekleyin:

masaüstü

flex:1;
position: relative !important;
transition: flex 800ms !important;

Tablet

flex:5;

Ardından, Blurb Content CSS'sine aşağıdaki özel css'yi ekleyin:

masaüstü

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

Tablet

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

Taşma ve Geçiş

• Yatay Taşma: gizli
• Dikey Taşma: gizli
• Geçiş Süresi : 400ms
• Geçiş Hızı Eğrisi: Doğrusal

Peki! Bu, bir tanıtıcı modül için ciddi bir özelleştirmeydi. Ancak iyi haber şu ki, kalan akordeon panellerini oluşturmak için tek yapmamız gereken onları çoğaltmak.

Daha Fazla Akordeon Paneli için Görüntüleri Çoğaltmak

Toplam beş akordeon paneli (veya modülü) oluşturmak için tanıtım yazısı modülünün üzerine gelin ve kopya simgesine dört kez tıklayın.

Ardından, çoğalttığınız yeni tanıtım yazılarının her biri için arka plan resimlerini güncelleyin.

Son sonuç

masaüstü

Tablet ve Telefon

Son düşünceler

Bu duyarlı akordeon kaydırıcı gerçekten kullanmayı eğlenceli kılan bazı benzersiz öğelere sahip. Akordeon paneller, beklenmeyen herhangi bir aksaklık olmadan havada asılı kaldığında sorunsuz bir şekilde genişler ve daralır. Kullanıcı deneyimini artırmak için tanıtım yazısı simgeleri fareyle üzerine gelindiğinde ve mobilde değişir. Umarım, bu tasarım bir sonraki projeniz için kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!