Benzersiz Tasarım Öğeleri Oluşturmak için Divi'de Boş Bölümler Nasıl Kullanılır

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, benzersiz tasarım öğeleri oluşturmak için Divi'deki boş bölümleri nasıl kullanacağınızı göstereceğiz. Bu boş bölümleri Kuyumcu Düzen Paketi'nin açılış sayfasında kullanacağız. Ancak, bu boş bölümleri Divi's Visual Builder'ı kullanarak oluşturduğunuz herhangi bir düzen paketine veya web sitesine ekleyebilirsiniz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, oluşturacağımız tasarım öğelerine bir göz atalım:

Yaklaşmak

• Diğer bölümlerin ayarlarını değiştirmek zorunda kalmadan benzersiz tasarım öğeleri oluşturmak için boş bölümler kullanıyoruz
• Bölüm bölücülerimize, önceki ve sonraki bölümün bölüm arka plan rengiyle aynı rengi veriyoruz, bu durumda beyaz
• Yeni bölümümüzün arka plan rengi olarak renk paletimizden bir rengi yeniden kullanıyoruz
• Farklı tasarımlar oluşturmak için üst ve alt kısım için farklı bölüm ayırıcıları birleştiriyoruz
• Modüller olmadan, bir bölüm masaüstünde düzgün görünmeyecek ve tablet ve telefonda hiç görünmeyecektir.
• Bu yüzden boş bırakmak yerine boş bir bölüm yanılsaması yaratıyoruz.
• Görünmez bir karaktere sahip bir Metin Modülü eklemek hile yapacak
• Yeni bölümlerimiz bağımsız olacak, yani önceki veya sonraki bölümü etkilemeden marjla da oynayabiliriz.
• Bu tasarımı, üzerinde çalıştığınız herhangi bir sayfaya veya düzen paketine uygulayabilirsiniz.
• Bu eğitimde yeniden oluşturacağımız dört örnek, Kuyumcu Düzen Paketi için harika
• Bununla birlikte, diğer bölüm ayırıcıları kullanabilir ve diğer yerleşim paketleriyle denemeler yapabilirsiniz.

Genel Adımlar

Yeni Standart Bölüm Ekle

Örneklerin her birini ayrı ayrı ele almadan önce, genel adımların üzerinden geçeceğiz. Bu, bir örneğe başlamadan önce bu adımlardan geçmeniz gerektiği anlamına gelir. Genel adımlar, örneklerin her biri için aynıdır. Divi's Jeweler Layout Pack'i kullanarak sayfalarınızdan birine yeni bir standart bölüm ekleyerek başlayın. Örnekler için açılış sayfasını kullandık.

Bölüme Arka Plan Rengi Ekle

Ardından, bu bölümün arka plan rengi olarak '#f2e3de' ekleyin.

Tek Sütunlu Satır Ekle

Sırada bir sütun bulunan bir satır ekleyin.

Görünmez Karakterli Metin Modülü Ekle

Ve görünmez bir karaktere sahip bir Metin Modülü ekleyerek bitirin. Bu yazının yaklaşımında belirtildiği gibi, bir bölümü tamamen boş bırakamayız. Bunu yapmak, bölümün tablet ve telefonda kaybolmasına neden olur. Bu yüzden bölümü, görünmez bir karakter kullanarak içerik olduğunu düşünmeleri için kandıracağız. ALT tuşunu basılı tutup sayısal tuş takımınızla 0160 yazarak görünmez bir karakter ekleyebilirsiniz. Veya tırnak işaretleri arasına basitçe şu karakteri kopyalayabilirsiniz: ' '.

1. Bölüm Oluştur

Bölüme Sol ve Sağ Kenar Boşluğu Ekle

Şimdi bölüme aşağıdaki özel kenar boşluğunu ekleyerek ilk örneği oluşturmaya başlayalım:

• Üst Kenar Boşluğu: 200px (Masaüstü), 100px (Tablet), 50px (Telefon)
• Alt Kenar Boşluğu: 200px (Masaüstü), 100(Tablet), 50px (Telefon)

Yuvarlatılmış Köşeler Ekle

Sonraki Kenarlık ayarlarını açın ve sol üst ve sağ üst köşeye '100px' ekleyin.

Alt Bölücü Ekle

Son olarak, bölümünüze aşağıdaki alt ayırıcıyı ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Beyaz
• Bölücü Yüksekliği: 180px (Masaüstü), 150px (Tablet), 120px (Telefon)
• Yatay Tekrar: 8x (Masaüstü), 5x (Tablet), 4x (Telefon)

2. Bölüm Oluştur

Satır Dolgusunu Kaldır

İkinci örneği oluşturmak ister misiniz? Üst ve alt dolguya '0px' ekleyerek tüm satır dolgusunu kaldırarak başlayın.

Üst Bölücü Ekle

Bölümünüze bir üst ayırıcı ekleyerek devam edin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Beyaz

Alt Bölücü Ekle

Alt kısım için de aynı bölücüyü kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Beyaz

Klon Bölümü

Bu bölümü istediğiniz kadar klonlayabilirsiniz. Örnekte gösterilenle aynı sonucu elde etmek için, bölümü bir kez klonlayın ve işte orada!

Bölüm #3'ü oluştur

Üst Bölücü Ekle

Üçüncü örnek, aşağıdaki üst ayırıcıyı kullanır:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Beyaz
• Bölücü Yüksekliği: 40px (Masaüstü), 30px (Tablet), 20px (Telefon)

Alt Bölücü Ekle

Üst ayırıcıya ekledikten sonra alt ayırıcıya geçin ve aşağıdaki ayarları uygulayın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Beyaz
• Bölücü Yüksekliği: 140px
• Bölücü Yatay Tekrar: 6x (Masaüstü), 5x (Tablet), 4x (Telefon)

4. Bölüm Oluştur

Üst Bölücü Ekle

Satırdaki son örnek için aşağıdaki üst ayırıcıyı seçin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Beyaz

Alt Bölücü Ekle

Aşağıdaki alt bölücü ile birlikte:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Beyaz

Satıra Ekstra Dolgu Ekle

Tasarımınızın yüksekliğini artırmak istiyorsanız, sıranızın üst ve alt dolgusuna '40px' de ekleyebilirsiniz.

Ekstra: Arka Plan Resmi + Degrade Yerleşimi

Bölüme Degrade Arka Planı Ekle

Ayrıca, bölümünüze bir arka plan resmi ve degrade kaplama ekleyerek boş bölümlerin her birini benzersiz hale getirebilirsiniz. Gradyan arka planı ve arka plan görüntüsü tasarımınızı dolduracak ve ona daha da gelişmiş bir efekt verecektir. Bölümünüze degrade bir arka plan ekleyerek başlayın:

• İlk Renk: #f2e3de
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 130deg
• Başlangıç ​​Konumu: %25

Bölüme Arka Plan Resmi Ekle

Ardından, aşağıdaki ayarlarla birlikte bir arka plan resmi ekleyin (Divi'nin Kuyumcu Düzen Paketini yükledikten sonra Medya Kitaplığınızda kullandığımızı bulabilirsiniz):

• Arka Plan Resmi Konumu: Üst Merkez
• Arka Plan Resmi Karışımı: Yer Paylaşımı

Ön izleme

Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım:

Son düşünceler

Bu kullanım örneği blog gönderisinde, benzersiz tasarım öğeleri oluşturmak için boş bölümleri nasıl kullanacağınızı gösterdik. Bu tasarım öğelerini Kuyumcu Düzen Paketi'nin açılış sayfasına ekledik. Ancak bu boş bölümleri dilediğiniz tasarım ve düzen paketlerine ekleyebilirsiniz. Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!