ev borcu WordPress sitesi
Zarif Temaların Ücretsiz 10. Yıldönümü Zaman Çizelgesi Düzenine Etiketli Nokta Gezintisi Nasıl Eklenir
Yeni Zaman Çizelgesi Düzeni ücretsiz olarak indirilebilir, ancak YALNIZCA BUGÜN BİTECEK olan Elegant Themes'in 10. Yıl Dönümü İndirimi sırasında indirilebilir. Şirketinizin zaman çizelgesini veya ziyaretçilerinizle paylaşmak istediğiniz diğer herhangi bir zaman çizelgesini sergilemenize yardımcı olacak şık bir tasarımdır. Ücretsiz düzenin yanı sıra, ziyaretçilerinizin nokta navigasyonunu kullanarak bu sayfada gezinmesine yardımcı olacak ilginç bir öğreticiyi paylaşacağız.
Nokta navigasyonu, sayfanızda olması güzel bir ekstradır. Özellikle oldukça uzun bir sayfanız varsa, ziyaretçilerin kolayca gezinmesini istersiniz. Ve bu eğitimde, bunu bir adım daha ileri götürmenize yardımcı olacağız. Sağ tarafta yalnızca noktalar kullanmak yerine, ilgili bölümlerin tümüne temsil ettiği bölümle eşleşen bir etiket verebilirsiniz. Bu şekilde, ziyaretçiler bu sayfada olduklarında belirli bir yıla gidebilirler.
Gizlice Bakış
Öğreticiye dalmadan önce, tam olarak oluşturacağımız tasarıma bir göz atalım.
Nokta Gezinmesini Anlama
- Nokta navigasyonunuzdaki her nokta bir bölümü temsil eder
- Her yılı doğru noktaya bağladığımızdan emin olmak için , her yılın başlangıcında yeni bir bölümümüz olduğundan emin olacağız.
- Nokta Gezinme, her bölüme bir numara atayan bir liste kullanır
- Listenin kendisi 1'den başlamaz, bunun yerine 0'dır , bu, ilk bölümünüzün listedeki '0' sayısı, ikincisi '1' sayısı, vb. anlamına gelir.
- Bu stratejiyi herhangi bir sayfa türü için yeniden kullanabilirsiniz, ancak etiketinizin uzunluğuna ve gezindiğiniz öğe sayısına göre CSS görünümünü değiştirmeniz gerekecektir.
1. Bölüm: Zarif Temaların Ücretsiz 10 Yıldönümü Zaman Çizelgesi Düzenini İndirin
10 Yıllık Yolculuk Sayfamıza giderek indirebileceğiniz Elegant Themes'in ücretsiz 10 Yıldönümü Zaman Çizelgesi Düzenini kullanıyoruz. Henüz Elegant Themes üyesi değilseniz veya hesabınızı yükseltmek/yenilemek istiyorsanız, şimdi tam zamanı! Normalde alabileceğiniz indirim miktarının iki katı olan %20'lik bir indirim sunuyoruz! 10 Yıllık Yolculuk Sayfasındayken, bu güzel sayfayı oluşturmak için kullanılan ücretsiz zaman çizelgesi düzenini de indir düğmesine tıklayarak indirebileceksiniz.
Bölüm 2: Zaman Çizelgesi Düzenini Kullanarak Yeni Sayfa Oluşturun
1. Adım: Zaman Çizelgesi Düzenini Divi Kitaplığınıza Yükleyin
Ücretsiz Zaman Çizelgesi Düzenini indirdikten sonra, onu Divi Kitaplığınıza yüklemeniz gerekir. Bunu yapmak için WordPress web siteniz > Divi > Divi Kitaplığı'na gidin ve JSON dosyasını sıkıştırılmış klasörünüze yükleyin.
2. Adım: Yeni Bir Sayfa Ekleyin ve Nokta Gezinmesini Etkinleştirin
Artık düzeni Divi Kitaplığınıza eklediğinize göre, yeni bir sayfa oluşturmanın zamanı geldi. Bir başlık ekledikten sonra, Divi'nin Sayfa ayarlarında Nokta Gezinmesini etkinleştirdiğinizden emin olun.
3. Adım: Görsel Yükleyici'ye geçin
Artık hemen Visual Builder'a geçebiliriz.
4. Adım: Zaman Çizelgesi Düzenini Yükleyin
Artı simgesine tıklayarak ve Kaydedilen Düzenleriniz sekmesinde düzeni seçerek Zaman Çizelgesi Düzenini yükleyin.
Bölüm 3: Her Yıla Yeni Bir Bölümle Başlayın
1. Adım: Yıl Numaralarını Ekleyin
Sayfanızda nereye gideceğinizi bilmek adına, zaman çizelgesi öğelerimizin her birine bir yıl vereceğiz. Biz sadece Elegant Themes'in 2008'den 2018'e olan yolculuğunu kullanıyoruz. Devam edin ve bu sayıları kronolojik sırayla ekleyin. Yeni bölümler eklemeyi bitirdikten sonra, bu Metin Modüllerini kullanmak istediğiniz metinle değiştirebilirsiniz.
Adım 2: Giriş Satırını Yeni Bölüme Yerleştirin
Oluşturmamız gereken ilk ek bölüm giriş bölümüdür. Bu şekilde, ilk zaman çizelgesi öğesinin kendi bölümü olacaktır.
Adım 3: 2011'i Yeni Bölüme yerleştirin
2010 ve 2011 zaman çizelgesi öğeleri varsayılan olarak aynı bölümde bulunur. 2011 için ayrı bir bölüm oluşturun ve satırı içine yerleştirin.
Bölüm 4: Sayfa Özel CSS'sine CSS Kodu Ekleme
Adım 1: CSS Kodu
CSS kodunu sayfamıza eklemeden önce, diğer sayfalar için de bir tane oluşturmanıza yardımcı olacak bazı kısımlarını detaylandıracağım. İhtiyacınız olan tüm CSS kodu şudur:
/*
################
1st year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:before {
content: "2008";
}
/*
################
2nd year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:before {
content: "2009";
}
/*
################
3rd year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:before {
content: "2010";
}
/*
################
4th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_6:before {
content: "2011";
}
/*
################
5th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_7:before {
content: "2012";
}
/*
################
6th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_8:before {
content: "2013";
}
/*
################
7th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_11:before {
content: "2014";
}
/*
################
8th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_14:before {
content: "2015";
}
/*
################
9th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_17:before {
content: "2016";
}
/*
################
10th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_18:before {
content: "2017";
}
/*
################
11th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_19:before {
content: "2018";
}
/*
################
Hide irrelevant sections
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_2,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_9,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_10,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_12,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_13,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_15,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_16,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_20,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_21,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_22 {
display: none !important;
}
/*
################
Styling of list in its total
################
*/
ul.et_pb_side_nav li.side_nav_item {
margin-bottom: -19px;
line-height: 2.7;
margin-top: 5px;
}
/*
################
Styling of each item individually
################
*/
ul.et_pb_side_nav li.side_nav_item a {
-webkit-box-shadow: -4px 6px 39px -4px rgba(128,123,128,1);
-moz-box-shadow: -4px 6px 39px -4px rgba(128,123,128,1);
box-shadow: -4px 6px 39px -4px rgba(128,123,128,1);
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
font-family: poppins;
font-size: 18px;
color: #F92C8B !important;
background-color: #F92C8B;
display: inline !important;
}
/*
################
Styling of each item individually when active
################
*/
ul.et_pb_side_nav li.side_nav_item a.active {
color: #000000 !important;
background-color: black !important;
}
/*
################
Styling of label
################
*/
ul.et_pb_side_nav li.side_nav_item a:before {
padding: 10px !important;
color: white !important;
}
/*
################
Styling of entire list
################
*/
ul.et_pb_side_nav {
width: 76px;
background: none;
top: 40%;
}
2. Adım: Dot Navigation'a Hangi Bölümleri Eklemek İstediğinize Karar Verin
Nokta Gezinme listesinde her bölümün kendi öğesi vardır. Bu düzen, zaman çizelgesine bağlı olmayan bölümleri ve dolayısıyla belirli bir yılı içerir. Bu yüzden onları nokta navigasyonuna dahil etmek gerekli değildir, bu yüzden bu öğeleri Nokta Navigasyonu içinde gizleyeceğiz. Önceki adımda size sağlanan kod, bu özel düzen için işlevseldir (bu yazının 2. bölümünü geçtikten sonra). Ancak bu yöntemi farklı sayıda bölümde kullanmak istiyorsanız sayfanızda hangi bölümlerin görünmesini istediğinizi belirlemeniz gerekecektir. Her sayfadaki ilk bölüm sıfırdan başlar. Yapı, Zaman Çizelgesi düzeninde şöyle görünür:
- Bölüm 0 → dahil etme
- Bölüm 1 → dahil etme
- 2. Bölüm → dahil etme
- Bölüm 3 → dahil et
- Bölüm 4 → dahil et
- Bölüm 5 → dahil et
- Bölüm 6 → dahil et
- Bölüm 7 → dahil et
- Bölüm 8 → dahil et
- Bölüm 9 → dahil etme
- Bölüm 10 → dahil etme
- Bölüm 11 → dahil et
- Bölüm 12 → dahil etme
- Bölüm 13 → dahil etme
- Bölüm 14 → dahil et
- Bölüm 15 → dahil etme
- Bölüm 16 → dahil etme
- Bölüm 17 → dahil
- Bölüm 18 → dahil
- Bölüm 19 → dahil
- Bölüm 20 → dahil etme
- Bölüm 21 → dahil etme
- Bölüm 22 → dahil etme
3. Adım: Pozitif Bölümler (Nokta Gezinmesine Dahil Et)
Nokta navigasyonunuza eklemek istediğiniz bölümlere karar verdikten sonra, aşağıdaki kodu kullanarak ve içeriği ihtiyaçlarınıza göre değiştirerek her biri için etiketi belirlemeniz gerekir:
/*
################
1st year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:before {
content: "2008";
}
/*
################
2nd year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:before {
content: "2009";
}
/*
################
3rd year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:before {
content: "2010";
}
/*
################
4th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_6:before {
content: "2011";
}
/*
################
5th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_7:before {
content: "2012";
}
/*
################
6th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_8:before {
content: "2013";
}
/*
################
7th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_11:before {
content: "2014";
}
/*
################
8th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_14:before {
content: "2015";
}
/*
################
9th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_17:before {
content: "2016";
}
/*
################
10th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_18:before {
content: "2017";
}
/*
################
11th year
################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_19:before {
content: "2018";
}
4. Adım: Negatif Bölümler (Nokta Gezinmesinde Gizle)
Nokta Gezinmenize dahil etmek istemediğiniz bölümlerin aşağıdaki CSS kod satırları kullanılarak gizlenmesi gerekir:
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_2,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_9,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_10,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_12,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_13,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_15,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_16,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_20,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_21,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_22 {
display: none !important;
}
Adım 5: Sayfaya Özel CSS Kodu Ekleyin
Kodu anladıktan ve ihtiyaçlarınıza göre değiştirdikten sonra, aşağıdaki düğmeyi tıklayarak çalıştığınız sayfaya ekleyebilirsiniz:
Gelişmiş sekmesine gidin ve CSS kodunuzu Özel CSS kutusuna yerleştirin.
Ve bu kadar!
%20 İNDİRİM Kazanmak için Son Şans!
Umarız bu eğitimden keyif almışsınızdır. 10. yıl dönümümüzün %20'lik sınırlı indirimine mutlaka göz atın! Bu indirim, yeni üyeler, yükseltmek veya yenilemek isteyen mevcut kullanıcılar ve süresi dolan kullanıcılar için geçerlidir! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!