Ekstra ile Ürün İnceleme Sitesi Oluşturma – Bölüm 3

Extra kullanarak bir ürün inceleme sitesinin nasıl geliştirileceğini anlatan bu 4 bölümlük dizinin 3. 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 2. bölümünde, Extra'nın yerleşik ayarlarını ve Görsel Oluşturucu'yu kullanarak ürün inceleme gönderi şablonumuzu oluşturduk. Yeni gönderi şablonuyla, ek gönderiler ekleyebilir ve bunları ilgili kategorilere atayabilirsiniz.

Bugün Extra'nın Kategori oluşturucusunu kullanarak iki kategori düzeni oluşturacağız. İlk düzen, en son ve popüler incelemeleri vurgulayarak ana sayfanızdaki gönderileri/ürün incelemelerini görüntüler. İkinci düzen, atlıkarınca kaydırıcı modülünü kullanarak tüm kategorileri tek bir sayfada sergileyecektir. Bu öğreticiyi tamamladığınızda, iyi tasarlanmış bir ürün inceleme sitesi için iyi bir temele sahip olacaksınız.

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

Tasarım Öğelerinin Hazırlanması

Kategori düzenleri büyük ölçüde gönderi içeriğine bağlı olduğundan, kendi içeriğinizi ekledikten sonra sitenin nasıl görüneceğine dair bir fikir edinebilmeniz için yeterli sayıda gönderi eklediğinizden emin olun. Bu serinin 2. bölümünde tartışıldığı gibi, kategori düzenlerim 4 kategori ve her kategoride 3 ürün ile doldurulur. Gönderilerimin öne çıkan görselleri için Shutterstock'tan stok görseller kullanıyorum.

Kategori düzenlerini tasarlamak için Extra'nın Kategori Oluşturucusunu ve biraz Özel CSS kullanacağız.

Başlayalım.

Ekstra ile Ürün İnceleme Sitesi Oluşturma – Bölüm 3

Youtube Kanalımıza Abone Olun

Ana Sayfa için Kategori Düzenini Oluşturma

Varsayılan olarak extra, ana sayfa için bir kategori düzeni kullanır. Özel bir düzen oluşturmak için WordPress panosu kenar çubuğundan Ekstra > Kategori Oluşturma seçeneğine gidin . Zaten orada "ana sayfa" olarak adlandırılan kategori düzenini bulun, ardından üzerine gelin ve düzenle'yi seçin.

Ardından, mevcut varsayılan düzeni silmek için mor oluşturucu menüsündeki “Düzeni Temizle”ye tıklayın.

Şimdi özel düzenimizi oluşturmaya başlayabiliriz. Standart bölümdeki satıra üçte ikilik bir üçte bir sütun ekleyerek başlayın.

Sol (üçte iki) sütuna bir Öne Çıkan Gönderiler Kaydırıcısı ekleyin.

Öne Çıkan Gönderiler Kaydırıcı Modül Ayarlarını aşağıdaki gibi güncelleyin:

İçerik Sekmesinin altında…

Kategoriler: Hepsi
Yalnızca Öne Çıkan Gönderileri Göster: [Hangi gönderileri öne çıkarmak istediğinize karar verene kadar bunu kapalı tutarım. Belirli bir gönderiyi, gönderi düzenleyici sayfasındaki Ekstra Ayarlar kutusunda öne çıkan olarak atayabilirsiniz.]
Yazarı Göster: KAPALI
Tarihi Göster: KAPALI

Tasarım Sekmesinin altında…

Gezinme Ok Rengi: #ffffff
Gezinme Ok Arka Planı: #000000
Altyazı Arka Planı: rgba(255,255,255,0.4)
Başlık Yazı Tipi Boyutu: 24px
Başlık Metin Rengi: #000000
Meta Yazı Tipi Boyutu: 16px
Meta Metin Rengi: #000000
Özel Kenar Boşluğu: alt 0 piksel

Gelişmiş Sekmesi altında…

Ana Öğe metin kutusuna aşağıdaki özel CSS'yi girin:

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

Ayarları kaydet

Şimdi sağdaki (üçte bir) sütuna bir Metin Modülü ekleyin ve Metin Modülü Ayarlarını aşağıdaki gibi güncelleyin:

