Divi ile güzel bir podcast sayfası nasıl yapılır
Olağanüstü podcast’leriniz var. Ancak web sitenizin bazı işlere ihtiyacı olabilir. İşini yaptı, ama öne çıkmadı. Korkma, podcaster! Ben kapalı oldum. Size sadece podcastiniz için kolayca güncellenen bir ana sayfa değil, aynı zamanda her bölüm için arşiv sayfası stili ve şablonu yapmak için Divi’yi kullanmanın basit bir yolunu öğreteceğim. Bugünün son ürünü: Podcast ana sayfası Üç bölüm, iyi bir podcast tarafından korunması gereken kişiliği kaybetmeden tasarımı basit ve minimal tutmak istiyorum. Bu tasarım, odak ayakkabı ve mutluluk olan bir All-Star adlı indie kurgusal podcast içindir. Tasarımın temayı yansıtmasını istiyorum.
İlk bölüm, kullanıcının dikkatini çekmek, soldaki podcast’in kısa bir açıklamasını vermek için parlak renkler kullanır ve hemen duyulacak podcast bölümünü sunmak için Divi Audio modülünü kullanın.
Şimdi yeni sayfanızı düzenlemek için geri dönün. Sağ taraftaki sayfa öznitelik kutusunda, varsayılan şablonu boş bir sayfa şablonuna değiştirin. İlk şey, üç sütundan oluşan bir satır yapıyoruz. Orta sütunda, Divi Böcek Modülüne girmek istiyoruz. Bölücü ayarlarında, tasarım sekmesi altında, yüksekliği 600’e ayarlayın. Bu sadece iki dış sütunu (ana içerik parçaları) ayırmakla kalmaz, aynı zamanda bir dizi görünüm portu çözünürlüğünde yeterli beyaz alana izin verecek kadar yüksek tutacaktır. (Varsayılan olarak cep telefonunda gizli kalırken.) Şimdi, sol sütunda iki metin modülü ekleyeceğiz. Bu proje için yatay başlıkların yerinde görülmeyeceğine karar verdim, bu yüzden ilk metin modülünün yalnızca başlık olacağına karar verdim. Metin Ayarları sekmesinin altında, başlığı içerik kutusuna ekleyin. Tasarım sekmesinde metin rengini “ışık” olarak güncelleyin ve metin yönünü “Orta” olarak değiştirin. Ardından yazı tipini ve metin boyutunu ayarlayın. Depresif görünümü nedeniyle “özel elit” yazı tipini seçtim ve daha sonra boyutunu 60 olarak ayarladım. Ayrıca metin çizgisinin yüksekliğini 1em olarak ayarlayın. Bundan sonra, ikinci metin kutusuna geçme zamanı. Bunu podcast için kısa bir açıklama 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 kesintili sürümünü öneririm) Arka Plan Rengi: RGBA (0,0,0,0.0.4) Tasarım sekmesinde, metnin rengi için “Light” ı seçin ve önceki kutuda yaptığınız gibi metin yönelimi için “Merkezi” seçin. Ayrıca metin yazı tipini 20 piksel boyutta “Özel Elite” olarak ayarlayın.
Son olarak, tüm metin kutusunun etrafına 10 piksel dolgu ekleyin. Bundan sonra, Gelişmiş sekmesini açın ve özel CSS altında, metin kutusunun açısını yuvarlamak için bunu ana öğe düzlemine girin: Border-Radius: 10 piksel; Bunu yapmayı bitirdikten sonra, yeni sitenizdeki ilk iki sütunu bitiriyorsunuz! Yaşasın! Sayfanın altındaki Mor daireyi tıklayıp Yeşil Kaydet düğmesine basarak çalışmanızı kaydedin.
İyi iş! Biraz daha görsel olarak çekici hale getirmek için parçanın arka planını ayarlamamız, bu nedenle mavi kutu ayarlarını (bölüm) girip arka plan görüntüsünü yüklememiz gerekir. Kararımı 1920×1280 civarında sürdürme eğilimindeyim. Şimdi böyle görünen bir şey göreceksiniz: Şimdi, kendinize şunu sorabilirsiniz: “Peki ya podcast? Bu bir podcast sitesi ve podcast ile hiçbir şey yapmadık! ” Kesinlikle haklısın. Öyleyse satırımızın üçüncü sütununda ses modülünü (tahmin edebilirsiniz) seçerek sese başlayalım. Varsayılan ses modülü, bu site için kullanacağımız temayla eşleşmiyor, bu yüzden şunu alalım: Bunun için: Ses modülü ayarlarını açın. Ses alanı, kendi dosyanızı kullandığınız ana bilgisayarlara yükleyebileceğiniz veya kullandığınız podcasting hizmetinden doğrudan medya dosyasına bağlanabileceğiniz bir yerdir. Libsyn’i benim için kullanıyorum, bu yüzden sadece medya URL’sini alıp yapıştırıyorum. (Eğlenceli Gerçek: Sitenizde bu modül aracılığıyla sitenizde tıklayan herkes, Libsyn Dashboard’unuzda indirme olarak da hesaplanacaktır. Puan!) O zaman başlığınız ve adınız altına bağladığınız bölümün başlığını sanatçı adı altında (ya da etkinliğinizde kullandığınız her şeyden mi koymak istiyorsunuz. Ayakkabılarla ilgili kurgusal podcast’lerimiz için Chuck Taylor’dan başka bir şey seçebilirim? ). Albüm başlığı podcast adınız olacak. Sonra, yeşilimsi yeşil rengi gerçekten şeffaf bir arka plana değiştirelim. Renk önemli değil. Şeffaflık bıçaklarını aşağı kaydırın veya son basamak RGBA 0 olana kadar. Kapak resimleri için, iTunes’da ve başka yerlerde kullandığınız bu özel mini bölümü veya podcast görüntüsünü kullanmalısınız. Podcast ayrıntıları sıralandıktan sonra, ait olduğunuz bu oyuncuyu gerçekten yapabilmeniz için tasarım sekmesini açın. Metin rengi seçenekleri için “Işık” ı seçin. Yazı tipini “Özel Elite” olarak ayarlayın, başlığın başlığı 50px olur ve metin boyutu 20px olur. Ayrıca bu özel oyuncudaki üst marjı 50 piksel olarak ayarladım çünkü bu marj oyuncuyu bu kısımda yatay olarak merkezi hale getiriyor ve hücresel olarak değiştiğinizde, bu iyi unsurlar arasındaki mesafeye izin veriyor. (Bu ayar, akıllı telefon simgesini tıklamadığınız sürece tüm görünüm boyutları için geçerlidir.)
Arka plan şeffaf olduğundan, ilk sütundaki metin kutusuna uyacak şekilde açıyı yuvarlamaya gerek yoktur, bu nedenle Kaydet’e basın. Bu podcast oynatıcı bir gösteri yıldızı olduğundan, her seferinde yeniden yapmak istemiyoruz, bu nedenle bu modülü divi kütüphanesine kaydedeceğiz, bu da onu kolayca çoğaltmamızı ve ihtiyacımız olduğu gibi düzenlememizi sağlayacak . İstediğiniz şablon adını girin ve “bunu küresel bir öğe haline getirin” kontrol etmeyin. Bu dizinin 2. bölümünde seçeneği kullanacağız, ancak şimdi değil.
Peki! Sadece bir element daha ve ilk bölüm bitti. (Ancak, endişelenmeyin. Bu herkesten en çok ilgilidir.) Çoğu podcast blogları saklar veya dinleyicinin bölümde tartışılanları ziyaret edebilmesi ve ziyaret edebilmesi için notlar gösterir. Podcast’iniz farklı değil, eminim. Podcast etkinlik notunuza bir bağlantı eklemek hiç de acı verici değildir. Üçü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, “Olay notlarını okuyun” oldukça açıktır. Bağlantılar eklemek için araç çubuğundaki simgeyi tıklayın ve olay notlarınız için URL’ye yazın/yapıştırın. (Bir kez daha, Bölüm 2’de, etkinlik notları için nasıl bir blog yazısı oluşturacağınızı ve yayınlayacağınızı göstereceğim.) “Posta adı” olarak ayarlanmış bir kalıcı WordPress yapısına sahip olduğum için, yapmam gereken şey yazıyor. Bu bölüm için yazdığım yazıdan süm.
(Ek Notlar: Etki Alanı Bilgileri ve Salyangozlar girmeyerek, WordPress’e etki alanı bilgilerinden bağımsız olarak kullanıcıyı sayfaya yönlendirmesini söylersiniz. Bu, etki alanını değiştirdiyseniz çok kullanışlıdır ve bağlantının hasar görmesini önlemeye yardımcı olursanız!) Sadece Bağlantıyı kaydedin ve ayrılmaya hazırsınız! Ayrıca bu modülü kütüphanenize podcast oynatıcısınızla aynı şekilde kaydetmeniz gerekir. Voila! Kendin … bekle. Uh oh. Programınızın notu … çirkin! Ancak endişelenme. Kötü bağlantı kolay bir gelişmedir! Metnin rengini değiştirmek için metin modülündeki ayarları kullansanız bile, bir bağlantı olduğu için bu kelimeleri etkilemez. Divi -> Tema seçeneğinizdeki CSS özel alanını açın ve bunu alttan girin. A: Link, A: Ziyaret Edilen, A: Aktif { Renk: #ffffff;
}
A: Hover { Renk: #ffffff; Yazı tipi-ağırlık: kalın;Metin dekorasyonu: alt hat;
}
Yapılacak, metni beyaz tutmaktır (diğer sitelerin metnine paralel olarak, diğer birçok bağlantının altı çizildiğinden emin olun ve imleci fareye yönlendirdiğinizde kalın olarak değiştirin.) Tuttuğunuzdan emin olun ve Şimdi podcast oyuncunuz tamamlandı!
Ve bu ilk bölümdeki son küçük ince ayar için satır ayarlarına (yeşil kutu) tıklayın.
“Özel genişliği kullanın” seçeneğini seçin. Ünitenin yüzdeye ayarlandığından ve değişimi 80’e taşımadığından emin olun. Bunu yapmak, satırın kullanıcının sahip olduğu herhangi bir görüntüleme boyutunun% 80’ini almasını sağlayacaktır, bu da her şeyi biriktirir.
Yeni podcast web sitenizin en üstü de öyle! Şimdi böyle görünmeli.
Tasarruf edin ve bunun gibi, işin çoğu bitti! Ve Divi kütüphanesi özellikleri sayesinde, sonraki birkaç parça geçecek! Sadece bakıyor. Ana Sayfa Podcast Web Sitesi: Bu bölümün iki bölümü podcast’imizden seçilen bölümleri gösterecek ve kullanıcıların arşivi ziyaret etmesine izin verecek (Bölüm 2’deki Etkinlik Not sayfası gibi). Yapacağımız ilk şey aslında bölümün altındaki + mavi tıklayarak ve sıradan bir parça ekleyerek yeni bir rol yapmak. Bunu yapmak görsel yapımcıda başka bir mavi kutu yapacak. Bir satır sütuna ekleyin.
Sahip olduğumuzda, arka planı yukarıda yaptığımız gibi ekleyelim, sadece bu sefer, Ayarlar bölümünde “Paralaks seçeneğini kullanın” seçmek istiyoruz. “CSS” yerine “True Paralaks” daki açılır listeyi koruyun. Verandada paralakla kullanacağımız tek kısım bu. Bence, efektleri ekonomik bir şekilde kullanmak, vurgulamak istediğiniz içeriğe daha fazla dikkat edecektir. Tiped ve daha sonra satıra yeni bir metin kutusu ekleyecek. “Seçilen bölümü” yazın, WYSIWYG düzenleyicisine odaklanın ve metin yazı tiplerini “Özel Elite” ve 50px metin boyutuna dönüştürmek için ayarları açın. Şimdi böyle bir şey göreceksiniz: Bunun altında, + yeşil tıklayarak yeni bir üç sütun satırı yapın ve ilk sütunda “Kütüphane sekmesinden eklendi”. (Şimdi tüm kütüphane seçeneklerine sahip olmayacaksınız, ancak daha sonra!) “Bölüm Podcast” i veya yukarıdaki oyuncunuza ne isim verirseniz seçin. Ardından altına başka bir modül ekleyin, tekrar kütüphaneye gidin ve kaydettiğiniz “Notları Göster bağlantısını göster” modülünü ekleyin. Bunu görene kadar üç sütun için yapın: İstediğiniz tüm bölümleri ekleyene kadar bunu yapmaya devam edin. Başlık, albüm kapağını düzenleyin ve her bölüm için bir not bağlantısı görüntüleyin. İkinci sırayı ekledim ve sadece seçtiğim arka plana göre tasarımı yapmak için ikinci sütunu doldurdum. Bu bölüm için kalan tek kişi “Arşivleri Keşfet” düğmesini eklemektir. + Yeşil’i tıklayarak altta yeni bir satır oluşturun ve tek bir sütun düzeni kullanın. “Düğme” modülünü girin. Bu, bazı basit stiller gerektiren okunması çok zor olan (arka planınıza bağlı olarak, elbette) bir düğme oluşturacaktır. Düğme modülünün ayarlarını açın ve arşiviniz olacak sayfa için URL salyangozunu girin. “Arşivi keşfedin” metnini kullanarak “/ arşiv” kullanıyorum ve ardından düğmenin kendisini konsantre ediyorum. Ayarlar sekmesinde, “Düğme için özel bir stil kullanın” ı tıklıyoruz ve arka plan rengini “#ffffff” olarak ayarlarız ve metnin rengi “#000000” (her beyaz ve siyah) olur. Ardından, sınır yarıçapını 10 piksel olarak ayarlayarak, yazı tipini “özel elit” olarak ayarlayarak ve eklenen düğme simgesini “Varsayılan” dan No. ” Son olarak, kenarda bir fare olduğunda yuvarlak olacak şekilde sınır yarıçapı düğmesini 10 piksel olarak değiştirin. Devam ettiğimde diğer düğmelerdeki stili kullanabilmem için bunu kütüphaneme saklıyorum. Ve bununla, ikinci bölümünüz bitti. Neredeyse bitmişsin, podcaster! Üçüncüyü yuvarlıyorsunuz – kelimenin tam anlamıyla! Ana Sayfa Podcast Web Sitesi: Bu üçüncü bölüm sadece statik arka planın üzerinde bir modül olacaktır. İlk olarak, ikinci bölüm için yaptığımız gibi çift geniş bir sütunla yeni bir mavi kutu oluşturun ve menüden “E -posta Optin” modülünü seçin. Tasarımımıza hiç uymayan bu ışıkları göreceksiniz. Bu çok kolay bir iyileştirme. Modül ayarlarına GVE ve aşağıdaki seçenekleri güncelleyin: Başlık: Başlık I Kasıtlı olarak Boş İçerik: Harekete geçmek ve odaklanmak için davetinizin bir açıklamasını ekleyin. Servis Sağlayıcı: Mailchimp kullanıyorum, bu yüzden burada kullanıyorum. Arka plan rengi: şeffaf; Bu aynı zamanda düğmenin kendisini şeffaf hale getirir. Yapılması gereken tek şey, e -posta hizmetinizin sağlandığından emin olmaktır, yoksa üreticiyi kaydettikten ve çıktıktan sonra form görünmez. MailChimp kullanıyorsanız, destek belgelerinde yangın anahtarınızı bulma konusunda iyi bir belge vardır. Bir anahtarınız olduktan sonra, WordPress kontrol panelinizi açın, Divi’yi açın -> Tema seçeneğini bir kez daha açın ve MailChimp Fire anahtarınızı “MailChimp API Anahtarı” na girin. Bundan sonra saklandıktan sonra, güzel ve bitmiş bir sayfaya sahip olmadan önce kalan tek adım, üçüncü bölümün arka planını ayarlamaktır. Nihai ürün şöyle görünecek: Sen yap!Yaşasın!Artık podcast’iniz için tamamen işlevsel bir veranda var.Bir rekor kırmanın ve dünyaya bunu anlatmanın zamanı geldi, değil mi?Yarın: Güzel bir arşiv yapın ve podcast’iniz için bir not sayfası görüntüleyin çünkü şimdi harika bir ana sayfanız var, sahip olduğunuz en havalı içeriği görüntüleyebilirsiniz.Ancak hayranlarınız gerçek fanatikler haline gelirse, şovunuza derinlemesine dalmak isteyeceklerdir.Yarın, tüm podcast bölüm arşivleriniz için birkaç basit ama güzel sayfanın yanı sıra her bölümde tartıştığınız okuyucuyu anlatan ve olağanüstü e -posta listenize kaydolma fırsatı veren her bölüm için bireysel sayfaları nasıl toplayacağınızı göstereceğim. .Yarın görüşürüz!Not sayfasını göster: Arşiv sayfası:
