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

Divi'nin Video Modülü ile Çarpıcı Izgara Düzenleri Nasıl Oluşturulur mini dizimizdeki 3 / 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 3. bölümüne hoş geldiniz! Bunun seni biraz şaşırtacağını hissediyorum. Bugün size yarı saydam arka plan renklerinin ve degradelerin birden çok kenarlık rengi varyasyonu oluşturmak için nasıl kullanılacağını göstereceğim. Sonunda size sadece birkaç tıklamayla renk düzenini nasıl tamamen değiştirebileceğinizi göstereceğim. Bu düzen, iki adet 1/4 1/2 1/4 sütun yapı satırının ve bir 1/4 1/4 1/4 1/4 sütun yapı satırının birleşiminden oluşur.

Videoları eklemek için video modülünü ve ızgaranın ortasında bir başlık ve açıklama bölümü olarak hizmet edecek tanıtım modülünü kullanacağım. Bu serideki tüm düzenler gibi, bunun da Divi kullanılarak uygulanması kolaydır.

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

Konsept ve İlham

Aslında orijinal düzen fikri, popüler site giphy.com'dan, orta sütunda daha küçük giflerle çevrili daha büyük özellikli bir gif sergileme biçiminden geldi. Bu fikrin bir video ızgara düzeni için iyi çalışacağını düşündüm çünkü bu, onu çevreleyen diğer videolarla birlikte daha büyük bir videoyu öne çıkarmanıza olanak tanır. Ancak, çevreleyen giphy görüntülerinin duvar stili umurumda değildi, bu yüzden bu gönderi için her şeyi daha simetrik hale getirmek için çift sütun yaklaşımıyla gittim.

Düzenin yanı sıra, benzersiz bir şey yaratmak için Divi'nin yarı şeffaf arka plan özelliklerini biraz daha keşfetmek istedim.

Başlayalım.

Tasarımı Divi ile Uygulamak

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

Ardından, ilk 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]

Ayarları kaydet

Ardından, doğrudan Video Modülünün altına bir Bölücü Modül ekleyin.

Bölücü Ayarları altında, , ayırıcının yüksekliğini 20'ye ayarlayın.

Artık çok sayıda video ekleyeceğimiz için, yeni oluşturulan video modülünü çoğaltmayı ve doğru noktalara sürüklemeyi daha kolay buluyorum. Sonra geri dönüp video URL'sini değiştirebilir ve daha sonra resimleri kapatabilirim.

Öncelikle az önce oluşturduğunuz video modülünü çoğaltalım ve ilk sütundaki bölücü modülün altına sürükleyelim.

Bundan sonra, ilk sütun öğelerini (video, ayırıcı ve video) çoğaltmaya devam edebilir ve bunları en sağdaki sütuna sürükleyebilirsiniz. Ardından video modüllerinden birini çoğaltabilir ve ortadaki sütuna sürükleyebilirsiniz. Tüm video içeriğini güncelledikten sonra, buna benzeyen bir şeye sahip olmalısınız…

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

İçerik Seçenekleri

Arka Plan Rengi: #333333

Tasarım Seçenekleri:

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

Ayarları kaydet

Şimdi, aşağıdaki güncellemelerle Satır Ayarlarınızı düzenleyin:

İçerik Seçenekleri:

Arka Plan Degrade Renkleri: rgba(255,255,255,0.58) ve #b684e8
Gradyan Yönü: 360deg
Sütun 1 Arka Plan Rengi: rgba(0,0,0,0.69)
Sütun 2 Arka Plan Rengi: rgba(255,255,255,0.45)
Sütun 1 Arka Plan Rengi: rgba(0,0,0,0.85)

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: 20px Üst, 20px Sağ, 20px Alt, 20px Sol
Sütun 2 Özel Dolgu: 20px Üst, 20px Sağ, 20px Alt, 20px Sol
Sütun 3 Özel Dolgu: 20px Üst, 20px Sağ, 20px Alt, 20px Sol

Ayarları kaydet

Şimdi ikinci satırı ekleme zamanı. Devam edin ve ilkinin altına başka bir 1/4 1/2 1/4 (3 sütunlu) yapı satırı ekleyin.

