Divi'nin Ses Modülü ile Temalı Üç Sütunlu “Heavy Metal” Ses Bölümü Nasıl Oluşturulur

Bu gönderi, Divi'nin Ses Modülüne Stil Vermenin 5 Eğlenceli Yolu başlıklı mini serimizin 5. bölümüdür. Takip ettiğiniz için teşekkürler. Divi tasarım harikalarıyla dolu bir sonraki mini dizimiz için bizi izlemeye devam edin!

---

Müzisyen olanlarınız için, kişisel web sitenize sesin dahil edilmesi çok önemlidir. Neyse ki Divi teması, en son parçalarınızı ziyaretçilerle paylaşmak için ana sayfanıza (veya herhangi bir sayfanıza) ekleyebileceğiniz, kullanımı kolay bir ses modülü ile birlikte gelir.

Bugün, ziyaretçileri i-Tunes'a veya En son hitlerinizi indirmek için Google Play.

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

Bu öğretici birden fazla modül içerdiğinden, önce ses modülüne bağımsız olarak bakmak önemlidir. Bu, yalnızca standart tasarımın içerdiği özellikler ve meta veriler hakkında bilgi sahibi olmanızı sağlamakla kalmayacak, aynı zamanda cazip tasarımımızı karşılaştırmak için kullanışlı bir standart olarak hizmet edecektir!

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 anlattığım adımları uygulamanız yeterli. Her zaman olduğu gibi, farklı görüntü varlıklarını kullanmakta özgürsünüz. Bu örnekte, tasarımımı kurgusal heavy metal grubu HarmOni'ye dayalı olarak oluşturuyorum.

Divi'nin Ses Modülü ile Temalı Üç Sütunlu “Heavy Metal” Ses Bölümü Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Konsept ve İlham

Beni yanlış anlama. Zaman zaman doygun RBG'yi seviyorum, ama eski siyah beyaz gibisi yok. Tabii ki ürkütücü bir estetiği benimseyerek o renk paletini uç noktalara taşıdım. Tasarımınız için, seçtiğiniz fotoğraf varlıklarıyla havayı aydınlatın.

Tasarım Öğelerinin Hazırlanması

Divi'nin yerleşik özelleştirme araçları sayesinde, bu tasarım yalnızca bir görüntü varlığı gerektirir: bölüm arka plan görüntüsü. Unsplash'ta bulduğum bir fotoğrafı kullandım, buradan indirebilirsiniz. Yükleme sürelerinizi düşürmeden görüntünün retina cihazlarda 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 1221 piksele boyutlandırmanızı öneririm.

Tasarımı Divi ile Uygulamak

Bugün oluşturacağımız tasarım, herhangi bir grup veya türe göre uyarlanabilir. Bir Japon Pop grubu için bir site mi oluşturuyorsunuz? Burada kullandığım Hitchcock'dan ilham alan görüntü için arka planı sevimli emojilerle değiştirmeyi düşünün.

Tasarım, diğer sesli ortam türlerini sergilemek için de kullanılabilir. Örneğin bir podcast yayınlıyorsanız, en son bölümünüzü yükleyin, esprili bir biyografi yazın ve harekete geçirici mesaj alanına blogunuzun bağlantısını ekleyin. Sonuç olarak, kullanıcılara MP3'ünüzü dinlerken biraz bağlam sağlamak için tasarlanmış çok yönlü bir konsepttir.

Bu tasarımın mimarisi oldukça basittir. Tek bir satır içeren tek bir bölümden oluşur. Satırın düzenini ⅓ – ⅓ – ⅓ seçimine ayarladığınızdan emin olun – ki bu eğitimin başlığına bakıldığında muhtemelen açıktır! Son olarak, sütunların her biri üç modülden birini tutacaktır: bir ses modülü, bir metin modülü ve bir harekete geçirici mesaj modülü. Sıra önemli değil; bunları uygun gördüğünüz şekilde düzenlemekten çekinmeyin.

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. (Burada kullandığım uğursuz fotoğrafı bulabilirsiniz, ancak kendi estetiğinize daha uygun olanı bulmak için Pexels veya Unsplash gibi ücretsiz bir stok fotoğraf sitesine de göz atabilirsiniz.)

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ı

