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

Divi'nin Video Modülü ile Çarpıcı Izgara Düzenleri Nasıl Oluşturulur mini dizimizdeki 4/5 yayınına hoş geldiniz. Bu dizide, 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.

Umarım şu ana kadar ızgara düzenlerini beğeniyorsunuzdur. Bugünkü düzen seride 4 numara ve benim favorilerimden biri (ve uygulaması en hızlısı). Divi kullanarak oluşturmak sadece kolay (ve eğlenceli) olmakla kalmaz, aynı zamanda sitenizin renk düzenine uyacak şekilde özelleştirilebilir. Arka plan gradyan seçenekleri, çapraz bir çizgiyle ayrılmış iki ton rengi oluşturmak için kullanılan bu tasarımın ana özelliğidir. Boşluk, videoların kolayca algılanmasını sağlamak için de amaçlıdır. Muhtemelen, bu tasarım normalde “ızgara” dediğimiz şeyin kapsamı dışında kalabilir, ancak bence potansiyeli göreceksiniz.

İşte başlıyoruz. Video modülünü ve birkaç özel arka plan öğesini kullanarak bu ızgara tasarımını oluşturmanın ne kadar kolay olduğunu size göstereceğim.

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

Konsept ve İlham

Öğreticiler veya kurslar gibi şeyler için kullanılacak küçük video gruplarını organize eden güzel ve temiz bir düzen arıyordum. Bu, arka plan gradyanları ile oynamak için dürtüsel hevesimle birleştiğinde, bununla çıktım. Umarım beğenmişsindir.

Başlayalım.

Tasarımı Divi ile Uygulamak

Youtube Kanalımıza Abone Olun

İlk olarak, tam genişlikte (1 sütunlu) yapıya sahip normal bir bölüm ekleyin.

Ardından sütuna bir Metin Modülü ekleyin . Bu, sayfanın bölümü için bir başlık veya başlık görevi görecektir.

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

İçerik Seçenekleri
İçerik: [başlık için metin girin]

Tasarım Seçenekleri

Metin Rengi: Açık
Metin Yazı Tipi: Arimo
Metin Yazı Tipi Boyutu: 56px
Metin Harf Aralığı: 1px
Metin Satır Yüksekliği: 1em

Ayarları kaydet

Beyaz bir arka plan üzerinde beyaz bir metniniz olduğu için henüz hiçbir şey göremeyeceksiniz ama sorun değil. Devam edelim ve bölüm arka plan gradyanımızı ekleyelim. Bölüm Ayarlarına gidin ve İçerik Bölümü altında aşağıdaki seçenekleri güncelleyin:

Arka Plan Degrade Renkleri: #121212, #ffffff
Gradyan Türü: Doğrusal
Gradyan Yönü: 198deg
Başlangıç ​​Konumu: %45
Bitiş Konumu: %45

Ardından, az önce eklediğiniz satır için Satır Ayarlarını aşağıdaki gibi güncelleyin:

Tasarım Seçenekleri

Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 4
Sütun Yüksekliklerini Eşitle: EVET
Özel Dolgu: %1 Üst, %5 Sağ, %5 Alt, %5 Sol

Ayarları kaydet

Şimdi, az önce oluşturduğunuz satırın hemen altına ⅔ ⅓ (2 sütun) yapısına sahip başka bir satır 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: [videonuzun URL'sini girin]
Resim Yerleşimi URL'si: [yer paylaşımlı resim URL'sini girin]

Ayarları kaydet

Ardından, az önce oluşturduğunuz video modülünü iki kez çoğaltın (veya kopyalayın) ve yinelenen iki videoyu sağ sütunda yığılmaları için sürükleyin (veya yapıştırın).

Videoların içeriğini doğru URL'leri ve kapak resimlerini içerecek şekilde güncelleyin.

Devam edin ve sağ sütundaki iki video modülünün altına bir Bulanıklık Modülü ekleyin. Bu, bu kılavuzdaki videoların bir açıklaması olarak hizmet edebilir.

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

