Divi'de Arama Sonuçları Sayfası Şablonu Nasıl Oluşturulur

Hepimiz bir web sitesinde ihtiyacımız olanı bulmak için arama formlarını kullanmaya alıştık. Bu nedenle, Divi'de bir web sitesi oluştururken, bu arama sonuçlarının görünümünü ve verdiği hissi yönlendirecek sayfa sonuçları şablonunun tasarımını gerçekten dikkate almamız gerekir.

Bu eğitimde, Divi Tema Oluşturucu'yu kullanarak basit ve zarif bir arama sonuçları sayfası şablonunun nasıl oluşturulacağını ele alacağız. Dinamik bir sayfa sonuçları başlığı ve bir blog modülü tarafından oluşturulan ilgili arama içeriği de dahil olmak üzere bir arama sonuçları sayfası şablonunun önemli öğelerini nasıl ekleyeceğinizi göstereceğiz.

Başlayalım.

Gizlice Bakış

İşte oluşturacağımız Arama Sonuçları Sayfası Şablonuna hızlı bir bakış.

Şablonları ÜCRETSİZ olarak indirin

Bu öğreticiden arama sonuçları sayfası şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak onu indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için, zip dosyasını çıkarın ve Theme Builder Taşınabilirlik seçeneğini kullanarak json dosyalarından birini Divi Theme Builder'a ekleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için Divi Temasını yüklemeniz ve etkinleştirmeniz gerekir. Divi'nin en son sürümüne sahip olduğunuzdan emin olun.

Arama sonuçları sayfasının gerçekten sonuçları göstermesi için test amacıyla oluşturulmuş bazı gönderilere/sayfalara da ihtiyacınız olacak.

Bundan sonra, gitmeye hazırsınız.

Arama Sonuçları Sayfası Hakkında

Divi'de arama sonuçları sayfası, kullanıcının Divi'nin arama formlarından birine bir arama sorgusu girdiğinde yönlendirildiği sayfadır. Arama sonuçları sayfasına yönlendiren olası arama sorguları, varsayılan Divi başlığındaki arama formunu, Divi Builder'daki Arama Modülünden oluşturulan aramayı ve WordPress'te yerleşik arama widget'ını içerir.

Varsayılan olarak, arama sonuçları sayfası, tipik bir blog sayfası gibi, bir özet akışında aranan sayfaları veya gönderileri görüntüler. Ancak Divi ile, Divi Tema Oluşturucu'yu kullanarak şablonu istediğiniz gibi tasarlayabilirsiniz.

Divi'de Arama Sonuçları Sayfası Şablonu Nasıl Oluşturulur

Yeni Şablon Oluştur

Başlamak için WordPress Kontrol Paneli'ne gidin ve Divi > Tema Oluşturucu'ya gidin. Ardından “Yeni Şablon Ekle” alanını tıklayın.

Şablon ayarları altında, şablon Arama Sonuçlarını atayın.

Ardından yeni şablonun Özel Gövde Ekle alanını tıklayın ve "Özel Gövde Oluştur" seçeneğini seçin.

Düzeni sıfırdan oluşturmak için seçin.

Şablon Düzen Düzenleyicisini kullanarak Arama Sonuçları Sayfası Şablonunu Tasarlama

Sayfa Sonuçları Şablonu için Başlık Bölümü

Şablon düzeni düzenleyicisinin içinde, varsayılan bölüme bir sütun satırı ekleyerek şablonun tasarımını başlatın. Şablon için sayfa başlığımızı burada oluşturacağız.

Bölücü Modül Tasarım Vurgusu

Ardından bir Bölücü Modülü yerleştirin. Bu, sayfa başlığımıza bir tasarım vurgusu olarak hizmet edecektir.

Bölücü stilini aşağıdaki gibi güncelleyin:

• Çizgi Rengi: #3a405a
• Çizgi Konumu: Alt
• Bölücü Ağırlığı: 5px
• Z-endeksi: -1

Başlıklı Metin Modülü

Bölücü Modülü altında, aşağıdaki içeriğe sahip yeni bir metin modülü ekleyin:

<h1>Search Results</h1>

Metin tasarımını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #ffffff
• Metin Hizalama: orta
• Başlık Yazı Tipi: Muli
• Başlık Yazı Tipi Ağırlığı: Ağır
• Başlık Metni Rengi: #3a405a
• Başlık Metni Boyutu: 70px (masaüstü), 40px (tablet), 22px (telefon)
• Başlık Çizgisi Yüksekliği: 80px
• Maksimum Genişlik: %60
• Modül Hizalaması: Merkez
• Minimum Yükseklik: 80px

Şimdi, özel bir kenar boşluğu ekleyerek bölücüyle örtüşmek için metin modülünü yukarı doğru hareket ettirebiliriz.

• Marj: -75px

Arama Modülü

Başlıklı metin modülünün altına bir arama modülü ekleyin. Bu, arama sonuçları sayfasına geldiklerinde blogunuzu/sitenizi aramaya devam etmek isteyen kullanıcılara yardımcı olacaktır.

Form için giriş yer tutucu metni ekleyin.

Ayrıca, istisnalar seçenek grubu altındaki seçenekleri belirleyerek belirli sayfaları, gönderileri ve/veya kategorileri arama sonuçlarından hariç tutma seçeneğiniz de vardır. Örneğin, öncelikle blogunuz için bir arama formu oluşturuyorsanız, yalnızca blog gönderilerinin gösterilmesi için sayfaları arama sonuçlarından hariç tutmak isteyebilirsiniz.

Ardından Arama Ayarlarını aşağıdaki gibi güncelleyin:

