Tasarımınıza Dolaylı Olarak Bölme Bölücüler Nasıl Uygulanır (Bölüm 1: Satırlar)

Divi'nin yeni bölüm ayırıcılarının gelmesiyle, ekstra CSS kodu olmadan çarpıcı web siteleri oluşturmak inanılmaz derecede kolaylaştı. Varsayılan olarak, bölümleriniz için zarif geçişler oluşturmak için bölüm ayırıcılar kullanılır. Ancak bölüm ayırıcıları başka amaçlar için de kullanabilirsiniz. Bir önceki gönderide, Divi'nin Bölüm Bölücüleriyle Arka Plan Dokuları Nasıl Oluşturulur, örneğin, diğer bölümlere geçişe odaklanmak yerine bölümün tasarımını geliştirmek için bölümler kullandık.

Bu iki bölümlük gönderide, size ek CSS kodu kullanmak zorunda kalmadan bölüm ayırıcıları kullanmanın başka bir harika yaklaşımını göstereceğiz. Bu ilk bölümde, satırlara dolaylı olarak bölüm bölücüler uygulamaya odaklanacağız. İkinci kısımda modüllere bölüm bölücüler ekleyeceğiz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki bu blog yazısı öğreticisinden görsel olarak neler bekleyebileceğinize hızlıca bir göz atalım:

Yaklaşmak

• Bu tasarıma uygulayabileceğiniz üç farklı bölüm ayırıcı stili kullanacağız.
• Tüm tasarımı sıfırdan oluşturarak başlayacağız, daha sonra istediğiniz ayırıcı stili seçip uygulayabilirsiniz.
• Başlıkta ve girişte belirtildiği gibi, bu bölüm ayırıcıları dolaylı olarak satırlarımıza uyguluyoruz.
• Bu, bölüm bölücülerin satır ayarlarının değil, bölüm ayarlarının bir parçası olacağı anlamına gelir.
• Ancak, satırın bir parçası gibi görünmesi için hem bölücü hem de bölüm arka plan rengi için aynı rengi kullanacağız.
• Bu şekilde, ayırıcı, bölümünüzün başlangıcındaki arka plan rengiyle karışacak ve başka bir arka plan rengiyle temas halinde yalnızca bir kez görüntülenecektir.
• Ayırıcının bölüm içeriğinin altında görünmesini de sağlayacağız
• Bu, bölücünüzün yüksekliğinin sıranıza eklediğiniz modüllerle çakışmamasını sağlayacaktır.

Yeni Bölüm Ekle

Arka plan rengi

Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın. Ardından normal bir bölüm ekleyin, ayarlarını açın ve arka plan rengi olarak '#3c3163' ekleyin.

Üst Bölücü #1

Sonraki Tasarım sekmesini açın ve bölümünüze bir üst ayırıcı ekleyin. Bu yazının 'Yaklaşım' bölümünde belirtildiği gibi, ayırıcı ve bölüm arka planı için kesinlikle aynı rengi kullanmanız gerekecek. Bu şekilde, bölücü bölümün kendisinde görünmez:

• Bölücü Stili: Listede Bul
• Bölücü Yüksekliği: 600px (Masaüstü), 400px (Tablet ve Telefon)
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

aralık

Ayrıca bu dolgu seçeneklerine '80px' ekleyerek bölümümüzün üst ve alt kısmına biraz daha boşluk ekleyeceğiz.

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarını değiştirmeyi bitirdikten sonra, aşağıdaki sütun yapısına sahip bir satır ekleyin:

Arka plan rengi

Herhangi bir modül eklemeden önce, satır ayarlarını açın ve arka plan rengi olarak '#00cef7' kullanın.

boyutlandırma

Sonraki Tasarım sekmesine gidin ve Boyutlandırma alt kategorisine aşağıdaki değişiklikleri uygulayın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ayrıca '28px'lik bir üst dolguya ihtiyacımız olacak.

Kutu Gölge

Ve son olarak, varsayılan ayarlarından herhangi birini değiştirmeden ilk kutu gölge seçeneğini etkinleştireceğiz (ama tabii ki, isterseniz yapabilirsiniz).

Daire için Boş Metin Modülünü Sütun 1'e Ekle

İçerik Kutusunu Boş Bırak

Artık modüllerimizi eklemeye başlayabiliriz. Sütun 1 ile başlayacağız. Eklememiz gereken ilk modül boş bir Metin Modülü.

Arka plan rengi

