Video Modülü Divi ile İnanılmaz Bir Izgara Düzeni Nasıl Yapılır (Bölüm 2)
Mini dizilerimizde 5’in 2’sini Divi video modülü ile nasıl inanılmaz bir ızgara düzeni yapacağımızı memnuniyetle karşılayın. 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.
Bu serinin 2. bölümüne ulaşmayı başardık! Ve söylemeliyim ki bu düzeni inşa etmekten gerçekten hoşlanıyorum. Bugün, ürün sayfası özelliğine veya yön sayfasına benzeyen videonuz için nasıl bir kutu düzeni yapacağınızı göstereceğim. Bu düzen, iki sütunun her birinde uygun olan bir video ve açıklama içeren her satır içeren 1/2 1/2 satır sütunundan oluşur. Ardından bir sonraki bölüm video dizisini ve açıklamayı soldan sağa ve sonra sağdan sola değiştirir. Her satır sayfanın tam genişliğini uzattığından ve her sütun aynı dikey yüksekliği koruduğundan, düzen tüm ekran boyutlarında çarpıcı görünüyor.
Videonun bitişiğindeki başlık ve açıklamanın bir parçası olarak çalışmak üzere video ve açıklama modülleri eklemek için bir video modülü kullanacağım. Bu serideki tüm düzenler gibi, bu da divi kullanarak uygulanması çok kolaydır. Bu son sonuç gibi görünecek Kavramlar ve İlham Bu kavram yeni değil. Aslında kullanıcılarla yakınlık nedeniyle bu düzeni yapmak için ilham aldım. Birçok web sitesi, ürün veya hizmet özelliklerini görüntülemek için benzer düzenler kullanır. Bu, benim görüşüme göre, video için metin ve çarpıcı görüntüler için büyük bir negatif alan yaratan daha geniş bir içerik alanı sağlar. Bu, ürün özelliklerini tanıtmak için video kullanan şirketler için mükemmel olacak, ancak diğer birçok kullanımına sahip olacak. Umarım bu tasarımı bir sonraki projeniz için kullanırsınız. Başlayalım. Tasarımı Divi ile ilk YouTube kanalımıza uygularken, 1/2 1/2 (2 sütun) yapısı ile sıradan bir parça ekleyin.
Ardından video modülünü sol sütuna ekleyin. Video ayarlarını aşağıdaki gibi güncelleyin: MP4/URL Video İçeriği Seçeneği: [Video için URL’yi girin] URL Explipny Resim: [Videonuz için özel resimler yükleyin veya videodan otomatik olarak resim oluşturun] Renk Döndürme Tasarım Seçimi Icon: RGBA (255,255,255.0.87) Sonraki ayarları kaydedin Blurb modülünü doğrudan yaptığınız video modülüyle sınırlayan sağ sütuna ekleyin. Blurb ayarlarını aşağıdaki gibi güncelleyin: İçerik Seçenek: Başlık: [Video başlığını girin] İçerik: [Video Açıklama girin] Bağlantı: [İsterseniz başka bir sayfaya URL bağlantısını girebilirsiniz] Icon: evet simge: [seçin simge] Tasarım Seçenekleri: #666666 Metin Renk: Işık Metin Oryantasyonu: Merkez Terdic Yazı Tipi: Roboto Havlu Yazı Tipi Boyut: 52PX Başlık Mektup Alanı: 1px Vücut Yazı Tipi: Açık SANS Gövde Yasağı Boyutu: 20PX Vücut Metin Rengi: Deskolunda Özel Padding Masaüstünde Özel :% 5 üst (bunu açıklamanızdaki metin miktarına bağlı olarak ayarlamanız gerekebilir) Tabletler ve akıllı telefonlardaki özel dolgu: 20px üst, 20px daha düşük oops gelişmiş animasyon görüntüsü/simge: sağa sağ (bu animasyon birleştirilir Ok simgesiyle soldaki videoya daha fazla dikkat çekin. Devam etmeden önce ayarları kaydedin, devam edin ve arka plan görüntüsünüzü kendi tarafınıza ekleyin. Bölüm ayarlarını açın (mavi alan) ve aşağıdakileri güncelleyin: İçerik seçeneği: Arka plan görüntüsü: [Arka plan görüntüsünü girin (I Am 2000 x 2200)] Paralax efekti kullanın: Evet Paralax Yöntemi: Trux Paralax Tasarım Seçenekleri: Pilding Custom: 0px üst, 0px aşağıda Sonraki Ayarları Kaydet Aşağıdaki güncellemelerle satır ayarlarını düzenleyin: Sütun İçeriği Seçenek 2 Renk Arka Plan: RGBA (0.0,0,0.0.69) Tasarım Seçenekleri Bu çizgiyi tam genişlik oluşturun: Evet Özel Gutch genişliği kullanın: Evet Talang Genişliği: 1 Eşit Sütun Yüksekliği: Evet Özel Dolgu: 0px üst, 0px Alt Özel Kesme: 0px üst, 0px Alt Sütun 1 Özel Dolgu: 0px üst, 0px Aşağıda Sütun 2 Dolgu Özel: 0px üst, 0px aşağıda
Şimdi işler olmaya başlıyor. Arka plan görüntüsünüz var ve ilk satırınızı yaptınız. Şimdi çizgiyi çoğaltmaya hazırsınız. Visual Maker’daki satır menü çubuğundaki kopya simgesini tıklayın.
Yeni çoğalttığınız yeni satırda, video modülünü sağ sütuna sürükleyin ve modül açıklamasını sol sütuna sürükleyin. Artık video modülü içeriğini yeni bir video URL ve yeni kapak resmi içerecek şekilde güncellemeniz gerekir. Bulanıklık modülü için, videonuza uygun başlığı ve içeriği güncellemeniz gerekir. Ayrıca, açıklama simgesini sağa giden bir okla (benim yaptığımla aynı simgeyi kullanırsanız) ve görüntüleri/animasyonlu simgeleri “soldan sağa” olarak değiştirmeniz gerekir. Sonra yinelenen satır ayarlarını güncellememiz gerekir Önce sütunun arka planını ayarlamak için. Aşağıdaki satır ayarlarını açın ve içerik sekmesinin altındaki güncelleme: Sütun 1 Arka Plan Rengi: RGBA (0.0,0,0,0.69) Sütun 2 Renk Arka Plan: Yok Biraz ilerleme kaydettik. Şimdi ilk iki satırımızın ne olduğunu görelim …Sonraki iki satır için çoğaltma işlemini tekrarlayın ve içeriği güncelleyin. Ne kadar çok satırınız varsa, parçanın arka plan görüntüsünün, içeriğin uzunluğunu karşılamak için germeniz gerektiğini unutmayın. Bu örnek için toplam dört satıra kadar iki satır daha ekledim. Sonuç’a bakın. Önceki karanlık video ızgara tasarımını parlak bir sürüme dönüştürmek için hafif bir sürüm yapmak, tek yapmanız gereken bazı tasarım seçeneklerini güncellemek. Bu düzenleme için, çerçeve görüntü ekranını kullanmak biraz daha kolay olabilir. Bölüm ayarlarını aşağıdaki gibi güncelleyin: Arka Plan Görüntüsü İçeriği seçeneği: [Parlak arka plan resmi girin] İlk satır ayarlarını aşağıdaki gibi güncelleyin: Sütun İçeriği Seçenek 2 Renk Arka Plan: RGBA (255,255,255.0.68) İlk satır bulanık modül ayarlarını aşağıdaki gibi güncelleyin: Renk Tasarım Seçenekleri: #333333 Renk Metin: Koyu Renkli Metin Şirketi: #4444444 Gövde yazı tipi: Roboto Renk Metni Gövde Metin: #6666666Baru Ayarlar Ayarlar İkinci Satır: Sütun İçeriği Seçenek 1 Renk Arka Plan : RGBA (255,255,255.0.45) İlk satırda bulanık modül tasarımını kopyalamak ve ikinci sıradaki bulanıklık modülüne takmak için sağ -tıklayın seçeneğini kullanın. İşte burada! Sonuç’a bakın. Duyarlı mı? Bu, daha küçük ekran boyutlarındaki davranış açısından biraz karmaşıktır. Varsayılan düzenleme sırası sol sütunu sağ sütunun üzerine yerleştirdiğinden, bu düzenin sonucu biraz kafa karıştırıcıdır. Divi sütun birikiminin sırasını nasıl değiştireceğiniz konusundaki önceki yazımda bu sorunun nasıl düzeltileceğini öğrenebilirsiniz. Gelecek … bir sonraki ızgara sizi şaşırtacak. Yarı saygın arka planın rengi ve gradyanı, tasarımı kendi sitenize eşleştirmeyi çok kolaylaştırır. Önizlemeye göz atın … Umarım şimdiye kadar diziyi beğenirsiniz. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