Satır Ayarları seçeneklerini ayarlama konusunda kendinize bir başlangıç ​​yapmak için, ilk satırın stilini kopyalamak için sağ tıklama işlevini kullanın ve ikinci satıra yapıştırın.

Şimdi, satır ayarlarınız için güncellemeniz gereken tek şey aşağıdaki gibi İçerik seçenekleridir :

Arka Plan Gradyanı: yok (kopyalananı silin)
Sütun 1 Arka Plan Rengi: rgba(0,0,0,0.69)
Sütun 2 Arka Plan Rengi: rgba(0,0,0,0.0) – bu, yok veya saydam ile aynıdır
Sütun 3 Arka Plan Rengi: rgba(0,0,0,0.35)

Artık satır ayarlarınız tamamlandı, devam edin ve bir video modülünü çoğaltın ve ilk (en solda) ve ayrıca üçüncü satırda (en sağda) sürükleyin (veya kopyalayıp yapıştırın). Ardından video içeriğini güncelleyin.

Orta sütun için bir tanıtıcı modül ekleyin ve ayarları aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Başlık: [sayfanın veya videonun başlığını girin]
İçerik: [videonun veya sayfanın içeriğini veya açıklamasını girin]

Tasarım Seçenekleri

Metin Rengi: Açık
Metin Yönü: Merkez
Başlık Yazı Tipi: PT Sans
Başlık Yazı Tipi Boyutu: 52px
Başlık Harf Aralığı: 1px
Gövde Yazı Tipi: PT Sans
Gövde Yazı Tipi Boyutu: 20px

Şimdi nihayet son sıranın zamanı geldi. Elbette, gerekirse daha fazlasını ekleyebilirsiniz.

Devam edin ve önceki satırın altına 1/4 1/4 1/4 1/4 (4 sütunlu) yapı satırı ekleyin.

Daha önce yaptığınız gibi, önceki satırın tasarımını kopyalayın ve tasarıma biraz daha hızlı başlamanız için mevcut satıra yapıştırın.

Ardından satır ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Sütun 1 Arka Plan Rengi: rgba(0,0,0,0.34)
Sütun 2 Arka Plan Rengi: rgba(0,0,0,0.69)
Sütun 3 Arka Plan Rengi: rgba(0,0,0,0.34)
Sütun 4 Arka Plan Rengi: rgba(0,0,0,0.69)

Tasarım Seçenekleri

Sütun 4 Özel Dolgu: 20px 20px 20px 20px

Ayarları kaydet

Ardından, dört sütunun her birine bir video modülünü çoğaltın veya kopyalayın. Tüm video içeriğinizi güncelledikten sonra işiniz bitti!

Yeni ızgara düzeninize göz atın…

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.

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

İçerik Seçenekleri:

Arka Plan Rengi: rgba(0,0,0,0.12)

Tüm Satır Ayarlarını aşağıdaki gibi güncelleyin:

Temel olarak üç satır ayarının her birine geri dönün ve bir arka plan renginin kullanıldığını gördüğünüz her yerde beyaz renk paleti seçeneğini tıklamanız yeterlidir. Bu, tüm koyu yarı saydam koyu arka planları yarı saydam açık arka planlara dönüştürecektir.

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

Tasarım Seçenekleri

Metin Rengi: Koyu

Bu yapacak! Hafif versiyonu kontrol edin.

Kesit Arka Planı Seçenekleriyle Tasarımı Kolayca Değiştirin

Izgara yarı saydam arka planlarla oluşturulduğundan, sitenize sitenize mükemmel şekilde uyan yeni bir görünüm ve his vermek için bölümün arka plan rengini, gradyanını veya görüntüsünü kolayca değiştirebilirsiniz.

Bölüm ayarlarına bir arka plan resmi ekleyerek yaratabileceği farka bakın.

Sitenizi eşleştirmenin bir başka yolu da ilk satıra eklediğimiz arka plan gradyanının renklerini eşleştirmektir.

Geliyor…

Bu serideki bir sonraki gönderi tamamen farklı bir his olacak. Bu, her şeyi temiz ve basit tutmakla ilgilidir. Ve birkaç arka plan degrade hilesi.

O zamana kadar, yorumlarda sizden haber almak için sabırsızlanıyorum.

Eğlence!