Podcast'iniz için Güzel Arşivler Oluşturma ve Not Sayfaları Gösterme

Dün, podcast'iniz için dinleyicilerinizi kesinlikle etkileyecek bir ana sayfa oluşturmak için Divi'nin görsel oluşturucusunu kullandık, peki ya gösterinizi daha derine inmek isterlerse?

Güzel arşivlere gidecekler ve bugün size nasıl yapılacağını öğreteceğim not sayfalarını gösterecekler.

Bugünün Nihai Ürünleri: Notları ve Arşiv Sayfalarını Göster

Sayfaların kendileri ana sayfayı tamamlayacak şekilde tasarlanmıştır, ancak öğelerini doğrudan yansıtmaz.

Şov notları sayfasında, herhangi bir ziyaretçinin bölümü doğrudan tarayıcılarından dinleyebildiğinden, söz konusu bölümün önemli anlarını ve bağlantılarını görebildiğinden ve e-posta listenize kaydolma fırsatına sahip olduğundan emin olmak istedim.

Arşiv sayfası, gösteri notları sayfası kadar basit ama işlevseldir. Arşiv sayfalarının tek bir amacı vardır: kullanıcılarınızın eski kataloğunuzu hızlı ve kolay bir şekilde görmeleri. Bu sayfanın yaptığı tam olarak bu. Programla ilgili kısa bir alıntıyla, dinleyicileriniz tam olarak dinlemek istedikleri konuyu bulmak için programınızı tarayabilecekler.

İhtiyaç Duyacağınız Varlıklar

Dün olduğu gibi, bazı yüksek çözünürlüklü arka plan resimlerine ihtiyacınız olacak. Kullandığım ikisi Unsplash'taki bu koleksiyonda (dünün ana sayfasının arka planlarını da içerir). Bunları Önizleme'de gri tonlamalı olacak şekilde düzenledim, ancak herhangi bir görüntü düzenleme yazılımı siyah beyaz/gri tonlama efekti uygulayabilir veya doygunluk kaydırıcısını 0'a indirmenize izin verebilir.

Aynı stilden bazılarını kullanacağınız için ana sayfayı zaten oluşturduysanız, hayatınız da biraz daha kolay olacaktır.

İşte bu kadar, hadi inşa etmeye başlayalım!

Notları Göster Sayfasını Oluşturma

Gösteri notları WordPress'te yalnızca "gönderiler" dir, bu nedenle panonuza gidin ve Gönderiler -> Yeni Ekle'ye gidin.

Bunu, programınızın tek bir bölümü için bir gösteri notları sayfası oluşturmak istediğinizde yapacaksınız. İstediğiniz gibi adlandırın ve URL bilgisini basit bir şeye ayarlayın (böylece dinleyicileriniz bölümünüz bittikten sonra hatırlasın).

İlk olarak, "Divi Builder'ı Kullan"ı tıkladığınızdan emin olun.

Bu, ihtiyacımız olan bir sonraki seçenek grubunu açmalıdır. Sayfanın sağ tarafında, gönderiyi "Tam Genişlik" olarak ayarlayın çünkü gösteri notlarımız için bir kenar çubuğu kullanmayacağız. Ve Gönderi Başlığını "Gizle" olarak ayarlayın, böylece gönderinin kendisi için yazar, yorumlar ve tarih gibi meta veriler görünmez.

Ardından Visual Builder'a girmek ve hoş bir şekilde boş bir web sayfası tarafından karşılanmak isteyeceksiniz.

Bölüm ayarlarına girmek için yapmak isteyeceğiniz ilk şey, sayfanın sol üst köşesindeki mavi bölümdeki dişli çark simgesini tıklamaktır.

Oradan arka plan resminizi yükleyin. Ayarlarda biraz daha aşağı kaydırın ve Paralaks Efektini Kullan'ı açın. Paralaks Yöntemini varsayılan "True Paralaks" olarak bırakın.

