Arama modülünü kullanarak, formulaire sitenizde herhangi bir yerde arama yapın. Bu formulaire Arama, ziyaretçilerinizin tüm sayfalar ve blog gönderileri dahil olmak üzere web sitenizin tüm içeriğini aramasına olanak tanır. Bu size Divi Builder'ın sunduğu esneklikle birlikte WordPress arama widget'ının işlevselliğini verir. Sadece konumunu kontrol edemezsiniz formlar sayfada arama yapın, aynı zamanda tasarımını özelleştirin.
Sayfanıza bir arama modülü nasıl eklenir
Sayfanıza bir arama modülü ekleyebilmeniz için önce Divi Builder'a atlamanız gerekir. Bir kere Divi teması web sitenize yüklediğinizde 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.
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.
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.
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
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.
İş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.
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.
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.
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.
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.
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.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" boş "layout =" genişletilmiş "align =" center "font_family =" Raleway "font_weight =" 700 ″ stil = "düz" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI TEMAINI İNDİRİN [/ vcex_button] [/ width_column] [»vc_column » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "boş" düzen = "genişletilmiş" hizalama = "orta" font_family = "Raleway" font_weight = "700 ″ stil =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-indirme "] ŞABLONLARI İNDİR DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Diğer Divi öğreticiler
- restoran kullanımı Divi tema için 5 siteleri
- Bir Divi WooCommerce ürününe metin ekleme
- Divi sayfaları arasındaki menü rengini değiştirme
- Bir blog'un ızgaralarını Divi ile kişiselleştirme
- Nasıl WordPress üzerinde rol Divi editörü kullanımı
- Tam ekran Divi sürgüsü nasıl oluşturulur
- Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
- Divi hakkında muhtemelen bilmediğiniz özellikler
- WordPress üzerinde Divi Builder nasıl kullanılır
- Divi video kaydırma modülü nasıl kullanılır
- Divi Builder Flip modülü nasıl kullanılır
- Divi Builder'da referans modülü nasıl eklenir?
- Divi metin modülü nasıl kullanılır?
- Divi'de kaydırıcı nasıl oluşturulur
- Divi kullanıcı rolü nasıl düzenlenir
- Divi Sosyal Medya modülü nasıl kullanılır?
- WordPress Divi konulu mağaza modülü nasıl kullanılır?
- Divi kenar çubuğu modülü nasıl kullanılır
- Divi Fiyat Tablosu Modülünün Kullanımı
- Divi yayınlarının başlık modülünü nasıl kullanırım
- Divi video modülü nasıl eklenir
- Makale navigasyon modülü nasıl kullanılır
- Divi arama modülü nasıl kullanılır?
- Divi cüzdan modülü nasıl kullanılır?
- Divi Builder'da kişi modülünün kullanımı
- Divi filtreli cüzdan modülü nasıl kullanılır
- Tam genişlikte sürgü modülü nasıl kullanılır
- Divi Builder Görüntü Modülü nasıl kullanılır?
- Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
- Resim galerisi modülü nasıl kullanılır?
- Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
- Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
- Divi tam genişlikli başlık modülü nasıl kullanılır?
- Divi Sayaç Modülünün Kullanımı
- Divi Builder'daki makaleler sürgüsünü kullanma
- Divi Email Optin modülü nasıl kullanılır?
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 !
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.
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
Bonjour David,
Bu seçeneği henüz test etmedim.