Divi'de İlgili İşletim Sistemleri için İndirme Düğmeleri Nasıl Görüntülenir

Yazılım ve/veya mobil uygulamalar için doğru indirme düğmesine tıklamak, işletim sistemleri için doğru indirmeyi bilmeyen kullanıcılar için kafa karıştırıcı olabilir. Bu sorunun bir çözümü, web sitenize bir sayfa yüklediğinde kullanıcının işletim sistemini otomatik olarak algılamaktır, böylece o işletim sistemi için doğru indirme düğmesini/düğmelerini görüntüleyebilirsiniz. Bu, ürününüz için doğru indirmeyi kolayca bulamayan potansiyel müşterileri kaybetme riskini ortadan kaldırır.

Bu öğreticide, Divi'nin yerleşik koşul seçeneklerini kullanarak ilgili işletim sistemleri için indirme düğmelerinin nasıl tasarlanacağını ve görüntüleneceğini göstereceğiz. Bu, her işletim sisteminde hangi düğmelerin görüntüleneceğini tam olarak kontrol etmenizi sağlar.

Başlayalım!

Gizlice Bakış

Bu eğitimde oluşturacağımız işletim sistemi koşullu indirme düğmelerine hızlı bir bakış. Her düğmeye belirli bir işletim sistemi görüntüleme koşulu atanacaktır.

Bu, sayfa yüklenirken ilgili işletim sistemindeki her bir düğmeyi gösterecektir.

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ı İndir

Ü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, aşağıdaki e-posta adresinizi 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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

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

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Tasarım sürecini hızlandırmak için Divi'nin hazır Mobil Uygulama Düzen Paketinden Mobil Uygulama Ana Sayfa Düzenini kullanacağız.

Hazır düzeni sayfaya yüklemek için Divi Builder'ın altındaki ayarlar menüsünü açın. Ardından kitaplık simgesinden yükü seçin. Kütüphaneden Yükle açılır penceresinde, Mobil Uygulama Düzeni paketini bulun ve Mobil Uygulama Ana Sayfa Düzenini kullanmak için tıklayın.

Bu, düzeni sayfaya yükleyecektir. Artık gitmeye hazırsınız!

Divi'de İlgili İşletim Sistemleri için İndirme Düğmeleri Nasıl Görüntülenir

Bölüm 1: Mac OS için İndirme Düğmesini Görüntüleme

İlk düğme için, indirme düğmesini yalnızca Mac OS'de görüntülemek için Divi'nin koşul seçeneklerini kullanacağız. Bunu yapmak için, düzen başlığında mevcut düğmenin ayarlarını açın ve aşağıdaki düğme metnini ve bağlantı URL'sini güncelleyin:

• Düğme Metni: İndir (Mac OS)
• Düğme Bağlantı URL'si: [zip dosyasına URL ekleyin]

Tasarım sekmesi altında, düğme simgesini ve aralığı aşağıdaki gibi güncelleyin:

• Düğme Simgesi: ekran görüntüsüne bakın
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
• Dolgu (masaüstü): 16 piksel üst, 16 piksel alt, 40 piksel sol, 20 piksel sağ
• Dolgu (telefon): 28 piksel sol, 12 piksel sağ

Düğmeye işletim sistemi koşulu eklemek için aşağıdakileri yapın:

• Gelişmiş sekmesi altında, yeni bir görüntüleme koşulu eklemek için tıklayın.
• Açılır menüden İşletim Sistemi durumunu seçin.
• İşletim sistemi ayarları açılır penceresinde, Yalnızca İşletim Sistemi is olarak ayarlanmışsa Görüntüle seçeneğinin olduğundan emin olun.
• Listeden Mac OS işletim sistemini seçin.
• Ayarları kaydet.

İşte Mac OS'de görüntülenecekler…

Bölüm 2: Windows İşletim Sistemi için İndirme Düğmesini Görüntüleme

İkinci düğme için Windows işletim sistemi için bir indirme düğmesi görüntüleyeceğiz.

