İkincil menüye arama alanı nasıl eklenir Divi
Bugünün Divi öğreticisinde, ikincil menünüze nasıl bir arama alanı ekleyeceğinizi göstereceğiz. İkincil menü, sayfanızın başlığı olarak ve web siteniz veya şirketiniz hakkında bazı pratik bilgiler girmeye çalıştığınız yer olarak da bilinir. Buna arama alanları eklemek, istemcilerden veya kendi web siteniz için sahip olduğunuz ihtiyaçlarınız olabilir. Her iki durumda da, Divi temasını kullanırken bu arama alanını ikincil navigasyonunuza nasıl kolayca entegre edebileceğinizi göstereceğiz.
Oraya ulaşmak için atmanız gereken farklı adımlara dalmadan önce sonuçlar; Önce sonuçları göstermek ilginç olabilir. Gönderideki adımları izleyerek ve CSS ekranında değişiklik ekleyerek, ikincil menü varsayılan olarak aşağıdaki sonuçları alacaksınız:
Ancak, ikincil menünüzde arama yapma olasılığını eklemek ilginç bir şey olabilir.Neden eklemek istediğin bazı nedenlere bakalım.Ziyaretçilerinize, web sitenizde her türlü ziyaretçiye sahip olduğunuz en başından beri arama olasılığını sunun.Bazıları çeşitli şeyleri keşfetmek ve zaman ayırmak isterken, diğerleri hemen belirli bilgiler bulmak istiyor.Arama alanınızı ikincil menüye ekleyerek, belirli bir şey arayan ziyaretçilerin hemen yapabildikleri garanti edilecektir.İkincil menü sayfanın en üstünde bulunduğundan, acele bir ziyaretçi kullanıcı deneyimlerini geliştiren çabaları takdir edecektir.
Ana menünüzü elbette arama alanından kaydetmek için yapabileceğiniz başka bir şey, arama alanını ana menüye eklemektir. Ancak bazı durumlarda, bunu yapmak istemeyebilirsiniz. Örnek olarak; Menü öğenize odaklanmak istiyorsanız veya menü öğesini arama alanıyla karıştırmak istemiyorsanız. Başka bir neden, ana menünüzü meşgul eden birkaç menü öğeniz olması ve üzerine arama alanları eklemek istememeniz olabilir. Çarpıcı bir ana menüye sahip olmadan arama alanını vurgulayın Çoğu insan ana menülerini sakin tutma ve ikincil menülerini görünmesini sağlama eğilimindedir. Özellikle, iki menü arasında net bir fark göstermek istedikleri için. Ve ikincil, çünkü ikincil menü genellikle vurgulamak istedikleri bazı şeylere sahiptir (sosyal medya simgeleri gibi). Arama alanını ikincil menünüzde de entegre etmeye karar verdiğinizde, otomatik olarak vurgulanacak ve ziyaretçilerinizi aradıklarını arayacak ve bulduklarını bulmaya teşvik edecektir. YouTube kanalına, aşağıdaki resimde gösterildiği gibi başlığınıza bir arama alanı eklemek için arama alanını şimdi PHP başlık dosyasına ekleyin, özellikle header.php dosyasına web sitenize bir şey eklemelisiniz. İhtiyacınız olan kod satırı aşağıdaki gibidir: Lütfen bu PHP kod satırını kopyalayın ve WordPress kontrol panelinize gidin. WordPress kontrol panelinizde, görünüm> Editör> Header.php.
Artık arama çubuğunuzu istediğiniz yere kod satırını yerleştirebilirsiniz. Sosyal medya simgesinin hemen yanında görünmesini istediğimiz için, size tam olarak koda koyduğunu göstereceğiz. İkincil menüden hemen önce koymalıyız, üst kap ve başlık kapalı. Arama alanınız varsayılan, arama alanının oldukça modası geçmiş. Sadece istediğiniz gibi görünmesini sağlamak ve diğer web sitenizin görünümüne ve hissine uymasını sağlamak için birkaç şeyi değiştirmek isteyebilirsiniz. Bunlar değiştirmek isteyebileceğiniz üç şeydir: etiket, arama girişi ve giriş düğmesi. Arama alanında CSS modifikasyonları yapmazsanız, varsayılan olarak ikincil menünüzde böyle görünecektir: Açık olan, elde etmek istediğimiz nihai sonuç değil. Neyse ki, istediğimiz kadar çok değişiklik yapabiliriz. Bu yazının bir sonraki bölümünde, arama alanının tüm öğelerini nasıl değiştireceğinizi göstereceğiz ve aşağıdaki sonuçları elde etmek için CSS kod satırlarını da paylaşacağız:
Arama sütununun bir parçası olan ilk öğe arama etiketini Sil/Değiştir. Bu, insanlara alanları kullanarak web sitesinde herhangi bir şeyi arayabileceklerini açıklayan bir metindir. Ancak, bu etikete gerek yoktur. Herkes şu anda arama alanının nasıl çalıştığını biliyor. ‘Ekran: Yok’ ekleyerek arama etiketini her zaman ortadan kaldırabilirsiniz. Etiketten CSS’ye. Veya etiket ekranını değiştirebilirsiniz. Arama etiketinde değişiklik yapmanız gereken sınıf “. Ekran-Reader-Text” dir. Aşağıdaki örnekte gösterildiği gibi, görünüşe girmeyecek şekilde devre dışı bırakabilirsiniz … ekran-okuyucu-metin {
Görüntü yok; } Stil Aramanızı girin Bir sonraki şey stilin arama girişi olmasını isteyebileceğiniz şey. Bu girişte ayarlamalar yapmak için, tüm CSS kod satırlarını aşağıdaki parantez arasına yerleştirin: Giriş#S{
} Düğmenizin giriş stili ve son olarak, bir düğme stilimiz de var. Arama alanında herhangi bir değişiklik yapmak için CSS kod satırınızı aşağıdaki parantez arasına yerleştirin: Giriş#Searchsubmit
{
} CSS kodu örneğimiz için gereklidir
Bir PHP modifikasyonu yaptıktan sonra, WordPress Dashboard> Divi> Tema Seçenekleri> Genel> ‘i açarak yukarıda gösterilen sonuçları hemen gerçekleştirebilir ve aşağıdaki CSS kod satırını özel alana ekleyebilirsiniz:
.Sreen-Reader-Text {
Görüntü yok; }
Giriş#s {
Border-Radius: 5 piksel;
}
Giriş#SearchSubmit {
Sınır: 1 piksel katı #000000;
Renk: #ffffff;
Arka Plan rengi: #000000;
Border-Radius: 5 piksel;
}
Form#SearchForm {
Sağa çık;
}
@Media ekranı ve (min genişliği: 480px) {
#Top-Header. Container {dolgu-dip: 5px;
}
#ET-Econdal-Menu .et-Social-icons {
Marj-Top: 6px;
}}
Sonuçlar Şimdi tüm adımlardan geçtikten sonra, başlığınızın nasıl göründüğüne tekrar bakalım:
Bu öğreticideki son zihin, ikincil menünüze arama alanları nasıl ekleyeceğinizi gösterdik.Buna ek olarak, arama alanındaki öğeleri nasıl değiştireceğinizi ve kendinizi kullanmak için kopyalayıp yapıştırabileceğiniz bir CSS kod satırı örneğini nasıl vereceğinizi gösterdik.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin!
Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!D Line / Shutterstock.com tarafından Üstün Görüntü
