İşi teşvik eden divi ile dikey navigasyon nasıl yapılır

Bugünün Divi öğreticisinde, web siteniz için işletmeleri teşvik eden dikey navigasyonun nasıl oluşturulacağını göstereceğiz. Size nasıl yapılacağını göstereceğimiz dikey navigasyon, genellikle ziyaretçilerin hemen harekete geçmesi için önemli olan işletmeler için kullanılacaktır. Örneğin, müşterilerin çevrimiçi sipariş vermesine izin veren bir restoranınız varsa, web sitenizin ziyaretçilerin hızlı bir şekilde hareket etmesine yardımcı olmasını isteyebilirsiniz. Nasıl yapılacağını göstereceğimiz dikey navigasyon, bir sayfa değil, önemli bilgiler ve harekete geçme davetini içerecektir. Bunu dikey navigasyona dahil etmek, ziyaretçileri sipariş etmeye teşvik edecektir ve böylece web sitelerinin dönüşüm seviyesini artıracaktır.
Sonuçlar Farklı adımlara ve ilhama girmeden önce, bu yazının sonunda elde edebileceğiniz dikey navigasyon sonuçlarına bakalım:

Dikey navigasyona tüm farklı menü öğelerinin nasıl ekleneceğini göstermenin yanı sıra, sabit navigasyon da kullanacağız. Bu şekilde, bilgilerin tüm sayfalardaki ziyaretçileri takip ettiğinden eminsiniz. Bu işi bir önceki yazıda sergilediğimiz web sitesinden gelmeye teşvik eden dikey navigasyon için ilham kaynağı için ilham kaynağı. Bu yazıda, kendi web siteleri için dikey navigasyon kullanan 12 web sitesi ekledik. İnsanların dikkatini çeken bir örnek, Eat Thai Restaurant web sitesidir. Dikey navigasyonları, kutudan çıkma konseptlerinden biridir. Web siteleri bir sayfadır, ancak navigasyon olasılığını kullanmaya devam etmenin iyi bir yolunu bulurlar. Web siteleri şöyle görünüyor:

DIVI ile dikey navigasyon nasıl yapılır YouTube kanalına bir iş aboneliği teşvik eden dikey navigasyonu etkinleştirdiğimiz, Divi tarafından sunulan dikey navigasyon seçeneğini etkinleştirmeliyiz. Bunu yapmak için WordPress Dashboard> Ekran> Başlık ve Navigasyon> Başlık Biçimi> Dikey Navigasyonu Etkinleştirin. Eat Thai Restaurant web sitesi gibi yeniden yaptırdığımız sabit dikey navigasyonun etkinleştirilmesi düzeltilecektir. Dikey navigasyonunuzu geliştirmek için WordPress Dashboard> Divi> Tema Seçenekleri> Genel Sekmeler> Kalıcı Gezinmeyi Etkinleştirin.

Ana menü ayarları (tema ayarı) Yapmanız gereken bir sonraki şey, ana menünüzde bazı değişiklikler yapmaktır. WordPress Gösterge Tablosunu kullanıyorsanız, görünümü aç> Özelleştir> Başlık ve Navigasyon> Birincil Menü Çubuğu. Orada bulunduktan sonra, aşağıdaki değişiklikleri (veya yapmak istediğiniz diğer değişiklikleri) yapabilirsiniz:

Logo görüntülerini gizle: Devre Dışı Bırak
Max Yüksek Logo: 100
Menü Marjı: 0
Metin Boyutu: 14
Mektup alanı: -1
Yazı Tipi: Lato Light
Metin rengi: #ffffff
Aktif bağlantı rengi: #ffffff
Arka plan rengi: #004159
Açılır menü arka plan rengi: #004159
Sabit Gezinme Menüsü Ayarları (Tema Ayarı) Temanın ayarlanmasında yapmamız gereken son şey, kaydırılırken logonun görünmesini sağlamaktır. Hala tema ayarını kullanıyorsanız, başlığı aç ve navigasyon> navigasyon ayarları kalır> ve ‘logoyu gizle’ seçeneğinin devre dışı bırakıldığından emin olun.

