Divi'nin Video Modülü ile Çarpıcı Izgara Düzenleri Nasıl Oluşturulur (Bölüm 2)

Divi'nin Video Modülü ile Çarpıcı Izgara Düzenleri Nasıl Oluşturulur adlı mini dizimizdeki 2 / 5 gönderisine hoş geldiniz. Bu seride, Divi Visual Builder'ı kullanarak sıfırdan harika ızgara düzenlerinin nasıl oluşturulacağı konusunda size yol göstereceğiz. Ve bunun çok karmaşık olmasından endişeleniyorsanız, tekrar düşünün! Tüm bu düzenler ek kod olmadan Visual Builder kullanılarak oluşturulabilir ve stillendirilebilir.

Serinin 2. bölümüne geldik! Ve bu düzenleri inşa etmekten gerçekten zevk aldığımı söylemeliyim. Bugün size videolarınız için bir ürün sayfasının veya bir açılış sayfasının özellik bölümüne benzeyen bir ızgara düzeninin nasıl oluşturulacağını göstereceğim. Bu düzen, her satırda bir video ve iki sütunun her birinde buna karşılık gelen açıklama içeren 1/2 1/2 sütun satırı dizisinden oluşur. Ardından bir sonraki bölüm, videonun ve açıklamanın sırasını soldan sağa ve ardından sağdan sola değiştirir. Satırların her biri sayfanın tüm genişliği boyunca uzandığından ve sütunların her biri aynı dikey yüksekliği koruduğundan, düzen tüm ekran boyutlarında çarpıcı görünür.

Videoları eklemek için video modülünü ve videoya bitişik bir başlık ve açıklama bölümü olarak hizmet etmek için tanıtım modülünü kullanacağım. Bu serideki tüm düzenler gibi, bunun da Divi kullanılarak uygulanması şaşırtıcı derecede kolaydır.

İşte Nihai Sonuç Böyle Görünecek

Konsept ve İlham

Bu kavram hiçbir şekilde yeni değildir. Aslında, kullanıcılara aşina olduğu için bu düzeni oluşturmak için ilham aldım. Birçok web sitesi, ürünleri veya hizmetleri için özellikleri sergilemek için benzer bir düzen kullanır. Metin için büyük negatif alan ve video için çarpıcı görüntüler oluşturduğunu düşündüğüm daha büyük içerik alanlarına izin veriyor.

Bu, ürün özelliklerini tanıtmak için video kullanan ancak başka birçok kullanımı da olan bir şirket için mükemmel olurdu. Umarım bir sonraki projenizde bu tasarımdan faydalanırsınız.

Başlayalım.

Tasarımı Divi ile Uygulamak

Youtube Kanalımıza Abone Olun

İlk olarak, 1/2 1/2 (2 sütunlu) yapıya sahip normal bir bölüm ekleyin.

Ardından sol sütuna bir Video Modülü ekleyin.

Video Ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Video MP4/URL: [video için URL girin]
Resim Yerleşimi URL'si: [videonuz için özel bir resim yükleyin veya videodan otomatik olarak bir tane oluşturun]

Tasarım Seçenekleri

Simge Rengini Oynat: rgba(255,255,255,0.87)

Ayarları kaydet

Ardından, az önce oluşturduğunuz Video Modülünün hemen bitişiğindeki sağ sütuna bir Blurb Modülü ekleyin.

Bulanıklık Ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri:

