Divi’de Benzersiz Düzen Tasarımı için Metin Nasıl Oynar (Öğretici + Ücretsiz Düzen İndir)
Çoğumuz, metni sağdan sola ve yukarıdan aşağıya okumaya alışkınız. Ancak bir web tasarımı söz konusu olduğunda, belki de normdan uzaklaşmak için iyi bir fikir. Bunu yapmanın bir yolu metni döndürmektir. Web sitenizde metin oynamak pratik görünebilir, ancak bir yer var gibi görünüyor. Aslında, dikey metnin oryantasyonu modern web tasarımında yaygın görünmektedir. Ve çoğu, tasarım amacıyla saf metin oynamasına rağmen, çalınan metnin (veya dikey olarak) (okunması daha zor olsa da) dikkat çekmek için etkili bir teknik olabileceğine dair argümanlar yapılabilir.
Divi ile varsayılan dönüşüm seçeneğini kullanarak sayfanızdaki herhangi bir öğeyi oynatabilirsiniz. Bu öğreticide, Divi’de benzersiz bir düzen tasarımı oluşturmak için metnin nasıl başarılı bir şekilde döndüreceğinizi göstereceğim. Bunu yapmak için, oynanan örnek metni birleştiren üç parçanın düzenini tasarlayacağım. Başlayalım. Aşağıdaki gizlice göz, öğreticide yapacağımız tüm düzenlerin bir görüntüsüdür. Düzenin üç farklı bölümünde oynanan metnin bir örneği olduğunu düşünün.
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Şimdi öğreticiye geri dönelim. Metni çalmanız gereken metni çaldığınızda hatırlanmanız gereken şeyler? Dikey bir ekran için metni oynamak istiyorsanız, metni hangi yönde oynatacağınızdan emin olmayabilirsiniz. Metni saat yönünün karşısında çalabilirsiniz, böylece metnin aşağıdan yukarıya okunması. Veya metnin yukarıdan aşağıya okunması için saat yönünde metin oynayabilirsiniz. Hangisinin okunması daha kolay olduğunu merak ediyorsanız, bir cevap olduğundan emin değilim. Kitaplık başlık oryantasyonundan kitaplık üzerinden talimatlar almayı deneyebilirsiniz. Ancak farklı ülkeler bunu farklı yapıyor (ABD’de saatin yukarıdan aşağıya aynı yönünde standart). Bu öğreticide, metni birçok durumda saat yönünün tersine oynayacağım, özellikle de Sayfa (belki başınızı sola eğmeyi tercih ederim). Ama farklı bir yön denemekten çekinmeyin. Birkaç tarayıcıdaki (Chrome ve Safari gibi) bulanık sorunlar, Dönüşüm Rotate özelliğini kullanırken metin biraz bulanıklaşır. Bu sorunu çözmek için, X ekseni boyunca% 51 veya% 52 dönüşümün değerini ekleyebilirsiniz. Bu sorunu çözmelidir. Bölüm 1: Dikey metin içeren bir başlık oluşturun
Bu düzenin ilk kısmı için, dikey metinle bir başlık yapacağız. Bunu yapmak için Dönüşüm seçeneğini kullanarak açıklama modülünü oynayacağız.
Başlamak için, iki sıra sütun içeren düzenli bir bölüm oluşturun. Modülü eklemeden önce, aşağıdaki bölüm ayarlarını güncelleyerek üst ve alt rulmanları çıkarın: Özel Dolgu: 0px üst, 0px aşağıda
Ardından, satır ayarlarını aşağıdaki gibi güncelleyin: Arka plan görüntüsü: [Minimum 1920 ppx genişliğine sahip bir resim ekleyin] Sütun 1 Renk Arka Plan: #121212 Özel genişlik:% 100
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet Pilding Custom (masaüstü): 0px üst, 0px aşağıda
Özel Dolgu (Tablet):% 40 doğru
Pilding Custom (telefon):% 30 doğru
Sütun 1 Pilding Custom (Masaüstü): 200px üst, 200px aşağı
Sütun 1 dolgu özel (tablet): 150px üst, 150px aşağı
Gölge Kutusu: Ekran yakalamaya bakın
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: -100 piksel Gölge Renk: #F6454E
Bir Blurb Modülü Oluşturma Artık başlık içeriğimizi eklemeye hazırız. Bunu yapmak için açıklama modülünü satırın sol sütununa ekleyin.
Aşağıdaki içeriği güncelleyin:
Başlık: Divi Design İçerik: İçeriğiniz burada. Simgeler kullanın: evet
Simge: Ampul
Renk simgesi: #f6454e
Simge Yazı Tipi Boyutu: 32px
Metin Oryantasyonu: Orta Başlık Seviyesi Başlık: H1 (çünkü sayfanın ana başlığıdır)
Yazı tipi başlığı: Muli
Stil yazı tipi başlığı: TT
Başlık metin rengi: #ffffff
Boyut Metin Başlığı: 70px (masaüstü), 50px (tablet), 36px (cep telefonu)
Vücut metni rengi: #ccccccc
Aralık mektubu içeriği: 4px
Genişlik: 500 piksel
Modül hizalaması: orta
Önemli Not: Bulanıklık modülünü dikey olarak duracak şekilde oynayacağımız için, 500 piksel özel genişlik dikey bulanıklık modülünün yüksekliği olacaktır. Bu nedenle, bu modüldeki içeriği ayarlamak önemlidir. Bu örnek için, metin yeni bir satıra girmemesi ve tasarımı bozmaması için küçük bir metin kullanıyorum ve farklı bir cihazdaki başlık yazı tipinin boyutunu değiştiriyorum. Açıklama modülünü (ve tüm içeriğini) oynamak için Dönüşüm Seçenekleri kullanarak Blurb modülünü oynatın, aşağıdaki Dönüşüm seçeneğini güncelleyin:
Dönüşüm Ekseni X -Eksen: -90deg
-90deg değerini manuel olarak girmelisiniz. Bu size içerikten aşağıdan yukarıya dikey bir seviyelendirme sağlayacaktır. Chrome veya Safari kullanırsanız metni biraz bulanık görebilirsiniz. Bu bazen dönüşüm özelliği kullanılırken ortaya çıkabilir: döndürün. Bunu düzeltmek için, orijin dönüşümünü aşağıdaki gibi ayarlayabilirsiniz: Y -Eksen Dönüşümü Kökeni:% 51
Metin netleşene kadar bu değeri biraz ayarlamanız gerekebilir. Örneğin,% 52’si bazı tasarımlarda açıkça görülebilir.
Bir sonraki dikey düğmeyi oluşturarak, kullanıcının sayfayı aşağı kaydırmasını hatırlatmak için başlığımızın altına bir düğme ekleyeceğiz. Ardından, açıklama modülünde yaptığımız gibi Dönüşüm seçeneğini kullanarak düğmeyi çevirebiliriz. Bir sütun yapısına sahip yeni bir satır oluşturun.
Düğme modülümüzü eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:
Arka plan rengi: #f6454e Özel genişlik:% 100
Talang genişliği: 1 Ardından, düğme modülünü satıra ekleyin ve aşağıdaki düğme seçeneklerini güncelleyin:
Düğmenin hizalanması: orta
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 16px Metin Renk Düğmesi: #fffffff
Düğmenin sınır genişliği: 0px
Mektup Mesafe Düğmesi: 9px
Yazı tipi ağırlığı: ışık
Mektup Kuvvetleri: TT
Kest simgesi: sağ ok
Döndürün ve düğmeyi döndürmek için konumlandırın ve düğmeyi konumlandırmak için, marjın bir kombinasyonunu kullanacağız ve dönüşümü aşağıdaki gibi döndüreceğiz:
Özel Marj (Masaüstü): -50px üst, 50px alt, -50px Sol
Özel kenar (tablet): 0 piksel kalan
Dönüşüm Ekseni x: 90deg Bu kez düğme, metin için yukarıdan aşağıya dikey bir ekran almak için 90 derece (saat yönünde) döndürülür. Bu uygun görünüyor çünkü kullanıcıların aşağı kaydırmasını istiyoruz. Bölüm 2: Metin Modülünü Çalma Bir sonraki düzen bölümünde diyagonal bir etiket oluşturmak için, etiket olarak oynanan metin modülüyle üç açıklama yapacağız. Bu, sayfanızda üstün öğeleri görüntülemenin iyi bir yoludur. İşte nasıl yapılacağı. Üç sütunlu yeni bir düzenli bölüm oluşturun. Ardından, açıklama modülünü ilk sütuna ekleyin.
Varsayılan görüntüler yerine ampul simgesini kullanmayı seçin. Ardından açıklama modülünü aşağıdaki gibi güncelleyin:
Renk simgesi: #f6454e
Simge Yazı Tipi Boyutu: 32px
Sütun 2 Renk Arka Plan: #eeeeeee
Sütun 3 Renk Arka Plan: #eeeeeee
Yüksek sütunu eşitleyin: evet Oynanan metin etiketi tasarımını eklediğimizde bir sonraki adım çok önemlidir. Sütunun dışında gizlenmiş metin modülünü taşmak istiyoruz. Bunun gerçekleşmesini sağlamak için, her sütuna özel bir CSS olarak “Taşma: Gizli” özelliği eklememiz gerekir. Devam sekmesinin altında, aşağıdaki özel CSS’yi ekleyin: Sütun 1 Ana Element CSS: Taşma: Gizli;
Sütun 2 Ana öğeler CSS: Taşma: gizli;
Sütun 3 Ana öğeler CSS: Taşma: gizli;
Metin modülünü bir sonraki etiket olarak ekleyin ve çalın, metin modülünü Sütun 1’deki Açıklama modülünün hemen üzerine ekleyin. Metin içeriğini “Üstün” kelimesiyle güncelleyin.
Sonra metnin metin gücü aşağıdaki gibi: Arka plan rengi: #f6454e
Metin yazı tipi: Muli
Metin yazı tipi ağırlığı: yarı kalınlık Metin Rengi Metin: #ffffffpasi Metin Mektubu: 3px Yüksek çizgi metin: 2.5em
Metin Oryantasyonu: Orta
Şimdi özel bir geniş metin modülü aşağıdaki gibi verin:
Genişlik: 180px
Modül hizalaması: sol
Ardından, metin modülünü aşağıdaki dönüşüm seçeneğini kullanarak sütunun sol üst köşesine yerleştirin:
Dönüşüm x eksenini çevirir:% -25
Dönüşüm Y eksenini çevirin:% 70 Tasarımı daha duyarlı hale getirmek için burada yüzde değerini kullanmak önemlidir, bu nedenle manuel olarak girmeniz gerekir.
Dönüşüm ekseni x ekseni: -45deg
Tasarımı tamamlamak için metin modülünün metninin sütunun dışında gizlendiğini unutmayın. Yapmamız gereken şey, modülü birinci sütundaki kopyalamaktır ve sütun 2 ve sütun 3’e takmaktır. Aşağıdakiler nihai sonuçtur. Bölüm 3: İçeriğiniz için dikey bir başlık yapın
Bir sonraki düzen bölümü, metin modülünü içeriğiniz için dikey bir başlık olarak döndürmek ve konumlandırmak için benzer teknikler kullanır. Bu, hizmet gibi şeyleri görüntülemek için yararlı bir düzendir. Ayrıca, çok benzersiz bir dikey başlık oluşturmak için bir liste kullanmanın yaratıcı bir yolunu göstereceğim. İşte nasıl yapılacağı. Bir satır sütun içeren yeni bir düzenli bölüm oluşturun. Ardından, yukarıdaki düzende üç sütundaki açıklamanın modüllerinden birini kopyalayın. Bu bize tasarımın başlangıcını verecektir.
Ardından bulanıklık ayarını aşağıdaki gibi güncelleyin:
Görüntünün/bulanıklığın yerleştirilmesi: sol Özel Marj (Masaüstü): Kalan 200 piksel Özel Marj (Telefon): 0px Sol Pilding Custom: 100px üst, 100 piksel aşağıda Sol kenar boşluğu, ekleyeceğimiz dikey metin modülü için ihtiyacımız olan alanı oluşturur. Ardından, modüle sınır ekleyin Açıklama aşağıdaki gibidir: Sınır Genişliği: 2px Sınır Rengi: #EEEEEEE
Açıklama içeriğine sahip bir metin modülü oluşturma yerinde, artık metin modülümüzü ekleyebiliriz. Yeni bir metin modülü oluşturun, ardından açıklama modülünün hemen üzerine yerleştirin. Bundan sonra, içerik kutusuna aşağıdaki HTML’yi ekleyin (metin sekmesinin seçildiğinden emin olun):
Birkaç listenin yazı tipi: Muli
Yazı tipi ağırlık listeleri sıralanmadı: hafif
Liste metninin boyutu sıralanmadı: 15px
Stil kayıt türü sıralanmadı: Yok
Girinti öğesi listesi sıralanmadı: 0.01px
Yazı Tipi Listesi Sipariş: Abril Fatface
Renk Metin Listesi Sipariş Edildi:
Liste metni boyutu sipariş: 40 piksel
Sıralı liste mektuplarının mesafesi: 4px
Sipariş edilen listenin hat yüksekliği: 1.3em
Sıralı Liste Türü: Ondalık Lider Sıfır
Başlık 5 Yazı Tipi: Muli Başlık 5 Font Ağırlığı: Ultra Işık
Başlık 5 yazı tipi stili: TT
Başlık 5 Metin Boyutu: 62px
Metin modülünü ölçme, döndürme ve konumlandırma Şimdi bir metin tasarımımız olduktan sonra özel bir genişlik verelim. Dikey olarak görüntülenecek şekilde döndükten sonra modül genişliğinin modül yüksek olacağını unutmayın.
Özel genişlik: 300 piksel
Modül hizalaması: sol Metin oynamak için aşağıdakileri güncelleyin:
Dönüştürme ekseni x ekseni: -90deg (masaüstü), 0deg (cep telefonu) Mobil ekran için dönüşü 0 dereceye kadar sıfırlamamız gerekir.
Sonraki Tercüme Dönüşüm seçeneğini güncelleyin:
Dönüşüm x eksenini çevirir:% -10 (masaüstü),% 0 (cep telefonu) Dönüşüm Y eksenini çevirir:% 50 (masaüstü),% 0 (cep telefonu)
Dönüşüm Ayarları Metin modülünün konumunu biraz ayarlayın. Ancak, doğru alanı elde etmek için, metin modülünün bıraktığı negatif boşlukları açıklama modülünün üzerindeki değiştirmemiz gerekir. Bunu yapmak için, metin modülüne aşağıdaki gibi bazı negatif marjlar eklememiz gerekir:
Özel kenar boşluğu (masaüstü): -150px aşağıda Özel Marj (Telefon): 0px aşağıda
Bölümü iki katına çıkarın ve bu düzenin daha fazla bölümünü yapmak için sipariş edilen listeyi başlatan numarayı güncelleyin, bölümü çoğaltabilirsiniz. Sipariş edilen liste numarası “1” olarak kalacaktır. Değiştirmek için açılış sipariş listesi (OL) etiketini aşağıdakilerle değiştirmeniz gerekir:
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Şimdi öğreticiye geri dönelim. Metni çalmanız gereken metni çaldığınızda hatırlanmanız gereken şeyler? Dikey bir ekran için metni oynamak istiyorsanız, metni hangi yönde oynatacağınızdan emin olmayabilirsiniz. Metni saat yönünün karşısında çalabilirsiniz, böylece metnin aşağıdan yukarıya okunması. Veya metnin yukarıdan aşağıya okunması için saat yönünde metin oynayabilirsiniz. Hangisinin okunması daha kolay olduğunu merak ediyorsanız, bir cevap olduğundan emin değilim. Kitaplık başlık oryantasyonundan kitaplık üzerinden talimatlar almayı deneyebilirsiniz. Ancak farklı ülkeler bunu farklı yapıyor (ABD’de saatin yukarıdan aşağıya aynı yönünde standart). Bu öğreticide, metni birçok durumda saat yönünün tersine oynayacağım, özellikle de Sayfa (belki başınızı sola eğmeyi tercih ederim). Ama farklı bir yön denemekten çekinmeyin. Birkaç tarayıcıdaki (Chrome ve Safari gibi) bulanık sorunlar, Dönüşüm Rotate özelliğini kullanırken metin biraz bulanıklaşır. Bu sorunu çözmek için, X ekseni boyunca% 51 veya% 52 dönüşümün değerini ekleyebilirsiniz. Bu sorunu çözmelidir. Bölüm 1: Dikey metin içeren bir başlık oluşturun
Bu düzenin ilk kısmı için, dikey metinle bir başlık yapacağız. Bunu yapmak için Dönüşüm seçeneğini kullanarak açıklama modülünü oynayacağız.
Başlamak için, iki sıra sütun içeren düzenli bir bölüm oluşturun. Modülü eklemeden önce, aşağıdaki bölüm ayarlarını güncelleyerek üst ve alt rulmanları çıkarın: Özel Dolgu: 0px üst, 0px aşağıda
Ardından, satır ayarlarını aşağıdaki gibi güncelleyin: Arka plan görüntüsü: [Minimum 1920 ppx genişliğine sahip bir resim ekleyin] Sütun 1 Renk Arka Plan: #121212 Özel genişlik:% 100
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet Pilding Custom (masaüstü): 0px üst, 0px aşağıda
Özel Dolgu (Tablet):% 40 doğru
Pilding Custom (telefon):% 30 doğru
Sütun 1 Pilding Custom (Masaüstü): 200px üst, 200px aşağı
Sütun 1 dolgu özel (tablet): 150px üst, 150px aşağı
Gölge Kutusu: Ekran yakalamaya bakın
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: -100 piksel Gölge Renk: #F6454E
Bir Blurb Modülü Oluşturma Artık başlık içeriğimizi eklemeye hazırız. Bunu yapmak için açıklama modülünü satırın sol sütununa ekleyin.
Aşağıdaki içeriği güncelleyin:
Başlık: Divi Design İçerik: İçeriğiniz burada. Simgeler kullanın: evet
Simge: Ampul
Renk simgesi: #f6454e
Simge Yazı Tipi Boyutu: 32px
Metin Oryantasyonu: Orta Başlık Seviyesi Başlık: H1 (çünkü sayfanın ana başlığıdır)
Yazı tipi başlığı: Muli
Stil yazı tipi başlığı: TT
Başlık metin rengi: #ffffff
Boyut Metin Başlığı: 70px (masaüstü), 50px (tablet), 36px (cep telefonu)
Vücut metni rengi: #ccccccc
Aralık mektubu içeriği: 4px
Genişlik: 500 piksel
Modül hizalaması: orta
Önemli Not: Bulanıklık modülünü dikey olarak duracak şekilde oynayacağımız için, 500 piksel özel genişlik dikey bulanıklık modülünün yüksekliği olacaktır. Bu nedenle, bu modüldeki içeriği ayarlamak önemlidir. Bu örnek için, metin yeni bir satıra girmemesi ve tasarımı bozmaması için küçük bir metin kullanıyorum ve farklı bir cihazdaki başlık yazı tipinin boyutunu değiştiriyorum. Açıklama modülünü (ve tüm içeriğini) oynamak için Dönüşüm Seçenekleri kullanarak Blurb modülünü oynatın, aşağıdaki Dönüşüm seçeneğini güncelleyin:
Dönüşüm Ekseni X -Eksen: -90deg
-90deg değerini manuel olarak girmelisiniz. Bu size içerikten aşağıdan yukarıya dikey bir seviyelendirme sağlayacaktır. Chrome veya Safari kullanırsanız metni biraz bulanık görebilirsiniz. Bu bazen dönüşüm özelliği kullanılırken ortaya çıkabilir: döndürün. Bunu düzeltmek için, orijin dönüşümünü aşağıdaki gibi ayarlayabilirsiniz: Y -Eksen Dönüşümü Kökeni:% 51
Metin netleşene kadar bu değeri biraz ayarlamanız gerekebilir. Örneğin,% 52’si bazı tasarımlarda açıkça görülebilir.
Bir sonraki dikey düğmeyi oluşturarak, kullanıcının sayfayı aşağı kaydırmasını hatırlatmak için başlığımızın altına bir düğme ekleyeceğiz. Ardından, açıklama modülünde yaptığımız gibi Dönüşüm seçeneğini kullanarak düğmeyi çevirebiliriz. Bir sütun yapısına sahip yeni bir satır oluşturun.
Düğme modülümüzü eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:
Arka plan rengi: #f6454e Özel genişlik:% 100
Talang genişliği: 1 Ardından, düğme modülünü satıra ekleyin ve aşağıdaki düğme seçeneklerini güncelleyin:
Düğmenin hizalanması: orta
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 16px Metin Renk Düğmesi: #fffffff
Düğmenin sınır genişliği: 0px
Mektup Mesafe Düğmesi: 9px
Yazı tipi ağırlığı: ışık
Mektup Kuvvetleri: TT
Kest simgesi: sağ ok
Döndürün ve düğmeyi döndürmek için konumlandırın ve düğmeyi konumlandırmak için, marjın bir kombinasyonunu kullanacağız ve dönüşümü aşağıdaki gibi döndüreceğiz:
Özel Marj (Masaüstü): -50px üst, 50px alt, -50px Sol
Özel kenar (tablet): 0 piksel kalan
Dönüşüm Ekseni x: 90deg Bu kez düğme, metin için yukarıdan aşağıya dikey bir ekran almak için 90 derece (saat yönünde) döndürülür. Bu uygun görünüyor çünkü kullanıcıların aşağı kaydırmasını istiyoruz. Bölüm 2: Metin Modülünü Çalma Bir sonraki düzen bölümünde diyagonal bir etiket oluşturmak için, etiket olarak oynanan metin modülüyle üç açıklama yapacağız. Bu, sayfanızda üstün öğeleri görüntülemenin iyi bir yoludur. İşte nasıl yapılacağı. Üç sütunlu yeni bir düzenli bölüm oluşturun. Ardından, açıklama modülünü ilk sütuna ekleyin.
Varsayılan görüntüler yerine ampul simgesini kullanmayı seçin. Ardından açıklama modülünü aşağıdaki gibi güncelleyin:
Renk simgesi: #f6454e
Simge Yazı Tipi Boyutu: 32px
Özel Dolgu: 3VW aşağıda, 3VW sol, 3VW sağ
Ardından, satır ayarlarını aşağıdaki gibi güncelleyin: Sütun 1 Renk Arka Plan: #eeeeeeeSütun 2 Renk Arka Plan: #eeeeeee
Sütun 3 Renk Arka Plan: #eeeeeee
Yüksek sütunu eşitleyin: evet Oynanan metin etiketi tasarımını eklediğimizde bir sonraki adım çok önemlidir. Sütunun dışında gizlenmiş metin modülünü taşmak istiyoruz. Bunun gerçekleşmesini sağlamak için, her sütuna özel bir CSS olarak “Taşma: Gizli” özelliği eklememiz gerekir. Devam sekmesinin altında, aşağıdaki özel CSS’yi ekleyin: Sütun 1 Ana Element CSS: Taşma: Gizli;
Sütun 2 Ana öğeler CSS: Taşma: gizli;
Sütun 3 Ana öğeler CSS: Taşma: gizli;
Metin modülünü bir sonraki etiket olarak ekleyin ve çalın, metin modülünü Sütun 1’deki Açıklama modülünün hemen üzerine ekleyin. Metin içeriğini “Üstün” kelimesiyle güncelleyin.
Sonra metnin metin gücü aşağıdaki gibi: Arka plan rengi: #f6454e
Metin yazı tipi: Muli
Metin yazı tipi ağırlığı: yarı kalınlık Metin Rengi Metin: #ffffffpasi Metin Mektubu: 3px Yüksek çizgi metin: 2.5em
Metin Oryantasyonu: Orta
Şimdi özel bir geniş metin modülü aşağıdaki gibi verin:
Genişlik: 180px
Modül hizalaması: sol
Ardından, metin modülünü aşağıdaki dönüşüm seçeneğini kullanarak sütunun sol üst köşesine yerleştirin:
Dönüşüm x eksenini çevirir:% -25
Dönüşüm Y eksenini çevirin:% 70 Tasarımı daha duyarlı hale getirmek için burada yüzde değerini kullanmak önemlidir, bu nedenle manuel olarak girmeniz gerekir.
Dönüşüm ekseni x ekseni: -45deg
Tasarımı tamamlamak için metin modülünün metninin sütunun dışında gizlendiğini unutmayın. Yapmamız gereken şey, modülü birinci sütundaki kopyalamaktır ve sütun 2 ve sütun 3’e takmaktır. Aşağıdakiler nihai sonuçtur. Bölüm 3: İçeriğiniz için dikey bir başlık yapın
Bir sonraki düzen bölümü, metin modülünü içeriğiniz için dikey bir başlık olarak döndürmek ve konumlandırmak için benzer teknikler kullanır. Bu, hizmet gibi şeyleri görüntülemek için yararlı bir düzendir. Ayrıca, çok benzersiz bir dikey başlık oluşturmak için bir liste kullanmanın yaratıcı bir yolunu göstereceğim. İşte nasıl yapılacağı. Bir satır sütun içeren yeni bir düzenli bölüm oluşturun. Ardından, yukarıdaki düzende üç sütundaki açıklamanın modüllerinden birini kopyalayın. Bu bize tasarımın başlangıcını verecektir.
Ardından bulanıklık ayarını aşağıdaki gibi güncelleyin:
Görüntünün/bulanıklığın yerleştirilmesi: sol Özel Marj (Masaüstü): Kalan 200 piksel Özel Marj (Telefon): 0px Sol Pilding Custom: 100px üst, 100 piksel aşağıda Sol kenar boşluğu, ekleyeceğimiz dikey metin modülü için ihtiyacımız olan alanı oluşturur. Ardından, modüle sınır ekleyin Açıklama aşağıdaki gibidir: Sınır Genişliği: 2px Sınır Rengi: #EEEEEEE
Açıklama içeriğine sahip bir metin modülü oluşturma yerinde, artık metin modülümüzü ekleyebiliriz. Yeni bir metin modülü oluşturun, ardından açıklama modülünün hemen üzerine yerleştirin. Bundan sonra, içerik kutusuna aşağıdaki HTML’yi ekleyin (metin sekmesinin seçildiğinden emin olun):
Tasarım
lorem iPsum Dolor Sit Amet
Bu, sıralı bir liste (OL), H5 etiketi ve katılım listesi (UL) kullanan bir HTML’dir. Bu, her liste öğesini ayarlamamızı sağlar ve H5, metin modülündeki Divi Varsayılan Tasarım seçeneğini ayrı ayrı kullanır. Bu teknik bazı şaşırtıcı liste tasarımları yapmak için kullanılabilir. Ardından, tasarım sekmesine atlayın ve aşağıdakileri güncelleyin:Birkaç listenin yazı tipi: Muli
Yazı tipi ağırlık listeleri sıralanmadı: hafif
Liste metninin boyutu sıralanmadı: 15px
Stil kayıt türü sıralanmadı: Yok
Girinti öğesi listesi sıralanmadı: 0.01px
Yazı Tipi Listesi Sipariş: Abril Fatface
Renk Metin Listesi Sipariş Edildi:
Liste metni boyutu sipariş: 40 piksel
Sıralı liste mektuplarının mesafesi: 4px
Sipariş edilen listenin hat yüksekliği: 1.3em
Sıralı Liste Türü: Ondalık Lider Sıfır
Başlık 5 Yazı Tipi: Muli Başlık 5 Font Ağırlığı: Ultra Işık
Başlık 5 yazı tipi stili: TT
Başlık 5 Metin Boyutu: 62px
Metin modülünü ölçme, döndürme ve konumlandırma Şimdi bir metin tasarımımız olduktan sonra özel bir genişlik verelim. Dikey olarak görüntülenecek şekilde döndükten sonra modül genişliğinin modül yüksek olacağını unutmayın.
Özel genişlik: 300 piksel
Modül hizalaması: sol Metin oynamak için aşağıdakileri güncelleyin:
Dönüştürme ekseni x ekseni: -90deg (masaüstü), 0deg (cep telefonu) Mobil ekran için dönüşü 0 dereceye kadar sıfırlamamız gerekir.
Sonraki Tercüme Dönüşüm seçeneğini güncelleyin:
Dönüşüm x eksenini çevirir:% -10 (masaüstü),% 0 (cep telefonu) Dönüşüm Y eksenini çevirir:% 50 (masaüstü),% 0 (cep telefonu)
Dönüşüm Ayarları Metin modülünün konumunu biraz ayarlayın. Ancak, doğru alanı elde etmek için, metin modülünün bıraktığı negatif boşlukları açıklama modülünün üzerindeki değiştirmemiz gerekir. Bunu yapmak için, metin modülüne aşağıdaki gibi bazı negatif marjlar eklememiz gerekir:
Özel kenar boşluğu (masaüstü): -150px aşağıda Özel Marj (Telefon): 0px aşağıda
Bölümü iki katına çıkarın ve bu düzenin daha fazla bölümünü yapmak için sipariş edilen listeyi başlatan numarayı güncelleyin, bölümü çoğaltabilirsiniz. Sipariş edilen liste numarası “1” olarak kalacaktır. Değiştirmek için açılış sipariş listesi (OL) etiketini aşağıdakilerle değiştirmeniz gerekir:
- >
Bu, listenin 1 numaralı ile başlamasına izin verecektir. Hepimiz bitti! Masaüstü Dönen Metin Tasarımı ile Düzenin Son Tasarımı Tablet ve telefon
Son zihin, Divi’de metin (veya aslında herhangi bir içeriği) nasıl çalacağını bilir. Ayrıca, doğru yaparsanız, tasarımı gerçekten öne çıkarabilir. Umarım bu öğretici, daha güzel bir tasarım için metin rotasyonunu nasıl uygulayabileceğiniz konusunda biraz ilham kaynağıdır. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
