Video Modülü Divi ile İnanılmaz Bir Izgara Düzeni Nasıl Yapılır (Bölüm 3)
Divi video modülü ile inanılmaz bir ızgara düzeni nasıl yapılır mini dizilerimizde 5’in 3’ünü göndermeye hoş geldiniz. 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 3. Bölümüne hoş geldiniz! Bunun sizi biraz şaşırtacağını hissediyorum. Bugün, sınır renklerinin bazı varyasyonlarını yapmak için arka plan rengini ve yarı saydam gradyanı nasıl kullanacağınızı göstereceğim. Sonunda, Renk Şemasını sadece birkaç tıklamayla nasıl tam olarak değiştirebileceğinizi göstereceğim. Bu düzen, iki sıra sütun yapısı 1/4 1/2 1/4 ve sütun yapısı 1/4 1/4 1/4 1/4 kombinasyonundan oluşur.
Izgaranın ortasındaki başlık ve açıklamanın bir parçası olarak çalışmak için video ve açıklama modülleri eklemek için bir video modülü kullanacağım. Bu serideki tüm düzenler gibi, bu düzenin divi kullanarak uygulanması da kolaydır. Bu son sonuç gibi görünecek Gerçek konsept ve ilham, orijinal düzen fikri, daha küçük GIF’lerle çevrili orta sütunda daha büyük bir özellik GIF sergileme yolundan popüler site giphy.com sitesinden geliyor. Bence bu fikir video ızgarasının düzeni için iyi çalışacak çünkü bu, etrafındaki diğer videolarla daha büyük bir video görüntülemenizi sağlayacaktır. Bununla birlikte, Giphy’nin etrafındaki görüntülerinin taş stilini umursamıyorum, bu yüzden bu yazı için, her şeyi daha simetrik hale getirmek için eşit bir sütun yaklaşımı kullanıyorum. Düzenin yanı sıra, yarı şeffafın arka plan yeteneklerini keşfetmek istiyorum. Özel bir şey yaratmak için divi biraz daha. Başlayalım. Tasarımı ilk divi ile uygularken, normal kısmı 1/4 1/2 1/4 (2 sütun) yapısıyla ekleyin.
Ardından video modülünü ilk 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] Ayarları kaydedin, ardından bölücü modülünü doğrudan video modülünün altına ekleyin. Bölücü ayarlarında, <StrongTab seçenekleri altında 20. yüksek bölücüyü ayarlayın. Şimdi birçok video ekleyeceğimiz için, yeni yapılmış ve doğru yere sürüklenen video modülünü çoğaltmayı daha kolay buluyorum. Sonra video URL’sini geri döndürebilir ve değiştirebilirim ve daha sonra resmi kapsayabilirim. İlk olarak, yeni oluşturduğunuz video modülünü ilk sütunda bölücü modülünün altına sürükleyelim. Bundan sonra ilk sütun öğesini (video, bölücü ve video) çoğaltmaya devam edebilir ve en sağ sütuna sürükleyebilirsiniz. Ardından video modüllerinden birini çoğaltabilir ve orta sütuna sürükleyebilirsiniz. Tüm video içeriğini güncelledikten sonra, böyle görünen bir şeyiniz olacak … Devam etmeden önce, devam edin ve arka plan renginizi satır bölümünüze ve sütununuza ekleyin. Bölüm ayarlarını (mavi alan) açın ve aşağıdakileri güncelleyin: Arka Plan Rengi İçeriği seçeneği: #333333 Tasarım Seçenekleri: Pilding Custom: 0px üst, 0px aşağıda Ayarları Kaydet Şimdi satır ayarlarınızı aşağıdaki güncellemelerle düzenleyin: İçerik Seçenek: Degrade Renk Arka Plan: RGBA (255,255,255,0.58) ve #B684E8 gradyan yönü: 360 Derece Sütun 1 Renk Arka Plan: RGBA (0.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 çizgiyi tam genişlik yapın: Evet Özel Talang Genişliği Kullanın: Evet Talang Genişliği: 1 Eşit Sütun Yüksekliği: Evet Özel Dolgu: 0px Top, 0px Alt Alt Özel Kesme: 0px Top, 0px Alt Sütun 1 Dolgu Özel: 20px üst, 20px sağ, 20px Alt, 20px Sol Sütun 2 Özel Dolgu: 20px üst, 20px sağ, 20px alt, 20px Sol Sütun 3 Dolgu Özel: 20px üst, 20px sağ, 20px alt, 20px Sol Ayarları kaydedin Şimdi ikinci bir satır ekleme zamanı. Devam edin ve 1/4 1/2 1/4 (3-sütun) yapı sıraları ekleyin.
Satır ayarları seçeneğini hazırlamada kendinize başlamak için, ilk satır stilini kopyalamak ve ikinci satıra eklemek için sağ tıklamanın işlevselliğini kullanın.
Şimdi, satır ayarlarınız için, güncellemeniz gereken şey aşağıdaki gibi içerik seçeneğidir: Arka plan gradyanı: Hayır (kopyalanan silin) Sütun 1 Arka Plan Rengi: RGBA (0,0,0,0.0.69) Sütun 2 Renk Arka plan: RGBA (0,0,0,0.0.0) – Bu, NO veya Şeffaf Sütun 3 ile aynıdır Arka Plan Rengi: RGBA (0,0,0,0.0.35) Şimdi satır ayarlarınız tamamlandıktan, devam ettikten ve devam ettikten sonra Video modülünü ilk video modülüne (en solda) ve ayrıca üçüncü sırada (en sağda) yinelenen ve sürükleyin (veya kopyalayın ve yapıştırın). Ardından video içeriğini güncelleyin.
Orta sütun için açıklama modülünü ekleyin ve ayarları aşağıdaki gibi güncelleyin: İçerik seçeneği Başlık: [Sayfayı veya videoyu girin] İçerik: [İçerik veya Video Açıklama veya sayfa girin] Renk Tasarımı Metni Seçimi: Işık Yönlendirme Metni: Orta Yazı Tipi Başlığı: PT SANS Yazı Tipi Boyut Font Tajuk: 52px Aralık Başlık Mektubu: 1px Vücut Font: PT SANS Gövde Yazı Tipi Boyutu: 20px Şimdi nihayet zaman son satır için. Tabii ki, gerekirse daha fazlasını ekleyebilirsiniz. Önceki satır altında 1/4 1/4 1/4 1/4 1/4 (4-sütun) yapı sıraları ekleyin.Daha önce yaptığınız gibi, önceki satır tasarımını kopyalayın ve tasarıma biraz başlamak için geçerli satıra yapıştırın. Ardından satır ayarlarını aşağıdaki gibi güncelleyin: sütun içeriği seçeneği 1 Renk Arka Plan: RGBA (0,0,0,0,34) Sütun 2 Renk Arka Plan: RGBA (0,0,0,0.69) Sütun 3 Renk Arka Plan: RGBA (0 0 , 0.0,0.34) Sütun 4 Arka Plan Rengi: RGBA (0.0,0,0.0.69) Sütun Tasarımı Seçimi 4 Dolgu Özel: 20px 20px 20px 20px Set ayarlarını kaydedin ve video modülünü dört sütunun her birine kopyalayın. Tüm video içeriğini güncelledikten sonra bitti! Yeni kafes düzeninizi görü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 yapın, tek yapmanız gereken bazı tasarım seçeneklerini güncellemek. Bölüm ayarlarını aşağıdaki gibi güncelleyin: İçerik Seçenek: Arka Plan Rengi: RGBA (0.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 dönün ve kullanılan arka plan rengini gördüğünüz her yerde, sadece tıklayın Beyaz Palet seçeneği. Bu, tüm karanlık yarı saydam koyu arka planları yarı şeffaf parlak bir arka plana dönüştürecektir.
Blurb Modül ayarlarını aşağıdaki gibi güncelleyin: Renk Tasarımı Metni Seçimi: Karanlık İşe Çalışacaktır! Işık versiyonuna bakın. Tasarımı arka plan seçeneği ile kolayca değiştirin, ızgara yarı saydam bir arka planla yapıldığından, sitenize yeni bir görünüm ve his vermek için parçanın, gradyan veya görüntünün arka plan rengini kolayca değiştirebilirsiniz. alan. Bölümün ayarlarına arka plan görüntüleri ekleyerek yapılabilecek farklılıklara bakın.
Sitenize uymanın bir başka yolu da, ilk satırda eklediğimiz arka plan gradyanının rengiyle eşleşmektir. Gelecek … Bu serinin bir sonraki yazı tamamen farklı bir nüans olacak. Bu, her şeyi temiz ve basit tutmakla ilgilidir. Ve bazı arka plan gradyan hileleri.
