Ekstralarla Bir Ürün İnceleme Sitesi Oluşturma - Bölüm 2

Extra kullanarak bir ürün inceleme sitesinin nasıl geliştirileceğini anlatan bu 4 bölümlük dizinin 2. bölümüne hoş geldiniz. Bir ürün inceleme sitesi geliştirmeye nasıl başlayacağınız konusunda kafa yoruyorsanız, bu seri tam size göre. Dahili inceleme işlevi ve akıllı gönderi kategorizasyonu ile Extra, dakikalar içinde harika görünen incelemeler, ürün gönderi şablonları, mega menüler ve kategori düzenleri oluşturmak için özel olarak donatılmıştır. Extra'nın gücünü keşfederken bana katılın.

Bu serinin 1. bölümünde Tema Seçenekleri ve Tema Özelleştirici Ayarları'nı kurarak bir ürün inceleme sitesi oluşturma yolculuğumuza başladık.

Bugün ilk ürün incelememizi yeni bir gönderi olarak ekleyerek ve Divi Builder ve Ekstra tema Ayarlarını kullanarak bu gönderi için gönderi düzenini özelleştirerek çalışmaya başlayacağız. Bu öğreticiyi tamamladıktan sonra, yazılarınızın geri kalanını kolaylıkla oluşturmak için kitaplığınızdan çekebileceğiniz kaydedilmiş bir yazı şablonuna sahip olacaksınız.

İşte İnşa Edeceğimiz Şeye Kısa Bir Bakış

Tasarım Öğelerinin Hazırlanması

Serinin bu bölümünde ürünlerimizi ekleyeceğimiz için ürün görsellerinize ihtiyacınız olacak. Bu ders için, her kategoride 3 ürün bulunan 4 kategorim olacak, bu yüzden toplam 12 görsel kullanacağım. Daha temiz bir görünüm vermek için beyaz arka plana sahip Shutterstock'tan hazır görüntüler kullanıyorum.

Gönderi düzenini tasarlamak için Görsel Oluşturucu ve biraz Özel CSS kullanacağız.

Başlayalım.

Ekstralarla Ürün İnceleme Sitesi Oluşturma - 2. Bölüm

Youtube Kanalımıza Abone Olun

İlk Ürün İncelemenizi Yeni Bir Gönderi Olarak Ekleme

WordPress kontrol panelinden, Gönderiler > Yeni Ekle'ye gidin.

Her gönderi ürün incelemeniz olacak, bu nedenle gönderinizin adı ürününüzün adı olmalıdır. Ürünüm bir fitness takipçisi olacağı için yazımın başlığı olarak “Fitness Tracker” yazacağım.

Not : Henüz yapmadıysanız, URL'nizin yalnızca ürün adını içermesi için (elbette tercihiniz) kalıcı bağlantı ayarlarınızı “Posta Adı” seçeneğine ayarlamanın şimdi tam zamanı.

Ardından, Visual Builder'ı dağıtmak için "Divi Builder Kullan" düğmesini ve ardından "Visual Builder Kullan" düğmesini tıklayın.

Visual Builder'dan tek sütunlu bir satır ekleyin ve sütuna bir metin modülü ekleyin.

Metin Modülü Ayarlarının içerik sekmesinde, içerik kutusuna aşağıdaki html'yi girin ("görsel" sekmesinde değil, "metin" sekmesinde çalıştığınızdan emin olun):

<h2 class="subtitle fancy"><span>Product Description</span></h2>

Bu, farklı bölümler için "süslü" altyazılarımız olarak hizmet edecek. Daha sonra özel CSS ile şekillendireceğiz.

h2 etiketinin hemen altına ürün açıklama metninizi ekleyebilirsiniz. Şimdilik biraz “lorem ipsum” kullanıyorum.

Geçerli satırınızın altına bir sütunluk başka bir satır ekleyin ve içine başka bir metin modülü ekleyin. Metin Modülü Ayarlarında, içerik bölümünüzün metin sekmesine aşağıdaki “Artıları ve Eksileri” h2 etiketini ekleyerek başka bir html altyazısı ekleyin.

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

