Divi ile Güzel Bir Podcast Sayfası Nasıl Oluşturulur

Harika bir podcast'iniz var. Ancak web sitenizin biraz çalışmaya ihtiyacı olabilir. İşini yapıyor ama göze çarpmıyor. Asla korkma, podcast yayıncısı! Seni korudum.

Size sadece podcast'iniz için kolayca güncellenen bir ana sayfa değil, aynı zamanda şık bir arşiv sayfası ve bireysel bölümler için bir şablon oluşturmak için Divi'yi kullanmanın basit bir yolunu öğreteceğim.

Bugünün Nihai Ürünü: Üç Bölümlü Podcast Ana Sayfası

İyi bir podcast'in sahip olması gereken kişiliği kaybetmeden tasarımı olabildiğince basit ve minimal tutmak istedim. Bu tasarım, odak noktası ayakkabılar ve mutlu olmak olan You're An All-Star adlı kurgusal bir indie podcast'i içindir. Tasarımın bu temayı yansıtmasını istedim.

İlk bölüm, kullanıcının dikkatini çekmek için parlak bir renk kullanır, solda podcast'in ne hakkında olduğu hakkında hızlı bir tanıtım sağlar ve anında dinlemek için bir podcast bölümü sunmak için Divi Audio Module'ü kullanır.

Kullanıcı aşağı kaydırdıkça, estetik görünüm biraz daha kolay erişilebilir içerik sunmak için Divi ses modülünü kullanan Seçilmiş Bölümler bölümüne ve ayrıca gösterinin arşivlerini ziyaret etme seçeneğine kayar. Arka plan, bölümlerin kendilerine dikkat çekmek için paralakstır.

Son bölüm sadece bir e-posta tercihidir. Her markanın, podcast'in, blogun ve şirketin bir ihtiyacı var ve öne çıkması için bu bölümü renkli bir arka plana çevirdim ve ikinci bölümdeki paralaksın ona daha fazla dikkat çekmesine yardımcı olacak kadar küçük yaptım.

Aşağıda, sitenin her bir modülünü, bölümünü ve sayfasını nasıl şekillendirdiğim ve oluşturduğum konusunda size adım adım bir eğitim vereceğim.

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

Bu tasarımın en güzel yanı, Divi'nin dışında çok fazla kaynak almamasıdır. Tek ihtiyacınız olan, arka planlar ve bölümleriniz için kullandığınız podcast resimleri ve küçük resimler için kullanmak üzere 5 yüksek çözünürlüklü görüntü.

Tüm resimlerim Unsplash'tan geldi (bu sitenin tüm resimleri bu koleksiyonda bulunabilir). Bazılarını siyah beyaza dönüştürmek için Önizleme'yi kullandım, ancak istediğiniz görüntü düzenleme yazılımını kullanabilirsiniz. Hemen hemen hepsi, gri tonlamalı/siyah beyaz bir seçenek seçmenize veya doygunluğu sıfıra düşürmenize izin verir.

Bunun dışında ihtiyaç duyacağınız tüm kaynaklar Divi'nin içinde. Hadi o zaman başlayalım!

Podcast Web Sitesi Ana Sayfası: Birinci Bölüm

WordPress kontrol panelinizde yeni bir sayfa oluşturarak ve bunu sitenizin ön sayfası olarak ayarlayarak başlayın. (Uygun bir şekilde benimkine “Ev” adını verdim.)

Şimdi yeni sayfanızı düzenlemek için geri dönün. Sağ kenar çubuğundaki Sayfa Nitelikleri kutusunun içinde, varsayılan şablonu boş sayfa şablonuyla değiştirin.

İlk olarak, üç sütunlu bir satır oluşturuyoruz.

Orta sütunun içine bir Divi bölücü modülü eklemek istiyoruz.

Ayırıcı ayarlarının içinde, Tasarım sekmesi altında yüksekliği 600 olarak ayarlayın. Bu, yalnızca iki dış sütunu (bölümün ana içeriği) ayrı tutmakla kalmaz, aynı zamanda bir dizi sütunda yeterli beyaz alana izin vermek için bölümü yeterince uzun tutar. görüntü alanı çözünürlükleri. (Varsayılan olarak mobilde gizli kalırken.)

