Divi Ses Modülünüzü Podcast Oynatıcı Olarak Nasıl Stillendirirsiniz

Bu gönderi, Divi'nin Ses Modülüne Tarz Vermenin 5 Eğlenceli Yolu başlıklı mini serimizin 3'üncü bölümüdür. Divi'nin Ses Modülünün beş benzersiz örneğinin tümü için, her birinin nasıl elde edileceğine dair bir eğitimle bu hafta bizi izlemeye devam edin!

---

Web sitenizde paylaşmak isteyebileceğiniz her türlü ses içeriği vardır: örneğin en son şarkı sözleriniz, enstrümantal müzikleriniz veya podcast'leriniz. Divi'nin yerleşik ses modülü, bunları dahil etmeyi çok kolaylaştırır!

Bugünkü eğitimde size Divi ses modülünü bir podcast oynatıcı gibi nasıl şekillendireceğinizi gösteriyoruz.

Bugünün Öncesi ve Sonrası: Podcast Oynatıcı Olarak Divi Ses Modülü

Ses modülünü şekillendirmeye başlamadan önce, varsayılan özelliği tanıyalım. Temiz, minimalist görünüm, bazı ses baytlarını sergilemek için kesinlikle yeterli olacaktır, ancak bir tasarımı bağlama dayalı olarak uyarlamak her zaman iyi bir fikirdir – bugün tam olarak bunu yapacağız.

Divi ses modülünün varsayılan sürümü:

Ve işte bugün inşa edeceğimiz tasarım konsepti:

Bu tasarımı taklit etmek için aşağıda açıkladığım adımları takip edin, kendi markanızı en iyi şekilde anlatan görsel varlıkları değiştirin.

Divi Ses Modülünüzü Podcast Oynatıcı Olarak Nasıl Stillendirirsiniz

Youtube Kanalımıza Abone Olun

Konsept ve İlham

Ham, vegan ve paleo hareketleri arasında, insanların diyetlerine daha fazla dikkat etmeye başladığı açık. Bir stok fotoğraf web sitesinde gezinirken, rustik renk paleti ve evde yetiştirilmiş hissi ile bu girişimlere hemen hitap eden bu fotoğrafa rastladım. İşletmeniz veya web siteniz yemek merkezli olmasa bile, bu tasarımın düzeni ve bileşimi diğer görsel varlıklarla eşit derecede iyi çalışır, bu nedenle farklı bir tema kullanmaktan çekinmeyin.

Tasarım Öğelerinin Hazırlanması

Bu tasarımın çoğunu CSS ile gerçekleştirdiğimiz için ihtiyacımız olan görüntü varlıklarının sayısı iki ile sınırlıdır. Birincisi, burada Unsplash'tan indirdiğim bölüm arka plan görüntüsü. Biraz küçültmenizi tavsiye ederim; Unsplash, yükleme süresini her zaman yavaşlatan yüksek çözünürlüklü fotoğraflar sağlar. Görüntünün retina cihazlarında hala iyi görünmesini sağlamak için, Photoshop'ta veya başka bir görüntü düzenleme yazılımında 1920 piksele 1280 piksele kadar boyutlandırmanızı öneririm.

Ardından, Adobe Photoshop'ta 600 piksele 600 piksel olarak tasarlanmış basit bir podcast kapak görüntüsü oluşturdum. Tasarımın bir kısmının görüntülerin tekrarına bağlı olduğuna dikkat edin, bu nedenle farklı bir arka plan görüntüsü kullanıyorsanız, onu kapak resminize de dahil ettiğinizden emin olun.

Yukarıdaki grafikte kullandığımız ücretsiz yazı tipini almak ve bilgisayarınıza kurmak için aşağıdaki adımları izleyin:

• Pacifico'yu Google Fonts'tan indirin
• İndirilen dosyayı bilgisayarınızda bulun.
• Klasörü açın veya genişletin.
• “Pacifico.ttf” üzerine çift tıklayın ve yazı tipini yükleyin.
• Bir yazı tipi seçeneği olarak fotoğraf düzenleme yazılımınızda bulun. Fotoğraf düzenleme uygulamanızı görünmeden önce hızlı bir şekilde yeniden başlatmanız gerekebilir.

Tasarımı Divi ile Uygulamak

Bugün oluşturacağımız tasarım yemek pişirme, bahçecilik veya yerel ürünlerle ilgili bir podcast için en uygun olanıdır, ancak seçtiğiniz görüntülere bağlı olarak yazılım mühendisliğinden dünya çapında yürüyüşe kadar her şey için yeniden kullanılabilir. Dikkat edilmesi gereken önemli özellik, podcast kapak görüntüsünün öne çıkmasıdır. Bu, kullanıcıların App Store'da bir daha gezinirken programınızı tanımasını sağlar!

Bu tasarımın temel bir mimarisi vardır: yalnızca ses modülünü içeren tek sütunlu bir sıra barındıran tek bir bölümden oluşur.

Bölüm Ayarları