Bu, ürün incelemenizin Artıları ve Eksileri bölümüne başlayacaktır.

Ardından, bir öncekinin altına bir buçuk yarım (iki sütun) satır ekleyin. Sol sütuna bir metin modülü ekleyin ve “Pros” metniyle bir h3 başlığı koyun.

Şimdi bu metin modülünü çoğaltın ve çoğaltılan modülü sağ sütuna sürükleyin. Yeni metin modülündeki h3 başlığını “Eksiler” olarak değiştirin.

İpucu : Görsel Oluşturucu'da, ayarları açmak yerine metin kutusuna tıklayıp yeni başlığı yazabilirsiniz.

Daha sonra, Artılar ve Eksiler başlıkları altında bazı alt öğeler eklemek için tanıtım yazısı modülünü kullanacağız.

Sol sütunda, “Pros” Metin Modülünün altına bir Blurb Modülü ekleyin. Bulanıklık Ayarlarının içerik sekmesinde, içerik kutusuna bir metin satırı (şimdilik boş metin kullanıyorum) ekleyin.

Ardından aşağı kaydırın ve “Simge Kullan” ı seçin. Görüntülenen Simge kutusunda artı simgesini seçin.

Tasarım sekmesine tıklayın ve aşağıdakileri güncelleyin:

Simge Rengi: #ffffff

Daire Simgesi: EVET

Daire Rengi: #5bd999

Resim/Simge Yerleşimi: Sol

Ayarları kaydet

Bu tanıtıcı modülü çoğaltın (veya kopyalayın) ve "Eksiler" metin modülünün altına sürükleyin (veya yapıştırın). Ardından, Blurb Settings Design sekmesini aşağıdaki daire rengiyle güncelleyin: #e6567a

Ayarları kaydet

Belirli bir ürün için kaç taneye ihtiyacınız olabileceğini bilmediğimizden, şimdi her sütundaki tanıtım modüllerini birkaç kez çoğaltın.

Şimdi artılarınızı ve eksilerinizi içeren satır ayarlarına gidin. İçerik sekmesi altında aşağıdakileri güncelleyin:

1. Sütun arka planı: #f8f8f8

2. Sütun arka planı: #f8f8f8

Tasarım sekmesi altında aşağıdakileri güncelleyin:

Özel Oluk Genişliğini Kullan: EVET

Oluk genişliği: 1

Sütun Yüksekliklerini Eşitle: EVET

Sütun 1 dolgusu: 20px (üstte), 20px (sağda), 20px (altta), 20px (solda)

Sütun 2 dolgusu: 20px (üstte), 20px (sağda), 20px (altta), 20px (solda)

Gelişmiş sekmesi altında, Sütun 1 Ana Öğe metin kutusuna aşağıdaki özel CSS'yi ekleyin:

 border-top: 10px solid #5bd999; 

Sütun 2 Ana Öğe metin kutusuna aşağıdaki CSS'yi ekleyin:

 border-top: 10px solid #e6567a; 

İpucu : Ekstra'nın güncellenmiş bir sürümüne sahipseniz, yeni animasyonları web sitenize uygulama olanağınız olmalıdır. Tasarım sekmesi altındaki Satır Ayarlarına gidip istediğiniz Animasyon Stilini seçerek Artılar ve Eksiler satırına bir animasyon ekleyin. Bu, kullanıcı sayfayı aşağı kaydırdıkça Artılar ve Eksiler bölümünüzü açar.

Ayarları kaydet

“Artılar ve Eksiler” alt başlığını içeren ikinci satırı çoğaltın (veya kopyalayın) ve yeni bitirdiğimiz satırın altına sürükleyin (veya yapıştırın). Ardından h2 başlığını "Teknik Özellikler" olarak değiştirin.

Artıları ve eksileri liste öğelerini içeren iki sütunlu satırı çoğaltın ve "Özellikler" başlıklı yeni metin modülünün altına yerleştirin. Sütundan "Artılar" ve "Eksiler" başlıklarını içeren iki metin modülünü silin.

Şimdi sol sütundaki ilk tanıtım modülü için Bulanıklık Ayarları'na tıklayın.

İçerik sekmesi altında Simgeyi bir onay işaretiyle değiştirin.

Tasarım sekmesi altında, Daire Rengi'ni #222222 olarak değiştirin.

Ayarları kaydet

Şimdi diğer tanıtıcı modülleri silin ve kopyalayıp doğru yerlere sürükleyerek yeni güncellediğiniz modülle değiştirin.

Şimdi Satır Ayarlarına gidin ve hem Sütun 1 Ana Öğe metin kutusunda hem de Sütun 2 Ana Öğe metin kutusundaki Özel CSS'yi aşağıdakilerle değiştirin:

border-top: 10px solid #222222;

Ayarları kaydet

Şimdi bu gönderi düzenine eklememiz gereken son şey bir "satın al" düğmesi. Devam edin ve yeni bir tek sütunlu satır oluşturun ve bir Düğme Modülü ekleyin. Ardından düğme modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

Düğme Metni: Şimdi Satın Alın

Düğme URL'si: [URL'yi girin] (büyük olasılıkla bu, sonunda bir üçüncü taraf siteye bir bağlı kuruluş bağlantısı olacaktır)

URL Açılır: Yeni Sekmede

Tasarım sekmesi altında…

Düğme Hizalama: Merkez

Metin Rengi: Koyu

Düğme için Özel Stilleri Kullan: EVET

Düğme Metin Boyutu: 30px

Düğme Metin Rengi: #222222

Düğme Vurgulu Metin Rengi: #5bd999

Düğme Vurgulu Arka Plan Rengi: #ffffff

Düğme Vurgulu Kenarlık Rengi: #5bd999

Ürün gönderi düzeninizin içerik bölümünüz için bu kadar. Sayfayı kaydettiğinizden emin olun. Sayfayı kaydettikten sonra, gönderiyi wordpress kontrol panelinden düzenlemek için görsel oluşturucudan çıkın.

Gönderinize Yorum Ekleme

Yazı düzenleyici sayfasının en altına gidin ve “Kutu İçeriğini İncele” başlıklı kutuyu bulun.

Extra'ya yapılan bu akıllı ekleme, gönderilerinize bir ürün derecelendirmesi eklemenize olanak tanır. Derecelendirme sistemi, bir veya daha fazla arızaya sahip olacak şekilde tasarlanmıştır. Döküm, genel derecelendirmeyi oluşturan bir bileşendir. Örneğin, bir kamerayı derecelendirecekseniz, örnek arızalar tasarım, performans, pil ömrü vb. gibi şeyleri içerir… Bunlar, ayrı bir derecelendirme yüzdesi ekleyebileceğiniz kamera bileşenleridir. Extra, daha sonra bu bileşenlere dayalı olarak genel derecelendirme yüzdesini hesaplayacak ve İnceleme kutusunda görüntüleyecektir. Gözden Geçirme kutusunda ayrıca bir gözden geçirme kutusu başlığı, özet ve özet başlığı için faydalı giriş alanları bulunur.

İncelemenizi eklemek için İnceleme Kutusu İçeriğini aşağıdakilerle güncelleyin:

İnceleme Kutusu Başlığı: [inceleme kutusu için başlık girin] ("Ürün İncelemesi" veya "Editör İncelemesi"ni öneririm)

Özet: [özeti girin]

Özet Başlığı: [özet için bir başlık girin] (Basit olması için “Özet” kullanıyorum)

Ardından, bir başlık ve derecelendirme yüzdesi içeren dört dökümü aşağıdaki gibi ekleyin:

Arıza #0

Başlık: Tasarım

Değerlendirme: %85

Arıza #1

Başlık: Performans

Değerlendirme: 90%

Arıza #2

Başlık: Pil Ömrü

Değerlendirme: %70

Arıza #3

Başlık: Özellikler

Değerlendirme: %85

Artık Derecelendirmenizi yaptığınıza göre, yayınlamadan önce yayınımıza son dokunuşları yapalım.

Gönderinize Kategori Atayın

