Tıkla ve Ara, E-posta, SMS ve Yön Bağlantıları ile Divi Mobil İletişim Çubuğu Nasıl Oluşturulur

Dünya mobil cihazlarda yaşarken, web sitenizde mobil deneyimden yararlanan tıklanabilir iletişim bağlantıları sağlamak mantıklıdır. Tıkla ve ara bağlantısı gibi bu iletişim bağlantıları, cep telefonunuzda tek bir tıklamayla hızlı arama başlatabilir. Yol tarifi bağlantısı gibi diğerleri, Google Haritalar'da bir işletme adresine yol tarifi açabilir. Bunlar, kullanıcılar için gerçekten uygundur ve belirli işletmeler için bir zorunluluktur.

Bu eğitimde, Tıkla ve Ara, E-posta, SMS ve Yol Tarifi Bağlantıları ile bir Divi mobil iletişim çubuğunun nasıl oluşturulacağını göstereceğiz. Bunu yapmak için, çubuğu ve düğmeleri global bir altbilgide tasarlamak için Divi oluşturucuyu kullanacağız. Ardından, ihtiyacımız olan işlevselliği eve getirmek için her iletişim bağlantısına özel URL'ler ekleyeceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Sabit İletişim Çubuğu Şablonu İndirme Divi Sitenize Nasıl Eklenir

UYARI!: Bu şablonu eklemek, Divi sitenizdeki varsayılan web sitesi şablonunu (varsa) geçersiz kılar. Canlı bir sitede hiçbir şeyi karıştırmamak için bunu bir test sitesine eklemenizi öneririz.

Sabit alt bilgi çubuğu şablonunu kendi web sitenize aktarmak için JSON dosyasına erişmek için indirilen zip dosyasını açın.

Ardından WordPress Dashboard'a gidin ve Divi > Theme Builder'a gidin.

Ardından sayfanın sağ üst köşesindeki taşınabilirlik simgesini tıklayın.

Taşınabilirlik açılır penceresinin içinde, az önce açtığınız JSON dosyasını seçin ve daha önce varsayılan web sitesi şablonunda geçersiz kılmak istemediğiniz bir şey olması durumunda, “İçe aktarmadan önce yedeği indir” seçeneğini seçin.

Ardından İçe Aktar düğmesini tıklayın.

Son olarak, Tema Oluşturucu değişikliklerini kaydedin ve sabit alt bilgi çubuğunu görmek için canlı bir sayfa görüntüleyin.

Şimdi öğreticiye geçelim, olur mu?

Bölüm 1: Genel Altbilgi Oluşturma

Bu eğitim için Divi Theme Builder'ı kullanarak global alt bilgiye bir mobil iletişim çubuğu ekleyeceğiz. Divi > Tema Oluşturucu'ya giderek başlayın. Ardından, varsayılan web sitesi şablonunun içindeki Genel Altbilgi Alanı'na tıklayın. Açılır menüden Genel Altbilgi Oluştur'u seçin.

NOT: Halihazırda bir genel altbilginiz varsa, genel altbilgiyi düzenleyebilir ve mevcut altbilgiye ek olarak iletişim çubuğunu ekleyebilirsiniz.

“Sıfırdan Oluştur” seçeneğini seçin.

Bölüm 2: Sabit İçerik Çubuğunu Oluşturma

Global Footer Layout Editor içinde, varsayılan bölüme tek sütunlu bir satır ekleyerek tasarım sürecine başlayın.

Bölüm Ayarları

Modülleri eklemeye başlamadan önce, bölüm ayarlarını açın, ona aşağıdaki gibi bir yükseklik ayarı verin:

• Yükseklik: 80 piksel

Bu, sayfanın alt kısmında, sabit satırın sonunda duracağı alanı oluşturmak için önemlidir. Ayrıca varsayılan üst ve alt dolguyu da çıkaracağız.

• Dolgu: 0 piksel üst, 0 piksel alt

Satır Ayarları

Artık bölümümüz hazır olduğuna göre, satırı sabit iletişim çubuğu olarak hizmet edecek şekilde özelleştirmeye hazırız. Satır için ayarları açın ve ardından aşağıdakileri güncelleyin:

Arka plan

• Arka Plan Rengi: #751136

Boy

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Yükseklik: miras

Satır sabitlenecek olsa da, sayfanın altındaki boşluğun satırı yeterince içermesi için satırın yüksekliğinin üst bölümün yüksekliğiyle eşleşmesini istiyoruz. Bunu yapmak için, yükseklik için “inherit” metnini yazmalıyız.

aralık

• Dolgu: 0 piksel üst, 0 piksel alt, %15 sol, %15 sağ

Özel CSS

Satır içindeki içeriğin dikey olarak hizalandığından ve sütunların mobilde kırılmadığından emin olmak istiyoruz. Bunu yapmak için satırın ana öğesine aşağıdaki özel CSS'yi ekleyin:

display:flex;
flex-wrap:nowrap;
align-items:center;

Sabit Konumlandırma

Satırı ekranın altında yüzecek şekilde sabit hale getirmek için, sol alt konumda aşağıdaki gibi sabit bir konum vermemiz gerekir:

• Pozisyon: Sabit
• Konum: sol alt
• Z İndeksi: 99999

Bölüm 3: Tıklamak İçin Çağrı, E-posta, SMS ve Yön Bağlantılarını Oluşturma

Artık iletişim çubuğumuz tamamlandığında, özel URL'lerle birlikte tıklanabilir iletişim düğmelerini eklemeye hazırız.

Tıkla ve Ara Düğmesini Tasarlama

Oluşturacağımız ilk iletişim düğmesi tıkla ve ara düğmesidir. Oluşturmak için sütuna yeni bir tanıtım yazısı modülü ekleyin.

İçerik

İçerik sekmesi altında, tanıtım yazısına aşağıdaki gibi bir Başlık ve Simge ekleyin:

• Başlık: Çağrı
• Simgeyi Kullan: EVET
• Simge: telefon

Arka plan

Beyaz bir arka plan rengi verin:

• Arka Plan Rengi: #ffffff

Tasarım Ayarları

Tasarım sekmesine geçin ve ayarları aşağıdaki gibi güncelleyin:

Simge

• Simge Rengi: #751136
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 2em

Başlık Yazı Tipi

• Tite Yazı Tipi Stili: TT
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #751136
• Başlık Metin Boyutu: 1em

Gövde Metni Boyutu

Fark ettiyseniz, tanıtım öğelerini “em” uzunluk birimini kullanarak boyutlandırdık. Bu, gövde metninin boyutuna göredir. Bu nedenle, tanıtım yazısının gövde metninin boyutunu ayarlamak (gövde metni gösterilmese de), em uzunluk birimiyle tüm tanıtım öğelerinin boyutunu ayarlayacaktır. Bu, her bir öğeyi ayrı ayrı ayarlamak zorunda kalmadan ileriye doğru düğmenin boyutunu değiştirmenin kolay bir yoludur.

Gövde metnini aşağıdaki gibi güncelleyin:

• Gövde Metin Boyutu: 12px

Boy

Tanıtım yazısına aşağıdaki gibi ayarlanmış bir yükseklik ve genişlik verin:

• Genişlik: 4.5em
• Modül Hizalaması: merkez
• Yükseklik: 4.5em

Dolgu ve Köşeler

• Dolgu: 0,5em üst

Kutu Gölge

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Gölge Rengi: rgba(255,255,255,0.55)

Özel CSS

Tanıtım modülünün içeriğini dikey olarak ortalamak için Ana Öğeye aşağıdaki Özel CSS'yi ekleyin:

display:flex;
align-items:center;

Aşağıdaki Blurb Image'ı ekleyerek tanıtıcı simgesinin altındaki boşluğu çıkarın:

margin-bottom: 0.3em;

Çağrı bağlantısı URL'sini ekleme

Bir cep telefonunda arama başlatacak bir arama bağlantısı URL'si eklemek için numarayı "tel:" ön ekinden sonra ekleyin.

• Modül Bağlantı URL'si: tel:555-555-5555

E-posta Düğmesini Tasarlama

E-posta düğmesini oluşturmak için tüm sütunu çoğaltın.

E-posta Simgesini ve bağlantı URL'sini ekleme

Ardından, 2. sütundaki yinelenen tanıtıcı metni yeni bir Başlık ve Simge ile güncelleyin.

Bir mobil uygulamada bir e-posta başlatacak bir arama bağlantısı URL'si eklemek için, e-posta adresini "mailto:" önekinden sonra ekleyin.

• Modül Bağlantı URL'si: mailto:[e-posta korumalı]

SMS(Metin Mesajı) Düğmesinin Tasarlanması

SMS düğmesini oluşturmak için 2. sütunu çoğaltın.

SMS Simgesini ve bağlantı URL'sini ekleme

Ardından, 2. sütundaki yinelenen tanıtıcı metni yeni bir Başlık ve Simge ile güncelleyin.

Bir mobil uygulamada bir e-posta başlatacak bir arama bağlantısı URL'si eklemek için e-posta adresini "sms:" önekinden sonra ekleyin.

• Modül Bağlantı URL'si: sms:+15555555555

Yol Tarifi Düğmesini Tasarlama

SMS düğmesini oluşturmak için sütun 3'ü çoğaltın.

Yol Tarifi Simgesini ve Bağlantı URL'sini Ekleme

Ardından, 3. sütundaki yinelenen tanıtıcı metni yeni bir Başlık ve Simge ile güncelleyin.

Google Haritalar üzerinden yol tarifi başlatacak bir arama bağlantısı URL'si eklemek için bu Yön URL yapılarını kullanın.

Bu eğitim için, kullanıcının mevcut konumundan Mountain View, CA'daki GooglePlex'e yol tarifi oluşturacak bir yol tarifi bağlantısı ekleyeceğiz.

• Modül Bağlantı URL'si:

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

URL'ye kendi adresinizi eklemek için, kelimeleri artı (“+”) sembolleriyle ayırdığınızdan emin olarak, URL'deki “destination=” sonrasındaki metni değiştirin.

Düğmeye tıklamak size buna benzer bir şey vermelidir…

Bölümü Masaüstünde Gizle

İletişim çubuğunun sadece mobil cihazlarda görünmesini istediğimiz için, masaüstünde tüm bölümü devre dışı bırakabiliriz. Bunu yapmak için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Devre Dışı Bırak: Masaüstü

Nihai sonuçlar

Diğer İletişim Bağlantıları

HTML5 ile telefon numaralarıyla sınırlı değilsiniz. E-posta, mesajlaşma, faks vb. gibi başka harekete geçirici mesajlar ekleyebilirsiniz. HTML5 protokolleri şunları içerir:

tel: – bir telefon görüşmesi yapın
mailto: – bir e-posta uygulaması açın
callto: Skype'ı açın
sms: – bir metin mesajı gönderin
faks: – bir faks gönder

Ve isterseniz, Yol Tarifi URL'si için hedeflenmiş bir Waze bağlantısı da ekleyebilirsiniz.

Son düşünceler

İletişim çubuğu, kullanıcıların bir mobil cihazdan kendileriyle iletişim kurmasını kolaylaştırmak isteyen herhangi bir şirket web sitesine harika bir ek olacak gibi görünüyor. Bağlantı URL'lerinin yapılarına aşina olduğunuzda, istediğiniz herhangi bir iletişim bağlantısı türüne hazırsınız demektir.

Daha fazlası için Telefon Bağlantıları hakkındaki yazımıza göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!