Ana İçeriğe Geç

Divi öğreticisi: Arama modülünü nasıl kullanırım?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Arama modülünü kullanarak sitenizin herhangi bir yerine bir arama formu yerleştirebilirsiniz. Bu arama formu, ziyaretçilerinizin tüm sayfalar ve blog gönderileri dahil olmak üzere tüm web sitesi içeriğinizi aramasına olanak tanır. Bu size WordPress arama widget'ının işlevselliğini Divi Builder'ın sunduğu esneklikle sağlar. Yalnızca arama formlarının sayfadaki yerleşimini kontrol edemezsiniz, aynı zamanda tasarımını da özelleştirebilirsiniz.

Sayfanıza bir arama modülü nasıl eklenir

Sayfanıza bir arama modülü eklemeden önce Divi Builder'a geçmelisiniz. Divi teması web sitenize yüklendikten sonra bir düğme göreceksiniz. Divi Builder'ı Kullan yeni bir sayfa oluşturduğunuzda yayın düzenleyicisinin üzerinde. Divi Builder'ı etkinleştirmek ve tüm Divi Builder modüllerine erişmek için bu düğmeye tıklayın. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için. Düğmeye de tıklayabilirsiniz Visual Builder'ı kullan WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

divi oluşturucu

Visual Builder'a girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni modüller yalnızca satırların içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza bir satır eklemeyi unutmayın.

divi.png araştırma modülü

Modül listesinde arama modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "ara" kelimesini de yazabilir ve ardından aramak için enter'a tıklayıp arama modülünü otomatik olarak ekleyebilirsiniz! Modül eklendiğinde, modül seçenekleri listesi tarafından karşılanacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .

Kullanım Örneği: Tam Genişlikli Blog Sayfasına Özel Arama Modülü Ekleme

Bu örnek için, bir blog sayfasının üst kısmına birincil eylem çağrısı olarak bir arama modülünün nasıl ekleneceğini göstereceğim. Bu, kullanıcıların blog içeriğinizi herhangi bir dağınıklık olmadan kolayca aramasına olanak tanır.

Bu sayfanın üst kısmında tam genişlikte bir başlık bulunur ve arama modülü doğrudan aşağıda bulunur. Arama modülünün altında ızgara düzenini kullanan bir blog modülü bulunur.

arama formu ile örnek blog divi.jpg

Visual Builder'ı kullanarak, blog sayfasına tam genişlikte (1 sütun) satır içeren yeni bir standart bölüm ekleyin. Ardından arama modülünü satıra yerleştirin.

Arama modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik seçenekleri

Ayrılmış metin: Blogumuzu arayın ...
Düğmeyi gizle: EVET

Tasarım seçenekleri

Giriş alanı arka plan rengi: # f8f8f8
Yer Tutucu Rengi: # 888888
Giriş yazı tipi boyutu: 16px
Giriş metin rengi: # 888888
Giriş satırının yüksekliği: 1em
Özel dolgu: 20px Üst, 20px Alt

divi arama yapılandırması

Ayarları kaydet

Şimdi arama modülünüzü içeren satırın genişliğini değiştirmek için geri dönün. Çizgi ayarlarının Tasarım sekmesinde, çizgiye 300 piksellik özel bir genişlik verin. Bu, arama modülünün kompakt ve sayfaya odaklanmasını sağlayacaktır.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

yapılandırma divi.png genişlik

İşte bu kadar!

İçerik seçeneklerini ara

İçerik sekmesinde, modülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Tüm kontroller ce qui modülünüzde beliren her zaman bu sekmede bulunur.

module search divi Instagram Hesabındaki Resim ve Videoları contenu.png

Yer tutucu metin

Arama alanı için yer tutucu olarak kullanmak istediğiniz metni yazın.

Düğmesini gizle

Bu seçeneği etkinleştirirseniz, Ara düğmesi gizlenir.

Sayfaları Hariç Tut

Bu seçeneği etkinleştirirseniz, sayfalar arama sonuçlarının dışında tutulur.

ürünleri hariç

Bu seçeneği etkinleştirmek, mesajları arama sonuçlarından dışlar.

Kategorileri hariç tut

Arama sonuçlarından hariç tutmak istediğiniz kategorileri seçin.

Yönetici Etiketi

Bu, kolay tanımlama için yapıcıdaki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullandığınızda, bu etiketler Divi Builder arayüzünün modül bloğunda görünür.

Arama Tasarımı Seçenekleri

Tasarım sekmesinde, yazı tipleri, renkler, boyutlandırma ve boşluk gibi tüm modül stil seçeneklerini bulacaksınız. Bu, modülünüzün görünümünü değiştirmek için kullanacağınız sekmedir. Her Divi modülünde, herhangi bir şeyi ince ayar yapmak için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

divi arama tasarımı.png

Giriş alanının arka plan rengi

Burada arama çubuğunun arka plan rengini değiştirebilirsiniz.

Yer Tutucu Rengi

Arama alanı kullanılmadan önce, yer tutucu metin alanın içinde bulunur. Alanın arka plan rengini ayarladıysanız, okunabilir olduğundan emin olmak için yer tutucu metin rengini de ayarlayabilirsiniz.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Metin rengi

Burada metninizin değerini seçebilirsiniz. Koyu bir arka plan üzerinde çalışıyorsanız, metniniz açık olmalıdır. Açık renkli bir arka planla çalışıyorsanız, metniniz koyu olmalıdır.

Metin oryantasyonu

Bu, metninizin modülde nasıl hizalanacağını kontrol eder.

Giriş polisi

Açılır menüden istediğiniz yazı tipini seçerek giriş metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Ayrıca kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

Giriş yazı tipi boyutu

