Divi'de Benzersiz Mizanpaj Tasarımları için Metni Döndürme (Eğitim + ÜCRETSİZ Mizanpaj İndirme)

Çoğumuz metni sağdan sola ve yukarıdan aşağıya okumaya alışkınız. Ancak web tasarımı söz konusu olduğunda, normlardan kurtulmak iyi bir fikir olabilir. Bunu yapmanın bir yolu metin döndürmedir. Web sitenizdeki metni döndürmek pratik olmayabilir, ancak bir yeri var gibi görünüyor. Aslında, modern web tasarımında dikey metin yönlendirmesi yaygın görünmektedir. Ve çoğu metni yalnızca tasarım amacıyla döndürmekle birlikte, döndürülmüş (veya dikey) metnin (okunması daha zor olsa da) etkili bir dikkat çekme tekniği olabileceği iddia edilebilir.

Divi ile yerleşik dönüştürme seçeneklerini kullanarak sayfanızdaki herhangi bir öğeyi döndürebilirsiniz. Bu derste size Divi'de benzersiz düzen tasarımları oluşturmak için metni nasıl başarılı bir şekilde döndüreceğinizi göstereceğim. Bunu yapmak için, döndürülmüş metin örneklerini içeren üç parçalı bir düzen tasarlayacağım.

Başlayalım.

Gizlice Bakış

İşte öğreticide oluşturacağımız tüm düzene bir göz atın. Mizanpajın üç farklı bölümünde döndürülmüş metin örnekleri olduğuna dikkat edin.

Bu Eğitimden Tam Düzeni ÜCRETSİZ olarak indirin

Ellerinizi ücretsiz Döndürülmüş Metin Tasarımları düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Düzeni İ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, 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!

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 Döndürürken Akılda Tutulması Gerekenler

Metni Hangi Yöne Döndürmelisiniz?