Bu ayarları kaydedin ve şöyle bir şey görmelisiniz:

Yukarıdaki nihai üründe tam olarak ne yoktu, değil mi? Sayfaya içerik ekleyerek biraz uzatmamız gerekecek.

Yeşil + işaretini tıklayın ve tek bir sütun satırı ekleyin (sol üst köşedeki).

Ardından, dünün ana sayfasını zaten yaptığınız için memnun olacaksınız. Sıranızı seçtiğiniz anda, bir öğe seçmenizi isteyen bir pencere ile karşılaşacaksınız. “Kütüphaneden Ekle”ye tıklayarak dün kaydettiğimiz podcast oynatıcıyı seçeceksiniz.

Benimkini basitçe “Podcast Bölümü” olarak adlandırmıştım, ancak farklı bir şey seçtiyseniz, onu seçtiğinizden emin olun.

Badabing-badaboom, şov notları sayfanıza sihir gibi bir podcast bölümü eklendi.

Her yeni gösteri notları sayfası için başlığı ve medyayı (ve potansiyel olarak bölüm resmini) düzenlemeniz gerekeceğini unutmayın. Az önce eklediğiniz şey, kaydettiklerinizin tam bir kopyasıdır.

Gerçek şov notlarınız doğrudan podcast oynatıcının altına gidecek, bu nedenle farenizi oynatıcının üzerine getirin ve siyah + düğmesine basın. Metin modülünü görene kadar aşağı kaydırın. Sayfaya ekleyin.

Metin Ayarları'ndaki İçerik sekmesi altında, notlarınızı WYSIWYG düzenleyicisine girin ve Tasarım sekmesine gidin.

Tasarım sekmesinde aşağıdaki seçenekleri güncelleyin:

Metin Rengi: Açık
Metin Yönü: Sol
Metin Yazı Tipi: Özel Elit
Metin Yazı Tipi Boyutu: 20px
Metin Metin Rengi: #ffffff

Kaydedin ve parlak yeni bir metin bloğu ve buna benzer bir sayfa görmelisiniz.

Gösteri notları sayfası için ana sayfaya ulaşıyoruz - sadece iki öğe kaldı. Siyah + tekrar tıklayın ve dün kaydettiğiniz düğme şablonunu ekleyin.

Dünkü gibi kullanıcıları arşivlere götürmek yerine, bu onları ana sayfaya döndürecek. Düğmenin ayarlar sayfasına gidin ve URL'yi basit bir ters eğik çizgiye ayarlayın.

Neden /home veya benzeri bir yere gitmesin? Pekala, yalnızca ters eğik çizgi kullanmak, kullanıcınızı ne olursa olsun web sitenizin ön sayfası ne olursa olsun ona götürecektir. Aynı sitede olduğunuz için, hareketli alan adları bile düğmeyi etkilemez. Her zaman eve dönecektir. Tam olarak yapmak istediğin şey bu!

Devam edin ve düğmenin geri kalan ayarlarını doldurun. Aynı pencerede açın, düğme metnini “Eve Dön” (veya ne isterseniz) ve düğme hizalamasını “Sağ” olarak değiştirin (hem içeriğin yolundan uzak tutmak hem de ayakta kalmasını sağlamak için) içeriğe karşı). Tasarım sekmesinin stili Divi Kitaplığından içe aktarılmış olmalıdır.

Artık güzel bir gezinme düğmesine sahip olacaksınız ve birden çok sayfada kullanabilmeniz için Kitaplığınıza eklemenizi öneririm.

Ve son olarak, kullanıcıları podcast hakkındaki haberlerle güncel tutmak için o tatlı, tatlı e-posta adreslerini alabilmemiz için e-posta kaydını ayarlayalım.

Bunun için tamamen yeni, tek sütunlu bir satır istiyoruz. Bu yüzden yeşil + işaretine tıklayın ve bunu yerine oturtun. Ardından, açılır menüden bir Email Optin modülü ekleyin. Tıpkı dün olduğu gibi, modül ayarlarına gidin ve WYSIWYG düzenleyicide görüntülemek istediğiniz başlığı ve istediğiniz herhangi bir harekete geçirici mesaj metnini girin.

Ayrıca, düğmenin kendisi için istediğiniz metni ekleyin. Tamamen benzersiz olan “Abone Ol”u seçtim.

E-posta servis sağlayıcınızı ve listenizi seçin (dünden beri, bir liste seçmezseniz tüm modülün yayındayken sayfada görünmeyeceğini unutmayın).

Arka plan RGBA'yı saydam olarak değiştirin.

Tasarım sekmesi altında, Başlık Yazı Tipi'ni "Özel Elit" ve boyutu 36 piksel olarak ayarlayın.

Ayrıca Gövde Yazı Tipi'ni "Özel Elit" ve boyutu 16 piksel olarak ayarlayacaksınız.

Bu sitedeki hemen hemen her şeyden farklı olarak, Email Optin modülü için bir kenarlık kullanmak istiyoruz. Bu nedenle, “Kullanıcı Kenarlığı”nı evet'e getirin ve rengi #ffffff olarak ve Özel Dolguyu her tarafta 15 piksel olacak şekilde ayarlayın.

Bu bittiğinde, Gelişmiş sekmesine gidin ve modülün köşelerini yuvarlamak için Özel CSS altındaki Ana Öğeye bunu ekleyin:

border-radius:10px;

Çalışmanızı kaydedin ve bir e-posta seçeneğiniz var!

Gösteri notları sayfanızın gerektirdiği diğer tek şey, bu modülü diğer sayfalarda kullanmak üzere kaydetmektir. E-posta tercihlerinizin site genelinde tutarlı olmasını istediğiniz için bunu genel bir öğe olarak kaydedeceğiz. Fareyi modülün üzerine getirdiğinizde “Kitaplığa Ekle Düğmesine” tıklayın ve “Bunu global bir öğe yap” kutusunu işaretlediğinizden emin olun.

Artık birden çok sayfada kullanabileceğiniz tek bir öğeniz var. Ve herhangi bir değişiklik yaparsanız, podcast oynatıcı ve yukarıdaki her modülün ayrı ayrı değiştirilebildiği düğmenin aksine, bunlar tüm örneklere yansıtılacaktır.

Ve işte dostlarım, Show Notes sayfa şablonunuz! Ayrıca tüm sayfayı Kitaplığınıza kaydetmenizi öneririm, böylece onu içe aktarabilir ve her bölüm için ihtiyacınız olan öğeleri değiştirebilirsiniz.

Şimdi…Arşivlere devam! Bitiş çizgisi göründü!

Arşiv Sayfanızı Oluşturma

WordPress panonuza gidin ve Yeni Sayfa Ekle'ye gidin, adını verin (benimki "Arşivler") ve Divi Visual Builder'ı açın. Basit.

Orada olduğunuzda, metin modülüne sahip yeni bir tek sütunlu satır ekleyin.

Ayarlara gidin ve WYSIWYG düzenleyicisine sayfa başlığınızı girin.

Tasarım sekmesinde, Metin Rengini Açık ve Oryantasyonu Merkez olarak ayarlayın. Yazı tipini “Özel Elit” ve Yazı Tipi Boyutunu 50 piksel olarak ayarlayın.

Metnin mobil cihazlarda iyi görünmesi için üst ve alt kenar boşluklarını 40 piksel olarak değiştirdiğinizden emin olun.

Çalışmanızı kaydedin ve – kendinizi hazırlayın – Arşivlere bir arka plan eklemeye hazır olun! Mavi + kutusundaki ayarları açın ve arka plan resminizi seçin ve Notları Göster için yaptığınız gibi paralaksı ayarlayın. Yine, bunu Önizleme kullanarak gri tonlamalı yaptım.