İçerik Sekmesi altında, içerik kutusunun metin sekmesine aşağıdaki html'yi ekleyin:

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

Buradaki bağlantı, sahte bir CTA düğmesi olarak hizmet etmek içindir. Dilediğiniz gibi kullanmayı tercih edebilirsiniz. URL'yi ve bağlantı metnini güncellemeniz yeterlidir.

İpucu : Bu CTA'yı tıkladığınızda bir e-posta tercihi açılır kutusunu tetiklemek için Bloom'u kullanabilirsiniz. Bu şekilde ziyaretçiler, e-posta pazarlama kampanyanızla bugün ürünleri takip edebilecekler. Bunu yapmak için Bloom'u kurmanız, bir açılır form eklemeniz ve e-posta sağlayıcınızı entegre etmeniz gerekecek. Ardından, yukarıdaki html kodundaki bağlantı sınıfına karşılık gelen CSS seçici “a.join-cta” tıklandığında açılır pencereyi görüntülemeyi seçin.

Ayrıca, bir düğmeyi tıklatırken çiçeklenme optin formu açılır penceresinin nasıl oluşturulacağı hakkında daha fazla bilgi edinebilirsiniz.

Şimdi Metin Modülü Ayarlarına geri dönün.

Tasarım Sekmesinin altında…

Metin Yazı Tipi Boyutu: 40px (masaüstü), 24px (tablet ve akıllı telefon)
Başlık Yazı Tipi Boyutu: 42px (masaüstü), 38px (tablet), 28px (akıllı telefon)
Özel Dolgu: 40px (üstte), 15px (sağda), 15px (altta), 15px (solda)

Ayarları kaydet

Şimdi Satır Ayarlarına gidin, böylece satırın arka planını şekillendirebiliriz.

Ardından aşağıdakileri güncelleyin:

İçerik Sekmesinin altında…

Arkaplan: #ffffff

Tasarım Sekmesinin altında…

Bu Satırı Tam Genişlikte Yapın: EVET
Sütun Yüksekliklerini Eşitle: EVET

Gelişmiş Sekmesi altında, Ana Öğe giriş kutusuna aşağıdaki Özel CSS'yi ekleyin:

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-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);
-moz-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);
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);

Ayarları kaydet

Özel öne çıkan kaydırıcı bölümünü şimdi kontrol edin.

Şimdiye kadar iyi görünüyorsun.

Devam edelim. Kategori Oluşturucuya geri dönün ve mevcut bölümün altına standart bir bölüm ekleyin ve Metin Modülü ile tek sütunlu bir satır ekleyin.

Ardından Metin Modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik Sekmesi altında, içerik kutusunun metin sekmesine bu html başlığını ekleyin:

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

Tasarım Sekmesinin altında…

Metin Yönü: Merkez
Başlık Yazı Tipi: B (kalın)
Başlık Yazı Tipi Boyutu: 48px (masaüstü), 42px (tablet), 36px (akıllı telefon)

Ayarları kaydet

Bu, ürün incelemelerinizi gösterecek olan aşağıdaki bölümün başlığı olarak hizmet edecektir.

Ardından, aşağıdaki dörtte üçü dörtte bir sütun yapısına sahip bir Özel Bölüm ekleyin:

Sol (dörde üç) bölümde iki sütunlu bir satır ekleyin.

Bu satırın sol sütununa bir Mesaj Modülü ekleyin

Ardından, modüle bir kategori atayarak İçerik Sekmesi altındaki Gönderi Modülü Ayarlarını güncelleyin. Bu şekilde Gönderiler Modülü yalnızca o Kategoriyi gösterecektir. Bunu yapmak için kategorim olarak “Giyim”i seçeceğim.

Ardından aşağıdakileri güncelleyin:

Yazarı Göster: HAYIR
Gösteri Tarihi: HAYIR

Ayarları kaydet

Bu Gönderi Modülünü çoğaltın, böylece sol sütunda iki ve sağda 2 sütun modülünüz olsun.

Ardından her modüldeki Ayarları farklı bir kategoriyle güncelleyin. Sahip olduğum kategoriler Giyim, Elektronik, Mutfak ve Sağlık ve Fitness.