Burada giriş metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına doğrudan istenen metin boyutunun değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Giriş metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Giriş metninizin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Harf aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Giriş metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Çizginin yüksekliği

Satır yüksekliği, giriş metninizin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya alana istediğiniz boşluk boyutunu girin. imlecin sağındaki giriş. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Düğme ve kenarlık rengi

Bu, arama düğmesinin arka planını ve kenarlık rengini değiştirecektir.

Düğme yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek düğme metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

Düğme yazı tipi boyutu

Burada düğme metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına doğrudan istenen metin boyutunun değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Düğme metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Düğme metninizin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Düğme harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Düğme metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Düğme çizgisinin yüksekliği

Satır yüksekliği, düğme metninizin her satırı arasındaki boşluğu etkiler Her satır arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya giriş alanına istediğiniz boşluk boyutunu girin imlecin sağında bulunur. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Maksimum genişlik

Varsayılan olarak, arama çubuğunun maksimum genişliği% 100 olarak ayarlanmıştır. Bu, arama çubuğunun genişliği ana sütunun genişliğini aşmadığı sürece arama çubuğunun doğal genişliğinde görüntüleneceği anlamına gelir; bu durumda arama çubuğu sütun genişliğinin% 100'ü ile sınırlandırılır. Arama çubuğunun maksimum genişliğini daha da kısıtlamak istiyorsanız, bunu istediğiniz maksimum genişlik değerini buraya girerek yapabilirsiniz. Örneğin,% 50 değeri, arama çubuğunun genişliğini ana sütunun genişliğinin% 50'si ile sınırlar.

Özel marj

Kenar boşluğu, modülünüzün dışına, modül ile üstündeki, altındaki veya solundaki ve sağındaki sonraki öğe arasına eklenen boşluktur. Modülün dört kenarından herhangi birine özel kenar boşluğu değerleri ekleyebilirsiniz. Özel marjı kaldırmak için, giriş alanından katma değeri kaldırın. Varsayılan olarak, bu değerler piksel cinsinden ölçülür, ancak giriş alanlarına özel ölçü birimleri girebilirsiniz.

Özel dolgu

Dolgu, modülünüzün içine, modülün kenarı ile iç öğeleri arasına eklenen boşluktur. Modülün dört kenarından herhangi birine özel dolgu değerleri ekleyebilirsiniz. Özel marjı kaldırmak için, giriş alanından katma değeri kaldırın. Varsayılan olarak, bu değerler piksel cinsinden ölçülür, ancak giriş alanlarına özel ölçü birimleri girebilirsiniz.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Araştırma Modülünün Gelişmiş Seçenekleri

Gelişmiş sekmesinde, özel CSS ve HTML özellikleri gibi daha deneyimli web tasarımcılarının yararlı bulabileceği seçenekler bulacaksınız. Burada, modülün birçok öğesinden herhangi birine özel CSS uygulayabilirsiniz. Ayrıca, alt temanızın style.css dosyasında modülü özelleştirmek için kullanılabilen modüle özel CSS sınıfları ve kimlikleri de uygulayabilirsiniz.

divi gelişmiş opsiyon modülü search.png

CSS Kimliği

Bu modül için kullanmak üzere isteğe bağlı bir CSS Kimliği girin. Kimlik, özel bir CSS stili oluşturmak veya sayfanızın belirli bölümlerine bağlanmak için kullanılabilir.

CSS sınıfı

Bu modül için kullanmak üzere isteğe bağlı CSS sınıflarını girin. Özel CSS stili oluşturmak için bir CSS sınıfı kullanılabilir. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz. Bu sınıflar, Divi alt temanızda veya Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili bileşenine de uygulanabilir. Özel CSS bölümünde, her öğeye doğrudan özel CSS stil sayfaları ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketlerine sarılmıştır. Bu yüzden CSS kurallarını noktalı virgülle ayırarak girin.

görünürlük

Bu seçenek, modülünüzün göründüğü cihazları kontrol etmenizi sağlar. Modülünüzü tabletlerde, akıllı telefonlarda veya masaüstlerinde ayrı ayrı devre dışı bırakmayı seçebilirsiniz. Bu, farklı cihazlarda farklı modlar kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

Diğer Divi öğreticiler

Bu makale yorumları 4 içeriyor

  1. Bonjour

    Bu yazı için teşekkür ederiz.
    Bahsetmediğiniz bir nokta var (ve maalesef bu tam da bana sorun yaratan nokta ...):

    Arama düğmesini görüntülemeyi seçerken varsayılan olarak düğmenin metni "Ara" dır ve bilmek istiyorum, bu metni kişiselleştirmek için nasıl değiştirebilirim? Ne kadar dikkatli bakarsam bakayım, bu değişikliği yapmanın mümkün olduğu bir alan ya da alan bulamadım ...

    Yardımınız için şimdiden teşekkürler !

  2. Merhaba, makale için teşekkürler. Bir sorum var, arama formu sadece bir sayfanın bir bölümü için kullanılabilir mi? örneğin SSS bölümü için, sadece SSS (+ 20 soru) ile sınırlı bir arama formu kurmak istiyorum, bu şekilde kullanıcının hepsini okumak zorunda kalmaz, sadece arama formu sayesinde bulur önem verdiği anahtar kelimelere sahip olanlar. Cevabınız için şimdiden teşekkür ederim.

  3. Bu makale için teşekkür ederiz, sayfaları arama modülünden çıkarmak güzel, ancak başlığın büyüteci ile arama yaptığınızda sayfaları da hariç tutabilir misiniz? teşekkür ederim

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
21 hisseleri
hisse12
cıvıltı2
Enregistrer7