İçerik Seçenekleri

Başlık: [başlığı girin]
İçerik: [içerik veya açıklama girin]

Tasarım Seçenekleri

Metin Rengi: Açık

Ayarları kaydet

Şimdi, az önce oluşturduğunuz videoları tutan satır için Satır Ayarlarını aşağıdaki gibi düzenleyin:

İçerik Seçenekleri

Arka Plan Degrade Renkleri: #4999c1, #121212
Gradyan Türü: Doğrusal
Gradyan Yönü: 198deg
Başlangıç ​​Konumu: %45
Bitiş Konumu: %45

Tasarım Seçenekleri

Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 4
Sütun Yüksekliklerini Eşitle: EVET
Özel Dolgu: %5 Üst, %5 Sağ, %5 Alt, %5 Sol

Harika! İlk bölümü bitirdin. Neredeyse bitirdik. Şimdiye kadarki ilerlemeye göz atın.

Bir sonraki bölümü oluşturmak için, oluşturduğunuz bölümün tamamını, bölümü çoğalt düğmesine tıklayarak çoğaltın..

Yeni bölüm ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Arka Plan Gradyan Renkleri: #ffffff, #121212 (bu renkler ilk bölümün tersi sıradadır)

Ardından, kopyalanan bölümdeki Metin Modülü Ayarlarını aşağıdakilerle güncelleyin:

Tasarım Seçenekleri

Metin Metin Rengi: #333333

Ayarları kaydet

Bu bölümü tamamlamak için videolarınızı içeren Satır Ayarlarını aşağıdakilerle güncelleyin:

İçerik Seçenekleri

Arka Plan Gradyan Renkleri: #121212, #4999c1 (temelde renklerin sırasını değiştiriyorsunuz, böylece ilk bölümün tersi sırada olacaklar)

Ayarları kaydet

Şimdi ikinci bölümü ekledikten sonra çıkan sonuca bakalım…

Henüz fark etmediyseniz, bu iki bölümü zaten oluşturduğumuz için kolayca daha fazla bölüm eklemeye devam edebilirsiniz. Sadece iyi ölçmek için bir bölüm daha oluşturalım. Bölüm arka plan rengimiz altta siyah olduğu için bir sonraki bölüme üstte siyah arka plan rengi ile başlamak istiyoruz. Bu, üstteki ilk bölümü çoğaltmamız ve ikinci bölümün altındaki sayfanın altına sürüklememiz gerektiği anlamına gelir. Bu, sayfa boyunca tasarımın sürekliliğini sağlar.

Üçüncü bölüm eklendikten sonra şöyle görünüyor:

Bu kadar! Herşey bitti.

Duyarlı mı?

Bu düzen aslında herhangi bir değişiklik yapılmadan mobilde daha da iyi görünüyor. Bunu kontrol et!

Daha Fazla Özelleştirme

Bu ızgara düzenini birden çok bölümle oluşturduktan sonra, renkleri bir sonraki projenizin temasına uyacak şekilde değiştirmenin ne kadar kolay olacağını muhtemelen fark etmişsinizdir. Tek gereken, bölümler ve satırlar için arka plan gradyan renklerini değiştirmek.

Tasarımda daha fazla değişiklik yapmak isterseniz, degrade renklere yarı saydamlık ekleyerek arkalarındaki arka planı ortaya çıkarmanızı öneririm. Veya degrade renklerden birinden tamamen kurtulmayı deneyin ve neye benzediğini görün. İşte sadece bir degrade rengi değiştirmenin neler yapabileceğine dair birkaç örnek…

Sol sütundaki kılavuza bir Video Kaydırıcı Modülü de ekleyebilirsiniz.

Geliyor…

Sıradaki, serideki son video ızgara düzenimiz. Bu, size ince çerçeveleme öğeleriyle her şeyi güzel ve temiz tutma veya her videoyu öne çıkarmak için renkleri benzersiz bir şekilde kullanma seçeneği sunar.

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

Eğlence!