Başlık: [videonun başlığını girin]
İçerik: [videonun açıklamasını girin]
Bağlantı: [isterseniz bağlantı url'sini başka bir sayfaya girebilirsiniz]
Simgeyi Kullan: EVET
Simge: [simge seçin]

Tasarım Seçenekleri:

Simge Rengi: #666666
Metin Rengi: Açık
Metin Yönü: Merkez
Başlık Yazı Tipi: Roboto
Başlık Yazı Tipi Boyutu: 52px
Başlık Harf Aralığı: 1px
Gövde Yazı Tipi: Açık Sans
Gövde Yazı Tipi Boyutu: 20px
Gövde Metni Rengi: #dddddd
Masaüstünde Özel Dolgu: %5 Üst (açıklamanızdaki metin miktarına bağlı olarak bunu ayarlamanız gerekebilir)
Tablet ve Akıllı Telefonda Özel Dolgu: 20px Üst, 20px Alt

Gelişmiş seçenekler

Görüntü/Simge Animasyonu: Sağdan Sola (ok simgesiyle birlikte bu animasyon, soldaki videoya daha fazla dikkat çekecektir.

Ayarları kaydet

Devam etmeden önce, devam edin ve arka plan resminizi bölümünüze ekleyin. Bölüm ayarlarına (mavi alan) gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri:

Arka Plan Resmi: [bir arka plan resmi girin (benimki 2000 x 2200)]

Paralaks Etkisini Kullan: EVET
Paralaks Yöntemi: Gerçek Paralaks

Tasarım Seçenekleri:

Özel Dolgu: 0px Üst, 0px Alt

Ayarları kaydet
Ardından, aşağıdaki güncellemelerle satır ayarlarını düzenleyin:

İçerik Seçenekleri

Sütun 2 Arka Plan Rengi: rgba(0,0,0,0.69)

Tasarım Seçenekleri

Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET
Özel Dolgu: 0px Üst, 0px Alt
Özel Kenar Boşluğu: 0px Üst, 0px Alt
Sütun 1 Özel Dolgu: 0px Üst, 0px Alt
Sütun 2 Özel Dolgu: 0px Üst, 0px Alt

Artık işler yoluna girmeye başlıyor. Arka plan resminiz var ve ilk sıranızı oluşturdunuz. Artık bu satırı çoğaltmaya hazırsınız. Görsel oluşturucu içindeki satır menü çubuğundaki kopya simgesine tıklayın.

Az önce çoğalttığınız yeni satırda, video modülünü sağ sütuna ve tanıtım modülünü sol sütuna sürükleyin.

Şimdi sadece video modülünün içeriğini yeni video URL'sini ve yeni kapak resmini içerecek şekilde güncellemeniz gerekiyor. Blurb Modülü için videonuza karşılık gelen başlığı ve içeriği güncellemeniz gerekecektir. Ayrıca, tanıtım yazısı simgesini sağa işaret eden bir oka ayarlamanız (benim yaptığım aynı simgeyi kullandıysanız) ve Görüntü/Simge Animasyonunu “Soldan Sağa” olarak değiştirmeniz gerekecektir.

Ardından, ilk sütunun arka planını ayarlamak için çoğaltılan satır ayarlarını güncellememiz gerekiyor. Satır ayarlarına gidin ve İçerik sekmesi altında aşağıdakileri güncelleyin:

Sütun 1 Arka Plan Rengi: rgba(0,0,0,0.69)
Sütun 2 Arka Plan Rengi: yok

Biraz ilerleme kaydediyoruz. Şimdi ilk iki sıramızın nasıl göründüğüne bakalım…

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, bölüm arka plan resminizin içeriğin uzunluğuna uyum sağlamak için o kadar uzun olması gerektiğini unutmayın.

Bu örnek için iki satır daha ekleyerek toplam dört satır ekledim. Nihai sonucu kontrol edin.

Hafif Sürümü Oluşturma

Önceki karanlık video ızgarası tasarımını hafif bir sürüme değiştirmek için tek yapmanız gereken tasarım seçeneklerinden birkaçını güncellemek.

Bu düzenlemeler için tel kafes görünümünü kullanmak biraz daha kolay olabilir.

Bölüm Ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Arka Plan Resmi: [açık renkli bir arka plan resmi girin]

İlk Satır Ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Sütun 2 Arka Plan Rengi: rgba(255,255,255,0.68)

İlk satır Blurb Module Settings'i aşağıdaki gibi güncelleyin:

Tasarım Seçenekleri

Simge Rengi: #333333
Metin Rengi: Koyu
Başlık Metni Rengi: #444444
Gövde Yazı Tipi: Roboto
Gövde Metni Rengi: #666666

İkinci Satır Ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Sütun 1 Arka Plan Rengi: rgba(255,255,255,0.45)

İlk satırdaki tanıtım yazısı modülünün tasarımını kopyalamak için sağ tıklama seçeneklerini kullanın ve ikinci satırdaki tanıtım yazısı modülüne yapıştırın.

Bu kadar! Nihai sonucu kontrol edin.

Duyarlı mı?

Bu, daha küçük ekran boyutlarında nasıl davrandığına gelince biraz zor. Varsayılan yığınlama sırası, sol sütunu sağ sütunun üstüne koyduğundan, bu yerleşimin sonucu biraz kafa karıştırıcıdır. Bu sorunu nasıl çözeceğinizi, Divi'nin sütun yığınlama sırasını nasıl değiştireceğinizle ilgili önceki yazımdan öğrenebilirsiniz.

Geliyor…

Bir sonraki ızgara sizi şaşırtacak. Yarı saydam arka plan renkleri ve gradyanlar, tasarımın kendi sitenize uymasını çok kolaylaştırır. Önizlemeye bakın…

Umarım şu ana kadar diziden memnunsunuzdur. Yorumlarda sizden haber bekliyorum.

Şerefe!