Blog Gönderisi Şablonunuza Tam Yükseklikte Sabit Kenar Çubuğu Nasıl Eklenir

Blog gönderilerinize bir kenar çubuğu eklemeyi seçmek tamamen size kalmış. Bazı blogcular kenar çubuğu kullanmamayı tercih ediyor. Bu eğitim, kenar çubuğu kullanmayı tercih eden ancak biraz farklı görünmesini isteyenler içindir. Genellikle kenar çubukları statik olarak konumlandırılır, ancak gönderi içeriği uzunsa, bu, okuyucunun kenar çubuğunu görmek için geri kaydırması gerekeceği anlamına gelir.

Bu blog yazısı şablonu tasarımında, yazı içeriğini aşağı kaydırırken yerinde kalan tam yükseklikte sabit bir kenar çubuğu oluşturduk. Öğreticiyi yeniden oluştururken, tarayıcınızın içinde iki sekmeyi açık tutun: biri tema oluşturucu için, diğeri blog yazısı önizlemesi için. Bu şekilde, ilerledikçe değişiklikleri görebilirsiniz.

Başlayalım!

Ön izleme

Başlamadan önce, tam yükseklikte sabit kenar çubuğuna bir göz atalım.

masaüstü

Mobil

Tam Yükseklikte Sabit Kenar Çubuğu Şablonunu ÜCRETSİZ İndirin

Ellerinizi ücretsiz tam yükseklikte sabit kenar çubuğu ş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!

Kenar Çubuğu Widget'ı Oluştur

Tam yükseklikte sabit kenar çubuğu şablonuna başlamadan önce özel bir kenar çubuğu pencere öğesi oluşturun. Bunu daha sonra şablonun içindeki kenar çubuğumuza ekleyeceğiz.

Widget Oluşturucu'yu açın

'Görünüm'e tıklayın ve 'Widget'lar'ı seçin.

Kenar Çubuğu Widget'ına Öğe Ekleme

'Son Gönderiler' ve 'Kategoriler' öğelerini kenar çubuğu widget'ına sürükleyin.

Widget'ta Öğe Ayarlarını Yapın

Yalnızca son 3 gönderiyi göstermeyi ve bir başlık eklemeyi seçin. Kategoriler widget'ına da bir başlık ekleyin ve işiniz bittiğinde her iki kutuda da 'Kaydet'i tıklamayı unutmayın.

• Son Yazılar Başlık: Devamını Oku:
• Kategori Başlığı: Gözat

2. Tema Oluşturucuyu Kullanmaya Başlayın

Tema Oluşturucuyu Aç / Yeni Şablon Ekle

Sabit tam yükseklikte kenar çubuğu şablonunu yeniden oluşturmaya başlamanın zamanı geldi! İlk önce tema oluşturucunuzu açın ve yeni bir şablon ekleyin.

Şablon Ayarlarını Belirle

Şablon ayarlarında 'Tüm Blog Yazıları'nı seçin. Şablonu belirli bir kategori veya etiket için kullanmak isterseniz, şablon ayarlarını buna göre değiştirin.

Özel Gövde Ekle

Ardından, 'Özel Gövde Ekle'yi tıklayın.

Özel Gövde Oluştur'u seçin

Bu şablonu sıfırdan yeniden oluşturacağız, bu yüzden devam edin ve 'Özel Gövde Oluştur'u seçin.

Sıfırdan İnşa Et

Görsel oluşturucunun içine girdikten sonra, bir kez daha sıfırdan oluşturma seçeneğini seçin.

Tam Yükseklikte Sabit Kenar Çubuğuyla Şablonu Yeniden Oluşturun

Bölüm Ayarları

Arka plan

Şablon düzenleyicinizin içindeki mevcut bölümü açın ve bir degrade arka planı ekleyin.

• Arka Plan Gradyanı
  • Renk 1: Beyaz #ffffff
  • Renk 2: Açık Gri #eaeaea

aralık

Biraz dolgu da ekleyin.

• Üst Dolgu: 55px

Yeni Satır Ekle

Sütun Yapısı

Şimdi 3/4 – 1/4 sütun yapısına sahip bir satır ekleyin.

boyutlandırma

Satırın boyutunu aşağıdaki gibi ayarlayın.

• Özel Oluk Genişliği: 2
• Genişlik:
  • Masaüstü ve Tablet: %90
  • Telefon: %100
• Maksimum genişlik:
  • Masaüstü: 1920 piksel
• Min Yükseklik: 100vh

Sütun 1 Ayarları

aralık

Modül eklemeden önce sütun ayarlarını yapın. Önce 1. sütun.

