Divi ile Benzersiz Çerçeve Tasarımları Oluşturmak için Yeniden Kullanılabilir Bir Düzen

Divi ile satırlarınız için benzersiz çerçeve tasarımları oluşturmak, sayfa içeriğinizi yaratıcı bir şekilde sahneye koymanın kullanışlı (ve eğlenceli) bir yolu olabilir. Divi'nin bölüm ayırıcılarını kompakt satır yapısıyla birleştirerek, içeriğinizi çerçevelemek için sayısız tasarım olasılığını keşfedebilirsiniz. Bu tekniği daha önceki eğitimlerde veya önceden hazırlanmış bazı düzenlerimizde görmüş olabilirsiniz. Ancak bugün size bu tasarım tekniğini keşfetmenin kolay bir yolunu göstereceğimi düşündüm. Bu eğitimde, kitaplığınıza kaydedilebilecek yeniden kullanılabilir bir bölüm düzenini nasıl hızlı bir şekilde oluşturacağınızı göstereceğim. Ardından, yeni çerçeve tasarımlarını ve renk şemalarını keşfetmek için bu düzeni kullanabilirsiniz. Düzen, sıranızı benzersiz bir tasarımla çerçeveleyerek çalışır, böylece tüm sütun yapıları ve modüller sıra içinde kullanılabilir.

Başlayalım.

Yeniden Kullanılabilir Çerçeve Tasarım Düzeni Oluşturma

Başlamak için, tek sütun düzenine sahip yeni bir bölüm oluşturalım. Bu noktada herhangi bir modül eklememize gerek yok. Bunun yerine, önce satırımızı ve bölümümüzü tasarlayacağız, böylece satırımızı daha sonra istediğimiz herhangi bir içerikle doldurabiliriz.

Satırı Tasarla

Satır ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #333333
Satır Hizalama: Merkez
Özel Genişlik: 775px
Oluk Genişliği: 2
Özel Dolgu: 130px Üst, 130px Alt, 50px Sol, 50px Sağ
Özel Kenar Boşluğu: 0px Üst, 0px Alt

Bölümü Tasarla

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

Arka Plan Rengi: #ffffff
Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: #ffffff
Alt Bölücü Stili: ekran görüntüsüne bakın
Alt Bölücü Rengi: #ffffff

Ardından, üst ve alt dolguyu 0 piksele ayarlayacak ve aşağıdaki gibi bir kenarlık kullanarak bir miktar üst ve alt boşluk oluşturacaksınız:

Özel Dolgu: 0px Üst, 0px Alt
Üst Kenar Genişliği: 5vw
Üst kenarlık Rengi: #ffffff
Alt Kenar Genişliği: 5vw
Alt Kenarlık rengi: #ffffff

Üst ve alt kenarlık kullanarak bölüm için boşluk oluşturmak, satırla örtüşecek bölüm ayırıcı için mevcut alanı en üst düzeye çıkaracaktır. Bu şekilde tasarımınız için herhangi bir bölücü yüksekliğini seçebilirsiniz.

Düzeni Kitaplığınıza Kaydedin

Çerçeveli sıra tasarımınızın temel yerleşim yapısı için bu kadar. Bu noktada, bölüm düzenini gelecekteki tasarımlarda kullanmak için bu bölümü Divi kütüphanesine kaydetmek istiyoruz.

Bölüm menüsünde Kitaplığa Kaydet simgesine tıklayın.

Ardından düzen için bir ad girin (“Satır Çerçeve Düzeni” gibi bir şey) ve Kitaplığa Kaydet düğmesini tıklayın.

Çerçeve Tasarımını Tamamlama #1

Artık bölüm düzenimizi gelecekteki çalışmalar için kaydettik, ilk tasarım örneğini tamamlamak için satırımıza biraz içerik ekleyelim.

Sütun Yapısını Değiştirme

Bu tasarım için altı sütunlu bir resim galerisi eklemenin güzel olacağını düşünüyorum. Küçük sütun yapısı, dar satırın içinde güzel bir şekilde çerçevelenen küçük bir resim kümesi oluşturmamıza olanak tanır.

Bunu yapmak için önce satır yapısını altı sütun düzenine değiştirin.

Satıra İçerik Ekleme

Ardından, her sütuna üç görüntü modülü (görüntülerle birlikte) ekleyin. Farklı boyutlara/boyutlara sahip daha çok dikey yönelimli (manzara yerine) görüntüler kullanıyorum.

İşte son tasarım.

Bonus Tasarım İpucu

Daha fazla çerçeveleme tasarım olasılığını keşfetmeye devam etmeden önce, çerçevenizi sayfanın bir tarafına genişletmek için kolay bir numaraya dikkat çekmek istedim. Bunu yapmak için bölüm ayarlarına gidin ve aşağıdaki gibi bir arka plan gradyanı ekleyin:

Arka Plan Gradyanı Sol renk: #333333
Arka Plan Gradyanı Sağ Renk: #ffffff
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %0

Bu tasarımı inceleyin.

Farklı Çerçeve Tasarımları ve İçeriği için Düzeni Özelleştirme

Bu basit düzenin heyecan verici olasılıkları, en azından söylemek gerekirse, sayısızdır. Renk düzenini, bölücü stilini, sütun düzenini ve modül içeriğini özelleştirerek her türden farklı düzen tasarımı oluşturabilirsiniz. Ayrıca, birkaç tıklamayla yaygın renk şeması değişiklikleri yapmak için "Bul ve Değiştir" gibi harika Divi özelliklerini kullanabilirsiniz.

