Divi ile Orta Stil Blog Nasıl Oluşturulur

Yayınlanan: 2017-07-06

Bugünün Divi blog gönderisinde, Medium blog ile aynı tarzda kendi blog web sitenizi nasıl oluşturacağınıza dair bazı harika ipuçlarını paylaşacağız.

Medium, blog yazmak için en çok kullanılan platformlardan biri olarak biliniyor. Kitleleriyle düzenli olarak etkileşime giren büyük bir blogcu topluluğuna sahip olmakla kalmaz, aynı zamanda blog platformları da çok güzel bir kullanıcı deneyimi sunar. Bu tam olarak her blogger'ın istediği şeydir. Mesajı açık bir şekilde ve okuyucunun rahat hissedeceği bir ortamda ilettiklerinden emin olmak isterler.

Bununla birlikte, Medium'da blog yazmanın sınırlamaları vardır. Örneğin, SEO'nun hiçbir faydası yoktur. Medium blog stilinden ilham alan kendi blogunuzu oluşturarak, Medium bloguyla zaten sahip oldukları o tanıdık hissi devam ettirebilir ve onu kendi web sitenize getirebilirsiniz.

Başlayalım

Youtube Kanalımıza Abone Olun

Size Orta stilde bir blog oluşturmanın en önemli kısımlarını göstereceğiz ve ayrıca adım adım bazı önemli kısımları nasıl oluşturacağınızı da gösteriyoruz. Örneğin; Tüm gönderileriniz için kullanabileceğiniz Orta tarz bir blog gönderisi şablonu nasıl yapılır. Şablon şöyle görünür:

Ayrıca, daha da benzer görünmesi için Okumaya Değer ve Vurgula ve Paylaş eklentilerini nasıl ekleyeceğinizi göstereceğiz. Okumaya Değer sonucu şöyle görünür:

Vurgula ve Paylaş aşağıdaki etkiye sahip olacaktır:

Orta Blog Gibi Basit Bir Menü Oluşturun

Medium web sitesini ziyaret ederken açıkça fark edebileceğiniz şeylerden biri, menülerinin basitliğidir. Ziyaretçilerin gezinmesini hemen kolaylaştıran çok fazla seçenek yok. Ziyaretçiler, ana sayfada vurgulanan blog yazılarını keşfedebilir ve orada kalmaya devam edebilir.

Menü Öğeleri

Web sitenizin geri kalanının sadeliğine uyan bir logo seçin ve menünüzde küçük bir boyut vererek ince olduğundan emin olun. Logonun web sitenizde paylaştığınız içeriğin önüne geçmesini kesinlikle istemezsiniz.

Ardından, navigasyonunuza çok fazla sayfa eklemeyin. Web siteniz tamamen blogla ilgili olacağından, ana sayfa muhtemelen yeterlidir. Ziyaretçilere kendinizden biraz daha bahsetmek isterseniz, bir hakkında sayfası eklemeyi de düşünebilirsiniz.

Devam edersek, insanların birkaç anahtar kelimeyle blog yazılarınızda kolayca arama yapabilmesi için bir arama simgesi ekleyin. Her şey ürettiğiniz ve bulmayı kolaylaştırdığınız içerikle ilgili.

Yukarıdaki örnekte, Tema Özelleştiricideki Birincil Menü Çubuğu için aşağıdaki ayarları kullandık:

  • Menü Yüksekliği: 54
  • Logo Maksimum Yükseklik: 37
  • Metin Boyutu: 18

Kontrast ve Basit Yazı Tipleri ile Renk Paleti Kullanın

Medium blogu, platformları boyunca içeriğin okunmasını kolaylaştıran üç ana renk kullanır. Renklerden ikisi siyah ve beyaz gibi görünse de göze biraz daha yumuşak geliyor. Üçüncüsü açık gri ama okunabilir bir renk. Birincil menüde kullanılan renkleri ve yazı tipini değiştirmek için Tema Özelleştirici'deki Birincil Menü Çubuğunda aşağıdaki ayarlamaları yapın:

  • Yazı Tipi: Kaynak Sans Pro
  • Metin Rengi: rgba(0,0,0,.44)
  • Aktif Bağlantı Rengi: rgba(0,0,0,.44)
  • Arka Plan Rengi: #fbfcfd

Arama Simgesini Dahil Et

Ayrıca, Arama Simgesini birincil menünüze dahil etmek için Başlık ve Gezinme > Başlık Öğeleri > Arama simgesini göster'e gidin.

Sabit Gezinti Çubuğunu Devre Dışı Bırak

Medium blogunun yaptığı başka bir şey de gezinme çubuğunu sayfanın en üstünde tutmaktır. Bu şekilde, ziyaretçiler okurken gereksiz yere kesintiye uğramazlar. Divi web sitenizdeki sabit gezinme çubuğunu devre dışı bırakmak için WordPress panel > Divi > Tema Seçenekleri > Genel Ayarlar > Sabit Gezinti Çubuğunu Devre Dışı Bırak seçeneğine gidin.

