Divi Başlığınıza Sabit Bir “Son Bölüm” Ses Çubuğu Nasıl Eklenir
Yayınlanan: 2020-05-28Divi ile bir podcast web sitesine ev sahipliği yapıyorsanız, yerleşik Ses Modülünü zaten kullanıyor olma ihtimaliniz yüksektir. Şimdi, son bölümünüzü ön plana çıkarmanın özel bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. Bugün size Divi başlığınıza sabit bir son bölüm ses çubuğunu nasıl ekleyeceğinizi göstereceğiz. Ses çubuğuna dikkat çekmek için bir Metin Modülü döngü animasyonu ekleyeceğiz ve ses çubuğu da dahil olmak üzere genel başlık şablonunu da indirebileceksiniz!
Hadi hadi bakalım.
Ön izleme
Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
masaüstü
Mobil
ÜCRETSİZ Ses Çubuğu Başlık Şablonunu İndirin
Ellerinizi ücretsiz ses çubuğu başlık şablonuna 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.
Ü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!
Divi Theme Builder'a gidin ve Global Bir Başlık Oluşturmaya Başlayın
Divi Theme Builder'a gidin
WordPress web sitenizin arka ucundaki Divi Theme Builder'a giderek başlayın.
Global Başlık Oluşturmaya Başlayın
Ardından, genel bir başlık oluşturmaya başlayın.
En Son Bölüm Ses Çubuğu ile Global Başlık Oluşturun
Bölüm Ayarları
Arka plan rengi
Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini değiştirin. Bu global başlığı Podcast Layout Pack ile eşleştiriyoruz, ancak istediğiniz herhangi bir tasarım stilini kullanmaktan çekinmeyin.
- Arka Plan Rengi: #1a1844
aralık
Ardından, tasarım sekmesine geçin ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.
- Üst Dolgu: 50px (Masaüstü), 80px (Tablet ve Telefon)
- Alt Dolgu: 0px
Kutu Gölge
Başlığı sayfa/yazı içeriğinden ayırmak için bölümümüze bir kutu gölgesi de ekleyeceğiz.
- Kutu Gölge Bulanıklığı Gücü: 80px
- Gölge Rengi: rgba(0,0,0,0.3)
1. Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölümünüze bir ilk satır ekleyerek devam edin:
Arka plan rengi
Bu satırın tamamı son bölüm ses çubuğumuza ayrılacaktır. Ancak buna geçmeden önce satır ayarlarını açın ve arka plan rengini değiştirin.
- Arka Plan Rengi: #fe4943
boyutlandırma
Satırın tasarım sekmesine gidin ve sonraki boyutlandırma ayarlarını değiştirin.
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Genişlik: %90
- Maksimum Genişlik: %100
aralık
Bazı özel üst ve alt dolgular da ekliyoruz.
- Üst Dolgu: 10px
- Alt Dolgu: 10px
Sınır
Ardından kenarlık ayarlarına gideceğiz ve bazı yuvarlatılmış köşeler ekleyeceğiz.
- Sol Alt: 10px
- Sağ Alt: 10px
Kutu Gölge
Bir kutu gölgesi de ekliyoruz.
- Kutu Gölge Bulanıklığı Gücü: 50px
- Gölge Rengi: rgba(0,0,0,0.3)
Konum
Ardından, gelişmiş sekmeye gideceğiz ve tüm satırı sabitleyeceğiz. Bölümümüze ekleyeceğimiz ikinci satırla çakıştığından emin olmak için satırın z indeksini de artıracağız.
- Pozisyon: Sabit
- Yer: Üst Merkez
- Z İndeksi: 11
Sütun 1 Görünürlük
Sütun 1 taşmalarını gizli olarak ayarlayarak satır ayarlarını tamamlayın. Bu, bu gönderinin önizlemesinde fark edebileceğiniz metin animasyonuna yardımcı olacaktır. Taşmaları gizli olarak ayarlayarak, animasyonun sütun kabının ötesinde gizlendiğinden emin olacağız.
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Sütun 1'e Metin Modülü Ekle
İçerik Ekle
Sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bir kopyayı ekleyin.
Metin Ayarları
Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:
- Metin Yazı Tipi: Sans'ı Aç
- Metin Yazı Tipi Stili: Büyük Harf
- Metin Rengi: #ffffff
- Metin Boyutu: 15px
- Metin Harf Aralığı: 3px
aralık
Modülümüze de bir miktar negatif sol kenar boşluğu ekleyeceğiz. Bu, döngü animasyonumuza yardımcı olacaktır.
- Sol Kenar Boşluğu: -%190
Animasyon
Son olarak, Metin Modülünüze aşağıdaki döngü animasyonunu ekleyin:
- Animasyon Stili: Slayt
- Animasyon Yönü: Sol
- Animasyon Süresi: 9000ms
- Animasyon Yoğunluğu: %30
- Animasyon Opaklığı Başlatma: %100
- Animasyon Hız Eğrisi: Doğrusal
- Animasyon Tekrarı: Döngü
Sütun 2'ye Ses Modülü Ekle
Tüm İçeriği Kaldır
2. sütunda, ihtiyacımız olan tek modül bir Ses Modülüdür. İçeriğin kaldırıldığından emin olun.
Ses Dosyası Yükle
Ardından, en son bölümünüzü içeren bir ses dosyası yükleyin.
Arka Plan Rengini Kaldır
Ardından modülün arka plan rengini kaldırın.
aralık
Ardından, tasarım sekmesine gidin ve bunlara '0px' ekleyerek bazı varsayılan dolgu değerlerini kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
- Sol Dolgu: 0px
2. Satır Ekle
Sütun Yapısı
Bir sonraki satıra. Bu satır logomuzu, menümüzü ve sosyal medya simgelerimizi içerecektir. Aşağıdaki sütun yapısını seçin:
boyutlandırma
Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Maksimum Genişlik: %100
aralık
Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Sütun 1'e Menü Modülü Ekle
Seçim Menüsü
Ardından, 1. sütuna bir Menü Modülü ekleyin ve istediğiniz bir menüyü seçin.
Logo Yükle
Ardından bir logo yükleyin.
Arka Plan Rengini Kaldır
Ardından, varsayılan beyaz arka plan rengini kaldırın.
Menü Metin Ayarları
Tasarım sekmesine gidin ve menü metin ayarlarını aşağıdaki gibi değiştirin:
- Menü Yazı Tipi: Sans'ı Aç
- Menü Metin Rengi: #ffffff (Masaüstü), #1a1844 (Tablet ve Telefon)
- Menü Metin Boyutu: 15px
- Metin Hizalama: Sağ
Açılır Menü Metin Ayarları
Açılır menü ayarlarındaki açılır menü çizgi rengini de değiştiriyoruz.
- Açılır Menü Satır Rengi: #ffffff
Simge Ayarları
Simge ayarlarında hamburger menü simgesi rengiyle birlikte.
- Hamburger Menü Simgesi Rengi: #fe4943
boyutlandırma
Ve boyutlandırma ayarlarında bir logo maksimum genişliği atayarak modül ayarlarını tamamlayacağız.
- Logo Maksimum Genişliği: %65
2. Sütun'a Sosyal Medya Takip Modülü Ekleyin
Sosyal Ağlar Ekle
İkinci satırımızın ikinci sütununda bir Sosyal Medya Takip Modülüne ihtiyacımız olacak. Seçtiğiniz sosyal ağları ekleyin.
hizalama
Modülün tasarım sekmesine gidin ve modül hizalamasını değiştirin.
- Modül Hizalaması: Merkez
aralık
Daha sonra bazı özel kenar boşluğu değerleri ekleyin.
- Üst Kenar Boşluğu: 20px
- Alt Marj: -4% (Yalnızca Tablet ve Telefon)
Sınır
Ve modülün kenarlık ayarlarına bazı yuvarlatılmış köşeler ekleyerek başlığı tamamlayın. Genel başlığı tamamladığınızda, tüm Divi Theme Builder değişikliklerini kaydettiğinizden ve sonucu web sitenizde görüntülediğinizden emin olun!
- Tüm Kornerler: 50vw
Ön izleme
Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.
masaüstü
Mobil
Son düşünceler
Bu gönderide, Divi'nin yerleşik Ses Modülü ile nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, size özel olarak oluşturulmuş global başlığınıza nasıl sabit bir ses çubuğu ekleyeceğinizi gösterdik. Bu, podcast'inizin son bölümünü vurgulamanın harika bir yoludur. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.
Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.