Şimdi, sol sütuna iki metin modülü ekleyeceğiz. Bu proje için yatay bir başlığın yerinde olmayacağına karar verdim, bu nedenle ilk metin modülü sadece bir başlık olacak.

Metin Ayarlarının içerik sekmesi altında, içerik kutusuna başlığı ekleyin.

Tasarım sekmesinde, Metin Rengini "Açık" olarak güncelleyin ve Metin Yönünü "Orta" olarak değiştirin. Ardından metin yazı tipini ve boyutunu ayarlayın. Eskitilmiş görünümünden dolayı “Special Elite” yazı tipini seçtim ve boyutunu 60 olarak belirledim. Ayrıca Metin Satır Yüksekliğini 1em olarak ayarladım.

Bu halledildikten sonra, ikinci metin kutusuna geçme zamanı. Bunu podcast için hızlı bir tanıtım yazısı olarak kullanıyoruz.

İçerik sekmesinde, Aşağıdaki seçenekleri güncelleyin:

İçerik : açıklama için metninizi girin (iTunes ve diğer hizmetlerde kullandığınız açıklamanın kısaltılmış bir sürümünü öneririm)
Arka Plan Rengi : rgba(0,0,0,0.4)

Tasarım sekmesinde, metin rengi için “Açık”ı seçin ve önceki kutuda yaptığınız gibi metin yönü için “Orta”yı seçin. Ayrıca metin yazı tipini 20px boyutunda “Special Elite” olarak ayarlayın.

Son olarak, tüm metin kutusunun etrafına 10 piksel dolgu ekleyin.

Bundan sonra, Gelişmiş sekmesine gidin ve Özel CSS altında, metin kutusunun köşelerini yuvarlamak için bunu Ana Öğe alanına girin:

border-radius: 10px;

Bunu yaptıktan sonra, yeni sitenizin ilk iki sütunuyla işiniz bitti! Yaşasın! Sayfanın altındaki mor daireye tıklayarak ve yeşil kaydet düğmesine basarak çalışmanızı kaydedin.

Harika iş!

Görsel olarak biraz daha çekici hale getirmek için, bölümün arka planını ayarlamamız gerekiyor, bu nedenle mavi (bölüm) kutusunun ayarlarına gidin ve bir arka plan resmi yükleyin. Benimkini 1920 × 1280 çözünürlükte tutma eğilimindeyim.

Şimdiye kadar buna benzeyen bir şey görmelisiniz:

Şimdiye kadar kendinize şunu soruyor olabilirsiniz: “Podcast'ler ne olacak? Bu bir podcast sitesi ve henüz bir podcast ile ilgili hiçbir şey yapmadık!” Tamamen haklısın. O halde, sıramızın üçüncü sütunundaki (tahmin ettiniz) ses modülünü seçerek biraz sese geçelim.

Varsayılan ses modülü, bu site için kullanacağımız temaya tam olarak uymuyor, o yüzden şunu alalım:

Buna:

Ses modülünün ayarlarını açın. Ses alanı, kullandığınız ana bilgisayara kendi dosyanızı yükleyebileceğiniz veya kullandığınız podcast hizmetinin medya dosyasına doğrudan bağlantı oluşturabileceğiniz yerdir. Kendim için Libsyn kullanıyorum, bu yüzden medya URL'sini aldım ve yapıştırdım.

(Eğlenceli gerçek: Bu modül aracılığıyla sitenizi tıklayan herkes aynı zamanda Libsyn gösterge tablonuzda indirme olarak sayılır. Puan!)

Ardından, bağlantı kurduğunuz bölümün başlığını Başlık altına ve adınızı Sanatçı Adı altına (veya şovunuzda her ne geçiyorsa.) koymak isteyeceksiniz. Ayakkabılarla ilgili kurgusal podcast'imiz için Chuck Taylor'dan başka bir şeyi nasıl seçebilirim? ). Albüm Başlığı, podcast'inizin adı olacaktır.

