“Tons N 'Shades “: Divi Ses Modülü Tasarım Egzersizi
Bu yazı, divi ses modüllerini düzenlemenin 5 eğlenceli yolunu başlıklı mini serimizde 5’in 4. bölümünde yer alıyor. 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 ayrı bir ekran tasarımı yapacağız: bir taraf ses modülünü barındıracak, diğer taraf ise işiniz için kritik övgüleri paylaşabileceğiniz referans modülünü barındıracak. Tasarımın adı -tintin n ‘Shades – basit opaklık ayarlarını kullanarak yapacağımız ince kontrasttan. Bu temiz tasarımı çoğaltmak için aşağıda tarif ettiğim öğreticiyi izleyin. Aşağıdaki yorumlar bölümünde geri bildirim bıraktığınızdan emin olun!
Bugün ve sonra bugün: Tasarımcı olarak Divi Audio modülü, son ürününüzün yapı taşını anlamak her zaman önemlidir. Bu nedenle, temel ses modülünü varsayılan divi stiliyle kontrol ederek başlayacağız. İşte Divi ses modülünün varsayılan sürümü: Ve bugün inşa edeceğimiz tasarım konsepti bu: Gördüğünüz gibi, tasarım temamı Oz Sihirbazı için yumuşak bir figür kullanarak Spectrum adlı bir kurgu grubunun etrafında seçtim. Tasarım varlıklarımı (örneğin arka plan fotoğrafları) kendi markanızı çeken varlıklarla değiştirebilirsiniz.
YouTube kanalımıza bir başlık aboneliği olarak yayınlama başlığı, birkaç web sitesinin kavramı ve ilhamı, pop-up’lar ve dinvigasyon için çok rahatsız edici olabilecek harekete geçecek davet düğmesi ile doludur. Bu tasarım için, geniş bir minimalist kavramla estetiğe karşı isyan etmek istiyorum ve sayfanın en önemli unsurlarını nefes almak için çok fazla alan bırakıyorum. Awan imajı, ferahlığı iletmek için doğal bir seçimdir. Bir güven tasarım öğesi hazırlamak ya da değil, bu tasarım yalnızca bir görüntü varlığı gerektirir – iki renk ekranı olmasına rağmen. Unsplash’tan bulutların fotoğraflarını indirdim – iyi bir dengeye sahip fotoğraflar ve oldukça homojen bir bulut koleksiyonu. Burada bulabilirsiniz. Biraz azaltmayı öneririm; Unplash, her zaman açılış süresini yavaşlatan çok yüksek çözünürlüklü bir fotoğraf sağlar. Görüntünün retina cihazında hala iyi görünmesini sağlamak için, photoshop veya diğer görüntü düzenleme yazılımında boyutu 1920 px kat 1310 px’e düşürmenizi öneririm. Tasarımı bu tasarım divi ile uygulamak çok çok yönlüdür; Görüntüler ve tipografide bazı değişikliklerle, sakin bulut manzarasından saniyeler içinde çılgın EDM sıçrama sayfasına geçebilirsiniz. Dahil edilmesi gereken anahtar öğe ses modülüdür – böylece MP3 oynayabilirsiniz – ve referans modülü, böylece kitleniz geri bildirimlerini web sitenize ziyaretçilerle paylaşabilirsiniz. Bu tasarımın mimarisi oldukça basit. İki eşit parçaya bölünmüş bir satır içeren bir kısımdan oluşur. Hat, ses ve referans modüllerimiz için bir kap haline geldi.
Bölüm Ayarları Şimdi tasarımınızı derledikten sonra, her bileşeni ayarlamaya başlamak isteyeceksiniz. Bir arka plan fotoğrafı yükleyerek bölümün ayarlarıyla başlayın. (Burada kullandığım bulut fotoğraflarını bulabilirsiniz, ancak markanız için daha uygun bir şey bulmak için Pexels veya Unllash gibi ücretsiz stok fotoğrafçılık sitelerine de göz atabilirsiniz.) Bölümün Ayarlar penceresindeki Genel Ayarlar sekmesinde, Bilgisayarınızın yerel indirme klasöründen kullanmak ve yüklemek istediğiniz fotoğraf. Ardından, hala Genel Ayarlar sekmesinde, özel bir dolgu giriş kutusu bulana kadar aşağı kaydırın. Her birini 0px olarak ayarlayın. Bu, bitmiş üründe gördüğünüz tam ekran etkisini elde etmeye yardımcı olacaktır. Artık bir arka plan setimiz olduğuna göre, şimdi ayrı sütun satırını ayarlama zamanı. Satır Ayarları penceresini açarak başlayın. Genel Ayarlar sekmesinin altında, “Bu Hattı Geniş Ol” ın yanındaki düğmeyi “Evet” olarak değiştirin. Bu, çizgimizin görünüm alanımızın uzunluğunu genişletmesine izin vererek bize ses ve referans modüllerimize girmek için çok fazla alan sağlayacaktır.
Ardından, “Talang” adlı iki sütun arasındaki boşluğu silmek istiyoruz. Bunu yapmak için, “Özel oluğun genişliğini kullanın” yanındaki kaymayı evet olarak değiştirin. Ardından, düğmenin altındaki bir kaydırma kullanarak değeri 0px olarak ayarlayın. Son olarak, bu bölümde olduğu gibi, özel dolgu giriş kutusuna gidin ve her birini 0px olarak ayarlayın. Bu bir kez daha tam ekran tasarımına ulaşmamıza yardımcı olacaktır.
Ardından, daha fazla ayarlama için Gelişmiş Tasarım Ayarları sekmesine gidin. Özel marj alanlarından başlayarak, üst ve alt kenar boşluklarını 0px olarak ayarlayın. Şimdi, “Sütun Yüksekliklerini Eşitle” başlıklı bölüme gidin ve kaydırıcıları “Evet” olarak değiştirin. Son olarak, tasarımımızdan aynı bileşenleri eklemenin zamanı geldi: renk ve gölge. İlk sütunun arka plan rengini RBGA değerleri (12,12,12,12,0.34) ile koyu gri olarak ayarlayarak başlayacağız. Tabii ki, bir ton ve opaklık kullanarak kendi kombinasyonunuzu – hatta rengi – seçebilirsiniz. Ayrıca, sütun 2 için arka plan rengine gidin. Bu, tasarımımızın “Renk” kısmı olacaktır. RGBA değerini kullanıyorum (255.255,255.0.7). Kaydet ve Çıkın – ve Modül Ayarlarına! Ses Modülü Ayarları Ses modülümüzü ayarlayarak başlayalım. Sol sütuna koymayı seçtim, ancak sağ tarafa da koyabilirsiniz. (Modül cep telefonuna istiflenecektir.) Ses modülü ayarları penceresindeki genel ayarlar sekmesi altında, mp3 yüklemeniz (onsuz, kontrol oynatıcınız görünmeyecek) ve ilgili ayrıntıları yazın: şarkı başlıkları, sanatçı adları ve albüm adları .
Ardından, Gelişmiş Tasarım Ayarları sekmesine gidin ve arka plan renk setiniz olmadığından emin olun; Daha önce ayarladığımız sütun arka plan renginin dikkatin merkezi haline gelmesini sağlamak istiyoruz. Ayrıca tipografinizi ayarlamak için bu fırsata katılın. Grubunuzun estetiğini yakalayan bir yazı tipi seçin; Eğlenceli ve oldukça garip olduğu için kurnaz kızları seçtim. Son olarak, Gelişmiş Tasarım Ayarları sekmesinin altına kaydırın ve ses modülünüzü 20 piksel üzerinde verin. Son tanıklık modülünü ayarlayın, referans modülünü satırlarımızın başka bir sütununa girmemiz gerekir. Referans Modül Ayarları penceresini açarak başlayın ve Genel Ayarlar sekmesi altında uygun metin düzlemini doldurun. Sadece adını, şirketi ve eleştirmenlerin rolünü vermeyi seçtim, ancak profil resimlerini yüklemekten ve harici bir web sitesine bağlantı eklemekten çekinmeyin.
Ardından, Gelişmiş Tasarım Ayarları’na tıklayın. Pencerenin altına gidin ve her özel marjı 50 piksel olarak ayarlayın. Bu, referans modülümüzde nefes almak için birkaç odaya içerik sağlayacaktır.
En son gelişmeler için, Özel CSS sekmesine gidin ve referans bölümünün altında aşağıdakileri ekleyin: yazı tipi ailesi: “Pacifico”;Bu isteğe bağlı bir adımdır, ancak eleştirmen adını değiştirmek iyi bir ayrıntı olduğunu düşünüyorum.Pacifico’yu seçtim, ancak istediğiniz yazı tiplerini değiştirebilirsiniz;Yazı tipi adını yukarıdaki kod snippet’indeki tırnak işaretine yapıştırmanız yeterlidir.Kaydet ve Çıkın – ve Voila!En son şarkılarınızı paylaşmak için mükemmel olan ayrı ve ferah ayrı bir ekran tasarımı yaptınız. Bio grubu, müzik çalar ve indir düğmesi için bir oda!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!
