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.

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.

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.

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.

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.

[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