Ardından, yeşilimsi deniz mavisi rengini tamamen şeffaf bir arka plana değiştirelim. Renk önemli değil. Saydamlık çubuğunu sonuna kadar veya RGBA'nın son basamağı 0 olana kadar kaydırmanız yeterlidir.

Kapak resmi için, bu bölümün küçük resmini veya iTunes'da ve başka yerlerde kullandığınız podcast resmini kullanmak en iyisidir.

Podcast ayrıntıları sıralandıktan sonra, bu oynatıcıyı gerçekten kendinize ait kılmak için Tasarım sekmesine gidin.

Metin Rengi seçeneği için “Işık”ı seçin. Yazı tiplerini “Special Elite”, başlık boyutunu 50 piksel ve başlık boyutunu 20 piksel olarak ayarlayın.

Ayrıca, bu oynatıcıdaki üst kenar boşluğunu 50 piksel olarak ayarladım çünkü bu kenar boşluğu, oynatıcıyı bölümde yatay olarak ortalıyor ve mobile geçiş yaptığınızda, öğeler arasında iyi boşluk bırakılmasına izin veriyor. (Ayar, akıllı telefon simgesine tıklamadığınız sürece tüm görüntü alanı boyutları için geçerlidir.)

Arka plan şeffaf olduğundan, ilk sütundaki metin kutusuyla eşleşmesi için köşeleri yuvarlamaya gerek yoktur, bu nedenle kaydet düğmesine basın.

Bu podcast oynatıcı şovun yıldızı olduğundan, her seferinde yeniden oluşturmak zorunda kalmak istemiyoruz, bu yüzden bu modülü Divi kitaplığına kaydedeceğiz, bu da onu sitede kolayca çoğaltmamıza izin verecek ve gerektiği gibi düzenleyin.

İstediğiniz şablon adını girin ve “Bunu global bir öğe yap” seçeneğini işaretlemeyin. Bu seçeneği bu serinin 2. Kısmında kullanacağız, ancak şu anda değil.

Tamam! Sadece bir element daha ve ilk bölüm tamamlandı. (Yine de merak etmeyin. İçlerinde en çok karışan odur.)

Çoğu podcast, dinleyicilerin bölümde tartışılanları tekrar ziyaret etmeleri için bir blog tutar veya notlar gösterir. Podcast'iniz farklı değil, eminim. Podcast'inizin gösteri notlarına bir bağlantı eklemek tamamen zahmetsizdir.

Üçüncü sütunda yeni bir metin bloğu oluşturun, ayarları açın ve istediğiniz bağlantı metnini yazın. Bu örnek için, kendi kendini açıklayan "gösteri notlarını okuyun".

Bir bağlantı eklemek için araç çubuğundaki simgeye tıklayın ve gösteri notlarınız için URL'yi yazın/yapıştırın. (Yine, Bölüm 2'de, size gösteri notları için blog gönderilerinin nasıl oluşturulacağını ve stil verileceğini göstereceğim.) WordPress kalıcı bağlantı yapısını “Mesaj Adı” olarak ayarladığımdan, tek yapmam gereken Bu bölüm için yazdığım yazı.

