Divi's Theme Builder ile 404 Sayfa Şablonu Nasıl Oluşturulur

Yayınlanan: 2019-11-12

Divi's Theme Builder ve yerleşik tasarım seçenekleri bir sürü yeni kapı açtı. Artık her zamankinden daha fazla, müşterilerinizin geldiği her sayfayı özelleştirebilirsiniz. Bu, bir 404 sayfasının ayarlanmasını içerir. Bu eğitimde, 404 sayfalık güzel bir şablonu nasıl oluşturacağınızı ve hemen web sitenize nasıl uygulanacağını göstereceğiz. Yalnızca Divi'nin yerleşik seçeneklerini kullanacağız ve siz de şablon JSON dosyasını ücretsiz olarak indirebileceksiniz. Bu öğreticinin, sonraki 404 sayfa tasarımınızla yaratıcı olmanıza ilham vermesini umuyoruz.

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ü

404 sayfa şablonu

Mobil

404 sayfa şablonu

404 Sayfa Şablonunu ÜCRETSİZ İndirin

404 sayfalık ücretsiz şablona el koymak için önce aşağıdaki düğmeyi kullanarak şablonu 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

Ü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.

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 Oluşturun

Divi Theme Builder'a gidin

404 sayfa şablonunu oluşturmaya başlamak için Divi ayarlarınızda Divi Tema Oluşturucu'ya gidin.

404 sayfa şablonu

Yeni Şablon Oluştur

'Yeni Şablon Ekle'yi tıklayın ve 404 sayfanız için yeni bir şablon ayarlayın.

  • Kullanım Tarihi: 404 Sayfa

404 sayfa şablonu

404 sayfa şablonu

Üst Bilgi ve Alt Bilgi Alanını Gizle

Göz simgesine tıklayarak 404 sayfanızın özel üstbilgisini ve altbilgisini gizleyerek devam edin.

404 sayfa şablonu

Küresel Vücut Oluşturun

Önceki tüm adımları tamamladıktan sonra, 'Özel Gövde Oluştur' seçeneğini seçerek 404 sayfa gövdesini oluşturmaya başlayabilirsiniz.

404 sayfa şablonu

2. 404 Sayfa Gövdesi Oluşturmaya Başlayın

Yeni Bölüm Ekle

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra sayfanızda bir bölüm göreceksiniz. Bu bölümü açın ve beyaz bir arka plan rengi ekleyin.

  • Arka Plan Rengi: #FFFFFF

404 sayfa şablonu

Alt Bölücü

Bölümün tasarım sekmesine gidin ve bir alt ayırıcı ekleyin:

  • Bölücü Stili: Listede Bul
  • Bölücü Rengi: #ffee00
  • Bölücü Yüksekliği: 25vw (Masaüstü), 77vw (Tablet), 90vw (Telefon)
  • Bölücü Çevirme: Dikey
  • Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

404 sayfa şablonu

aralık

Daha sonra farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.

  • Üst Dolgu: 4.6vw (Masaüstü), 23vw (Tablet), 25vw (Telefon)
  • Alt Dolgu: 4.6vw (Masaüstü), 13vw (Tablet), 11vw (Telefon)

404 sayfa şablonu

1. Satır Ekle

Sütun Yapısı

Bölüm ayarlarını tamamladıktan sonra ilk satırı ekleyebilirsiniz. Aşağıdaki sütun yapısını seçin:

404 sayfa şablonu

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
  • Genişlik: %100
  • Maksimum Genişlik: %100

404 sayfa şablonu

aralık

Sonraki satırın üst ve alt dolgu değerlerini değiştirin.

  • Üst Dolgu: 2vw
  • Alt Dolgu: 2vw

404 sayfa şablonu

Sütuna Metin Modülü 1 Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül bir Metin Modülü. Seçtiğiniz bazı paragraf içeriğini ekleyin.

404 sayfa şablonu

Metin Ayarları

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

  • Metin Yazı Tipi: Monoton
  • Metin Rengi: #000000
  • Metin Boyutu: 24vw (Masaüstü), 35vw (Tablet ve Telefon)
  • Metin Satırı Yüksekliği: 1em
  • Metin Hizalama: Merkez

404 sayfa şablonu

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Başka bir Metin Modülü olan bir sonraki modüle geçin. Seçtiğiniz bazı içeriği ekleyin.

404 sayfa şablonu

Metin Ayarları

Modülün metin ayarlarını uygun şekilde değiştirin:

  • Metin Yazı Tipi: Montserrat
  • Metin Rengi: #000000
  • Metin Boyutu: 1.2vw (Masaüstü), 2.6vw (Tablet), 3vw (Telefon)
  • Metin Satır Yüksekliği: 1.8em
  • Metin Hizalama: Merkez

