Divi eklentisi spot ışığı – dotnav
Divi, ekranın sağ tarafına bir dizi nokta yerleştiren Dot Navigation adlı varsayılan bir gezinme özelliğine sahiptir. Her nokta sayfanın kısmını temsil eder. Puanları tıklamak o bölüme getirilecektir. Puanlar basittir ve çoğu web sitesi tasarımıyla entegre edilmiştir. Ya ayarlamak istiyorsanız? Daha iyisi, ya etiketleri görüntülemek veya yüklendiğinde canlandırmak istiyorsanız ne olur? Dotnav adlı bir eklenti ile ilgilenebilirsiniz. Dotnav, divicio.us’un üçüncü taraflı bir eklentisidir. Dotnav, noktaların ve arka planların rengini, boyutunu ve şeklini değiştirmek, etiket eklemek, belirli noktaları devre dışı bırakmak ve yükleme animasyonlarını kontrol etmek için bir araç sağlar. Dotnav’ı cihaza göre gizleyebilirsiniz. Bu eklentinin spot ışığında Dotnav’ı göreceğiz.
Bu örnekte, ürün özelliği adı verilen divi ile birlikte bulunan düzeni kullanıyorum. Görüntü unssplash.com’dan alınmıştır. İlk olarak, divi noktasının navigasyonunu etkinleştirelim. Nokta navigasyonunu etkinleştir
Dotnav’ı kurun İlk olarak, indir dosyasını açın. Klasörde üç dosya olacak. Divi-Dotnav dosyasını yükleyin ve etkinleştirin. Dotnav tema ayar ayarları Dotnav ayarları tema ayarında bulunur. Buna üç alan içerir:
Genel Ayarlar
Nokta ayarları
Etiket Ayarları
Her bölgeye bakalım. Genel Dotnav Ayarları Genel düzenleme, Dotnav’ı cihaza göre gizlemenize, ofseti ayarlama, sınırları, dolgu, renk ve animasyonu gizlemenizi sağlar. Seçtiğiniz yönden hareket, yönden kaybolma veya X veya Y ekseninde tersine dahil olmak üzere 11 animasyon vardır. Örnek
Kontrolü ayarladığınızda, gerçek zamanlı değişiklikler görürsünüz. Bu örnekte 38. sağ ofseti ayarladım ve yuvarlak bir kenar yapmak için sınır, yarıçap ve dolgunun genişliğini ayarladım. Bu örnekte, sınırın genişliğini 10 ve sınır yarıçapını her tarafta 30’a ayarladım ve üst dolgu 20, sağ 10, alt 20 ve 9’a kadar. Arka plan ve sınır renklerini kullandım . kaynaşacak şekilde sayfanın kendisinden. Dotnav Point Ayarları Nokta ayarları, tek tek parçaları görüntülemenize veya gizlemenize olanak tanır (bölüme eklenen CSS gerektirir), kenar boşluğunu ayarlayın, sınır yarıçapını, genişliği ve rengi. Nokta ayarları arasında renk, genişlik ve yükseklik ve renk, genişlik ve yükseklik imleci noktasını içerir. Örnek
Bu örnekte nokta sınırının yarıçapını etrafında 10’a ayarladım ve noktanın genişliğini 30’a ayarladım. Bu, yuvarlak noktalar yerine çizilen yatay bir çizgi oluşturur. Noktanın sınırını ve yüksekliğini ayarlamak bazı ilginç etkiler yaratabilir. Burada noktanın genişliğini üst için 4 ve sağ için 10’a ayarladım. Burada sol üst sınır yarıçapını 0’a, sağ üste 98’e ayarladım ve diğerlerini 10’da bıraktım. Nokta. Sınır genişliği 1, genişlik ve yükseklik noktası 15 ve aktif noktaların genişliği ve yüksekliği 20. Kırmızı sınırlarla koyu gri noktalar. Aktif nokta kırmızı sınırlı beyazdır. Bu aynı nokta ayarıdır ve yuvarlak bir kenar yapmak için üst ve alt sınırların, yarıçap ve pedlerin genişliğini ekler. Dotnav Etiket Ayarları Etiket ayarı, nokta etiketini görüntülemenize veya gizlemenize, yazı tiplerini, arka planı, genişliği, sabit genişliği uygulamanızı, vb. Uygulamanızı sağlar. Genişlik hala olağan etiketin genişliğine, etkin etiketin genişliğine ve etiket metnini düzleştirmeye ayarlamalar ekler. Etiketleri görüntülemek için, bölümün bir kimliği (etiket olarak kullanılan) olması gerekir. Etiketi her bölüm için Gelişmiş sekmesindeki CSS kimliğine ekleyin. Etiket otomatik olarak görüntülenir. Etiketler ayarlanabilir ve belirli etiketleri görüntülememeyi seçebilirsiniz. Bu örnek varsayılan ayarları gösterir. Bu durumda yazı tipinin arka planını ve rengini değiştirdim ve yazı tipi için aktif bölümün ve somon renginin ofsetini yaptım. Yatay çizginin mesafesini ayarlayabilirsiniz, ancak dikey için nokta kenarını nokta kenarını ayarlamanız gerekir. Benim için bu ayarlamalar hakkında kafa karıştırıcı. Tüm etiketlerin görüntülenmesini istemiyorsanız, yalnızca etkin, sadece doğrudan veya etkin ve doğrudan olarak ayarlayabilirsiniz.
Etiketler arasında yer açmak için nokta ayarını ayarladım. Bu, üst üste binmeden daha yüksek bir etiket yapmama izin verecek. Bu durumda, nokta marjı üst ve alt için 16 olarak ayarlanır. Sağ üst ve alt sınırlar 72’ye ayarlanmıştır ve sol üst ve alt sağ 22’ye ayarlanmıştır. Etiket ayarlarında, her taraftaki 10. dolguyu ayarladım, aktif havuzun sağ ofsetini 45’e ayarladım ve artar. Yazı tipi boyutu 18. Etiket 18’dir. Biraz daha belirgindir. Belli bir noktayı gizle
İsterseniz belirli noktaları gizleyebilirsiniz. CSS sınıfını parçanın Gelişmiş Ayarlar sekmesine ekleyin. Tema ayarındaki nokta ayarlarında CSS bulacaksınız. DOT ayarlarında, ilk ayar açılır kutudur. Bu varsayılan olarak görüntülenecek şekilde düzenlenmiştir. Gizle’yi seçin. CSS sınıfı gizlemesini eklediğiniz tüm parçaları gizler (CSS sınıfı açılır kutunun üzerindeki notlarda bulunur). Tüm doğru şeylerin etiketli kısmı artık nokta navigasyon yapısında değil. Bu örnek yalnızca imleci yönlendirilirken görüntülenir. Yazı tipleri ve aktif noktalar/imlec için nokta kırmızıya göre düzenlenmiştir. Şeffaf arka plan ve sınır. Nokta kenar boşlukları üst ve alt için 16 olarak ayarlanır. Genişlik 15 ve yükseklik 5, 20 ve 8 aktif nokta. Bu, etiket için sabit bir genişlik kullanır. Aktif etiketin arka planı için siyah bir yazı tipi ve sol ve sağ için kırmızı sınır (5 düzenlenmiş) kullanıyorum. Sınır yarıçapı küçük bir eğri vermek için 9’a ayarlanır. Metni etikete odakladım. Etiketi hatta asılı hale getirmek için sağ ofset 6’dır. Aktif sağ ofset, hattan atlamak için 20’dir. Ayrıca bölümün adını kısalttım ve tüm doğru şeyler adı verilen parçanın etiketini sakladım. Yazı tipleri eğimlidir. Nokta ayarları için 6 ve yükseklik genişliğini 38’e ayarladım. Aktif nokta 10 ve 35’tir. Bu, noktaların dikey çizgiler gibi görünmesini sağlar. Bu örneği animasyonu görüntülemek için kullanacağım. Dotnav animasyon Animasyon, sayfa yüklendiğinde noktanın nasıl göründüğünü gösterir. Buna 11 animasyon dahildir. Animasyon süresi bir kaydırma kullanılarak ayarlanabilir. Aşağıdakiler bazılarını görmek. Kesinlikle doğru Tam olarak görmek zor ama görüldüğü gibi sağdan hareket ediyor. Aşağıda Altta görünür ve slaytlar. SolmakFade in Fade zaten onun yerinde. Solda soluk Solda solmaya sol ve sonra soldan sağa doğru hareket eder. Yukarıda kaybolur En üstte solmaya sol ve sonra büyük bir hareket yaptı. X’i çevir X ekseninden ters çevirir ve yerine girerken sıçrayın. Y çevirin
