Divi's Doctor's Office Layout Pack için Araç İpuçları ile AZ İçerik Dizini Nasıl Oluşturulur

Bir AZ dizini oluşturmak, kullanıcıların çok fazla okuma ve/veya kaydırma yapmadan aradıklarını hızlı bir şekilde bulmasını kolaylaştırır. Bu tür indeksleme, tıp alanında yaygındır çünkü hastaların belirli hastalıkları veya tıbbi durumları bulmasını ve okumasını kolaylaştırır.

Bu kullanım örneği öğreticisi için size Divi's Doctor's Office Layout Pack için bir AZ tıbbi durum endeksinin nasıl oluşturulacağını göstereceğim. Doktor Ofisi Düzeni ile dizini eşleştirmek için bazı özel tasarımlarla AZ dizinini oluşturmak için Divi'nin sekmeler modülünü kullanacağım. Ve sitenize araç ipuçları eklemek istiyorsanız, Simply Tooltips eklentisini kullanarak son derece kolay bir çözüm sunacağım.

Bunu yapalım!

Gizlice Bakış

Şimdi ne yaratacağımıza bir göz atalım.

İşte işlevselliğe bir bakış.

Neye ihtiyacın var

İşte bu eğitim için ihtiyacınız olan şey:

• Divi Teması (yüklü ve aktif)
• Doktor Ofisi Düzen Paketi (Divi Builder'dan erişilebilir)
• Basit Araç İpuçları (yüklü ve etkin)

Tasarım Stratejisi

AZ endeksini tasarlama stratejisi Divi'nin sekmeler modülünü kullanmaktır. Temel olarak, yapmanız gereken tek şey alfabenin her harfi için bir sekme oluşturmak ve ardından koşullar listenizi karşılık gelen her sekme/harf altında alfabetik olarak düzenlemek. “A” ile başlayan tüm koşullar “A” sekmesi altında olacak vb. Bu, listelerinizin uzunluğunu kısaltmak için iyi çalışır ve kaydırma ihtiyacını en aza indirir. Kullanıcı sadece bir harfi tıklar ve ardından yalnızca o harfle başlayan koşullar arasında gezinir.

Bu kullanım durumu için düşündüğüm bir AZ dizini eklemenin iki yolu daha var. İlk fikir, sayfanın bölümlerine kaydırılan bağlantı bağlantılarından oluşan bir alfabe oluşturmaktı. İkinci fikir, kullanıcıyı ilgili harfle başlayan koşulların ayrı bir sayfasına (veya gönderisine) yönlendiren her menü öğesi için bir harf içeren özel bir menü oluşturmaktı. Bunların ikisi de uygun seçenekler ancak bunun sekmeler modülünü kullanmak kadar uygun (veya basit) olmadığını düşündüm.

AZ Dizin Sayfası Oluşturma

Doktor Ofisi Düzen Paketi, AZ dizin sayfamızın tasarımında bize hızlı bir başlangıç ​​sağlayacaktır. Elbette, isterseniz dizini her zaman mevcut bir sayfaya da dahil edebilirsiniz.

Yeni bir sayfa oluşturarak başlayın ( Sayfalar > Yeni Ekle ), bir sayfa başlığı girin ve görsel oluşturucuyu dağıtın. Sayfanın altındaki ayarlar menüsünü açın ve kitaplıktan ekle simgesini tıklayın. Ardından Doktor Ofisi Düzen paketini seçin ve SSS sayfası şablonunu seçin.

Düzen sayfaya yüklendiğinde, randevu talep formu ile “Sağlığınız Burada Başlar” başlıklı bölüm hariç, sayfa düzeni üzerindeki tüm bölümleri silin.

Satırınızın düzenini üçte iki üçte bir sütun yapısıyla değiştirin. Ardından sol sütundaki mevcut modülleri sağ sütuna taşıyın.

Ana başlık bölümünde yer alan “Sağlığınıza Bağlıyız” başlıklı metin modülünü kopyalayın ve ikinci bölümün sol sütununa yapıştırın.

Metni “Arama Koşulları” olarak değiştirin ve ardından metin rengini Açık olarak değiştirin.

Sol sütundaki o metin modülünün altına yeni bir metin modülü ekleyin ve “AZ İndeksi” metnini girin ve modülü kaydedin.

Şimdi sağ sütundaki ikinci metin modülünün modül stillerini kopyalayın (sağ tıklamayı kullanın) ve modül stillerini “AZ İndeksi” metin modülüne yapıştırın.

Ardından “AZ Dizini” metin modülü tasarım ayarlarını aşağıdaki gibi güncelleyin:

Metin Metin Boyutu: 32px
Metin Yönü: Sol

Ayarları kaydet

Artık tabs modülü ile indeximizi oluşturmaya hazırız. Devam edin ve AZ Dizin metin modülünün altına bir sekme modülü ekleyin. Modüle yeni sekmeler eklemeye başlamadan önce sekme ayarlarını aşağıdaki gibi güncelleyin:

Etkin Sekme Arka Plan Rengi: #2f8cff
Etkin Olmayan Sekme Arka Plan Rengi: rgba(0,0,0,0.33)
Sekme Metin rengi: #ffffff

Gövde Yazı Tipi: Montserrat

Kenar Genişliği: 0px

Ek bir özel tasarım dokunuşu için, sekmelerimizi biçimlendirmek üzere bazı özel CSS ekleyebiliriz. Gelişmiş sekmesinin altında, Sekme Kontrolleri giriş kutusuna aşağıdaki CSS'yi ekleyin:

background: none;

Bu, sekmelerin arkasındaki gri arka planı çıkarır.

Ardından, Sekme giriş kutusuna aşağıdaki CSS'yi ekleyin:

border: 2px solid #fff !important;
border-radius: 15px;
margin: 0 .5em .5em 0;
float: left;

Bu, sekmeleri özel bir kenarlığa ve aralığa sahip olacak şekilde biçimlendirir. Float:left eklemek, sekmelerin mobil cihazlarda bile sola hizalı kalmasını sağlar.

Artık sekmelerimizi ve sekme içeriğimizi eklemeye hazırız. İçerik sekmesi altında, ikinci sekmeyi silin ve kalan sekmenin ayarlarını düzenlemek için tıklayın.

Sekmeye “A” başlığını verin ve içerik kutusunu “A” harfiyle başlayan bir koşullar listesiyle güncelleyin.

İşte eklediğim sahte içerik:

[simple_tooltip content='This is the content for the tooltip bubble <a href="#">read more...</a>']<a href="#">Abdominal Pain</a> [/simple_tooltip]- Cras ultricies ligula sed magna dictum porta. Nulla accumsan tincidunt. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

[simple_tooltip content='This is the content for the tooltip bubble <a href="#">read more...</a>']<a href="#">Abdominal Pain</a> [/simple_tooltip] - Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

<a href="#">Abdominal Pain</a> - Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

<a href="#">Abdominal Pain</a> - Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

<a href="#">Abdominal Pain</a> - Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Orada bağlantılar eklediğimi fark edebilirsiniz. Bu, kullanıcıları belirli bir durumu açıklayan bir sayfaya yönlendirmek için harika bir yer olabilir. Listedeki ilk bağlantının etrafına bir araç ipucu ekleyen bir kısa kod da ekledim. Bu kısa kodu daha sonra inceleyeceğim, ancak şimdilik sekmeleri ayarlamaya devam edelim.

Bu sekme için ayarlarınızı kaydedin ve ardından sekmeyi 25 kez çoğaltın (unutmuş olmanız durumunda alfabede 26 harf vardır). Aslında, ciddi bir eğlence için çoğalt düğmesini tıkladığınızda alfabe şarkısını söyleyebilirsiniz. İşiniz bittiğinde, ayarlarınızı kaydedin.

Artık sekmelerinizdeki harfleri değiştirmek için satır içi düzenleyiciyi kullanabilirsiniz. Bu, sizi her seferinde sekme ayarlarına tıklamaktan kurtarır.

Sekme harfine karşılık gelen koşulları dahil etmek için her sekmenin altındaki içeriği güncellemeniz gerekecek, ancak dizin artık kullanıma hazır.

Araç İpucu Kısa Kodunu Kullanma

Daha önce de bahsettiğim gibi sekme içeriğindeki ilk linke örnek bir kısa kod ekledim. Bu kısa kod, Simple Tooltips eklentisi kurulu ve etkinse çalışır.

İşte kısa kodun temel yapısı:

[simple_tooltip content='This is the content for the tooltip bubble']This triggers the tooltip[/simple_tooltip]

"Bu, araç ipucu balonunun içeriğidir" ifadesini araç ipucu balonunda göstermek istediğiniz içerikle değiştirin ve "Bu, araç ipucunu tetikler" ifadesini, üzerine gelindiğinde araç ipucu balonunu tetikleyecek içerikle değiştirin.

Araç ipucu kısa kodunu, eklentinin araç ipucu kısa kod oluşturucusunu kullanarak da dağıtabilirsiniz. Bunu kullanmak için arka uç oluşturucuyu (görsel oluşturucuyu değil) kullanmanız gerekir. Arka uç oluşturucuda sekmeler modülü sekme ayarlarını düzenleyin ve wysiwyg düzenleyicide bir araç ipucu düğmesi göreceksiniz.

Ayrıca araç ipucu balonuna bağlantılar da ekleyebilirsiniz. Bu, kullanıcıları daha fazla bilgi için farklı bir sayfaya yönlendirmek için harika olacaktır. Bunun nasıl görünebileceğini görebilmeniz için, sekme içeriğinin altındaki ilk öğeye bir daha fazla oku bağlantısı ekledim. Bu eklentinin nasıl kullanılacağı hakkında daha fazla fikir için blog gönderilerine göz atın.

Eklenti ayrıca araç ipucunuzun rengini, boyutunu, konumunu ve opaklığını değiştirmek için bazı yapılandırılabilir seçeneklere sahiptir. Bu ayarlar sayfasına, Ayarlar > Basit Araç İpuçları'na giderek erişebilirsiniz.

Sayfaya Son Dokunuşları Yapmak

Başlık bölümünü isterseniz tutabilirsiniz ama bu örnek için sayfamda sadece AZ İndeksi bölümü olsun diye sileceğim.

Ardından, arka plan görüntüsünü kaldırmak ve 50 piksellik bir üst dolgu eklemek için bölüm ayarlarını güncelleyin.

Sağ sütundaki metin modülleri için metin hizalamasını sola değiştirin.

Ardından, tüm alanları tam genişlikte yaparak iletişim formu modülünüzün alan ayarlarını güncelleyin.

Ardından iletişim formu düğmesinin arka plan rengini ve satır rengini #2f8cff olarak güncelleyin.

Bu kadar!

Nihai sonucu kontrol edin.

Sekmelerin nasıl çalıştığına ve araç ipucu işlevine dikkat edin.

Endeksin mobil cihazlarda nasıl görüneceği aşağıda açıklanmıştır.

Son düşünceler

AZ Endeksi, herhangi bir doktorun ofisi web sitesine mükemmel bir ek gibi görünüyor. Ve eminim ki bu tür indeksleme için başka birçok kullanım vardır. Divi'nin sekmeler modülü, kullanıcının sayfadan ayrılmadan veya durmadan kaydırma yapmadan içerik listelerine göz atmasına izin vererek iyi bir iş çıkarır. Araç ipuçları, içeriğin yoğun olduğu sayfalar için de son derece kullanışlıdır. Genel olarak, tüm süreç oldukça kolaydır ve birkaç tasarım ayarıyla siteniz için güzel bir dizin sayfasına sahip olabilirsiniz.

Her zaman olduğu gibi, yorumlarda sizden haber bekliyorum.

Şerefe!