Arka Plan alt kategorisini açın ve bu modülün arka plan rengi olarak 'rgba(134,89,248,0.67)' kullanın.

aralık

Bu boş Metin Modülünü, bazı özel kenar boşluklarını kullanarak satır ve bölümümüzle örtüştüreceğiz. Ayrıca üst dolguyu kullanarak bir şekil oluşturacağız:

• Üst Kenar Boşluğu: -200px
• Sağ Kenar Boşluğu: 300px
• Sol Kenar Boşluğu: -300px
• Üst Dolgu: 600 piksel

Sınır

Bu şekilden bir daire oluşturmak için, Border alt kategorisindeki köşelerin her birine '500px' eklememiz gerekecek.

Kutu Gölge

Son olarak ve tamamen tercihinize bağlı olarak bu şekle bir kutu gölge de ekleyebilirsiniz.

Sütun 1'e Başlık Metin Modülü Ekle

Metin Ayarları

Boş Metin Modülünün hemen altına başlığınızı içeren başka bir Metin Modülü ekleyin. Tasarım sekmesine gidin ve aşağıdaki metin ayarlarını ona uygulayın:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #ffffff
• Metin Boyutu: 82px (Masaüstü), 60px (Tablet), 45px (Telefon)
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Metin Modülü başlığının üst kenarına '-300px' ekleyerek bu modülü ve önceki boş Metin Modülünü örtüştüreceğiz.

Sütun 1'e Açıklama Metni Modülü Ekle

Metin Ayarları

Metin Modülü başlığının hemen altına, aşağıdaki metin ayarlarını da içeren bir açıklama Metin Modülü ekleyeceğiz:

• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #ffffff
• Metin Yönü: Merkez

boyutlandırma

Bu açıklama Modülünün Genişliğini '%60' olarak ayarlayacağız ve orta Modül Hizalamasını da kullanacağız.

aralık

Son olarak, Metin Modülü başlığı, satır ve Metin Modülü açıklaması arasında biraz boşluk oluşturmak için aşağıdaki özel kenar boşluğunu ekleyeceğiz:

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

Sütun 2'ye Görüntü Modülü Ekle

Fotoğraf yükleniyor

İlk sütunda ihtiyacımız olan tüm modüllere sahibiz. İkincisinde ihtiyacımız olan tek modül bir Görüntü Modülüdür. Digital Payments Layout Pack blog gönderisine giderek, aşağı kaydırarak ve resim varlıklarını indirerek indirebileceğiniz ücretsiz bir illüstrasyon yükledik.

aralık

Bu Görüntü Modülüne de bir miktar üst dolgu ekleyeceğiz:

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

Bölüm Bölücü #2

Bölücü Stilini Değiştir

Bu tasarıma herhangi bir bölüm bölücü uygulayabilirsiniz. Önizlemede, bu tasarımda harika görünen üç üst ayırıcı paylaştık. İlki, bu yazının genel adımları sırasında uygulandı, ancak bunu aşağıdaki ayırıcı stiline kolayca değiştirebilirsiniz:

Bölücü Yüksekliğini Değiştir

Ancak, farklı ekran boyutları için Bölücü Yüksekliği bunun için biraz değişir:

• Bölücü Yüksekliği: 600px (Masaüstü), 500px (Tablet), 400px (Telefon)

Sonuç

Bölüm Bölücü #3

Bölücü Stilini Değiştir

Önizleme bölümünde gösterilen üçüncü bölücü stilini mi tercih ettiniz? Bölücü Stillerinizde bulun:

Bölücü Yüksekliğini Değiştir

Bu bölücü, farklı ekran boyutlarında aşağıdaki Bölücü Yüksekliğini içerir:

• Bölücü Yüksekliği: 600px (Masaüstü), 500px (Tablet), 400px (Telefon)

Sonuç

Ön izleme

Artık tüm adımların üzerinden geçtik ve buna farklı bölüm ayırıcı stilleri uyguladık, şimdi sonuca farklı ekran boyutlarında son bir göz atalım:

Son düşünceler

Bu yazının birinci bölümü için bu kadardı! Dolaylı bir şekilde bölüm ayırıcıları kullanarak çarpıcı bir sonuç yarattık. Bu gönderi hakkında hatırlamanız gereken en önemli şey, ayırıcınız ve bölüm arka planınız için aynı rengi kullanmanız gerekeceğidir. Bu yazının ikinci bölümünde, modüllere bölüm bölücüleri dolaylı olarak nasıl uygulayacağınızı göstereceğiz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!