Divi's Theme Builder ile Yapılan ÜCRETSİZ Minimal Üstbilgi ve Altbilgi Kombo Tasarımını İndirin

Genel bir altbilgi ve üstbilgi tasarlarken, web sitesinin genel tasarım stilini hesaba katmak önemlidir. Örneğin, çok fazla beyaz alana sahip minimal bir web sitesi oluşturuyorsanız, en iyi seçeneğiniz minimum bir üst bilgi ve alt bilgi ile gitmektir. Bugünün eğitiminde, oluşturduğunuz herhangi bir web sitesinde ve herhangi bir kısıtlama olmaksızın kullanmakta özgür olduğunuz ücretsiz bir minimal üstbilgi ve altbilgi birleşik tasarımını paylaşacağız! Ayrıca, rekreasyon süreci boyunca size adım adım rehberlik edeceğiz.

Hadi hadi bakalım.

Ön izleme

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

Minimal Üstbilgi ve Altbilgi Kombo Varsayılan Web Sitesi Şablonunu ÜCRETSİZ İndirin

Ücretsiz minimal üstbilgi ve altbilgi kombo varsayılan web sitesi şablonuna el 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.

https://youtu.be/EUtzKvn6PUI

Youtube Kanalımıza Abone Olun

1. Genel Başlık Oluşturun

Divi Theme Builder'a gidin

Divi Tema Oluşturucu'ya giderek başlayın ve 'Global Başlık Ekle'yi tıklayın.

Global Başlık Oluşturmaya Başlayın

Ardından, genel başlığı oluşturmaya başlayın.

Bölüm #1'i Değiştir

aralık

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bölüm ayarlarını açın 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 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
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %80 (Masaüstü), %90 (Tablet ve Telefon)

aralık

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

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

Sınır

Bir alt kenarlık da kullanın.

• Alt Kenar Genişliği: 1px
• Alt Kenarlık Rengi: #333333

Ana Eleman

Ardından, gelişmiş sekmeye gidin ve satırın ana öğesine tek bir CSS kodu satırı ekleyin. Bu, sütunları daha küçük ekran boyutlarında yan yana tutmamıza yardımcı olacaktır.

display: flex;

Tüm Sütun Aralığı

Ardından, satırımızdaki tüm sütunlara bazı özel dolgular ekleyeceğiz.

• Üst Dolgu: %1
• Alt Dolgu: 1%

Sütun 1 ve 2 Kenarlığı

Birinci ve ikinci sütuna da bir sağ kenarlık ekleyeceğiz.

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #333333

Sosyal Medya Takip Modülünü Sütun 1'e Ekleyin

Sosyal Ağlar Ekle

1. sütundaki Sosyal Medya Takip Modülü ile başlayarak modül ekleme zamanı. İstediğiniz sosyal ağları ekleyin.

Her Sosyal Ağın Bireysel Arka Plan Rengini Kaldırın

Her bir sosyal ağın arka plan rengini tek tek kaldırarak devam edin.

hizalama

Ardından, genel modül ayarlarına dönün ve tasarım sekmesinde modül hizalamasını değiştirin.

• Modül Hizalaması: Merkez

Simge Ayarları

Sonraki simge ayarlarını değiştirin.

• Simge Rengi: #000000
• Özel Simge Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 16px (Masaüstü), 14px (Tablet ve Telefon)

aralık

Ve biraz üst kenar boşluğu ekleyerek modül ayarlarını tamamlayın.

• Üst Marj: %2

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

İçerik Ekle

İkinci sütunda, seçtiğimiz bazı içeriğe sahip bir Metin Modülü ekleyeceğiz.

Metin Ayarları

Tasarım sekmesine gidin ve modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Roboto Mono
• Metin Rengi: #000000
• Metin Boyutu: 17px (Masaüstü), 15px (Tablet), 13px (Telefon)
• Metin Hizalama: Merkez

aralık

Biz de biraz üst kenar boşluğu ekleyeceğiz.

• Üst Marj: %3

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

Kopya Ekle

Son sütuna. Seçtiğiniz bir kopya ile bir Düğme Modülü ekleyin.

Düğme Hizalama

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

• Düğme Hizalama: Merkez

Düğme Ayarları

Ardından, düğme ayarlarına gidin ve düğmeleri aşağıdaki gibi biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px (Masaüstü), 16px (Tablet), 13px (Telefon)
• Düğme Metin Rengi: #670fff
• Düğme Kenar Genişliği: 0px

• Düğme Yazı Tipi: Roboto Mono
• Düğme Yazı Ağırlığı: Kalın
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

2. Bölüm Ekle

aralık

Bir öncekinin hemen altına başka bir normal bölüm ekleyin. Bölüm ayarlarını açın ve varsayılan üst dolguyu kaldırın.

• Üst Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

• Genişlik: %90
• Maksimum Genişlik: %100

Sınır

Sonraki bir alt kenarlık ekleyin.

• Alt Kenar Genişliği: 1px
• Alt Kenarlık Rengi: #333333

Sütuna Menü Modülü Ekle

Seçim Menüsü

Ardından, satırın sütununa bir Menü Modülü ekleyin ve istediğiniz bir menüyü seçin.

Logo Yükle

Ardından bir logo yükleyin.

Menü Metin Ayarları

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

• Menü Yazı Tipi: Roboto
• Menü Metin Rengi: #000000
• Menü Metin Boyutu: 18px
• Metin Hizalama: Sağ

Açılır Menü Metin Ayarları

Açılır menü satırı rengini de değiştirin.

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

Simge Ayarları

Simge ayarlarında hamburger menü simgesi rengiyle birlikte.

• Hamburger Menü Simgesi Rengi: #670fff

boyutlandırma

Boyutlandırma ayarlarında logo max genişliğini değiştirerek modül ayarlarını tamamlayın.

• Logo Maksimum Genişliği: %35

Bölüm #1'i Divi Kitaplığına Kaydet

Genel başlığı ve tüm öğelerini tamamladığınızda, ilk bölümü Divi Kitaplığınıza kaydedebilirsiniz. Bu bölümü daha sonra genel altbilgimizde yeniden kullanacağız.

Global Başlık ve Tema Oluşturucu Değişikliklerini Kaydet

Ardından genel başlık şablonunu Divi Tema Oluşturucu değişiklikleriyle birlikte kaydedin.

2. Genel Altbilgi Oluşturun

Global Altbilgi Oluşturmaya Başlayın

Küresel altbilgiye! Altbilgiyi sıfırdan oluşturmaya başlayın.

Bölüm #1'e Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak 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:

• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %95
• Maksimum Genişlik: %100

Sınır

Ve bir üst kenarlık ekleyerek satır ayarlarını tamamlayın.

• Üst Kenar Genişliği: 1px
• Üst Kenar Rengi: #333333

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

Logo Yükle

Sütun 1'deki Resim Modülü ile başlayarak modül ekleme zamanı. Bir logo yükleyin.

boyutlandırma

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

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

Sütun 1'e E-posta Opt Modülü Ekle

İçeriği Kaldır

Sütun 1'de ihtiyacımız olan bir sonraki modül, bir E-posta Optin Modülüdür. Tüm kopyayı kaldırın.

E-posta Hesabını Bağla

Daha sonra seçtiğiniz bir e-posta hesabını ekleyin.

Arka Plan Rengini Kaldır

Ardından, varsayılan arka plan rengini kaldırın.

Düzen

Tasarım sekmesine gidin ve aşağıdaki düzenin geçerli olduğundan emin olun:

• Düzen: Gövde Solda, Form Sağda

Alan Ayarları

Alan ayarlarını da değiştirin.

• Üst Dolgu: 10px
• Alt Dolgu: 10px
• Alanlar Yazı Tipi: Roboto Mono

• Alanlar Yuvarlatılmış Köşeler: 0px (Tüm Köşeler)
• Alanlar Kenarlık Genişliği: 1px
• Alan Kenarlığı Rengi: #333333

Düğme Ayarları

Düğmeyi aşağıdaki gibi şekillendirerek modül ayarlarını tamamlayın:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 18px
• Düğme Arka Plan Rengi: #000000
• Düğme Yazı Tipi: Roboto Mono

Metin Modülü #1'i Sütun 2'ye ekleyin

İçerik Ekle

İkinci sütuna geçin. Seçtiğiniz bazı içeriklerle ilk Metin Modülünü ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Roboto Mono
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 21px
• Metin Hizalama: Merkez

aralık

Biraz alt kenar boşluğu da ekleyin.

• Alt Marj: %10

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

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

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

Hat Ayarları

Daha sonra modülün hat ayarlarını değiştirin.

• Çizgi Rengi: #000000
• Çizgi Stili: Katı
• Çizgi Konumu: Üst

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

Seçtiğiniz bir altbilgi öğesiyle ikinci sütuna başka bir Metin Modülü ekleyin.

Link ekle

Bir sonraki bağlantı ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Roboto Mono
• Metin Rengi: #000000
• Metin Boyutu: 16px
• Metin Hizalama: Merkez

aralık

Biraz alt kenar boşluğu da ekleyin.

• Alt Marj: %2

Metin Modülü #2'yi Gerektiği Kadar Kez Klonlayın

2. sütundaki ikinci Metin Modülünü tamamladığınızda, kaç tane altbilgi öğesi görüntülemek istediğinize bağlı olarak onu istediğiniz kadar kopyalayabilirsiniz.

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

Her yinelenen Metin Modülünün içeriğini ve bağlantılarını değiştirin.

Klon Sütunu 2 İki Kez

İkinci sütunu ve tüm altbilgi öğelerini tamamladığınızda, tüm sütunu iki kez klonlayabilirsiniz.

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

Yinelenen sütunlardaki içeriği ve bağlantıları değiştirin.

Bölüm #2'yi İçe Aktar

İlk bölümü tamamladıktan sonra, genel başlıkta kullandığımız bölümü içe aktarmanın zamanı geldi.

Satır Kenarlığını Değiştir

İkinci bölümdeki satırın ayarlarını açın, alt kenarlığı kaldırın ve bunun yerine üst kenarlığı ekleyin.

• Üst Kenar Genişliği: 1px
• Üst Kenar Rengi: #333333
• Alt Kenar Genişliği: 0px

Metin Modülündeki İçeriği Değiştir

2. sütundaki Metin Modülündeki kopyayı da değiştirin.

Genel Altbilgiyi Kaydet

Genel altbilgiyi tamamladıktan sonra, tüm değişiklikleri kaydettiğinizden emin olun.

3. Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Önizleme

Ardından şablon düzenleyiciden çıkın, tüm Divi Tema Oluşturucu değişikliklerini kaydedin ve sonucu web sitenizde önizleyin!

Ön izleme

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

Son düşünceler

Bu gönderide, oluşturduğunuz herhangi bir web sitesinde ve herhangi bir kısıtlama olmaksızın ücretsiz olarak kullanabileceğiniz güzel bir minimal üstbilgi ve altbilgi kombinasyonunu paylaştık! Bu üst bilgi ve alt bilgi kombinasyonu, oluşturduğunuz minimal web siteleri için harika bir eklentidir. Genel tasarımın ezici görünmesini sağlamadan dahil edilen birden fazla öğe vardır. Tasarımı da sıfırdan yeniden yarattık. 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.