Ana Sayfa Blog Modüllerinizi Kategorilere Göre Stillendirin

Ardından, web sitenizin ana sayfasını kategorilere göre biçimlendirmek istiyorsunuz. Oluşturduğunuz bloga bağlı olarak, ana sayfanızda ziyaretçilerinizin en çok okumaktan hoşlandığı şeylere uyan farklı bölümler oluşturabilirsiniz. En azından şu tür kategorilerden yararlanmanızı öneririz: popüler, en yeni ve önerilen. WordPress menünüzdeki 'Gönderiler'in 'Kategoriler' sayfasında farklı kategoriler oluşturarak ve her gönderiyi gönderinin içinde bir veya daha fazla kategoriye atayarak bu kategorilere blog gönderileri atayabilirsiniz.

Gerçekten yapmak istediğiniz başka bir şey, ana sayfanızdaki farklı blog modüllerini ve bölümlerini takip etmeyi kolaylaştırmaktır. Bunu başarmak için Divi oluşturucudaki standart blog kılavuzunu kullanabilir veya biraz daha gelişmiş bir şey arayabilirsiniz. Aşağıda kullanmayı düşünebileceğiniz üç eklenti listeledik.

Divi Makale Kartı Eklentisi

Divi Makale Kartı eklentisi, Divi 100 sırasında blogumuzda paylaşılan ücretsiz bir eklentidir. Bu eklentide kullanılan stil temizdir ve hoş bir vurgulu efekti vardır. Bu basit bir efekt ancak blogunuz için ekstra küçük bir dokunuş yaratabilir.

Eklenti tamamen ücretsizdir, sadece gönderiye gidin ve indirin!

Divi Özel Blog Modülü

Güzel görünen bir Blog Modülü düzeni oluşturan bir başka eklenti de Divi Özel Blog Modülüdür. Bu, öne çıkan görselin sol tarafa yerleştirilmesiyle Medium blog gönderilerine bir öncekinden daha fazla benziyor.

Eklentinin fiyatı 20$'dır.

Divi Blog Ekstraları

Blogunuzu Medium blog gibi görünmenize yardımcı olabilecek son eklenti Divi Blog Extras'tır. Bu eklenti ayrıca Orta stil blogunuzu oluşturmanıza yardımcı olabilecek birçok farklı Blog modülü düzenine sahiptir.

Eklenti, Tek Site Lisansı için 15 ABD Doları ve Genişletilmiş Lisans için 30 ABD Doları'dır.

Blog Gönderisi Şablonu Oluştur

Medium, oluşturulan tüm gönderiler için standart bir blog gönderi biçimine sahiptir. Tasarım, gönderinin özüne odaklanır: içerik. Kullanılan blog yazısı formatı, web sitesinin geri kalanıyla aynı doğrultuda: basit. Yazı boyunca ekleyebileceğiniz yazılı içerik ve medya kombinasyonunu kullanarak kovalamayı keser.

Divi aynı olanakları sunar. Divi oluşturucunun sağladığı farklı modülleri kullanarak blog yayınınızı istediğiniz kadar basit veya hassas hale getirebilirsiniz. Bu, size adım adım nasıl oluşturulacağını göstereceğimiz örnek düzendir:

Divi Gönderi Ayarları

Yeni bir gönderi ekleyerek, ona bir başlık vererek ve Divi oluşturucuyu etkinleştirerek başlayın. Ardından, Divi Gönderi Ayarlarının aşağıdaki gibi olduğundan emin olun:

  • Sayfa Düzeni: Tam Genişlik
  • Nokta Gezinme: Kapalı
  • Kaydırmadan Önce Gezintiyi Gizle: Varsayılan
  • Yazı Başlığı: Gizle

Yazar (Masaüstü)

Düzeni yapmak için Visual Builder'a geçeceğiz. İki satırlı yeni bir bölüm ekleyerek başlayın. İlk sütuna bir Görüntü Modülü ve ikinci sütuna iki Metin Modülü ekleyerek devam edin. Bölümün ayarlarını açın ve arka plan renginiz olarak '#fbfcfd' seçeneğini ekleyin.

Görüntü Modülü

Görüntü Modülünü açın, görüntüyü İçerik sekmesine yükleyin ve Görüntü Hizalamasını Tasarım sekmesinde 'Sola' yerleştirin. Devam ederek, Tasarım sekmesinin Aralık alt kategorisinde Üst Kenar Boşluğuna '-%5' ve sol kenar boşluğuna '%25' ekleyin.