• Sol ve Sağ Dolgu
  • Tablet: %2
  • Telefon: %8

Sütun 2 Ayarları

Arka plan

Ardından, sütun 2'ye bir arka plan rengi ekleyin.

• Arka Plan Rengi: Beyaz #ffffff

aralık

Biraz boşluk da ekleyin.

• Sol ve Sağ Dolgu
  • Masaüstü: %3
  • Tablet ve Telefon: %14

Sınır

Sonraki sütuna yuvarlak köşeler verin.

• Yuvarlatılmış köşeler
  • Tablet ve Masaüstü: 15px

Özel CSS

Gelişmiş sekmeye gidin ve ana öğeye bazı CSS kod satırları ekleyin. Bu, masaüstünde tam yükseklikte kenar çubuğu oluşturmamıza yardımcı olacaktır.

• Ana Eleman
  • min-yükseklik: %100

min-height: 100%;

Konum

Son olarak, sabit kenar çubuğu efekti oluşturmak için sütuna sabit bir konum ekleyin.

• Konum
  • Masaüstü: Sabit
  • Tablet ve Telefon: Varsayılan
• Konum: Sağ Üst

Gönderi Başlığı Modülü #1 Ekle

Elementler

Modül ekleme zamanı! Sütun 1'deki ilk gönderi başlık modülüyle başlayın ve yalnızca başlığı etkinleştirin.

• Başlığı Göster: Evet

Dinamik Arka Plan Resmi

Ardından arka plan ayarlarına gidin ve öne çıkan görüntüyü dinamik arka plan görüntüsü olarak kullanın.

Başlık Metni

Başlık metni ayarlarına stil verin.

• Başlık Yazı Tipi: Bai Jamjuree
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metin Rengi: #e98074
• Başlık Metin Boyutu:
  • Masaüstü: 45 piksel
  • Tablet: 35 piksel
  • Telefon: 25 piksel
• Başlık Harf Aralığı: 3px
• Başlık Satırı Yüksekliği: 1.3em

aralık

Ardından, bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: %20
• Alt Dolgu: 20%

Sınır

Bazı yuvarlak köşeleri de ekleyin.

• Tüm Köşeler: 15px

Başlık CSS'si

Ve modülün gelişmiş sekmesindeki başlık öğesine üç satır CSS kodu ekleyerek modül ayarlarını tamamlayın.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Gönderi Başlığı Modülü #2 Ekle

Elementler

Şimdi başka bir yazı başlığı modülü ekleyin. Aşağıdaki öğeleri seçin.

• Meta
• Yazar
• Mesaj Kategorileri

Meta Metin

Tasarım sekmesini açın ve meta metni biçimlendirin.

• Yazı Tipi: Bai Jamjuree
• Ağırlık: Orta
• Renk: Gri #8e8d8a
• Boy
  • Masaüstü: 20 piksel
  • Tablet ve Telefon: 15px
• Harf Aralığı: 2px

boyutlandırma

Boyutlandırmayı da ayarlayın.

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

aralık

Bu modülün ayarlarını biraz boşluk bırakarak tamamlayın.

• Üst Dolgu: 15px

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

Arka plan

Ardından beyaz arka plana sahip bir gönderi içeriği modülü ekleyin.

• Arka Plan Rengi: Beyaz #ffffff

Metin

Şimdi, gövde metnine stil verin.

• Yazı Tipi: Lato
• Renk: Gri #8e8d8a
• Boyut: 16 piksel

Başlık Metni

Tüm başlık metin stillerini şekillendirerek devam edin.

• H1
  • Yazı Tipi: Bai Jamjuree
  • Ağırlık: Orta
  • Renk: Mercan #e98074
  • Boy
    • Masaüstü: 45 piksel
    • Tablet: 33 piksel
    • Telefon: 30 piksel
  • Harf Aralığı: 1px
• H2
  • Yazı Tipi: Bai Jamjuree
  • Ağırlık: Orta
  • Renk: Mercan #e98074
  • Boy
    • Masaüstü: 35 piksel
    • Tablet ve Telefon: 25px
  • Harf Aralığı: 1px
• H3
  • Yazı Tipi: Bai Jamjuree
  • Ağırlık: Normal
  • Renk: Koyu Gri #606060
  • Boy
    • Masaüstü: 25 piksel
    • Tablet ve Telefon: 22px
  • Harf Aralığı: 1px
• H4
  • Yazı Tipi: Bai Jamjuree
  • Ağırlık: Normal
  • Renk: Koyu Gri #606060
  • Boy
    • Masaüstü: 22 piksel
    • tablet: 20 piksel
    • Telefon: 18 piksel
  • Harf Aralığı: 1px
