Divi ile İşe Yön Veren Dikey Navigasyon Nasıl Oluşturulur

Bugünün Divi eğitiminde, web siteniz için işletmeyi yönlendiren dikey bir gezinmeyi nasıl oluşturacağınızı göstereceğiz. Size nasıl yapılacağını göstereceğimiz dikey gezinme, genellikle ziyaretçilerin hemen harekete geçmesinin önemli olduğunu düşünen işletmeler için kullanılacaktır. Örneğin, müşterilerin çevrimiçi sipariş vermesine olanak tanıyan bir restoranınız varsa, web sitenizin ziyaretçilerin hızlı hareket etmesine yardımcı olmasını isteyebilirsiniz.

Size nasıl yapılacağını göstereceğimiz dikey gezinme, sayfalar yerine önemli bilgiler ve harekete geçirici mesajlar içerecektir. Bunları dikey gezinmeye dahil etmek, ziyaretçileri sipariş vermeye teşvik edecek ve böylece web sitesinin dönüşüm oranını artıracaktır.

Sonuç

Farklı adımlara ve ilham kaynağına dalmadan önce, bu yazının sonunda elde edebileceğiniz dikey gezinme sonucuna bir göz atalım:

Tüm farklı menü öğelerini dikey gezinmeye nasıl ekleyeceğinizi göstermenin yanı sıra, sabit gezinmeyi de kullanacağız. Bu şekilde, bilgilerin tüm bir çağrı cihazı boyunca ziyaretçileri takip ettiğinden emin olursunuz.

Esin

İşi yönlendiren dikey gezinme konusunda bunun için aldığımız ilham, önceki bir gönderide sergilediğimiz bir web sitesinden geliyor. Bu gönderide, kendi web sitelerinin amaçları için dikey gezinmeyi kullanan 12 web sitesini listeledik. İnsanların dikkatini çeken örneklerden biri Eat Thai Restaurant web sitesiydi. Dikey navigasyonları, kullanıma hazır konseptlerden biridir. Web siteleri tek sayfalık ama yine de navigasyon olanaklarından yararlanmanın güzel bir yolunu bulmuşlar. Web siteleri şöyle görünüyor:

Divi ile İşe Yön Veren Dikey Navigasyon Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Dikey Gezinmeyi Etkinleştir

Başlamak için Divi'nin sunduğu dikey gezinme seçeneğini etkinleştirmemiz gerekecek. Bunu yapmak için WordPress Panonuz > Görünüm > Başlık ve Gezinme > Başlık Biçimi > Dikey Gezinmeyi Etkinleştir'e gidin.

Sabit Navigasyonu Etkinleştir

Yeniden oluşturduğumuz dikey gezinme, Eat Thai Restaurant web sitesinde olduğu gibi düzeltilecek. Dikey gezinmenizi sabit hale getirmek için WordPress Panonuz > Divi > Tema Seçenekleri > Genel sekmesi > Sabit Gezinmeyi Etkinleştir'e gidin.

Birincil Menü Ayarları (Tema Özelleştirici)

Yapmanız gereken bir sonraki şey, Birincil Menünüzde bazı değişiklikler yapmaktır. WordPress Kontrol Panelinizdeyseniz, Görünüm > Özelleştir > Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin . Oradayken, üzerinde aşağıdaki değişiklikleri (veya yapmak istediğiniz diğer değişiklikleri) yapabilirsiniz:

• Logo Resmini Gizle: Devre Dışı Bırak
• Logo Maksimum Yükseklik: 100
• Menü Üst Kenar Boşluğu: 0
• Metin Boyutu: 14
• Harf Aralığı: -1
• Yazı Tipi: Lato Işık
• 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 Özelleştirici)

Tema Özelleştirici'de yapmamız gereken son şey, kaydırma sırasında da logonun göründüğünden emin olmaktır. Hala Tema Özelleştirici'deyseniz, Başlık ve Gezinme > Sabit Gezinme Ayarları > seçeneğine gidin ve 'Logoyu Gizle' seçeneğinin devre dışı olduğundan emin olun.

Menü Öğeleri Ekle

Devam ederek, menü öğelerini dikey navigasyonumuza ekleyeceğiz. Yazının bu kısmı muhtemelen zamanınızın çoğunu alacak. Özel bağlantılar aracılığıyla öğelerin her birini ayrı ayrı eklemeniz gerekir.

CSS Sınıflarını Etkinleştir

