Yaratıcı Liste Tasarımları için Divi Metin Modülünün Gücünü Ortaya Çıkarmak

Benzersiz liste tasarımları oluşturmak, web tasarımının önemli bir yönüdür. Okuyucular, iyi tasarlanmış bir listenin yapısını ve estetiğini takdir ederler çünkü bu onların bilgiyi çok daha hızlı işlemesine olanak tanır.

Divi'nin metin modülü ile sıradan listeleri güzel sanat eserlerine dönüştürmek için ihtiyacınız olan her şeye sahipsiniz. Divi'nin metin modülü ayarları, listeler de dahil olmak üzere içeriğinizdeki farklı html öğelerini hedeflemenize ve stillendirmenize olanak tanır. Ve birkaç tasarım tekniğiyle, listelerinizi şaşırtıcı şekillerde özelleştirmek için bu seçeneklerin gücünden yararlanabilirsiniz.

Bu derste size Divi'de nasıl benzersiz liste tasarımları oluşturabileceğinizi göstereceğim.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız dört liste tasarımına bir göz atın.

Metin Modülü Ayarlarından İlham Alınmıştır

Benim gibiyseniz, Divi Builder'ın derinliklerinde gizlenen bazı "gizli" seçenekleri gözden kaçırma eğiliminde olabilirsiniz. Birkaç gömülü hazineye sahip bir modül, Metin Modülüdür. Metin Modülü ayarları, farklı html öğeleri için stil seçeneklerini tutan birden çok sekmeye sahiptir. Bu son derece kullanışlı ve yaratıcı bir tasarım aracı olabilir. Bu sekmeler gövde metni, bağlantılar, sırasız listeler, sıralı listeler ve blok alıntılar için seçenekler içerir.

Ve bu sekmelerin altında tasarımınızda kullanmayı düşünmemiş olabileceğiniz birkaç gizli mücevher var. Örneğin, sırasız listeler için liste stili seçeneklerini değiştirebileceğinizi biliyor muydunuz? Romen Rakamları ve başında sıfır olan ondalık sayılar da dahil olmak üzere bir dizi benzersiz seçenek mevcuttur (tam olarak 18).

Bunlar önemsiz görünebilir, ancak tasarım seçeneklerinden yararlandığınızda gerçekten yaratıcı tasarımlar üretebilirsiniz.

Başlık stili seçeneklerinin altındaki sekmelerin her birinin altında farklı başlık düzeylerinin (veya etiketlerin) stilini de hedefleyebilirsiniz.

İçeriğinizdeki birden çok html öğesini hedefleme yeteneği, bazı harika olasılıklar sunar. İnşallah size de ilham verirler.

Bununla ilgili daha fazla bilgi için, bu harika metin seçeneklerinden bazılarını açıklayan özellik güncellemesine göz atın.

HTML Listenizi Oluşturma

Bir html listesi "sıralı" (sayılar, romen rakamları vb. ile) veya "sırasız" (kare simgeler, daire simgeleri vb. ile) olabilir. Sırasız listeler için liste öğeleri bir “ul” etiketine sarılır (“ul”, “sırasız liste” anlamına gelir). Sıralı listeler için liste öğeleri bir "ol" etiketine sarılır ("ol", "sıralı liste" anlamına gelir). Her liste öğesi bir “li” etiketine sarılır (“li”, “liste öğesi” için).

Sıralı bir listenin temel yapısı şu şekildedir:

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

Hangi varsayılan olarak aşağıdaki gibi görünecektir:

1. Liste Öğesi
2. Liste Öğesi
3. Liste Öğesi

Aslında bir Divi Metin Modülü içindeki wysiwyg düzenleyicisini kullanarak bir HTML listesi oluşturabilirsiniz. Görsel sekmesinde düzenleme yaptığınızdan emin olun ve her birinin ardından bir satır sonu (enter tuşuna basın) olduğundan emin olarak liste öğelerinizi yazın. Ardından içeriği vurgulayın ve düzenleyicinin üst kısmındaki liste simgelerinden birine tıklayın.

Şimdi HTML'nin nasıl göründüğünü görmek için metin sekmesine gidin:

Bu, basit listeler için iyi çalışır, ancak iç içe listeler (bir liste içinde bir liste) oluşturmak istiyorsanız, bunları wysiwyg'de yapmaya çalışmanın baş ağrısını önlemek için HTML kullanarak (metin sekmesini kullanarak) oluşturmanız daha iyi olur. düzenleyici (görsel sekme).

Her bir liste öğesinin iç içe sıralanmamış bir listeye sahip olduğu sıralı bir listeye sahip bir iç içe listenin temel yapısı buradadır.

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

Varsayılan olarak, bu iç içe html listesi şöyle görünecektir:

1. Sıralı Liste Öğesi
   • Sırasız Liste Öğesi
2. Sıralı Liste Öğesi
   • Sırasız Liste Öğesi
3. Sıralı Liste Öğesi
   • Sırasız Liste Öğesi

Ayrıca listeye başka html etiketleri de ekleyebilirsiniz. Örneğin, sıralı liste öğesini bir h5 etiketine sarabiliriz. Sonuç şöyle görünecektir:

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

Endişelenme, bu, bu eğitim için alacağım kadar karmaşık. Ancak fark etmeniz gereken şey, bu yapının Divi'nin güçlü tasarım ayarlarıyla bir metin modülünde birbirinden bağımsız olarak biçimlendirilebilen üç farklı etikete (ol, ul ve h5) sahip olmasıdır.

Biraz sonra bu yapıya ihtiyacımız olacak, ama şimdilik, görsel oluşturucuda tasarımımıza başlamak için sayfamızı hazırlayalım ve çalıştıralım.

Listeler için Bölüm ve Satır Oluşturma

Yeni bir sayfa oluşturun ve Visual Builder'ı dağıtın. Ardından Sıfırdan Sayfa Oluştur seçeneğini seçin. Ardından, iki sütunlu bir satır içeren normal bir bölüm oluşturun.

Bir Metin Modülünde HTML Listesi Oluşturma

Satırınızın ilk sütununa yeni bir metin modülü ekleyin. Metin ayarlarındaki içerik kutusuna aşağıdaki HTML Listesini girin:

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
</ol>

Bu yapı daha önceden tanıdık gelmelidir. h5 başlık metni sıralı liste öğeleri olacak ve “lorem ipsum” sahte metni iç içe sıralanmamış liste öğeleri olacaktır.

Varsayılan olarak şöyle görünecek:

Şimdiye kadar çok etkileyici değil, biliyorum. Ancak bu içerik hazır olduğunda, şimdi Divi ile listemizi tasarlamanın eğlenceli kısmına başlayabiliriz!

Önemli Not: Her tasarım, ilk tasarımın değiştirilmiş bir versiyonu olduğundan, bu eğitimde ilk tasarımla başlamak ve onları sırayla tutmak en iyisidir.

Liste Tasarımı #1

Yeni başlayanlar için, metin modülümüze aşağıdaki gibi bir gradyan arka planı verelim:

Degrade Arka Plan Sol Renk: rgba(0,0,0,0.04)
Gradyan Arka Planı Sağ Renk: rgba(255,255,255,0)
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %25
Bitiş Konumu: %0

Sıralı Liste Öğelerinin Stilini Oluşturma

Şimdi tasarım sekmesine gidin ve Metin geçişi altındaki sıralı liste sekmesini seçin.

Ardından aşağıdakileri güncelleyin:

Sıralı Liste Yazı Tipi: Abril Fatface
Sıralı Liste Yazı Tipi Ağırlığı: Kalın
Sıralı Liste Metin rengi: #559cad
Sıralı Liste Metin Boyutu: 45px
Sıralı Liste Satır Yüksekliği: 1,6em
Sıralı Liste Stil Türü: ondalık-başlık-sıfır
Sıralı Liste Stili Pozisyonu: Dış
Sıralı Liste Öğesi Girintisi: 2vw

h5 ve iç içe sıralanmamış listenin, üst sıralı listenin stilini devralacağını fark edeceksiniz. Endişelenmeyin, diğer öğelerin stilini geçersiz kılabileceksiniz.

Sırasız Liste Öğelerinin Stilini Oluşturma

Şimdi aşağıdaki ayarları değiştirmek için sıralı liste sekmesine tıklayın:

Sırasız Liste Yazı Tipi: Montserrat
Sırasız Liste Yazı Tipi Ağırlığı: Hafif
Sırasız Liste Metin rengi:
Sırasız Liste Metin Boyutu: 18px
Sırasız Liste Stili Türü: Yok
Sırasız Liste Öğesi Girintisi: 0.01px

H5 Başlığını Şekillendirme

Biçimlendirmemiz gereken son öğe H5 başlığıdır. Bunu yapmak için Başlık Metni altındaki seçeneklere gidin ve H5 sekmesine tıklayın. Ardından aşağıdakileri güncelleyin:

Başlık 5 Yazı Tipi: Montserrat
Başlık 5 Yazı Ağırlığı: Hafif
Başlık 5 Yazı Tipi Stili: Büyük Harf (TT)
Başlık 5 Metin Rengi: #4f6d7a
Başlık 5 Metin Boyutu: 5vw (masaüstü), 70px (tablet), 40px (akıllı telefon)

Metin modülümüzün tasarımını tamamlamak için aşağıdaki özel dolguyu ekleyin:

Özel Dolgu (masaüstü): 3vw Üst, 3vw Alt
Özel Dolgu (tablet): 2vw Sol
Özel Dolgu (akıllı telefon): 50 piksel Sol

Ayarları kaydet.

Şimdi metin modülünü kopyalayın ve satırın ikinci sütununa yapıştırın. Önceki listeden devam etmesi için yinelenen metin modülünde liste numaralarının ayarlanması gerektiğini fark edebilirsiniz. İkinci metin modül listemizin 1 yerine 4 rakamıyla başlamasını istiyoruz. Bunu yapmak için html listemize küçük bir değişiklik eklememiz gerekiyor. Metin modülü ayarlarındaki içerik kutusuna gidin ve açılış “ol” etiketini aşağıdakiyle değiştirin:

<ol start="4">

Şimdi nihai sonucu kontrol edelim.

Liste Tasarımı #2

Bu ikinci örnek liste tasarımı için, bize avantajlı bir başlangıç ​​yapmak için oluşturduğumuz ilk bölümü çoğaltacağım. Ayrıca arka plan gradyanlarını kullanarak liste tasarımı için harika bir arka plan tanıtacağım.

Özel Arka Plan Gradyan Tasarımı Oluşturma

Çoğaltılan bölümde, bölüm ayarını aşağıdaki gradyan arka planıyla güncelleyin:

Degrade Arka Plan Sol Renk: #ffffff
Gradyan Arka Planı Sağ Renk: rgba(155,29,32,0.08)
Gradyan Yönü: 45deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %0

Ayarları kaydet.

Şimdi Row ayarlarınızı aşağıdaki arka plan gradyanı ile güncelleyin:

Gradyan Arka Planı Sol Renk: rgba(155,29,32,0.08)
Gradyan Arka Planı Sağ Renk: rgba(255,255,255,0)
Gradyan Yönü: 45deg
Başlangıç ​​Konumu: %25
Bitiş Konumu: %0

Sütun 2 Degrade Arka Plan Sol Renk: rgba(255,255,255,0)
Sütun 2 Degrade Arka Plan Sağ Renk: #ffffff
Sütun 2 Gradyan Yönü: 45deg
Sütun 2 Başlangıç ​​Konumu: %65
Sütun 2 Bitiş Konumu: %0

Bu arka plan gradyan tasarımlarının anahtarı, hepsinin aynı 45 derece gradyan yönüne sahip olmasıdır. Ardından, tasarımı eşit aralıklarla yerleştirmek için başlangıç ​​konumunu kullanabilirsiniz.

Liste Tasarımı #2 için Stil Ayarları

Bu noktada, listelerimizin tasarımlarını benzersiz şekillerde değiştirirken gerçekten biraz eğlenebiliriz. Bu ikinci örnek için, tasarımınızı birkaç küçük değişiklikle dönüştürmenin ne kadar kolay olduğunu size göstereceğim. İlk sütundaki metin modülüne gidin ve ayarları aşağıdaki gibi güncelleyin:

İlk önce arka plan gradyanını silin.
Sırasız Liste Yazı Tipi Ağırlığı: Orta
Sırasız Liste Metin Rengi: rgba(0,0,0,0.5)
Sıralı Liste Yazı Tipi Ağırlığı: Normal
Sıralı Liste Metin Rengi: #9b1d20
Başlık 5 Yazı Ağırlığı: İnce
Başlık 5 Metin Rengi: rgba(0,0,0,0.8)
Başlık 5 Metin Boyutu: 5vw (masaüstü)

Şimdi modül stillerini sağ sütundaki metin modülüne kopyalayın.

İşte ikinci örneğimizin son tasarımı.

Liste Tasarımı #3

Üçüncü örnek için ortalanmış tek sütunlu liste tasarımına bir örnek vermenin iyi olacağını düşündüm. Bu tasarımı oluşturmak için ikinci örnek bölümü çoğaltın. Yeni çoğaltılan bölümde, satır yapısını bir sütun olarak değiştirin ve ardından ikinci metin modülünü silin.

Şimdi bölüm ayarlarını yeni degrade arka plan renkleri ile güncelleyin:

Degrade Arka Plan Sol Renk: #559CAD
Degrade Arka Plan Sağ Renk: #4f6d7a

Satır ayarlarını yeni bir sol degrade arka plan rengiyle güncelleyin:

Degrade Arka Plan Sol Renk: #4f6d7a

Ardından metin modülüne yeni bir arka plan gradyanı ekleyin.

Gradyan Arka Planı Sol Renk: rgba(255,255,255,0)
Degrade Arka Plan Sağ Renk: #559cad
Gradyan Yönü: 45deg
Başlangıç ​​Konumu: %75
Bitiş Konumu: %0

