Divi Ses Modülünüze “Galaksiler Arası Titreşim” Nasıl Verilir

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

---

Gelişmekte olan bir halk şarkıcısı, yarı zamanlı bir podcast yayıncısı veya ödüllü bir kemancı olun, çalışmalarınızı web sitenizde sergilemek isteyebilirsiniz. Divi ses modülü mükemmel bir çözümdür ve bu mini dizide size tasarımınızı canlandırmanın 5 yolunu göstereceğim!

Bugün, en son tekno vuruşlarınız için varsayılan Divi Ses Modülünü bir uzay çağı gemisine dönüştüreceğiz!

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

Ses modülünü şekillendirmeye başlamadan önce, varsayılan tasarıma bir göz atmak önemlidir. Kullanıma hazır sürüm temiz ve işlevsel olsa da, çoğu tasarımcı bir marka veya tema oluşturmaya yardımcı olmak için biraz parıltı eklemek isteyecektir.

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

Ve işte benim “Galaksiler Arası Titreşim” adını verdiğim tasarım konsepti:

Tasarımımı kopyalamak için aşağıdaki talimatları izleyin ve aşağıdaki yorumlar bölümünde ne düşündüğünüzü bana bildirin!

“Galaksiler Arası Titreşim” Divi Ses Modülü Tasarım Konsepti Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Konsept ve İlham

Bu tasarımın ilham kaynağı, sesi biraz dünya dışı olan Carbon Based Lifeforms adlı İsveçli bir müzik ikilisiydi. (Çalışırken dikkatinizi dağıtmayan bir ortam müziğine ihtiyacınız olduğunda parçalarını şiddetle tavsiye ederim!) Kendime, şarkılarından biri için bir müzik çalar tasarlasaydım nasıl olurdu diye sordum. Sonuç buydu!

Tasarım Öğelerinin Hazırlanması

Divi teması çok sayıda yerleşik özelleştirme seçeneğiyle birlikte geldiğinden, bu tasarım yalnızca bir grafik varlığı gerektirir: bölüm arka plan görüntüsü. İstediğiniz göksel temalı görüntüleri seçmekte özgür olsanız da, buradan indirebileceğiniz Unsplash'tan bir görüntü seçtim. Yükleme sürelerini makul tutmak için, onu Photoshop'a veya başka bir grafik tasarım programına aktarmanızı ve 1920 piksel genişliğe kadar küçültmenizi öneririm.

Tasarımın Divi'de Uygulanması

Bu tasarım, elektronik veya fütüristik bir sese yönelen bir müzisyene uygundur, ancak görüntü varlıkları herhangi bir sayıda estetiği iletmek için takas edilebilir.

Oldukça basit bir mimariye sahiptir: ⅓ ve ⅔ sütun yapısına sahip bir satır içeren tek bir bölüm. Satırın daha küçük sütununa bir ses modülü ekleyeceğiz. Satırın daha büyük sütununda, iki adet yığılmış geçiş modülü ekleyeceğiz.

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 yıldızlı gece gökyüzü fotoğrafını burada bulabilirsiniz.)

Bölüm ayarlarınızın genel sekmesinde, kullanmak istediğiniz fotoğrafı bilgisayarınızdan seçin – elbette indirdikten sonra!

Satır Ayarları

Satır ayarları varsayılan durumlarında kalabilir. Ancak, uygun sütun oranlarını seçtiğinizden emin olun: ⅓ – ⅔

Ses Modülü Ayarları

İlk olarak, gösterinin yıldızı olan ses modülümüzü ele alacağız. Seçtiğiniz MP3 dosyasını yükleyerek ve Ses Modülü Ayarları penceresinin Genel Ayarlar sekmesi altındaki temel bilgileri doldurarak başlayın: şarkı, sanatçı ve albüm adı.

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 çelik grisi rengi elde etmek için rgba değerini (61,61,61,0.5) kullandım, ancak daha az hassas olabilir ve doğru kombinasyonu bulana kadar kaydırıcılarla oynayabilirsiniz.

Varsayılan yazı tipini uzay çağı görünümümüz için biraz cansız buldum, bu yüzden biraz daha aşağı kaydırarak, karakterlere biraz daha fazla nefes alma alanı sağlamak için başlık yazı tipini 2 piksellik bir başlık harfiyle Passion One olarak ayarladım.

Yuvarlatılmış köşeler ve ince alt gölge elde etmek için birkaç 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.

box-shadow: 5px 5px 5px #111;
border-radius: 5px;

Bitirdiğinizde Kaydet ve Çık'ı tıklayın. Sabırsızlaşmaya başlıyorsanız, ilerlemenizi kontrol etmekten çekinmeyin!

Modül Ayarlarını Değiştir

Satırınızın diğer sütununda – daha geniş sütunda – sonunda iki geçiş modülü ekleyeceğiz. Ancak zamandan tasarruf etmek için, ikinciyi elde etmek için çoğaltmadan önce ilk önce en üsttekini oluşturup biçimlendireceğiz.

İlk geçiş modülünüzü oluşturduktan sonra Geçiş Modülü Ayarları penceresini açın ve Genel Ayarlar sekmesi altındaki ilgili bilgileri doldurun. Kullanıcılara bu hayali albüm hakkında biraz daha bilgi vermeye karar verdim.

Ardından, stil üzerine! Ses modülünde olduğu gibi, geçiş modülünün stil süreci hem Gelişmiş Tasarım Ayarları sekmesini hem de Özel CSS sekmesini içerir. İlk önce Gelişmiş Tasarım Ayarları sekmesine gidin ve arka plan renklerinizi ayarlayın. Geçiş modülünün, açık ve kapalı durumlar için farklı arka plan renkleri ayarlamanıza izin verdiğini unutmayın.

Açılan geçiş modülü arka planı için aşağıdaki rgba değerlerini kullandım: (13,1,79,0.55), ancak yine benzer bir görünüm elde etmek için kaydırıcıları kullanabilirsiniz. Kapalı arka plan rengi için, ses modülümüzün arka planından biraz daha koyu bir gölge olan (0,0,0,0.53) rgba değerlerini seçtim. Ayrıca tüm metin renklerini beyaza (#fff) ayarlamak için bu şansı kullanın. Bu, okunabilirliği sağlar.

Ardından, geçiş modülümüzün başlık tipografisini ses modülünün başlık tipografisiyle eşleştirelim. Yine yazı tipim için Passion One ve 2 piksel harf aralığı seçtim.

Tasarımımızı tamamlamak için Toggle Module Settings penceresinin Custom CSS sekmesine birkaç satır CSS eklememiz yeterli. Ana öğeye ilerleyin ve kenarlığı kaldırmak ve içeren kutuya dumanlı bir gölge eklemek için aşağıdakini yapıştırın.

border:none; box-shadow: 5px 5px 5px #111;

Ama hatırla! Orijinal tasarımda iki geçiş modülü vardı. Neyse ki Divi'nin hızlı bir çözümü var: yığılmış kağıtlara benzeyen simgeye tıklayarak ilk geçiş modülünüzü kopyalamanız yeterlidir.

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

Tebrikler! Divi'nin yerleşik işlevlerine yalnızca birkaç basit ince ayar yaparak gerçekten olağanüstü bir ses modülü yarattınız.

Yarın: Bölüm 2 – Retro Kayıttan Esinlenen Divi Ses Modülü Nasıl Yapılır

En sevdiğiniz klasikleri veya en yeni indie rock'ı çalmak için mükemmel olan retro esintili bir ses modülünü nasıl kopyalayacağınızı göstereceğim serimizin bir sonraki kurulumunda 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!