Artık bölümün arka planına sahip olduğumuza göre, üç sütunlu satırı özelleştirmenin zamanı geldi. Satır Ayarları penceresini açarak başlayın. Genel Ayarlar sekmesi altında, "Bu Satırı Tam Genişlikte Yap" seçeneğinin yanındaki düğmeyi "Evet" olarak değiştirin. Bu, sıramızın görüş alanımızın uzunluğunu uzatmasına izin verecek ve bize üç modülü dahil etmek için bolca alan sağlayacaktır.

Ancak, modüllere geçmeden önce satırda yapmamız gereken bazı ek özelleştirmeler var. Gelişmiş Tasarım Ayarları sekmesine gidin ve satırın arka planını boş bırakarak "Sütun Yüksekliklerini Eşitle" seçeneğine gidin ve düğmeyi "Evet" olarak değiştirin.

Satırın arka plan rengini boş bırakmaya karar verdiğimizi hatırlıyor musunuz? Bunun nedeni, sütunların her birine kendi arka plan rengini vereceğiz. Gelişmiş Tasarım Ayarları sekmesinde, Sütun 1, 2 ve 3'ün ilgili arka plan rengi ayarlarına gelene kadar aşağı kaydırın. Gördüğünüz gibi, (0,0,0,.66) rgba değerlerini kullandım – bilinçli olarak alfa değerimi kurgusal grubumun şeytani doğasını yansıtacak şekilde ayarladım. Bu, geliştirmeye çalıştığınız markaya veya estetiğe göre farklı bir renk paleti (ton ve opaklık kaydırıcılarını kullanarak) seçmek isteyebileceğiniz başka bir durumdur.

Sütunlarda yapacağımız son özelleştirmeler, Özel CSS sekmesi altında yer almaktadır. Sütunların ince, yuvarlatılmış köşelerini çoğaltmak için aşağıdaki CSS'yi her biri için Ana Öğe metin alanlarına yapıştırın (Sütun 1 Ana Öğe, Sütun 2 Ana Öğe ve Sütun 3 Ana Öğe).

border-radius: 5px;

Ses Modülü Ayarları

Satırımın ilk sütununa bir Ses Modülü ekleyerek başlamayı seçtim, ancak tercih ettiğiniz modülle başlayabilirsiniz. Ardından, Ses Modülü Ayarları penceresini açın ve Genel Ayarlar sekmesi altında MP3 dosyanızı yükleyin ve şarkı adı, sanatçı adı ve albüm adı gibi ilgili verileri girin.

Ardından, Gelişmiş Tasarım Ayarları sekmesine giderek biraz stil eklemek istiyoruz. Unutmayın, Satır Ayarları altında bir arka plan rengi seçmek ve içeren sütunun kenarlarını yuvarlamak gibi bazı stilleri zaten başardık. Burada ya bir arka plan rengi ayarlamaktan kaçının ya da opaklığın 0'da olduğundan emin olun. (Sütunun arka plan rengine müdahale eden herhangi bir şey istemiyoruz.)

Gördüğünüz gibi, tasarımımın “sürünme faktörünü” artırmak için tipografimi değiştirmeye karar verdim. 31 piksel boyutunda, Grace Covered by Grace yazı tipinizi seçtim, ancak tasarımınıza daha uygun olanı bulmak için kitaplığa göz atabilirsiniz.

Son olarak, Gelişmiş Tasarım Ayarları sekmesinde kalarak "Özel Kenar Boşlukları" etiketli bölüme gidin. Üst kenar boşluğunu 30 piksele ayarlayın. Bu, ses çalarınızı sütunun ortasına doğru iter.

Metin Modülü Ayarları

Ortadaki sütuna bir Metin Modülü ekleyin. HarmOni hakkında kısa bir biyografi için bu metin alanını kullanmayı seçtim, ancak tasarımınızla ilgili herhangi bir içeriği dahil edebilirsiniz. Örneğin bir podcast bölümünü sergiliyorsanız, kısa bir özet yazmak isteyebilirsiniz.