(Yan not: Etki alanı bilgilerini girmeyerek ve yalnızca sümüklü böcek girerek, WordPress'e etki alanı bilgisinden bağımsız olarak kullanıcıları bu sayfaya yönlendirmesini söylüyorsunuz. Bu, etki alanlarını değiştirmeniz durumunda gerçekten kullanışlıdır ve kopuk bağlantıların önlenmesine yardımcı olur!)

Sadece bu bağlantıyı kaydedin ve gitmeye hazırsınız!

Bu modülü de podcast oynatıcınızı yaptığınız gibi kitaplığınıza kaydetmelisiniz.

İşte! Kendi...bekle. Ah o. Gösteri notları bağlantınız… çok… çirkin!

Endişelenme ama. Çirkin bağlantılar kolay bir düzeltmedir! Metin rengini değiştirmek için metin modülündeki ayarları kullansanız bile, bu kelimeler bir bağlantı oldukları için etkilenmeyecektir.

Divi -> Tema Seçeneklerinizdeki Özel CSS alanına gidin ve bunu aşağıya girin.

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

Bunun yapacağı şey, metni beyaz tutmaktır (sitenin geri kalanıyla uyumlu olarak, diğer bağlantıların çoğu gibi altı çizili olduğundan emin olun ve fareyle üzerine geldiğinizde kalınlaştırın.)

Kaydettiğinizden emin olun ve şimdi podcast oynatıcınız tamamlandı!

Ve bu ilk bölümdeki son ince ayar için Satır ayarlarına (yeşil kutu) tıklayın.

"Özel Genişlik Kullan"ı seçin. Birimlerin yüzdelere ayarlandığından emin olun ve kaydırıcıyı 80'e getirin. Bunu yapmak, o satırın kullanıcının sahip olduğu görüntü alanının %80'ini kaplamasını sağlar ve bu da her şeyin bir araya gelmesini engeller.

Podcast'inizin yeni web sitesinin en üst bölümü de öyle! Şimdiye kadar böyle bir şey görünmelidir.

Kaydet ve aynen böyle, işin çoğu bitti! Ve Divi'nin kütüphane özelliği sayesinde sonraki birkaç bölüm uçup gidecek! Sadece izle.

Podcast Web Sitesi Ana Sayfası: İkinci Bölüm

Bu bölüm, podcast'imizin seçilmiş bölümlerini gösterecek ve kullanıcıların arşivleri ziyaret etmelerine olanak tanıyacak (2. Bölümde gelen gösteri notları sayfaları gibi).

Yapacağımız ilk şey aslında bölümün altındaki mavi + işaretine tıklayarak ve normal bir bölüm ekleyerek yeni bir bölüm oluşturmak. Bunu yapmak, görsel oluşturucuda başka bir mavi kutu oluşturacaktır. Tek sütunlu bir satıra ekleyin.

Bunu yerleştirdiğimizde, yukarıda yaptığımız gibi bir arka plan ekleyelim, ancak bu sefer bölüm ayarlarında “Paralaks Seçeneğini Kullan” seçeneğini seçmek istiyoruz. Açılır menüyü "CSS" yerine "True Paralaks" üzerinde tutun.

Bu, ana sayfada paralaks ile kullanacağımız tek bölüm. Efekti dikkatli kullanmanın, vurgulamak istediğiniz içeriğe daha fazla dikkat çektiğini düşünüyorum.

Kaydedin ve ardından satıra yeni bir metin kutusu ekleyin. "Seçili Bölümler" yazın, WYSIWYG düzenleyicide ortalayın ve metin yazı tipini "Özel Elit" ve metin boyutunu 50 piksel yapmak için ayarlara gidin. Şimdi böyle bir şey görmelisiniz:

Bunun altında, yeşil + işaretini tıklayarak yeni bir üç sütunlu satır oluşturun ve ilk sütunda “Kitaplıktan Ekle Sekmesine” girin. (Şu anda tüm bu kitaplık seçeneklerine sahip olmayacaksınız, ancak daha sonra sahip olacaksınız!)

“Podcast Bölümü”nü veya yukarıda oynatıcınıza ne ad verdiyseniz onu seçin. Ardından altına başka bir modül ekleyin, tekrar kütüphaneye gidin ve kaydettiğiniz “Show Notes Link” modülünüzü ekleyin. Bunu görene kadar bunu üç sütun için de yapın:

İstediğiniz tüm bölümleri ekleyene kadar bunu yapmaya devam edin. Her bölüm için başlığı, albüm resmini düzenleyin ve not bağlantılarını gösterin. Sadece ikinci bir satır ekledim ve tasarımın seçtiğim arka plana uyması için yalnızca ikinci sütunu doldurdum.

Bu bölüm için geriye kalan tek şey “Arşivlere Göz At” butonunun eklenmesidir. Yeşil + işaretini tıklayarak en altta yeni bir satır oluşturun ve tek bir sütun düzeni kullanın. Bir “Düğme” modülü takın. Bu, okunması çok zor bir düğme oluşturacaktır (elbette arka planınıza bağlı olarak), bu da basit bir stil gerektirecektir.

Düğme modülünün ayarlarını açın ve arşivleriniz olacak sayfanın URL bilgisini girin. Açıkça görülen “/archives” ile gittim, “Arşivlere Göz At” metnini kullandım ve ardından düğmenin kendisini ortaladım.

Ayarlar sekmesinde, “Düğme için Özel Stilleri Kullan”ı tıklıyoruz ve arka plan rengini “#ffffff” ve metin rengini “#000000” (sırasıyla beyaz ve siyah) olarak ayarlayacağız.

Ardından, Kenar Yarıçapını 10 piksele ayarlayarak düğmenin köşelerini yuvarlamak, yazı tipini “Özel Elit” olarak ayarlamak ve Düğme Ekle Simgesini “Varsayılan”dan “Hayır”a değiştirmek isteyeceğiz.

Son olarak, Düğme Vurgulu Kenarlık Yarıçapını 10 piksel olarak değiştirin, böylece düğme üzerinde fare olduğunda yuvarlanır.

Bunu, ilerledikçe diğer düğmelerdeki stili kullanabilmek için kitaplığıma kaydettim.

Ve bununla birlikte ikinci bölümünüz tamamlandı. Neredeyse bitirdin, podcast yayıncısı! Kelimenin tam anlamıyla üçüncü tur atıyorsunuz!

Podcast Web Sitesi Ana Sayfası: Üçüncü Bölüm

Bu sadece statik bir arka plan üzerinde tek bir modül olacak.
İlk olarak ikinci bölümde yaptığımız gibi çift genişlikte sütunlu yeni bir mavi kutu oluşturun ve menüden “Email Optin” modülünü seçin.

Bizim tasarımımıza hiç uymayan bu ışığı göreceksiniz. Yine de süper kolay bir düzeltme.

Modülün ayarlarına gidin ve aşağıdaki seçenekleri güncelleyin:

Başlık: Başlığı bilerek boş bıraktım
İçerik: Harekete Geçirici Açıklama metninizi ekleyin ve ortalayın.
Servis Sağlayıcı: Mailchimp kullanıyorum, bu yüzden buraya gittim.
Arka Plan Rengi: şeffaf; bu aynı zamanda düğmenin kendisini şeffaf hale getirir.

Yapmanız gereken tek şey, e-posta hizmetinizin sağlandığından emin olmaktır, yoksa oluşturucuyu kaydedip çıktıktan sonra form görünmez. Mailchimp kullanıyorsanız, destek belgelerinde API anahtarınızı bulma konusunda harika belgeler vardır.

Anahtarınızı aldıktan sonra, WordPress kontrol panelinize gidin, Divi -> Tema Seçenekleri'ne bir kez daha gidin ve uygun şekilde adlandırılmış “Mailchimp API anahtarı” alanına Mailchimp API anahtarınızı girin.

Bu kaydedildikten sonra, güzel, bitmiş bir sayfanız olmadan önce geriye kalan tek adım, üçüncü bölüm için bir arka plan ayarlamaktır. Nihai ürün şöyle görünmelidir:

Sen yaptın! Yaşasın! Artık podcast'iniz için tamamen işlevsel bir ana sayfanız var. Rekoru kırıp bunu dünyaya anlatmanın zamanı geldi, değil mi?

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

Artık harika bir ana sayfanız olduğundan, sahip olduğunuz en harika içeriği sergileyebilirsiniz. Ancak hayranlarınız gerçek bir fanatik olursa, şovunuzun derinliklerine dalmak isteyeceklerdir.

Yarın size podcast bölümleri arşivinizin tamamı için bazı basit ama güzel sayfaları nasıl bir araya getireceğinizi ve her bölüm için okuyuculara her bölümde ne tartıştığınızı anlatan ve onlara kaydolma şansı veren ayrı sayfaları nasıl bir araya getireceğinizi göstereceğim. süper harika e-posta listeniz için.

Yarın görüşürüz!

Not sayfasını göster:

Arşivler sayfası: