Divi's Theme Builder ile Özel Altbilgi Nasıl Oluşturulur

Divi Theme Builder yeni bir çağı işaret ediyor ve web siteleri tasarlama şeklimizi değiştiriyor. Bu özelliğin en önemli parçalarından biri, sayfalarınıza ve gönderilerinize dinamik olarak genel altbilgiler ekleyebilmektir. Bir altbilgi tasarladıktan sonra, Divi's Theme Builder'ı kullanarak istediğiniz türde bir sayfaya veya gönderiye otomatik olarak ekleyebilirsiniz. Şimdi bu öğreticide, web sitenize genel bir altbilgi oluşturma ve ekleme sürecinde size adım adım rehberlik edeceğiz. Şablon JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki genel altbilgi tasarımına hızlı bir göz atalım.

masaüstü

Mobil

Özel Global Alt Bilgiyi ÜCRETSİZ İndirin

Ellerinizi ücretsiz özel global altbilgiye 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.

Youtube Kanalımıza Abone Olun

1. Divi's Theme Builder'a gidin

Divi Tema Seçeneklerinizde Tema Oluşturucu'ya giderek başlayın.

2. Genel Altbilgi Ekle ve Oluştur

Orada, Divi kitaplığınızdan genel bir altbilgi ekleyebilir veya sıfırdan bir altbilgi oluşturmaya başlayabilirsiniz. Bu eğitimde, sıfırdan özel bir altbilgi oluşturacağız, bu yüzden devam edin ve ilk seçeneği seçin.

1. Bölüm Ekle

Arka plan rengi

Yaratmaya başlama zamanı! Sayfada bulabileceğiniz bölümü açın ve bölümün arka plan rengini değiştirin.

• Arka Plan Rengi: #000000

aralık

Daha sonra bölümün boşluk ayarlarını değiştirin.

• Üst Marj: 6vw
• Sol Kenar Boşluğu: 6vw
• Sağ Marj: 6vw
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Sınır

Sonra biraz üst sol ve sağ kenarlık ekleyin.

• Sol Üst: 20 piksel
• Sağ Üst: 20px

Kutu Gölge

Bölüm ayarlarına da bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: rgba(0,0,0,0.18)
• Gölge Rengi: rgba(0,0,0,0.18)

Bölüme Yeni Satır Ekle

Sütun Yapısı

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

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

H2 içeriği olan bir Metin Modülü ekleyin.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: Poppins
• Başlık 2 Yazı Ağırlığı: Yarı Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 31px (Masaüstü), 24px (Tablet), 18px (Telefon)
• Başlık 2 Çizgi Yüksekliği: 1,6em

boyutlandırma

Modüle de biraz maksimum genişlik ekleyin.

• Maksimum Genişlik: 700 piksel

Sütuna Düğme Modülü Ekle

Kopya Ekle

Sütununuzdaki Metin Modülünün hemen altına bir Düğme Modülü ekleyin ve seçtiğiniz bir kopyayı girin.

hizalama

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

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğmeyi şekillendirerek devam edin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 12px
• 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ığı: 1px
• Düğme Yazı Tipi: Poppins
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 14px
• Alt Dolgu: 14px
• Sol Dolgu: 40px
• Sağ Dolgu: 58px

2. Bölüm Ekle

Arka plan rengi

Bir sonraki normal bölüme! Beyaz bir bölüm arka plan rengi seçin.

• Arka Plan Rengi: #ffffff

aralık

Sonraki tüm üst ve alt dolguyu çıkarın.

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

Sınır

Bölüme de biraz sınır yarıçapı ekleyin.

• Sol Üst: 20 piksel
• Sağ Üst: 20px

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek bölümün ayarlarını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 135 piksel
• Gölge Rengi: rgba(0,0,0,0.18)

Bölüme Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarını tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki satırın varsayılan üst ve alt dolgusunu kaldırın.

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

Sütun Aralığı

Sütun ayarlarını açarak devam edin ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 100px (Masaüstü), 50px (Tablet ve Telefon)
• Alt Dolgu: 100px (Masaüstü), 50px (Tablet ve Telefon)
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sütuna Metin Modülü #1 Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! 1. sütuna normal bir Metin Modülü ekleyin ve istediğiniz içeriği ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 17px
• Metin Hizalama: Merkez

aralık

Daha sonra bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Kenar Boşluğu: 10px
• Alt Kenar Boşluğu: 30px

Sütuna Ayırıcı Modül Ekle

görünürlük

Metin Modülünün hemen altına bir Bölücü Modül ekleyin ve 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Çizgi rengini siyah olarak değiştirin.

• Çizgi Rengi: #000000

boyutlandırma

Ayırıcının boyutlandırma ayarlarını da değiştirin.

• Genişlik: %15
• Modül Hizalaması: Merkez

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Sütuna başka bir Metin Modülü ekleyerek devam edin.

Link ekle

Bu modülün başvurmasını istediğiniz sayfaya bir bağlantı ekleyin.

Metin Ayarları

Ardından tasarım sekmesine geçin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #777777
• Metin Boyutu: 15px
• Metin Hizalama: Merkez

aralık

Biraz üst ve alt kenar boşluğu da ekleyin.

• Üst Kenar Boşluğu: 10px
• Alt Kenar Boşluğu: 10px

Klon Metin Modülü #2 Gerektiği Kadar

Sütundaki ikinci Metin Modülünü tamamladıktan sonra, istediğiniz kadar kopyalayabilirsiniz (eklemek istediğiniz tıklanabilir altbilgi öğelerine bağlı olarak).

İçeriği ve Bağlantıları Değiştir

Her kopya için modül içeriğini ve bağlantıları değiştirdiğinizden emin olun.

Tüm Sütunu İki Kez Klonla

Sütunu ve modüllerini tamamladıktan sonra tüm sütunu iki kez klonlayabilirsiniz.

Sütun 2 Arka Plan Rengi

Ardından, sütun 2 ayarlarını açın ve arka plan rengini değiştirin.

• 2. Sütun Arka Plan Rengi: #f9f9f9

İçeriği ve Bağlantıları Değiştir

Yinelenen her sütundaki tüm içeriği ve bağlantıları değiştirdiğinizden emin olun.

Yeni Sütun Ekle

Ardından, satıra dördüncü bir sütun ekleyin.

Arka plan rengi

Yeni sütunun arka plan rengini değiştirin.

• Arka Plan Rengi: #0fffc7

aralık

Sütunun dolgu değerleriyle birlikte.

• Üst Dolgu: 70px
• Alt Dolgu: 70px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

4. Sütun'a Sosyal Medya Takip Modülü Ekleyin

Sosyal Ağlar Ekle

4. sütuna bir Sosyal Medya Takip Modülü ekleyerek devam edin.

Sosyal Ağ Stillerini Sıfırla

Eklediğiniz her sosyal ağ için öğe stillerini sıfırlayın.

hizalama

Ardından tasarım sekmesine geçin ve modül hizalamasını değiştirin.

• Modül Hizalaması: Merkez

Simge Ayarları

Simge rengini de değiştirin.

• Simge Rengi: #000000

Sütun 4'e E-posta Opt Modülü Ekleme

İçeriği Kaldır

4. sütuna bir E-posta Tercih Modülü ekleyerek devam edin ve başlık ile gövde içeriğini kaldırın.

E-posta hesabı

Daha sonra bir e-posta hesabı ekleyin. E-posta hesabını eklemeden, oluşturucudan çıktığınızda modül görünmeyecektir.

Arka Plan Rengini Kaldır

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

• Arka Plan Rengini Kullan: Hayır

Alan Ayarları

Tasarım sekmesine gidin ve alan ayarlarını aşağıdaki gibi değiştirin:

• Alanlar Arka Plan Rengi: rgba(0,0,0,0)
• Alan Metin Rengi: #000000
• Alanlar Yazı Tipi: Poppins

• Alanlar Metin Boyutu: 13px
• Alanlar Kenarlık Genişliği: 1px
• Alan Kenarlık Rengi: #000000

Düğme Ayarları

Modülünüzün düğmesine de stil verin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 12px
• 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ığı: 1px
• Düğme Yazı Tipi: Poppins
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

• Üst Dolgu: 15px
• Alt Dolgu: 15px

Sütun 4'e Dinamik Metin Modülü Ekle

Dinamik İçerik

Bu tasarımı tamamlamak için ihtiyacımız olan bir sonraki ve son modül bir Metin Modülüdür. İçerik kutusunda dinamik içerik seçeneğini etkinleştirin.

Ardından, 'Geçerli Tarih' seçeneğini seçin.

• Dinamik İçerik: Geçerli Tarih

Ve dinamik içeriğin ayarlarını aşağıdaki gibi değiştirin:

• Önce: Telif hakkı &kopyala;
• Sonra: | Her hakkı saklıdır
• Tarih Formatı: Özel
• Özel Tarih Formatı: 20y

Metin Ayarları

Ardından tasarım sekmesine geçin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Rengi: #000000
• Metin Boyutu: 16px

aralık

Biraz üst kenar boşluğu ekleyerek modülün ayarlarını tamamlayın ve işiniz bitti!

• Üst Kenar Boşluğu: 50px

Ö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 öğreticide, Divi'nin yeni Tema Oluşturucusu ile güzel bir özel küresel altbilgi oluşturmanın ne kadar kolay olduğunu gösterdik. Tema Oluşturucu ve Divi'nin yerleşik modülü ve tasarım seçenekleri, çok zaman kazanmanıza ve kısa sürede çarpıcı web siteleri oluşturmanıza yardımcı olur. Bu öğreticinin, yaklaşan Divi projeleriniz için güzel küresel altbilgiler oluşturmanız için size ilham vermesini umuyoruz. 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.