Ancak menü öğelerini eklemeye başlamadan önce, CSS Sınıfları seçeneğinin etkinleştirildiğinden emin olmanız gerekir. Bu seçenek, menü öğelerinin her birine ayrı ayrı bir sınıf atamanıza olanak tanır. Bu durumda, öğelerin çoğu kendi stil ayarlarına sahip olacağından bu gereklidir. CSS Sınıfları seçeneğini etkinleştirmek için Menü sayfasının sağ üst kısmındaki 'Ekran Seçenekleri'ne tıklayın ve aşağıdaki ekran görüntüsünde gösterildiği gibi CSS Sınıfları seçeneğini etkinleştirin.

Yeni Menü Ekle

Menü öğeleriniz için CSS sınıflarını etkinleştirdikten sonra devam edebilir ve yeni bir menü oluşturabilirsiniz. Bir ad verin ve bu yeni menüyü birincil menünüz yaptığınızdan emin olun.

Tüm menü öğelerini ekledikten sonra (size adım adım göstereceğiz), menünüz arka uçta şöyle görünecektir:

Telefon numarası

Bu tek sayfalık olduğu için menüde herhangi bir sayfa bulunmayacaktır. Menüye ekleyeceğimiz tüm öğeler daha çok özel bağlantılar olacak. Bu bize eklemek istediğimiz şeylerle oynama imkanı verir.

İlk menü öğenizi eklemek için Özel Bağlantılar'a tıklayın ve Gezinme Etiketi alanına telefon numarasını ekleyin. URL'ye eklemek isteyip istemediğinizi seçebilirsiniz. Ancak, menü öğesini menünüze eklerken bir URL girmeniz gerekir. Menü öğesi menünüze eklendikten sonra, URL'yi silebilirsiniz ve birileri menü öğesine tıkladığında hiçbir şey olmayacağından emin olursunuz.

Menü öğesini menünüze ekledikten sonra, CSS sınıfının da göründüğünü göreceksiniz. Menü öğesinin stilini değiştirecek bir 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 sonundaki CSS kod satırlarını kopyalayıp yapıştırmak istiyorsanız, bu adımlarda bahsedilen CSS sınıflarını kullandığınızdan emin olun.

Adres

Aynı şekilde adresi de ekleyeceğiz. Adresi Gezinme Etiketi'ne girin ve isterseniz bir URL ekleyin. Adres menü öğesi için kullandığımız sınıf basitçe 'adres'tir.

Sosyal Simgeler

Sosyal simgeleri dikey navigasyonunuza eklemek biraz daha fazla çaba gerektirir. Önceki bir gönderide, birincil menünüze sosyal simgeler eklemeyi açıkça ele aldık. Ancak bu durumda, dikey gezinmede simgeleri yan yana dizmemiz gerekeceğinden yöntem biraz farklı olacaktır.

Harika Yazı Tipi Ekle

Yapmanız gereken ilk şey, henüz yapmadıysanız, Tema Seçeneklerinize Harika Yazı Tipi'ni eklemektir. Bunu yapmak için WordPress Panonuz > Divi > Tema Seçenekleri > Entegrasyon > Ve aşağıdaki kısa kodu web sitenizin başına yapıştırın:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Kısa Kodları Alın

Sosyal simgelere kısa kodlar almak için; Bu sayfayı Font Awesome'in web sitesinde açın. Bu sayfada göreceğiniz arama alanında, dikey navigasyonunuza eklemek istediğiniz farklı simgeleri arayın.

Simgeye tıkladığınızda, simgeye bağlı olan kısa kodu göreceksiniz. Bu kısa kodların her birini bir yere kaydedin.

Menüye Sosyal Simgeler Ekle

Devam ederek, sosyal simgeleri ekleyeceğiz. Normalde, sosyal simgelerin her birini ayrı ayrı menü öğeleri olarak ekleyebilirsiniz. Ancak yan yana görünmelerini istediğimiz için onları aynı menü öğesine yerleştirmemiz gerekecek. Gezinme Etiketine eklemeniz gereken HTML kodu şudur:

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

Simgelerin her birine bir URL eklemeyi unutmayın. Her üç sosyal simgenin birleşimi için kullandığımız sınıf 'simge sarmalayıcı'dır, ancak bireysel ayarlamalar yapmak için sosyal simgelerin her birine fazladan bir sınıf da atadık. Bu sınıfları Font Awesome dersinden hemen sonra fark edebilirsiniz. Bunlara 'facebook', 'instagram' ve 'zarf' denir.

