Divi'nin İçerik Sonrası Modülünü ve Bölüm Bölücülerini Kullanarak Başlığınızı ve Gövdenizi Nasıl Karıştırabilirsiniz?

Şimdiye kadar hepimiz Divi'nin yerleşik bölüm ayırıcısına alıştık. Oluşturduğumuz web sitelerine bu ekstra dokunuşu eklemeye yardımcı olurlar. Ayrıca iki farklı bölüm arasında yumuşak bir geçiş görevi görürler, ancak Divi's Theme Builder ile bu geçişi yaratma yaklaşımı biraz farklıdır. Bu yazıda, oraya ulaşmak için atmanız gereken adımlar konusunda size rehberlik edeceğiz. Şablon JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Bölüm Bölücü Sayfa Şablonunu ÜCRETSİZ İndirin

Ellerinizi ücretsiz bölüm ayırıcı sayfa şablonuna koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Youtube Kanalımıza Abone Olun

1. Divi Tema Oluşturucu'ya gidin ve Yeni Şablon Ekle

Divi Theme Builder'a gidin

Divi Theme Builder'a giderek başlayın.

Sayfalar için Yeni Şablon Ekle

Orada, artı simgesine tıklayarak yeni bir şablon oluşturun.

Karıştırma efektinin tüm sayfalarınıza uygulanmasını istiyorsanız 'Tüm Sayfalar'ı seçin. Aynı efekti diğer şablon türlerinde de çalıştırabilirsiniz, ancak üst bölüm ayırıcıyı şablonlarınızın her birine ayrı ayrı dahil etmeniz gerekir. Yeni bir şablon oluşturduktan sonra özel başlığı oluşturmaya başlayın.

2. Özel Başlık Oluşturun

Bölüm Ayarları

Degrade Arka Plan

Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bu bölümü açın ve ona bir degrade arka planı ekleyin.

• Renk 1: #d13232
• Renk 2: #fc6a3c

aralık

Bölüme de bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet ve Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet ve Telefon)

Z İndeksi

Başlığınızın tüm içeriğin üstünde kalmasını sağlamak için görünürlük ayarlarında z dizinini artıracağız.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölümünüze yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm üst ve alt dolguları da çıkarın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Ana Eleman

Son olarak, sütun içeriğinizi ortalayın ve satırınızın ana öğesine iki tek satır CSS kodu ekleyerek sütunların daha küçük ekran boyutlarında yan yana kalmasına izin verin.

display: flex;
align-items: center;

Sütun 1'e Görüntü Modülü Ekle

Logo Yükle

Tüm bölüm ve satır ayarlarını tamamladıktan sonra, sıra 1 sütununda bir Görüntü Modülü ile başlayarak modülleri eklemeye gelir. Saydam bir arka plana sahip bir logo yükleyin.

hizalama

Ardından modülün tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Modülün genişliğini farklı ekran boyutlarında da değiştirin.

• Genişlik: 6vw (Masaüstü), 13vw (Tablet), 17vw (Telefon)

Sütun 2'ye Menü Modülü Ekle

Seçim Menüsü

İkinci sütunda bir Menü Modülüne ihtiyacımız olacak. İstediğiniz bir menü seçin.

Arka Plan Rengini Kaldır

Modülün arka plan rengini kaldırarak devam edin.

Düzen

Tasarım sekmesine gidin ve düzeni değiştirin.

• Stil: Sola Hizalanmış
• Açılır Menü Yönü: Aşağıya

Menü Metni

Ardından, menü metnini buna göre biçimlendirin:

• Menü Yazı Tipi: Oswald
• Menü Yazı Tipi Ağırlığı: Hafif
• Menü Yazı Tipi Stili: Büyük Harf
• Menü Metin Rengi: #ffffff (Masaüstü), #202332 (Tablet ve Telefon)
• Menü Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)
• Menü Harf Aralığı: 0.1vw

Aşağıya doğru açılan menü

Açılır menü ayarlarından açılır menü çizgi rengini de değiştirin.

• Açılır Menü Satır Rengi: #ffffff

Simgeler

Ve beyaz bir hamburger menü simgesi rengi kullanarak modülün ayarlarını tamamlayın.

• Hamburger Menü Simge Rengi: #ffffff

Sütun 3'e Düğme Modülü Ekle

Kopya Ekle

Son sütuna! Orada, ihtiyacımız olan tek modül bir Düğme Modülü. Seçtiğiniz bir kopyayı ekleyin.

hizalama

Modülün tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğme ayarlarında düğmeyi şekillendirerek devam edin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.6vw (Masaüstü), 1vw (Tablet), 1.5vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #FFFFFF
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: Sans'ı Aç
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ve farklı ekran boyutlarına bazı özel dolgular ekleyerek modülün ayarlarını tamamlayın.

• Üst Dolgu: 0.8vw (Masaüstü), 1.6vw (Tablet), 2.2vw (Telefon)
• Alt Dolgu: 0.8vw (Masaüstü), 1.6vw (Tablet), 2.2vw (Telefon)
• Sol Dolgu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)
• Sağ Doldurma: 1.5vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)

3. Özel Gövde Oluşturun ve Üst Bölücü Ekleyin

Şablonunuzun özel başlığını tamamladıktan sonra devam edin ve özel gövdeyi oluşturmaya başlayın.

Bölüm Ayarları

Üst Bölücü

Yine sayfada bir bölüm fark edeceksiniz. Bu bölümü açın ve ona bir üst ayırıcı ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #fc6a3c
• Bölücü Yüksekliği: 6vw
• Bölücü Yatay Tekrar: 15x
• Bölücü Çevirme: Dikey
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölümünüze yeni bir satır ekleyerek devam edin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Gönderi İçeriği Modülü Ekle

Şimdi, tüm sayfa içeriğinizin görünmesini sağlamak için satırınıza bir İçerik Sonrası Modülü eklemeniz gerekecek. Bu modül, Divi kullanarak sayfanın içinde oluşturduğunuz düzeni temsil eder. Bu geçişi bir ürün sayfasına, örneğin dinamik içeriğin dahil olduğu bir şablona ekliyorsanız, farklı bir yaklaşım gerçekleşir. Hatırlanması gereken tek önemli şey, şablonunuzun gövdesinin ilk bölümüne bir üst ayırıcı eklemeniz gerekeceğidir. Ayırıcınızın renginin, genel başlık arka planınız için kullanılan renkle aynı olduğundan emin olun.

3. Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle

Şablonunuzun gövdesini tamamladıktan sonra, değişiklikleri kaydedebilir ve sonucu web sitenizde görüntüleyebilirsiniz!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin bölüm ayırıcılarını ve İçerik Sonrası Modülünü kullanarak şablonunuzun başlığını ve gövdesini nasıl karıştıracağınızı gösterdik. Bölücü geçişi hemen tüm sayfalarınız için geçerlidir. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.