Retro Record Inspired Divi Audio Modülü Nasıl Yapılır

Bu gönderi, Divi'nin Ses Modülüne Stil Vermenin 5 Eğlenceli Yolu başlıklı mini serimizin 2. 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!

---

Bugün, retro esintili bir ses çalar oluşturmak için varsayılan modülü özelleştireceğiz. Ayrıca, kullanıcıları müziğinizi kişisel cihazlarına indirmeye teşvik eden bir harekete geçirici mesaj modülü ekleyeceğiz. Aşağıdaki öğreticiyi takip edin ve düşüncelerinizi yorumlar bölümünde paylaşın. Ne düşündüğünü bilmek isterim!

Bugünün Öncesi ve Sonrası: Divi Ses Modülü

Standart ses modülü kesinlikle işlevseldir: şarkı adı, sanatçı adı ve albüm adı için alanlar içerir. Bununla birlikte, standart tasarım biraz mülayim – özellikle belirli bir markayı veya estetiği iletmek istiyorsanız.

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

Ve işte bugün inşa edeceğimiz konsept:

Bu tasarımı kopyalamak için aşağıdaki talimatlarımı takip edin. Elbette, kendi görsel varlıklarınızı değiştirmekte özgürsünüz, ancak bütünsel “görünüm”, büyük ölçüde seçtiğim görsellere bağlı.

Retro Record Inspired Divi Audio Modülü Nasıl Yapılır

Youtube Kanalımıza Abone Olun

Konsept ve İlham

Son zamanlarda insanlar ister gardırop seçimleri, ister müzik tercihleri ​​veya Instagram filtreleri aracılığıyla geçmişi kucaklıyorlar. Bu tasarım için, sadece retro görüntüleri değil, aynı zamanda vintage esintili bir renk paletini de içeren bu hareketten ilham aldım. Umarım size iyi hizmet eder – ister Baby Boomer, ister Millennial veya aradaki biri olun!

Tasarım Öğelerinin Hazırlanması

Divi temasındaki çok sayıda özelleştirme aracı sayesinde, bu tasarım yalnızca bir görüntü varlığı gerektirir: Ücretsiz bir stok fotoğraf sitesi olan Pexels'ten indirdiğim bölüm arka plan görüntüsü. Buradan alabilirsiniz. Bu özel resim, sitede bulunan diğer bazı fotoğraflar kadar yüksek çözünürlüklü olmadığından, küçültmeye gerek yoktur; Varsayılan olarak 890 piksele 593 piksel olarak bıraktım.

Tasarımı Divi ile Uygulamak

Bugün yarattığımız tasarım, çalışmalarını web sitelerinde sergilemek isteyen bir indie rock grubu için mükemmel bir UI çözümü. Müzikal olarak daha az yetenekli olanlar için, 70'lerin disko parçaları veya en yeni alternatif liste başı olanlar gibi en sevdiğiniz ritimleri paylaşmak eşit derecede iyi çalışır.

Bu tasarımın temel bir mimarisi vardır: bir harekete geçirici mesaj modülünün üzerine yığılmış ses modülünü içeren tek sütunlu bir satırı 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 kayıt fotoğrafını burada bulabilirsiniz.)

Bölüm Ayarları Pencerenizin Genel Sekmesinde, yerel İndirilenler klasörünüzden kayıt fotoğrafını seçin ve yükleyin.

Satır Ayarları

Artık içerme bölümümüzü oluşturduğumuza göre, satır ayarlarına geçebiliriz. İlk olarak, tek sütunlu yapı seçeneğini seçtiğinizden emin olun. Ardından, Genel Ayarlar sekmesi altında, "Özel Genişliği Kullan" için "Evet"i seçin, ölçü birimini yüzdeye ayarlayın ve kaydırıcıyı %40'a sürükleyin. Bu, satırın genişliğinin, içerdiği öğenin (bu durumda bölümün) yalnızca %40'ı olmasını sağlayacaktır.

Ses Modülü Ayarları

Satırımız uygun boyuttayken, modülleri eklemeye başlayalım. İlk olarak, tasarımımızın en önemli öğesini ekleyeceğiz: ses modülünü. Satıra ekledikten sonra Ses Modülü Ayarları penceresini açın ve Genel Ayarlar sekmesi altında şarkı, sanatçı ve albüm adlarını girin. Ayrıca sergilemek istediğiniz MP3'ü yüklediğinizden emin olun; onsuz, oynat düğmesi ve ilerleme çubuğu görünmeyecektir.

Artık temel bilgileri girdiğimize göre, ses modülünü şekillendirmeye geçebiliriz. 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. Yarı saydam bir beyaz elde etmek için rgba değerini (255,255,255,0.5) kullandım. (Son değerin "alfa" anlamına geldiğini ve opaklığı kontrol ettiğini unutmayın.) Kendi seçtiğiniz özel bir arka plan rengini seçmek için ton ve opaklık kaydırıcılarını kullanarak bu değerlerden sapmaktan çekinmeyin.

Özel CSS ile ilerlemeden önce, tipografi ile oynayalım. Varsayılan yazı tipi, bir liste başı başlığı için biraz sıkıcı görünüyordu, bu yüzden rengi parlak turuncuya ayarlayarak bunun yerine Reanie Beenie'yi seçtim. (Aynısını kullanmak istiyorsanız kullandığım onaltılık değer #e09900 idi.)

Yarı saydam ses modülü kutumuzun yuvarlatılmış köşelerini elde etmek için bir satır özel CSS eklememiz gerekecek. Ses Modülü Ayarları Penceresinin Özel CSS Sekmesine tıklayın ve Ana Öğe başlıklı bölüme gidin. Buraya yerleştirilen kod, tüm ses kutusunu etkileyecektir. Aşağıdaki parçacığı metin alanına yapıştırın.

border-radius: 5px;

Ardından, şarkı başlığına ince bir gölge eklemeliyiz. Özel CSS sekmesinde kalarak, Ses Başlığı başlıklı bölümü aşağı kaydırın ve aşağıdaki CSS'yi yapıştırın:

text-shadow: 2px 2px 5px #000;

Bu, turuncu şarkı başlığımıza siyah bir gölge ekleyecektir. Farklı bir gölge rengi kullanmayı tercih ederseniz, CSS parçacığının sonundaki onaltılık değeri değiştirmeniz yeterlidir.

Harekete Geçirici Mesaj Modülü Ayarları

Her iyi pazarlamacının bildiği gibi, kullanıcılarınızın şarkınızı i-Tunes'a indirmek gibi herhangi bir şey yapmasını istiyorsanız, harekete geçirici bir mesaj vermeniz önemlidir. Bu öğreticide, aynı satıra bir eylem çağrısı modülü ekleyerek ses oynatıcımızın altına basit bir CTA indirme düğmesi ekleyeceğiz.

İlk olarak, Harekete Geçirici Mesaj Modülü Ayarları penceresini açın ve Genel Ayarlar Sekmesi altında ilgili bilgileri girin. Tasarımımızı karıştırmamak için “Başlık” alanını boş bırakmayı tercih ettiğimi unutmayın. (Çoğu kullanıcı bir indirme düğmesi gördüklerinde ne yapacaklarını bilirler.) Uygun hedef URL'yi yapıştırdığınızdan emin olun; biri olmadan, düğme görünmez.

Temel bilgiler bittiğinde, düğmemize biraz pizazz eklemek için Gelişmiş Tasarım Ayarları sekmesine gidebilirsiniz. Ayarlamak isteyeceğiniz ilk ayar Üst Kenar Boşluğudur; düğmeyi ses çalara yakınlaştırmak için bunu -20 piksele ayarlayın. Harekete geçirici mesaj modülümüze bir Başlık eklemeyi seçmiş olsaydık bu gerekli olmazdı, ancak başlık olmadan çok fazla boşluk var.

Ardından, “Düğme için Özel Stilleri Kullan” seçeneğini “Evet” olarak değiştirerek indirme düğmemizin stilini belirleyeceğiz. Bu, bir dizi ek özelleştirmeyi mümkün kılacaktır. Tabii ki, yine kendi renk düzeninizi seçebilirsiniz, ancak metin, kenarlık ve simge renkleri için #e09900 hex kodunu kullanarak turuncu ile yapıştırmayı seçtim. Arka plan için de aynı portakalı kullandım ama opaklığı .3'e düşürdüm. Bu, düğmeye ince bir kontrast ekler ve tasarımın duyarlı yapısı düğmeyi beyaz alana zorlasa bile okunabilirliği sağlar.

Ayrıca yazı tipi boyutunu 14 piksele ve kenarlık genişliğini 1 piksele düşürdüm ancak yine bu ayarlar isteğe bağlı.

Yarın: Bölüm 3 – Divi Ses Modülünüzü Podcast'e Hazır Hale Getirme

En son podcast bölümlerinizi sergilemek için mükemmel bir ses çaların nasıl tasarlanacağını göstereceğim serimizin bir sonraki kurulumu için yarın bize katılın.

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!