Bundan sonra, Gelişmiş sekmesinin Özel CSS alt kategorisindeki Ana Öğeye aşağıdaki kodu ekleyin:

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

İlk Metin Modülü

Yazarın adını İçerik sekmesindeki İçerik Kutusuna ekleyin ve Tasarım sekmesinin Metin alt kategorisinde aşağıdaki ayarlamaları yapın:

  • Metin Yönü: Sol
  • Metin Yazı Tipi: Source Sans Pro
  • Metin Yazı Tipi Boyutu: 18
  • Metin Rengi: rgba(0,0,0,0.8)
  • Metin Satırı Yüksekliği: 1.7em

Üst Kenar Boşluğuna '-%3' ve Sol Kenar Boşluğuna '-%70' eklemek için aynı sekmeyi aşağı kaydırın.

İkinci Metin Modülü

İkinci Metin Modülüne kısa açıklamayı yazın ve Tasarım sekmesinin Metin alt kategorisinde aşağıdaki ayarlamaları yapın:

  • Metin Yönü: Sol
  • Metin Yazı Tipi: Source Sans Pro
  • Metin Yazı Tipi Boyutu: 14
  • Metin Rengi: rgba(0,0,0,0.44)
  • Metin Satırı Yüksekliği: 1.7em

Ek olarak, aynı sekmeyi aşağı kaydırın ve Aralık alt kategorisinde Üst Kenar Boşluğuna '-%5' ve Sol Kenar Boşluğuna '-%70' ekleyin.

Satır Görünürlüğü

Son olarak, Gelişmiş sekmesinin Görünürlük alt kategorisinde Satır ayarlarını açın ve telefonlarda ve tabletlerde satırı devre dışı bırakın.

Yazar (Mobil)

Tam genişlikte bir satırla aynı bölüme başka bir satır ekleyin. Önceki satırdaki Görüntü Modülü ve Metin Modüllerini klonlayarak ve tam genişlik satırına yerleştirerek devam edin. Birisi mobil veya tablette sayfayı açtığında, her modülde ekranın ortalanmasını sağlamak için bazı değişiklikler yapmamız gerekecek.

Görüntü Modülü

Görüntü Modülünü açın ve Görüntü Hizalamasını 'Merkez'e getirin.

İlk Metin Modülü

İlk Metin Modülünü açın ve Tasarım sekmesinin Metin alt kategorisinde Metin Yönlendirmesini 'Merkez' olarak değiştirin.

Aynı sekmeyi aşağı kaydırın, Sol Kenar Boşluğunu silin ve Üst Kenar Boşluğunu koruyun.

İkinci Metin Modülü

Ayrıca, ikinci Metin Modülü için de aynı şeyi yapın. Metin Yönlendirmesini 'Orta'ya getirin ve İçerik sekmesinin Boşluk alt kategorisindeki Sol Kenar Boşluğunu silin.

Satır Görünürlüğü

Son olarak, satır ayarlarını açın ve masaüstleri için satırı devre dışı bırakın.

Yazı Başlığı Modülü

Divi Gönderi Ayarlarımızda gönderi başlığını devre dışı bıraktığımız için, şimdiye kadar kullandığımız bölümün tam genişlikli satırına bir Gönderi Başlığı modülü ekleyeceğiz.

İçerik sekmesinin Elementler alt kategorisinde hangi elementlerin görünmesini istediğimizi seçebiliriz. Yazardan daha önce bahsettiğimiz için başlık dışında her şeyi devre dışı bıraktık.

Üstelik; Tasarım sekmesinin Metin ve Başlık Metni alt kategorilerinde aşağıdaki ayarlamaları yapın:

  • Metin Yönü: Merkez
  • Başlık Yazı Tipi: Source Sans Pro
  • Başlık Yazı Tipi Stili: Kalın
  • Başlık Yazı Tipi Boyutu: 47px (Masaüstü), 40 (Tablet), 35 (Telefon)
  • Başlık Metin Rengi: rgba(0,0,0,0.8)

Tam Genişlikte Görüntüler

Ekleyeceğimiz ilk tam genişlikte resim, öne çıkan resmin bir temsilidir. Bir Tam Genişlikli Bölüm ekleyin, buna bir Tam Genişlikli Resim Modülü yerleştirin ve İçerik sekmesine bir resim yükleyin. Bu kadar basit.

Metin Modülleri

Devam ederek, blog gönderisi için kullanılan Metin Modüllerini oluşturacağız. Tam genişlikte bir satıra sahip standart bir bölüm ekleyin ve içine bir Metin Modülü yerleştirin. Bu örnekte, 'Cardo' yerleşik bir yazı tipi ailesi olduğu için 'Gürcistan' yerine 'Cardo' yazı tipi ailesini kullanıyoruz.