İlk olarak, yeni bir düğme oluşturmak için yeni oluşturulan düğmeyi çoğaltın.

Yeni düğmenin ayarlarını açın ve aşağıdaki düğme metnini ve bağlantı URL'sini güncelleyin:

• Düğme Metni: İndir (Windows işletim sistemi)
• Düğme Bağlantı URL'si: [zip dosyasına URL ekleyin]

Tasarım sekmesi altında, düğmeye aşağıdaki gibi bir gradyan arka planı verin:

• Degrade Arka Plan Sol Renk: #00f2fe
• Degrade Arka Plan Sağ Renk: #4facfe
• Gradyan Yönü: 90deg

Düğmeye işletim sistemi koşulu eklemek için aşağıdakileri yapın:

• Gelişmiş sekmesi altında, yeni bir görüntüleme koşulu eklemek için tıklayın.
• Açılır menüden İşletim Sistemi durumunu seçin.
• İşletim sistemi ayarları açılır penceresinde, Yalnızca İşletim Sistemi is olarak ayarlanmışsa Görüntüle seçeneğinin olduğundan emin olun.
• Listeden Windows işletim sistemini seçin.
• Ayarları kaydet.

İşte Windows'ta görüntülenecekler…

Bölüm 3: iOS için İndir Düğmesini Görüntüleme (iPhone, iPad, iPod)

Üçüncü düğme için, iOS cihazlar için bir indirme düğmesi görüntüleyeceğiz.

Düğmeyi oluşturmak için oluşturduğumuz ilk düğmeyi çoğaltın.

Yeni düğmenin ayarlarını açın ve aşağıdaki düğme metnini ve bağlantı URL'sini güncelleyin:

• Düğme Metni: App Store'dan İndirin
• Düğme Bağlantı URL'si: [zip dosyasına URL ekleyin]

Tasarım sekmesi altında, düğme simgesini sağ okla güncelleyin (ekran görüntüsüne bakın).

Düğmeye işletim sistemi koşulu eklemek için aşağıdakileri yapın:

• Gelişmiş sekmesi altında, yeni bir görüntüleme koşulu eklemek için tıklayın.
• Açılır menüden İşletim Sistemi durumunu seçin.
• İşletim sistemi ayarları açılır penceresinde, Yalnızca İşletim Sistemi is olarak ayarlanmışsa Görüntüle seçeneğinin olduğundan emin olun.
• Listeden iOS işletim sistemi cihazlarını seçin (iPhone, iPad, iPod).
• Ayarları kaydet.

İşte iOS cihazlarda gösterilecekler…

Bölüm 4: Android için İndir Düğmesini Görüntüleme

Dördüncü düğme için Android cihazlar için bir indirme düğmesi görüntüleyeceğiz.

Düğmeyi oluşturmak için önceki oluşturduğumuz düğmeyi çoğaltın.

Yeni düğmenin ayarlarını açın ve aşağıdaki düğme metnini ve bağlantı URL'sini güncelleyin:

• Düğme Metni: Google Play'den edinin
• Düğme Bağlantı URL'si: [zip dosyasına URL ekleyin]

Tasarım sekmesi altında, düğmeye aşağıdaki gibi bir gradyan arka planı verin:

• Degrade Arka Plan Sol Renk: #a8eb9d
• Degrade Arka Plan Sağ Renk: #39abc5
• Gradyan Yönü: 90deg

Düğmeye işletim sistemi koşulu eklemek için aşağıdakileri yapın:

• Gelişmiş sekmesi altında, yeni bir görüntüleme koşulu eklemek için tıklayın.
• Açılır menüden İşletim Sistemi durumunu seçin.
• İşletim sistemi ayarları açılır penceresinde, Yalnızca İşletim Sistemi is olarak ayarlanmışsa Görüntüle seçeneğinin olduğundan emin olun.
• Listeden Android işletim sistemini seçin.
• Ayarları kaydet.

