Ekstra Ürün İnceleme Siteleri Oluşturma – Bölüm 2
Ekstra kullanarak ürün inceleme sitelerinin nasıl geliştirileceğine dair bu bölümün 4. Serisi’nin 2. bölümüne hoş geldiniz. Bir ürün inceleme sitesi geliştirmeye nasıl başlayacağınız konusunda beyninizi sıkarsanız, bu seri sizin için uygundur. Varsayılan inceleme ve akıllı yayınların kategorizasyonu işlevi ile Extra, birkaç dakika içinde harika bir görünüm, ürün sonrası şablon, mega menü ve kategori düzeni yapmak için özel olarak donatılmıştır. Ekstra gücü keşfettiğimizde bana katılın.
Bu serinin 1. bölümünde, tema seçeneklerini ve tema ayar ayarlarını hazırlayarak bir ürün inceleme sitesi oluşturma yolculuğumuza başladık.
Bugün, ilk ürün incelememizi yeni bir yazı olarak ekleyerek ve Divi Builder ve ekstra tema ayarlarını kullanarak gönderinin düzenini ayarlayarak çalışmaya başlayacağız. Bu öğreticiyi tamamladıktan sonra, yayınlarınızın geri kalanını kolayca yapmak için kütüphanenizden çekilebileceğiniz depolanmış bir yayın şablonunuz olacaktır. İşte ne inşa edeceğimizin bir gözü Tasarım Elemanları Hazırlama Ürünlerimizi bu diziye ekleyeceğimiz için ürün resminize ihtiyacınız olacak. Bu öğretici için, her kategoride 3 ürünle 4 kategorim olacak, bu yüzden toplam 12 resim kullanacağım. Daha temiz bir görünüm vermek için beyaz bir arka planla Shutterstock’tan stok görüntüleri kullanıyorum.
Gönderinin düzenini tasarlamak için görsel bir oluşturucu ve küçük bir özel CSS kullanacağız. Başlayalım. Ekstra Ürün İnceleme Siteleri Oluşturma – Bölüm 2 YouTube Kanalına Abone Oluşturma İlk ürün incelemenizi WordPress Gösterge Tablosundan yeni bir yazı olarak ekliyoruz, Posta> Yeni Ekle. Her yazı, yayın adınızın ürün adınız olması için ürün incelemeniz olacaktır. Ürünüm bir fitness izleyici olacağından, yazımın başlığı olarak “Fitness Tracks” i gireceğim. Not: Bunu yapmadıysanız, şimdi kalıcı bağlantı ayarlarınızı “Post Adı” seçeneğine ayarlamak için doğru zamandır, böylece URL’nizin yalnızca ürün adlarını (elbette tercihleriniz) içermesi için. Ardından, “kullanın” kullanın. Divi Builder “düğmesi ve ardından görsel oluşturucuyu yaymak için” Visual Builder kullan “düğmesi.
Visual Builder’dan bir Sıra Bir sütunu girin ve metin modülünü sütuna ekleyin. Metin modülü ayarlarının içerik sekmesinde, içerik kutusuna aşağıdaki HTML’yi girin (“Metin” sekmesinde çalıştığınızdan emin olun, “görsel” sekmesinde değil):
Ürün Açıklama
Bu, farklı parçalar için “lüks” altyazılarımız olarak işlev görecektir. Daha sonra özel CSS ile ayarlayacağız.
H2 etiketinin hemen altında ürününüzün metin açıklamasını ekleyebilirsiniz. Şimdilik birkaç “Lorem Ipsum” kullanıyorum.
Geçerli satırınızın altına bir satır daha 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 H2 “Artıları ve Eksileri” etiketlerini girerek başka bir HTML altyazı ekleyin.
artıları ve eksileri
Bu, ürün incelemenizin artılarını ve eksilerini başlatacaktır. Ardından, önceki satırın altına bir yarı-ortalama (iki sütun) ekleyin. Sol sütunda metin modülünü ekleyin ve H3 başlığını “Pro” metniyle verin.
Şimdi metin modülünü çoğaltın ve modülün diyeti sağ sütuna kopyalanır. Yeni metin modülündeki H3 başlığını “Eksileri” olarak değiştirin. İpucu: Görsel Oluşturucunuzda metin kutusuna tıklayın ve ayarları açmak yerine yeni bir başlık yazmanız yeterlidir. Ardından, artıları ve eksileri başlıkları altına birkaç alt öğe eklemek için açıklama modülünü kullanacağız. Sol sütunda, “Pro” metin modülünün altında bulanıklık modülünü ekleyin. Bluhb Ayarları İçerik sekmesinde, içerik kutusuna bir metin satırı ekleyin (şimdilik yapay bir metin kullanıyorum). Ardından aşağı kaydırın ve “Simge Kullan” ı seçin. Görünen simge kutusunda artı sembolünü seçin. Aşağıdaki tasarım sekmesine tıklayın ve Güncelleme: Icon Rengi: #FFFFFF Circle Icon: Evet Daire Renk: #5BD999 Resim Yerleştirme/Simge: Sol Çift ayarları kaydedin (veya kopyalayın) Açıklama modülünü ve “Eksileri” metin modülünün altına sürükleyin (veya yapıştırın). Ardından aşağıdaki daire rengiyle Blurb ayarları tasarım sekmesini güncelleyin: #e6567a Ayarları Kaydet Şimdi, belirli ürünler için ne kadar ihtiyacınız olabileceğini bilmediğimiz için her sütundaki açıklama modülünü birkaç kez çoğaltın. Şimdi artılarınızı ve eksilerini içeren satır ayarlarına gidin. İçerik sekmesinin altında, aşağıdakileri güncelleyin: Arka Plan Sütunu 1: #F8F8F8 Arka Plan Sütun 2: #F8F8F8 Tasarım sekmesinin altında, aşağıdakileri güncelleyin: Özel Gasch genişliğini kullanın: Evet Sütleme Genişliği: 1 Eşit Sütun Yüksekliği: Evet Dolgu Sütun 1: 20px (üst), 20px (sağ), 20px (alt), 20px (sol) dolgu sütunu 2: 20px (üst), 20px (sağ), 20px (alt), 20px (sol) Gelişmiş sekmesinin altına, ana öğenin metin kutusuna aşağıdaki özel CSS ekleyin: Sınır Top: 10px katı #5BD999; Aşağıdaki CSS’yi ana öğenin metin kutusuna ekleyin. Sütun 2: Sınır Top: 10px Katı #E6567A; İpucu: Güncellenmiş bir ekstra sürümünüz varsa, web sitenize yeni animasyonlar uygulayabilmeniz gerekir. Tasarım sekmesinin altındaki satır ayarlarını girerek artılara ve eksilere animasyon ekleyin ve istediğiniz animasyon stilini seçin. Bu, kullanıcı sayfayı aşağı kaydırdığında artılarınızı ve CONS bölümlerinizin görünmesini sağlar.“Artıları ve Eksileri” altyazılarını depolayan ikinci sıra çift düzenlemesini kaydedin ve yeni bitirdiğimiz sıranın altında sürükleyin (veya yapıştırın). Ardından H2 üstbilgisini “özellikler” olarak değiştirin. Pro ve eksileri listesi içeren iki sütunu yinelendirin ve öğeleri “teknik özellikler” başlığı ile yeni metin modülünün altına yerleştirin. Sütundaki “Artıları” ve “Eksileri” başlıklarını içeren iki metin modülü silin. Şimdi sol sütundaki ilk bulanıklık 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, dairenin rengini #222222 olarak değiştirin.
Ayarları kaydedin Şimdi diğer modülü silin ve çoğaltarak ve doğru yere sürükleyerek yeni güncellediklerinizle değiştirin. Şimdi satır ayarlarını açın ve ana öğe sütunu 1 ve metin kutusunun metin kutusundaki özel CSS’yi değiştirin Aşağıdakilerle birlikte 2 sütun ana öğesinin: Sınır üstü: 10px katı #222222; Ayarı kaydedin Şimdi bu yazının düzenine eklememiz gereken son şey “Satın Al” düğmesidir. Devam edin ve yeni bir sütun satırı yapın ve modül düğmesini ekleyin. Ardından, düğme modülünün ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesinin altında …
Metin Düğmesi: Şimdi Satın Al URL Düğmesi: [URL girin] (büyük olasılıkla bu, sonunda üçüncü taraf bir siteye bağlı bir bağlantı haline gelecektir) Açık URL: Tasarım sekmesinin altındaki yeni sekmede … düğmenin hizalanması: orta renk metninin hizalanması : Dark Düğme için Özel Bir Stil Kullan: Evet Metin Boyutu Düğmesi: 30px Metin Renk Düğmesi: #2222222 Renk Metin Renk Gezin: #5bd999 Arka Plan Renk Gezin düğmesi: #fffff Renk Gezinme Düğmesi: #5BD999 Hepsi ürün yayınınızın düzeninin içerik bölümünüz içindir. Sayfayı kaydettiğinizden emin olun. Sayfayı kaydettikten sonra, Gönderiyi WordPress kontrol panelinden düzenlemek için görsel üreticisinden çıkın. Gönderi yazınıza bir inceleme ekleyin, düzenleyici sayfasının altına doğru kaydırın ve “İnceleme Kutusu’nu doldur” başlıklı bir kutu bulun.
Bu ekstra için Smart eklenmesi, gönderinize ürün sıralaması eklemenizi sağlar. Derecelendirme sistemi, bir veya çok fazla hasara sahip olacak şekilde tasarlanmıştır. Ayrıntılar, genel sıralamayı oluşturan bileşenlerdir. Örneğin, kamerayı sıralayacaksanız, detay örnekleri tasarım, performans, pil ömrü vb. Gibi şeyleri içerecektir … Bu, sıralamanın ayrı bir yüzdesini ekleyebileceğiniz bir kamera bileşenidir. Ekstra daha sonra bu bileşenlere dayanarak derecelendirmenin toplam yüzdesini hesaplayacak ve inceleme kutusunda görüntüleyecektir. İnceleme kutusunun ayrıca inceleme kutusu, özet ve özet başlık başlığı için yararlı bir giriş alanı vardır. İncelemenizi eklemek için, inceleme kutusunun içeriğini aşağıdakilerle güncelleyin: Başlık İnceleme Kutusu: [İnceleme kutusunun başlığını girin] (“Ürün İncelemesi” veya “Editionyal İnceleme”) Özet: [Özet Girin] Özet Başlık : [Özet için başlığı girin] (basit kalmasını sağlamak için yalnızca “Özet” kullanıyorum) Sonraki sıralama başlığı ve yüzdesi aşağıdaki gibi dört ayrıntı ekleyin: Hasar #0 Başlık: Sıralama Tasarımı:% 85 Hasar #1 Başlık: Başlık: Sıralama Performansı:% 90 Hasar #2 Başlık: Pil Ömrü Sıralama:% 70 Hasar #3 Başlık: Sıralama Özelliği:% 85
Şimdi sıralamanızı aldıktan sonra, yayınlamadan önce gönderimize son bir dokunuş verelim. Gönderiniz için kategoriyi ayarlayın, kategorinin yanındaki onay kutusunu tıklayarak yayın/ürününüz için doğru kategoriyi ayarladığınızdan emin olun. Bu durumda, bu yazı fitness izleme için olduğu için “Sağlık ve Fitness” kategorisini seçeceğim. Ayrıca, kutuyu “kategorize değil” olarak silin. Ürünün ve kullandığım kategorinin ayrıntıları şunlardır:
Çamaşırlar
Mutfak bıçağı
Karıştırma
kesme tahtası
Sağlık ve Fitness
Fitness izleyicisi
Ağırlık
Koşu bandı
Elektronik
Kamera
Kulaklık
Dizüstü bilgisayar
Sayfanın çok altında değil, ekstra ayar kutusunu bulacaksınız. Bu kontrol, bu özel yazı için varsayılan tema ayarlarını değiştirmenizi sağlar. Elbette bunu istediğiniz gibi ayarlayabilirsiniz, ancak bu örnek için aşağıdaki kutuyu kontrol ediyorum: Üstün Gönderi (bu, ürünün belirli bir kategori modülünde üstün bir yazı olarak çizilmesini sağlar.) Yazar kutusunu gizle
Son olarak, üstün görüntünüzü ekleyin. Genişliğin en az 1280 px olduğundan emin olun, çünkü üstün görüntüler için tam genişlik 0NE sütununun düzenini kullanacağız.
Gönderinizi yayınlayın. Lütfen ve bu şablonu kaydedin, böylece bu işlemi tüm ürünleriniz/yayınlarınız için çoğaltabilirsiniz. Şablonu kaydetmek için, sayfanın altındaki Visual Builder menüsünde “Kütüphaneye Kaydet” simgesini tıklayın, şablonun adını girin ve Kütüphaneye Kaydet’i tıklayın.
Şimdi yayınlarınızın geri kalanını eklemeye gittiğinizde, bu şablonu kütüphaneden yükleyebilir ve yeni ürün incelemeleri için içeriği doldurabilirsiniz. Süreç daha hızlı hale gelir. Özel CSS’imizi neredeyse bitmiş ekleyin. Birkaç gönderim unsurunu düzenlemek için temamıza bazı özel CSS eklememiz gerekiyor. Bunu yapmak için, WordPress kontrol panelinden, tema ayarını aç> ek CSS ve aşağıdakileri girin: /************************** ** Arka plan
*************************
#Yorum-wrap { Dolgu: 75px 40px; Arka plan: #fff; Border-Radius: 3px;
Kutu -Shadow: -1px 0 2px 0 RGBA (0.0,0,0.0.12), 1px 0 2px 0 RGBA (0.0,0,0.0.12), 0 1px 1px 0 RGBA (0.0,0,0.24);
}
@Media (min-width: 980px) {
/*****************************
Başlık Gönderme Boyutu
************************
H1.Entry-Title {
yazı tipi boyutu: 48px;
}
/*****************************
Süslü altyazılar
************************
.ALT YAZI {
Marj: 1em 0! Önemli;
yazı tipi boyutu: 48px;
}
.Fance {
Metin-align: merkez;
Dolgu Alt: 0px;
}
.Fance Span {
Ekran: satır içi blok;
Pozisyon: göreceli;
Çizgi yüksekliği: 1.3em;
}
. Fantezi Span: Önceden,
.Fancy Span: Sonra {
İçerik: “”;
Pozisyon: Mutlak;
Yükseklik: 5 piksel;
Sınır dip: 4px katı #333;
Sınır üstü: 4px katı #333;
EN İYİ 40%;
Genişlik:%100;
Max-Width: 200px;
}
. Fantezi Span: Önce {
Doğru:%100;
Marj-sağ: 15px;
}
.Fancy Span: Sonra {
Sol:%100;
Marj-sol: 15px;
}
/*****************************
Yıldız Derecelendirme ve Sosyal İkonlar Stili
************************
.Post-footer .ting-stars .ting-star {
Genişlik: 50px;
Yükseklik: 50px;
}
.et_extra_layout .et_pb_column. Modül-baş H1,. Modül-kaf. Modül-filtre {
yazı tipi boyutu: 28px;
}
.Post-Footer .ting-Stars #HATA-TITLE, .Post-Footer .social-icons .Share-title {display: blok;
yazı tipi boyutu: 20px;
}
.Post-Footer .ting-Stars, .Post-footer. Social-icons {
Genişlik:%100;
Marj: 0 otomatik;
Dolgu: 30px 0;
}
.post-footer .ocial-icons {
Sınır dip: 4px katı #dddddd;
}
}
/*****************************
Mobil Ayarlamalar
************************
@Media (Max-Width: 980px) {
.ALT YAZI {
yazı tipi boyutu: 30px;
Metin-align: merkez;
}
}
Kaydet ve Yayınla Şimdi sonuçlarımıza bakalım.
Kullanıcı Değerlendirme Sistemi Yayınınızın altında bir kullanıcı yıldızı rasyon sistemine sahip olduğunuzu unutmayın.
Burada ziyaretçileriniz herhangi bir üründeki ilk sıralamayı sadece imleci yıldız simgesine yönlendirerek ve seçtikleri yıldız seviyesine tıklayarak gönderebilir.
Genel kullanıcı derecesi, postadan alınan meta verilerde görüntülenir.
Ekstra Ayarlar kutusunda bu özelliği her zaman devre dışı bırakmayı seçebilirsiniz. Hepsi bu. Umarım bu serinin 2. bölümünden hoşlanırsınız. Sonraki: Ürününüzü Bölüm 3’te görüntülemek için kategorinin düzenini oluşturmak, size ev sayfaları ve tüm kategorilerin sayfaları için kategori düzenini nasıl oluşturacağınızı göstereceğim. Serinin 3. bölümünü hazırlamak için 4 kategorinin her biri için en az 3 ürün eklemek için yeni yazı şablonunuzu kullandığınızdan emin olun. Ürününüzü görüntüleyecek kategori modülünü doldurmak için buna ihtiyacınız olacak. Bölüm 3’te inşa edilmeyi bekleyebileceğiniz şey budur:
Aşağıda soru veya yorum göndermekten çekinmeyin. Sizden haberleri duymayı umuyorum.