Ayrıca, Metin modülünün ayarlarını açın, İçerik kutusuna bazı örnek metinler yazın ve Tasarım sekmesine gidin. Metin alt kategorisinde aşağıdaki ayarlamaları yapın:

  • Metin Yönü: Sol
  • Metin Yazı Tipi: Cardo
  • Metin Yazı Tipi Boyutu: 25px (Masaüstü), 19px (Tablet), 17px (Telefon)
  • Metin Rengi: rgba(0,0,0,0.8)
  • Metin Satır Yüksekliği: 1.8em

Aynı sekmeyi aşağı kaydırın, Boyutlandırma alt kategorisindeki Maks Genişliğe '800px' ekleyin ve Aralık alt kategorisindeki Sol Kenar Boşluğuna '%10' ekleyin.

Video Modülü

Blog yayınınıza katma değer verebilecek son şey, bir videoyu entegre etmektir. Bunu yapmak için, daha önce yapılmış bölümü Metin Modülü ile klonlamanız ve sahip olduğunuz toplam içeriği iki metin modülü arasında bölmeniz gerekir. İki bölümün tam arasına, tam genişlikte bir satıra sahip başka bir bölüm ekleyeceğiz. Bu tam genişlik satırına bir Video Modülü ekleyeceğiz.

Yapının arka uçta nasıl görünmesi gerektiği:

URL'yi eklemek dışında Video Modülünde herhangi bir ayar yapmadık.

Şablonu Kaydet

Farklı bölümleri klonlayarak ve içeriğini değiştirerek oluşturduğunuz blog gönderisine uyacak şekilde yeniden kullanabilirsiniz. Bunu yaptıktan sonra, 'Kütüphaneye Kaydet'i tıklayarak ve ona bir isim vererek blog yazısı şablonunu kaydedebilirsiniz.

Şablonu bir daha kullanmak istediğinizde, 'Kütüphaneden Yükle' üzerine tıklayın ve şablonu yükleyin.

Okumaya Değer

Medium blog oluşturmayla ilgili tipik bir şey, belirli bir blog gönderisini okumanın birkaç dakika sürmesidir. Bu genellikle sayfanın hemen başında görünür ve kullanıcılara ve okumayı bitirmelerinin ne kadar süreceğine dair bir tahmin verir. Zamanın en değerli şey olduğu bir çağda, bu, insanların blog yazısını okuyup okumama konusunda karar vermelerine yardımcı oluyor.

Oraya ulaşmanıza yardımcı olan ücretsiz bir WordPress eklentisi, Well Done Marketing tarafından Okunmaya Değerdir. Bağlantısını verdiğimiz sayfadan indirebilir veya eklentilerde arayabilirsiniz. Bu eklentinin güzel yanı, okuma zamanının nerede görünmesini istediğinizi seçebilmenizdir; sayfalar, gönderiler veya her ikisi. Ayrıca yerleşimi ve formatı da seçebilirsiniz.

Eklentiyi indirip etkinleştirdikten sonra, menüsündeki 'Okuma İlerlemesi' seçeneğine tıklayın. Devam edin ve yapmanız gereken değişiklikleri yapın. Bir okuma süresi koymak genellikle yalnızca gönderiler için kullanılır, bu nedenle çoğu insan muhtemelen yalnızca bu seçeneği seçecektir.

Stil sekmesinde kullanmak istediğiniz stili seçebilirsiniz. Başlıktaki gibi aynı yazı tipini kullandığınızdan emin olun. Herhangi bir ekstra değişiklik yapmak istiyorsanız, özel CSS kodu da ekleyebilirsiniz.

Vurgula ve Paylaş

Medium ile ilgili gerçekten tipik olan bir başka şey de, bir şeyi vurgulama, paylaşma veya beğenirseniz yorum yapma olanağıdır. Blog gönderisine, onu okuyan insanlarla etkileşime girmesine izin vererek katma değer sağlar. Benzer bir şey yapmanıza yardımcı olacak bir eklenti bulduk; Ayrıca kullanımı ücretsiz olan Vurgula ve Paylaş eklentisi.

Ayarlar > Vurgula ve Paylaş > Kullanmak istediğiniz sosyal medya kanallarını etkinleştirme seçeneğine giderek insanların hangi sosyal medya kanallarını paylaşabileceğine karar verebilirsiniz .

toparlamak

Bu gönderiyi okuduktan sonra, Medium'un en alakalı bölümlerinden bazılarını içeren Medium tarzı blogunuzu oluşturmaya başlayabilmeniz gerekir. Medium blog'un yaptığı gibi basit tutmak için birçok olanağınız var, ancak yine de bazı kişisel dokunuşlarla aşılayın. Herhangi bir sorunuz veya öneriniz varsa; Harika Divi topluluğumuzla iletişim halinde kalabilmemiz için aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Öne Çıkan Görsel Julia Tim / Shutterstock.com