Divi Audio Modülünüzü Podcast Player Olarak Nasıl Düzenleyebilirsiniz
Bu yazı, Divi ses modüllerini düzenlemenin 5 eğlenceli yolunu başlıklı mini serimizde 5’in 3’tür. Her birine nasıl ulaşacağına dair bir öğretici ile Divi Audio modülünün beş benzersiz örneği için bu haftayı dört gözle bekleyin!
Web sitenizde paylaşmak isteyebileceğiniz her türlü ses içeriği vardır: örneğin şarkı sözleri, enstrümantal veya en son podcastiniz. Divi’nin yerleşik ses modülü kolaylaştırıyor! Bugünün öğreticisinde, divi ses modülünü bir podcast oynatıcı gibi nasıl organize edeceğimizi gösteriyoruz. Bugün ve Sonra Bugün: Divi Audio Modülü Podcast Player Olarak Ses Modülünü düzenlemeye başlamadan önce, varsayılan özelliklere alışalım. Temiz bir minimalist görünüm elbette bazı ses baytları sergileyecek kadardır, ancak tasarımı bağlama göre ayarlamak her zaman iyi bir fikirdir – ki bu tam olarak bugün yapacağımız gibi.
İşte Divi ses modülünün varsayılan sürümü: Ve bugün inşa edeceğimiz tasarım konsepti bu: Sadece bu tasarımı taklit etmek için aşağıda açıkladığım adımları izleyin, en çok kendi markanızı ileten görüntü varlıklarını değiştirin. Divi Audio Modülünüzü Raw, Vegan ve Paleo hareketleri arasındaki YouTube Kanalı Konseptimiz ve İlhamımıza Abone olmak için bir podcast oynatıcı olarak nasıl düzenlenir, insanların diyetlerine daha fazla dikkat etmeye başladığı açıktır. Stock Photography web sitesini ararken, kırsal bir renk paleti ve bir ev shadu ile hemen inisiyatif hakkında konuşan bu fotoğrafı buldum. İşletmeniz veya web siteniz gıdaya odaklanmasa da, bu tasarım işlevlerinin düzeni ve bileşimi ve diğer görüntü varlıkları, lütfen farklı bir tema verin. Tasarım öğelerini hazırlayın çünkü bu tasarımların çoğunu CSS ile tamamladığımız için sayı, sayı görüntü varlıklarının ikisi ile sınırlı olması gerekir. Birincisi, burada Unplash’tan indirdiğim arka plan görüntüsü. Biraz azaltmayı öneririm; Unplash, her zaman açık süreyi yavaşlatan yüksek çözünürlüklü fotoğraflar sağlar. Görüntünün Retina cihazında hala iyi görünmesini sağlamak için, Photoshop’ta veya diğer görüntü düzenleme yazılımlarında boyutu 1920 px kat 1280 piksel olarak düşürmenizi öneririm. Daha sonra, Adobe Photoshop’ta 600 px kez 600 piksel olarak tasarlanmış basit bir podcast kapak görüntüsü yaptım. Tasarımın kısmının görüntünün tekrarlanmasına bağlı olduğunu unutmayın, bu nedenle farklı bir arka plan görüntüsü kullanırsanız, kapak görüntüsünüze de koyduğunuzdan emin olun.
Yukarıdaki resimdeki metin fotoğraf düzenleme yazılımınıza eklenmelidir. Yukarıdaki grafikte kullandığımız ücretsiz yazı tiplerini almak ve bilgisayarınıza yüklemek için aşağıdaki adımları izleyin: Pacifico’yu Google Font’tan İndirin
Bilgisayarınızda indirilen dosyaları bulun.
Zip’i açın veya klasörü genişletin.
“Pacifico.ttf” i çift tıklayın ve yazı tipini yükleyin.
Fotoğraf düzenleme yazılımınızda yazı tipi seçenekleri olarak bulun. Görünmeden önce fotoğraf düzenleme uygulamanızı hızlandırmanız ve yeniden başlatmanız gerekebilir.
Tasarımı bugün yapacağımız divi tasarımı ile uygulamak, yemek pişirme, bahçecilik veya yerel ürünler hakkında podcast’ler için en uygun olanıdır, ancak seçtiğiniz resme bağlı olarak yazılım mühendisliğinden dünyanın keşfine kadar her şey için yeniden kullanılabilir – . Dikkat edilmesi gereken önemli bir özellik, podcast kapak görüntüsünün önde gelen olmasıdır. Bu, kullanıcıların etkinliğinizi bir sonraki App Store’u keşfettiklerinde tanımalarını sağlar!
Bu tasarım temel bir mimariye sahiptir: yalnızca ses modülünü içeren tek bir sütun satırı tutan bir kısımdan oluşur.
Bölüm ayarları parçalarını ayarlamak çok kolaydır ve yalnızca arka plan görüntü yüklemelerini içerir. (Burada kullandığım hasat fotoğrafını bulabilirsiniz.) Bölüm ayarlarınızdaki Genel Ayarlar sekmesinde, bilgisayarınızın yerel indirme klasöründen kullanmak istediğiniz fotoğrafı seçin ve yükleyin.
Satır Ayarları Bu tasarım mimarisinin sadeliğini hatırlıyor musunuz? Bu yalnızca arka plan görüntüsünün yeni ayarlandığı bölüme eklenen tek bir sütun satırı içerir. Ancak, bu satırda yapmak istediğimiz bazı ayarlamalar 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, üniteyi yüzde olarak ayarlayın ve kaymayı%50’ye sürükleyin. Bu, sıraların geniş bir şekilde görüntülemesini önleyecektir. Şimdi, kutunun sadece% 50’sini işgal edecek – bu durumda, az önce ayarladığımız sebzelerin arka planı olan kısım. Ses modülünü ayarlama Şimdi ilginç bir parçaya girme zamanı – podcast oynatıcı! Ses modülünü satıra ekledikten sonra bölümden mp3 yükleyin. Ses dosyaları olmadan, döner düğmesi ve ilerleme bıçakları görüntülenmez. Ardından, Genel Ayarlar sekmesinin altındaki metin sütununu doldurun. Metnin metninin başlığı müziğe atıfta bulunsa da, podcast bilgilerimize nasıl gireceğimizi sonuçlandırabiliriz: başlığın başlığında bölümün adını girin; Sanatçı adı alanında, ana bilgisayar adınızı girin; Son olarak, albüm adı alanında, podcast adını girin – kurgusal durumumda, bir podcast’te iki bezelye. Son olarak, biraz daha aşağı kaydırın ve podcast kapak resminizi yükleyin. Sonra, bazı stiller eklemek istiyoruz. Önce kolay ayrıntılarla başlayalım. Ses oynatıcınızı tutan kutunun arka plan rengini ve opaklığını ayarlamak için Gelişmiş Tasarım Ayarları sekmesini seçin. Fasulyenin yeşil rengine ulaşmak için RGBA değerini (126,193,32.0.82) kullanıyorum. Ancak, farklı görüntü varlıkları kullanıyorsanız, önce daha fazla sipariş edilen bir renk paleti seçmek istersiniz. Markanıza uygun bir arka plan rengi bulana kadar renk tonu ve opaklık kaymasını etkinleştirmekten çekinmeyin. Gelişmiş Tasarım Ayarları sekmesinde yapacağımız son ayarlama yazı tiplerinde; Tipografi, marka estetiğini iletmek için harika bir fırsattır. Bir podcast’te iki bezelye için ev yapımı yazı tipleri Pacifico seçtim. Bir kez daha, kullandığınız resim varlıklarına en uygun yazı tipi seçmekten çekinmeyin. Şimdi Özel CSS sekmesi altına birkaç kod satır ekleme zamanı. İlk olarak, ses oynatıcımızı içeren yeşil kutuya yumuşak damlalar ekleyeceğiz. Bunu yapmak için, “ana öğe” etiketli metnin metnine gidin ve aşağıdaki görüntüleri yapıştırın: Box-Shadow: 5px 5px 5px #2C2C2C; Boyutunuzu, yönünüzü, opaklığınızı ve damla gölgelerinizin tonunuzu ayarlamak için değerle oynayabilirsiniz. Son olarak, “Albüm Kapağı” resminin şeklini ayarlayacağız. (Dikkat edin, tasarımımızda bu resim podcast kapağınız olmalıdır). Ses oynatıcıdaki özel CSS sekmesinin içinde, “Ses Kapak Sanatı” başlıklı metnin metnine ve aşağıdaki macun: -Webkit-CLIP-Path: Circle (% 50% 50’de% 40);
Klip-yol: daire (% 50% 50’de% 40); Bu, ayarladığımız parametredeki görüntünün sadece bir kısmını ortaya çıkaracaktır, bu yüzden bir daire gibi görünüyor. Bittiğinde Kaydet’i ve Çıkın’ı tıklayın. Tebrikler, bazı varsayılan ayarlamalar ve bazı CSS görüntüleri ile, en son podcast bölümünüzü pazarlamak için mükemmel bir yol oluşturdunuz!
