Divi ile etkileşimli içerik oluşturmak için metnin görüntüsünü kullanın
Web sitenizi benzer bir web sitesinden öne çıkarmak zor olabilir, ancak bunu yapmayı başardıktan sonra, neredeyse her zaman dahil edilen çabalar ve düşüncelerle orantılıdır. İlham almanıza yardımcı olmak için, Divi ile bir web sitesi oluştururken nasıl etkileşimli bir içerik oluşturacağınızı göstereceğiz. Bu öğreticide yeniden yaratacağımız örnekler, ne yaptığınız hakkında sayfalar için çok iyi çalışacaktır. Varsayılan metin gölgesi seçeneğini kullanarak imleci yönlendirirken gerçekleri veya şirket bilgilerini paylaşabilirsiniz. Ayrıca, bilgi ve hücresel deneyimlerin kaybolmaması için bu uçuşun etkisinin daha küçük ekran boyutları için geçerli olmamasını sağlıyoruz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, bekleyebileceğiniz sonuçlara bir göz atalım. Masaüstü
Yeniden yaratacağımız örnek, sayfa için harika, ancak 5 karakter veya 6 karakter kelimesi (sütun yapısıyla eşleşen) ile çalışmasını sağlayabilirsiniz.
Her karakter tek tek metin modülüne adanmış olacaktır
Farklı kelime karakterlerini bağlamak ve aynı modülde yapılmış gibi görünmesini sağlamak için yeterli sütunlu bir satır kullanıyoruz
Varsayılan olarak, metin modülünün metin rengini parçanın arka plan rengine göre yapacağız.
Karakterin hala okunabilmesini sağlamak için, beyaz metnin gölgesini karaktere de uygulayacağız
Karakteri yönlendirdikten sonra, metnin metni kaybolacak ve metnin rengi değişecek, bu da metnin karaktere arandığı hissini veren bazı ek bilgiler de görünecek
Daha küçük ekran boyutlarında, gerçekler ve/veya şirket bilgileri en başından
Yaratmaya başlayalım!
YouTube kanalına abone Olun Arka plan renginin yeni bir kısmını ekliyoruz Yeni veya mevcut bir sayfa açın ve normal parçayı ekleyin. Ayarları açın ve arka plan rengini değiştirin.
Arka plan rengi: #03006D
Mesafe Ardından, boşluk ayarlarını açın ve bazı özel üst ve alt yatak ekleyin. Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin. Yapıştırıcı daha sonra boyut ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Bu önemli bir adımdır, çünkü görünüm portu birimini kullanarak mesafeyi manuel olarak belirlememize izin verecektir. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Önceki adımdaki mesafe, yeni çizgilerle birlikte gelen tüm varsayılan boyut ayarlarından kurtulduk. Ancak, manuel olarak biraz dolgu eklememiz gerekiyor. Burada, sonuçların tüm masaüstü ekran boyutlarında aynı kalmasını sağlamak için ViewPort ünitesini kullanıyoruz. Sol dolgu: 9VW (masaüstü), 5VW (tablet ve cep telefonu)
Sağ dolgu: 5VW (tablet ve cep telefonu)
Metin modülünü Sütun 1’e ekleyin, satır ayarlarını değiştirmeyi bitirdikten sonra içeriği ekleyin, devam edebilir ve ilk metin modülünü sütuna ekleyebilirsiniz. İlk karakteri, gelişimde görüntülemek istediğiniz paragraf metni ve içerik olarak ekleyin. Liste metni olarak. Tasarım sekmesini açın ve varsayılan paragraf metin ayarlarını değiştirin. Bölümün metni ve arka planı için aynı rengi kullandığınızdan emin olun. Metin yazı tipi ağırlığı: çok kalın Metin rengi: #03006D
Metin Boyutu: 27VW (masaüstü), 0VW (tablet ve cep telefonu)
Yüksek çizgi metin: 1.1em
Plepen Mukavemeti Metin Gölgesi: 0.01EM
Metin Gölge Rengi: #ffffff
Metin Oryantasyonu: Sol
Metin Ayarlarında Gezin İyi bir Hover efekti oluşturmak için, imleci yönlendirirken bu paragraf metin ayarlarını değiştirmemiz gerekir. Artık kaybolması için gerçekten şeffaf olan metnin rengini nasıl kullandığımıza dikkat edin.
Metin rengi: #ffffff Metin Gölgesi Renk: RGBA (255,255,255.0)
Varsayılan Liste Metin Ayarları Liste metin ayarlarını girerek devam edin. Bu ayarın önemli kısmı, masaüstündeki metnin boyutunun ‘0px’ olmasını sağlamaktır, ancak daha küçük ekran boyutları için bir metin boyutu olarak ’18px’ ekler. Bu, liste metninin imleci yönlendirmeden daha küçük bir ekran boyutunda, ancak masaüstünde görünmemesini sağlayacaktır.
Yazı tipi ağırlık listeleri sıralanmadı: hafif
Renk Metin Listesi Sıralama Sıralama: #ffffff
Metin boyutu sırayla değil: 0px (masaüstü), 18px (tablet ve cep telefonu)
Metin listesinin rengi sıralanmadı: RGBA (255,255,255.0)
Stil kayıt türü sıralanmadı: Daire
Liste kuvvetinin konumu sıralanmadı: Dışarı
Girinti öğesi listesi sıralanmadı: 0px
Liste metin ayarlarına gidin Liste metninin gelincikte görünmesini istiyoruz. Bu yüzden imleci yönlendirirken metnin boyutunu değiştireceğiz. İmleç işaretlerken kullandığınız metnin boyutunun, daha küçük bir ekran boyutunda kullandığınız metin boyutuyla aynı olduğundan emin olun. Bu, daha küçük ekran boyutlarında kaydırma etkisi olmamasını sağlayacaktır. Listenin boyutu metnin boyutu sıralanmamıştır: 18px
Modül mesafe ayarlarını girerek daha fazla mesafe ve orada da bazı değişiklikler yapın.
Sağ kenar boşluğu: -4vw (masaüstü), 0vw (tablet ve telefon) 4 kez klon metin modülü ve yinelenmeyi geri kalan sütuna yerleştirin Sütun 1’deki ilk modülü değiştirmeyi bitirdikten sonra, dört kez devam edebilir ve klon modüllerini dört kez klon yapabilir ve her bir kopyayı kalan sütuna yerleştirebiliriz. Bir sonraki adımda, her bir kopyayı yeni karaktere uyacak şekilde değiştireceğiz.
Sütun 2’deki Metin Modülünü Değiştirin Sütun 2’deki yinelenen açık içeriği değiştirin ve içeriği değiştirin.
Alanı değiştirin, o zaman boşluk ayarını açın ve özel marj değerini değiştirin. Alt kenar boşluğu: 50 piksel (tablet ve cep telefonu) Sol kenar boşluğu: -2vw (masaüstü), 0vw (tablet ve cep telefonu) Sağ kenar boşluğu: -2vw (masaüstü), 0vw (tablet ve cep telefonu)
Sütun 3’teki Metin Modülünü Değiştirin Sütun 3’teki yinelenen içeriği değiştirmenin içeriğini de değiştirin.
Tasarım sekmesindeki alan ayarları ile birlikte alanı değiştirin.
Alt kenar boşluğu: 50 piksel (tablet ve cep telefonu) Sol kenar boşluğu: -5.5vw (masaüstü), 0vw (tablet ve cep telefonu) Sağ kenar boşluğu: 1.5vw (masaüstü), 0vw (tablet ve telefon)
Sütun 4’teki Metin Modülünü Değiştirme İçeriği değiştirin Metin modülünü sütun 4’te açarak ve burada da içeriği değiştirerek devam edin.
Alanı değiştirin, ardından Tasarım sekmesini açın ve alan ayarlarındaki özel marj değerini değiştirin.
Sol kenar boşluğu: -6vw (masaüstü), 0vw (tablet ve telefon) Sağ kenar boşluğu: 2VW (masaüstü), 0vw (tablet ve cep telefonu) Sütun 5’teki Metin Modülünü Değiştirin İçeriği son kopyaya değiştirin. İçerik kutusundaki içeriği değiştirin.
Alanı özel mesafe düzenlemesi ile birlikte değiştirin.
Alt kenar boşluğu: 50 piksel
Sol kenar boşluğu: -7vw (masaüstü), 0vw (tablet ve cep telefonu) Sağ kenar boşluğu: 3VW (masaüstü), 0vw (tablet ve cep telefonu) Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstü
Hücresel
Aklımız, web sitenizi diğer web sitelerinden öne çıkarmanın ne kadar önemli olduğunu bilir. Varsayılan Divi seçeneği ile istediğiniz kadar yaratıcı olabilirsiniz. Bu yazı, imleci yönlendirirken nasıl etkileşimli içerik oluşturabileceğinize bir örnektir ve her şeyin daha küçük bir ekran boyutunda basit kalmasını sağlar. Üzerinde çalıştığınız her şey hakkında sayfa için yeniden oluşturduğumuz örnekleri kullanabilirsiniz. Bu, ziyaretçilerinizle etkileşime girerken şirketiniz hakkında bazı ek gerçekleri ve bilgileri paylaşmanın iyi bir yoludur. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
