Ekstra Ürün İnceleme Siteleri Oluşturma – Bölüm 3
Ekstra kullanarak ürün inceleme sitelerinin nasıl geliştirileceğine dair bu bölümlerin 4 serisine 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 2. bölümünde, varsayılan ekstra ve görsel oluşturucu ayarlarını kullanarak ürün incelemelerimizin bir gönderisini yapıyoruz. Yeni bir yayın şablonu ile ek yayınlar ekleyebilir ve her kategoriye ayarlayabilirsiniz.
Bugün ekstra kategori üreticisini kullanarak iki kategori düzeni yapacağız. İlk düzen, en son ve popüler incelemeleri vurgulayan ana sayfanızdaki ürünün gönderisini/incelemesini görüntüler. İkinci düzen, Carousel Shift modülünü kullanarak tüm kategorileri bir sayfada görüntüler. Bu öğreticiyi tamamladıktan sonra, iyi tasarlanmış bir ürün inceleme sitesi için iyi bir temeliniz olacaktır. İşte ne inşa edeceğimizin bir gözü Tasarım öğesini hazırlayın çünkü kategori düzeni içerik yayınlamaya çok bağlı olduğundan, sitenin kendi içeriğinizi ekledikten sonra nasıl göründüğünü hissedebilmeniz için oldukça fazla yayın eklediğinizden emin olun. Bu serinin 2. bölümünde tartışıldığı gibi, kategorimin düzeni 4 kategori ve her kategoride 3 ürünle doludur. Gönderimden üstün görüntüler için Shutterstock’tan stok görüntüleri kullandım.
Kategori düzenini tasarlamak için ekstra kategorinin üreticisini ve küçük bir özel CSS’yi kullanacağız. Başlayalım. Ekstra Ürün İnceleme Siteleri Oluşturma – Bölüm 3 YouTube Kanallarına Abone Olmak Varsayılan olarak Veranda için Kategori Düzeni Oluşturuyoruz, Extra ana sayfa için kategori düzenini kullanır. WordPress Gösterge Tablosu tarafından özel bir düzen oluşturmak için ekstra> kategori binasını açın. “Ana Sayfa” adlı mevcut kategori düzenini bulun, ardından imleci üste işaret edin ve Düzenle’yi seçin. Ardından, geçerli varsayılan düzeni silmek için Mor Yapma menüsünde “Düzeni Sil” i tıklayın. Şimdi özel düzenimizi oluşturmaya başlayabiliriz. Standart bölümdeki satıra sütunun üçte ikisini ekleyerek başlayın. Sol sütunda (üçte iki), üstün bir gönderme kaydırıcısı ekleyin. Ayarlar kaydırıcı kaydırıcı modülünü aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Kategori: Tüm Gösteri Özel Gönderi: [Hangi gönderiyi görüntülemek istediğinize karar verene kadar bunu devre dışı bırakacağım. Belirli yayınları yazma sayfasındaki ekstra ayarlar kutusunda bir özellik olarak ayarlayabilirsiniz. Tasarım sekmesinin altında … nav ok renk: #ffffff arka plan nav ok: #000000 arka plan metin: rgba (255,255,255,0.4) başlık yazı tipi boyutu: 24px renk metin başlığı: #000000 meta yazı tipi boyutu: 16px renk meta metin: #000000 Özel Marj: Devam sekmesinin altındaki 0px alt … Ana öğelerin metin kutusuna aşağıdaki özel CSS’yi girin: Sınır: Yok! Önemli;
-Webkit-Box-Shadow: Yok! Önemli;
-Moz-Box-Shadow: Yok! Önemli;
Box-Shadow: Yok! Önemli;
Marj-Alt: 0px! Önemli; Ayarları Kaydet Şimdi metin modülünü sağ sütuna (üçte biri) ekleyin ve metin modülü ayarlarını aşağıdaki gibi güncelleyin:
İçerik sekmesinin altında, aşağıdaki HTML’yi Metin sekmesi içerik kutusuna ekleyin:
Popüler ürünlerle ilgili en son incelemeleri alın
<a class="join-cta"
Buradaki bağlantı, yapay bir CTA düğmesi olarak işlev görmeyi amaçlamaktadır. İstediğiniz gibi kullanmayı seçebilirsiniz. URL ve bağlantı metnini güncellemeniz yeterlidir. İpucu: Bu CTA'yı tıklarken Optin e -posta açılır kutusunu tetiklemek için Bloom'u kullanabilirsiniz. Bu şekilde ziyaretçiler, e -posta pazarlama kampanyanızla bugünün ürününün gelişimini takip edebileceklerdir. Bunu yapmak için Bloom'u yüklemeniz, bir açılır form eklemeniz ve e -posta sağlayıcınızı entegre etmeniz gerekir. Ardından, yukarıdaki HTML kodundaki bağlantı sınıfına uygun olarak CSS seçmenleri "A.Join-cta" ı tıklarken açılır pencereyi görüntüleyin.
Düğmeyi tıklarken Optin Blooming açılır penceresini nasıl yapacağınız hakkında daha fazla bilgi edinebilirsiniz. Şimdi metin modülünün ayarlarına geri dönelim. 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) Dolgu özel: 40px (üst), 15px (15px (15px (15px sağda) (sağ), 15px (aşağıda), 15px (solda) Ayarları kaydedin Şimdi satır ayarlarını açın, böylece satırın arka planını ayarlayabiliriz.
-Moz-box-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) ;
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);
Ayarları Kaydet Şimdi özel özellik kaydırıcı bölümünüzü görün.
Şimdiye kadar iyi görünüyor. Devam edelim. Kategori üreticisine dönün ve geçerli parçanın altındaki standart bölümü ekleyin ve metin modülüyle bir sütun satırı ekleyin.
Ardından, metin modülünün ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesi altında, bu HTML başlığını içerik kutusunun metin sekmesine ekleyin: > Tasarım sekmesinin altında … Metin Yönlendirme: Orta Yazı Tipi Başlığı: B (Kalın) Başlık Yazı Tipi Boyutu: 48px (masaüstü), 42px (tablet), 36px (Akıllı Telefon) Kaydet Bu ayarlar, aşağıdaki bölümün başlığı olarak çalışacaktır. Ürününüzü incelemeleri görüntüler. Ardından, aşağıdaki üç çeyrek -çeyrek sütun yapısı ile özel kısmı ekleyin:
Solda (üç çeyrek), iki sıra sütun ekleyin.
Satırın sol sütununa, gönderi modülünü ekleyin Ardından, kategoriyi modüle ayarlayarak içerik sekmesi altındaki Posta Modül ayarlarını güncelleyin. Bu şekilde gönderi modülü yalnızca bu kategoriyi görüntüler. Bunu yapmak için kategorim olarak “kıyafet” seçeceğim. Ardından aşağıdakileri güncelleyin: Yazar göster: Yüz tarihi yok: Ayar Yok Ayar Yok Bu yazı modülünü çoğaltın, böylece sol sütunda istiflenmiş iki gönderi modülünüz ve sağda 2. Ardından farklı kategorilerle her modüldeki ayarları güncelleyin. Sahip olduğum kategoriler giyim, elektronik, mutfak ve sağlık ve zindelik. Video incelemelerini görüntüleyen bir gönderi modülü eklemek istiyorsanız, buraya ekleyebilirsiniz. İlk olarak, video adı verilen yeni bir yazı kategorisi eklemeniz, #222222 rengiyle bir kategori ayarlamanız gerekir. Ardından yeni bir gönderi oluşturun, biçim için “Video” yu seçin ve Video URL’sini Varsayılan Video Biçimi Seçeneği kutusuna ekleyin. Ardından, videonun altında görüntülenecek inceleme kutunuzun içeriğini ekleyebilirsiniz. Birkaç video yükledikten sonra, video kategorisine eklediğinizden emin olun. Ardından, verandanız için kategori üreticisine dönün ve gönderinin altına dördünü içeren bir sütun satırından bir satır ekleyin. Ardından, gönderi modülünü önceki satırdan çoğaltın ve yeni satıra ekleyin. İçerik sekmesinin altındaki Posta Modülünü ayarlarken, “Video” kategorisini seçin. Artık videoyu görüntüleyecek bir gönderi modülünüz var.
Özel bölümden doğru alanda (yan bıçaklar), birbirine yığılmış iki yazı modülü daha ekleyeceğiz. İlk olarak, “Tüm” kategorilerini girmek için gönderi modülü ayarlarını güncelleyin. Ardından “en yüksek değer” sıralama yöntemini seçin.
Post modülünü koyulaştırın, böylece diğerleri altına yığılır. Ardından tek sıralama yöntemini “en popüler” olarak güncelleyin.Lütfen ayarlarınızı kaydetmek için gönderiyi güncelleyin. Şimdiye kadar düzene benzeyen şey budur. Ayrıca, “Ürün İncelemesi” başlığı ile metin modülünü içeren ikinci ana parçayı kopyalayın (veya kopyalayın). Ardından özel bir bölüm altında çoğaltılan kısmı sürükleyin (veya yapıştırın). Yeni bölümde, aşağıdaki metin modülünün içerik ayarlarını aşağıdaki html ile güncelleyin:
Son incelemeler
Sonraki Ayarları Kaydet En son ürün incelemelerini görüntüleyen bir blog akışı ekleyeceğiz. Az önce güncellediğiniz metin modülünün altında, Masonry Bait blogunu sütuna ekleyin. Masonry Bait Blog Modülü ayarlarında, İçerik sekmesinin altındaki yemde görüntülemek istediğiniz tüm kategorileri seçin. Ayarları kaydedin ve son olarak, blog yeminin duvar modülünün altında, atlıkarınca post modülünü ekleyin. Tüm kategorileri girmek için İçerik sekmesinin altındaki Güney Kore modül ayarlarını güncelleyin ve yalnızca üstün yayınları görüntülemek için Evet’i seçin. Güney Kore, ürün inceleme yayınınızı oluştururken yalnızca üstün bir ürün olarak seçtiğiniz yayınları görüntülemeyi amaçlamaktadır. Şimdi son görünüşe bakalım. Tasarımı birleştirmek için birkaç sıra özel CSS ekleyerek, birkaç sıra özel CSS eklememiz gerekir. Ayarlama Teması> Ek CSS ekleyin ve aşağıdaki kodu zaten orada olan geçerli CSS kodunun üstüne ekleyin: .et_pb_extra_module, .posts-blog-fed-module.masonry. Hentry { 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);Sınır üstü: 10 piksel katı; } Ardından, minimum 980 piksel genişliğe ayarlanmış medya parantezlerinde aşağıdakileri ekleyin: .Jin-cta { Ekran bloğu;
Metin-align: merkez;
Sınır: 3px katı #333;
Renk: #333;
Dolgu: 20px 15px;
Metin-Transform: büyük harf;
yazı tipi-ağırlık: 600;
yazı tipi boyutu: 30px;
}
İlk CSS görüntüleri modüle biraz daha koyu bir gölge ve daha yüksek bir üst sınır ekler. İkincisi, üstteki “Şimdi Birleştir” düğmesini ayarlar. Ana sayfa kategorisi düzeni için bu kadar. İşte görülen nihai sonuçlar:
Moranda kategorisi düzenine ek olarak, tüm kategorilerimizi bir sayfada görüntülemek için daha basit bir düzen daha ekleyelim. Bu düzenin “tüm kategorileri” düzenini oluşturmak şimdi yapmak çok basittir, çünkü tüm yayınlarınızı, kategorinizi ve onun yerine tema stilini içerdiğiniz için. Bu düzenin amacı, tüm kategorileri ve ürünleri bir sayfada görüntüleyen bir sayfa oluşturmaktır. Bu çeşitli şekillerde yapılabilir, ancak ekstra ile, kategoriler ve yayınlardaki yayınlardaki, Upstream ve Netflix gibi video akışı web sitelerinde göreceğinize benzer kategorileri ve yayınları görüntülemek için Carousel Posta Modülünü kullanmak istiyorum. Düzeni eklemek için, mevcut kategorinizin en üstüne kaydırın ve yeni yeni seçin. Kategori üreticilerini kullanarak standart bölüme bir sütun satırı ekleyin. Ardından metin modülünü satıra ekleyin. İçerik sekmesinin altındaki metin modülü ayarlarını, içerik kutusuna aşağıdaki H1 etiketini ekleyecek şekilde güncelleyin:
Ayarları kaydedin, ardından metin modülünün altına göndermek için atlıkarınca modülünü ekleyin. Carousel Modül Ayarları göndermesinde, kategori olarak kıyafetleri seçin. Ayarları kaydedin, ardından giysi kategorisini yayınlamak için Carousel altına metin modülünü ekleyin. Metin modülü ayarlarında, içerik sekmesinin altındaki içerik kutusuna aşağıdaki bağlantıyı ekleyin: Tüm giyim incelemelerini görüntüleyin url ve/veya bağlantı metninin değiştirilmesi gerekebilir Sitenize, ancak fikir, belirli kategorilerin bu kategori için tüm ürün incelemelerini görüntülemek için bir kategori sayfasına bağlantı vermektir. Tasarım sekmesi altında metin yönünü “sağ” olarak değiştirin. Ayarları kaydedin Sonraki üç kategoriyi aynı şekilde görüntülemek için, belirli bir kategoriye ayarlanan bir atlıkarınca post modülü ekleme işlemini ve ardından uygun kategori sayfasına bir bağlantı içeren bir metin modülü tekrarlayın. Yapıcının sağındaki kategori kutusuna, “Tüm Kategoriler” adlı yeni bir kategori ekleyin ve bu düzen için seçin. Bu şekilde “tüm kategori” kategori sayfasına her bağlandığımızda, bu şablon görünecektir.
Son düzen bittikten sonra böyle görünecektir.
Ve bu, Sitedeki kategori düzeninin görüntülenmesidir.
Şimdi öğrenebilirsiniz, çünkü çok fazla ürünümüz yoktur, ancak bu, Güney Koreli kaydırıcı modülünü kullanarak her kategori için ürünü randomize etmek için rahat bir yol olarak işlev görecektir.Bugünün gönderisi için hepsi bu.Umarım ekstra bir ürün inceleme sitesi oluşturmada bu bölümün 4. Serisi’nin 3. bölümünü beğenirsiniz.Umarım yorgun değilsiniz, dizimizde son bir yazımız var.Son yazımıza gelecek, başlıkları ve navigasyon öğelerini ürün inceleme sitemizden ayarlayacağız.Menünüzü oluşturmanın yanı sıra, Site boyunca kategorinin rengiyle eşleşen menü bağlantınıza renk ayarlamanın harika bir yolunu göstereceğim.Ayrıca size birkaç tıklama ile nasıl bir mega menü oluşturacağınızı da göstereceğim. Web sitemizin son bölümünü birlikte oluşturmayı umuyorum.Her zamanki gibi, lütfen aşağıya bir yorum gönderin.
