Ses bölümü nasıl yapılır “Heavy Metal”;Divi Audio Modülü ile Tema Üç Sütun
Bu yazı, Divi ses modüllerini düzenlemenin 5 eğlenceli yolunu başlıklı mini serimizde 5’in 5. bölümüdür. Takip ettiğin için teşekkürler. Divi’nin tasarımının iyiliği ile dolu bir sonraki mini dizimlerimizi dört gözle bekleyin!
Müzik olanlarınız için kişisel web sitenize ses katılımı çok önemlidir. Neyse ki, Divi teması, en son parçalarınızı ziyaretçilerle paylaşmak için verandaya (veya herhangi bir sayfa) ekleyebileceğiniz kolay bir ses modülü ile birlikte gelir. Bugün, en son hitinizi indirmek için ziyaretçileri I-Tunes veya Google Play’e yönlendirmek istiyorsanız, ses oyuncuları için alan, kısa biyografi ve davet düğmesi eylemi içeren üç sütunun “Heavy Metal” ses bölümünü tasarlayacağız.
Bugün ve sonra bugün: Divi Audio Modülü Bu öğretici birçok modül içerdiğinden, önce ses modülüne bağımsız olarak bakmak önemlidir. Bu sadece standart tasarıma dahil olan özellikleri ve meta verileri tanımakla kalmayacak, aynı zamanda çarpıcı tasarımlarımızı karşılaştırmak için yararlı bir standart olarak da işlev görecektir! İşte Divi ses modülünün varsayılan sürümü: Ve bugün inşa edeceğimiz tasarım konsepti bu: Sadece bu tasarımı taklit etmek için aşağıda açıkladığım adımları takip edin. Her zamanki gibi, farklı görüntü varlıklarını kullanmakta özgürsünüz. Bu örnekte, tasarımımı ağır metal kurgu bantları, Harmony’ye dayalı olarak oluşturuyorum.
YouTube Kanalı Konseptimiz ve İlhamımıza abone olan Divi Audio Modülünün temalı üç sütunun “Heavy Metal” bölümünü nasıl yapılır. Zaman zaman doymuş bazı RBG’leri seviyorum, ancak siyah ve beyaz gibi bir şey yok. Tabii ki, korkunç bir estetik uygulayarak renk paletini aşırı aldım. Tasarımınız için atmosferi seçtiğiniz fotoğraf varlığı ile aydınlatın. Tasarım Elemanları Hazırlama Divi’nin varsayılan özelleştirme araçları sayesinde bu tasarım yalnızca bir görüntü varlığı gerektirir: bölümün arka plan görüntüsü. Unplash’ta bulduğum fotoğrafları buradan indirebileceğiniz. Görüntünün yükleme sürenizi sürüklemeden retina cihazında hala iyi görünmesini sağlamak için, boyutunu Photoshop’ta veya diğer görüntü düzenleme yazılımlarında 1920 px kat 1221 piksel olarak değiştirmeyi öneririm. Tasarımı, tasarlamanın tasarımıyla uygulamak Make bugün bant veya herhangi bir türe göre ayarlanabilir. Japon pop grupları için bir site mi oluşturuyorsunuz? Burada kullandığım Hitchcock’tan ilham alan görüntü için komik emojilerle arka planı değiştirmeyi düşünün. Tasarım, diğer ses ortamlarını görüntülemek için de kullanılabilir. Örneğin bir podcast çalıştırırsanız, en son bölümünüzü yükleyin, bir akıllı biyografi yazın ve dava alanında blogunuza bir bağlantı ekleyin. Sonunda, kullanıcılara MP3’ünüzü dinlediklerinde küçük bir bağlam vermek için tasarlanmış çok yönlü bir kavramdır.
Bu tasarımın mimarisi oldukça basit. Bir satır içeren bir kısımdan oluşur. Satırın düzenini, bu öğreticinin başlığından açıkça görülebilecek seçeneklere ayarladığınızdan emin olun! Son olarak, her sütun üç modülden birini barındırır: ses modülü, metin modülü ve harekete geçecek davet modülü. Sipariş sorun değil; Dileklerinize göre ayarlamaktan çekinmeyin.
Parçayı ayarlamak çok kolaydır ve yalnızca arka plan görüntü yüklemelerini içerir. (Burada kullandığım korkunç fotoğrafları bulabilirsiniz, ancak estetiğiniz için daha uygun olanı bulmak için Pexels veya Unplash gibi ücretsiz fotoğrafçılık stok sitelerine de göz atabilirsiniz.) Bölüm ayarlarınızın genel ayarlarında, bilgisayarınızın yerel indirme klasöründen kullanmak istediğiniz fotoğrafı seçin ve yükleyin. Geçerli satır ayarları Bir arka plan setimiz var, şimdi üç sütunu 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 üç modüle girmek için çok fazla alan sağlayacaktır. Ancak, modüle geçmeden önce hatta yapmamız gereken bazı ek ayarlamalar vardır. Gelişmiş Tasarım Ayarları sekmesine gidin ve boş satırın arka planını bırakın, “Sütun Yüksekliklerini Eşitle” e aşağı kaydırın ve düğmeyi “Evet” olarak değiştirin. Boş satırın arka plan rengine izin vermeye karar verdiğimizi hatırlıyor musunuz? Çünkü renk arka planının her sütununu kendisi vereceğiz. Gelişmiş tasarım ayarlarının içinde, her bir sütun 1, 2 ve 3’ün arka plan renk ayarlarını bulana kadar aşağı kaydırın. Gördüğünüz gibi, RGBA değerini (0.0.0, .66) kullanıyorum-Alfa değerinizle ilgili olarak alfa değerini belirleyin. Kurgu grubumun şeytanının doğasını yansıtır. Bu, geliştirmeye çalıştığınız markaya veya estetiğe dayanan farklı bir renk paleti (bir renk tonu ve opaklık kaydırıcısı kullanarak) seçmek isteyebileceğiniz başka bir durumdur. Sütunda yapacağımız son ayar, gelenek altına yerleştirilir. CSS sekmesi. İnce ve yuvarlak bir sütunun açılarını çoğaltmak için, her biri için ana öğenin metnine aşağıdaki CSS yapıştırın (sütun 1’in ana öğesi, sütun 2’nin ana öğesi ve sütun 3’ün ana elemanı). Border-Radius: 5 piksel; Ses Modülü Ayarları Ses modülünü satırımın ilk sütununa girerek başlamayı seçiyorum, ancak istediğ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ı başlıkları, sanatçı adları ve albüm adları gibi ilgili verileri girin.
Ardından, Gelişmiş Tasarım Ayarları sekmesine giderek bazı stiller eklemek istiyoruz. Unutmayın, arka plan rengini seçmek ve içerilen sütun sınırını yuvarlamak gibi satır ayarları altında çeşitli stilleri tamamladık. Burada, arka plan renk ayarından kaçının veya opaklığın 0’da olduğundan emin olun (Sütun arka plan rengine müdahale etmek için hiçbir şey istemiyoruz.) Gördüğünüz gibi, “yayılma faktörü” ni geliştirmek için tipografimi ayarlamaya karar verdim. tasarımımın. Korkunç olan, 31 piksel ölçen zarafetinizle kaplı yazı tipini seçtim, ancak tasarımınız için daha uygun olanı bulmak için kütüphaneye göz atabilirsiniz. Son olarak, Gelişmiş Tasarım Ayarları sekmesinde kalın, etiketli bölümüne gidin “Marjı” gelenek.” Üst marjı 30px’e ayarlayın. Bu, ses çalarınızı sütunun ortasına iter. Metin Modülünü Ayarla Orta sütunda metin modülünü ekleyin. Bu metin alanını kısa bir uyum biyografisi için kullanmayı seçtim, ancak tasarımınızla ilgili herhangi bir içeriği girebilirsiniz. Örneğin podcast bölümünü görüntülerseniz, kısa bir özet yazmak isteyebilirsiniz. Modülü girdikten sonra Metin Modülü Ayarları penceresini açın ve Genel Ayarlar sekmesinin altında görüntülemek istediğiniz metni yazın – veya yapıştırın -. Metin giriş kutusunun üstünde, metin gerekçelerinizi değiştirme seçeneğiniz vardır; Odaklandım. Varsayılan olarak, metninizin sütunun kenarına itildiğini göreceksiniz. Bunu ayarlamak için Gelişmiş Tasarım Ayarları sekmesine gidin ve “Özel Marj” başlıklı bölüme gidin. Üst ve alt kenar boşluklarım için 20 piksel ve sol ve sağ kenar boşluğum için 50 piksel kullanıyorum. Ayrıca, tüm büyük harfleri kullanarak metnimi düzenlemeyi seçtiğimi de göreceksiniz, çünkü bu, heavy metal grubu tarafından yapılacak tasarım seçimi türü gibi görünüyor. Son oyunculuk davet modülünü ayarlayarak, girmemiz gerekiyor Davet modülü, 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 hareket edecek. Genel Ayarlar penceresine kullanmak istediğiniz başlığı girin; “GooglePlay’deyiz” i seçtim. Bununla birlikte, ek alaycı eklemek istediğim için (“Anti -Oluşma Olmamıza rağmen”), mesajımı yazdığım girdi metni alanına biraz daha ileriye kaydırıyorum. Genel Ayarlar sekmesindeyken, düğmenizle bağlantılı olacak URL’yi eklemeyi unutmayın, düğmenin kendisinde görünecek metne ek olarak. Bu bilgiler olmadan, sayfanızda hiçbir düğme görüntülenmez. Daha önce olduğu gibi, arka plan rengini ekleme seçeneğinin seçilmemesini de sağlıyorum.
Tasarım modülü tasarımında, Gelişmiş Tasarım Ayarları sekmesi altında yapmamız gereken bazı ayarlamalar da vardır. İlk olarak, şarkı başlığı için kullandığım yazı tipi başlığını taklit etmeyi seçtim. Sonra, ses modülü gibi, özel marj ekledim: 10px ve üstü. Son olarak, marjı ayarlamak için alandan hemen sonra, “Düğme için özel bir stil kullanın” başlıklı bir bölüm arayın. Seçenekleri “Evet” olarak değiştirdiğinizde ek ayar seçenekleri görünür. CTA düğmesini istediğiniz gibi düzenlemeye davetlisiniz, ancak bir istisna ile varsayılan beyaz yardıma uymaya karar verdim. Grover’da görünmek için özel bir simge – müzik notları – seçtim. Bittiğinde, büyük çalışmanızı görmek için “Kaydet ve Out” tuşuna basın. Şimdi bittikten sonra, üç bölümlü sesli oynatıcı tasarımınızı varsayılan ses modülü ile karşılaştırın ve karşılaştırın ve yalnızca birkaç ayarlama ve CSS’ye dokunabilecek ayarlama seviyesini takdir edin! Ses modülü serisi izlediğiniz için teşekkür ederiz. ! Birkaç öğreticiyi hepinizle paylaşmak eğlencelidir ve gelecekte daha fazla paylaşmayı umuyorum. Pazartesi gününden itibaren bir sonraki divi mini dizimlerimizi dört gözle bekleyin. Bu, Divi Post Slider modülündeki zarif temalar blogu John Donnellon için diğer yeni katkıda bulunanlar tarafından. İçinde beş popüler blog yazısı kaydırıcı tasarımları alacak ve divi ile nasıl geri yapılacağını gösterecek! 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!