Video incelemelerini görüntüleyen bir Gönderi Modülü eklemek istiyorsanız, bunu buraya ekleyebilirsiniz. Öncelikle Video adlı yeni bir gönderi kategorisi eklemeniz gerekecek, kategoriye #222222 rengini atayın. Ardından yeni bir gönderi oluşturun, Format için “Video”yu seçin ve Video URL'sini Extra'nın yerleşik Video Format Seçenekleri kutusuna ekleyin.

Ardından, videonun altında görüntülemek için inceleme kutusu içeriğinizi ekleyebilirsiniz.

Birkaç video yükledikten sonra, onları Video kategorisine eklediğinizden emin olun. Ardından ana sayfanız için Kategori Oluşturucu'ya dönün ve dört gönderi modülünüzü içeren satırın altına tek sütunlu bir satır ekleyin. Ardından, önceki satırdan bir Mesaj Modülünü çoğaltın ve yeni satıra ekleyin. İçerik Sekmesi altındaki Mesaj Modülü Ayarlarında “Video” kategorisini seçin. Artık videoları gösterecek bir gönderi modülünüz var.

Uzmanlık bölümünün sağ (kenar çubuğu) alanına, üst üste yığılmış iki Mesaj Modülü daha ekleyeceğiz.

İlki için, Gönderi Modülü Ayarlarını kategorileri "Tümü" içerecek şekilde güncelleyin. Ardından, “En Yüksek Dereceli” Sıralama Yöntemini seçin.

Bu Gönderi Modülünü çoğaltın, böylece altında başka biri yığını olur. Ardından, bunun üzerindeki Sıralama Yöntemini “En Popüler” olarak güncelleyin.

Devam edin ve ayarlarınızı kaydetmek için gönderiyi güncelleyin. İşte düzenin şimdiye kadar nasıl görünmesi gerektiği.

Ardından, Metin Modülünü içeren ikinci ana bölümü “Ürün İncelemeleri” başlığıyla çoğaltın (veya kopyalayın).

Ardından, çoğaltılan bölümü uzmanlık bölümünün altına sürükleyin (veya yapıştırın). Yeni bölümde, Metin Modülü Ayarları içeriğini aşağıdaki html ile güncelleyin:

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

Ayarları kaydet

Ardından, en yenisinden başlayarak tüm ürün incelemelerini görüntüleyen bir blog beslemesi ekleyeceğiz.

Yeni güncellediğiniz Metin Modülü altında, sütuna bir Blog Beslemesi Duvarcılık Modülü ekleyin. Blog Akışı Duvar Modülü Ayarlarında, İçerik Sekmesi altında, akışta görüntülenmesini istediğiniz tüm kategorileri seçin.

Ayarları kaydet

Ve son olarak, Blog Beslemesi Duvarcılık Modülü'nün altına bir Mesaj Döner Modülü ekleyin. İçerik sekmesi altındaki Gönderi Döngüsü Modülü Ayarlarını tüm kategorileri içerecek şekilde güncelleyin ve yalnızca öne çıkan gönderileri görüntülemek için EVET'i seçin.

Bu atlıkarınca, yalnızca ürün inceleme gönderilerinizi oluştururken öne çıkan öğeler olarak seçtiğiniz gönderileri görüntülemeyi amaçlamaktadır.

Şimdi son düzenin nasıl göründüğünü görelim.

Birkaç Satır Özel CSS Ekleme

Tasarımı bir araya getirmek için birkaç satır Özel CSS eklememiz gerekiyor. Tema Özelleştirici > Ek CSS'ye gidin ve halihazırda orada bulunan mevcut CSS kodunun en üstüne aşağıdakini ekleyin:

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
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);
border-top: 10px solid;
}

Ardından, minimum 980 piksel genişliğe ayarlanmış medya sorgusu parantezlerinin içine aşağıdakileri ekleyin:

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

İlk CSS parçacığı, modüllere biraz daha koyu bir gölge ve daha yüksek bir üst kenarlık ekler. İkincisi, üst bölümdeki “Şimdi Katıl” düğmesini özelleştirir.

Ana sayfa kategori düzeni için bu kadar. İşte nihai sonucun nasıl göründüğü:

Ana Sayfa Kategori Düzenine ek olarak, tüm kategorilerimizi tek bir sayfada görüntülemek için basit bir düzen daha ekleyelim.

"Tüm Kategoriler" Düzenini Oluşturma

Tüm gönderileriniz yüklenmiş, kategorileriniz ayarlanmış ve tema stili yerinde olduğu için bu düzeni oluşturmak gerçekten çok kolay. Bu düzenin amacı, tüm kategorileri ve ürünleri tek bir sayfada görüntüleyen bir sayfa oluşturmaktır. Bu, birçok farklı yolla yapılabilir, ancak Extra ile, kategorileri ve gönderileri Hulu ve Netflix gibi video akışı web sitelerinde göreceğinize benzer bir düzende görüntülemek için gönderiler atlıkarınca modülünden yararlanmak istedim.

Düzeni eklemek için mevcut kategori düzeninizin en üstüne gidin ve Yeni Ekle'yi seçin. Kategori oluşturucuyu kullanarak standart bir bölüme tek sütunlu bir satır ekleyin. Ardından Satıra bir Metin Modülü ekleyin. İçerik kutusuna aşağıdaki h1 etiketini eklemek için İçerik Sekmesi altındaki Metin Modülü Ayarlarını güncelleyin:

<h1 class="subtitle fancy"><span>All Categories</span></h1>

Ayarları kaydet

Ardından, Metin Modülünün altına bir Mesaj Döngüsü Modülü ekleyin. Gönderi Döngüsü Modülü Ayarlarında, Kategori olarak Giyim'i seçin.

Ayarları kaydet

Ardından, Giyim kategorisi gönderileri atlıkarınca altına bir Metin Modülü ekleyin. Metin Modülü Ayarlarında, İçerik sekmesinin altındaki İçerik kutusuna aşağıdaki bağlantıyı ekleyin:

<a href="/category/clothing">view all clothing reviews</a>

URL ve/veya bağlantı metninin sitenize göre değişmesi gerekebilir, ancak fikir, o kategori için tüm ürün incelemelerini göstermek için o kategorinin kategori sayfasına bağlantı vermektir.

Tasarım Sekmesi altında, Metin Yönünü “Sağ” olarak değiştirin.

Ayarları kaydet

Sonraki üç kategoriyi aynı şekilde görüntülemek için, belirli bir kategoriye atanmış bir Mesaj Döngüsü Modülü ve ardından ilgili kategori sayfasına bir bağlantı içeren bir Metin Modülleri ekleme işlemini tekrarlayın.

Oluşturucunun sağındaki kategori kutusuna “Tüm Kategoriler” adında yeni bir kategori ekleyin ve bu düzen için onu seçin. Bu şekilde, "Tüm Kategoriler" kategori sayfasına her bağlandığımızda, bu şablon gösterilecektir.

Bitirdiğinizde son düzen böyle görünmelidir.

Ve işte kategori düzeni sitede nasıl görünüyor.

Şu anda eklenmiş çok fazla ürünümüz olmadığı için bunu hemen anlayabilirsiniz, ancak bu, gönderiler atlıkarınca kaydırıcı modülünü kullanarak her kategori için ürünleri karıştırmanın uygun bir yolu olarak işlev görecektir.

Bugünün yazısı bu kadar. Umarım Extra ile bir ürün inceleme sitesi oluşturmaya yönelik bu 4 bölümlük dizinin 3. bölümünü beğenmişsinizdir.

Umarım hala sıkılmıyorsunuzdur, serimizde son bir gönderi daha var.

geliyor

Serimizin son gönderisinde, ürün inceleme sitemizin başlık ve gezinme öğelerini özelleştireceğiz. Menünüzü oluşturmanın yanı sıra, site genelinde kategori renklerine karşılık gelen menü bağlantılarınıza renk atamanın harika bir yolunu göstereceğim. Ayrıca size birkaç tıklamayla mega menülerin nasıl oluşturulacağını göstereceğim.

Web sitemizin son bölümünü birlikte oluşturmak için sabırsızlanıyorum.

Her zaman olduğu gibi, aşağıya yorum göndermekten çekinmeyin.