10 yıllık boş zamanın düzenine etiketlenen gezinme noktaları nasıl eklenir
Yeni zaman çizelgesi düzeni ücretsiz olarak indirilebilir, ancak bugün sona eren zarif temanın 10. yıldönümü satışları sırasında. Bu, şirketinizin zaman çizgisini veya ziyaretçilerinizle paylaşmak istediğiniz diğer tür zaman çizgilerini göstermenize yardımcı olacak düzgün bir tasarımdır. Ücretsiz düzenin üstünde, ziyaretçilerinizin navigasyon noktalarını kullanarak bu sayfada gezinmesine yardımcı olacak ilginç bir öğretici paylaşacağız. Point Navigation, sayfanızda olması için iyi bir ektir. Özellikle yeterince uzun bir sayfanız varsa, ziyaretçilerin kolayca gezinmesini istersiniz. Ve bu öğreticide, daha ileri gitmenize yardımcı olacağız. Yalnızca sağ tarafta noktalar olması yerine, etiketin temsil ettikleri parçaya uyacak tüm ilgili kısımlarını verebilirsiniz. Bu şekilde, ziyaretçiler bu sayfada olduklarında belirli bir yıla gidebilirler.
Sneak Peek Eğiticiye girmeden önce, yapacağımız doğru tasarıma bakalım.
Navigasyon noktanızdaki her nokta parçayı temsil eder
Her yıl doğru noktaya bağlı olduğumuzdan emin olmak için, her yıl yeni bir rolümüz olmasını sağlayacağız.
Navigation Dot, her bölüm için numaralar sağlayan bir liste kullanır
Listenin kendisi 1’den başlamıyor, ancak 0 bunun yerine, ilk bölümünüz listedeki ‘0’ sayısı, ikincisi ‘1’ sayısı.
Bu stratejiyi her türlü sayfa için yeniden kullanabilirsiniz, ancak CSS ekranını etiketin uzunluğuna ve gezdiğiniz öğe sayısına göre değiştirmeniz gerekir.
Bölüm 1: 10 yıllık seyahat sayfamızı açarak indirebileceğiniz zarif zaman düzeni zarif temamız Timeline 10 Yıldönümü Düzeni Ücretsiz Tema Tecesini indirin. Zarif bir tema üyesi olmadıysanız veya hesabınızı artırmak/güncellemek istiyorsanız, şimdi zamanı! Genellikle aldığınız indirim miktarının iki katı olan% 20 indirim sunuyoruz! 10 yaşındaki bir seyahat sayfasındayken, indir düğmesini tıklayarak bu güzel sayfayı oluşturmak için kullanılan boş zaman hattı düzenini de indirebilirsiniz. Bölüm 2: Zaman çizgisinin düzenini kullanarak yeni bir sayfa oluşturun 1. adım 1. : Zaman çizgisinin düzenini divi kitaplığınıza yükleyin Ücretsiz zaman çizelgesi düzenini indirdikten sonra, Divi kitaplığınıza yüklemeniz gerekir. Bunu yapmak için WordPress Sitenizi> Divi> Divi kitaplığınızı açın ve JSON dosyalarını ZIP klasörünüze yükleyin. Adım 2: Yeni bir sayfa ekleyin ve Divi kütüphanenize düzeni eklediğiniz geçerli nokta navigasyonunu etkinleştirin, yeni bir sayfa oluşturma zamanı. Başlığı ekledikten sonra, Divi sayfa ayarlarında DOT navigasyonunu etkinleştirdiğinizden emin olun. Adım 3: Görsel Yükleyicilere Dönüşüm Şimdi hemen görsel oluşturucuya geçebiliriz. Adım 4: Düzen Zaman Çizgisini Yükle Artı simgesini tıklayıp depolanan düzen sekmenizdeki düzeni seçerek zaman satırlarının düzenini yükleyin. Bölüm 3: Her yıla başlayın 1. Adımın yeni bir kısmı: Sayfanıza nerede gideceğinizi öğrenmek için yıl sayısını ekleyin, zaman çizelgesi öğelerimizin her birini bir yıl vereceğiz. Sadece 2008’den 2018’e kadar zarif bir tema yolculuğu kullanıyoruz. Lütfen ve bu sayıları kronolojik sırayla ekleyin. Yeni bir parça eklemeyi bitirdikten sonra, bu metin modülünü kullanmak istediğiniz herhangi bir metne değiştirebilirsiniz. Adım 2: Giriş hattını yapmamız gereken ilk ek bölümün yeni bölümüne yerleştirin. Bu şekilde, ilk zaman çizelgesi öğesinin kendi rolü olacaktır. Adım 3: 2011’i aynı bölümde bulunan 2010 ve 2011 zaman çizgisi öğelerinin yeni bölümünde yer al. 2011 için ayrı bir bölüm oluşturun ve satırı içine yerleştirin. Bölüm 4: CSS Kodunu Özel CSS Sayfasına Ekleyin Adım 1: CSS Kodu CSS kodunu sayfamıza eklemeden önce, diğer sayfalar için de yapmanıza yardımcı olacak bazı parçaları açıklayacağım. İhtiyacınız olan tüm CSS kodu aşağıdaki gibidir: /* ###################################
1. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:
İçerik: “2008”;
}
/*
###################################
2. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:
İçerik: “2009”;
}
/*
###################################
3. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:
İçerik: “2010”;
}
/*
###################################
4. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_6:
İçerik: “2011”;
}
/*
################# 5. Yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_7:
İçerik: “2012”;
}
/*
###################################
6. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_8:
İçerik: “2013”;
}
/*
###################################
7. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_11:
İçerik: “2014”;
}
/*
###################################
8. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_14:
İçerik: “2015”;
}
/*
###################################
9. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_17:
İçerik: “2016”;
}
/*
###################################
10. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_18:
İçerik: “2017”;
}
/*
###################################
11. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_19:
İçerik: “2018”;
}
/*
###################################
Alakasız mezhepleri gizle
###################################
*/
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 {ekran: yok! Önemli;
}
/*
###################################
Toplamda listenin stilini
###################################
*/
ul.et_pb_side_nav li.side_nav_item {
Marj -bottom: -19px;
Hat yüksekliği: 2.7;
Marj-Top: 5 piksel;
}
/*
###################################
Her öğenin stili
###################################
*/
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);
Kutu -Shadow: -4px 6px 39px -4px RGBA (128,123,128,1);
Dolgu Top: 10 piksel;
Dolgu Alt: 10 piksel;
Yazı tipi-ağırlık: kalın;
Yazı tipi ailesi: Poppins;
yazı tipi boyutu: 18px;
Renk: #F92C8B! Önemli;
Arka Plan rengi: #F92C8B;
Ekran: Satır içi! Önemli;
}
/*
###################################
Her öğenin stilini ayrı ayrı aktif
###################################
*/
ul.et_pb_side_nav li.side_nav_item A.Active {
Renk: #000000! Önemli;
Arka plan rengi: Siyah! Önemli;
}
/*
###################################
Etiket stili
###################################
*/
ul.et_pb_side_nav li.side_nav_item a: {
Dolgu: 10 piksel! Önemli;
Renk: Beyaz! Önemli;
}
/*
###################################
Tüm listenin stili
###################################
*/
ul.et_pb_side_nav {
Genişlik: 76px;
Arka plan: yok;
EN İYİ 40%;
} Adım 2: DOT Navigasyonuna hangi parçayı dahil etmek istediğinizi belirleyin Her bölümün nokta navigasyonu listesinde kendi öğeleri vardır. Bu düzen, zaman çizgisine bağlı olmayan parçaları ve dolayısıyla belirli bir yılı içerir. Bu nedenle, bunu noktanın navigasyonuna dahil etmeye gerek yoktur, bu yüzden bu öğeyi nokta navigasyonumuzda gizleyeceğiz. Önceki adımda size verilen kod bu özel düzen için işlev görür (bu yazının 2. bölümünden geçtikten sonra). Ancak, bu yöntemi farklı numarada kullanmak istiyorsanız, sayfada hangi parçaları görüntülemek istediğinizi belirlemeniz gerekir. Her sayfadaki ilk bölüm sıfırdan başlar. Bu, zaman çizelgesi düzeninin yapısıdır: Bölüm 0 → dahil değildir
Bölüm 1 → Dahil Değil
Bölüm 2 → Dahil Değil
Bölüm 3 → dahil
Bölüm 4 → dahil
Bölüm 5 → dahil
Bölüm 6 → dahil
Bölüm 7 → dahil
Bölüm 8 → dahil
Bölüm 9 → Dahil Değil
Bölüm 10 → Dahil Değil
Bölüm 11 → dahil
Bölüm 12 → Dahil Değil
Bölüm 13 → Dahil Değil
Bölüm 14 → dahil
Bölüm 15 → Dahil Değil
Bölüm 16 → Dahil Değil
Bölüm 17 → dahil
Bölüm 18 → dahil
Bölüm 19 → dahil
Bölüm 20 → Dahil Değil
Bölüm 21 → Dahil Değil
Bölüm 22 → Dahil Değil
Adım 3: Pozitif parça (nokta navigasyonuna dahil) Noktanın navigasyonuna dahil etmek istediğiniz parçaya karar verdikten sonra, aşağıdaki kodu kullanarak her bölümün etiketini belirlemeli ve içeriği ihtiyaçlarınıza göre değiştirmelisiniz:
/*
###################################
1. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:
İçerik: “2008”;}
/*
###################################
2. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:
İçerik: “2009”;
}
/*
###################################
3. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:
İçerik: “2010”;
}
/*
###################################
4. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_6:
İçerik: “2011”;
}
/*
###################################
5. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_7:
İçerik: “2012”;
}
/*
###################################
6. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_8:
İçerik: “2013”;
}
/*
###################################
7. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_11:
İçerik: “2014”;
}
/*
###################################
8. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_14:
İçerik: “2015”;
}
/*
###################################
9. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_17:
İçerik: “2016”;
}
/*
###################################
10. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_18:
İçerik: “2017”;
}
/*
###################################
11. yıl
###################################
*/
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_19:
İçerik: “2018”;
} Adım 4: Negatif Parçalar (Not Navigasyonunda Gizle) Dot navigasyonuna dahil etmek istemediğiniz kısım aşağıdaki CSS kod satırı kullanılarak gizlenmelidir:
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 {
Ekran: Yok! Önemli;
} Adım 5: Kodu anladıktan ve ihtiyaçlarınıza göre değiştirdikten sonra özel CSS kodunu sayfaya ekleyin, aşağıdaki düğmeyi tıklayarak üzerinde çalıştığınız sayfaya ekleyebilirsiniz:
Gelişmiş sekmesine gidin ve CSS kodunuzu özel CSS kutusuna yerleştirin.
Ve hepsi bu! %20 indirim almak için son şans! Umarız bu öğreticiden hoşlanırsınız. 10. doğum günümüzden% 20’lik sınırlı bir indirim kontrol ettiğinizden emin olun! Bu indirim, yeni üyeler, geliştirmek veya güncellemek isteyen eski kullanıcılar ve süresi dolmuş kullanıcılar için geçerlidir! Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