İşte Android Cihazlarda gösterecekleri…

Bölüm 5: Düğmeler için Görselleri veya Rozetleri Kullanma

Ayrıca, işlerin daha resmi görünmesi için düğmeleriniz için resimler veya rozetler kullanmayı da seçebilirsiniz. Örneğin, iOS aygıtları için bir indirme düğmesi görüntülemek için Apple'ın rozetlerinden birini kullanabilirsiniz. Bir resmi düğme olarak kullanmak istiyorsanız, sayfaya yeni bir resim eklemeniz yeterlidir.

Resmi modüle yükleyin ve kullanıcıları uygulama mağazasına veya indirme sayfasına yönlendirmek için Resim Bağlantısı URL'sini sağlayın.

Ardından, ilgili işletim sisteminde görüntü düğmesini görüntülemek için görüntüleme koşulunu güncelleyin.

iOS cihazlarda bir "App Store'dan İndir" düğmesi görüntüsü gösterebilirsiniz.

Ve Android cihazlarda bir "Google Play'den Alın" düğmesi resmi gösterebilirsiniz.

Sonuçları Chrome DevTools ile Test Etme

Chrome tarayıcı kullanıyorsanız, sayfanızın/düğmelerinizin farklı işletim sistemlerinde görüntülenmesini test etmek için yerleşik DevTools'u kullanabilirsiniz. Bilgisayarınızın hangi işletim sistemini çalıştırdığı önemli değildir. Chrome DevTools, test amacıyla işletim sistemini yanıltabilir.

Sayfanızı Chrome DevTools kullanarak farklı işletim sistemlerinde test etmek için şu adımları izleyin:

1. Geliştirici araçlarını açın ve pencerenin sağ üst köşesindeki üç nokta simgesini tıklayın.
2. Açılır menüden Konsol Çekmecesini Göster'i seçin (veya konsol çekmecesini getirmek için esc tuşuna basabilirsiniz)
3. Konsol çekmecesinde, çekmecenin sol üst köşesindeki üç noktalı menüyü tıklayın.
4. Açılır listeden Ağ Koşulları sekmesini ekleyin.
5. Ağ Koşulları altında, Kullanıcı aracısı için "Varsayılan Tarayıcıyı Kullan" seçeneğinin seçimini kaldırın.
6. Ardından listeden bir Özel Tarayıcı/OS seçin.

Bittiğinde, o sayfayı bu ağ koşulları altında yüklemek için sayfayı yenileyebilirsiniz.

Nihai sonuçlar

İşte ilgili işletim sistemlerinde görüntülenen nihai sonuçlar.

Mac OS için İndirme Düğmesi

Windows işletim sistemi için İndir Düğmesi

iOS cihazlar için İndir Düğmesi

Divi Düğmesini Kullanma

Bir Resim veya Rozet Kullanma

Android cihazlar için İndir Düğmesi

Divi Düğmesini Kullanma

Bir Resim veya Rozet Kullanma

Son düşünceler

Divi'de indirme düğmeleri oluşturmak son derece kolaydır. Bir zip dosyasını indirmek veya kullanıcıları bir indirme sayfasına veya uygulama mağazasına yönlendirmek için düğme modülünü veya hatta bağlantı URL'si olan bir görüntü modülünü kullanabilirsiniz. Bundan sonra, her düğmeyi kullanıcının ilgili işletim sistemine göre görüntülemek için Divi'nin işletim sistemi koşulu seçeneğini kullanarak sayfanızın UX'ini büyük ölçüde iyileştirebilirsiniz. Bu, kullanıcıların ihtiyaç duyduklarını hızlı ve verimli bir şekilde almalarını sağlamaya yardımcı olacaktır. Ayrıca, kullanıcıların doğru düğmeleri gördüğünden emin olmak için Chrome DevTools'u kullanarak bu düğmeleri farklı ağ koşullarında test etmeyi unutmayın.

Yorumlarda sizden haber bekliyorum.

Şerefe!