Modülü yerleştirdikten sonra, Metin Modülü Ayarları penceresini açın ve Genel Ayarlar sekmesi altında görüntülemek istediğiniz metni yazın veya yapıştırın. Metin giriş kutusunun üzerinde, metninizin gerekçesini değiştirme seçeneğiniz vardır; merkezledim.

Metninizin varsayılan olarak sütun sınırlarının en kenarlarına itildiğini fark edeceksiniz. Bunu ayarlamak için Gelişmiş Tasarım Ayarları sekmesine gidin ve "Özel Kenar Boşlukları" başlıklı bölüme gidin. Üst ve alt kenar boşluklarım için 20 piksel, sol ve sağ kenar boşluklarım için 50 piksel kullandım.

Metnimin stilini büyük harflerle seçtiğimi de fark edeceksiniz, çünkü bu bir heavy metal grubunun yapacağı size bağırmak gibi bir tasarım seçimi gibi görünüyordu.

Harekete Geçirici Mesaj Modülü Ayarları

Son olarak, ziyaretçileri müziğinizi veya bölümünüzü indirmeye teşvik etmek için satırımızın son sütununa bir harekete geçirici mesaj modülü eklememiz gerekiyor. Genel Ayarlar penceresinde kullanmak istediğiniz başlığı girin; "GooglePlay'deyiz"i seçtim. Ancak, alaycı bir zeyilname de eklemek istediğim için (“kuruluş karşıtı olmamıza rağmen”) mesajımı yazdığım metin giriş alanına biraz daha ilerledim.

Genel Ayarlar sekmesindeyken, düğmenin kendisinde görünecek metne ek olarak, düğmenizin bağlanacağı URL'yi eklemeyi unutmayın. Bu bilgiler olmadan sayfanızda hiçbir düğme görüntülenmez.

Daha önce olduğu gibi, arka plan rengi ekleme seçeneğinin de seçili olmadığından emin oldum.

Ayrıca, Gelişmiş Tasarım Ayarları sekmesi altında, harekete geçirici mesaj modülü tasarımında yapmamız gereken birkaç düzenleme var. İlk olarak, Başlık Yazı Tipinin şarkı adı için kullandığımı taklit etmesini seçtim. Ardından, ses modülünde olduğu gibi, üste bir Özel Kenar Boşluğu: 10px ekledim.

Son olarak, kenar boşluklarını özelleştirme alanından hemen sonra “Düğme için Özel Stiller Kullan” başlıklı bölüme bakın. Seçeneği "Evet" olarak değiştirdiğinizde, ek özelleştirme seçenekleri görünür. CTA düğmesini istediğiniz gibi şekillendirebilirsiniz, ancak bir istisna dışında hayaletimsi beyaz varsayılana bağlı kalmaya karar verdim. Fareyle üzerine gelindiğinde görünmesi için özel bir simge (müzik notası) seçtim.

Bitirdiğinizde, şaheserinizi görüntülemek için "Kaydet ve Çık"a basın.

Bitirdiğinize göre, yukarı kaydırın ve üç parçalı ses çalar tasarımınızı varsayılan ses modülüyle karşılaştırın ve yalnızca birkaç ince ayar ve bir CSS dokunuşuyla mümkün olan özelleştirme düzeyini takdir edin!

My Audio Module Serisini Takip Ettiğiniz İçin Teşekkürler!

Hepinizle birkaç öğreticiyi paylaşmak bir patlama oldu ve gelecekte daha fazlasını paylaşmayı umuyorum. Pazartesiden itibaren bir sonraki Divi mini dizimiz için bizi izlemeye devam edin. Divi Post Slider modülündeki Elegant Themes bloguna yeni bir katkıda bulunan John Donnellon tarafından yapılmıştır. İçinde, web'deki popüler blogları beş post kaydırıcı tasarımı alacak ve bunları Divi ile nasıl yeniden oluşturacağınızı gösterecek!

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!