Divi Doktor Ofis Düzeni Paketi için Araç İpuçları ile AZ İçerik Dizin Nasıl Yapılır
AZ endeksini yapmak, kullanıcıların aradıklarını çok fazla okumadan ve/veya yuvarlamadan hızlı bir şekilde bulmasını kolaylaştırır. Bu tür endeksler tıp alanında yaygındır, çünkü hastaların belirli tıbbi hastalıklar veya tıbbi durumlar hakkında bulmasını ve okumasını kolaylaştırır. Bu kullanım vaka öğreticisi için, Divi Doktor Ofis Düzeni Paketi için nasıl tıbbi bir durum endeksi yapacağınızı göstereceğim. Divi sekmesi modülünü, AZ endeksini, dizinle doktor ofisinin düzeni ile eşleştirmek için birkaç özel tasarımla oluşturmak için kullanacağım. Ve sitenize araç ipuçları eklemek istiyorsanız, Simply Tooltips eklentisini kullanmak için çok kolay bir çözüm sunacağım.
Haydi Yapalım şunu! Sneak Peek, ne yapacağımıza bir göz atalım.
Divi teması (yüklü ve aktif)
Doktor Ofis Düzeni Paketi (Divi Builder’dan erişilebilir)
Basit araç ipuçları (yüklü ve etkin)
Tasarım Stratejisi AZ dizinini tasarlama stratejisi Divi sekmesi modülünü kullanmaktır. Temel olarak, tek yapmanız gereken alfabenin her harfi için bir sekme oluşturmak ve daha sonra her bir sekme/harf altındaki alfabeye göre koşullar listenizi ayarlamaktır. “A” ile başlayan tüm koşullar “A” sekmesi vb. Bu, listenizin uzunluğunu kısaltmak ve rolle olma ihtiyacını en aza indirmek için iyi çalışır. Bir kullanıcı sadece bir mektubu tıklar ve ardından yalnızca bu harfle başlayan bir koşulu kaydırır.
Bu kullanım durumu için düşündüğüm AZ endeksi eklemenin iki yolu daha var. İlk fikir, sayfaya kayan bir çapa bağlantısı alfabesi yapmaktır. İkinci fikir, kullanıcıyı uygun harflerle başlayan koşullardan ayrı olarak sayfaya (veya yayına) yönlendiren her menü öğesi için harf içeren özel bir menü oluşturmaktır. Her ikisi de iyi seçeneklerdir, ancak bunun sekmeler modülünü kullanmak gibi rahat (veya basit) olmadığını düşünüyorum. AZ Dizin Sayfa Paketini Oluşturma Doktor Ofisi bize AZ Dizin sayfamızın tasarımına ilk sıçrama verecektir. Tabii ki, isterseniz her zaman mevcut sayfaya dizin girebilirsiniz. Yeni bir sayfa oluşturarak (sayfa> yeni ekle), sayfa başlığını girip bir görsel üreticiyi uygulayarak başlayabilirsiniz. Sayfanın altındaki Ayarlar menüsünü açın ve kitaplıktan simge ekle’yi tıklayın. Ardından Doktor Ofis Düzeni paketini seçin ve SSS sayfası şablonunu seçin.
Düzen sayfaya yüklendikten sonra, bir toplantı için bir istek formu ile “Sağlığınız burada başlar” başlıklı bölüm hariç, düzenin tüm bölümlerini silin. Satır düzeninizi üçte bir sütunun bir yapısına dönüştürün. Ardından sol sütundaki modülü sağ sütuna taşıyın. Ana başlık bölümündeki metin modülünü “Sağlığınıza bağlıyız” başlığıyla kopyalayın ve ikinci sol sütunda yapıştırın. “Arama koşulları” okumak için metni değiştirin ve ardından metnin rengini ışığa değiştirin. Sol sütundaki metin modülünün altına yeni bir metin modülü ekleyin ve “AZ Dizin” metnini girin ve modülü kaydedin. Şimdi modül kuvvetini (sağ tıklayın) sağ sütundaki ikinci metin modülünden kopyalayın ve kuvvet modülünü “AZ Dizin” metin modülüne yapıştırın. Ardından “AZ Dizin” metin modülünün tasarım ayarlarını şu şekilde güncelleyin: metin Boyut Metin: 32px Metin Oryantasyonu: Sol Ayarları Kaydet Şimdi Dizinimizi sekmeler modülüyle oluşturmaya hazırız. Devam edin ve sekme modülünü AZ Dizin metin modülünün altına ekleyin. Modüle yeni bir sekme eklemeye başlamadan önce, sekme ayarlarını aşağıdaki gibi güncelleyin: Etkin sekme arka plan rengi: #2F8CFF Arka Plan Rengi Etkileşimli Sekme: RGBA (0.0,0,0,0.33) Renk Metin Sekmesi: #FFFFF gövde yazı tipi: Montserrat Border Geniş: 0px Özel bir tasarıma ek dokunuş için, sekmelerimizi düzenlemek için bazı özel CSS ekleyebiliriz. Devam sekmesinin altında, kontrol giriş kutusuna aşağıdaki CSS ekleyin: Arka Plan: Yok;
Bu, sekmenin arkasındaki gri arka planı kaldırır. Ardından Giriş sekmesi kutusuna aşağıdaki CSS ekleyin: Sınır: 2px katı #fff! Önemli; Border-Radius: 15px;
Marj: 0 .5em .5em 0;
Şamandıra: sol;
Bu, sekmeyi özel bir sınır ve alana sahip olmak için düzenler. Şamandıra Ekle: Sol, sekmenin düz ve hatta mobil cihazda kalmasını sağlayacaktır.
Şimdi sekmelerimizi ve sekme içeriğimizi eklemeye hazırız. İçerik sekmesi altında, ikinci sekmeyi silin ve kalan sekmelerin ayarlarını düzenlemek için tıklayın. Başlık sekmesini “A” verin ve içerik kutusunu “A” harfinden başlayarak koşulların bir listesiyle güncelleyin. İşte eklediğim yapay içerik: [Simple_tooltip content = ‘Bu araç ipucu kabarcığı için içerik Devamını oku … ‘] karın Ağrı [/basit_tooltip]- CRAS Ultrisyaları Ligula Sed Magna Porta. Nulla Accumsan Tincidunt. Donec Rutrum Congue Leo Eget Malesada. Praecent Sapien Massa, Convallis A Pellentesque NEC, Egestas NISI. ” #”> Karın ağrısı [/basit_tooltip] – CRAS Ultrisleri Ligula Sed Magna Dictum Porta. Nulla Porttitor Accumsan Tincidunt. Donec Rutrum Congue Leo Eget Malesada. Praecent Sapien Massa, Convallis A Pellentesque Nec, Nisi olmayan egestas.
karın ağrısı – Cras Ultricies ligula sed magna porta. Nulla Porttitor Accumsan Tincidunt. Donec Rutrum Congue Leo Eget Malesada. Praecent Sapien Massa, Convallis A Pellentesque Nec, Nisi olmayan egestas. karın ağrısı – Cras Ultricies ligula sed magna porta. Nulla Porttitor Accumsan Tincidunt. Donec Rutrum Congue Leo Eget Malesada. Praecent Sapien Massa, Convallis A Pellentesque Nec, Nisi olmayan egestas.
karın ağrısı – Cras Ultricies ligula sed magna porta. Nulla Porttitor Accumsan Tincidunt. Donec Rutrum Congue Leo Eget Malesada. Praecent Sapien Massa, Convallis A Pellentesque Nec, Egesta NiSi olmayan. Oraya bir bağlantı eklediğimi fark edebilirsiniz. Bu, kullanıcıyı belirli koşulları açıklayan bir sayfaya yönlendirmek için iyi bir yer olabilir. Ayrıca listedeki ilk bağlantının etrafına araç ipucu ekleyen kısa bir kod ekledim. Bu kısa kodu daha sonra tartışacağım, ancak şimdilik bir sekme hazırlamaya devam edelim.
Sekme için ayarlarınızı kaydedin ve ardından sekmeyi 25 kez ikiye katlayın (unutursanız alfabede 26 harf vardır). Aslında, ciddi zevk için kopya düğmesine tıkladığınızda alfabe şarkısını söyleyebilirsiniz. Bittiğinde ayarlarınızı kaydedin.
Şimdi sekmenizdeki harfleri değiştirmek için bir satır düzenleyicisi kullanabilirsiniz. Bu, sizi her seferinde sekme ayarlarına tıklama gerekliliğinden kurtarır.
Sekme harfiyle eşleşen koşulları içerecek şekilde her bir sekmenin altındaki içeriği güncellemeniz gerekir, ancak dizin artık kullanıma hazırdır. Daha önce de belirttiğim gibi araç ipucu kısa kodu kullanarak, sekme içeriğindeki ilk bağlantıya kısa bir kod örneği ekledim. Basit Araç İpuçları eklentisini yükler ve etkinleştirirseniz bu kısa kod çalışır.
Kısa kodun temel yapısı aşağıdadır: [Simple_Tooltip Content = ‘Bu araç ipucu kabarcığı için içeriktir’] Bu araç ipliğini tetikler [/basit_tooltip]
“Bu, araç ipucu kabarcığı için içerik”, araç ipucu kabarcığında görüntülemek istediğiniz içerikle değiştirin ve “Bu, araç ipucunu tetikler”, imleci yönlendirirken araç ipucu kabarcıklarını tetikleyeceği içerikle değiştirin. Araç İpucu Kısa Kodunu Araç İpucu Eklentisi Kısa Kodu Jeneratörünü kullanarak da uygulayabilirsiniz. Bunu kullanmak için bir arka uç üreticisi (görsel yapımcı değil) kullanmalısınız. Arka uç üreticisinde, sekme modülünün sekme ayarlarını düzenleyin ve WYSIWYG.andi düzenleyicisinde Araç İpucu düğmesini göreceksiniz. Araç balonuna bir bağlantı da ekleyebilirsiniz. Bu, daha fazla bilgi için kullanıcıları diğer sayfalara yönlendirmek için iyi olacaktır. Görünüşü görebilmeniz için sekme içeriğinin altındaki ilk öğeye bir okuma bağlantısı ekledim. Bu eklentinin nasıl kullanılacağı hakkında daha fazla fikir için blog yayınlarına bakın.
Bu eklenti ayrıca araç ipucunuzun rengini, boyutunu, konumunu ve opaklığını değiştirecek şekilde yapılandırılabilen birkaç seçeneğe sahiptir. Ayarlar> Basit Araç İpuçları’na giderek bu Ayarlar sayfasına erişebilirsiniz. Son dokunuşu sayfanıza yerleştirmek isterseniz üstbilgiyi depolayabilir, ancak bu örnek için, sayfam için yalnızca AZ dizin bölümüne sahip olabilmem için sileceğim.Ardından, arka plan görüntüsünü silmek ve 50 piksel üst dolguyu eklemek için bölümün ayarlarını güncelleyin.
Sağ sütundaki metin modülü için soldaki metin seviyesini değiştirin. Ardından, tüm alanları geniş hale getirerek iletişim formu modülünüz için alan ayarlarını güncelleyin. Ardından, iletişim formunun ve renk düğmesinin arka plan rengini #2F8CFF olarak güncelleyin. İşte burada! Sonuç’a bakın. Sekmenin nasıl çalıştığına ve araç ipucunun işlevselliğine dikkat edin. Hücresel bir dizin gibi görünecek olan budur. AZ endeksinin son zihni, herhangi bir doktor ofis web sitesine mükemmel bir ek gibi görünüyor.Ve eminim bu tür endeksleme için başka birçok kullanım vardır.Divi sekmesi modülü, kullanıcıların sayfadan ayrılmadan veya durmadan kaydırma yapmadan içerik listesini izlemelerine izin vermek için iyi bir iş çıkarır.Araç ipuçları da ağır içerik sayfaları için çok kullanışlıdır.Genel olarak, tüm işlem oldukça kolaydır ve bazı tasarım ayarlamalarıyla, siteniz için güzel bir dizin sayfanız olabilir.Her zamanki gibi, yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