Bir sonraki menü öğesini ekleyin, dikey navigasyonumuza menü öğeleri ekleyeceğiz. Bu yazı bölümü zamanınızın çoğunu geçirebilir. Her öğeyi özel bir bağlantı üzerinden tek tek eklemelisiniz. CSS sınıfını etkinleştirin, ancak menü öğeleri eklemeye başlamadan önce, CSS sınıfı seçeneklerinin etkinleştirildiğinden emin olmalısınız. Bu seçenek, her menü öğesine sınıf ayarlamanızı tek tek ayarlamanıza olanak tanır. Bu durumda, çoğu öğenin kendi stil ayarlarına sahip olacağı için gereklidir. CSS sınıfı seçeneğini etkinleştirmek için, menü sayfasının sağ üst kısmındaki ‘Ekran Seçenekleri’ni tıklayın ve aşağıdaki ekran görüntülerinde gösterildiği gibi CSS sınıfı seçeneğini etkinleştirin. Yeni bir menü ekleyin Menü öğeniz için CSS sınıfını etkinleştirdikten sonra, Devam edin ve yeni bir menü oluşturun. Ad ve bu yeni menüyü ana menünüz olarak yaptığınızdan emin olun.

Tüm menü öğelerini ekledikten sonra (adım adım göstereceğiz), menünüz arkada böyle görünecektir:

Telefon numarası Bu bir sayfa olduğu için menüde hiçbir sayfa olmayacaktır. Menüye ekleyeceğimiz tüm öğeler özel bir bağlantı olacaktır. Bu bize eklemek istediğimiz şeylerle oynama olasılığını verir.

İlk menü öğenizi eklemek için özel bir bağlantıyı tıklayın ve Navigasyon Etiketi alanına bir telefon numarası ekleyin. Oraya bir URL eklemek isteyip istemediğinizi seçebilirsiniz. Ancak, menüye menü öğeleri eklerken URL’yi doldurmanız gerekir. Menü öğesi menünüze eklendikten sonra, URL’yi silebilirsiniz ve birisi menü öğesini tıkladığında hiçbir şey olmayacağından emin olursunuz.

Menü öğesini menünüze ekledikten sonra, CSS sınıfının göründüğünü de göreceksiniz. Menü öğesinin stilini değiştirecek CSS sınıfına karar vermeniz gereken yer burasıdır. Bu durumda, ‘telefon numarası’ sınıfını kullanıyoruz. Bu yazının sonuna CSS kod satırını kopyalamak ve eklemek istiyorsanız, bu adımlarda belirtilen CSS sınıfını kullandığınızdan emin olun. Navigasyon etiketindeki adresi doldurun ve isterseniz URL’yi ekleyin. Adres menü öğesi için kullandığımız sınıf yalnızca ‘adres’.
Sosyal simgeler dikey navigasyona sosyal simgeler ekler. Biraz daha fazla çabaya ihtiyacınız var. Önceki yazıda, ana menünüze sosyal simgelerin eklenmesini açıkça ele alıyoruz. Bununla birlikte, bu durumda, yöntem biraz farklı olacaktır çünkü dikey navigasyonda yan yana bir simge satır yapmalıyız. Olağanüstü yazı tipini ekleyin Yapmanız gereken ilk şey, yapmadıysanız, harika yazı tipini tema seçeneğinize eklemektir. Bunu yapmak için WordPress Dashboard> Divi> Tema Seçenekleri> Entegrasyon> ve aşağıdaki kısa kodları web sitenizin başına yapıştırın:

Sosyal ikonlara kısa kodlar almak için kısa kodlar alın; Bu sayfayı harika yazı tipi web sitesinde açın. Bu sayfada göreceğiniz arama alanında, dikey navigasyonunuza eklemek istediğiniz çeşitli simgeler arayın.

Simgeye tıkladıktan sonra, simgeye bağlı kısa kodu göreceksiniz. Bu kısa kodun her birini bir yere kaydedin.
Bir sonraki menüye sosyal simgeler ekleyin, sosyal simgeler ekleyeceğiz. Genellikle, her bir sosyal simgeyi menü öğesi olarak tek tek ekleyebilirsiniz. Ancak onların yan yana görünmelerini istediğimiz için, aynı menü öğesine yerleştirmeliyiz. Navigasyon etiketine eklemeniz gereken html kodu aşağıdaki gibidir: