Divi'de Yapışkan Sayfa Başlıklarını Kullanarak Tıklanabilir Bir Akordeon Nasıl Oluşturulur
Yayınlanan: 2020-09-03Divi'nin yeni yapışkan konum seçenekleri, birçok yeni ve heyecan verici tasarım olanağının kapısını aralıyor. Bu öğreticide, sayfanızda indekslemek ve gezinmek için akordeon benzeri bir yol oluşturmak için Divi'nin yapışkan konum seçeneklerini yumuşak kayan bağlantı bağlantılarıyla nasıl birleştireceğinizi göstereceğiz. Divi'nin yerleşik seçenekleriyle bunu oluşturmak gerçekten çok kolay, bu nedenle fazladan CSS veya başka kodlara gerek yok. Tamamlandığında, sayfanızı düzenlemek ve masaüstü ve mobil cihazlarda kullanıcı deneyimini geliştirmek için benzersiz bir yola sahip olacaksınız.
Başlayalım!
Gizlice Bakış
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Burada, tarayıcı penceresinin üstünde ve altında yapışkan sayfa başlıklarının yapıştığını ve bir akordeon gibi üst üste yığıldığını görebilirsiniz.
Burada, yapışkan başlıklardan birine tıklamanın (düz kaydırmalı bağlantı bağlantıları kullanarak) sayfanın o bölümüne bir akordeon gibi atlayacağını görebilirsiniz.
İşte mobildeki işlevsellik de.
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.
Ü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.
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!
Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.
İçe Aktar düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.
Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Yapışkan Satır Oluşturma
Yeni başlayanlar için yapışkan sıramızı oluşturalım. Bunu yapmak için, varsayılan bölüme tek sütunlu bir satır ekleyin.
Satır ayarlarını açın. Gelişmiş sekmesi altında, yapışkan konumu aşağıdaki gibi güncelleyin:
- Yapışkan Konum: Yukarıya ve Aşağıya Yapış
Bu, kullanıcı aşağı kaydırdıkça satırın tarayıcı penceresinin üst kısmına ve ardından kullanıcı yukarı kaydırdıkça tarayıcı penceresinin altına yapışmasına neden olur.
Yapışkan Satırı Şekillendirme
Artık yapışkan konum yerinde, öğeye yapışkan konum etkin olduğunda (veya takılı kaldığında) belirli bir stil vermenizi sağlayan yerleşik yapışkan stil seçeneğini kullanarak satırı şekillendirmeye başlayabiliriz. Satır için, arka plan sıkışmış konumdayken koyu bir renge dönüşmesini istiyoruz. Bunu yapmak için satır ayarlarını açın ve aşağıdakileri güncelleyin:
- Arka Plan Rengi (masaüstü): #ffffff
- Arka Plan Rengi (yapışkan): #051923
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Özel Oluk Genişliğini Kullan: EVET
- Oluk Genişliği: 1
- Genişlik (tablet ve telefon): %100
- Dolgu: 0 piksel üst, 0 piksel alt
Daha sonra, başlık ile aşağıdaki içerik arasında ayırıcı bir çizgi görevi görmesi için satıra bir alt kenarlık vermek istiyoruz. Ve satır yapışkan konumda olduğunda, bunun yerine bir sol kenarlık göstermek istiyoruz.
Kenarlık seçeneği geçişi altında aşağıdakileri güncelleyin:
- Kenar Rengi: #6eeb83
- Alt Kenar Genişliği (masaüstü): 8px
- Alt Kenar Genişliği (yapışkan): 0px
- Sol Kenar Genişliği (masaüstü): 0px
- Sol Kenar Genişliği (yapışkan): 8px
Yapışkan Başlık Metni Oluşturma
Sayfa başlığı metnini oluşturmak için satıra yeni bir metin modülü ekleyin.
Ardından aşağıdaki HTML'yi gövde içeriğine yapıştırın.
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>
Ve fareyle üzerine gelindiğinde arka plan rengini de güncelleyin…
- Arka Plan Rengi (fareyle üzerine gelin): rgba(255,255,255,0.2)
Bu, başlıkların kullanıcı için tıklanabilir olduğunu daha açık hale getirecektir.
Yapışkan Başlık Metnini Şekillendirme
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Başlık 2 Yazı Tipi: Montserrat
- Başlık 2 Metin Hizalama: Sol
- Başlık 2 Metin Rengi (masaüstü): varsayılan (veya siyah)
- Başlık 2 Metin Rengi (yapışkan): #ffffff
- Başlık 2 Metin Boyutu: 80px (masaüstü), 22px (yapışkan), 28px (telefon)
- Başlık 2 Satır Yüksekliği: 1,3em (masaüstü), 1em (yapışkan)
Ardından dolguyu aşağıdaki gibi güncelleyin:
- Dolgu (masaüstü): 15 piksel üst, 15 piksel alt
- Dolgu (yapışkan): 10 piksel üst, 0 piksel alt, 20 piksel sol
- Dolgu (tablet ve telefon): 15 piksel üst, 15 piksel alt, 15 piksel sol, 15 piksel sağ
Sahte Sayfa İçeriği Oluşturma
Yapışkan satır yerleştirildikten sonra, başlığın altına sahte sayfa içeriği içeren başka bir satır ekleyebiliriz. Bunu yapmak için, yapışkan satırın altında yeni bir tek sütunlu satır oluşturun.
Ardından satıra yeni bir metin modülü ekleyin ve bazı sahte içeriği yapıştırın.
Daha Fazla Yapışkan Sayfa Başlığı ve İçeriği için Gerektiğinde Bölümü Çoğaltmak
Bu noktada, yalnızca bölümü çoğaltarak yapışkan başlıklara sahip ek sayfa bölümleri oluşturmak için temel tasarıma sahipsiniz.
Yinelenen Bölüm
Başka bir bölüm oluşturmak için, yapışkan satırı/başlığı ve sahte içerik satırını içeren mevcut bölümü çoğaltın. Bu, sayfanın bir sonraki bölümünü oluşturma geliştirme sürecini hızlandıracaktır.
Metin İçeriğini ve Satır Kenarlığı Rengini Güncelleyin
Yineleme bölümünde, metin modülünün içindeki metni güncelleyin ve ardından satır ayarları altındaki kenarlığın rengini güncelleyin.
Gerektiğinde Tekrar Et
Bölümü kopyalamaya devam edin ve metin içeriğini ve satır kenarlığı rengini gerektiği gibi güncelleyin. Bu örnek için, bize akordeonu oluşturacak toplam dört yapışkan sayfa başlığı vermek için bölümü iki kez daha çoğaltacağız.
Yapışkan Sayfa Başlıklarına Bağlantı Bağlantıları Ekleme
Şu anda, işlevsellik, kullanıcının sayfayı aşağı kaydırmasına ve başlıkların bir akordeon gibi üstte ve altta kalmasını sağlayacak. Şimdi başlıkları tıklanabilir hale getirmek istiyoruz, böylece kullanıcı yapışkan başlıklardan birine tıkladığında, kullanıcı sayfanın o bölümüne getirilecek. Bu, bağlantı bağlantıları kullanılarak yapılır.
Bağlantı bağlantısı eklemek için öncelikle bağlantının atlamasını istediğimiz bölüme bir CSS kimliği eklememiz gerekiyor.
Bölüm 1 CSS Kimliği Ekle
Bölümün ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:
- CSS kimliği: bir
Ardından, yapışkan satır için ayarları açın ve aşağıdaki satır bağlantı URL'sini ekleyin:
- Satır Bağlantı URL'si: #one
Artık kullanıcı satıra/başlığa tıkladığında sayfa bu ilk bölüme atlayacaktır.
Bölüm 2 CSS Kimliği Ekle
Ardından, ikinci başlık için bağlantı bağlantısını eklememiz gerekiyor.
İkinci bölüm ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:
- CSS kimliği: iki
Bölüm 1 Sabit Satır Bağlantı URL'sini ekleyin
Ardından, ikinci bölümün içindeki yapışkan satırın ayarlarını açın ve satır bağlantı URL'sini ekleyin:
- Satır Bağlantı URL'si: #iki
Bölüm 3 CSS Kimliği Ekle
Ardından, üçüncü başlık için bağlantı bağlantısını eklememiz gerekiyor.
Üçüncü bölüm ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:
- CSS kimliği: üç
Bölüm 1 Sabit Satır Bağlantı URL'sini ekleyin
Ardından, üçüncü bölümün içindeki yapışkan satırın ayarlarını açın ve satır bağlantı URL'sini ekleyin:
- Satır Bağlantı URL'si: #üç
Bölüm 4 CSS Kimliği Ekle
Son olarak dördüncü başlık için çapa linkini eklememiz gerekiyor.
Dördüncü bölüm ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:
- CSS kimliği: dört
Bölüm 1 Sabit Satır Bağlantı URL'sini ekleyin
Ardından, dördüncü bölümün içindeki yapışkan satırın ayarlarını açın ve satır bağlantı URL'sini ekleyin:
- Satır Bağlantı URL'si: #dört
Son sonuç
Burada, tarayıcı penceresinin üstünde ve altında yapışkan sayfa başlıklarının yapıştığını ve bir akordeon gibi üst üste yığıldığını görebilirsiniz.
Burada, yapışkan başlıklardan birine tıklamanın (düz kaydırmalı bağlantı bağlantıları kullanarak) sayfanın o bölümüne bir akordeon gibi atlayacağını görebilirsiniz.
İşte mobilde de işlevsellik.
Son düşünceler
Bu tasarım, yapışkan konum seçeneğini benzersiz bir şekilde kullanır. Kullanıcı kaydırırken yalnızca sayfa başlıkları görünmekle kalmaz, aynı zamanda her bir başlık tıklanabilir ve kullanıcıyı bağlantı bağlantılarını kullanarak o belirli bölüme götürür. Sonuç, tüm sayfanız için bir akordeon gibidir. Bu tasarım, uzun biçimli içeriği dizine eklemek veya kullanıcı dostu bir tek çağrı cihazı oluşturmak için kesinlikle kullanışlı olacaktır.
Yorumlarda sizden haber bekliyorum.
Şerefe!