• H5
  • Yazı Tipi: Bai Jamjuree
  • Ağırlık: Orta
  • Renk: Koyu Gri #606060
  • Boyut: 16 piksel
  • Harf Aralığı: 1px
• H6
  • Yazı Tipi: Bai Jamjuree
  • Ağırlık: Normal
  • Renk: Koyu Gri #606060
  • Boyut: 16 piksel
  • Harf Aralığı: 1px

aralık

Bazı boşluk ayarları da ekleyin.

• Üst Kenar Boşluğu: 40px
• Üst Dolgu: %10
• Alt Dolgu: %10
• Sol Dolgu: %10
• Sağ Dolgu: %10

Sınır

Son olarak, bazı yuvarlak köşeler ekleyin.

• Yuvarlak Kenarlık: 15px

Yorum Modülü Ekle

Elementler

İlk sütunu tamamlamak için bir yorum modülü ekleyin. Aşağıdaki öğeleri etkinleştirin:

• Yanıtla Düğmesi
• Yorum sayısı

Alanlar

Tasarım sekmesinde alanlara stil verin.

• Arka Plan Rengi: Açık Gri #f7f7f7
• Metin Rengi: Gri #8e8d8a
• Yazı Tipi: Bai Jamjuree
• Metin Boyutu: 17px
• Yuvarlatılmış Köşeler: 15px

Yorum Sayısı Metni

Yorum sayısı metnine de stil verin.

• Başlık Seviyesi: H3
• Yazı Tipi: Bai Jamjuree
• Renk: Mercan #e98074
• Boyut: 22 piksel
• Harf Aralığı: 1px

Form Başlığı Metni

Sonra form başlığı.

• Başlık Seviyesi: H3
• Yazı Tipi: Bai Jamjuree
• Renk: Mercan #e98074
• Boyut: 18 piksel
• Harf Aralığı: 1px

Meta Metin

Meta metni de stillendirin.

• Yazı Tipi: Bai Jamjuree
• Renk: #606060
• Boyut: 14 piksel
• Harf Aralığı: 1px

Yorum Metni

Yorum metnini unutmayın.

• Yazı Tipi: Bai Jamjuree
• Boyut: 1 piksel

Buton

Şimdi düğmeleri şekillendirin.

• Özel Stiller
• Metin Boyutu: 18px
• Metin Rengi: Beyaz #ffffff
• Arka Plan Rengi: Mercan #e98074
• Düğme Sınır Yarıçapı: 15px
• Düğme Yazı Tipi: Bai Jamjuree

boyutlandırma

Satır boyutunu da ayarlayın.

• Genişlik: %90

aralık

Boşluk ayarlarının yanı sıra.

• Üst Dolgu: %8
• Sol ve Sağ Dolgu: %4

Kişi Modülü Ekle

Metin

Sabit kenar çubuğu sütununa geçin ve bir kişi modülü ekleyin.

• Ad: Dinamik Gönderi Yazarı
• Önce: Yazan:

Başlık Metni

Tasarım sekmesinde başlık metnini aşağıdaki gibi biçimlendirin:

• Başlık Seviyesi: H4
• Yazı Tipi: Bai Jamjuree
• Renk: Mercan #e98074
• Boyut: 2vh
• Harf Aralığı: 2px

boyutlandırma

Sonraki boyutu ayarlayın.

• Minimum Yükseklik:
  • Masaüstü: 3vh
  • Tablet ve Telefon: otomatik
• Maksimum yükseklik:
  • Masaüstü: 3vh
  • Tablet ve Telefon: otomatik

aralık

Biraz özel boşluk da ekleyin.

• Üst boşluk
  • Masaüstü: 6vh
  • Tablet ve Telefon: 10vh

Resim Modülü Ekle

resim

Şimdi, bir görüntü modülü ekleyin. Yazarın resmi için dinamik içerik seçin.

• Resim: Dinamik Yazar Profil Resmi

hizalama

Tasarım sekmesine gidin ve aşağıdaki hizalamayı seçin:

• Görüntü Hizalama: Sol

boyutlandırma

Sonraki modülün boyutunu ayarlayın.

• Maksimum Genişlik: 15vh
• Modül Hizalama: Sol
• Maksimum yükseklik
  • Masaüstü: 15vh

Sınır

Son olarak, kenarlık ayarlarına bazı yuvarlak köşeler ekleyin.

• Yuvarlak Köşeler: 15px

Kenar Çubuğu Modülü Ekle

İçerik

Şimdi kenar çubuğu modülünü kullanarak kenar çubuğu widget'larını ekleme zamanı.

• Widget Alanı: Kenar çubuğu

