Yaratıcı liste tasarımları için divi metin modülünün gücünü serbest bırakma
Benzersiz bir liste tasarımı yapmak, web tasarımının önemli bir yönüdür. Okuyucu, tasarlanan listenin yapısını ve estetiğini takdir eder, çünkü bilgileri daha hızlı işlemelerine izin verir. Divi metin modülü ile, normal bir listeyi güzel bir sanat eserine dönüştürmek için ihtiyacınız olan her şeye sahipsiniz. Divi metin modülü ayarları, liste dahil içeriğinizde farklı HTML öğelerini hedeflemenize ve düzenlemenize olanak tanır. Bazı tasarım teknikleriyle, listenizi şaşırtıcı bir şekilde ayarlamak için bu seçeneğin gücünü kullanabilirsiniz.
Bu öğreticide, Divi’de nasıl benzersiz bir liste tasarımı oluşturabileceğinizi göstereceğim. Başlayalım. Aşağıdaki Sneak Peek, bu öğreticide yapacağımız dört liste tasarımının bir gözüdür.
İşte sipariş edilen listenin temel yapısı:
Liste öğesi
Liste öğesi
Liste öğesi
Varsayılan olarak aşağıdakilere benzeyecek:
eşyaların listesi
eşyaların listesi
eşyaların listesi
Aslında Divi metin modülünde WYSIWYG düzenleyicisini kullanarak HTML listesini yapabilirsiniz. Görsel sekmede düzenlediğinizden emin olun ve sadece liste öğenizi yazın, her birinden sonra bir satır duraklaması (Enter tuşuna basın) olduğundan emin olun. Ardından içeriği vurgulayın ve editörün üst kısmındaki liste simgelerinden birini tıklayın.
HTML’nin nasıl olduğunu görmek için metin sekmesini açın:
Sırasız liste öğesi
Sipariş edilen liste öğesi
Sırasız liste öğesi
Sipariş edilen liste öğesi
Sırasız liste öğesi
Varsayılan olarak, bu konaklama HTML listesi şöyle görünecektir:
Sipariş edilen liste öğesi
Liste öğesi sıralanmadı
Sipariş edilen liste öğesi
Liste öğesi sıralanmadı
Sipariş edilen liste öğesi
Liste öğesi sıralanmadı
Listeye başka HTML etiketleri de ekleyebilirsiniz. Örneğin, H5 etiketinde sipariş edilen liste öğesini sarabiliriz. Sonuçlar şöyle görünecek:
Sipariş edilen liste öğesi
Sırasız liste öğesi
Sipariş edilen liste öğesi
Sırasız liste öğesi
Sipariş edilen liste öğesi
Sırasız liste öğesi
Endişelenme, bu öğretici için alacağım kadar karmaşık. Ancak fark etmeniz gereken şey, bu yapının metin modülünde güçlü bir divi tasarım ayarlarıyla birbirleriyle bağımsız olarak düzenlenebilen üç farklı etikete (OL, UL ve H5) sahip olduğudur. Bu yapıya daha sonra ihtiyacımız olacak, ancak Şimdi, tasarımımızı görsel bir yapımcıda başlatmak için sayfalarımızı başlatalım ve çalıştıralım. Yeni bir sayfa için bir liste için parça ve satır yapın ve görsel bir oluşturucu kullanın. Ardından sıfırdan bir sayfa oluşturma seçeneğini seçin. Ardından, iki sıra sütun içeren normal bölümü yapın. Satırınızın ilk sütununda metin modülünde bir HTML listesi yapın, yeni bir metin modülü ekleyin. Metin ayarlarındaki içerik kutusunda aşağıdaki HTML listesini girin:
Tasarım
Lorem iPsum Dolor oturma amet, Kavram Adipiscing elit. Tamsayı Nec Odio. Praecent Libero. Sed cursus ante dapibus sessizdir. Sed Nisi. Nulla Quis Sem, Nibh Elementum Imperdiet’te.
Geliştirme
Lorem iPsum Dolor oturma amet, Kavram Adipiscing elit. Tamsayı Nec Odio. Praecent Libero. Sed cursus ante dapibus sessizdir. Sed Nisi. Nulla Quis Sem, Nibh Elementum Imperdiet’te.
teslim
Lorem iPsum Dolor oturma amet, Kavram Adipiscing elit. Tamsayı Nec Odio. Praecent Libero. Sed cursus ante dapibus sessizdir. Sed Nisi. Nulla Quis Sem, Nibh Elementum Imperdiet’te.
Bu yapı eskisinden tanıdık görünmelidir. H5 başlık metni sıralı bir liste öğesi olacak ve kukla metin “Lorem Ipsum” sıralanmayan bir liste öğesi olacaktır. Varsayılan şöyle görünecektir:
Şimdiye kadar çok etkileyici değil, biliyorum. Ancak bu içerikle, şimdi Divi ile listemizi tasarlamanın eğlenceli bir parçasına başlayabiliriz! Önemli Not: Her tasarım ilk tasarımın bir değişiklik versiyonu olduğundan, bu öğreticideki ilk tasarıma başlamak ve düzenli tutmak daha iyi olacaktır. Tasarım Listesi #1
Yeni başlayanlar için, gradyan arka plan metni modülümüzü aşağıdaki gibi verelim: Sol renk gradyan arka plan: rGBA (0.0,0,0.0.04) Sağ renk gradyan arka plan: RGBA (255,255,255,0) gradyan yönü: 90 derece Başlangıç Pozisyonu:% 25 Nihai Pozisyon:% 0
Liste öğesini düzenleme Sıralandı Şimdi Tasarım sekmesini açın ve metin anahtarının altındaki Liste Sıralama sekmesini seçin.
Sonra aşağıdakileri güncelleyin: Yazı tipi Sipariş Edilen Liste: Abril Fatface Ağırlığı Yasağı Sipariş Siparişi Listesi: Renk Kalınlığı Metin Listesi Sipariş Edildi: Sipariş Edilen Sipariş: Sıralı Listenin Yüksekliği: 1.6EM Stil Listesi Sıralı: Ondalık -Detan -Zero Sipariş edilen stilin pozisyonu
- >
Şimdi sonucuna bakalım.
Tasarım Listesi #2 Bu ikinci liste tasarımının örnekleri için, bize bir başlangıç yapmak için yaptığımız ilk bölümü çoğaltacağım.Ayrıca bir arka plan gradyanı kullanarak tasarım listesine harika bir arka plan sunacağım.Özel Arka Plan Gradyan Tasarımı Oluşturma Yinelenen bölümde, aşağıdaki gradyanın ayarlarını güncelleyin: Sol renk gradyan arka plan: #fffff sağ renk gradyan arka plan: RGBA (155,29,32,08)% 50 Nihai Konum:% 0 Kaydet Ayarlar.Şimdi satır ayarlarınızı aşağıdaki arka plan gradyanı ile güncelleyin: Sol renk gradyan arka plan: RGBA (155,29,32.0.08) Sağ renk gradyan arka plan: RGBA (255,255,255.0) Gradyan Yönü: 45 Başlangıç Pozisyonu:% 25 Son Pozisyon:% 0 Sütun 2 arka plan sol renk gradyanı: rgba (255,255,255.0) sütun 2 renk arka plan sağ gradyan: #ffffff sütun 2 yön eğimi: 45deg sütun 2 Başlangıç Konumu:% 65 Sütun 2 Son Konum:% 0% Bu arka plan gradyan tasarımının anahtarı, hepsinin 45 derecelik aynı gradyan yönüne sahip olmasıdır. Ardından, tasarımda eşit olarak yer açmak için başlangıç konumunu kullanabilirsiniz. Stil Ayarları #2 Liste Tasarımı için bu noktada, liste tasarımımızı benzersiz bir şekilde değiştirerek eğlenebiliriz. Bu ikinci örnek için, tasarımınızı sadece birkaç küçük değişiklik ile değiştirmenin ne kadar kolay olduğunu göstereceğim. İlk sütunda metin modülünü açın ve ayarları aşağıdaki gibi güncelleyin: Öncelikle arka plan gradyanını silin. Yazı tipi ağırlık oybirliğiyle: Orta renkli metin sırayla değil: RGBA (0.0,0,0,0.5) Yazı tipi Ağırlık Listesi Sipariş: Normal Renk Metin Listesi Sipariş Edildi: #9B1D20 Başlık 5 Yazı Tip Ağırlığı: İnce Başlık 5 Renk Metin: RGBA (0.0,0 , 0.8) Başlık 5 Metin Boyutu: 5VW (Masaüstü) Şimdi modül stilini sağ sütundaki metin modülüne kopyalayın. İşte ikinci örneğimizin son tasarımı. Tasarım Listesi #3 Üçüncü örnek için, merkezi bir sütun tasarımına bir örnek vermenin daha iyi olacağını düşünüyorum. Bu tasarımı yapmak için ikinci örneği çoğaltın. Yeni kopya bölümünde, satır yapısını bir sütuna değiştirin, ardından ikinci metin modülünü silin. Şimdi yeni gradyanın arka planının ayarlarını güncelleyin: gradyanın arka planının sol rengi: #559CAD Eğitimin arka planının doğru rengi: #4F6D7A Satır ayarlarını yeni sol gradyanın arka plan rengiyle güncelleyin: Sol Gradyanın arka planının rengi: #4F6D7A Daha sonra metin modülüne degrad yeni arka plan ekleyin.Gradyan Arka Planın Sol Rengi: RGBA (255,255,255.0) Sağ Renk Gradyan Arka Plan: #559CAD Gradyan Yönü: 45deg Başlangıç Pozisyonu:% 75 Nihai Pozisyon:% 0 Bu, bir liste için tasarım listesindeki simetrik arka plan tasarımının daha koyu bir versiyonunu oluşturur #2 bir sütunun.Bu tasarımın anahtarı, bölüm, satır ve modüle bir tane ekleyerek arka plan gradyanını kaplamaktır. Stil Ayarları #3 Liste Tasarımı Bu üçüncü örnek için, orta ortalama listesinin neye benzediğini göstermek istiyorum. Ve sipariş edilen liste öğesi için, daha geleneksel bir ondalık/sayı kullanacağım. Aşağıdaki metin ve güncelleme modül ayarlarını açın: Yazı tipi Yazı Tipi Sipariş: Poppins Sipariş edilen listenin ağırlığı: Tohum metin tipi Ağırlık: Orta metin boyutu kayıt: 4VW (masaüstü), 50px (tablet) renk metin listesi Sıralı : #F4f1bb Stil Türü Sipariş: Sipariş Siparişi Sipariş: İçeride Liste Öğesini Girme Sipariş Edilen: 0VW (Not: İç kuvvetin değiştirilmesi, sayının bu tasarıma uygun başlık metninin üstünde birikmesine neden olacaktır.) Hafif: Hafif: Renk Metin Listesi Sıralama: #fffff Başlık 5 Yazı Tipi: Lato Başlık 5 Yazı Tipi Ağırlık: İnce Başlık 5 Alan Harf: 6VW (masaüstü), 70px (tablet), 40px (akıllı telefon) Başlık 5 Renk Metin: #fffff Başlık 5 Metin Boyutu : 6VW dolgu özel (masaüstü):% 15 sol,% 15 sağ özel dolgu (tablet):% 5 sol,% 5 sağ da bu tasarım için bir akıllı telefonda 50 piksel sol bir yatak vermeniz gerekiyor. Son tasarım aşağıdadır. Tasarım Listesi #4 Bu dördüncü örnek için, daha minimal bir “liste” tasarımı kullanacağım (orada ne yaptığıma bakın?). Sıralı liste için, Lato yazı tipinde bir Roma büyük harf kullanacağım. Ayrıca her modüle kutunun bir gölgesi ekleyerek listeyi çerçeveleyeceğim. Stil Ayarları #4 Liste Tasarımı için Bu Listenin Tasarımını Başlatmak İçin İlk Bölümü Bir 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. Yazı tipi Yazı Tipi Sipariş: Lato Ağırlık Yazı Tipi Sipariş Listesi: Hafif Renk Metin Listesi Sipariş Edildi: #000000 Metin Boyutu Kayıt Sipariş: 6VW Stil Tür Listesi: Roman Girme Ürün Listesi Sipariş Edilen: 0VW Başlık 5 Yazı Tipi: Lato Başlık Yazı Tipi: Başlık: Alt çizgi başlık 5 Renk Alt Hat: RGBA (0.0,0,0.0.14) Başlık 5 Alt çizgi stil: Çift Başlık 5 Renk Metin: #000000 Başlık 5 Metin Boyutu: 40px Pilding Özel: Sol 3VW, Sağ 3VW Sil Özel Önceki tasarımdan getirilen tabletler ve akıllı telefonlar için sol dolgu. Yatay konum Gölge Kutusu: 6px Dikey Konum Gölge Kutusu: 6px Güç Gölge Kutusu Yayıyor: 0px Bulanık Güç Gölge Kutusu: 0px Renk Renk Gölgesi: #000000 Gölge Konum Kutusu: Kopya Stili Modülünde Gölge İkinci sütuna. Ardından kutunun gölgesinin konumunu dış gölgeye güncelleyin. Sonuçlar aşağıdadır.