• Yer Tutucu Renk: #3a405a
• Alan Arka Plan Rengi: #ffffff
• Alan Yazı Tipi: Montserrat
• Alan Metin Boyutu: 20px
• Düğme ve Kenar Rengi: #3a405a
• Düğme Yazı Tipi: Muli
• Düğme Yazı Ağırlığı: Kalın
• Düğme Metin Rengi: #ffffff
• Düğme Metin Boyutu: 18px
• Genişlik: %100
• Maksimum Genişlik: 300 piksel
• Modül Hizalaması: Merkez
• Yuvarlatılmış Köşeler: 8px

Bu, çoğunlukla başlık bölümümüzle ilgilenir.

Satır Dolgusu

Bir sonraki bölüme başlamadan önce, sıranın alt dolgusunu çıkaralım.

• Dolgu: 0px alt

Arama Sonuçları Şablonunun Gövde Bölümünü Oluşturma

Artık, arama sonuçları arşiv başlığını ve arama sonuçları içeriğini içerecek olan şablonun ikinci bölümünü eklemeye hazırız.

Yeni Bölüm ve Satır Oluşturma

Üst bölümün altında, düzene yeni bir normal bölüm ekleyin.

Ardından bölüme tek sütunlu bir satır ekleyin.

Gönderi/Arşiv Başlığını Dinamik İçerik Olarak Ekleme

Arama sonuçları sayfası, kullanıcı tarafından girilen arama sorgusunu görüntüleyen bir başlıktan yararlanacaktır. Bunu bir metin modülü kullanarak ve gönderi/arşiv başlığı dinamik içerik öğesini çekerek sayfaya ekleyebiliriz.

İlk önce bir metin modülü ekleyin.

Gövde içeriği kutusunun içindeki boş metni silin ve fareyle gövde içeriği kutusunun üzerine gelindiğinde gösterilen Dinamik İçerik simgesini seçin. Ardından listeden Gönderi/Arşiv Başlığını seçin.

Posta/Arşiv Başlığı öğesi, "Sonuçlar" ifadesi ile başlar ve ardından parantez içinde arama içeriği/sorgusu gelir. Aşağıda, bir kullanıcı "işletme" terimini aradığında nelerin gösterileceğine ilişkin bir örnek verilmiştir.

Ardından, metin modülünün tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi: Muli
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Metin Rengi: #d30c7b
• Metin Metin Boyutu: 22px
• Metin Hizalama: Merkez
• Animasyon Stili: Slayt
• Animasyon Yönü: aşağı
• Animasyon Yoğunluğu: %250

Eklenen animasyon, "bulut" ayırıcı stilinin altındaki arama sonucu başlığını gösterecektir (bunu biraz sonra ekleyeceğiz). Bu nedenle, bir kullanıcı yeni bir arama sorgusu girdiğinde, başlık harika bir etki için açılır.

Yeni Satır Ekle

Gönderi/arşiv başlık öğesini içeren Metin modülünün altında yeni bir tek sütunlu satır oluşturun.

Satıra bir blog modülü ekleyin. Bu, arama sonuçları sayfasının gerçek gönderilerini/içeriğini gösterecektir.

Blog modülü için içerik ayarlarını aşağıdaki gibi güncelleyin:

• Mevcut Sayfa İçin Gönderiler: EVET
• Mesaj Sayısı: 9
• Alıntı Uzunluğu: 120
• Yazarı Göster: HAYIR

Buradaki en önemli seçenek Mevcut Sayfaya Yönelik Gönderiler'dir. Arama sonuçları sayfasının aramanın dinamik içeriğini görüntülemesi için bunun etkin olması gerekir.

Ardından blog modülünün tasarımını aşağıdaki gibi güncelleyin:

• Düzen: Izgara
• Başlık Yazı Tipi: Muli
• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Metin Rengi: #3a405a
• Başlık Metin Boyutu: 24px
• Başlık Satırı Yüksekliği: 1.3em
• Gövde Yazı Tipi: Montserrat
• Gövde Metni Rengi: #3a405a
• Izgara Düzeni Yuvarlatılmış Köşeler: 10px
• Izgara Düzeni Kenarlık Genişliği: 0px
• Kutu Gölgesi: ekran görüntüsünü göster
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü 15px
• Kutu Gölge Yayılma Gücü: -5px

Ardından, sayfalandırma stilini aşağıdaki gibi güncelleyin:

Bölüm Arka Planı ve Bölücü

Tasarıma son bir dokunuş olarak, bölüm ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #eeeeee
• Üst Bölücü Stili: ekran görüntüsüne bakın
• Bölücü Rengi: #ffffff
• Bölücü Çevirme: dikey
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde
• Dolgu: 100 piksel üst

Son sonuç

Canlı sitede "iş" terimini ararken sayfa şablonunun nihai sonucu buradadır.

İşte tablet ve telefondaki tasarım.

Ve burada, arama sonuçları sayfasında ek sorgular için arama formunu kullanırken arama sonucu başlığı animasyonuna bir örnek.

Son düşünceler

Bir arama sonuçları sayfası, kullanıcılar için yararlı bir araç olabilir, bu nedenle ona hak ettiği ilgiyi vermek harika bir fikirdir. Divi ile, şablonu tasarlarken Divi Visual Builder'ı kullanarak gerekli tüm dinamik öğelerle bir arama sonuçları şablonu oluşturabilirsiniz. Kod bilgisi gerekmez. Umarım bu size kendi blogunuz veya siteniz için özel bir arama sonuçları sayfası şablonu oluşturma konusunda biraz ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!