Düzen

Önce düzeni ayarlayın.

• Kenarlık Ayırıcısını Göster: Hayır

Başlık Metni

Sonraki başlık metni ayarlarını değiştirin.

• Yazı Tipi: Bai Jamjuree
• Ağırlık: Orta
• Renk: Mercan #e98074
• Boyut: 2vh
• Harf Aralığı: 2px

Gövde metni

Gövde metniyle devam edin.

• Yazı Tipi: Bai Jamjuree
• Ağırlık: Hafif
• Renk: Koyu Gri #7f7f7f
• Vurgulu Renk: Mercan #e98074
• Boyut: 1.5vh
• Harf Aralığı: 1px
• Çizgi Yüksekliği: 1.8em

boyutlandırma

Modülün boyutunu da ayarlayın.

• Minimum Yükseklik
  • Masaüstü: 12vh
  • Tablet ve Telefon: otomatik
• Maksimum yükseklik
  • Masaüstü: 12vh
  • Tablet ve Telefon: otomatik

aralık

Biraz boşluk eklemeyi unutmayın.

• Üst Dolgu
  • Masaüstü: 1vh
  • Tablet ve Telefon: 3vh

Özel CSS

Son olarak, gelişmiş sekmeye bazı CSS kod satırları ekleyin.

• Widget: dolgu-alt: 0vh;

padding-bottom: 0vh;

• Başlık: dolgu-alt: 2vh;

padding-bottom: 2vh;

E-posta Seçeneği Ekle

Metin

Kenar çubuğumuzda ihtiyacımız olan bir sonraki modül bir e-posta optin modülüdür. Seçtiğiniz bazı içeriği ekleyin.

• Başlık: Güncellemeler
• Düğme: Abone ol

E-posta hesabı

E-postanızı bir sonraki forma bağlayın.

• Servis Sağlayıcı: E-posta Sağlayıcınız
• Liste: Seçtiğiniz liste

Alanlar

Alan ayarlarında yalnızca ilk ad alanını kullanıyoruz.

• Ad Alanını Göster

Arka plan

Ardından, varsayılan arka planı kapatın.

• Arka Plan Rengini Kullan: Hayır

Düzen

Tasarım sekmesine gidin ve düzen ayarlarını değiştirin.

• Düzen: Gövde Üstte, Form Altta
• Adı Tam Genişlik: Hayır
• E-posta Tam Genişliği: Hayır

Alanlar

Ardından alanları aşağıdaki gibi biçimlendirin:

• Arka Plan Rengi: Açık Gri #f7f7f7
• Metin Rengi: #606060
• Üst ve Alt Dolgu: 1vh
• Sol Dolgu: 1vh
• Yazı Tipi: Bai Jamjuree
• Metin Boyutu: 1.5vh
• Harf Aralığı: 1px
• Yuvarlatılmış Köşeler: 15px

Başlık Metni

Başlık metnine de stil verin.

• Başlık Seviyesi: H4
• Yazı Tipi: Bai Jamjuree
• Renk: Mercan #e98074
• Boyut: 2vh
• Harf Aralığı: 2px
• Çizgi Yüksekliği: 1em

Buton

Ardından, düğme.

• Özel Stiller
• Metin Boyutu: 1.5vh
• Metin Rengi: Beyaz #ffffff
• Arka Plan Rengi: Mercan #e98074
• Sınır Yarıçapı: 15 piksel
• Harf Aralığı: 2px
• Yazı Tipi: Bai Jamjuree
• Üst ve Alt Dolgu: 1vh

aralık

Modüle bazı özel boşluk değerleri ekleyerek modül ayarlarını ve öğreticiyi tamamlayın. Bu kadar! Şablon gövdesini oluşturmayı tamamladığınızda tüm tema oluşturucu değişikliklerini kaydettiğinizden emin olun.

• Üst Dolgu
  • Masaüstü ve Tablet: 0vh
• Alt Dolgu
  • Masaüstü: 2vh
  • Tablet ve Telefon: 6vh
• Sol ve Sağ Dolgu
  • Masaüstü ve Tablet: 0vh

Ö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

Bu Bir Sargı!

Blog gönderisi şablonlarınız için tam yükseklikte sabit kenar çubuğunu yeniden oluşturmayı bitirdik. Şablonu yukarıdaki bağlantıdan indirdiyseniz, bu eğitimin ilk bölümünde gösterildiği gibi kenar çubuğu widget'larınızı ayarlamayı unutmayın.

Kenar çubuğu veya kenar çubuğu olmayan bir insan mısınız? Herhangi bir düşünceniz veya sorunuz varsa yorumlarda bize bildirin!