Divi Tanıklık Modülüne Duyarlı İçerik Nasıl Eklenir
Duyarlı seçenekleri tartışırken, genellikle şekli farklı ekran boyutlarına uyacak şekilde değiştiren içeriği düşünüyoruz. Divi ile daha fazla duyarlı içerik getirebiliriz. Ekran boyutuna göre içeriğin uzunluğunu azaltmak veya içeriğin veya kuvveti tam olarak değiştirmek için Divi ayarlarını kullanabiliriz. Bu yazıda, Divi referans modülüne nasıl duyarlı içerik ekleyeceğimizi göreceğiz. İki farklı senaryoyu tartışacağız ve her ikisinin de ayrıntılarını göstereceğiz. Başlayalım. Duyarlı referans senaryosu Birincisi, uzun bir referans biçimi göstermek istediğinizi söylüyor. Bu, kullanabileceğiniz çok fazla alana sahip olduğunuz masaüstünde iyi çalışabilir, ancak bu mobil cihazlarda çok fazla rulo oluşturabilir. Bu sorunun üstesinden gelmek için, masaüstünde görüntülemek için iki uzun içerik sürümünü ve cep telefonlarında görüntülenecek kısa sürümler oluşturabiliriz. Ekran boyutuna göre içeriği görüntülemek için Divi ayarlarını kullanabiliriz.
Duyarlı referans senaryosu Masaüstü sürümü için bir masaüstü sürümü, her zamanki gibi referanslar için. Divi referans modülü Varsayılan ayarlar masaüstü ayarlarını görüntüler, bu nedenle herhangi bir ayar değiştirmemize gerek yoktur. Tanıklıklarım için, referans modülünden kukla içerik kullandım ve büyük bir referans yapmak için birkaç kez yayınladım. Ayrıca tüm yazı tiplerini siyah yaptım.
Görüntü görüntüye doğru ilerleyin ve genişliğini 120px’e ve yuvarlak köşeleri 0px’e değiştirin. Resim Genişliği: 120px
Yuvarlak açılı görüntü: 0px
Bir sonraki vücut metni, vücut metnine gidin ve rengi siyah olarak değiştirin. Gövde metni rengi: #000000
Yazarın metni yazarın metnine girer ve yazı tipini Petch Chakra’ya değiştirir, renk siyah olur ve boyut 20 pikseldir. Yazar metin yazı tipi: Chakra Petch
Renk: #000000
Boyut: 20 piksel
Konum Metni Konum metnini EXO olarak değiştirin, siyah olarak ayarlayın ve boyutu 18px olarak değiştirin. Metin Yazı Tipi Konum: EXO
Renk: #000000
Boyut: 18px
Son şirket metni, şirket metnini EXO olarak değiştirin, siyah olarak ayarlayın ve boyutu 18px olarak değiştirin. Şirket metin yazı tipi: exo
Renk: #000000
Boyut: 18px
Masaüstü sürümümüzün referans sürümümüzün masaüstü ve hücresel sürümlerinden biri, ayrıntılı referanslar için işlev görebilir, ancak mobil cihazlar için çok büyük olabilir. İşte cep telefonundaki tasarımlar. Görünüşe göre makale uzun ve onu geçmek için çok fazla rulo gerektiriyor. Büyük olasılıkla tüm bu içeriği mobil olarak okumayacaklar ve içeriğin bir sonraki bölümünü görecek olanı görecek kadar ilerleyemeyebilirler. Çözüm, kullanıcılara ihtiyaç duydukları ana bilgileri veren bu içerik içeriğinin hücresel bir sürümünü oluşturmaktır. Skenario referans duyarlı bir hücresel sürümünü, referans içeriğinin hücresel bir sürümünü oluşturmak için, imleci referans modül içeriği sekmesinde gövde seçeneğine yönlendirin . Bu bir dizi simgeyi ortaya çıkarır. Cihaz sekmesini görüntülemek için tablet gibi görünen birini tıklayın. Masaüstü, tablet ve cep telefonu için bir simge göreceksiniz. Telefon simgesini seçin. Bu, mobil sürümün içeriğini gösterir ve bu ekran boyutu için düzenlemenizi sağlar. Masaüstü sürümleri ve tabletler mobil sürümde yapılan değişikliklerden etkilenmez. Ardından, hücresel sürüm için özel içerik oluşturun ve modülü kapatın. Artık sadece cep telefonlarında görüntülenen referansların hücresel bir versiyonuna sahibiz. Kullanıcılar masaüstünde daha büyük referansları okuyabilir ve telefonda kullanımı daha kolay olan daha kısa bir sürüm görebilir. Hisse senedi yanıtlayan iki referans senaryosu da referansları tam olarak değiştirmek mümkündür. Sadece vücudun içeriğini değiştirmek yerine, diğer insanların tanıklıklarını görüntülemek için modül ayarlarını değiştirebiliriz. Duyarlı ayarlar, farklı kişileri görüntülemek ve ekran boyutuna göre referanslarını görüntülemek için içeriği değiştirecektir. İşlem ilk senaryomuzla aynı, ancak biraz daha karmaşıktır. Sadece vücut içeriğini değil, aynı zamanda isimleri, pozisyonları, şirketleri ve görüntüleri de değiştirmemiz gerekiyor. İstersek stili bile değiştirebiliriz. Masaüstü sürümü için iki masaüstü sürüm senaryosu, önceki örnekten masaüstü sürümünde birkaç değişiklik yaptım. Bu modülü hücresel versiyon için yeniden düzenleyeceğiz. İlk iki tarzı masaüstü tarzı senaryo, son örnekten yaptığım masaüstü stilindeki değişikliklere bakalım. Görüntü geniş ve görüntünün yüksekliğini 140 piksel olarak değiştirin. Resim Genişliği: 140px
Görüntü Yüksekliği: 140 piksel
Bir sonraki gövde metni, vücut metni boyutunu 16px ve hat yüksekliği 1.8EM olarak değiştirin.
Metin Boyutu: 16px
Hat yüksekliği: 1.8em
Hücresel senaryonun iki hücresel versiyonu şimdi, referansları mobil cihazlar için tamamen farklı bir referansa dönüşecek şekilde ayarlayalım.
Hücresel bir sürüm oluşturmak için imleci ayarlamak istediğiniz öğelere yönlendirmeniz ve tablet simgesini seçmeniz gerekir. Ardından, üç cihazın telefon simgesini seçin. Seçilen telefon simgesiyle bu öğelerde yaptığınız değişiklikler ne olursa olsun, yalnızca öğenin mobil sürümünü etkiler. Her öğe için bir telefon simgesi seçmelisiniz. Aşağıdaki adımlarda her öğe için telefon simgesini seçtim. İki hücresel sürüm içeriğinin senaryosu Metin seçeneği altındaki her öğe için telefon simgesini seçin ve yeni içerik ekleyin. Şirket alanını hücresel olarak boşalttım. İsim: Yeni Yazarın Adı İş Başlığı: Yeni Başlık
Şirket: boş Ardından, vücut içeriği için telefon simgesini seçin ve yeni referanslar ekleyin.
Vücut içeriği: yeni referanslar
Ardından, görüntüye gidin ve yeni referanslarla eşleşecek görüntüyü değiştirin. Öğenin altında, teklif simgesi için telefon ayarlarını seçin ve devre dışı bırakın. Bunun için cep telefonları için teklif simgesini kullanmayacağız.
Resim: yeni referanslar için fotoğraf Alıntı simgeleri göster: hayır
Ardından, arka plana doğru kaydırın. Seçilen telefon ayarları ile arka planı siyah olarak değiştirin. Arka plan: #000000
Sonraki iki mobil tasarım senaryosu, Tasarım sekmesini seçin ve aşağıdaki değişiklikleri yapın. Görüntü Görüntü ayarlarını açın ve 90 piksel olarak değişir. Aynı genişliği bırakacağız.
Görüntü Yüksekliği: 90 piksel Gövde metni İçerik metnine doğru ilerleyin. Telefon rengini siyah, boyutu 14 piksel olarak ve hat yüksekliğini 1.7EM olarak değiştirin.
Renk: #ffffff Boyut: 14 piksel
Hat yüksekliği: 1.7em Yazar metni yazarın metnine girer. Telefon rengini #FFD600 ve boyutunu 16px olarak değiştirin.
Renk: #FFD600
Boyut: 18px
Son konum metni, konum metnine gidin. Telefonun rengini beyaz ve boyutunu 14px olarak değiştirin. Şirket metnini kullanırsanız, ayarları konum metnine göre yapın. Sayfa ayarlarınızı kapatın ve sayfanızı kaydedin. Renk: #ffffff
Boyut: 14 piksel
Masaüstünde görüntülendiğinde aşağıdaki referans modül senaryosunun iki masaüstü sürümü.Cep telefonundaki sayfaları gören herkes bu referans görmeyecek. Aynı senaryonun iki mobil versiyonunun sonuçları mobil cihazlarda görüntülendiğinde aynı sayfadır.Masaüstünde sayfaları gören herkes bu ifadeyi görmez. Divi referans modülüne duyarlı içeriğin nasıl ekleneceğine dair görünümümüz olan zihni bitirmek.Divi masaüstü ve hücresel ayarlar, ekran boyutuna göre farklı içeriği görüntülemeyi kolaylaştırır.Vücut içeriğinden zorluğa tamamen farklı bir tanıklığa değiştirin.Bu, divi referans modülünüz için duyarlı içerik oluşturmanın iyi bir yoludur.Senden duymak istiyoruz.Tanıklık modülü içeriğinizi duyarlı hale getirmek için bu yöntemlerden birini kullanıyor musunuz?Bize yorumlardaki deneyiminizden bahsedin.