Tasarım sekmesi altında, üst ve alt dolguyu sırasıyla 55 piksel ve 176 piksel olarak ayarlayın, böylece tüm sayfa, arşivlerinizde kaç gönderiye sahip olursanız olun paralaks etkisinin görülmesine izin verir.

Neden 175 yerine 176 piksel? Çünkü ben bir asiyim, bu yüzden.

Çalışmanızı kaydettiğinizde şunu göreceksiniz:

Ardından, yeni bir tek sütunlu satır ekleyin, yalnızca bu sefer bir Blog modülü ekleyin. Bu, ayarladığınız WordPress Döngüsünü gösterecek ve dinleyicilerinizin ne bekleyeceğini bilmeleri için sadece Alıntılar ve Başlıklar olmasını istiyoruz.

Ayarlara gidin ve İçerik sekmesindeki seçenekleri aşağıdaki gibi güncelleyin:

Gönderi Numarası: 10 (veya siteniz için en iyi olduğunu düşündüğünüz şey - bu numara görüntülendikten sonra sayfalandırılacaktır)
İçerik: Alıntıyı Göster (çünkü kullanıcının bölümü tıklayıp oynatıcıda dinlemesini istiyoruz)
Öne Çıkan Resmi Göster: EVET
Izgara Döşeme Arka Plan Rengi: rgba(73,73,73,0.72)

Tasarım sekmesinde aşağıdaki seçenekleri güncelleyin:

Düzen: Izgara
Başlık Yazı Tipi: Özel Elit
Başlık Metni Rengi: #ffffff
Gövde Yazı Tipi: Özel Elit
Gövde Metni Rengi: #ffffff
Meta Yazı Tipi: Özel Elit
Meta Metin Rengi: #ffffff
Kenarlık Kullan: EVET
Kenar Rengi: #ffffff
Kenar Genişliği: 1px
Kenar Stili: Katı

Her şey hazır olduğunda, son bir stil stiliniz var. Izgaranın kendisi her kutuda keskin, kare köşelere sahiptir ve sitenin geri kalanıyla eşleşmesi için 10 piksellik bir kenarlık yarıçapı elde etmek istiyoruz.

WordPress Kontrol Panelinize -> Divi -> Tema Seçeneklerine gidin ve ardından Özel CSS'ye kadar aşağı kaydırın. Tek tek alıntı kutularının köşelerini yuvarlamak için bu kodu kutuya ekleyin:

.et_pb_post {
 border-radius: 10px;
}

".et_pb_post" öğesinin Divi'nin bu kutuları bir bütün olarak ayarlamak için kullandığı CSS Sınıfı olduğunu unutmayın.

Bundan sonra, tüm çalışmalarınızı kaydedin.

Yapmanız gereken tek şey, kitaplığınızdan Eve Dön düğmesini eklemek ve işiniz bitecek. Blog modülünüzle aynı satıra eklemek için siyah + işaretini tıklayın.

Hot diggity dog, Arşivler sayfanızı ayarlamayı yeni bitirdiniz.

Tebrikler! Arşivler sayfanızı ayarlamayı yeni bitirdiniz. Ekranın altındaki mor + işaretine tıklayarak Arşivler sayfanızı şablon olarak kaydedin ve kova listenizdeki başka bir öğeyi kontrol edebilirsiniz – çünkü dün ve bugün arasında tamamen işlevsel bir podcast oynatıcı, ana sayfa, arşiv oluşturdunuz, ve bireysel gösteri notları için şablon.

Sonuç olarak

Ve bu kadar! İki podcast sayfası öğreticimle birlikte takip ettiğiniz için teşekkür ederiz. Divi ile Güzel Bir Podcast Sayfası Nasıl Oluşturulur başlıklı ilk makaleye bu bağlantıdan ulaşabilirsiniz. Herhangi bir sorunuz veya yorumunuz varsa, bunları aşağıya bırakmaktan çekinmeyin, cevaplamak için elimden geleni yapacağım!