Dikey bir görünüm için metni döndürmek istiyorsanız, metni hangi yöne döndüreceğinizden emin olamayabilirsiniz. Metnin aşağıdan yukarıya doğru okunması için metni saat yönünün tersine döndürebilirsiniz. Veya metni saat yönünde döndürerek metnin yukarıdan aşağıya doğru okunmasını sağlayabilirsiniz. Hangisini okumanın daha kolay olduğunu merak ediyorsanız, bir cevap olduğundan emin değilim. Bir kitaplıktaki kitap adlarının yönüne bakarak bir ipucu elde etmeyi deneyebilirsiniz. Ancak farklı ülkeler bunu farklı şekilde yapar (ABD'deki standart saat yönündedir, yukarıdan aşağıya).

Bu eğitimde, çoğu durumda metni saat yönünün tersine döndüreceğim, çünkü esas olarak sayfanın sol tarafında görünme şeklini beğeniyorum (belki kafamı sola yatırmayı tercih ederim). Ancak farklı yönleri denemekten çekinmeyin.

Bulanıklık Sorunu

Bazı tarayıcılarda (Chrome ve Safari gibi), transform döndürme özelliğini kullanırken metin biraz bulanıklaşıyor. Sorunu çözmek için X ekseni boyunca %51 veya %52'lik bir dönüşüm kaynağı değeri ekleyebilirsiniz. Bu sorunu çözmelidir.

Bölüm 1: Dikey Metinle Başlığı Oluşturma

Düzenin bu ilk kısmı için dikey metin içeren bir başlık oluşturacağız. Bunu yapmak için dönüştürme seçeneklerini kullanarak bir tanıtım yazısı modülünü döndüreceğiz.

Başlamak için, iki sütunlu bir satır içeren normal bir bölüm oluşturun.

Modül eklemeden önce, aşağıdaki bölüm ayarlarını güncelleyerek bölümün üst ve alt dolgusunu çıkarın:

Özel Dolgu: 0 piksel üst, 0 piksel alt

Ardından, Satır ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Resmi: [en az 1920 piksel genişliğinde resim ekleyin]
• Sütun 1 Arka Plan Rengi: #121212

• Özel Genişlik: %100
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: EVET
• Özel Dolgu (masaüstü): 0 piksel üst, 0 piksel alt
• Özel Dolgu (tablet): %40 sağ
• Özel Dolgu (telefon): %30 sağ
• Sütun 1 Özel Dolgu (masaüstü): 200 piksel üst, 200 piksel alt
• Sütun 1 Özel Dolgu (tablet): Üstte 150 piksel, altta 150 piksel

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölgesi Dikey Konumu: -100px
• Gölge Rengi: #f6454e

Blurb Modülünü Oluşturma

Artık başlık içeriğimizi eklemeye hazırız. Bunu yapmak için satırın sol sütununa bir tanıtım yazısı modülü ekleyin.

Aşağıdaki içeriği güncelleyin:

• Başlık: Divi Tasarım
• İçerik: İçeriğiniz buraya gelir.
• Simgeyi Kullan: EVET
• Simge: ampul

• Simge Rengi: #f6454e
• Simge Yazı Tipi Boyutu: 32px
• Metin Yönü: orta
• Başlık Başlık Düzeyi: H1 (sayfanın ana başlığı olduğu için)
• Başlık Yazı Tipi: Muli
• Başlık Yazı Tipi Stili: TT
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 70px (masaüstü), 50px (tablet), 36px (telefon)
• Gövde Metni Rengi: #cccccc
• Gövde Harf Aralığı: 4px
• Genişlik: 500 piksel
• Modül Hizalaması: merkez

Önemli Not: Tanıtım tanıtım modülünü dikey duracak şekilde döndüreceğimiz için 500 piksellik özel genişlik dikey tanıtım modülünün yüksekliği olacaktır. Bu yüzden içeriğin bu modülün içine sığması önemlidir. Bu örnekte, az miktarda metin kullanıyorum ve metnin yeni bir satıra bölünmemesi ve tasarımı bozmaması için farklı cihazlarda başlık yazı tipini yeniden boyutlandırıyorum.

Dönüştürme Seçeneklerini Kullanarak Blurb Modülünü Döndürme

Tanımlama modülünü (ve tüm içeriğini) döndürmek için aşağıdaki dönüştürme seçeneklerini güncelleyin:

• Dönüştür X eksenini döndür: -90deg

-90deg değerini manuel olarak girmeniz gerekecektir. Bu size içeriğin aşağıdan yukarıya dikey hizalanmasını sağlayacaktır.

Chrome veya Safari kullanıyorsanız metnin biraz bulanık olduğunu fark edebilirsiniz. Bu bazen transform: döndürme özelliğini kullanırken olabilir. Bunu düzeltmek için, Dönüştürme Kaynağını aşağıdaki gibi hafifçe ayarlayabilirsiniz:

• Orijin Y eksenini dönüştür: %51

Metin netleşene kadar bu değeri biraz ayarlamanız gerekebilir. Örneğin, bazı tasarımlarda %52 net görünebilir.

Dikey Düğme Oluşturma

Ardından, kullanıcıya sayfayı aşağı kaydırmasını hatırlatmak için başlığımızın altına bir düğme ekleyeceğiz. Daha sonra, tıpkı tanıtım yazısı modülünde yaptığımız gibi dönüştürme seçeneklerini kullanarak düğmeyi döndürebiliriz.

Tek sütun yapısıyla yeni bir satır oluşturun.

Buton modülümüzü eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyiniz:

• Arka Plan Rengi: #f6454e
• Özel Genişlik: %100
• Oluk Genişliği: 1

Ardından, satıra bir düğme modülü ekleyin ve aşağıdaki düğme seçeneklerini güncelleyin:

• Düğme Hizalama: merkez
• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 9px
• Yazı Tipi Ağırlığı: hafif
• Yazı Tipi Stili: TT
• Düğme Simgesi: sağ ok

Düğmeyi Döndürme ve Konumlandırma

Düğmeyi döndürmek ve konumlandırmak için, bir kenar boşluğu kombinasyonunu kullanacağız ve döndürmeyi aşağıdaki gibi dönüştüreceğiz:

• Özel Kenar Boşluğu (masaüstü): -50 piksel üst, 50 piksel alt, -50 piksel sol
• Özel Kenar Boşluğu (tablet): 0 piksel kaldı
• Dönüştür X eksenini döndür: 90deg

Bu sefer, metin için yukarıdan aşağıya dikey bir görüntü elde etmek için düğme 90 derece (saat yönünde) döndürülür. Kullanıcının aşağı kaydırmasını istediğimiz için bu uygun görünüyor.

Bölüm 2: Çapraz Etiketler Oluşturmak için Metin Modüllerini Döndürme

Düzenin bu sonraki bölümünde, etiket olarak kullanılan döndürülmüş metin modülleriyle üç tanıtım yazısı oluşturacağız. Bu, sayfanızda öne çıkan öğeleri göstermenin harika bir yoludur.

İşte nasıl yapılacağı.

Üç sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından, ilk sütuna bir tanıtıcı modül ekleyin.

Varsayılan görüntü yerine ampul simgesini kullanmayı seçin.

Ardından, tanıtıcı modülünü aşağıdaki gibi güncelleyin:

• Simge Rengi: #f6454e
• Simge Yazı Tipi Boyutu: 32px
• Özel Dolgu: 3vw alt, 3vw sol, 3vw sağ

Ardından, satır ayarlarını aşağıdaki gibi güncelleyin:

• Sütun 1 Arka Plan Rengi: #eeeeee
• 2. Sütun Arka Plan Rengi: #eeeeee
• 3. Sütun Arka Plan Rengi: #eeeeee
• Sütun Yüksekliklerini Eşitle: EVET

Bu sonraki adım, döndürülmüş metin modülü etiket tasarımımızı eklediğimizde çok önemlidir. Metin modülünün taşmasının sütunun dışına gizlenmesini istiyoruz. Bunun olmasını sağlamak için, sütunların her birine özel CSS olarak “overflow: hidden” özelliğini eklememiz gerekiyor.

Gelişmiş sekmesinin altına aşağıdaki özel CSS'yi ekleyin:

Sütun 1 Ana Öğe CSS:

overflow: hidden;

Sütun 2 Ana Öğe CSS:

overflow: hidden;

Sütun 3 Ana Öğe CSS:

overflow: hidden;

Metin Modülünü Etiket Olarak Ekleme ve Döndürme

Ardından, 1. sütundaki tanıtım modülünün hemen üstüne bir metin modülü ekleyin.

Metin İçeriğini "Öne Çıkan" kelimesiyle güncelleyin.

Ardından metin modülünü aşağıdaki gibi biçimlendirin:

• Arka plan rengi: #f6454e
• Metin Yazı Tipi: Muli
• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Metin Rengi: #ffffff
• Metin Harf Aralığı: 3px
• Metin Satır Yüksekliği: 2.5em
• Metin Yönü: orta

Şimdi metin modülüne aşağıdaki gibi özel bir genişlik verin:

• Genişlik: 180 piksel
• Modül Hizalama: sol

Ardından, aşağıdaki dönüştürme seçeneklerini kullanarak metin modülünü sütunun sol üst köşesine yerleştirin:

• Dönüştür X eksenini çevir: -%25
• Y eksenini dönüştür: %70

Tasarımı daha duyarlı hale getirmek için burada yüzde değerleri kullanmak önemlidir, bu nedenle bunları manuel olarak girmeniz gerekecektir.

Dönüştür X eksenini döndür: -45deg

Tasarımı tamamlamak için metin modülünün taşmasının sütunun dışına gizlendiğine dikkat edin.

Tek yapmamız gereken birinci sütundaki modülleri kopyalamak ve bunları sütun 2 ve sütun 3'e yapıştırmak.

İşte nihai sonuç.

Bölüm 3: İçeriğiniz için Dikey Başlıklar Oluşturma

Düzenin bu sonraki bölümü, bir 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, hizmetler gibi şeyleri sergilemek için kullanışlı bir düzendir. Ayrıca çok benzersiz bir dikey başlık oluşturmak için listeleri kullanmanın yaratıcı bir yolunu göstereceğim.

İşte nasıl yapılacağı.

Bir sütun satırıyla yeni bir normal bölüm oluşturun.

Ardından, yukarıdaki düzende üç sütun satırındaki tanıtıcı modüllerden birini kopyalayın. Bu bize tasarım konusunda bir başlangıç ​​sağlayacaktır.

Ardından, bulanıklık ayarlarını aşağıdaki gibi güncelleyin:

• Görüntü/Bulanıklık Yerleşimi: Sol
• Özel Kenar Boşluğu (masaüstü): 200 piksel kaldı
• Özel kenar boşluğu (telefon): 0 piksel kaldı
• Özel Dolgu: 100 piksel üst, 100 piksel alt

Sol kenar boşluğu ekleyeceğimiz dikey metin modülü için ihtiyaç duyacağımız alanı oluşturur.

Ardından, tanıtım yazısı modülüne aşağıdaki gibi bir kenarlık ekleyin:

• Kenar Genişliği: 2px
• Kenar Rengi: #eeeeee

Metin Modülünü Oluşturma

Tanıtıcı içerik yerindeyken, artık metin modülümüzü ekleyebiliriz. Yeni bir metin modülü oluşturun ve ardından onu doğrudan tanıtım modülünün üzerine yerleştirin.

Bundan sonra, içerik kutusuna aşağıdaki html'yi ekleyin (metin sekmesinin seçili olduğundan emin olun):

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

Bu html, sıralı bir liste (ol), bir h5 etiketi ve sırasız bir liste (ul) kullanıyor. Bu, Divi'nin metin modülü içindeki yerleşik tasarım seçeneklerini kullanarak liste öğelerinin her birini ve h5'i ayrı ayrı özelleştirmemize olanak tanır.

Bu teknik, bazı şaşırtıcı liste tasarımları oluşturmak için kullanılabilir.

Ardından, tasarım sekmesine geçin ve aşağıdakileri güncelleyin:

• Sırasız Liste Yazı Tipi: Muli
• Sırasız Liste Yazı Tipi Ağırlığı: Hafif
• Sırasız Liste Metin Boyutu: 15px
• Sırasız Liste Stili Türü: Yok
• Sırasız Liste Öğesi girintisi: 0.01px

• Sıralı Liste Yazı Tipi: Abril Fatface
• Sıralı Liste Metin Rengi:
• Sıralı Liste Metin Boyutu: 40px
• Sıralı Liste Harf Aralığı: 4px
• Sıralı Liste Satır Yüksekliği: 1.3em
• Sıralı Liste Stil Türü: Ondalık Başta Sıfır

• Başlık 5 yazı tipi: Muli
• Başlık 5 Yazı Tipi Ağırlığı: ultra hafif
• Başlık 5 Yazı Tipi Stili: TT
• Başlık 5 Metin Boyutu: 62px

Metin Modülünü Boyutlandırma, Döndürme ve Konumlandırma

Artık metin tasarımına sahip olduğumuza göre, ona özel bir genişlik verelim. Modülü dikey olarak görüntülemek için döndürdüğümüzde modülün genişliğinin modülün yüksekliği olacağını unutmayın.

• Özel Genişlik: 300 piksel
• Modül Hizalama: sol

Metni döndürmek için aşağıdakileri güncelleyin:

• Dönüştür X eksenini döndür: -90deg (masaüstü), 0deg (telefon)

Telefon ekranı için dönüşü 0 dereceye sıfırlamamız gerekiyor.

Daha sonra Çeviriyi Dönüştür seçeneğini güncelleyin:

• Dönüştür X eksenini çevir: -%10 (masaüstü), %0 (telefon)
• Dönüştür Y eksenini çevir: %50 (masaüstü), %0 (telefon)

Dönüştürme ayarları, metin modülünün konumunu biraz ayarlar. Ancak, aralığımızı doğru bir şekilde elde etmek için, metin modülünün bulanıklık modülünün üzerinde bıraktığı negatif boşluğu değiştirmemiz gerekiyor. Bunu yapmak için, metin modülüne aşağıdaki gibi bir miktar negatif alt kenar boşluğu eklememiz gerekiyor:

• Özel Kenar Boşluğu (masaüstü): -150 piksel alt
• Özel Kenar Boşluğu (telefon): 0 piksel alt

Bölümü Çoğalt ve Sıralı Liste Başlangıç ​​Numarasını Güncelle

Bu düzenin daha fazla bölümünü oluşturmak için bölümü çoğaltabilirsiniz. Sıralı liste numarası yine “1” olacaktır. Bunu değiştirmek için, açılış sıralı liste (ol) etiketini aşağıdakiyle değiştirmeniz gerekir:

<ol start="2">

Bu, listenin 1 yerine 2 numara ile başlamasına izin verecektir.

Bu kadar. Hepimiz bittik!

Döndürülmüş Metin Tasarımları ile Mizanpajın Nihai Tasarımı

masaüstü

Tablet ve Telefon

Son düşünceler

Divi'de metnin (veya herhangi bir içeriğin gerçekten) nasıl döndürüleceğini bilmek, içeriğinize dikkat çekmenin harika bir yoludur. Ayrıca, doğru yaparsanız, tasarımı gerçekten öne çıkarabilir. Umarım bu eğitim, daha da güzel tasarımlar için metin döndürmeyi nasıl uygulayabileceğiniz konusunda biraz ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!