Retro kayıtlardan esinlenen bir divi ses modülü nasıl yapılır
Bu yazı, divi ses modüllerini düzenlemenin 5 eğlenceli yolunu başlıklı mini serimizde 5’in 2. bölümüdü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!
Bugün, varsayılan modülü Retro’dan esinlenen bir ses oynatıcı yapmak için ayarlayacağız. Ayrıca, kullanıcıları müziğinizi kişisel cihazlarından indirmeye teşvik eden bir davet modülü ekleyeceğiz. Aşağıdaki öğreticiyi izleyin ve düşüncelerinizi yorumlar bölümünde paylaşın. Ne düşündüğünü bilmek istiyorum! Bugün ve sonra bugün: Ses Divi Modülü Standart Ses modülü elbette işlevseldir: şarkı başlıkları, sanatçı adları ve albüm adları için sütunlar dahil. Bununla birlikte, standart tasarım oldukça yumuşaktır – özellikle belirli markaları veya estetiği iletmek istiyorsanız.
İşte Divi ses modülünün varsayılan sürümü: Ve bugün inşa edeceğimiz kavram bu: Bu tasarımı çoğaltmak için aşağıdaki talimatlarımı izleyin. Tabii ki, kendi görüntü varlıklarınızı değiştirmekte özgürsünüz, ancak bütünsel “ekran” seçtiğim görüntüye çok bağlıdır. Son zamanlarda YouTube Kanalı Konseptimiz ve İlhamımız’a abone olan Retro Records’dan esinlenen bir Divi Ses modülü nasıl yapılır, insanlar gardırop, müzik tercihleri veya Instagram filtrelerinin seçimi yoluyla geçmişi kucaklar. Bu tasarım için, sadece retro görüntüleri değil, aynı zamanda vintage’den esinlenen bir renk paleti olan bu hareketten ilham alıyorum. Umarım bu sizin için yararlıdır – siz bir bebek patlaması mı, bin yıllık biri veya aradaki biri misiniz?
Tasarım öğeleri hazırlama Divi temasındaki birçok ayar aracı sayesinde, bu tasarım sadece bir resim varlığı gerektirir: Pexels’ten indirdiğim arka plan görüntüsü, ücretsiz stok fotoğrafçılık web sitesi. Buradan alabilirsiniz. Bu özel görüntü, sitede bulunan diğer birkaç fotoğraf gibi yüksek çözünürlük olmadığından, azaltmaya gerek yoktur; Varsayılan 890px kez 593px olmasına izin verdim. Tasarımı bugün yaptığımız Divi tasarımıyla uygulamak, çalışmalarını web sitelerinde göstermek isteyen indie rock grupları için mükemmel bir UI çözümüdür. Daha az yetenekli müzik olanlar için, bu da işlev görür ve en sevdiğiniz ritimleri paylaşır-70’lerin disko parçası veya en son alternatif grafiklerin üst kısmı. Bu tasarımın temel bir mimarisi vardır: tek bir kısımdan oluşan bir kısımdan oluşur Davet modülüne göre istiflenmiş modüller içeren sütun satırı.
Bölüm Ayarları Parçayı ayarlamak çok kolaydır ve yalnızca arka plan görüntü yüklemelerini içerir. (Burada kullandığım kayıt fotoğraflarını bulabilirsiniz.) Genel sekmede bölümünüzün ayarlarında, yerel indirme klasörünüzden kayıt fotoğraflarını seçin ve yükleyin. Satır Ayarları Şimdi içeren bir parça hazırladık, satır ayarlarına geçebiliriz. İlk olarak, tek sütun yapısı seçeneğini seçtiğinizden emin olun. Ardından, Genel Ayarlar sekmesi altında, “Özel genişliği kullanmak” için “Evet” i seçin, ölçüm birimini yüzde olarak ayarlayın ve slaydı%40’a sürükleyin. Bu, satırın genişliğinin, onu içeren elemanların genişliğinin sadece% 40’ı olmasını sağlayacaktır – bu durumda bölüm. Ses modülü ayarları doğru satır boyutuna sahip, modül eklemeye başlayalım. İlk olarak, tasarımımızın en önemli unsurlarını ekleyeceğiz: Audio Modül. Sıraya ekledikten sonra Ses Modülü Ayarları penceresini açın ve Genel Ayarlar sekmesinin altına şarkının, sanatçının ve albümün adını girin. Ayrıca görüntülemek istediğiniz MP3’i yüklediğinizden emin olun; Onsuz, döner düğme ve ilerleme bıçakları görünmeyecek. Şimdi temel bilgilere girdikten sonra ses modülünün düzenlenmesine geçebiliriz. Ses oynatıcınızı tutan kutunun arka plan rengini ve opaklığını ayarlamak için Gelişmiş Tasarım Ayarları sekmesini seçin. Yarı saygın beyaz bir renk elde etmek için RGBA değerini (255.255.255.0.5) kullanıyorum. (Nihai değerin “alfa” ve kontrol opaklığını ifade ettiğini unutmayın.) Kendiniz seçtiğiniz özel arka plan rengini seçmek için bir renk ve opaklık kaydırıcısı kullanarak bu değerlerden sapmaktan çekinmeyin. Bazı özel CSS ile ileri adım atmadan önce, tipografi ile oynayalım. Varsayılan yazı tipi, grafik üstü başlığı için biraz sıkıcı görünüyor, bu yüzden Reanie Beenie’yi seçtim, rengi parlak turuncu olacak. (Kullandığım onaltılık değeri #e09900’dür. Aynı şeyi kullanmak istiyorsanız.) Yarı saygın ses modülü kutusunun yuvarlak açısına ulaşmak için özel bir CSS hattı eklememiz gerekir. Ses modülü ayarları penceresinden Özel CSS sekmesini tıklayın ve ana öğe başlıklı parçaya gidin. Buraya yerleştirilen kod tüm ses kutusunu etkileyecektir. Aşağıdaki görüntüleri metnin metnine yapıştırın. Border-Radius: 5 piksel; Ardından, şarkı başlığına yumuşak damla gölgelendirme eklemeliyiz. Özel CSS sekmesinde kalın, Ses başlığı ve CSS CSS başlıklı bölümde aşağı kaydırın: Metin gölgesi: 2px 2px 5px #000; Bu, Turuncu Şarkı başlığımıza siyah bir gölge ekleyecektir. Farklı gölge renkleri kullanmayı tercih ederseniz, CSS görüntülerinin sonundaki onaltılık değerini değiştirmeniz yeterlidir. Her iyi pazarlamacı tarafından bilindiği gibi davranan davet modülünü ayarlayarak, kullanıcılarınızın şarkınızı i-tunes’da indirmesini isterseniz harekete geçmesi için bir davetiye vermek önemlidir. Bu öğreticide, davet modülünü aynı satırda hareket etmek üzere girerek ses çalarımızın altına basit bir CTA indirme düğmesi ekleyeceğiz. İlk olarak, davet modülünün harekete geçmesi için pencere ayarlarını açın ve genel ayarlar sekmesi altında alakalı girin bilgi. Tasarımımızı karıştırmamak için “başlık” alanını boşaltmayı seçtiğimi unutmayın. (Çoğu kullanıcı indirme düğmesini gördüklerinde ne yapacağını bilecektir.) Uygun hedef URL’yi eklediğinizden emin olun; Biri olmadan, düğme görünmez. Temel bilgiler tamamlandıktan sonra, düğmemize birkaç pizzaz eklemek için Gelişmiş Tasarım Ayarları sekmesine geçebilirsiniz. Ayarlamak istediğiniz ilk ayar üst kenardır; Düğmeyi ses oynatıcıya yaklaştırmak için 20 piksel olarak ayarlayın. Oyunculuk davetimiz için davetiyeye başlığı dahil etmeyi seçersek buna ihtiyaç olmayacak, ancak başlık olmadan çok fazla boş alan var. Ardından, “” EVET “düğmesi için özel stili kullanın. Bu, bir dizi ek ayarlamaya izin verecektir. Tabii ki, tekrar kendi renk şemanızı seçmeye davet edildiniz, ancak metnin rengi, sınırları ve simgelerin rengi için hex #e09900 kodunu kullanarak turuncu kullanmaya devam etmeyi seçiyorum. Arka plan için aynı portakal kullanıyorum, ancak opaklığı .3’e indiriyorum. Bu, düğmeye pürüzsüz bir kontrast ekler ve tasarımın duyarlı doğası düğmeyi beyaz boşluğa zorlasa bile okunabilirlik sağlar. Buna ek olarak, yazı tipi boyutunu 14px’e ve sınırın genişliğini 1px’e indiririm, ancak yine de bu Ayar isteğe bağlıdır.
Yarın: Bölüm 3 – Divi Audio Modülünüzü Podcast’e hazır hale getirirsiniz, en son podcast bölümünüzü görüntülemek için mükemmel ses oynatıcıyı nasıl tasarlayacağınızı göstereceğim dizimizin bir sonraki kurulumu için yarın bize katılın. Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