Bu, tek sütunlu bir liste için liste tasarımı #2'deki simetrik arka plan tasarımının daha koyu bir versiyonunu oluşturur. Bu tasarımın anahtarı, bölüme, satıra ve modüle bir tane ekleyerek arka plan gradyanlarını katmanlamaktır.

Liste Tasarımı #3 için Stil Ayarları

Bu üçüncü örnek için, merkeze hizalanmış bir listenin neye benzediğini size göstermek istiyorum. Ve sıralı liste öğesi için daha geleneksel bir ondalık/sayı stili kullanacağım.

Metin modülü ayarlarına gidin ve aşağıdakileri güncelleyin:

Sıralı Liste Yazı Tipi: Poppins
Sıralı Liste Yazı Tipi Ağırlığı: Ağır
Sıralı Liste Metni Hizalama: Merkez
Sıralı Liste Metin Boyutu: 4vw (masaüstü), 50px (tablet)
Sıralı Liste Metin Rengi: #f4f1bb
Sıralı Liste Stil Türü: ondalık
Sıralı Liste Stili Pozisyonu: İçeride
Sıralı Liste Öğesi Girintisi: 0vw

(Not: Stil konumunun iç olarak değiştirilmesi, sayının bu tasarım için uygun olan başlık metninin üzerinde yığılmasına neden olur.)

Sırasız Liste Yazı Tipi Ağırlığı: Hafif
Sırasız Liste Metin Rengi: #ffffff

Başlık 5 Yazı Tipi: Lato
Başlık 5 Yazı Ağırlığı: İnce
Başlık 5 Harf Aralığı: 6vw (masaüstü), 70px (tablet), 40px (akıllı telefon)
Başlık 5 Metin Rengi: #ffffff
Başlık 5 Metin Boyutu: 6vw

Özel Dolgu (masaüstü): %15 Sol, %15 Sağ
Özel Dolgu (tablet): %5 Sol, %5 Sağ

Bu tasarım için akıllı telefondaki özel 50px sol dolguyu da çıkarmalısınız.

İşte son tasarım.

Liste Tasarımı #4

Bu dördüncü örnek için, daha minima-“liste” tasarımı ile gideceğim (bakın orada ne yaptım?). Sıralı liste için, Lato Fontunda büyük Büyük Romen Rakamları kullanacağım. Ayrıca her modüle bir kutu gölgesi ekleyerek listeyi çerçeveleyeceğim.

Liste Tasarımı #4 için Stil Ayarları

Bu liste tasarımını hızlı bir şekilde başlatmak için ilk bölümü liste tasarımı #1 ile çoğaltın. Ardından yeni bölümdeki ilk metin modülü ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan gradyanını silin.

Sıralı Liste Yazı Tipi: Lato
Sıralı Liste Yazı Tipi Ağırlığı: Hafif
Sıralı Liste Metin Rengi: #000000
Sıralı Liste Metin Boyutu: 6vw
Sıralı Liste Stil Türü: üst-roman
Sıralı Liste Öğesi Girintisi: 0vw

Başlık 5 Yazı Tipi: Lato
Başlık 5 Yazı Ağırlığı: Kalın
Başlık Yazı Tipi Stili: Altı Çizili
Başlık 5 Alt Çizgi Rengi: rgba(0,0,0,0.14)
Başlık 5 Alt Çizgi Stili: çift
Başlık 5 Metin Rengi: #000000
Başlık 5 Metin Boyutu: 40px

Özel Dolgu: 3vw Sol, 3vw Sağ

Önceki tasarımdan taşınan tablet ve akıllı telefon için özel sol dolguyu silin.

Kutu Gölgesi Yatay Konum: 6px
Kutu Gölge Dikey Konumu: 6px
Kutu Gölge Yayılma Gücü: 0px
Kutu Gölge Bulanıklığı Gücü: 0px
Gölge Rengi: #000000
Kutu Gölge Konumu: İç Gölge

Modül Stillerini ikinci sütuna kopyalayın. Ardından kutu gölge konumunu dış gölgeye güncelleyin.

İşte nihai sonuç.

Bu kadar!

Son düşünceler

Yukarıdaki örneklerde html listelerinizi oluşturup ince ayar yaptıktan sonra, bir Divi uzmanı gibi metin modülü ayarlarının gücünden nasıl yararlanacağınızı daha iyi anlamalısınız. Artık içeriğinizde sıkıcı liste tasarımlarıyla yetinmek zorunda kalmayacaksınız. Umarım bu teknikler, bir sonraki projeniz için harika liste tasarımları oluşturmanız için size ilham verir.

Sizden bazı örnekler görmeyi çok isterim, bu yüzden lütfen yorumlarda paylaşmaktan çekinmeyin.

Şerefe!