Bölüm ayarları basittir ve yalnızca bir arka plan görüntüsünün yüklenmesini içerir. (Kullandığım hasat fotoğrafına buradan ulaşabilirsiniz.)

Bölüm ayarlarınızın Genel Ayarlar sekmesinde, bilgisayarınızın yerel İndirilenler klasöründen kullanmak istediğiniz fotoğrafı seçin ve yükleyin.

Satır Ayarları

Bu tasarımın mimarisinin sadeliğini hatırlıyor musunuz? Arka plan görüntüsünü az önce ayarladığımız bölüme eklenen yalnızca bir tek sütunlu satır içerir.

Ancak, bu satırda yapmak istediğimiz birkaç özelleştirme var. Satır Ayarları penceresini açtıktan sonra, "Özel Genişliği Kullan"ın yanındaki düğmeyi "Evet" olarak değiştirin. Ardından, birimi yüzdeye ayarlayın ve kaydırıcıyı %50'ye sürükleyin. Bu, satırın görünümün tüm genişliğini kapsamasını önleyecektir. Şimdi, muhafaza kutusunun sadece %50'sini işgal edecek – bu durumda, az önce özelleştirdiğimiz bitkisel arka plana sahip bölüm.

Ses Modülü Ayarları

Şimdi heyecan verici kısma geçme zamanı – podcast oynatıcı! Satıra bir ses modülü ekledikten sonra bölümün bir MP3'ünü yükleyin. Bir ses dosyası olmadan oynat düğmesi ve ilerleme çubuğu görüntülenmez.

Ardından, Genel Ayarlar sekmesi altındaki metin alanlarını doldurun. Metin alanı başlıkları müziğe atıfta bulunsa da, podcast'imizin bilgilerini nasıl gireceğimizi çıkarabiliriz: Başlık alanına bölümün adını girin; Sanatçının Adı alanına sunucunuzun adını/adlarını girin; son olarak, Albüm Adı alanına podcast'in adını girin – benim kurgusal durumumda Two Peas in a Podcast.

Son olarak, biraz daha aşağı kaydırın ve podcast'inizin kapak resmini yükleyin.

Ardından, biraz stil eklemek istiyoruz. Önce kolay ayrıntılarla başlayalım. Ses çalarınızı barındıran kutunun arka plan rengini ve opaklığını ayarlamak için Gelişmiş Tasarım Ayarları sekmesini seçin. Bu bezelye yeşili rengi elde etmek için rgba değerini (126,193,32,0.82) kullandım. Ancak farklı görüntü varlıkları kullanıyorsanız, daha ısmarlama bir renk paleti seçmek isteyeceksiniz. Markanıza uygun bir arka plan rengi bulana kadar ton ve opaklık kaydırıcılarını değiştirmekten çekinmeyin.

Gelişmiş Tasarım Ayarları sekmesinde yapacağımız son ayar yazı tipinde; tipografi, marka estetiğini iletmek için harika bir fırsattır. Podcast'te İki Bezelye için evde yetiştirilen Pacifico yazı tipini seçtim. Yine, kullandığınız görüntü varlıklarıyla en iyi rezonansa giren yazı tipini seçmekten çekinmeyin.

Şimdi Özel CSS sekmesi altına birkaç satır kod ekleme zamanı. İlk olarak, ses çalarımızı içeren yeşil kutuya ince bir gölge ekleyeceğiz. Bunu yapmak için "Ana Öğe" etiketli metin alanına gidin ve aşağıdaki parçacığı yapıştırın:

box-shadow: 5px 5px 5px #2c2c2c;

Alt gölgenizin boyutunu, yönünü, opaklığını ve tonunu ayarlamak için değerlerle oynayabilirsiniz.

Son olarak, “albüm kapağı” görüntüsünün şeklini özelleştireceğiz. (Tasarımımızda bu görüntünün aslında podcast'inizin kapak resmi olması gerektiğini unutmayın). Ses çaların Özel CSS sekmesinde, "Ses Kapak Resmi" başlıklı metin alanına gidin ve aşağıdakini yapıştırın:

-webkit-clip-path: circle(40% at 50% 50%);
clip-path: circle(40% at 50% 50%);

Bu, görüntünün yalnızca ayarladığımız parametreler dahilindeki kısımlarını ortaya çıkaracak ve bir daire gibi görünmesini sağlayacaktır.

Bitirdiğinizde Kaydet ve Çık'ı tıklayın.

Tebrikler, birkaç yerleşik özelleştirme ve birkaç CSS parçacığıyla en son podcast bölümlerinizi pazarlamak için mükemmel bir yol yarattınız!

Yarın: 4. Bölüm – Divi Ses Modülü ile Etkileyici Renk Bloklama

Serimizin bir sonraki kurulumunda yarın bize katılın, burada hem müzik hem de eleştirel beğeniyi paylaşmak için orta kontrastlı, bölünmüş ekran tasarımı oluşturmak için ses modülünü nasıl özelleştireceğinizi göstereceğim.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!