Kategorinin yanındaki onay kutusunu tıklayarak gönderinize/ürününüze doğru kategoriyi atadığınızdan emin olun. Bu durumda, bu gönderi bir fitness takipçisi için olduğu için “Sağlık ve Fitness” kategorisini seçeceğim. Ayrıca, "kategorize edilmemiş" kutusunun işaretini kaldırın.

İşte kullandığım ürünlerin ve kategorilerinin bir dökümü:

• Giyim
  • Ayakkabı
  • İzlemek
  • Havalı Çoraplar
• Mutfak
  • Mutfak Bıçakları
  • karıştırıcı
  • Kesme tahtası
• Sağlık ve Fitness
  • Fitness Takipçisi
  • Ağırlıklar
  • koşu bandı
• Elektronik
  • Kamera
  • kulaklıklar
  • Dizüstü bilgisayar

Sayfanın çok aşağısında Ekstra Ayarlar kutusunu bulacaksınız. Bu kontroller, bu belirli gönderi için varsayılan tema ayarlarını geçersiz kılmanıza olanak tanır. Bunu elbette istediğiniz gibi özelleştirebilirsiniz, ancak bu örnek için aşağıdaki kutuları işaretliyorum:

Öne Çıkan Gönderi (Bu, ürünün belirli kategori modüllerinde öne çıkan bir gönderi olarak çekilmesini sağlar.)

Yazar Kutusunu Gizle

Son olarak, öne çıkan görselinizi ekleyin. Öne çıkan görüntü için tam genişlikte 0 tek sütunlu bir düzen kullanacağımızdan, en az 1280 piksel genişliğinde olduğundan emin olun.

Gönderinizi yayınlayın.

Devam edin ve bu şablonu kaydedin, böylece tüm ürünleriniz/gönderiniz için bu işlemi çoğaltabilirsiniz. Şablonu kaydetmek için sayfanın altındaki görsel oluşturucu menüsündeki “Kitaplığa Kaydet” simgesine tıklayın, bir şablon adı girin ve Kitaplığa Kaydet'e tıklayın.

Artık gönderilerinizin geri kalanını eklemeye gittiğinizde, bu şablonu kitaplıktan yükleyebilir ve yeni ürün incelemesi için içeriği doldurabilirsiniz. O zaman süreç çok daha hızlı hale gelir.

Özel CSS Ekleme

Neredeyse bitirdik. Gönderinin bazı öğelerine stil vermek için temamıza bazı özel CSS eklememiz gerekiyor. Bunu yapmak için WordPress Kontrol Panelinden Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdakileri girin:

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Kaydet ve Yayınla

Şimdi sonucumuzu kontrol edelim.

Kullanıcı Derecelendirme Sistemi

Gönderinin alt kısmında bir kullanıcı yıldız oranı sisteminiz olduğuna dikkat edin.

Burada ziyaretçileriniz, yıldız simgelerinin üzerine gelerek ve seçtikleri yıldız seviyesine tıklayarak herhangi bir ürün için bir başlangıç ​​puanı gönderebilir.

Genel kullanıcı derecelendirmesi, alıntı sonrası meta verilerde görüntülenecektir.

Bu özelliği her zaman Ekstra Ayarlar kutusundan devre dışı bırakmayı seçebilirsiniz.

İşte bu kadar. Umarım bu serinin 2. bölümünü beğenmişsinizdir.

Yakında: Ürünlerinizi Sergilemek için Kategori Düzenleri Oluşturma

3. bölümde, Ana Sayfa ve Tüm Kategoriler sayfası için kategori düzenlerinin nasıl oluşturulacağını göstereceğim. Serinin 3. bölümüne hazırlanmak için 4 kategorinin her biri için en az 3 ürün eklemek için yeni gönderi şablonunuzu kullandığınızdan emin olun. Ürünlerinizi görüntüleyecek kategori modüllerini doldurmak için bunlara ihtiyacınız olacak.

Bölüm 3'te oluşturmayı bekleyebilecekleriniz şunlardır:

Aşağıda soru veya yorum göndermekten çekinmeyin. Cevabınızı sabırsızlıkla bekliyorum.