Video Modülü Divi ile İnanılmaz Bir Izgara Düzeni Nasıl Yapılır (Bölüm 4)
Mini dizilerimizde 5’in 4’ünü göndermeye hoş geldiniz Divi video modülü ile nasıl inanılmaz bir ızgara düzeni yapılır. Bu seride, Divi Visual Builder’ı kullanarak başından beri inanılmaz bir ızgara düzeni oluşturma konusunda size rehberlik edeceğiz. Ve bunun çok karmaşık olduğundan endişeleniyorsanız, tekrar düşünün! Tüm bu düzenler ek kod olmadan görsel bir oluşturucu kullanılarak yapılabilir ve düzenlenebilir.
Umarım şimdiye kadar ızgara düzeninin tadını çıkarırsınız. Bugünün düzeni seride 4 numara ve bu benim favorilerimden biri (ve uygulanacak en hızlı). Sadece Divi kullanılarak yapılacak kolay (ve eğlenceli) değil, aynı zamanda sitenizin renk şemasına uyacak şekilde de ayarlanabilir. Arka plan gradyan seçeneği, bu tasarımın, diyagonal çizgi ile ayrılmış iki ton rengi yapmak için kullanılan ana özelliğidir. Aralık ayrıca videoların hissetmesini kolaylaştırmayı da amaçlamaktadır. Tartışıldığında, bu tasarım genellikle “ızgara” dediğimiz şeyin kapsamı dışında olabilir, ancak bence potansiyeli göreceksiniz.
İşte başlıyoruz. Bir video modülü ve bazı özel arka plan öğeleri kullanarak bu kafes tasarımını yapmanın ne kadar kolay olduğunu göstereceğim. Bu son sonuç gibi görünecek Konseptim ve ilham kaynağım, öğreticiler veya kurslar gibi şeyler için kullanılacak küçük bir video koleksiyonunu düzenleyen iyi ve temiz bir düzen arıyor. Bu, arka plan gradyanıyla oynama dürtüsel arzumla birleştirildi, bununla dışarı çıkıyorum. Umarım beğenmişsindir. Başlayalım. YouTube kanalımıza divi aboneliğimizle tasarımı uygulamak
İlk olarak, tam geniş bir yapıya (1 sütun) normal kısmı ekleyin. Ardından metin modülünü sütuna ekleyin. Bu, sayfa bölümü için bir başlık veya başlık olarak işlev görecektir. Metin ayarlarını aşağıdaki gibi güncelleyin: İçerik İçerik seçeneği: [Başlık için metni girin] Renk Tasarımı Metin Seçimi: Metin Yazı Tipi Yazı Tipi: Arimo Metin Yazı Tipi Boyut: 56px Metin Mektubu Aralığı: 1px Hat Metin Yüksekliği: 1EM Ayarları kaydedin, hiçbir şey göremiyorsunuz çünkü beyaz arka plana sahip beyaz bir metniniz var, ama sorun değil. Devam edelim ve parçamızın arka plan gradyanını ekleyelim. Bölüm ayarlarını açın ve içerik bölümünün altında aşağıdaki seçenekleri güncelleyin: Gradyan Renk Arka Plan: #121212, #FFFFFF Gradyan Türü: Doğrusal Gradyan Yönü: 198 derece Başlangıç Pozisyonu:% 45 Nihai Pozisyon:% 45
Ardından, aşağıdaki gibi eklediğiniz satır için satır ayarlarını güncelleyin: Tasarım Seçenekleri Bu çizgiyi tam genişlik yapın: evet Özel olukların genişliğini kullanın: GAPID genişliği: 4 Eşit Sütun Yüksekliği: Evet Özel Dolgu:% 1 Üst,% 5% 5 Sağ,% 5 aşağıda,% 5 kaldı Ayarları Kaydet Şimdi doğrudan yaptığınız satırın altına yapı (2 sütun) ile başka bir satır ekleyin. Ardından, video modülünü sol sütuna ekleyin. Video ayarlarını aşağıdaki gibi güncelleyin: Video İçeriği Seçeneği MP4/URL: [Video URL’nizi girin] URL Exanse Resim: [URL görüntüsü Hamparan’ı girin]
Sonraki ayarları kaydedin, sadece iki kez yaptığınız video modülünü kopyalayın (veya kopyalayın) ve iki yinelenen videoyu sağ sütunda birikecek şekilde sürükleyin (veya yapıştırın). Video içeriğini doğru URL ve kapak görüntüsünü ekleyecek şekilde güncelleyin. Lütfen ve sağ sütundaki iki video modülünün altına bir bulanıklık modülü ekleyin. Bu, bu ızgarada bir video açıklaması olarak işlev görebilir. Blurb ayarlarının yeni ayarları aşağıdaki gibi: İçerik Seçeneği Başlık: [Başlık Enter] İçerik: [İçerik veya Açıklama Gir] Metin Renk Tasarım Seçenekleri: Işık Ayarları Kaydet şimdi şu şekilde oluşturduğunuz videoları depolayan satırlar için satır ayarlarını düzenleyin: gradyan renk içeriği seçeneği Arka plan: #4999c1, #121212 Gradyan Türü: Doğrusal Gradyan Yönü: 198 Derece Başlangıç Konum:% 45 Son Pozisyon:% 45%
Tasarım Seçenekleri Bu çizgiyi tam genişlik oluşturun: Evet Özel Oluklar Genişliği Kullanın: Evet Oluklar Genişliği: 4 Eşit Sütun Yüksekliği: Evet Özel Dolgu:% 5 Üst,% 5 Sağ,% 5 Alt,% 5 Sol
Büyük! İlk bölümü tamamlarsınız. Neredeyse bitirdik. Şimdiye kadar gelişimini görün. Bir sonraki bölümü oluşturmak için, yinelenen düğme bölümünü tıklayarak yaptığınız tüm parçaları çoğaltın .. Yeni bölüm ayarlarını aşağıdaki gibi güncelleyin: Arka plan gradyanı renk içeriği seçenekleri: #ffffff, #121212 (Bu renkler parçaların ilk sırasında zıttır) Ardından, yinelenen bölümdeki metin modülünün ayarlarını aşağıdakilerle güncelleyin: Metin Renk Tasarım Seçenekleri: #333333 Ayarları Kaydet Bu bölümü tamamlamak için, videonuzu içeren satır ayarlarını aşağıdakilerle güncelleyin: gradyan renk içeriği seçeneği Arka plan: #121212, #4999C1 (temel olarak renk sırasını değiştirirsiniz, böylece dizinin ilk bölüme aykırı olması) Ayarları Kaydet Şimdi ikinci kısmı ekledikten sonra sonuçlara bakalım … Fark etmediyseniz, bu iki parçayı yaptığımız için kolayca daha fazla parça eklemeye devam edebilirsiniz. Sadece iyi bir boyut için bir parça daha yapalım. Parçamızın arka plan rengi altta siyah olduğu için, bir sonraki kısmı üstte siyah bir arka plan rengi ile başlatmak istiyoruz. Bu, üstteki ilk kısmı çoğaltmamız ve ikinci bölümün altındaki sayfanın altına sürüklememiz gerektiği anlamına gelir. Bu, sayfalarda tasarım sürekliliğini korur. İşte üçüncü bölüm eklendikten sonra görünüm: İşte bu! Herşey bitti. Duyarlı mı? Bu düzen aslında herhangi bir değişiklik yapmadan bir cep telefonunda daha iyi görünüyor. Bir bakayım! Daha fazla özelleştirme Bu kafes düzenini birkaç parça ile oluşturduktan sonra, bir sonraki projenizin temasına uyacak şekilde rengi değiştirmenin ne kadar kolay olduğunu görebilirsiniz. Gereken tek şey, parça ve satır için arka plan gradyanının rengini değiştirmektir. Daha fazla tasarımı değiştirmek istiyorsanız, arkasındaki arka planı ortaya çıkarmak için gradyan rengine yarı transparans eklemenizi öneririm. Ya da gradyan renklerinden birinden kurtulmaya çalışın ve neye benzediğini görün. İşte sadece bir gradyan rengiyle neler yapılabileceğine dair bazı örnekler … Sol sütundaki ızgaraya bir video kaydırıcı modülü de ekleyebilirsiniz.Gelecek … Sırada bu serideki son video ızgaramızın düzeni. Bu, pürüzsüz bir çerçeveleme elemanı ile her şeyi iyi ve temiz tutma veya her videoyu öne çıkarmak için renkleri benzersiz bir şekilde kullanma seçeneği sunar.