Talimatlar

Sonraki menü öğesi için, CSS sınıf adı olarak 'yol tarifi' kelimesini kullandık.

Hat

Yönergelerin hemen altına bir satır eklemek için Etiket Gezintisine boş bir karakter eklemeliyiz. Bunun nedeni, WordPress'in kendisine bağlı bir etiket olmadan bir menü öğesi oluşturmanıza izin vermemesidir. Satır menüsü öğenize boş bir karakter eklemek için ' ' eklemeniz yeterlidir. Navigasyon Etiketine gidin. Ayrıca, bu menü öğesine CSS sınıf adı olarak 'line' ekleyin.

Açılış saatleri

Devam ederek, açılış saatlerini ekleyeceğiz ve buna 'hours' CSS sınıf adını atayacağız.

CTA 1

Ardından, ilk CTA'yı ekleyeceğiz. Buna 'cta-1' CSS sınıf adını atayacağız.

CTA 2

İkinci CTA için 'cta-2' CSS sınıf adını kullanacağız.

Düğme CTA'sı

CTA düğmesini dikey navigasyonunuza eklemek, yalnızca metin olan normal menü öğelerinden birkaç adım daha gerektirir. Tek çağrı cihazı olarak kullandığınız sayfayı açarak başlayın ve aşağıda belirtilen sonraki adımları izleyin.

Açılış Sayfasında Düğme Oluştur

Dikey Gezinme'nizde bir düğme CTA'sını kullanmak istiyorsanız, aynı düğmenin tek çağrı cihazınızda bir yerde olması gerekir. Bir tane oluşturduktan sonra, öğeyi inceleyebilir ve web sitenizin kodunda görünen aşağıdaki kod satırlarını (oluşturduğunuz düğmeyle bağlantılı) kopyalayabilirsiniz:

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

Tabii ki, bu kod sizin stilinize göre farklılık gösterebilir. Aynı sayfada başka düğmeler olup olmadığına da bağlıdır. Düğmenin, düğmenin bulunduğu sayfada yalnızca ona atadığınız stille görüneceğini bilin. Bu nedenle, dikey navigasyonunuza bir düğme eklemek, genellikle yalnızca tek bir çağrı cihazıyla ilgili olduğunda tercih edilir.

Not: Düğme Modülü içindeki düğmenizin yazı tipi boyutunu ve dolgusunu Dikey Gezinmenize mükemmel şekilde uyacak şekilde ayarladığınızdan emin olun.

Menü Öğesi Olarak Ekle

Düğmeye bağlı gerekli HTML kodunu kopyaladığınıza göre, yeni bir özel bağlantı ekleyin ve kodu Gezinme Etiketine ekleyin. Bu menü öğesi için kullandığımız CSS sınıfı 'cta-3'.

CSS Kod Satırları Ekle

Bu gönderinin sonraki bölümü, nihai sonucu ve düzeni elde etmenize yardımcı olacak CSS kod satırlarını paylaşmaya ayrılmıştır. Farklı menü öğelerine atadığımız CSS sınıflarını kullandığımızı fark edeceksiniz. Ancak, farklı sınıf adları kullanmaya karar verdiyseniz, çalışmasını sağlamak için bunları CSS kodunda değiştirdiğinizden emin olun.

CSS kodunu eklemek için WordPress Panonuz > Divi > Tema Seçenekleri > Genel sekmesine gidin ve Özel CSS kutusuna aşağıdaki CSS kodu satırlarını ekleyin:

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

Bölümlerin Arka Plan Rengini Değiştir

Yapmanız gereken son adım, tek çağrı cihazınızdaki bölümlerin arka plan renklerini değiştirmek. Bu rengin, sayfa kapsayıcınız için kullandığınız renkle aynı olduğundan emin olun. Bu durumda, bu '#d6d4d1'.

Sonuç

Tüm menü öğelerini ve bu menü öğelerinin her birine bağlı CSS kodunu ekledikten sonra, aşağıdaki sonucu elde edebilmeniz gerekir:

Son düşünceler

Bu gönderide, tek sayfalık cihazınız için nasıl dikey gezinme oluşturacağınızı gösterdik. Bu gönderi, Divi ile yapılan Eat Thai Restaurant web sitesinden ilham aldı. Tüm gönderiyi adım adım takip ettiyseniz, yukarıda gösterilen sonucu elde edebilmiş olmalısınız. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Öne Çıkan Görsel Vectomart / Shutterstock.com