404 sayfa şablonu

aralık

Bazı özel üst ve alt kenar boşlukları ekleyerek modülün ayarlarını tamamlayın.

  • Üst Marj: 2vw
  • Alt Marj: 6vw

404 sayfa şablonu

2. Satır Ekle

Sütun Yapısı

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

404 sayfa şablonu

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi yapın:

  • Genişlik: 32vw (Masaüstü), 50vw (Tablet ve Telefon)
  • Maksimum Genişlik: %100

404 sayfa şablonu

aralık

Boşluk ayarlarını da değiştirin.

  • Üst Marj: 7vw (Masaüstü), 22vw (Tablet), 59vw (Telefon)
  • Üst Dolgu: 0vw
  • Alt Dolgu: 0vw

404 sayfa şablonu

Sütun 1 ve 2 Ayarları

Varsayılan Arka Plan Rengi

Genel satır ayarlarını tamamladıktan sonra, her bir sütunu ayrı ayrı açabilir ve arka plan renginden başlayarak bazı değişiklikler yapabilirsiniz.

  • Arka Plan Rengi: #FFFFFF

404 sayfa şablonu

Vurgulu Arka Plan Rengi

Fareyle üzerine gelindiğinde arka plan rengini değiştirin.

  • Arka Plan Rengi: #fffa00

404 sayfa şablonu

Sınır

Bazı yuvarlak köşeler de ekleyin.

  • Yuvarlak Köşeler: 20px (Tüm Köşeler)

404 sayfa şablonu

Varsayılan Kutu Gölgesi

Kutu gölge ayarlarına gidin ve aşağıdaki değişiklikleri uygulayın:

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

404 sayfa şablonu

Vurgulu Kutu Gölgesi

Üzerine gelindiğinde gölge rengini değiştirin.

  • Gölge Rengi: rgba(0,0,0,0.12)

404 sayfa şablonu

Varsayılan Dönüştürme Ölçeği

Ardından, dönüştürme ölçeği ayarlarına gidin ve varsayılan değerlerin '%100' kaldığından emin olun.

  • Sağ: %100
  • Alt: %100

404 sayfa şablonu

Hover Dönüşüm Ölçeği

Fareyle üzerine gelindiğinde dönüştürme ölçeği değerlerini değiştirin:

  • Sağ: %110
  • Alt: %110

404 sayfa şablonu

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Satır ve sütun ayarlarını tamamladıktan sonra, seçtiğiniz bazı paragraf içeriğiyle sütun 1'e bir Metin Modülü ekleyin.

404 sayfa şablonu

Link ekle

Sonraki modüle bir bağlantı ekleyin.

  • Modül Bağlantı URL'si: #
  • Modül Bağlantı Hedefi: Aynı Pencerede

404 sayfa şablonu

Metin Ayarları

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

  • Metin Yazı Tipi: Montserrat
  • Metin Yazı Tipi Ağırlığı: Kalın
  • Metin Yazı Tipi Stili: Büyük Harf
  • Metin Rengi: #000000
  • Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
  • Metin Harf Aralığı: 1px
  • Metin Satır Yüksekliği: 1.8em
  • Metin Hizalama: Merkez

404 sayfa şablonu

aralık

Ardından, boşluk ayarlarına gidin ve farklı ekran boyutlarına bazı özel üst ve alt dolgu değerleri uygulayın.

  • Üst Dolgu: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
  • Alt Dolgu: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)

404 sayfa şablonu

Metin Modülünü Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir

Metin Modülünü ve tüm ayarlarını tamamladıktan sonra, tüm modülü klonlayabilir ve kopyayı 2. sütuna yerleştirebilirsiniz.

404 sayfa şablonu

İçeriği Değiştir

Yinelenen modülün içeriğini değiştirdiğinizden emin olun.

404 sayfa şablonu

Bağlantıyı Değiştir

Linki de değiştirin.

404 sayfa şablonu

3. Tema Oluşturucu Değişikliklerini Kaydet

Tasarımınız bittiğinde, şablonun tüm ayarlarını kaydedebilirsiniz. Bu kadar!

404 sayfa şablonu

404 sayfa şablonu

Ö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ü

404 sayfa şablonu

Mobil

404 sayfa şablonu

Son düşünceler

Bu gönderide, 404 sayfalık bir şablonun nasıl kurulacağını ve oluşturulacağını gösterdik. Divi'nin tema oluşturucusu ve yerleşik tasarım seçenekleri, özelleştirilmiş şablonlar kullanarak web sitenizin her sayfasına dokunmanıza olanak tanır. Tüm Divi Tema Oluşturucu eğitimlerini beğeneceğinizi 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.