Düzeni güncellemek için temel süreç:

1. Kaydedilmiş Bölüm Düzenini sayfaya yükleyin
2. “Bul ve Değiştir” seçeneğini kullanarak bölümün renk şemasını güncelleyin.
3. Bölücü Stilini Değiştir
4. Satırı yeni bir arka plan ve sütun yapısıyla özelleştirin.
5. Sütunlarınıza Modüller ekleyin

Bu süreçle yeni tasarımları keşfetmek oldukça eğlenceli olmalı! Devam edelim.

Çerçeve Tasarımı #2

Bir sonraki tasarım için, daha önce oluşturduğumuz kayıtlı bölüm düzenini kullanacağız. Bunu yapmak için görsel oluşturucuya yeni bir bölüm eklemek için tıklayın. Ardından Kitaplıktan Ekle sekmesini seçin ve listeden bölüm düzenine tıklayın.

Artık yeni bir tasarım için bölümü özelleştirmeye hazırız.

Bu düzen için kullanılan renk şemasını değiştirmek için Bul ve Değiştir özelliğini kullanarak bazı Divi tasarım güçlerini toplayabiliriz. Kopyalanan bölümün bölüm ayarlarına gidin ve arka plan rengine sağ tıklayın ve Bul ve Değiştir'i seçin.

Bul ve Değiştir kipinde aşağıdakileri güncelleyin:

İçinde: Bu Bölüm
Şununla Değiştir: #443850
Tümünü Değiştir'i seçin

Bu, bölüm arka planı, kenarlık ve ayırıcılar için kullanılan beyaz rengi yeni bir renkle değiştirecektir.

Şimdi bölüm ayarlarını yeni bir bölücü stiliyle güncelleyin:

Ardından, satırın yeni çerçeve tasarımını tamamlamak için satır ayarlarını beyaz bir arka plan rengiyle ve bir kutu gölgesiyle güncelleyin.

İçerik için, bazı tanıtım yazıları ile beş sütunlu bir düzen deneyelim. Devam edin ve satırınız için sütun düzenini beş sütun düzenine güncelleyin.

Ardından, ilk sütuna bir tanıtım yazısı ekleyin. Varsayılan içerik metnini çıkarın ve yalnızca Başlık metnini bırakın. Ardından, tanıtıcı resmi bir yıldız simgesiyle değiştirin. Tasarım ayarlarını aşağıdaki gibi güncelleyin:

Simge Rengi: #7d8491
Simge Yazı tipi boyutu: 80px
Metin Yönü: Merkez

Tanımlama modülünü çoğaltın ve ayarları aşağıdaki gibi güncelleyin:

Simge Rengi: #8cd845
Simge Yazı Tipi Boyutu: 50px

Şimdi çoğaltın veya bu iki modülü kopyalayıp her sütunda üç modül bulunan beş sütununuz boyunca bir desene yapıştırın.

İşte son tasarım.

Çerçeve Tasarımı #3

Üçüncü çerçeve tasarımı için, daha önce ikinci tasarım için yaptığımız gibi, kayıtlı kesit düzenimizi yüklememiz gerekiyor.

Bundan sonra, bölüm arka planı, ayırıcı ve kenarlık için kullanılan beyaz rengi güzel bir mavi renkle değiştirmek için (önceki tasarımda yaptığımız gibi) bölüm arka plan renginde bul ve değiştir'i kullanabiliriz. Bunu yapmak için bölüm ayarlarına gidin, arka plan rengine sağ tıklayın ve bul ve değiştir'i seçin. Ardından aşağıdakileri güncelleyin:

İçinde: Bu Bölüm
Şununla Değiştir: #1e3888
Tümünü Değiştir'i seçin

Ardından bölüm ayırıcıyı yeni bir üst ve alt ayırıcı stiliyle (bulutlar) güncelleyin:

Ardından, satır ayarlarına gidin. Satıra aşağıdaki gibi bir gradyan arka planı verin:

Arka Plan Gradyanı Sol Renk: varsayılan (#2b87da)
Arka Plan Gradyanı Sağ Renk: #1E3888 (bölüm arka planıyla aynı renk)
Gradyan Türü: Radyal (satıra yuvarlak “bulut benzeri” bir his vermek için)
Bitiş Konumu: %83 (sıra kenarlarını biraz gizlemek için)

Şimdi tek yapmamız gereken çerçeveli satırımıza biraz içerik eklemek. Satıra bir Harekete Geçirici Mesaj Modülü ekleyelim ve ayarları aşağıdaki gibi güncelleyelim:

Düğmeyi göstermek için bağlantı giriş kutusuna “#” ekleyin
Arka Plan Rengini Kullan: HAYIR

Başlık Metin Rengi: #ffc338
Düğme Metin Rengi: #ffc338

İşte son tasarım.

Peki ya Mobil?

Merak etmen durumunda. İşte tasarımların mobil cihazlarda nasıl görüneceği.

Son düşünceler

Bu eğitimde oluşturulan çerçeve tasarımları, tamamen parlak tasarım parçalarını sergilemek yerine tasarım olanaklarını vurgulamayı amaçlamaktadır. Bu nedenle çerçeve tasarımlarına ağırlık verdim ve içeriğin temel örneklerini kullandım. Umarım, en azından farklı bölüm ayırıcılar, renk şemaları ve içerikle oynayarak yeni tasarımları keşfetmeniz için size ilham verirler.

yorumlarda sizden haber bekliyorum.

Şerefe!